@font-face{font-family:Rubik;src:url('../assets/rubik.woff2')}
@font-face{font-family:Satoshi;src:url('../assets/satoshi-black.woff2');font-weight:900}
:root{--overlay:1;--book:340px;--ink:#f5f4ee;--muted:#aeb7d0;--coral:#f87565;--gold:#ffcf75;--teal:#65d6c0;--glass:linear-gradient(180deg,rgba(16,20,52,.8),rgba(9,12,34,.74));--line:rgba(184,198,255,.17)}
*{box-sizing:border-box}
html{background:#070918;color:var(--ink);scroll-behavior:smooth}
body{margin:0;font:16px/1.4 Rubik,system-ui,sans-serif;overflow-x:hidden}
button,a{-webkit-tap-highlight-color:transparent}
button{font:inherit;cursor:pointer;color:inherit}
button:focus-visible,a:focus-visible{outline:3px solid var(--gold);outline-offset:4px}
::selection{color:#0e1034;background:#ffca70}
.sr{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}

/* Full-bleed arena: the 3D stage fills the page and the interface floats over it. */
.arcade{position:relative;height:100vh;height:100dvh;min-height:600px;overflow:hidden;display:grid;
 grid-template-columns:28px minmax(0,1fr) 24px var(--book) 28px;
 grid-template-rows:18px auto 14px auto minmax(0,1fr) auto 18px}
.stage{grid-area:1/1/-1/-1;position:relative;z-index:0;overflow:hidden;background:radial-gradient(120% 90% at 60% 40%,#1b1d4a 0%,#0a0c22 60%,#060714 100%)}
.stage canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.stage canvas.fallback{object-fit:contain}
.stage::after{content:'';position:absolute;inset:0;pointer-events:none;z-index:1;
 background:linear-gradient(180deg,rgba(5,7,20,.82) 0,rgba(5,7,20,.38) 15%,rgba(5,7,20,0) 26%,rgba(5,7,20,0) 76%,rgba(5,7,20,.72) 100%),linear-gradient(270deg,rgba(5,7,20,.7) 0,rgba(5,7,20,0) calc(var(--book) + 90px))}
.loading{position:absolute;inset:0;z-index:4;display:grid;place-items:center;background:#070918;transition:opacity .6s ease .1s}
.loading span{font:900 22px/1 Satoshi,sans-serif;letter-spacing:.06em;color:#c9d0ea;animation:pulse 1.2s ease-in-out infinite}
.loading.done{opacity:0;pointer-events:none}
.damage-layer{position:absolute;inset:0;z-index:3;pointer-events:none;overflow:hidden}

.masthead{grid-area:2/2/3/5;z-index:3;display:flex;align-items:center;gap:22px}
.back{color:#c2c8e0;font-size:13px;text-underline-offset:4px;white-space:nowrap}
h1{font:900 clamp(24px,2.2vw,36px)/1 Satoshi,Rubik,sans-serif;letter-spacing:-.03em;margin:0;flex:1;text-shadow:0 3px 18px rgba(0,0,0,.5)}
h1 span{display:inline-block;margin-left:18px;font:400 15px/1.5 Rubik,sans-serif;color:#b6c2dc;letter-spacing:.03em;vertical-align:middle}
.utility{display:flex;gap:8px;align-items:center}
.utility button{color:#d6dbef;border:1px solid var(--line);border-radius:8px;background:rgba(13,17,44,.78);padding:9px 13px;font-size:13px}
.utility button:hover{background:#28304f}
.utility kbd{color:var(--gold);margin-left:7px;font:inherit}
.deck-controls{display:none}

/* Fighting-game status bar. */
.scoreboard{grid-area:4/2/5/3;z-index:2;display:grid;grid-template-columns:1fr auto 1.35fr;gap:26px;align-items:start;padding-top:2px}
.player-info{display:flex;flex-direction:column;gap:8px}
.player-name,.enemy-name{font:900 19px/1 Satoshi,sans-serif;letter-spacing:.05em;text-shadow:0 2px 12px rgba(0,0,0,.6)}
.chain{display:flex;align-items:baseline;gap:10px;color:#7de1c1;font-size:12px;letter-spacing:.14em;font-weight:600}
.chain b{font:900 0/1 Satoshi;color:var(--gold);transition:font-size .12s}
.chain.on b{font-size:34px;text-shadow:0 0 18px rgba(255,207,117,.55)}
.chain.on{color:#ffe3a6}
.round{display:grid;place-items:center;width:96px;height:70px;padding-top:4px;clip-path:polygon(14% 0,86% 0,100% 50%,86% 100%,14% 100%,0 50%);background:linear-gradient(180deg,#232a62,#0d1130);box-shadow:inset 0 0 0 2px rgba(255,207,117,.5)}
.round span{font-size:10px;letter-spacing:.2em;color:#c2cae4}
.round b{font:900 30px/1 Satoshi;color:var(--gold)}
.enemy-info{display:flex;flex-direction:column;gap:9px}
.enemy-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.tasks{font-size:12px;letter-spacing:.14em;color:#ffcfa0;font-weight:600}
.health{position:relative;height:24px;transform:skewX(-18deg);background:linear-gradient(180deg,#2b1631,#1b0f24);border:2px solid rgba(245,244,238,.85);box-shadow:0 0 0 2px rgba(10,12,30,.8),0 6px 22px rgba(0,0,0,.45);overflow:hidden}
.health i{position:absolute;inset:0;transform-origin:right center}
.health .ghost{background:#ffe1d8;transition:transform .55s cubic-bezier(.3,.6,.3,1) .38s}
.health .fill{background:linear-gradient(180deg,#ffb08f 0,#f87565 45%,#d9475a 100%);transition:transform .12s ease-out;box-shadow:inset 0 3px 0 rgba(255,255,255,.28)}
.health.low .fill{background:linear-gradient(180deg,#ffd36e,#ff8a3d 55%,#e2493b);animation:lowbar .5s steps(2) infinite}

/* Stage overlays inside the open fight area. */
.fight-area{grid-area:5/2/6/3;position:relative;z-index:2;pointer-events:none}
.stage-title{position:absolute;left:0;top:4%;transition:opacity .25s,transform .25s}
.stage-title strong{display:block;font:900 clamp(32px,4.2vw,66px)/.95 Satoshi;letter-spacing:-.03em;color:#fbf6ec;text-shadow:0 4px 30px rgba(0,0,0,.6),0 0 40px rgba(248,117,101,.25)}
.stage-title span{display:block;color:#d3d9ec;font-size:clamp(13px,1.05vw,17px);margin-top:14px;text-shadow:0 2px 10px rgba(0,0,0,.8)}
.stage-title.hide{opacity:0;transform:translateY(-10px)}
.move-flash{position:absolute;left:0;top:4%;display:flex;align-items:center;gap:12px;font:900 clamp(18px,2vw,32px)/1 Satoshi;letter-spacing:.02em;color:#fbf6ec;opacity:0;padding:10px 18px 10px 12px;background:linear-gradient(90deg,rgba(8,11,30,.82),rgba(8,11,30,0));border-left:4px solid var(--c,#65d6c0);text-shadow:0 2px 10px rgba(0,0,0,.7)}
.move-flash img{width:34px;height:34px;object-fit:contain;background:#fff8ec;border-radius:7px;padding:4px}
.move-flash.show{animation:move-label .85s both}
.combo-flash{position:absolute;left:0;right:0;top:9%;text-align:center;font:900 clamp(30px,4.6vw,74px)/1 Satoshi;letter-spacing:-.01em;color:var(--gold);text-shadow:0 5px 0 #5b2139,0 0 40px rgba(255,180,80,.45);opacity:0}
.combo-flash.show{animation:combo-label 1.4s both}
.combo-flash small{display:block;font:500 clamp(12px,1.25vw,20px)/1.4 Rubik;color:#fff3d6;text-shadow:0 2px 8px #12172f;margin-top:14px;letter-spacing:.01em}
.announcer{position:absolute;inset:0;display:grid;place-content:center;text-align:center;opacity:0}
.announcer b{display:block;font:900 clamp(40px,6vw,96px)/1 Satoshi;color:#fbf6ec;letter-spacing:.02em;text-shadow:0 6px 0 #5b2139,0 0 50px rgba(255,255,255,.25)}
.announcer span{display:block;font:900 clamp(30px,4vw,64px)/1 Satoshi;color:var(--gold);margin-top:10px;text-shadow:0 5px 0 #5b2139}
.announcer.show{animation:announce 1.9s both}
.input-hud{position:absolute;left:0;bottom:12px;min-width:220px}
#input-label{font-size:11px;letter-spacing:.18em;color:#c3cbe2;text-shadow:0 1px 6px #000}
#input-history{height:34px;margin-top:6px;display:flex;align-items:center;gap:7px}
#input-history kbd{display:inline-flex;align-items:center;justify-content:center;background:rgba(10,14,36,.9);border:1px solid #8493bd;border-radius:6px;width:32px;height:32px;font:600 15px Rubik;color:#fff0cb;animation:keypop .2s both}
.input-timer{height:3px;background:rgba(57,69,104,.8);margin-top:8px;width:220px;border-radius:2px;overflow:hidden}
.input-timer i{height:100%;background:linear-gradient(90deg,#fbbf72,#ffe2a1);display:block;transform-origin:left;transform:scaleX(0)}
.score-hud{position:absolute;right:0;bottom:14px;text-align:right}
.score-hud b{display:block;font:900 38px/1 Satoshi;font-variant-numeric:tabular-nums;color:var(--gold);text-shadow:0 0 24px rgba(255,207,117,.35)}
.score-hud span{font-size:11px;letter-spacing:.16em;color:#cdd4e8}
.dmg{position:absolute;transform:translate(-50%,-50%);font:900 46px/1 Satoshi;color:#fff5cb;text-shadow:0 3px 0 #6b2a3c,0 0 18px rgba(255,220,150,.5);animation:dmg 1s cubic-bezier(.2,.7,.3,1) both;white-space:nowrap}
.dmg.big{font-size:76px;color:var(--gold);text-shadow:0 5px 0 #6b2a3c,0 0 30px rgba(255,190,90,.7)}
.dmg.task{font-size:26px;color:#ffd9a8;text-shadow:0 2px 0 #3d1f2d}

/* Controls. */
.action-bar{grid-area:6/2/7/3;z-index:2;display:flex;align-items:stretch;gap:8px;padding:8px;background:var(--glass);border:1px solid var(--line);border-radius:14px;box-shadow:0 14px 40px rgba(0,0,0,.4)}
.action-bar>button{position:relative;display:flex;align-items:center;justify-content:center;gap:11px;flex:1;min-width:0;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);border-radius:10px;padding:9px 10px;color:#eef0f8;transition:background .12s,transform .08s,box-shadow .12s}
.action-bar>button:hover{background:rgba(255,255,255,.09)}
.action-bar>button.pressed{background:color-mix(in srgb,var(--c) 38%,transparent);transform:translateY(1px) scale(.98);box-shadow:0 0 26px color-mix(in srgb,var(--c) 55%,transparent)}
.action-bar>button.next{box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--c) 80%,white)}
.action-bar>button.next kbd{animation:nextkey .7s ease-in-out infinite alternate}
.action-bar>button kbd{flex:none;display:grid;place-items:center;width:38px;height:38px;border-radius:8px;font:900 22px/1 Satoshi;color:#0d1130;background:var(--c);box-shadow:inset 0 -3px 0 rgba(0,0,0,.25)}
.action-bar img{flex:none;width:28px;height:28px;object-fit:contain;background:#fff8ec;border-radius:6px;padding:3px}
.action-bar span{min-width:0;overflow:hidden;text-overflow:ellipsis;text-align:left;font-size:14px;font-weight:600;line-height:1.15}
.action-bar small{display:block;font-size:12px;font-weight:400;color:#aeb8d2;margin-top:2px}
.direction-pad{display:grid;grid-template-columns:repeat(3,32px);grid-template-rows:repeat(2,28px);gap:3px;align-self:center;padding:0 6px 0 10px}
.direction-pad button{border:1px solid rgba(255,255,255,.16);border-radius:6px;background:rgba(255,255,255,.06);color:#e8ebf7;font-size:16px;line-height:1;padding:0}
.direction-pad button:hover{background:rgba(255,255,255,.14)}
.direction-pad button[data-key=UP]{grid-column:2}.direction-pad button[data-key=LEFT]{grid-column:1;grid-row:2}.direction-pad button[data-key=RIGHT]{grid-column:3;grid-row:2}.direction-pad button[data-key=DOWN]{grid-column:2;grid-row:2}
.direction-pad button.pressed{background:#ffcf89;color:#11163a}
.direction-pad button.next{box-shadow:inset 0 0 0 2px #ffcf75}

/* Combo book. */
.combo-book{grid-area:4/4/7/5;z-index:2;align-self:center;display:flex;flex-direction:column;gap:16px}
h2{font:900 30px/1.05 Satoshi;letter-spacing:-.03em;margin:0 0 10px;text-shadow:0 3px 16px rgba(0,0,0,.6)}
.combo-intro p{font-size:13px;color:#c1c9df;line-height:1.6;margin:0}
.combo-list{display:grid;grid-template-columns:1fr;gap:12px}
.combo{position:relative;border:1px solid var(--line);background:var(--glass);padding:15px 18px;text-align:left;border-radius:12px;color:#f8f1df;transition:background .2s,border-color .2s,box-shadow .2s;box-shadow:0 10px 30px rgba(0,0,0,.3)}
.combo:hover{border-color:#f1bf74;background:linear-gradient(180deg,rgba(40,44,80,.9),rgba(20,24,56,.85))}
.combo.primed{border-color:rgba(255,207,117,.55)}
.combo.active{border-color:#ffd382;box-shadow:0 0 0 1px #ffd382,0 0 34px rgba(255,190,90,.35);background:linear-gradient(180deg,rgba(80,62,64,.92),rgba(40,30,48,.9))}
.combo .sequence{display:flex;gap:6px;margin-bottom:9px}
.combo .sequence kbd{display:grid;place-items:center;min-width:28px;height:28px;padding:0 6px;border-radius:6px;border:1px solid rgba(255,201,121,.4);color:#ffc979;font:700 15px/1 Rubik;background:rgba(255,201,121,.06);transition:background .15s,color .15s}
.combo .sequence kbd.lit{background:#ffc979;color:#1a1530;border-color:#ffc979;box-shadow:0 0 14px rgba(255,201,121,.6)}
.combo strong{display:block;font-size:15px;letter-spacing:.02em}
.combo small{font-size:12px;color:#bcc6dd;line-height:1.4;display:block;margin-top:5px}
.combo .combo-logos{display:flex;gap:5px;margin-top:10px}
.combo-logos img{width:22px;height:22px;background:#fff8ec;border-radius:5px;padding:3px;object-fit:contain}
.book-note{margin:0;font-size:11px;color:#8f9ab8}
footer{display:none}

@keyframes pulse{50%{opacity:.45}}
@keyframes lowbar{50%{filter:brightness(1.35)}}
@keyframes keypop{0%{transform:scale(.6);opacity:0}100%{transform:scale(1);opacity:1}}
@keyframes nextkey{to{filter:brightness(1.35);transform:translateY(-1px)}}
@keyframes dmg{0%{opacity:0;transform:translate(-50%,-30%) scale(1.6)}12%{opacity:1;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(calc(-50% + var(--dx,0px)),-170%) scale(.9)}}
@keyframes move-label{0%{opacity:0;transform:translateX(-14px)}10%,68%{opacity:1;transform:none}100%{opacity:0}}
@keyframes combo-label{0%{opacity:0;transform:scale(.6)}14%{opacity:1;transform:scale(1.06)}22%,76%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1.08)}}
@keyframes announce{0%{opacity:0;transform:scale(1.6)}12%,45%{opacity:1;transform:scale(1)}58%{opacity:1}100%{opacity:0;transform:scale(.96)}}

/* Narrow or short screens: stack the interface around a framed stage. */
@media (max-width:1000px),(max-height:620px){
 :root{--overlay:0}
 .arcade{height:auto;min-height:100dvh;overflow:visible;grid-template-columns:12px minmax(0,1fr) 12px;grid-template-rows:none;grid-auto-rows:auto;row-gap:12px;padding:14px 0 18px}
 .masthead{grid-area:1/2/2/3;flex-wrap:wrap;gap:10px}
 h1{order:-1;width:100%;flex:none;font-size:28px}h1 span{margin-left:10px;font-size:13px}
 .back{flex:1;font-size:12px}
 .utility{flex-wrap:wrap}.utility button{font-size:12px;padding:8px 10px}
 .scoreboard{grid-area:2/2/3/3;gap:12px;grid-template-columns:1fr 70px 1.3fr}
 .player-name,.enemy-name{font-size:14px}.round{width:70px;height:54px}.round b{font-size:22px}.tasks{font-size:10px}.health{height:18px}
 .stage{grid-area:3/1/4/-1;aspect-ratio:16/10;max-height:72vh}
 .stage::after{background:linear-gradient(180deg,rgba(5,7,20,0) 70%,rgba(5,7,20,.6))}
 .fight-area{grid-area:3/2/4/3}
 .stage-title strong{font-size:clamp(26px,6vw,44px)}.stage-title span{font-size:12px;max-width:240px}
 .input-hud{bottom:8px;min-width:140px}#input-history kbd{width:24px;height:24px;font-size:12px}.input-timer{width:140px}
 .score-hud{bottom:8px}.score-hud b{font-size:26px}
 .action-bar{grid-area:4/2/5/3;flex-wrap:wrap;padding:6px;gap:6px}
 .action-bar>button{flex:1 1 18%;flex-direction:column;gap:5px;padding:9px 4px}
 .action-bar>button span{text-align:center;font-size:12px}.action-bar small{display:none}
 .action-bar>button kbd{width:32px;height:32px;font-size:19px}
 .direction-pad{display:flex;width:100%;justify-content:center;padding:4px 0 0;gap:8px}
 .direction-pad button{width:46px;height:42px}
 .combo-book{grid-area:5/2/6/3;align-self:start}
 .combo-list{grid-template-columns:1fr 1fr}
 .book-note{display:none}
 footer{display:block;grid-area:6/2/7/3;color:#aab6d2;font-size:11px}footer p{margin:0 0 4px}footer strong{font-weight:500;color:#e7e9f5}
 .dmg{font-size:30px}.dmg.big{font-size:46px}
}
@media (max-width:560px){.stage{aspect-ratio:4/3}.stage-title strong{font-size:30px}.combo-list{grid-template-columns:1fr}.scoreboard{grid-template-columns:1fr 56px 1.2fr}.round{width:56px}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}