:root{--ink: #efe9e2;--ink-dim: #9b93a6;--magma: #ff5a2c;--magma-deep: #8c1f0a;--oasis: #2ee6a8;--oasis-deep: #0a5c46;--aqua: #4fd8ff;--bg0: #120b16;--bg1: #1d1226;--gold: #ffc94d;--danger: #ff4d5e;--card-bg: linear-gradient(165deg, #2a1f36 0%, #191021 100%);--safe-top: env(safe-area-inset-top, 0px);--safe-bottom: env(safe-area-inset-bottom, 0px);font-size:clamp(14px,2.6vmin,17px)}*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none}html,body,#root{width:100%;height:100%;overflow:hidden;overscroll-behavior:none}body{background:var(--bg0);color:var(--ink);font-family:Avenir Next,Segoe UI,system-ui,-apple-system,sans-serif;touch-action:manipulation;position:fixed;inset:0}button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}.app{width:100%;height:100%;position:relative;display:flex;flex-direction:column;max-width:560px;margin:0 auto;overflow:hidden;background:radial-gradient(120% 90% at 50% 0%,var(--bg1) 0%,var(--bg0) 70%)}.rotate-gate{display:none}@media(orientation:landscape)and (max-height:480px){.rotate-gate{display:flex;position:fixed;inset:0;z-index:99;background:var(--bg0);flex-direction:column;align-items:center;justify-content:center;gap:1rem;text-align:center}.rotate-gate .phone{width:42px;height:72px;border:3px solid var(--aqua);border-radius:8px;animation:rotate-hint 1.6s ease-in-out infinite}}@keyframes rotate-hint{0%,20%{transform:rotate(90deg)}55%,to{transform:rotate(0)}}.ignite-overlay{position:fixed;inset:0;z-index:30;pointer-events:none}.ignite-orb{position:absolute;left:50%;top:42%;width:60px;height:60px;margin:-30px 0 0 -30px;border-radius:50%;background:radial-gradient(circle at 40% 35%,#ffd08a,var(--magma) 45%,var(--magma-deep) 90%);box-shadow:0 0 42px 10px #ff5a2c73;animation:breathe 1.6s ease-in-out infinite}.ignite-label{position:absolute;left:0;right:0;top:calc(42% + 46px);display:flex;flex-direction:column;align-items:center;gap:.55rem;text-align:center;transition:opacity .9s ease-out .45s;letter-spacing:.3em;color:var(--ink-dim);font-size:.8rem}.ignite-label.is-hidden{opacity:0;transition:opacity .35s ease}.tap-label b{font-size:clamp(.95rem,4.2vw,1.15rem);letter-spacing:.32em;font-weight:900;animation:tap-pulse 1.8s ease-in-out infinite}.tap-label .hint{font-size:.75rem;letter-spacing:.16em;color:var(--ink-dim);text-transform:uppercase}@keyframes tap-pulse{0%,to{opacity:1}50%{opacity:.45}}@keyframes breathe{0%,to{transform:scale(1)}50%{transform:scale(1.12)}}.cinematic{position:absolute;inset:0;z-index:20;background:#000;overflow:hidden;--cine-hero-ground: 62%}.cinematic canvas{position:absolute;inset:0;width:100%;height:100%}.cine-text{position:absolute;left:0;right:0;top:max(4.5rem,calc(var(--safe-top, 0px) + 3.2rem));bottom:auto;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;text-align:center;padding:0 clamp(1.1rem,5.5vw,1.75rem);pointer-events:none}.cinematic.world-oasis .cine-text:not(.on-stage){top:max(4.2rem,calc(var(--safe-top, 0px) + 2.8rem))}.cine-text.on-stage{top:var(--cine-stage-text, 48%);transform:translateY(-50%);justify-content:center}.cine-text:before{content:"";position:absolute;left:0;right:0;top:-1.2rem;bottom:-1.4rem;background:radial-gradient(ellipse 90% 100% at 50% 40%,rgba(0,0,0,.78),rgba(0,0,0,.4) 55%,transparent 100%);z-index:-1}.cine-text.on-stage:before{top:-1.6rem;bottom:-1.6rem;background:radial-gradient(ellipse 92% 110% at 50% 50%,rgba(0,0,0,.8),rgba(0,0,0,.4) 55%,transparent 100%)}.cine-text h2{font-size:clamp(1.15rem,5.2vw,1.65rem);font-weight:800;letter-spacing:.14em;text-transform:uppercase;line-height:1.2;max-width:18ch;text-shadow:0 2px 8px rgba(0,0,0,.95),0 2px 26px rgba(0,0,0,.9)}.cine-text p{margin-top:.75rem;max-width:min(28ch,92vw);color:var(--ink);font-size:clamp(.92rem,3.8vw,1.05rem);line-height:1.5;text-shadow:0 1px 6px rgba(0,0,0,.95),0 1px 14px rgba(0,0,0,.9)}@keyframes cine-fade-in{0%{opacity:0}to{opacity:1}}@keyframes cine-fade-out{0%{opacity:1}to{opacity:0}}.cine-hero-label{position:absolute;left:0;right:0;text-align:center;background:radial-gradient(ellipse 78% 140% at 50% 50%,rgba(0,0,0,.78),transparent 100%);padding:.55rem 1rem .7rem;display:flex;flex-direction:column;align-items:center;gap:.12rem;pointer-events:none;max-width:100%;box-sizing:border-box}.cinematic.world-basalt.has-hero .cine-hero-label{top:max(4.5rem,calc(var(--safe-top, 0px) + 3.2rem));transform:none}.cinematic.world-oasis.has-hero .cine-hero-label{top:var(--cine-hero-ground, 62%);transform:none}.cine-hero-label .epithet{font-size:clamp(.58rem,2.6vw,.7rem);letter-spacing:.28em;text-transform:uppercase;color:var(--ink-dim);text-shadow:0 1px 10px rgba(0,0,0,.9)}.cine-hero-label .name{font-weight:900;letter-spacing:.16em;text-transform:uppercase;font-size:clamp(1.15rem,5.4vw,1.55rem);line-height:1.15;max-width:16ch;text-shadow:0 2px 22px rgba(0,0,0,.95)}.tap-to-begin{position:absolute;inset:0;z-index:6;color:var(--ink)}.tap-to-begin:before{content:"";position:absolute;inset:0;background:radial-gradient(120% 90% at 50% 0%,var(--bg1) 0%,var(--bg0) 70%);animation:ignite-reveal 1.7s ease-in-out both;pointer-events:none}@keyframes ignite-reveal{0%{opacity:1}25%{opacity:1}to{opacity:.6}}.skip-btn{position:absolute;right:1rem;bottom:calc(1rem + var(--safe-bottom));z-index:5;padding:.6rem 1.3rem;border-radius:999px;border:1px solid rgba(255,255,255,.3);background:#00000073;color:var(--ink);letter-spacing:.1em;font-size:.85rem;backdrop-filter:blur(4px)}.menu{flex:1;display:flex;flex-direction:column;align-items:center;padding:calc(2rem + var(--safe-top)) 1.4rem calc(1.6rem + var(--safe-bottom));position:relative;z-index:1;overflow-y:auto}.menu-bg{position:absolute;inset:0;z-index:-1;width:100%;height:100%}.game-title{text-align:center;margin-top:5vh}.game-title .pre{color:var(--ink-dim);letter-spacing:.5em;font-size:.72rem;text-transform:uppercase}.game-title h1{font-size:2.7rem;font-weight:900;letter-spacing:.06em;line-height:1.02;filter:drop-shadow(0 3px 18px rgba(255,90,44,.35))}.game-title h1 span{display:inline-block;background:linear-gradient(180deg,#fff3c4 0%,#ffd9a0 14%,#ffab48 32%,var(--magma) 54%,#c23a10 74%,#7a1b06 100%);background-size:100% 300%;background-position:50% 22%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:flame-lick var(--lick-dur, 4s) ease-in-out var(--lick-delay, 0s) infinite,flame-pass 8.5s ease-in-out var(--pass-delay, 0s) infinite}.game-title h1 span:nth-child(1){--lick-dur: 3.9s;--lick-delay: -2.9s;--pass-delay: 0s}.game-title h1 span:nth-child(2){--lick-dur: 3.2s;--lick-delay: -.7s;--pass-delay: .65s}.game-title h1 span:nth-child(3){--lick-dur: 4.6s;--lick-delay: -3.6s;--pass-delay: 1.3s}.game-title h1 span:nth-child(4){--lick-dur: 3.5s;--lick-delay: -1.5s;--pass-delay: 1.95s}.game-title h1 span:nth-child(5){--lick-dur: 4.2s;--lick-delay: -2.2s;--pass-delay: 2.6s}.game-title h1 span:nth-child(6){--lick-dur: 3s;--lick-delay: -1s;--pass-delay: 3.25s}.game-title h1 span:nth-child(7){--lick-dur: 4.9s;--lick-delay: -4.1s;--pass-delay: 3.9s}.game-title h1 span:nth-child(8){--lick-dur: 3.7s;--lick-delay: -1.9s;--pass-delay: 4.55s}@keyframes flame-lick{0%{background-position:50% 20%}13%{background-position:50% 46%}27%{background-position:50% 28%}44%{background-position:50% 60%}56%{background-position:50% 32%}71%{background-position:50% 52%}86%{background-position:50% 24%}to{background-position:50% 20%}}@keyframes flame-pass{0%,22%,to{filter:brightness(1)}8%{filter:brightness(1.45) saturate(1.15)}15%{filter:brightness(1.08)}}.game-title .sub{margin-top:.45rem;font-size:1.18rem;font-weight:800;letter-spacing:.3em;text-transform:uppercase;background:linear-gradient(100deg,var(--aqua) 0%,var(--oasis) 22%,#d9fff4 34%,#ffffff 40%,#a8f4ff 46%,var(--aqua) 60%,var(--oasis) 82%,var(--aqua) 100%);background-size:240% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 2px 12px rgba(46,230,168,.3));animation:title-water 5.2s linear infinite}@keyframes title-water{0%{background-position:140% 0}to{background-position:-100% 0}}.menu-actions{margin-top:auto;width:min(100%,300px);align-self:center;display:flex;flex-direction:column;gap:.85rem;padding-top:2rem}.legal-links{display:flex;align-items:center;justify-content:center;gap:.55rem;margin-top:.85rem;font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-dim)}.legal-links a{color:inherit;text-decoration:none;padding:.35rem}.legal-links a:focus-visible,.legal-links a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:.2rem}.menu-cta{display:flex;align-items:center;justify-content:center;gap:.65rem;min-height:3.5rem;border-radius:16px}.menu .menu-actions .menu-cta{animation:cta-breathe ease-in-out infinite}.menu .menu-actions .menu-cta:nth-of-type(1){animation-duration:3.6s}.menu .menu-actions .menu-cta:nth-of-type(2){animation-duration:4.4s;animation-delay:-1.7s}.menu .menu-actions .menu-cta:nth-of-type(3){animation-duration:5.2s;animation-delay:-3.1s}.menu .menu-actions .menu-cta:active{animation:none}@keyframes cta-breathe{0%,to{transform:scale(1);filter:brightness(.97)}50%{transform:scale(1.04);filter:brightness(1.18)}}.menu-cta .cta-icon{font-size:1.15rem;line-height:1;opacity:.92;filter:drop-shadow(0 1px 3px rgba(0,0,0,.4))}.menu-cta .cta-label{letter-spacing:.13em;text-shadow:0 1px 2px rgba(0,0,0,.3)}.btn{position:relative;padding:1.02rem 1.5rem;border-radius:16px;font-weight:800;font-size:1.06rem;letter-spacing:.08em;text-transform:uppercase;text-align:center;transition:transform .12s ease,filter .12s ease;overflow:hidden}.btn:active{transform:scale(.965);filter:brightness(1.15)}.btn-primary{background:linear-gradient(180deg,#ffffff24,#fff0 40%),linear-gradient(165deg,#ff7a35,#e8431a 55%,#9c2408);color:#fff7ef;border:1px solid rgba(255,168,118,.42);box-shadow:0 10px 26px -8px #e8431a80,0 2px 5px #00000059,inset 0 1px #ffffff42,inset 0 -2px 8px #5a100266}.btn-secondary{background:linear-gradient(160deg,#2bd9a5,#0d8f6b 60%,#085943);color:#eafff7;box-shadow:0 6px 22px #2ee6a84d,inset 0 1px #ffffff4d}.btn-ghost{border:1px solid rgba(255,255,255,.18);background:#ffffff0d;color:var(--ink-dim);font-size:.9rem}.profile-chip{margin-top:1.5rem;display:flex;gap:1.4rem;padding:.7rem 1.3rem;border-radius:999px;background:#ffffff0f;border:1px solid rgba(255,255,255,.1);font-size:.82rem;color:var(--ink-dim)}.profile-chip b{color:var(--ink)}.net-badge{margin-top:.8rem;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-dim);display:flex;align-items:center;gap:.45rem}.net-badge .dot{width:8px;height:8px;border-radius:50%}.net-badge .dot.online{background:var(--oasis);box-shadow:0 0 8px var(--oasis)}.net-badge .dot.local{background:var(--gold);box-shadow:0 0 8px var(--gold)}.faction-select{flex:1;display:flex;flex-direction:column;padding:calc(1.6rem + var(--safe-top)) 1.1rem calc(1.4rem + var(--safe-bottom));gap:1rem;overflow-y:auto}.faction-select h2{text-align:center;letter-spacing:.24em;text-transform:uppercase;font-size:1rem;color:var(--ink-dim)}.faction-card{position:relative;border-radius:20px;padding:1.15rem 1.15rem 1rem;border:2px solid transparent;overflow:hidden;text-align:left;transition:transform .15s ease,border-color .15s ease}.faction-card:active{transform:scale(.98)}.faction-card.magma{background:linear-gradient(150deg,#601a08d9,#1e080cf2),radial-gradient(130% 100% at 85% 10%,rgba(255,122,40,.5),transparent 60%)}.faction-card.oasis{background:linear-gradient(150deg,#084a3ad9,#06161af2),radial-gradient(130% 100% at 85% 10%,rgba(46,230,168,.42),transparent 60%)}.faction-card.selected.magma{border-color:var(--magma);box-shadow:0 0 30px #ff5a2c73}.faction-card.selected.oasis{border-color:var(--oasis);box-shadow:0 0 30px #2ee6a866}.faction-card h3{font-size:1.28rem;font-weight:900;letter-spacing:.04em}.faction-card .tagline{color:var(--ink-dim);font-size:.82rem;margin-top:.15rem;font-style:italic}.roster{margin-top:.8rem;display:grid;grid-template-columns:repeat(7,1fr);gap:.32rem}.roster .unit-dot{aspect-ratio:1;border-radius:10px;background:#00000059;border:1px solid rgba(255,255,255,.12);display:flex;align-items:center;justify-content:center;overflow:hidden}.roster canvas{width:100%;height:100%}.bot-strength{margin-top:auto;width:min(100%,22rem);align-self:center;display:grid;grid-template-columns:auto minmax(10.5rem,1fr);align-items:center;gap:.42rem .75rem;padding:.62rem .7rem .55rem .85rem;border:1px solid rgba(255,255,255,.12);border-radius:16px;background:linear-gradient(145deg,#ffffff12,#ffffff06),#0c0812b8;box-shadow:inset 0 1px #ffffff0d,0 10px 28px #0003}.bot-strength-label{color:var(--ink);font-size:.72rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap}.bot-strength-toggle{min-width:0;display:grid;grid-template-columns:1fr 1fr;gap:3px;padding:3px;border-radius:12px;background:#00000057;border:1px solid rgba(255,255,255,.08)}.bot-strength-toggle button{min-height:2rem;padding:.35rem .55rem;border-radius:9px;color:var(--ink-dim);font-size:.68rem;font-weight:900;letter-spacing:.1em;text-transform:uppercase;transition:color .15s ease,background .15s ease,box-shadow .15s ease}.bot-strength-toggle button.selected{color:#fff4e8;background:linear-gradient(180deg,#ff7037e6,#b82d12eb);box-shadow:inset 0 1px #ffffff47,0 0 14px #ff53234d}.bot-strength-hint{grid-column:1 / -1;color:var(--ink-dim);font-size:.64rem;letter-spacing:.035em;text-align:center}.faction-select>.menu-actions{margin-top:0;padding-top:.15rem}.matchmaking{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.6rem;padding:2rem;text-align:center}.scan-ring{width:110px;height:110px;border-radius:50%;border:3px solid rgba(79,216,255,.16);border-top-color:var(--aqua);animation:spin 1.15s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.matchmaking .status{color:var(--ink-dim);min-height:2.4em}.game-screen{flex:1;position:relative;display:flex;flex-direction:column;overflow:hidden}.game-canvas-wrap{flex:1;position:relative;touch-action:none}.game-canvas-wrap canvas{position:absolute;inset:0}.hud-top{flex:none;padding:calc(.45rem + var(--safe-top)) .7rem .4rem;display:flex;flex-direction:column;gap:.34rem;pointer-events:none;background:linear-gradient(180deg,#08060ce6,#08060c8c)}.hud-row{display:flex;align-items:center;justify-content:space-between;gap:.6rem}.phase-pill{padding:.28rem .85rem;border-radius:999px;font-size:.72rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;background:#0000008c;border:1px solid rgba(255,255,255,.16);backdrop-filter:blur(6px)}.phase-pill.basalt{color:#ffab7a}.phase-pill.oasis{color:#7dffce}.timer{font-variant-numeric:tabular-nums;font-weight:900;font-size:1.12rem;padding:.22rem .8rem;background:#0000008c;border:1px solid rgba(255,255,255,.16);border-radius:12px;backdrop-filter:blur(6px)}.timer.urgent{color:var(--danger);animation:pulse-danger 1.2s infinite}@keyframes pulse-danger{0%,to{transform:scale(1)}50%{transform:scale(1.07)}}.meter-bar{position:relative;height:14px;border-radius:8px;background:#0009;border:1px solid rgba(255,255,255,.14);overflow:hidden;display:flex}.capture-pct{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:.6rem;font-weight:900;letter-spacing:.14em;color:#fff;text-shadow:0 1px 4px rgba(0,0,0,.95);pointer-events:none}.objective-bars{display:flex;align-items:center;gap:.45rem}.ob-vs{font-size:.72rem;color:var(--ink-dim);text-shadow:0 0 8px rgba(255,255,255,.25)}.obelisk-track{flex:1;display:flex;align-items:center;gap:.35rem;min-width:0}.obelisk-track .ob-label{font-size:.56rem;font-weight:900;letter-spacing:.12em;color:var(--ink-dim);white-space:nowrap}.obelisk-track .ob-hp{font-size:.66rem;font-weight:900;font-variant-numeric:tabular-nums;min-width:2.1em;text-align:center;text-shadow:0 1px 4px rgba(0,0,0,.9)}.obelisk-track.mine-side .ob-hp{color:#6de5ff}.obelisk-track.their-side .ob-hp{color:#ff8a7a}.ob-bar{flex:1;height:12px;border-radius:7px;background:#000000a6;border:1px solid rgba(255,255,255,.16);overflow:hidden}.obelisk-track.their-side .ob-bar{direction:rtl}.ob-bar .fill{height:100%;transition:width .5s ease;border-radius:7px}.ob-bar .fill.mine{background:linear-gradient(90deg,#29b8ff,var(--aqua))}.ob-bar .fill.theirs{background:linear-gradient(90deg,#ff8080,var(--danger))}.objective-pill{align-self:center;font-size:.62rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-dim);background:#0000007a;border:1px solid rgba(255,255,255,.1);border-radius:999px;padding:.18rem .7rem;backdrop-filter:blur(6px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}.meter-bar .mine{background:linear-gradient(90deg,#29b8ff,var(--aqua));transition:width .9s ease}.meter-bar .theirs{background:linear-gradient(90deg,var(--danger),#ff8080);margin-left:auto;transition:width .9s ease}.blessing-tag{align-self:center;font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);text-shadow:0 0 12px rgba(255,201,77,.6)}.ult-btn{position:absolute;right:.65rem;top:38%;z-index:6;width:62px;height:62px;border-radius:50%;background:radial-gradient(circle at 38% 32%,#ffd08a,var(--magma) 48%,#6d1503 95%);border:2px solid rgba(255,210,150,.75);box-shadow:0 0 22px 4px #ff6a2c8c,inset 0 2px 6px #fff6;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#fff4e4;font-size:.5rem;font-weight:900;letter-spacing:.08em;text-transform:uppercase;animation:ult-glow 2.1s ease-in-out infinite}.ult-btn .flame{font-size:1.35rem;line-height:1}@keyframes ult-glow{0%,to{box-shadow:0 0 18px 3px #ff6a2c73,inset 0 2px 6px #fff6}50%{box-shadow:0 0 34px 9px #ff8c2cbf,inset 0 2px 6px #fff6}}.ult-btn:disabled{filter:grayscale(.9) brightness(.55);animation:none;box-shadow:none}.ult-btn.arming{border-color:#fff;animation:pulse-danger .6s infinite}.hand-dock{position:relative;z-index:5;padding:.45rem .6rem calc(.6rem + var(--safe-bottom));background:linear-gradient(180deg,#0a060e00,#0a060ee0 26%,#08050cf7);display:flex;flex-direction:column;gap:.42rem}.aqua-bar{display:flex;align-items:center;gap:.5rem}.aqua-cells{flex:1;display:flex;gap:3px;height:12px}.aqua-cell{flex:1;border-radius:3px;background:#4fd8ff1f;border:1px solid rgba(79,216,255,.2);overflow:hidden;position:relative}.aqua-cell.full{background:linear-gradient(180deg,#9ceaff,var(--aqua) 55%,#1888b8);box-shadow:0 0 7px #4fd8ffa6}.aqua-count{font-weight:900;font-variant-numeric:tabular-nums;color:var(--aqua);font-size:.95rem;min-width:2.4ch;text-align:right}.army-count{font-weight:800;font-variant-numeric:tabular-nums;color:var(--ink-dim);font-size:.78rem;margin-left:.4rem;white-space:nowrap}.hand{display:grid;grid-template-columns:repeat(4,1fr);gap:.45rem}.card{position:relative;border-radius:13px;background:var(--card-bg);border:1.5px solid rgba(255,255,255,.13);padding:.4rem .3rem .34rem;display:flex;flex-direction:column;align-items:center;gap:.14rem;transition:transform .13s ease,border-color .13s ease,box-shadow .13s ease;overflow:hidden}.card .art{width:100%;aspect-ratio:1.35;border-radius:8px;overflow:hidden;background:radial-gradient(120% 120% at 50% 18%,#ffffff1a,#0006)}.card .art canvas{width:100%;height:100%}.card .name{font-size:.6rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}.card .cost{position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:radial-gradient(circle at 36% 30%,#b9f0ff,var(--aqua) 55%,#0e6c94);color:#05222e;font-size:.72rem;font-weight:900;display:flex;align-items:center;justify-content:center;box-shadow:0 1px 6px #00000080}.card.selected{transform:translateY(-8px) scale(1.04);border-color:var(--gold);box-shadow:0 8px 22px #ffc94d4d}.card.unaffordable{filter:grayscale(.65) brightness(.6)}.card.spell-card .name{color:#b9f7d8}.card:active{transform:scale(.96)}.card.selected:active{transform:translateY(-8px) scale(1)}.banner{position:absolute;left:50%;top:30%;transform:translate(-50%);z-index:8;text-align:center;pointer-events:none;animation:banner-in 3s ease both}.banner h2{font-size:1.7rem;font-weight:900;letter-spacing:.2em;text-transform:uppercase;text-shadow:0 0 30px currentColor}.banner p{color:var(--ink-dim);margin-top:.3rem}@keyframes banner-in{0%{opacity:0;transform:translate(-50%) scale(.8)}12%{opacity:1;transform:translate(-50%) scale(1.03)}20%{transform:translate(-50%) scale(1)}80%{opacity:1}to{opacity:0}}.toast{position:absolute;bottom:32%;left:50%;transform:translate(-50%);z-index:8;background:#000000b8;border:1px solid rgba(255,255,255,.18);padding:.5rem 1.1rem;border-radius:999px;font-size:.82rem;pointer-events:none;animation:toast-in 2.2s ease both;white-space:nowrap}@keyframes toast-in{0%{opacity:0;transform:translate(-50%,8px)}12%,78%{opacity:1;transform:translate(-50%)}to{opacity:0}}.results{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.1rem;padding:calc(2rem + var(--safe-top)) 1.6rem calc(2rem + var(--safe-bottom));text-align:center;position:relative;z-index:1}.results h1{font-size:2.3rem;font-weight:900;letter-spacing:.1em;text-transform:uppercase}.results h1.win{background:linear-gradient(180deg,#fff3c9,var(--gold) 60%,#a86a00);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 26px rgba(255,201,77,.5))}.results h1.loss{color:var(--danger);text-shadow:0 0 26px rgba(255,77,94,.4)}.results h1.tie{color:var(--aqua);text-shadow:0 0 26px rgba(79,216,255,.4)}.results .stats{display:flex;gap:1.6rem;color:var(--ink-dim);font-size:.9rem}.results .stats b{color:var(--ink);font-size:1.2rem;display:block}.mute-btn{position:absolute;top:calc(.8rem + var(--safe-top));right:.9rem;z-index:10;width:42px;height:42px;border-radius:50%;background:#ffffff12;border:1px solid rgba(255,255,255,.15);font-size:1.05rem;display:flex;align-items:center;justify-content:center}.btn-teach{background:linear-gradient(180deg,#ffffff24,#fff0 40%),linear-gradient(165deg,#ffc94d,#d99a1e 55%,#7d5407);color:#241503;border:1px solid rgba(255,224,150,.5);box-shadow:0 10px 26px -8px #d99a1e73,0 2px 5px #00000059,inset 0 1px #fff6}.btn-duel{background:linear-gradient(180deg,#ffffff1f,#fff0 40%),linear-gradient(165deg,#7a5cff,#4b32c6 55%,#241065);color:#f0edff;border:1px solid rgba(168,148,255,.4);box-shadow:0 10px 26px -8px #6042e07a,0 2px 5px #00000059,inset 0 1px #ffffff38,inset 0 -2px 8px #16094a73}.duel-setup{height:100%;display:flex;flex-direction:column;align-items:center;padding:calc(1.2rem + var(--safe-top)) 1rem calc(1rem + var(--safe-bottom));overflow-y:auto;background:radial-gradient(120% 60% at 50% 0%,rgba(106,77,255,.14),transparent 60%),linear-gradient(180deg,var(--bg1),var(--bg0))}.duel-setup h2{font-family:Georgia,Times New Roman,serif;letter-spacing:.14em;text-transform:uppercase;font-size:1.25rem}.duel-setup-sub{color:var(--ink-dim);font-size:.8rem;text-align:center;max-width:34rem;margin:.5rem 0 .9rem;line-height:1.45}.duel-faction-toggle{display:flex;gap:.6rem;margin-bottom:.9rem}.duel-fbtn{padding:.55rem 1.1rem;border-radius:999px;border:1px solid rgba(255,255,255,.16);background:#ffffff0d;color:var(--ink-dim);font-size:.78rem;font-weight:700;letter-spacing:.06em}.duel-fbtn.selected.magma{border-color:var(--magma);color:#ffd9c9;background:#ff5a2c29;box-shadow:0 0 18px #ff5a2c40}.duel-fbtn.selected.oasis{border-color:var(--oasis);color:#c9ffe9;background:#2ee6a824;box-shadow:0 0 18px #2ee6a840}.duel-roster{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,19rem),1fr));gap:.7rem;width:100%;max-width:42rem}.duel-setup-actions{max-width:26rem}.duel-card{position:relative;display:flex;gap:.7rem;text-align:left;padding:.65rem;border-radius:16px;background:var(--card-bg);border:1px solid hsla(var(--hue),60%,55%,.35);box-shadow:0 4px 18px #0006;transition:transform .12s ease,box-shadow .12s ease,border-color .12s ease}.duel-card:not(:disabled):active{transform:scale(.98)}.duel-card.ordered{border-color:hsl(var(--hue),80%,60%);box-shadow:0 0 20px hsla(var(--hue),80%,55%,.35),0 4px 18px #0006}.duel-card.downed{filter:grayscale(.9) brightness(.55)}.duel-card.compact{padding:.5rem;gap:.55rem}.duel-order{position:absolute;top:-.5rem;left:-.5rem;width:1.7rem;height:1.7rem;border-radius:50%;display:grid;place-items:center;background:hsl(var(--hue),85%,55%);color:#140b08;font-weight:900;font-size:.95rem;box-shadow:0 2px 10px #00000080;z-index:2}.duel-downed-tag{position:absolute;top:.5rem;right:.6rem;font-size:.62rem;font-weight:900;letter-spacing:.2em;color:var(--danger);z-index:2}.duel-card-art{width:4.6rem;flex:0 0 auto;border-radius:12px;overflow:hidden;align-self:stretch;min-height:5.4rem}.duel-card.compact .duel-card-art{width:3.6rem;min-height:4.2rem}.duel-card-art canvas{width:100%;height:100%;display:block}.duel-card-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:.22rem}.duel-card-name{font-weight:800;font-size:.95rem;display:flex;align-items:center;gap:.45rem}.duel-card-cost{font-size:.68rem;font-weight:900;color:var(--aqua);border:1px solid rgba(79,216,255,.4);border-radius:999px;padding:.05rem .42rem}.duel-card-title{font-size:.68rem;color:hsl(var(--hue),70%,68%);letter-spacing:.08em;text-transform:uppercase;margin-bottom:.15rem}.dstat-row{display:flex;align-items:center;gap:.45rem;font-size:.66rem}.dstat-label{width:1.9rem;color:var(--ink-dim);font-weight:700;letter-spacing:.05em}.dstat-bar{flex:1;height:.34rem;border-radius:999px;background:#ffffff17;overflow:hidden}.dstat-fill{height:100%;border-radius:999px}.dstat-num{width:1.9rem;text-align:right;font-weight:800;font-variant-numeric:tabular-nums}.duel-card-special{margin-top:.3rem;font-size:.66rem;line-height:1.35;color:var(--ink-dim)}.duel-card-special b{color:hsl(var(--hue),80%,70%)}.duel-card-passive{margin-top:.2rem;color:#cbb26a}.duel-screen{height:100%;display:flex;flex-direction:column;background:var(--bg0)}.duel-stage-wrap{position:relative;flex:1;min-height:0;overflow:hidden}.duel-canvas{position:absolute;inset:0;width:100%;height:100%;display:block}.duel-round-tag{position:absolute;top:calc(.55rem + var(--safe-top));left:50%;transform:translate(-50%);font-size:.62rem;font-weight:900;letter-spacing:.3em;color:#f0e9e2bf;background:#0a060c80;border:1px solid rgba(255,255,255,.14);border-radius:999px;padding:.28rem .8rem;backdrop-filter:blur(4px)}.duel-hud{position:absolute;top:calc(2.6rem + var(--safe-top));width:min(46%,15rem);padding:.5rem .6rem;border-radius:12px;background:#0c0810b8;border:1px solid rgba(255,255,255,.14);backdrop-filter:blur(5px)}.duel-hud.left{left:.6rem}.duel-hud.right{right:.6rem}.duel-hud-name{display:flex;justify-content:space-between;align-items:baseline;font-weight:800;font-size:.82rem;margin-bottom:.3rem}.duel-hud-side{font-size:.56rem;letter-spacing:.24em;color:var(--ink-dim)}.duel-hp-track{height:.52rem;border-radius:999px;background:#ffffff1a;overflow:hidden}.duel-hp-fill{height:100%;border-radius:999px;background:linear-gradient(90deg,#37e08b,#7dff9c);transition:width .35s cubic-bezier(.2,.8,.3,1)}.duel-hp-fill.low{background:linear-gradient(90deg,#ff4d5e,#ff8a3c);animation:hp-pulse .9s ease-in-out infinite}@keyframes hp-pulse{50%{filter:brightness(1.45)}}.duel-hud-row{display:flex;align-items:center;gap:.5rem;margin-top:.28rem}.duel-hp-num{font-size:.62rem;font-weight:800;font-variant-numeric:tabular-nums;color:var(--ink-dim);white-space:nowrap}.duel-fury{flex:1;height:.34rem;border-radius:999px;background:#ffffff17;overflow:hidden}.duel-fury-fill{height:100%;border-radius:999px;background:linear-gradient(90deg,#6a4dff,#b18cff);transition:width .35s ease}.duel-fury.full{box-shadow:0 0 10px #b18cffcc}.duel-fury.full .duel-fury-fill{animation:hp-pulse .7s ease-in-out infinite}.duel-chips{display:flex;flex-wrap:wrap;gap:.25rem;margin-top:.3rem;min-height:.2rem}.duel-chip{font-size:.56rem;font-weight:800;padding:.08rem .4rem;border-radius:999px;background:hsla(var(--hue),70%,50%,.2);border:1px solid hsla(var(--hue),75%,60%,.5);color:hsl(var(--hue),85%,72%)}.duel-pips{display:flex;gap:.3rem;margin-top:.34rem}.duel-pip{width:.5rem;height:.5rem;border-radius:50%;background:#ffffff8c}.duel-pip.active{background:var(--gold);box-shadow:0 0 7px #ffc94de6}.duel-pip.ko{background:#ffffff1f}.duel-intro-overlay,.duel-over-overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.6rem;background:#08050a73;animation:duel-fade-in .4s ease;z-index:4}@keyframes duel-fade-in{0%{opacity:0}}.duel-intro-vs{display:flex;align-items:center;gap:1rem;font-family:Georgia,serif;font-size:1.3rem;font-weight:800;text-shadow:0 2px 14px rgba(0,0,0,.9);animation:vs-pop .55s cubic-bezier(.2,1.6,.4,1)}@keyframes vs-pop{0%{transform:scale(.7);opacity:0}}.duel-intro-vs b{color:var(--gold);font-size:1.7rem;letter-spacing:.1em}.duel-over-overlay{background:#08050ab8;backdrop-filter:blur(3px)}.duel-over-overlay h2{font-family:Georgia,serif;font-size:2.6rem;letter-spacing:.22em}.duel-over-overlay h2.win{color:var(--gold);text-shadow:0 0 30px rgba(255,201,77,.55)}.duel-over-overlay h2.lose{color:var(--danger);text-shadow:0 0 30px rgba(255,77,94,.5)}.duel-over-overlay p{color:var(--ink-dim);font-size:.85rem;max-width:22rem;text-align:center}.duel-over-overlay .menu-actions{margin-top:.6rem;max-width:18rem;padding-top:0}.duel-pick-overlay{position:absolute;inset:0;z-index:6;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.9rem;padding:1rem;background:#08050ad1;backdrop-filter:blur(4px);animation:duel-fade-in .3s ease}.duel-pick-overlay h3{font-family:Georgia,serif;letter-spacing:.08em;font-size:1.02rem;text-align:center}.duel-pick-grid{display:grid;grid-template-columns:repeat(2,minmax(0,12.5rem));gap:.55rem;width:100%;max-width:26rem;max-height:62vh;overflow-y:auto}.duel-controls{position:relative;flex:0 0 auto;display:flex;gap:.55rem;padding:.65rem 3.4rem calc(.65rem + var(--safe-bottom)) .65rem;background:linear-gradient(180deg,rgba(18,11,22,.4),var(--bg0) 45%);min-height:5.6rem;align-items:stretch}.duel-btn{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.18rem;border-radius:14px;padding:.55rem .4rem;border:1px solid rgba(255,255,255,.16);transition:transform .1s ease,filter .1s ease}.duel-btn:active{transform:scale(.96)}.duel-btn b{font-size:.88rem;letter-spacing:.05em;text-transform:uppercase}.duel-btn span{font-size:.56rem;color:var(--ink-dim);text-align:center;line-height:1.25}.duel-btn.strike{background:linear-gradient(165deg,#ff5a2c47,#8c1f0a57);border-color:#ff7a3c80}.duel-btn.guard{background:linear-gradient(165deg,#4fd8ff33,#0c4a6e57);border-color:#4fd8ff73}.duel-btn.special{background:linear-gradient(165deg,#6a4dff33,#22146366);border-color:#9476ff66;opacity:.55}.duel-btn.special.ready{opacity:1;box-shadow:0 0 20px #9476ff8c;animation:special-ready 1.1s ease-in-out infinite}@keyframes special-ready{50%{box-shadow:0 0 32px #b18cffd9}}.duel-wait{flex:1;display:grid;place-items:center;color:var(--ink-dim);font-size:.78rem;letter-spacing:.24em;text-transform:uppercase}.duel-flee{position:absolute;right:.65rem;top:.65rem;bottom:calc(.65rem + var(--safe-bottom));width:2.3rem;border-radius:12px;border:1px solid rgba(255,255,255,.14);background:#ffffff0d;color:var(--ink-dim);font-size:.9rem}.duel-guide-btn{margin-bottom:.9rem;padding:.5rem 1rem;border-radius:999px;border:1px solid rgba(255,201,77,.4);background:#ffc94d14;color:var(--gold);font-size:.72rem;font-weight:700;letter-spacing:.04em}.duel-guide-overlay{position:fixed;inset:0;z-index:40;display:flex;align-items:center;justify-content:center;padding:1rem;background:#060408c7;backdrop-filter:blur(4px);animation:duel-fade-in .25s ease}.duel-guide{width:min(100%,40rem);max-height:calc(100vh - 3rem);display:flex;flex-direction:column;border-radius:18px;background:var(--card-bg);border:1px solid rgba(255,255,255,.14);box-shadow:0 18px 60px #0009;overflow:hidden}.duel-guide-head{display:flex;align-items:center;justify-content:space-between;padding:.85rem 1.1rem;border-bottom:1px solid rgba(255,255,255,.1);flex:0 0 auto}.duel-guide-head h3{font-family:Georgia,serif;font-size:1rem;letter-spacing:.1em;text-transform:uppercase}.duel-guide-close{width:2.4rem;height:2.4rem;flex:0 0 auto;border-radius:50%;border:1px solid rgba(255,255,255,.22);background:#ffffff0f;color:var(--ink);font-size:1.05rem;line-height:1}.guide-depth-head{display:flex;align-items:center;justify-content:space-between;gap:.6rem}.guide-back{flex:0 0 auto;padding:.3rem .7rem;border-radius:999px;border:1px solid rgba(255,255,255,.18);color:var(--ink-dim);font-size:.72rem;letter-spacing:.04em}.guide-close-bottom{display:block;width:100%;margin-top:1.1rem}.duel-guide-body{padding:1rem 1.1rem calc(1.2rem + var(--safe-bottom));overflow-y:auto;font-size:.8rem;line-height:1.5;color:var(--ink-dim)}.duel-guide-body h4{color:var(--ink);font-family:Georgia,serif;letter-spacing:.1em;text-transform:uppercase;font-size:.78rem;margin:1.1rem 0 .45rem}.duel-guide-body h4:first-child{margin-top:0}.duel-guide-body b{color:var(--ink)}.duel-guide-body ul{padding-left:1.1rem;display:flex;flex-direction:column;gap:.4rem}.guide-triangle{display:grid;gap:.55rem;margin:.6rem 0 .3rem}.guide-tri-card{border-radius:12px;padding:.6rem .75rem;border:1px solid rgba(255,255,255,.12);background:#ffffff0a}.guide-tri-card>b{display:block;margin-bottom:.2rem;font-size:.84rem}.guide-tri-card p{font-size:.74rem}.guide-tri-card.strike-c{border-color:#ff7a3c73}.guide-tri-card.strike-c>b{color:#ff9a62}.guide-tri-card.guard-c{border-color:#4fd8ff66}.guide-tri-card.guard-c>b{color:#7adfff}.guide-tri-card.special-c{border-color:#9476ff73}.guide-tri-card.special-c>b{color:#b39aff}.guide-more{width:100%;margin-top:1rem;font-size:.82rem}.duel-guide .duel-faction-toggle{margin:.2rem 0 .7rem}.guide-champ{border-radius:14px;border:1px solid hsla(var(--hue),60%,55%,.35);background:#ffffff08;padding:.7rem .75rem;margin-bottom:.7rem}.guide-champ-head{display:flex;gap:.7rem;align-items:center;margin-bottom:.5rem}.guide-champ-head>div>b{font-size:.95rem;color:hsl(var(--hue),80%,72%)}.guide-champ-art{width:3.4rem;height:3.4rem;flex:0 0 auto;border-radius:10px;overflow:hidden}.guide-champ-art canvas{width:100%;height:100%;display:block}.guide-champ-role{font-size:.72rem;color:var(--ink)}.guide-champ-stats{font-size:.64rem;letter-spacing:.05em;color:var(--ink-dim);margin-top:.12rem}.guide-tip{display:flex;gap:.55rem;margin-top:.4rem;align-items:baseline}.guide-tip-label{flex:0 0 auto;width:6.4rem;font-size:.64rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:hsl(var(--hue),75%,68%)}.guide-tip p{font-size:.72rem;flex:1}.education{flex:1;display:flex;flex-direction:column;position:relative;min-height:0;background:radial-gradient(120% 55% at 50% 0%,rgba(255,201,77,.09),transparent 62%),linear-gradient(180deg,var(--bg1),var(--bg0))}.edu-back{position:absolute;top:calc(.8rem + var(--safe-top));left:.9rem;z-index:10;padding:.5rem .95rem;border-radius:999px;background:#0a060eb8;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.18);color:var(--ink);font-size:.82rem;font-weight:700;letter-spacing:.06em;box-shadow:0 4px 14px #00000073}.edu-back:active{transform:scale(.95);filter:brightness(1.2)}.edu-scroll{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:calc(3.6rem + var(--safe-top)) 1.15rem calc(1.6rem + var(--safe-bottom))}.edu-kicker{font-size:.66rem;font-weight:800;letter-spacing:.34em;text-transform:uppercase;color:var(--gold)}.edu-hero{text-align:center;margin-bottom:1.4rem}.edu-hero h1{margin-top:.45rem;font-size:1.85rem;font-weight:900;letter-spacing:.04em;line-height:1.1;background:linear-gradient(180deg,#fff2d8,var(--gold) 55%,#c97f12);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;filter:drop-shadow(0 3px 14px rgba(255,201,77,.22))}.edu-hero p{margin:.7rem auto 0;max-width:34ch;color:var(--ink-dim);font-size:.92rem;line-height:1.55}.edu-toc{display:flex;flex-direction:column;gap:.7rem}.edu-toc-card{display:flex;align-items:center;gap:.85rem;text-align:left;padding:.95rem 1rem;border-radius:16px;background:var(--card-bg);border:1px solid rgba(255,255,255,.09);box-shadow:0 8px 22px -10px #0000008c,inset 0 1px #ffffff0f;color:var(--ink)}.edu-toc-card:active{transform:scale(.98);filter:brightness(1.12)}.toc-num{flex:none;width:2.1rem;height:2.1rem;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:.95rem;color:#241503;background:linear-gradient(165deg,#ffe3a0,var(--gold) 55%,#c97f12);box-shadow:0 2px 8px #d99a1e66}.toc-copy{flex:1;display:flex;flex-direction:column;gap:.2rem}.toc-title{font-weight:800;letter-spacing:.05em;font-size:.98rem}.toc-tag{color:var(--ink-dim);font-size:.74rem;line-height:1.4}.toc-icon{flex:none;font-size:1.5rem;color:#ffc94d8c}.edu-topic-head{margin-bottom:.9rem}.edu-topic-head h2{margin-top:.35rem;font-size:1.5rem;font-weight:900;letter-spacing:.05em}.edu-body p{color:var(--ink);font-size:.9rem;line-height:1.65;margin:0 0 .95rem}.edu-body p b{color:#ffe3a0;font-weight:800}.edu-body p i{color:var(--ink)}.edu-h3{margin:1.4rem 0 .7rem;font-size:.78rem;font-weight:900;letter-spacing:.24em;text-transform:uppercase;color:var(--gold)}.edu-formula{text-align:center;font-weight:800;letter-spacing:.08em;color:#ffe3a0;background:#ffc94d12;border:1px solid rgba(255,201,77,.18);border-radius:12px;padding:.6rem .8rem}.demo-btn{position:relative;overflow:hidden;display:flex;align-items:center;gap:.75rem;width:100%;text-align:left;margin:0 0 .7rem;padding:.78rem .95rem;border-radius:14px;background:var(--card-bg);border:1px solid rgba(255,255,255,.1);color:var(--ink);box-shadow:0 6px 18px -9px #0009,inset 0 1px #ffffff0d}.demo-btn:active{transform:scale(.985);filter:brightness(1.12)}.demo-btn.playing{border-color:#ffc94d8c;box-shadow:0 0 18px -2px #ffc94d40,inset 0 1px #ffffff0d}.demo-icon{flex:none;width:2rem;height:2rem;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.72rem;color:#241503;background:linear-gradient(165deg,#ffe3a0,var(--gold) 55%,#c97f12);box-shadow:0 2px 8px #d99a1e59}.demo-copy{display:flex;flex-direction:column;gap:.14rem;min-width:0}.demo-label{font-weight:800;font-size:.88rem;letter-spacing:.03em}.demo-sub{color:var(--ink-dim);font-size:.72rem;line-height:1.4}.demo-btn.compact{margin:0;padding:.62rem .75rem}.demo-btn.compact .demo-icon{width:1.6rem;height:1.6rem;font-size:.6rem}.demo-btn.compact .demo-label{font-size:.78rem}.demo-btn.compact .demo-sub{font-size:.66rem}.demo-progress{position:absolute;left:0;bottom:0;height:3px;width:100%;transform-origin:left;transform:scaleX(0);background:linear-gradient(90deg,var(--gold),#ff8a3c);animation-name:demo-progress;animation-timing-function:linear;animation-fill-mode:forwards}@keyframes demo-progress{0%{transform:scaleX(0)}to{transform:scaleX(1)}}.demo-grid{display:grid;grid-template-columns:1fr 1fr;gap:.55rem;margin:0 0 .9rem}.iso-mix{margin:0 0 .8rem;padding:.75rem .85rem .85rem;border-radius:14px;background:var(--card-bg);border:1px solid rgba(255,255,255,.09)}.iso-mix-head{display:flex;flex-direction:column;gap:.15rem;margin-bottom:.6rem}.iso-mix-btns{display:grid;grid-template-columns:1fr 1fr;gap:.55rem}.iso-mix .demo-btn{background:#ffffff0b}.warrior-card{margin:0 0 1.05rem}.warrior-tap{position:relative;overflow:hidden;width:100%;height:168px;border-radius:18px;background:radial-gradient(120% 130% at 50% 12%,#ffffff17,#00000073),var(--card-bg);border:1px solid rgba(255,255,255,.12);box-shadow:0 10px 26px -10px #000000a6,inset 0 1px #ffffff12}.warrior-card.playing .warrior-tap{border-color:#ffc94d99;box-shadow:0 0 26px -4px #ffc94d4d}.warrior-tap:active{transform:scale(.985)}.warrior-canvas{position:absolute;inset:0;width:100%;height:100%}.warrior-name{position:absolute;left:.9rem;bottom:.7rem;display:flex;flex-direction:column;gap:.1rem;text-align:left;text-shadow:0 2px 10px rgba(0,0,0,.9)}.warrior-name b{font-size:1rem;font-weight:900;letter-spacing:.08em;text-transform:uppercase}.warrior-name i{font-size:.68rem;color:var(--gold);font-style:normal;letter-spacing:.1em}.warrior-play{position:absolute;right:.8rem;top:.8rem;width:2.2rem;height:2.2rem;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.78rem;color:#241503;background:linear-gradient(165deg,#ffe3a0,var(--gold) 55%,#c97f12);box-shadow:0 2px 10px #d99a1e73}.warrior-caption{margin-top:.55rem;min-height:3.1em;padding:.55rem .75rem;border-radius:10px;background:#ffffff0b;border:1px solid rgba(255,255,255,.08);color:var(--ink-dim);font-size:.78rem;line-height:1.5;transition:color .3s ease,border-color .3s ease}.warrior-caption.live{color:var(--ink);border-color:#ffc94d59}.staff-svg{display:block;width:100%;margin:.3rem 0 .8rem;padding:.55rem .4rem;border-radius:14px;background:linear-gradient(170deg,#f7efdd,#eadfc4);border:1px solid rgba(255,255,255,.16);box-shadow:0 8px 20px -10px #0009,inset 0 1px #ffffff80}.staff-line{stroke:#4a3c2e;stroke-width:1}.staff-bar{stroke:#4a3c2e;stroke-width:1.5}.staff-clef{font-size:44px;fill:#2c2216}.staff-accidental{font-size:17px;font-weight:700;fill:#2c2216}.staff-keysig-flat line{stroke:#7d5407;stroke-width:1.9;stroke-linecap:round}.staff-keysig-flat path{fill:#7d5407}.staff-timesig text{font-size:19px;font-weight:900;fill:#2c2216;text-anchor:start}.staff-head{fill:#2c2216}.staff-head.hollow{fill:none;stroke:#2c2216;stroke-width:1.9}.staff-stem{stroke:#2c2216;stroke-width:1.6}.staff-flag{fill:none;stroke:#2c2216;stroke-width:2}.staff-beam{stroke:#2c2216;stroke-width:3.4}.staff-label{font-size:11px;font-weight:700;fill:#7d5407;text-anchor:middle}.staff-note{transition:filter .12s ease}.staff-note.active .staff-head,.staff-note.active .staff-head.hollow{fill:#d9541e;stroke:#d9541e}.staff-note.active .staff-stem,.staff-note.active .staff-flag{stroke:#d9541e}.staff-note.active{filter:drop-shadow(0 0 5px rgba(255,106,44,.8))}.pyramid-label{font-size:11.5px;font-weight:700;fill:#5c4a33}.meter-strip{display:flex;align-items:stretch;gap:.45rem;margin:.2rem 0 .75rem}.meter-beat{flex:1;display:flex;flex-direction:column;align-items:center;gap:.05rem;padding:.55rem 0 .45rem;border-radius:12px;background:var(--card-bg);border:1px solid rgba(255,255,255,.09);transition:border-color .1s ease,box-shadow .1s ease}.meter-beat .count{font-size:1.25rem;font-weight:900}.meter-beat .tag{font-size:.52rem;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);min-height:.8em}.meter-beat.downbeat .count{color:#ffe3a0}.meter-beat.active{border-color:#ffc94db3;box-shadow:0 0 14px -2px #ffc94d73}.meter-measure{flex:none;display:flex;align-items:center;padding:0 .6rem;border-radius:12px;background:#ffffff0a;border:1px solid rgba(255,255,255,.08);color:var(--ink-dim);font-size:.62rem;letter-spacing:.08em;text-transform:uppercase}.chord-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));grid-auto-flow:column;gap:.45rem;margin:.2rem 0 .75rem}.chord-card{display:flex;flex-direction:column;align-items:center;gap:.1rem;padding:.6rem .2rem .5rem;border-radius:12px;background:var(--card-bg);border:1px solid rgba(255,255,255,.09);transition:border-color .12s ease,box-shadow .12s ease}.chord-card .roman{font-size:1.3rem;font-weight:900;color:#ffe3a0;font-family:Georgia,Times New Roman,serif}.chord-card .cname{font-size:.6rem;color:var(--ink-dim);letter-spacing:.05em}.chord-card.active{border-color:#ffc94db3;box-shadow:0 0 16px -2px #ffc94d73}.quiz{margin-top:1.6rem;padding:1rem .95rem 1.1rem;border-radius:18px;background:#ffffff09;border:1px solid rgba(255,255,255,.09)}.quiz .edu-h3{margin-top:0}.quiz-score{color:var(--ink-dim);font-size:.74rem;letter-spacing:.08em;margin:0 0 .9rem}.quiz-q{margin-bottom:1.15rem}.quiz-prompt{font-size:.86rem;line-height:1.55;font-weight:600;margin:0 0 .55rem;display:flex;gap:.55rem}.qnum{flex:none;width:1.45rem;height:1.45rem;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.72rem;font-weight:900;color:#241503;background:linear-gradient(165deg,#ffe3a0,var(--gold) 60%,#c97f12)}.quiz-q .demo-btn{margin-bottom:.55rem}.quiz-options{display:flex;flex-direction:column;gap:.4rem}.quiz-option{display:flex;align-items:center;gap:.6rem;text-align:left;padding:.55rem .7rem;border-radius:11px;background:#ffffff0d;border:1px solid rgba(255,255,255,.1);color:var(--ink);font-size:.8rem;line-height:1.4}.quiz-option:active{filter:brightness(1.15)}.opt-letter{flex:none;width:1.3rem;height:1.3rem;border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:.66rem;font-weight:800;background:#ffffff17;color:var(--ink-dim)}.quiz-option.correct{border-color:#2ee6a899;background:#2ee6a81a}.quiz-option.correct .opt-letter{background:var(--oasis);color:#04241a}.quiz-option.wrong{border-color:#ff4d5e8c;background:#ff4d5e17}.quiz-option.wrong .opt-letter{background:var(--danger);color:#fff}.quiz-option.dim{opacity:.45}.quiz-explain{margin:.55rem 0 0;padding:.55rem .7rem;border-radius:10px;font-size:.76rem;line-height:1.55;color:var(--ink);background:#ff4d5e12;border:1px solid rgba(255,77,94,.2)}.quiz-explain.right{background:#2ee6a812;border-color:#2ee6a840}.quiz-reset{margin-top:.2rem;padding:.5rem 1rem;border-radius:999px;border:1px solid rgba(255,255,255,.16);background:#ffffff0d;color:var(--ink-dim);font-size:.74rem;font-weight:700;letter-spacing:.06em}.edu-next{display:flex;flex-direction:column;align-items:center;gap:.2rem;width:100%;margin:1.3rem 0 .4rem;padding:.95rem 1rem;border-radius:16px;background:linear-gradient(180deg,#ffffff1f,#fff0 40%),linear-gradient(165deg,#ffc94d,#d99a1e 55%,#7d5407);color:#241503;border:1px solid rgba(255,224,150,.5);box-shadow:0 10px 26px -8px #d99a1e66,inset 0 1px #fff6}.edu-next:active{transform:scale(.98);filter:brightness(1.08)}.next-kicker{font-size:.6rem;font-weight:800;letter-spacing:.3em;text-transform:uppercase;opacity:.75}.next-title{font-size:1.02rem;font-weight:900;letter-spacing:.06em}