@font-face{font-family:Console;src:url('assets/console.ttf') format('truetype');font-display:block}
/* The 16-bit console skin. One 4:3 frame holds every game screen: title,
   lobby, fighter select, versus, arena, victory and the curtain between them.
   Colour is spent on the arena; the shell stays dark so the action reads. */
.game-frame{
 --ink:#ffe9a3;--ink-deep:#1b1030;--ink-shade:#8d6b33;
 --pink:#ff5c8a;--pink-soft:#ff9dc0;--pink-shade:#7a1f55;
 --cyan:#5ee6e0;--cyan-soft:#9fe9e6;--cyan-shade:#2b5f66;
 --lav:#c9bbe8;--lav-dim:#9d90c4;--lav-faint:#6b5f99;
 --panel:#1d1738;--panel-dark:#120d24;--bar:#0f0b1f;--well:#191330;
 --edge:#4b3f70;--edge-dim:#3b3260;--rule:#6a3d8a;
 --cream:linear-gradient(180deg,#ffe9a3,#e0bf67);
 container-type:inline-size;position:relative;width:100%;max-width:720px;aspect-ratio:4/3;margin:0 auto;
 overflow:hidden;border:0;border-radius:0;background:#0e0a1c;font-family:Console,monospace;isolation:isolate;
 outline:3px solid #6f627e;box-shadow:0 0 0 8px #14121d,0 0 0 10px #35304a,0 24px 60px #0009}
.game-frame::after{content:'';position:absolute;inset:0;z-index:60;pointer-events:none;background:repeating-linear-gradient(0deg,#0000001a 0 2px,transparent 2px 4px)}
.game-stage{position:absolute;inset:0;width:100%;height:100%;transform:none!important}
.game-frame :is(.entry,.audio-gate,.title-screen,.combat-panel,.game-lobby){position:absolute;inset:0;width:100%;height:100%;min-height:0}
.game-frame button{font-family:Console,monospace;border:0;border-radius:0;box-shadow:none;transform:none;transition:none;cursor:pointer}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}

/* One tactile response everywhere: an outline under the cursor, never a
   layout shift. Selected states stay visible beneath it. */
.game-frame #gameStage :is(button,summary):focus-visible,.game-frame #gameStage input:focus-visible{outline:2px solid var(--cyan);outline-offset:-2px}
.game-frame #gameStage label:has(input:is([type=radio],[type=checkbox]):focus-visible){outline:2px solid var(--cyan);outline-offset:-2px}
@media(hover:hover){
 .game-frame #gameStage :is(button,summary):not(:disabled):not([aria-disabled=true]):hover{outline:2px solid var(--cyan);outline-offset:-2px;filter:brightness(1.12)}
 .game-frame #gameStage label:has(input:is([type=radio],[type=checkbox]):not(:disabled)):hover{outline:2px solid var(--cyan);outline-offset:-2px}
}
.game-frame #gameStage :is(button,summary):not(:disabled):not([aria-disabled=true]):active{filter:brightness(.82);box-shadow:inset 0 3px #0006}

/* ══ Shell furniture: sound, settings, brand ══ */
.game-frame :is(.speaker-toggle,.settings-toggle){position:absolute;top:10px;z-index:30;display:grid;place-items:center;width:38px;height:38px;padding:8px;border:0;border-radius:0;background:#1a1530;box-shadow:inset 0 0 0 2px var(--edge);color:#e8dcff}
.game-frame .speaker-toggle{right:58px}
.game-frame .settings-toggle{right:12px}
.game-frame :is(.speaker-toggle,.settings-toggle) .icon svg{display:block;width:19px;height:19px}
.game-frame .speaker-toggle[aria-pressed=true]{color:#c9bbe8}
.game-frame .speaker-muted .mute-slash{stroke:#ff526b;stroke-width:2.5}
.game-frame .speaker-toggle[aria-pressed=true] .speaker-waves,.game-frame .speaker-toggle[aria-pressed=false] .speaker-muted{display:none}
.game-frame .console-brand{--brand-size:clamp(46px,12.2cqw,88px);margin:0;text-align:center;font-family:Console,monospace;font-weight:400;letter-spacing:2px;line-height:1.2}
.game-frame .console-brand>span{display:block;font-size:calc(var(--brand-size)*.51);line-height:1.5;color:var(--ink);text-shadow:3px 3px #5a2d7a,6px 6px #1b0f33}
.game-frame .console-brand>strong{display:block;margin-top:-4px;font-size:var(--brand-size);font-weight:400;line-height:1.05;letter-spacing:4px;color:var(--pink);text-shadow:4px 4px #7a1f55,8px 8px #240c33,0 0 30px #ff5c8a44}

/* ══ Sound gate ══ */
.game-frame .audio-gate{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;padding:30px;background:radial-gradient(ellipse at 50% 45%,#2b1d52,#0c0818 72%)}
.game-frame .audio-gate .eyebrow{font:11px/1.6 Console,monospace;letter-spacing:3px;color:var(--cyan-soft);margin:0}
.game-frame .audio-options{display:flex;gap:14px}
.game-frame .audio-choice{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;width:190px;min-height:150px;border:0;border-radius:0;background:#1a1530;color:var(--ink);box-shadow:inset 0 0 0 2px var(--edge)}
.game-frame .audio-choice strong{font:15px/1.4 Console,monospace;font-weight:400;letter-spacing:1px}
.game-frame .audio-choice .icon{color:var(--cyan)}
.game-frame .audio-choice .icon svg{display:block;width:30px;height:30px}
.game-frame .audio-choice .silent-icon{color:var(--lav-dim)}
.game-frame .audio-hint{font:10px/1.6 Console,monospace;color:var(--lav-faint);margin:0}

/* ══ TITLE ══ */
.game-frame .title-screen{display:flex;flex-direction:column;align-items:center;padding:58px 40px 0;overflow:hidden;background:radial-gradient(ellipse at 50% 40%,#3a1f6b 0%,#160f2e 55%,#0c0818 100%)}
.game-frame .title-grid{display:block;position:absolute;inset:auto;left:50%;top:46%;width:900px;height:900px;margin:-450px 0 0 -450px;z-index:0;background:repeating-conic-gradient(from 0deg,#ffffff0a 0deg 9deg,transparent 9deg 18deg);background-image:repeating-conic-gradient(from 0deg,#ffffff0a 0deg 9deg,transparent 9deg 18deg);opacity:.55;transform:none;mask-image:none;animation:none;border:0}
/* The brawl band: two fighters sparring in silhouette, two more far back. */
.game-frame .title-sigil{display:block;position:absolute;inset:auto 0 0;width:auto;height:300px;z-index:0;border:0;border-radius:0;transform:none;box-shadow:none;overflow:hidden}
.game-frame .title-sigil::after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,#0b0718 6%,#0b071800 60%)}
.game-frame .title-sigil i{position:absolute;display:block;background-repeat:no-repeat;background-position:center;background-size:contain;image-rendering:pixelated}
.game-frame .brawl-lines{inset:0;background-image:url('assets/action-lines.svg');background-size:100% 100%;opacity:.12;animation:nw-lines 2.4s steps(6,end) infinite alternate}
.game-frame .brawl-left{left:8px;bottom:-14px;width:230px;height:230px;background-image:url('assets/neighbors/forms/1-human-fighter.svg');opacity:.5;filter:brightness(.42) saturate(.5) drop-shadow(4px 4px 0 #0b061a);animation:nw-spar-l 1.6s ease-in-out infinite}
.game-frame .brawl-right{right:8px;bottom:-14px;width:230px;height:230px;background-image:url('assets/neighbors/forms/6-monster-fighter.svg');opacity:.5;filter:brightness(.42) saturate(.5) drop-shadow(-4px 4px 0 #0b061a);animation:nw-spar-r 1.6s ease-in-out infinite}
.game-frame .brawl-far-a{left:236px;bottom:-40px;width:150px;height:150px;background-image:url('assets/neighbors/forms/2-monster-fighter.svg');opacity:.22;filter:brightness(.3) saturate(.3);animation:nw-float 5s ease-in-out infinite}
.game-frame .brawl-far-b{right:236px;bottom:-40px;width:150px;height:150px;background-image:url('assets/neighbors/forms/10-human-fighter.svg');opacity:.22;filter:brightness(.3) saturate(.3);animation:nw-float 4.2s ease-in-out infinite}
.game-frame .brawl-clash{left:50%;bottom:52px;translate:-50% 0;width:200px;height:200px;background-image:url('assets/action-lines.svg');animation:nw-clash 1.6s steps(3,end) infinite}
.game-frame .title-content{position:relative;z-index:1;width:100%;max-width:none;text-align:center}
.game-frame .title-brand{animation:nw-strike .6s .1s steps(6,end) both}
.game-frame .intro-complete .title-brand{animation:none}
.game-frame .title-tagline{display:flex;align-items:center;justify-content:center;gap:14px;margin:18px 0 0;font:13px/1.6 Console,monospace;letter-spacing:2px;color:var(--cyan-soft)}
.game-frame .title-tagline::before,.game-frame .title-tagline::after{content:'';display:block;width:46px;height:3px;background:var(--cyan)}
.game-frame .title-menu{display:flex;flex-direction:column;gap:8px;width:300px;margin:34px auto 0}
.game-frame .title-menu button{position:relative;display:flex;align-items:center;gap:14px;width:100%;min-height:44px;margin:0;padding:13px 18px;text-align:left;font:15px/1 Console,monospace;letter-spacing:1px;background:#221a38;color:var(--lav);box-shadow:inset 0 0 0 2px var(--edge)}
.game-frame .title-menu .title-start{padding:14px 18px;font-size:18px;background:var(--cream);color:var(--ink-deep);box-shadow:0 5px var(--ink-shade),0 5px 0 3px var(--ink-deep)}
.game-frame .title-start .icon{position:absolute;left:-26px;display:block;color:var(--ink);animation:nw-blink 1s steps(1,end) infinite}
.game-frame .title-start .icon svg{display:block;width:14px;height:14px;fill:currentColor;stroke:currentColor}
.game-frame .entry-status{margin:10px 0 0;font:10px/1.6 Console,monospace;color:var(--cyan-soft);min-height:14px}
.game-frame .entry-status:empty{display:none}
.game-frame .title-credit{position:absolute;left:0;right:0;bottom:14px;z-index:1;margin:0;text-align:center;font:11px/1.6 Console,monospace;letter-spacing:1px;color:#7d6fb0}

/* ══ LOBBY ══ */
.game-frame #lobbyView{display:flex;flex-direction:column;padding:0;gap:0;background:#161129;isolation:isolate}
.game-frame #lobbyView .lobby-heading{flex:none;display:flex;align-items:center;gap:16px;min-height:56px;padding:0 106px 0 18px;background:linear-gradient(180deg,#221a3c,#151026);border-bottom:4px solid var(--rule)}
.game-frame #lobbyView .lobby-heading h1{margin:0;font:19px/1 Console,monospace;letter-spacing:0;color:var(--ink);text-shadow:2px 2px #5a2d7a}
.game-frame #lobbyMode{padding:5px 8px;font:11px/1 Console,monospace;color:var(--cyan);background:var(--bar);box-shadow:inset 0 0 0 2px var(--cyan-shade)}
.game-frame #lobbyMode:empty{display:none}
/* Free Play is the game; Competitive is where it goes once there is a
   collection to fight with. The locked one stays visible so players know it
   is coming. */
.game-frame .play-modes{display:flex;gap:4px}
.game-frame .play-modes button{display:flex;align-items:center;gap:6px;min-height:30px;padding:0 10px;font:11px/1 Console,monospace;color:var(--lav);background:var(--panel);box-shadow:inset 0 0 0 2px #453a6e}
.game-frame .play-modes button[aria-pressed=true]{color:var(--ink-deep);background:var(--cream);box-shadow:0 3px var(--ink-shade),0 0 0 2px var(--pink)}
.game-frame .play-modes button[aria-disabled=true]{color:#6f6496;cursor:not-allowed}
.game-frame .play-modes small{font:8px/1 Console,monospace;padding:2px 4px;color:var(--ink-deep);background:#f4cda6}
.game-frame #lobbyView .quick-match{min-height:30px;padding:0 12px;font:12px/1 Console,monospace;color:var(--ink-deep);background:var(--cream);box-shadow:0 3px var(--ink-shade),0 0 0 2px var(--pink)}
.game-frame #lobbyView button{min-height:44px;padding:8px 10px;border:0;border-radius:0;background:#1a1530;box-shadow:inset 0 0 0 2px var(--edge);font:11px/1 Console,monospace;color:var(--lav)}
.game-frame #lobbyView button:disabled{opacity:.45}
.game-frame #lobbyView input{width:100%;min-width:0;min-height:44px;padding:9px;border:0;border-radius:0;background:var(--well);box-shadow:inset 0 0 0 2px var(--edge);font:14px/1 ui-monospace,monospace;color:var(--ink)}
.game-frame #lobbyView h2{margin:0;font:13px/1 Console,monospace;letter-spacing:0;color:var(--ink)}
.game-frame #lobbyView p{margin:9px 0;font:12px/1.5 ui-monospace,monospace;color:var(--lav)}
/* The notice rail is the lobby's one voice; it keeps a fixed slot. */
.game-frame #lobbyView :is(#notice,#activeMatchStatus,.availability-note){flex:none;display:flex;align-items:center;gap:8px;margin:0;padding:8px 14px;max-height:70px;overflow:auto;border:0;border-bottom:2px solid #7a4a63;background:#2a1b32;font:12px/1.5 ui-monospace,monospace;color:#ffd9a8}
.game-frame #lobbyView :is(#notice,#activeMatchStatus,.availability-note)::before{content:'';flex:none;width:15px;height:15px;background:var(--pink-soft);mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'><circle cx='12' cy='12' r='10'/><path d='M12 16v-4'/><path d='M12 8h.01'/></svg>") no-repeat center/contain}
.game-frame #lobbyView #notice:empty{display:none}
.game-frame #lobbyView .lobby-layout{flex:1;min-height:0;display:grid;grid-template-columns:136px minmax(0,1fr)}
.game-frame #lobbyView .game-tabs{display:flex;flex-direction:column;align-items:stretch;gap:6px;width:auto;margin:0;padding:14px 10px;background:linear-gradient(180deg,#120e22,#191330);border-right:3px solid #4a3a6b}
.game-frame #lobbyView .game-tabs button{position:relative;flex:none;display:flex;align-items:center;gap:8px;min-height:44px;padding:13px 10px 13px 24px;text-align:left;white-space:nowrap;background:none;box-shadow:none;font:13px/1 Console,monospace;color:#b6a8e0}
.game-frame #lobbyView .game-tabs button[aria-pressed=true]{background:linear-gradient(180deg,#ffe9a3,#e0bf67);color:var(--ink-deep);box-shadow:0 4px var(--ink-shade)}
.game-frame #lobbyView .game-tabs button[aria-pressed=true]::before{content:'';position:absolute;left:8px;top:calc(50% - 5px);border-left:7px solid currentColor;border-block:5px solid transparent}
.game-frame #lobbyView .game-tabs::after{content:'ARROWS MOVE\A ENTER SELECTS';white-space:pre-line;margin-top:auto;padding:10px;font:9px/1.6 Console,monospace;color:var(--lav-faint)}
.game-frame #fightBadge{margin-left:auto;font:10px/1 Console,monospace;color:var(--pink-soft)}
.game-frame #lobbyView .game-tabs button[aria-pressed=true] #fightBadge{color:#8a2f57}
.game-frame #lobbyView .lobby-body{min-width:0;overflow:hidden;background:linear-gradient(135deg,#1e1838,#141026 70%)}
.game-frame #lobbyView .lobby-body>section{height:100%;min-height:0}
.game-frame #lobbyView .roster-panel{display:flex;flex-direction:column}
.game-frame #lobbyView :is(.fight-tabs,.challenge-type){flex:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:3px;padding:6px;background:var(--bar)}
.game-frame #lobbyView :is(.fight-tabs,.challenge-type) button{min-height:36px;padding:9px 2px;text-align:center;background:none;box-shadow:none;font:11px/1 Console,monospace;color:var(--lav-dim)}
.game-frame #lobbyView :is(.fight-tabs,.challenge-type) button[aria-pressed=true]{background:#3a2550;color:var(--ink);box-shadow:inset 0 -4px var(--pink)}
.game-frame #lobbyView .fight-tabs button[data-fights=direct]{font-size:10px}
.game-frame #challengeCount{color:var(--pink-soft)}
.game-frame #lobbyView .roster-heading{flex:none;display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:40px;padding:10px 14px;background:#2a2340;border-bottom:2px solid #544874}
.game-frame #lobbyView .roster-heading>span{font:12px/1 Console,monospace;color:var(--cyan)}
.game-frame #lobbyView .match-roster{flex:1;min-height:0;padding:0;overflow:auto;overscroll-behavior:contain;scrollbar-color:#756a88 #15151e;scrollbar-width:thin;display:flex;flex-direction:column}
.game-frame #lobbyView .match-roster:has(.roster-empty){display:grid;place-items:center}
.game-frame #lobbyView .roster-empty{max-width:280px;padding:24px 16px;text-align:center}
.game-frame #lobbyView .roster-empty strong{display:block;font:13px/2 Console,monospace;color:var(--lav);text-shadow:2px 2px #120d24}
.game-frame #lobbyView .roster-empty p{margin:14px 0 0;color:#b0a5d8}
/* A fight row: plate, who and what, then the stake. The row under the
   cursor turns cream — the same cue the tabs and number pad use. */
.game-frame #lobbyView .offer{flex:none;display:grid;grid-template-columns:56px minmax(0,1fr) auto;gap:12px;align-items:center;width:100%;min-height:76px;padding:10px 12px;text-align:left;border:0;border-bottom:1px solid var(--edge-dim);background:#221c3c;color:var(--ink);box-shadow:none}
.game-frame #lobbyView .offer:nth-child(even){background:#1c1734}
.game-frame #lobbyView .match-code{display:grid;place-items:center;width:56px;height:56px;background:var(--panel-dark);box-shadow:inset 0 0 0 2px var(--edge);font:13px/1 Console,monospace;color:var(--cyan);overflow-wrap:anywhere}
.game-frame #lobbyView .match-player{display:block;font:13px/1.5 Console,monospace;overflow-wrap:anywhere}
.game-frame #lobbyView .match-detail{display:block;font:12px/1.4 ui-monospace,monospace;color:#b0a5d8;overflow-wrap:anywhere}
.game-frame #lobbyView .match-stake{max-width:120px;text-align:right;text-transform:uppercase;font:10px/1.3 Console,monospace;color:var(--pink-soft);overflow-wrap:anywhere}
.game-frame #lobbyView .match-stake b{display:block;font:15px/1.3 Console,monospace;font-weight:400;color:var(--ink)}
.game-frame #lobbyView .offer:is(:hover,:focus-visible){background:linear-gradient(90deg,#ffe9a3,#f0d283);color:var(--ink-deep);box-shadow:inset 0 0 0 3px var(--ink-deep);filter:none}
.game-frame #lobbyView .offer:is(:hover,:focus-visible) :is(.match-detail,.match-stake){color:#5b3f7a}
.game-frame #lobbyView .offer:is(:hover,:focus-visible) .match-stake b{color:#8a2f57}
.game-frame #lobbyView .offer:is(:hover,:focus-visible) .match-code{background:#1b103022;box-shadow:inset 0 0 0 2px var(--ink-deep);color:var(--ink-deep)}
.game-frame #lobbyView :is(#findMatch,#playerSearch,#selectFighter){flex:none;display:flex;align-items:center;gap:10px;margin:0;padding:8px 12px;background:var(--bar);border-top:2px solid var(--edge-dim)}
.game-frame #lobbyView #findMatch label{flex:none;font:10px/1 Console,monospace;color:var(--lav-dim)}
.game-frame #lobbyView :is(#matchId,#playerQuery,#fighterId){flex:1;width:0}
.game-frame #lobbyView :is(#findMatch,#playerSearch,#selectFighter) button{flex:none;padding:9px 14px;background:#3a2550;box-shadow:0 3px var(--ink-deep);color:var(--ink)}
.game-frame #lobbyView .roster-note{flex:none;margin:0;padding:8px 12px;background:var(--bar);font:11px/1.5 ui-monospace,monospace;color:#b0a5d8}
.game-frame #lobbyView .roster-paging{flex:none;display:flex;align-items:center;justify-content:space-between;padding:0 8px;background:var(--bar);font:11px/1 Console,monospace;color:var(--lav-dim)}
.game-frame #lobbyView .roster-paging button{background:none;box-shadow:none}
.game-frame #lobbyView .lobby-command{flex:none;display:flex;align-items:center;gap:12px;min-height:60px;padding:8px 16px;background:linear-gradient(180deg,#151026,#0e0a1c);border-top:4px solid var(--rule)}
.game-frame #lobbyView .lobby-command button{padding:11px 16px;background:none;box-shadow:none;font:13px/1 Console,monospace;color:var(--lav-dim)}
.game-frame #lobbyView #practiceStart{background:#3a2550;color:var(--ink);box-shadow:0 4px var(--ink-deep)}
.game-frame #lobbyView .lobby-command #gameInfo{margin-left:auto;display:grid;place-items:center;width:40px;height:40px;min-height:0;padding:10px;background:#1a1530;box-shadow:inset 0 0 0 2px var(--edge);color:var(--cyan)}
.game-frame #lobbyView .info-button .icon svg{display:block;width:20px;height:20px}

/* Setup, player and confirm panels share the roster's frame. */
.game-frame #lobbyView :is(.setup-panel,.player-panel,.confirm-panel){display:flex;flex-direction:column;gap:8px;padding:12px;overflow:hidden}
.game-frame #lobbyView .fighter-choice{flex:none;display:flex;align-items:center;gap:10px;width:100%;min-width:0;min-height:56px;padding:5px 9px;text-align:left;background:var(--panel);box-shadow:inset 0 0 0 2px var(--edge)}
.game-frame #lobbyView .fighter-choice img{flex:none;width:46px;height:46px;aspect-ratio:1;object-fit:contain;image-rendering:pixelated;background:var(--panel-dark)}
.game-frame #lobbyView .fighter-choice>span{flex:1;min-width:0}
.game-frame #lobbyView .fighter-choice strong{display:block;font:12px/1.6 Console,monospace;font-weight:400;color:var(--ink)}
.game-frame #lobbyView .fighter-choice small{font:11px/1.4 ui-monospace,monospace;color:#b0a5d8}
.game-frame #lobbyView #playerRecord{display:block;margin-top:4px}
.game-frame #lobbyView .create-fields{flex:none;display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:8px}
.game-frame #lobbyView .create-fields:has(#targetField[hidden]){grid-template-columns:1fr}
.game-frame #lobbyView :is(#targetField,.stake-field){display:flex;flex-direction:column;gap:5px;min-width:0}
.game-frame #lobbyView :is(#targetField,.stake-field) label{font:10px/1.6 Console,monospace;color:var(--cyan-soft);letter-spacing:1px}
.game-frame #lobbyView :is(#targetStatus,#presenceStatus,#inventory){flex:none;margin:0;padding:0 16px;max-height:36px;overflow:auto;font:12px/1.4 ui-monospace,monospace;color:var(--lav-dim)}
.game-frame #lobbyView #inventory:empty{display:none}
.game-frame #lobbyView :is(#create,#confirmFight,#fighterConfirm){background:var(--cream);color:var(--ink-deep);box-shadow:0 4px var(--ink-shade)}
.game-frame #lobbyView .setup-panel #create{margin-top:auto;flex:none;font-size:14px;min-height:50px}
.game-frame #lobbyView .player-heading{flex:none;display:flex;align-items:center;gap:8px}
.game-frame #lobbyView .player-heading button{flex:1;min-width:0}
.game-frame #lobbyView #panel-activity>button{margin:0;flex:none;width:100%}
.game-frame #lobbyView .wallet-fights{flex:none;display:flex;flex-direction:column;gap:4px;max-height:100px;overflow:auto}
.game-frame #lobbyView .player-payout{flex:none;display:flex;align-items:center;justify-content:space-between;gap:8px;margin:auto 0 0;padding:8px 0 0;border-top:2px solid var(--edge-dim)}
.game-frame #lobbyView #claimAmount{font:12px/1.4 ui-monospace,monospace;color:var(--ink)}
.game-frame #lobbyView .confirm-heading{flex:none;display:flex;align-items:center;justify-content:space-between}
.game-frame #lobbyView .confirm-versus{flex:1;min-height:0;display:grid;grid-template-columns:1fr 46px 1fr;align-items:center;justify-items:center;gap:6px;text-align:center}
.game-frame #lobbyView .confirm-versus>div{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;width:100%;height:100%;min-height:0;font:11px/1.6 Console,monospace;color:var(--ink);overflow-wrap:anywhere}
.game-frame #lobbyView .confirm-versus img{width:clamp(56px,14cqw,104px);height:auto;max-height:calc(100% - 32px);aspect-ratio:1;object-fit:contain;image-rendering:pixelated}
.game-frame #lobbyView .confirm-versus strong{font:28px/1 Console,monospace;font-weight:400;color:var(--ink);text-shadow:3px 3px var(--pink-shade)}
.game-frame #lobbyView .confirm-money{flex:none;display:grid;grid-template-columns:1fr 1fr;gap:4px 8px;padding:9px 0;border-block:2px solid var(--edge-dim);font:13px/1.5 ui-monospace,monospace;color:var(--lav)}
.game-frame #lobbyView .confirm-money>*:nth-child(even){text-align:right}
.game-frame #lobbyView .confirm-money strong{color:var(--ink)}
.game-frame #lobbyView .confirm-actions{flex:none;display:flex;gap:8px}
.game-frame #lobbyView .confirm-actions button{flex:1}
.game-frame #lobbyView .online-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;width:100%;text-align:left;border:0;border-bottom:1px solid var(--edge-dim);background:#221c3c;box-shadow:none}
.game-frame #lobbyView .online-row small{display:block;font:12px/1.4 ui-monospace,monospace;color:#b0a5d8}
.game-frame #lobbyView .online-row>span:last-child{font:10px/1 Console,monospace;color:var(--cyan)}
.game-frame #lobbyView[data-locked=true] .lobby-body>section:not(.fighter-select){color:#9997a1}
.game-frame #lobbyView[data-locked=true] .lobby-body :is(.match-roster,.setup-panel,.player-panel,.fighter-select[data-mode=owned],#findMatch,#playerSearch,.roster-paging){filter:grayscale(1);opacity:.7}
.game-frame #lobbyView[data-locked=true] .lobby-body button:disabled{opacity:.75}

/* ══ FIGHTER SELECT ══ */
/* Choosing a fighter takes the whole screen. The lobby's header, rail and
   command bar step aside so the roster and the preview get the room. */
.game-frame #lobbyView:has(#panel-fighters:not([hidden])) :is(.lobby-heading,#notice,#activeMatchStatus,.availability-note,.game-tabs,.lobby-command){display:none}
.game-frame #lobbyView:has(#panel-fighters:not([hidden])) .lobby-layout{grid-template-columns:minmax(0,1fr)}
.game-frame #lobbyView:has(#panel-fighters:not([hidden])) .lobby-body{background:none}

.game-frame #lobbyView .fighter-select{position:relative;display:flex;flex-direction:column;min-height:0;background:#140f28}
.game-frame #lobbyView .fighter-select::before{content:'';position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(135deg,#ffffff06 0 14px,transparent 14px 28px)}
.game-frame #lobbyView .fighter-select .roster-heading{position:relative;min-height:56px;padding:12px 106px 12px 18px;background:linear-gradient(180deg,#221a3c,#151026);border-bottom:4px solid var(--rule)}
.game-frame #lobbyView .fighter-select .roster-heading h2{font-size:19px;text-shadow:2px 2px #5a2d7a}
.game-frame #lobbyView #fighterBack{background:none;box-shadow:none;color:var(--lav-dim)}
.game-frame #lobbyView .fighter-select-stage{position:relative;flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) 268px;gap:0;padding:0}
.game-frame #lobbyView .fighter-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:8px;min-height:0;padding:12px;overflow:hidden}
.game-frame #lobbyView .fighter-grid:has(.roster-empty){display:block}
.game-frame #lobbyView .fighter-tile{display:grid;grid-template-rows:minmax(0,1fr) auto;gap:2px;min-width:0;min-height:0;padding:4px;text-align:center;border:0;background:#1e1838;box-shadow:inset 0 0 0 2px var(--edge)}
.game-frame #lobbyView .fighter-tile img{display:block;width:100%;height:100%;min-height:0;object-fit:contain;image-rendering:pixelated;background:var(--panel-dark)}
.game-frame #lobbyView .fighter-tile span{flex:none;font:10px/1.6 Console,monospace;color:#b6a8e0}
.game-frame #lobbyView .fighter-tile[aria-pressed=true]{background:var(--cream);box-shadow:0 0 0 3px var(--pink),0 6px 0 3px var(--ink-deep)}
.game-frame #lobbyView .fighter-tile[aria-pressed=true] span{color:var(--ink-deep)}
/* The preview is the screen's one lit surface: the fighter you are taking in. */
.game-frame #lobbyView .fighter-preview{position:relative;display:grid;grid-template-rows:auto minmax(0,1fr) auto;align-items:center;gap:10px;min-width:0;min-height:0;padding:18px;border-left:3px solid #4a3a6b;overflow:hidden;background:linear-gradient(180deg,#2b1f52,#4a2a6e)}
.game-frame #lobbyView .fighter-preview img{display:block;width:100%;height:100%;min-height:0;max-width:100%;object-fit:contain;image-rendering:pixelated}
.game-frame #lobbyView .fighter-preview strong{display:block;width:100%;padding:10px;text-align:center;font:17px/1.3 Console,monospace;color:var(--ink);background:var(--panel-dark);box-shadow:inset 0 0 0 2px var(--edge);white-space:nowrap}
.game-frame #lobbyView .fighter-select-commands{position:relative;flex:none;display:flex;justify-content:center;align-items:center;gap:10px;padding:10px 16px;background:var(--bar);border-top:4px solid var(--rule)}
.game-frame #lobbyView #fighterConfirm{margin:0;min-width:150px;min-height:48px;padding:12px 30px;font-size:15px}
.game-frame #lobbyView .fighter-select[data-mode=practice] .fighter-select-commands{justify-content:center}
.game-frame #lobbyView .fighter-select[data-mode=practice] #fighterConfirm{margin:0;min-width:200px}
.game-frame #lobbyView .fighter-select[data-mode=practice] .fighter-grid{align-content:center}
.game-frame #lobbyView #fighterPaging{position:relative}

/* ══ VERSUS ══ */
.versus-intro{position:absolute;inset:0;z-index:20;overflow:hidden;background:linear-gradient(115deg,#2248c7 0 49.5%,#f6d881 49.5% 50.5%,#a82460 50.5%);isolation:isolate}
.versus-intro::before{content:'';position:absolute;inset:0;z-index:-1;background:repeating-conic-gradient(from 12deg at 50% 50%,#ffffff12 0deg 3deg,transparent 3deg 13deg)}
.versus-intro::after{content:'';position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse at center,transparent 25%,#100e3d88 100%)}
.matchup{position:relative;width:100%;height:100%}
.vs-player{position:absolute;left:3%;top:2%;width:62%;height:39%;display:grid;grid-template-rows:minmax(0,1fr) auto;align-self:stretch;min-width:0;min-height:0;gap:12px;text-align:center;animation:nw-vs-left .5s steps(6,end) both}
.vs-player:first-child{grid-template-rows:auto minmax(0,1fr)}
.vs-player:first-child strong{grid-row:1}
.vs-player:first-child img{grid-row:2}
.vs-player:last-child{left:auto;top:auto;right:3%;bottom:2%;animation-name:nw-vs-right}
.vs-player img{display:block;width:100%;height:100%;min-height:0;object-fit:contain;image-rendering:pixelated;filter:drop-shadow(6px 8px 0 #140c3480)}
.vs-player strong{position:relative;z-index:2;display:block;padding:14px 6px;font:15px/1.4 Console,monospace;font-weight:400;white-space:nowrap;color:#ffe9a3;background:#160e32;box-shadow:0 4px 0 #0005}
.vs-mark{position:absolute;left:0;right:0;top:50%;translate:0 -50%;z-index:3;display:block;width:100%;padding:10px 0;background:#170e35ed;border-block:3px solid #ffe9a3;font:76px/1 Console,monospace;text-align:center;color:#ffe9a3;text-shadow:4px 4px #a3244f,8px 8px #210d37;animation:nw-stamp .4s .3s both}
/* The splash advances automatically; tapping anywhere skips the introduction. */

/* ══ ARENA ══ */
.game-frame #combatView{display:flex;flex-direction:column;width:100%;height:100%;padding:0;gap:0;overflow:hidden;background:#1a1433;font-family:Console,monospace;isolation:isolate}
.game-frame #combatView .room-bar{flex:none;display:flex;align-items:center;gap:12px;min-height:34px;padding:0 106px 0 14px;border:0;background:var(--bar);z-index:5}
.game-frame #combatView #mode{display:none}
.game-frame #combatView #backLobby{order:-1;text-transform:uppercase;display:flex;align-items:center;gap:6px;min-height:34px;padding:6px 0;background:none;box-shadow:none;font:11px/1 Console,monospace;color:var(--lav-dim)}
.game-frame #combatView #backLobby .icon svg{display:block;width:14px;height:14px}
.game-frame #combatView h1{flex:1;min-width:0;margin:0;text-align:right;font:11px/1.4 Console,monospace;font-weight:400;letter-spacing:0;color:#c8a0e8;overflow-wrap:anywhere}
/* HUD: who, how many lives left, and the pot between them. */
.game-frame #combatView .battle-hud{flex:none;min-height:98px;display:grid;grid-template-columns:1fr auto 1fr;align-items:start;gap:14px;padding:10px 16px 12px;background:linear-gradient(180deg,#241c44,#171130);border-bottom:4px solid var(--rule);z-index:2}
.game-frame #combatView .player-hud{position:relative}
.game-frame #combatView .player-hud:last-child{text-align:right}
.game-frame #combatView .player-hud h2{margin:0;font:15px/1.4 Console,monospace;font-weight:400;letter-spacing:0;color:var(--cyan);text-shadow:2px 2px #0d2b2e;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.game-frame #combatView .player-hud:last-child h2{color:#ff8fb6;text-shadow:2px 2px #3a0d24}
.game-frame #combatView [id^=lives]{--health:#2fd8b0;--remaining:100%;position:relative;display:block;width:100%;max-width:300px;height:20px;margin:6px 0 0;padding:3px;font-size:0;background:var(--panel-dark);box-shadow:inset 0 0 0 2px var(--edge-dim)}
.game-frame #combatView .player-hud:last-child [id^=lives]{margin-left:auto;--health:#ff5c8a}
.game-frame #combatView [id^=lives]::before,.game-frame #combatView [id^=lives]::after{content:'';position:absolute;inset:3px;height:auto}
/* Eight lives, eight segments (LIVES in web/game-rules.js). */
.game-frame #combatView [id^=lives]::after{background:repeating-linear-gradient(90deg,#2a1030 0 calc(12.5% - 3px),transparent calc(12.5% - 3px) 12.5%)}
.game-frame #combatView [id^=lives]::before{z-index:1;background:repeating-linear-gradient(90deg,var(--health) 0 calc(12.5% - 3px),transparent calc(12.5% - 3px) 12.5%);clip-path:inset(0 calc(100% - var(--remaining)) 0 0)}
.game-frame #combatView [data-lives="7"]{--remaining:87.5%}
.game-frame #combatView [data-lives="6"]{--remaining:75%}
.game-frame #combatView [data-lives="5"]{--remaining:62.5%}
.game-frame #combatView [data-lives="4"]{--remaining:50%}
.game-frame #combatView [data-lives="3"]{--remaining:37.5%}
.game-frame #combatView [data-lives="2"]{--remaining:25%}
.game-frame #combatView [data-lives="1"]{--remaining:12.5%}
.game-frame #combatView [data-lives="0"]{--remaining:0%}
.game-frame #combatView .player-ready{display:block;margin-top:5px;min-height:13px;font:10px/1.4 Console,monospace;color:var(--cyan-soft);white-space:nowrap}
.game-frame #combatView .player-hud:last-child .player-ready{color:#ffb3cf}
.game-frame #combatView #pot{align-self:center;max-width:150px;padding-top:2px;text-align:center;font:17px/1.3 Console,monospace;color:var(--ink);text-shadow:2px 2px var(--pink-shade);overflow-wrap:anywhere}
.game-frame #combatView .life-change{position:absolute;bottom:-4px;right:0;font:18px/1 Console,monospace;color:var(--pink);text-shadow:2px 2px #2a0c2e;white-space:nowrap;z-index:5}
.game-frame #combatView .player-hud:last-child .life-change{left:0;right:auto}
.game-frame #combatView .life-change:empty{display:none}
/* READ BOARD: the round record. Each cell is one round — my throw above,
   theirs below — tinted by the form each side committed to. */
.game-frame #combatView .read-board{flex:none;display:flex;align-items:center;gap:9px;padding:5px 14px;background:var(--bar);border-bottom:2px solid var(--edge-dim)}
.game-frame #combatView .board-label{flex:none;font:9px/1.3 Console,monospace;letter-spacing:1px;color:var(--lav-faint)}
.game-frame #combatView .board-cells{flex:1;min-width:0;display:flex;gap:3px}
.game-frame #combatView .board-cell{flex:1;min-width:0;display:grid;gap:2px;padding:2px;background:#131024}
.game-frame #combatView .board-cell.is-current{box-shadow:inset 0 0 0 2px var(--ink)}
.game-frame #combatView .board-chip{display:grid;place-items:center;height:15px;font:11px/1 Console,monospace}
.game-frame #combatView .board-chip.form-empty{background:#171130;color:#463c6e;font-size:10px;box-shadow:inset 0 0 0 1px #2a2450}
.game-frame #combatView .board-chip.form-human{background:#2a5fb0;color:#fff}
.game-frame #combatView .board-chip.form-monster{background:#8a2fb0;color:#fff}
.game-frame #combatView .board-mine:not(.form-empty){box-shadow:inset 0 0 0 1px var(--cyan)}
.game-frame #combatView .board-theirs:not(.form-empty){box-shadow:inset 0 0 0 1px var(--pink)}
/* The scene. Its ground colour carries the round: violet while choosing,
   blue on a weapons lock, magenta when somebody takes the hit. */
.game-frame #combatView .battle-scene{position:relative;flex:1;min-height:0;overflow:hidden;background:linear-gradient(180deg,#4a3fb8 0%,#6a3d9e 45%,#3d2264 100%)}
.game-frame #combatView .battle-scene::before{content:'';position:absolute;left:50%;bottom:-30%;width:760px;height:760px;margin-left:-380px;pointer-events:none;background:radial-gradient(circle,#ffd98a55 0%,transparent 62%)}
.game-frame #combatView .battle-scene::after{content:'';position:absolute;left:0;right:0;bottom:0;height:86px;pointer-events:none;background:linear-gradient(0deg,#2a1a4d,#2a1a4d00),repeating-linear-gradient(90deg,#ffffff0c 0 28px,transparent 28px 56px);border-top:3px solid #8a63c8}
.game-frame #combatView .arena-backdrop{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:fill;pointer-events:none;opacity:.16;mask-image:radial-gradient(ellipse at center,transparent 18%,#000 70%);animation:nw-lines 2.2s steps(6,end) infinite alternate;transition:opacity .2s}
.game-frame #combatView .fighters{position:absolute;inset:0;z-index:2;display:grid;grid-template-columns:1fr 160px 1fr;align-items:end;gap:0;width:100%;height:100%;margin:0;padding:0;border:0;background:none}
.game-frame #combatView .fighters::before{display:none}
.game-frame #combatView .fighters article{position:relative;display:block;align-self:stretch;width:100%;height:100%;min-height:0;max-height:none;padding:0;border:0;border-radius:0;background:none;box-shadow:none;overflow:visible;isolation:isolate}
.game-frame #combatView .fighters article::before{display:none}
.game-frame #combatView #fighterCard0{grid-column:1}
.game-frame #combatView #fighterCard1{grid-column:3}
.game-frame #combatView .fighters img{position:absolute;bottom:0;left:-14px;translate:none;display:block;width:auto;height:calc(100% + 8px);max-width:none;max-height:none;aspect-ratio:1;object-fit:contain;margin:0;border:0;background:none;image-rendering:pixelated;filter:drop-shadow(5px 5px 0 #14082a99)}
.game-frame #combatView #fighterCard1 img{left:auto;right:-16px;filter:drop-shadow(-5px 5px 0 #14082a99)}
/* Pre-reveal the forms are tags in the corners; at reveal they name themselves. */
.game-frame #combatView .form-state{position:absolute;left:14px;right:auto;top:8px;width:max-content;padding:5px 9px;text-align:left;background:#0f0b1fdd;font:11px/1.4 Console,monospace;color:var(--cyan);box-shadow:inset 0 0 0 2px var(--cyan-shade);text-shadow:none;z-index:5}
.game-frame #combatView #fighterCard1 .form-state{left:auto;right:14px;color:var(--pink-soft);box-shadow:inset 0 0 0 2px var(--pink-shade)}
.game-frame #combatView .throw-badge{position:absolute;left:auto;right:auto;top:64px;display:grid;place-items:center;width:78px;height:60px;min-width:0;padding:0;border:0;border-radius:0;outline:0;background:var(--panel-dark);font:30px/1 Console,monospace;color:var(--cyan);text-shadow:2px 2px #0d2b2e;box-shadow:0 0 0 3px var(--cyan);z-index:6}
.game-frame #combatView #fighterCard0 .throw-badge{right:8px}
.game-frame #combatView #fighterCard1 .throw-badge{left:8px;color:var(--pink);text-shadow:2px 2px #3a0d24;box-shadow:0 0 0 3px var(--pink)}
.game-frame #combatView :is(.throw-badge,.form-state):empty{display:none}
/* Centre column: what the round is asking for, and the number it produced. */
.game-frame #combatView .versus{position:absolute;left:50%;top:22px;transform:translateX(-50%);align-self:auto;display:flex;flex-direction:column;align-items:center;gap:6px;width:260px;padding:0;text-align:center;text-shadow:none;z-index:4}
.game-frame #combatView #roundPhase{display:inline-block;padding:5px 14px;background:#120d24e0;font:13px/1.4 Console,monospace;letter-spacing:2px;color:var(--ink);box-shadow:inset 0 0 0 2px var(--rule)}
.game-frame #combatView #roundTotal{display:block;width:auto;height:auto;margin-top:4px;transform:none;letter-spacing:0;font:54px/1 Console,monospace;font-weight:400;color:var(--ink);text-shadow:4px 4px var(--pink-shade),8px 8px #2a0c2e}
.game-frame #combatView #roundParity{display:inline-block;padding:3px 8px;background:#0e0a1cbb;font:12px/1.4 Console,monospace;letter-spacing:1px;color:#ffd9a8}
.game-frame #combatView #clock{padding:3px 8px;background:#120d24e0;font:11px/1.4 Console,monospace;color:#f4cda6}
.game-frame #combatView :is(#clock,#roundParity,#roundPhase):empty{display:none}
.game-frame #combatView .outcome-banner{position:absolute;left:0;right:0;top:0;padding:8px;text-align:center;font:20px/1.4 Console,monospace;letter-spacing:2px;z-index:8;pointer-events:none;background:#7a1f55ee;border-bottom:3px solid #ffb3cf;color:var(--ink);text-shadow:3px 3px #2a0c2e}
.game-frame #combatView .outcome-banner:empty{display:none}
/* Inset past the HUD's CHOOSING / CALLING / LOCKED labels, which sit at the
   same height under each life bar and were drawn over by a full-width strip. */
.game-frame #combatView .combat-messages{position:absolute;left:112px;right:112px;top:96px;z-index:7;text-align:center;pointer-events:none}
.game-frame #combatView #combatNotice{margin:0;padding:6px;background:#120d24f5;font:11px/1.4 ui-monospace,monospace;color:#ffd9a8;max-height:66px;overflow:auto;pointer-events:auto}
.game-frame #combatView #summary{margin:0;padding:3px 5px;background:#120d24e8;font:11px/1.4 ui-monospace,monospace;color:var(--lav);pointer-events:auto}
.game-frame #combatView :is(#summary,#combatNotice):empty{display:none}
/* The status line says what is happening and what to do about it. The tone is
   set by match-status.js and is the difference between "you are holding the
   game up" and "nothing is wrong, wait" — a distinction a player reads from
   colour long before they read the sentence. */
.game-frame #combatView #summary[data-tone=act]{color:#ffe9b0;box-shadow:inset 3px 0 0 #ffb347}
.game-frame #combatView #summary[data-tone=wait]{color:var(--lav-dim)}
.game-frame #combatView #summary[data-tone=won]{color:#bff5c8;box-shadow:inset 3px 0 0 #4fd97a}
.game-frame #combatView #summary[data-tone=lost]{color:#e8c2d6}
.game-frame #combatView #summary[data-tone=ended]{color:var(--lav)}
.game-frame #combatView #summary[data-tone=warn]{color:#ffd0c2;box-shadow:inset 3px 0 0 #ff6b4a}

/* ══ COMMAND DECK ══ */
.game-frame #combatView .command-deck{flex:none;position:relative;z-index:4;display:grid;grid-template-columns:minmax(0,1fr) auto;align-content:center;align-items:center;gap:8px 12px;min-height:154px;padding:12px 14px;background:linear-gradient(180deg,#241c44,#141026);border:0;border-top:4px solid var(--rule)}
.game-frame #combatView #choices{display:contents}
.game-frame #combatView .number-selection{grid-column:1/-1;grid-row:1;display:grid;grid-template-columns:62px minmax(0,1fr);align-items:center;gap:10px}
.game-frame #combatView :is(#choices>div>label,legend){margin:0;font:11px/1 Console,monospace;letter-spacing:0;color:var(--cyan-soft)}
/* Four throws in two groups: 1 and 2 as the neighbor, 3 and 4 as the
   monster. Each group is headed with what its throws cost the loser, and the
   monster's wear the monster colour. The number is the throw: it is what gets
   added, so the pad shows nothing else on the button. */
.game-frame #combatView .number-pad{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.game-frame #combatView .throw-group{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.game-frame #combatView .throw-group+.throw-group{position:relative}
.game-frame #combatView .throw-group+.throw-group::before{content:'';position:absolute;left:-7px;top:0;bottom:0;width:2px;background:#453a6e}
.game-frame #combatView .throw-group-label{grid-column:1/-1;font:9px/1 Console,monospace;letter-spacing:0;color:#9d90c4;text-align:center}
.game-frame #combatView .monster-group .throw-group-label{color:#e3a6f5}
.game-frame #combatView .number-pad button{display:flex;align-items:center;justify-content:center;min-height:40px;padding:0;text-align:center;font:21px/1 Console,monospace;color:var(--lav);background:var(--panel);box-shadow:inset 0 0 0 2px #453a6e}
.game-frame #combatView .number-pad button.monster-throw{color:#e3a6f5;box-shadow:inset 0 0 0 2px #6a3a86}
.game-frame #combatView .number-pad button[aria-pressed=true]{color:var(--ink-deep);background:var(--cream);text-shadow:none;box-shadow:0 4px var(--ink-shade),0 0 0 3px var(--pink)}
.game-frame #combatView .number-pad button.monster-throw[aria-pressed=true]{color:#fdeaff;background:linear-gradient(180deg,#c065d8,#8a2fb0);box-shadow:0 4px #4a1060,0 0 0 3px var(--pink)}
/* Your side this round: odds wins on an odd total, evens on an even one. The
   round's caller picks it before anybody throws, from the two call buttons
   that stand where the badge goes; the other player takes the other side. */
.game-frame #combatView .role-line{grid-column:1;grid-row:2;position:relative;display:flex;align-items:center;gap:10px;min-width:0;min-height:46px;padding:0 12px 0 72px;margin:0}
.game-frame #combatView .role-line .role-label{position:absolute;left:0;top:50%;translate:0 -50%;width:62px;font:11px/1 Console,monospace;color:var(--cyan-soft)}
.game-frame #combatView .role-line strong{display:grid;place-items:center;min-width:92px;min-height:40px;padding:0 10px;font:16px/1 Console,monospace;font-weight:400;color:#eaf6ff;background:linear-gradient(180deg,#3f8fd8,#2a5fb0);box-shadow:0 4px #16306a,0 0 0 3px var(--cyan)}
.game-frame #combatView .role-line[data-role=evens] strong{color:#fff4e0;background:linear-gradient(180deg,#e0923f,#b0602a);box-shadow:0 4px #6a3416,0 0 0 3px #ffd9a8}
/* Nobody has a side until the round is called. */
.game-frame #combatView .role-line[data-phase=call] strong{color:var(--lav);background:var(--panel);box-shadow:inset 0 0 0 2px #453a6e}
.game-frame #combatView .role-line #roleRule{font:11px/1.3 Console,monospace;color:var(--lav)}
.game-frame #combatView .call-pad{display:flex;gap:6px}
.game-frame #combatView .call-pad[hidden]{display:none}
.game-frame #combatView .call-pad button{min-width:84px;min-height:40px;padding:0 10px;font:16px/1 Console,monospace;color:#eaf6ff;background:linear-gradient(180deg,#3f8fd8,#2a5fb0);box-shadow:0 4px #16306a,0 0 0 2px var(--cyan)}
.game-frame #combatView .call-pad button[data-call=even]{color:#fff4e0;background:linear-gradient(180deg,#e0923f,#b0602a);box-shadow:0 4px #6a3416,0 0 0 2px #ffd9a8}
.game-frame #combatView .call-pad button:disabled{opacity:.5}
.game-frame #combatView fieldset{grid-column:1;grid-row:2;position:relative;display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:6px;min-width:0;padding:0 0 0 72px;margin:0;border:0}
.game-frame #combatView legend{position:absolute;left:0;top:50%;translate:0 -50%;width:62px;padding:0}
.game-frame #combatView fieldset input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.game-frame #combatView fieldset label{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:46px;padding:3px 5px;text-align:center;cursor:pointer;border:0;background:var(--panel);box-shadow:inset 0 0 0 2px #453a6e}
.game-frame #combatView .form-name{font:14px/1 Console,monospace;letter-spacing:0;color:var(--lav)}
.game-frame #combatView .form-rule{margin:0;font:10px/1 Console,monospace;letter-spacing:0;color:#9d90c4}
.game-frame #combatView fieldset label:has(input[value=human]:checked){background:linear-gradient(180deg,#3f8fd8,#2a5fb0);box-shadow:0 4px #16306a,0 0 0 3px var(--cyan)}
.game-frame #combatView fieldset label:has(input[value=monster]:checked){background:linear-gradient(180deg,#c065d8,#8a2fb0);box-shadow:0 4px #4a1060,0 0 0 3px var(--pink)}
.game-frame #combatView fieldset label:has(input[value=human]:checked) :is(.form-name,.form-rule){color:#eaf6ff}
.game-frame #combatView fieldset label:has(input[value=monster]:checked) :is(.form-name,.form-rule){color:#fdeaff}
.game-frame #combatView fieldset label:has(input:disabled){cursor:default;opacity:.55}
.game-frame #combatView .actions{grid-column:2;grid-row:2;display:flex;align-items:center;justify-content:center;gap:10px;margin:0;min-height:46px;flex-wrap:wrap}
.game-frame #combatView .actions button{display:grid;place-items:center;min-height:46px;padding:0 24px;border:0;border-radius:0;font:16px/1 Console,monospace;letter-spacing:0;text-transform:uppercase;background:linear-gradient(180deg,#ff7aa8,#d93a72);color:#fff;box-shadow:0 4px var(--pink-shade);animation:nw-pulse 1.1s steps(2,end) infinite}
.game-frame #combatView .actions button:nth-child(n+2){background:#2a2148;color:var(--lav);box-shadow:inset 0 0 0 2px var(--edge);font-size:13px;padding:0 16px;animation:none}
.game-frame #combatView .actions button:disabled{background:#241d40;color:#8b7fba;box-shadow:inset 0 0 0 2px var(--edge-dim);opacity:1;animation:none}
.game-frame #combatView .round-recap{grid-column:1/-1;grid-row:3;margin:0;text-align:center;font:13px/1.5 Console,monospace;color:var(--lav)}
.game-frame #combatView .round-recap:empty{display:none}
/* With the choices gone the deck is a recap and one way forward. */
.game-frame #combatView:not([data-phase=finished]) .command-deck:has(#choices[hidden]){grid-template-columns:minmax(0,1fr);justify-items:center;gap:10px}
.game-frame #combatView:not([data-phase=finished]) .command-deck:has(#choices[hidden]) .actions{grid-column:1;grid-row:auto}
.game-frame #combatView:not([data-phase=finished]) .command-deck:has(#choices[hidden]) .actions button:first-child{min-width:230px;height:50px;background:var(--cream);color:var(--ink-deep);box-shadow:0 5px var(--ink-shade);animation:nw-pulse 1s steps(2,end) infinite}
.game-frame #combatView:not([data-phase=finished]) .command-deck:has(#choices[hidden]) .round-recap{grid-column:1;grid-row:1}
.game-frame #combatView #secretStatus,.game-frame #combatView #result{position:absolute;width:1px;height:1px;padding:0;border:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.game-frame #combatView #recovery{position:absolute;left:8px;right:8px;bottom:4px;z-index:7;padding:3px;background:var(--panel-dark);font:11px/1.4 ui-monospace,monospace;color:var(--lav)}
.game-frame #combatView #recovery summary{font:11px/1.6 Console,monospace;color:var(--ink);cursor:pointer}
.game-frame #combatView:has(#recovery:not([hidden])) .command-deck{padding-bottom:28px}
.game-frame #combatView #recovery[open]{inset:45px 10px 10px;padding:15px;background:#120d24;box-shadow:inset 0 0 0 2px var(--edge);overflow:auto}

/* ══ Round choreography ══ */
.game-frame #combatView[data-phase=locked] .fighters img{filter:brightness(.65) drop-shadow(4px 4px 0 #14082a99)}
.game-frame #combatView[data-phase=locked] .throw-badge{color:#c5bad4;background:#18152c;box-shadow:0 0 0 3px #453a6e;text-shadow:none}
.game-frame #combatView[data-phase=locked] #roundTotal{animation:nw-beat .52s steps(2,end) infinite}
.game-frame #combatView[data-phase=locked] .arena-backdrop{opacity:.2;animation:nw-gather 1s steps(5,end) infinite}
.game-frame #combatView[data-phase=reveal] .arena-backdrop{opacity:.55;animation:nw-burst .7s steps(6,end) both}
.game-frame #combatView[data-phase=reveal] .throw-badge{animation:nw-land .35s steps(5,end) both}
.game-frame #combatView[data-phase=reveal] .fighters img{animation:nw-form-flash .5s steps(3,end) both}
.game-frame #combatView[data-phase=total] .arena-backdrop{opacity:.35}
.game-frame #combatView[data-phase=total] #roundTotal{animation:nw-land .35s steps(5,end)}
.game-frame #combatView:is([data-phase=total],[data-phase=impact],[data-phase=draw],[data-phase=result]) .versus{top:52px}
.game-frame #combatView:is([data-phase=total],[data-phase=impact]) #roundTotal{font-size:76px;text-shadow:5px 5px #a3244f,10px 10px #2a0c2e}
.game-frame #combatView:is([data-phase=total],[data-phase=impact],[data-phase=draw]) #roundParity{padding:6px 16px;background:var(--panel-dark);font-size:16px;letter-spacing:3px;color:var(--cyan);box-shadow:inset 0 0 0 2px var(--cyan)}
.game-frame #combatView[data-phase=impact] .arena-backdrop{opacity:.7;animation:nw-burst .6s steps(5,end) both}
.game-frame #combatView[data-phase=impact] .battle-scene{background:linear-gradient(180deg,#8e3fb8 0%,#c43f78 50%,#4a1a54 100%);animation:nw-shake .3s steps(3,end)}
.game-frame #combatView[data-phase=impact] .life-change{animation:nw-damage .65s steps(5,end)}
/* A weapons lock: both swung the same form, so the total is ignored. */
.game-frame #combatView[data-phase=draw] .battle-scene{background:linear-gradient(180deg,#5f7ae0 0%,#8f9fe8 48%,#2e2a64 100%)}
.game-frame #combatView[data-phase=draw] .outcome-banner,.game-frame #combatView[data-phase=draw] #roundPhase{background:#1f3a8aee;border-bottom-color:#9fc4ff;color:#eaf2ff;text-shadow:3px 3px #101c46;box-shadow:inset 0 0 0 2px #9fc4ff}
.game-frame #combatView:is([data-phase=impact],[data-phase=result]) .battle-scene{background:linear-gradient(180deg,#8e3fb8 0%,#c43f78 50%,#4a1a54 100%)}
.game-frame #combatView[data-phase=result] .arena-backdrop{opacity:.12}
.game-frame #combatView .life-lost img{animation:nw-hit .55s steps(2,end)!important}
.game-frame #combatView[data-phase=finished][data-winner="0"] #fighterCard1 img,.game-frame #combatView[data-phase=finished][data-winner="1"] #fighterCard0 img{filter:brightness(.42) saturate(.3) drop-shadow(5px 5px 0 #14082a99)}

/* ══ VICTORY ══ */
/* The match is over, so the round furniture goes: no bar, no HUD, no board.
   What is left is the result, the two fighters and what you are owed. */
.game-frame #combatView[data-phase=finished] :is(.room-bar,.read-board,.combat-messages){display:none}
.game-frame #combatView[data-phase=finished] .battle-scene{flex:1;background:linear-gradient(180deg,#2d1f6b 0%,#6a2f90 55%,#2a1148 100%)}
.game-frame #combatView[data-phase=finished] .battle-scene::before{left:50%;top:44%;bottom:auto;width:1100px;height:1100px;margin:-550px 0 0 -550px;background:repeating-conic-gradient(from 0deg,#ffd98a18 0deg 7deg,transparent 7deg 14deg);animation:nw-float 6s ease-in-out infinite}
.game-frame #combatView[data-phase=finished] .battle-scene::after{display:none}
.game-frame #combatView[data-phase=finished] .arena-backdrop{opacity:.2;animation:none}
.game-frame #combatView[data-phase=finished] .fighters{align-items:end;grid-template-columns:1fr 60px 1fr;padding:0 0 6px}
.game-frame #combatView[data-phase=finished] .fighters article{display:flex;align-items:flex-end}
.game-frame #combatView[data-phase=finished] #fighterCard0{justify-content:flex-end}
.game-frame #combatView[data-phase=finished] #fighterCard1{justify-content:flex-start}
.game-frame #combatView[data-phase=finished] .fighters img{position:relative;left:auto;right:auto;bottom:auto;height:230px;filter:drop-shadow(6px 6px 0 #14082a88)}
.game-frame #combatView[data-phase=finished][data-winner="0"] #fighterCard1 img,
.game-frame #combatView[data-phase=finished][data-winner="1"] #fighterCard0 img{height:180px;filter:brightness(.42) saturate(.3) drop-shadow(-5px 5px 0 #14082a88)}
/* The banner spans the full width, so a two-word result never breaks. */
.game-frame #combatView[data-phase=finished] .versus{left:0;right:0;top:30px;width:auto;transform:none;gap:10px;z-index:6}
.game-frame #combatView[data-phase=finished] #roundPhase{background:none;box-shadow:none;font:24px/1.5 Console,monospace;letter-spacing:6px;color:var(--ink);text-shadow:2px 2px #5a2d7a}
.game-frame #combatView[data-phase=finished] #roundTotal{margin-top:-4px;white-space:nowrap;font-size:72px;letter-spacing:4px;text-shadow:4px 4px var(--pink),9px 9px #2a0c2e;animation:nw-land .4s steps(5,end)}
.game-frame #combatView[data-phase=finished] #roundParity{margin-top:10px;padding:0;background:none;font-size:15px;letter-spacing:2px;color:var(--cyan-soft)}
.game-frame #combatView[data-phase=finished] :is(.outcome-banner,#clock){position:absolute;width:1px;height:1px;padding:0;border:0;overflow:hidden;clip-path:inset(50%)}
/* The HUD collapses to the one number that still matters, beside the buttons. */
.game-frame #combatView[data-phase=finished] .battle-hud{position:absolute;left:0;bottom:0;z-index:6;display:block;width:auto;min-height:0;padding:16px;background:none;border:0}
.game-frame #combatView[data-phase=finished] .player-hud{display:none}
.game-frame #combatView[data-phase=finished] #pot{display:block;max-width:none;padding:0;text-align:left;font:22px/1.3 Console,monospace;color:var(--ink);text-shadow:2px 2px var(--pink-shade)}
.game-frame #combatView[data-phase=finished] .command-deck{display:flex;justify-content:flex-end;align-items:center;gap:10px;min-height:82px;padding:14px 16px;background:var(--panel-dark);border-top:4px solid var(--ink)}
.game-frame #combatView[data-phase=finished] .actions{justify-content:flex-end;gap:10px}
.game-frame #combatView[data-phase=finished] .actions button{min-width:0;height:50px;padding:0 20px;background:#2a2148;color:var(--lav);box-shadow:inset 0 0 0 2px var(--edge);font-size:13px;animation:none}
/* The claim is the last action, and it reads like one. */
.game-frame #combatView[data-phase=finished] .actions button:first-child{order:2;padding:0 26px;background:var(--cream);color:var(--ink-deep);box-shadow:0 5px var(--ink-shade);font-size:16px}
.game-frame #combatView[data-phase=finished] .round-recap,.game-frame .result-brand{display:none}

/* ══ TRANSITION CURTAIN ══ */
/* Shutters close, the mark stamps, the scene has already changed behind it. */
.brand-transition{position:absolute;inset:0;z-index:45;display:grid;place-items:center;overflow:hidden;background:none;isolation:isolate;pointer-events:auto}
.brand-transition::before,.brand-transition::after{display:none}
.brand-transition .shutters{position:absolute;inset:0;display:flex}
.brand-transition .shutters i{flex:1;min-width:0;display:block;background:#2a1a58;box-shadow:inset 0 0 0 1px #00000055,inset 0 4px #6a4bb8;transform-origin:top;animation:nw-shut-in .22s steps(6,end) both}
.brand-transition .shutters i:nth-child(even){background:#3a2470;box-shadow:inset 0 0 0 1px #00000055,inset 0 -4px #6a4bb8;transform-origin:bottom}
.brand-transition .shutters i:nth-child(1){animation-delay:0ms}.brand-transition .shutters i:nth-child(2){animation-delay:14ms}
.brand-transition .shutters i:nth-child(3){animation-delay:28ms}.brand-transition .shutters i:nth-child(4){animation-delay:42ms}
.brand-transition .shutters i:nth-child(5){animation-delay:56ms}.brand-transition .shutters i:nth-child(6){animation-delay:70ms}
.brand-transition .shutters i:nth-child(7){animation-delay:84ms}.brand-transition .shutters i:nth-child(8){animation-delay:98ms}
.brand-transition .shutters i:nth-child(9){animation-delay:112ms}.brand-transition .shutters i:nth-child(10){animation-delay:126ms}
.brand-transition[data-phase=exit] .shutters i{animation-name:nw-shut-out;animation-duration:.16s}
.brand-transition[data-phase=exit] .shutters i:nth-child(1){animation-delay:126ms}.brand-transition[data-phase=exit] .shutters i:nth-child(2){animation-delay:112ms}
.brand-transition[data-phase=exit] .shutters i:nth-child(3){animation-delay:98ms}.brand-transition[data-phase=exit] .shutters i:nth-child(4){animation-delay:84ms}
.brand-transition[data-phase=exit] .shutters i:nth-child(5){animation-delay:70ms}.brand-transition[data-phase=exit] .shutters i:nth-child(6){animation-delay:56ms}
.brand-transition[data-phase=exit] .shutters i:nth-child(7){animation-delay:42ms}.brand-transition[data-phase=exit] .shutters i:nth-child(8){animation-delay:28ms}
.brand-transition[data-phase=exit] .shutters i:nth-child(9){animation-delay:14ms}.brand-transition[data-phase=exit] .shutters i:nth-child(10){animation-delay:0ms}
.transition-brand{position:relative;text-align:center;filter:drop-shadow(7px 7px 0 #170c33);animation:nw-stamp-in .2s steps(5,end) 150ms both}
.game-frame .transition-brand{--brand-size:62px}
.game-frame .transition-brand>span{font-size:30px;line-height:1.6;letter-spacing:5px;text-shadow:3px 3px #5a2d7a}
.game-frame .transition-brand>strong{letter-spacing:5px;text-shadow:4px 4px var(--pink-shade),8px 8px #1a0f38}
.transition-brand::after{content:'';display:block;width:220px;height:5px;margin:14px auto 0;background:var(--cyan,#5ee6e0);box-shadow:0 8px #ffe9a3}
.brand-transition[data-phase=exit] .transition-brand{animation:nw-stamp-out .14s steps(4,end) both}

/* ══ SETTINGS ══ */
.game-frame .game-settings{position:absolute;inset:0;z-index:50;padding:22px 26px;overflow:auto;overscroll-behavior:contain;background:#161129;border:0;box-shadow:inset 0 0 0 4px var(--rule);font:12px/1.7 Console,monospace;color:var(--ink)}
.game-frame .settings-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px;padding-bottom:10px;border-bottom:2px solid var(--rule)}
.game-frame .settings-heading h2{margin:0;font:15px/1.6 Console,monospace;font-weight:400;color:var(--ink);text-shadow:2px 2px #5a2d7a}
.game-frame .game-settings button{min-height:44px;padding:8px 12px;border:0;border-radius:0;background:#1a1530;box-shadow:inset 0 0 0 2px var(--edge);font:11px/1.6 Console,monospace;color:var(--ink)}
.game-frame .settings-levels{display:grid;grid-template-columns:1fr;gap:0;margin-bottom:14px}
.game-frame .settings-levels label{display:flex;justify-content:space-between;font:11px/1.8 Console,monospace;color:var(--lav)}
.game-frame .settings-levels output{color:var(--cyan)}
.game-frame .settings-levels input{display:block;width:100%;height:44px;padding:0;margin:0;background:transparent;accent-color:#ffe9a3;cursor:pointer}
.game-frame .game-settings details{margin-top:14px;padding-top:12px;border-top:2px solid var(--edge-dim)}
.game-frame .game-settings summary{min-height:36px;padding:8px 0;font:12px/1.8 Console,monospace;color:var(--ink);cursor:pointer}
.game-frame #settingsRules p,.game-frame .game-settings details p{margin:12px 0;font:12px/1.7 ui-monospace,monospace;color:var(--lav)}
.game-frame #settingsDeadline{margin:12px 0 0;font:12px/1.6 ui-monospace,monospace;color:#ffb3cf}

/* ══ Motion ══ */
@keyframes nw-blink{0%,55%{opacity:1}56%,100%{opacity:0}}
@keyframes nw-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes nw-lines{from{transform:scale(1.02)}to{transform:scale(1.14)}}
@keyframes nw-pulse{0%,100%{opacity:.62}50%{opacity:1}}
@keyframes nw-spar-l{0%,100%{transform:translateX(0) rotate(-4deg)}45%{transform:translateX(34px) rotate(3deg)}}
@keyframes nw-spar-r{0%,100%{transform:translateX(0) rotate(4deg)}45%{transform:translateX(-34px) rotate(-3deg)}}
@keyframes nw-clash{0%,100%{opacity:0;transform:translateX(-50%) scale(.6)}44%,54%{opacity:1;transform:translateX(-50%) scale(1.15)}}
@keyframes nw-shut-in{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes nw-shut-out{from{transform:scaleY(1)}to{transform:scaleY(0)}}
@keyframes nw-stamp-in{0%{opacity:0;transform:rotate(-5deg) scale(1.7)}55%{opacity:1;transform:rotate(-5deg) scale(.93)}100%{opacity:1;transform:rotate(-5deg) scale(1)}}
@keyframes nw-stamp-out{from{opacity:1;transform:rotate(-5deg) scale(1)}to{opacity:0;transform:rotate(-5deg) scale(1.2)}}
@keyframes nw-strike{from{opacity:0;translate:25% 0;scale:1.4}to{opacity:1;translate:0 0;scale:1}}
@keyframes nw-land{from{transform:translateY(-20px) scale(1.3);opacity:0}to{transform:none;opacity:1}}
@keyframes nw-beat{from{transform:scale(1.12)}to{transform:none}}
@keyframes nw-gather{from{transform:scale(1.15)}to{transform:scale(1)}}
@keyframes nw-burst{from{transform:scale(.85);opacity:.7}to{transform:scale(1.25);opacity:.12}}
@keyframes nw-form-flash{0%,45%{filter:brightness(0) invert(1)}25%,70%,100%{filter:none}}
@keyframes nw-damage{from{transform:translateY(15px)}to{transform:translateY(-10px)}}
@keyframes nw-hit{0%,40%,80%{opacity:.25;transform:translateX(-5px)}20%,60%,100%{opacity:1;transform:translateX(3px)}}
@keyframes nw-shake{0%,100%{transform:none}25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
@keyframes nw-vs-left{from{transform:translateX(-180%)}to{transform:none}}
@keyframes nw-vs-right{from{transform:translateX(180%)}to{transform:none}}
@keyframes nw-stamp{from{transform:scale(2.5);opacity:0}to{transform:scale(1);opacity:1}}

/* ══ Narrow frames: the same screens, reflowed — never a shrunken desktop ══ */
@container(max-width:560px){
 .game-frame .title-screen{padding:40px 24px 0}
 .game-frame .console-brand{--brand-size:clamp(40px,13cqw,64px)}
 .game-frame .title-tagline{font-size:10px;gap:8px;margin-top:12px}
 .game-frame .title-tagline::before,.game-frame .title-tagline::after{width:26px}
 .game-frame .title-menu{width:min(100%,260px);margin-top:24px}
 .game-frame .title-sigil{height:210px}
 .game-frame :is(.brawl-left,.brawl-right){width:160px;height:160px}
 .game-frame :is(.brawl-far-a,.brawl-far-b){display:none}
 .game-frame .audio-choice{width:44%;min-height:130px}
 .game-frame #lobbyView .lobby-heading{min-height:46px;padding:0 88px 0 10px;gap:6px}
 .game-frame #lobbyView .lobby-heading h1{font-size:10px;white-space:nowrap}
 .game-frame #lobbyMode{padding:4px;font-size:7px;white-space:nowrap}
 .game-frame #lobbyView .lobby-layout{display:flex;flex-direction:column}
 .game-frame #lobbyView .game-tabs{flex:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:3px;padding:8px;border:0;border-bottom:3px solid #4a3a6b}
 .game-frame #lobbyView .game-tabs button{padding:4px 2px;text-align:center;font-size:10px}
 .game-frame #lobbyView .game-tabs button[aria-pressed=true]::before,.game-frame #lobbyView .game-tabs::after{display:none}
 .game-frame #lobbyView .lobby-body{flex:1;min-height:0}
 .game-frame #lobbyView .offer{grid-template-columns:44px minmax(0,1fr) auto;gap:8px;padding:10px 8px}
 .game-frame #lobbyView .match-code{width:44px;height:44px;font-size:11px}
 .game-frame #lobbyView .match-player{font-size:11px}
 .game-frame #lobbyView :is(.setup-panel,.player-panel){overflow-y:auto;overscroll-behavior:contain;padding:8px;gap:6px}
 .game-frame #lobbyView :is(#targetStatus,#presenceStatus):empty{display:none}
 .game-frame #lobbyView .setup-panel #create{min-height:44px;font-size:12px}
 .game-frame #lobbyView .fight-tabs button{font-size:8px;white-space:nowrap}
 .game-frame #lobbyView .player-heading button{font-size:9px;white-space:nowrap}
 .game-frame #lobbyView .fighter-select .roster-heading{padding:6px 88px 6px 10px;min-height:52px;gap:6px}
 .game-frame #lobbyView .fighter-select .roster-heading h2{font-size:11px}
 .game-frame #lobbyView #fighterBack{padding:8px;min-width:48px;min-height:44px;font-size:10px;box-shadow:inset 0 0 0 2px var(--edge)}
 .game-frame #lobbyView .fighter-select-commands{display:grid;grid-template-columns:1fr 1fr;padding:8px 10px;gap:6px}
 .game-frame #lobbyView #fighterConfirm{grid-column:1/-1;width:100%;margin:0;white-space:nowrap}
 .game-frame #lobbyView .fighter-select[data-mode=owned] #fighterConfirm{flex:1}
 .game-frame #lobbyView .fighter-select-stage{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)}
 .game-frame #lobbyView .fighter-grid{grid-template-columns:repeat(2,minmax(0,1fr));padding:10px;gap:6px}
 .game-frame #lobbyView .fighter-preview{padding:10px;gap:8px}
 .game-frame #lobbyView .fighter-preview strong{font-size:11px;padding:8px}
 .game-frame #lobbyView #fighterConfirm{min-width:100px;padding:10px 14px;font-size:12px}
 .matchup{display:block;padding:0}
 .vs-player{position:absolute;width:66%;height:39%;left:3%;top:2%;gap:4px}
 .vs-player:first-child{grid-template-rows:auto minmax(0,1fr)}
 .vs-player:first-child strong{grid-row:1}
 .vs-player:first-child img{grid-row:2}
 .vs-player:last-child{left:auto;top:auto;right:3%;bottom:2%}
 .vs-player strong{padding:8px 4px;font-size:10px}
 .vs-mark{top:50%;font-size:44px;text-shadow:3px 3px #a3244f,6px 6px #210d37}
 .game-frame #combatView .read-board{padding:4px 8px;gap:5px}
 .game-frame #combatView .board-label{display:none}
 .game-frame #combatView .board-cells{gap:2px}
 .game-frame #combatView .board-chip{height:12px;font-size:9px}
 .game-frame :is(.speaker-toggle,.settings-toggle){top:4px;width:36px;height:36px}
 .game-frame .speaker-toggle{right:48px}
 .game-frame .settings-toggle{right:8px}
 .game-frame #combatView .room-bar{min-height:44px;padding:0 88px 0 10px;gap:8px}
 .game-frame #combatView #backLobby{min-height:44px;font-size:9px}
 .game-frame #combatView h1{font-size:9px}
 .game-frame #combatView .battle-hud{min-height:76px;padding:8px 10px;gap:6px;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr)}
 .game-frame #combatView .player-hud{min-width:0}
 .game-frame #combatView .player-hud h2{font-size:11px}
 .game-frame #combatView [id^=lives]{height:16px}
 .game-frame #combatView .player-ready{font-size:8px}
 .game-frame #combatView .combat-messages{left:76px;right:76px}
 .game-frame #combatView #pot{font-size:9px;max-width:96px;overflow-wrap:normal}
 .game-frame #combatView .fighters{grid-template-columns:1fr 104px 1fr}
 .game-frame #combatView .versus{top:12px;width:150px;gap:4px}
 .game-frame #combatView .fighters img{height:min(calc(100% + 8px),42cqw)}
 .game-frame #combatView #roundPhase{font-size:10px;padding:4px 9px}
 .game-frame #combatView #roundTotal{font-size:24px;text-shadow:2px 2px var(--pink-shade),4px 4px #2a0c2e}
 .game-frame #combatView:is([data-phase=total],[data-phase=impact]) #roundTotal{font-size:50px}
 .game-frame #combatView .throw-badge{top:48px;width:56px;height:46px;font-size:22px}
 .game-frame #combatView .form-state{font-size:9px;padding:4px 6px;left:8px}
 .game-frame #combatView #fighterCard1 .form-state{right:8px}
 .game-frame #combatView .outcome-banner{font-size:13px;padding:6px 2px}
 .game-frame #combatView .command-deck{padding:8px 10px 12px;gap:8px;min-height:166px;grid-template-columns:minmax(0,1fr)}
 .game-frame #combatView .number-selection{grid-template-columns:minmax(0,1fr);gap:0}
 .game-frame #combatView fieldset{grid-column:1;grid-row:2;grid-template-columns:1fr 1fr;gap:10px;padding:0}
 .game-frame #combatView .role-line{padding:0;justify-content:center}
 .game-frame #combatView .role-line .role-label{position:static;translate:none;width:auto;font-size:9px}
 .game-frame #combatView .role-line strong{min-width:72px;min-height:34px;font-size:13px}
 .game-frame #combatView .throw-group-label{font-size:8px}
 .game-frame #combatView :is(.number-selection>label,legend){position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
 .game-frame #combatView .actions{grid-column:1;grid-row:3;width:100%;min-height:44px}
 .game-frame #combatView .actions button{width:100%}
 .game-frame #combatView :is(#choices>div>label,legend){font-size:9px}
 .game-frame #combatView .number-pad{gap:10px}
 .game-frame #combatView .throw-group{gap:4px}
 .game-frame #combatView .throw-group+.throw-group::before{left:-6px}
 .game-frame #combatView .number-pad button{min-height:40px;font-size:16px}
 .game-frame #combatView .form-name{font-size:11px}
 .game-frame #combatView .form-rule{font-size:8px}
 .game-frame #combatView .actions button{min-height:44px;padding:0 12px;font-size:12px}
 .game-frame #combatView .round-recap{font-size:10px}
 .game-frame #combatView[data-phase=finished] #roundPhase{font-size:15px;letter-spacing:3px}
 .game-frame #combatView[data-phase=finished] #roundTotal{font-size:28px;letter-spacing:1px}
 .game-frame #combatView[data-phase=finished] .fighters img{height:150px}
 .game-frame #combatView[data-phase=finished][data-winner="0"] #fighterCard1 img,
 .game-frame #combatView[data-phase=finished][data-winner="1"] #fighterCard0 img{height:120px}
 .game-frame #combatView[data-phase=finished] .battle-scene{order:1}
 .game-frame #combatView[data-phase=finished] .battle-hud{position:static;order:2;padding:8px 10px 0;background:var(--panel-dark)}
 .game-frame #combatView[data-phase=finished] #pot{text-align:center;font-size:12px}
 .game-frame #combatView[data-phase=finished] .command-deck{order:3;min-height:76px;padding:12px 10px;border-top:0}
 .game-frame #combatView[data-phase=finished] .actions{display:flex;flex-wrap:nowrap}
 .game-frame #combatView[data-phase=finished] .actions button{flex:1;width:auto;padding:0 8px;font-size:12px}
 .game-frame #combatView[data-phase=finished] .actions button:first-child{padding:0 10px;font-size:12px}
 .game-frame .transition-brand{--brand-size:40px}
 .game-frame .transition-brand>span{font-size:19px}
 .transition-brand::after{width:140px}
 .game-frame .game-settings{padding:14px 16px}
}
@media(max-width:640px){.game-frame{aspect-ratio:3/4}}
@media(prefers-reduced-motion:reduce){.game-frame *,.game-frame *::before,.game-frame *::after{animation:none!important;transition:none!important}}

/* Native modal keeps wallet selection above both the site and game. */
.wallet-picker{width:min(360px,calc(100vw - 32px));max-height:calc(100dvh - 48px);box-sizing:border-box;padding:22px;border:1px solid #66528c;border-radius:12px;background:#151020;color:#eee8ff;box-shadow:0 20px 80px #000a;font-family:system-ui,sans-serif}
.wallet-picker::backdrop{background:#05030bc9}
.wallet-picker h2{margin:0 0 18px;font-size:20px}
.wallet-picker-list{display:grid;gap:8px;max-height:55dvh;overflow-y:auto}
.wallet-picker button{font:600 15px/1.4 system-ui,sans-serif;cursor:pointer;color:inherit;min-height:48px;border:1px solid #493b60;border-radius:7px;background:#21182f;padding:10px 12px}
.wallet-picker-option{display:flex;align-items:center;gap:12px;width:100%;text-align:left}
.wallet-picker-option span{overflow-wrap:anywhere}
.wallet-picker-option img{flex-shrink:0;object-fit:contain}
.wallet-picker button:hover{background:#352449;border-color:#ab8cde}
.wallet-picker button:focus-visible{outline:2px solid #b8eafa;outline-offset:2px}
.wallet-picker-message{font-size:14px;line-height:1.5;color:#c4b9d5}
.wallet-picker-message:empty{display:none}
.wallet-picker-back{margin-top:16px;width:100%}

.game-frame #lobbyView .fighter-form-toggle{display:grid;grid-template-columns:1fr 1fr;gap:4px;width:100%}
.game-frame #lobbyView .fighter-form-toggle button{font-size:10px;padding:8px 4px;min-width:0;min-height:36px}
.game-frame #lobbyView .fighter-form-toggle button[aria-pressed=true]{background:var(--cream);color:var(--ink-deep)}
@container(max-width:560px){.game-frame #lobbyView .fighter-form-toggle button{font-size:8px;padding:8px 2px}}

/* Preparation is a game state, never a fake transaction-complete screen. */
.preparation-view{position:absolute;inset:0;z-index:21;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;padding:32px;background:radial-gradient(ellipse at 50% 20%,#30204d,#100d20 75%);text-align:center;color:var(--ink)}
.game-frame .preparation-brand{--brand-size:60px}
.preparation-view h2{margin:8px 0 0;font:20px/1.3 Console,monospace}
.preparation-view p{margin:0;font:11px/1.6 Console,monospace;max-width:100%}
.preparation-view progress{appearance:none;width:min(420px,100%);height:20px;border:2px solid var(--edge);background:var(--panel-dark)}
.preparation-view progress::-webkit-progress-bar{background:var(--panel-dark)}
.preparation-view progress::-webkit-progress-value{background:repeating-linear-gradient(90deg,#5ee6e0 0 12px,#286566 12px 15px)}
.preparation-view progress::-moz-progress-bar{background:#5ee6e0}
.preparation-players{display:grid;grid-template-columns:1fr 1fr;gap:20px;width:100%;font:10px/1.8 Console,monospace;color:var(--lav)}
.preparation-actions{display:flex;gap:12px;width:min(360px,100%)}
.game-frame .preparation-actions button{flex:1;min-height:46px;padding:10px;font:12px/1.4 Console,monospace;background:var(--panel);color:var(--lav);box-shadow:inset 0 0 0 2px var(--edge)}
.game-frame #preparationReady{background:var(--cream);color:var(--ink-deep)}
.game-frame #preparationReady:disabled{opacity:1;cursor:default;background:var(--panel-dark);color:var(--lav-dim);box-shadow:inset 0 0 0 2px var(--edge)}
.game-frame #preparationReady[data-confirmed=true]{color:var(--cyan);box-shadow:inset 0 0 0 2px #286566}
@container(max-width:560px){.preparation-view{padding:20px 14px;gap:16px}.game-frame .preparation-brand{--brand-size:44px}.preparation-view h2{font-size:16px}.preparation-view p{font-size:9px}.preparation-players{font-size:8px;gap:10px}}

.game-frame #preparationCancel{min-height:36px;padding:6px 12px;background:transparent;color:var(--lav-dim);font:10px/1.4 Console,monospace;text-decoration:underline}
.preparation-view[data-phase=accepted] :is(progress,.preparation-players,#preparationStatus,#preparationDeadline,.preparation-actions,#preparationCancel){visibility:hidden}
.preparation-view[data-phase=accepted] h2{color:var(--cyan);animation:nw-land .4s steps(5,end)}
@container(max-width:560px){.preparation-view[data-phase=accepted] h2{font-size:13px}}

.terms-dialog{box-sizing:border-box;width:min(540px,calc(100vw - 24px));max-height:calc(100dvh - 32px);overflow:auto;background:#10131e;color:#e7e9f3;border:1px solid #626c85;padding:24px;font:14px/1.55 system-ui,sans-serif}.terms-dialog::backdrop{background:#000c}.terms-dialog h2{font-size:22px}.terms-dialog small{color:#aeb6ca}.terms-actions{display:flex;justify-content:space-between;gap:16px;margin-top:20px}.terms-actions button{padding:12px 16px;cursor:pointer}.terms-actions button:hover{filter:brightness(1.2)}

.preparation-player{display:grid;gap:8px;padding:10px 4px;border:1px solid var(--edge);background:#100d2080;min-width:0}.preparation-player strong{font-size:12px;color:var(--lav-dim)}.preparation-player strong[data-ready=true]{color:var(--cyan)}
@container(max-width:560px){.preparation-players{font-size:9px;gap:10px}.preparation-player strong{font-size:11px}.game-frame .preparation-actions button{font-size:10px;min-height:50px}}
@container(max-width:560px){.preparation-view{padding:48px 14px 16px;gap:12px}.game-frame .preparation-brand{--brand-size:40px}}

.preparation-view #preparationFeedback{font-size:9px;color:var(--cream)}
.preparation-view progress{flex-shrink:0}
@container(max-width:560px){.preparation-view:has(#preparationFeedback:not([hidden])){gap:9px}}

/* Arena text owns the middle third in every phase. Portraits own the sides. */
.game-frame #combatView .fighters{grid-template-columns:repeat(3,minmax(0,1fr))}
.game-frame #combatView .versus{left:50%;right:auto;transform:translateX(-50%);top:18px;width:30%;gap:5px;box-sizing:border-box}
.game-frame #combatView :is(#roundPhase,#roundParity,#clock){max-width:100%;box-sizing:border-box;padding:4px 2px;font-size:clamp(7px,1.8cqw,12px);line-height:1.4;letter-spacing:0;white-space:normal;overflow-wrap:anywhere}
.game-frame #combatView #roundTotal{max-width:100%;margin:0;font-size:clamp(16px,4cqw,32px);line-height:1.25;letter-spacing:0;white-space:pre-line;overflow-wrap:normal;text-shadow:2px 2px var(--pink-shade)}
.game-frame #combatView:is([data-phase=total],[data-phase=impact],[data-phase=draw],[data-phase=result],[data-phase=last-life]) .versus{top:24px}
.game-frame #combatView:is([data-phase=total],[data-phase=impact]) #roundTotal{font-size:clamp(32px,7cqw,54px);text-shadow:2px 2px var(--pink-shade)}
.game-frame #combatView:is([data-phase=total],[data-phase=impact],[data-phase=draw]) #roundParity{padding:4px 3px;font-size:clamp(7px,1.8cqw,12px);letter-spacing:0}
.game-frame #combatView[data-phase=last-life] #roundTotal{color:var(--cyan)}
.game-frame #combatView .reveal-choices{display:none;width:100%;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.game-frame #combatView[data-phase=reveal] .reveal-choices{display:grid}
.game-frame #combatView .reveal-choices>div{display:flex;min-width:0;flex-direction:column;align-items:center;gap:8px}
.game-frame #combatView .reveal-choices .form-state{position:static;max-width:100%;box-sizing:border-box;padding:3px 0;font-size:clamp(6px,1.4cqw,10px);line-height:1.4;box-shadow:none;background:none;white-space:nowrap;text-align:center}
.game-frame #combatView .reveal-choices .throw-badge{position:static;width:75%;height:auto;aspect-ratio:1;max-width:44px;font-size:clamp(20px,4cqw,30px);box-shadow:0 0 0 2px var(--cyan)}
.game-frame #combatView .reveal-choices>div+div :is(.form-state,.throw-badge){color:var(--pink)}
.game-frame #combatView .reveal-choices>div+div .throw-badge{box-shadow:0 0 0 2px var(--pink)}
.game-frame #combatView[data-phase=reveal] #roundTotal{position:absolute;top:50%;font-size:clamp(14px,2.5cqw,20px)}
.game-frame #combatView[data-phase=finished] .fighters{grid-template-columns:repeat(3,minmax(0,1fr));padding:0}
.game-frame #combatView[data-phase=finished] .fighters article{justify-content:center!important}
.game-frame #combatView[data-phase=finished] .fighters img{max-width:100%;height:auto;max-height:80%;object-fit:contain}
.game-frame #combatView[data-phase=finished] .versus{left:50%;right:auto;top:25%;transform:translateX(-50%);width:30%;gap:8px}
.game-frame #combatView[data-phase=finished] #roundPhase{font-size:clamp(7px,1.8cqw,12px);letter-spacing:0;line-height:1.4}
.game-frame #combatView[data-phase=finished] #roundTotal{max-width:100%;font-size:clamp(13px,3.6cqw,26px);white-space:normal;letter-spacing:0;line-height:1.25;margin:0;text-shadow:2px 2px var(--pink-shade);animation:nw-result-flash .4s steps(2,end)}
.game-frame #combatView[data-phase=finished] #roundParity{font-size:clamp(9px,2cqw,14px);letter-spacing:0;margin:0}

.game-frame #combatView .match-score{display:flex;flex-direction:column;align-items:center;justify-content:center;align-self:center;gap:5px;min-width:0}
.game-frame #combatView .match-score #title{flex:none;text-align:center;font-size:clamp(8px,1.5cqw,11px);white-space:nowrap}
.game-frame #combatView[data-phase=finished] .match-score #title{display:none}

/* Chain-side IDs remain stable; only their presentation changes for player 1. */
.game-frame #combatView .fighters article{grid-row:1}
.game-frame #combatView[data-local-side="1"] #fighterCard0{grid-column:3}
.game-frame #combatView[data-local-side="1"] #fighterCard1{grid-column:1}
.game-frame #combatView[data-local-side="1"] .player-hud:first-child{grid-column:3;grid-row:1;text-align:right}
.game-frame #combatView[data-local-side="1"] .player-hud:last-child{grid-column:1;grid-row:1;text-align:left}
.game-frame #combatView .match-score{grid-column:2;grid-row:1}
.game-frame #combatView[data-local-side="1"] .player-hud:first-child h2{color:#ff8fb6}
.game-frame #combatView[data-local-side="1"] .player-hud:last-child h2{color:var(--cyan)}
.game-frame #combatView[data-local-side="1"] .player-hud:first-child [id^=lives]{--health:#ff5c8a}
.game-frame #combatView[data-local-side="1"] .player-hud:last-child [id^=lives]{--health:#2fd8b0}
.game-frame #combatView[data-local-side="1"] .player-hud:first-child .player-ready{color:#ffb3cf}
.game-frame #combatView[data-local-side="1"] .player-hud:last-child .player-ready{color:var(--cyan-soft)}
.game-frame #combatView[data-local-side="1"] .reveal-choices>div:first-child{order:2}
.game-frame #combatView[data-local-side="1"] .reveal-choices>div:first-child :is(.form-state,.throw-badge){color:var(--pink)}
.game-frame #combatView[data-local-side="1"] .reveal-choices>div:last-child :is(.form-state,.throw-badge){color:var(--cyan)}
.game-frame #combatView[data-local-side="1"] .reveal-choices>div:first-child .throw-badge{box-shadow:0 0 0 2px var(--pink)}
.game-frame #combatView[data-local-side="1"] .reveal-choices>div:last-child .throw-badge{box-shadow:0 0 0 2px var(--cyan)}
.game-frame #combatView:not([data-local-side="1"]) #art1,.game-frame #combatView[data-local-side="1"] #art0,.vs-player:last-child img{scale:-1 1}
.game-frame #combatView[data-local-side="1"]:not([data-phase=finished]) #art0{left:auto;right:-16px}
.game-frame #combatView[data-local-side="1"]:not([data-phase=finished]) #art1{left:-14px;right:auto}

@keyframes nw-result-flash{from{opacity:.45}to{opacity:1}}

/* Two sealed throws become one projectile. Only that projectile leaves the center lane. */
.game-frame #combatView[data-phase=collide] .reveal-choices{display:grid}
.game-frame #combatView[data-phase=collide] .form-state{opacity:0}
.game-frame #combatView[data-phase=collide] .reveal-choices>div{animation:nw-merge-left .44s cubic-bezier(.65,0,1,1) both}
.game-frame #combatView[data-phase=collide] .reveal-choices>div+div{animation-name:nw-merge-right}
.game-frame #combatView[data-local-side="1"][data-phase=collide] .reveal-choices>div:first-child{animation-name:nw-merge-right}
.game-frame #combatView[data-local-side="1"][data-phase=collide] .reveal-choices>div:last-child{animation-name:nw-merge-left}
.game-frame #combatView:is([data-phase=reveal],[data-phase=collide]) #roundTotal:empty{display:none}
.game-frame #combatView{--total-color:var(--cream);--hit-x:31cqw;--hit-y:32px}
.game-frame #combatView[data-total-form=human]{--total-color:#57afff}
.game-frame #combatView[data-total-form=monster]{--total-color:#d785ff}
.game-frame #combatView[data-hit-side=left]{--hit-x:-31cqw}
.game-frame #combatView:is([data-phase=total],[data-phase=launch],[data-phase=impact]) .versus{top:32px}
.game-frame #combatView:is([data-phase=total],[data-phase=launch],[data-phase=impact]) #roundTotal{display:grid;place-items:center;box-sizing:border-box;width:clamp(48px,9cqw,68px);height:auto;aspect-ratio:1;max-width:100%;font-size:clamp(20px,4cqw,30px);line-height:1;color:var(--total-color);background:#130c25;box-shadow:0 0 0 3px var(--total-color),0 0 18px color-mix(in srgb,var(--total-color) 45%,transparent);text-shadow:none;white-space:nowrap;animation:none;position:relative;z-index:9}
.game-frame #combatView[data-phase=total] #roundTotal{animation:nw-total-charge .5s ease-out both}
.game-frame #combatView[data-phase=total] #roundTotal::after{content:'';position:absolute;inset:-10px;border:3px solid var(--total-color);pointer-events:none;animation:nw-collision-ring .4s ease-out both}
.game-frame #combatView[data-phase=launch] #roundTotal{animation:nw-total-launch .28s cubic-bezier(.6,0,1,1) both}
.game-frame #combatView[data-phase=impact] #roundTotal{translate:var(--hit-x) var(--hit-y);animation:nw-total-hit .7s ease-out both}
.game-frame #combatView .fighters article.life-lost img{animation:nw-red-hit .7s linear!important}
@keyframes nw-merge-left{0%{translate:0 0}45%{translate:-8px 0;scale:.92}100%{translate:calc(50% + 8px) 0;scale:1.15 .8}}
@keyframes nw-merge-right{0%{translate:0 0}45%{translate:8px 0;scale:.92}100%{translate:calc(-50% - 8px) 0;scale:1.15 .8}}
@keyframes nw-total-charge{0%{scale:.6;filter:brightness(2)}35%{scale:1.08;filter:brightness(1.4)}100%{scale:1;filter:brightness(1)}}
@keyframes nw-collision-ring{from{scale:.5;opacity:1}to{scale:1.5;opacity:0}}
@keyframes nw-total-launch{0%{translate:0 0;scale:1}25%{translate:0 0;scale:.9}100%{translate:var(--hit-x) var(--hit-y);scale:1}}
@keyframes nw-total-hit{from{scale:1;opacity:1;filter:brightness(2)}to{scale:1.25;opacity:0;filter:brightness(1)}}
@keyframes nw-red-hit{0%,15%{filter:brightness(0) saturate(100%) invert(27%) sepia(100%) saturate(5000%) hue-rotate(340deg);translate:0 0}25%,45%{filter:sepia(1) saturate(6) hue-rotate(310deg) drop-shadow(0 0 10px #ff274f);translate:var(--recoil-x) -4px}65%{filter:drop-shadow(0 0 6px #ff274f);translate:calc(var(--recoil-x)*.35) 0}100%{filter:drop-shadow(0 0 0 transparent);translate:0 0}}

@media(prefers-reduced-motion:reduce){
 .game-frame #combatView[data-phase=collide] .reveal-choices>div{animation:none;opacity:.5}
 .game-frame #combatView:is([data-phase=total],[data-phase=launch],[data-phase=impact]) #roundTotal{animation:none;translate:0 0}
 .game-frame #combatView[data-phase=total] #roundTotal::after{display:none}
 .game-frame #combatView .fighters article.life-lost img{animation:none!important;filter:sepia(1) saturate(3)}
}

/* Transformations conceal the swap with smoke; only actual strikes move a fighter. */
.game-frame #combatView:is([data-phase=transform],[data-phase=reveal]) .fighters img{animation:none}
.game-frame #combatView[data-phase=reveal] .arena-backdrop{opacity:.2;animation:none}
.game-frame #combatView .fighters article.form-change::after{content:'';position:absolute;z-index:7;pointer-events:none;left:0;bottom:0;width:100%;height:100%;background-image:url('assets/fx/form-smoke.svg');background-repeat:no-repeat;background-size:800% 100%;image-rendering:pixelated;animation:nw-form-smoke .825s steps(1,end) both}
@keyframes nw-form-smoke{0%{background-position:0% 0}12%{background-position:14.2857% 0}24%{background-position:28.5714% 0}38%{background-position:42.8571% 0}55%{background-position:57.1429% 0}70%{background-position:71.4286% 0}85%{background-position:85.7143% 0}100%{background-position:100% 0}}
.game-frame #combatView[data-phase=total] .battle-scene{animation:nw-collision-jolt .2s steps(2,end)}
.game-frame #combatView[data-phase=total] #roundTotal::after{inset:-16px;border:0;background:var(--total-color);clip-path:polygon(50% 0,58% 30%,85% 10%,70% 40%,100% 50%,70% 58%,85% 90%,58% 70%,50% 100%,42% 70%,15% 90%,30% 58%,0 50%,30% 40%,15% 10%,42% 30%);z-index:-1;animation:nw-collision-ring .35s ease-out both}
.game-frame #combatView[data-phase=impact] .battle-scene{animation:nw-heavy-impact .45s steps(2,end)}
.game-frame #combatView #fighterCard0{--recoil-x:-12px}
.game-frame #combatView #fighterCard1{--recoil-x:12px}
.game-frame #combatView[data-local-side="1"] #fighterCard0{--recoil-x:12px}
.game-frame #combatView[data-local-side="1"] #fighterCard1{--recoil-x:-12px}
.game-frame #combatView .fighters article.life-lost::after{content:'';position:absolute;z-index:8;pointer-events:none;left:50%;top:68%;width:70px;height:70px;margin:-35px 0 0 -35px;background:#ffdfaa;clip-path:polygon(50% 0,60% 32%,90% 15%,70% 43%,100% 50%,68% 60%,85% 90%,58% 70%,50% 100%,40% 68%,10% 85%,30% 57%,0 50%,32% 40%,15% 10%,42% 30%);animation:nw-hit-spark .45s ease-out both}
@keyframes nw-collision-jolt{0%,100%{translate:0 0}30%{translate:0 -3px}60%{translate:0 2px}}
@keyframes nw-heavy-impact{0%,100%{translate:0 0}20%{translate:-6px 2px}40%{translate:5px -2px}60%{translate:-3px 1px}80%{translate:2px 0}}
@keyframes nw-hit-spark{0%,20%{opacity:1;scale:.5}50%{opacity:.9;scale:1.15}100%{opacity:0;scale:1.5}}
@media(prefers-reduced-motion:reduce){
 .game-frame #combatView .fighters article.form-change::after{animation:none;opacity:.65;background-position:28.5714% 0}
 .game-frame #combatView[data-phase=reveal] .fighters article.form-change::after{opacity:0}
 .game-frame #combatView:is([data-phase=total],[data-phase=impact]) .battle-scene{animation:none}
 .game-frame #combatView .fighters article.life-lost::after{display:none}
}

.game-frame[data-screen=smoke] #combatView .fighters article.form-change::after{animation:none;background-position:28.5714% 0}

/* Final hit: frozen recoil, independent arc/tumble, dust, then a delayed twinkle. */
.game-frame #combatView .fighters article.ko-contact{animation:none!important}
.game-frame #combatView .fighters article.ko-contact img{animation:none!important;translate:var(--recoil-x) -4px;transform:rotate(5deg);filter:brightness(0) invert(1)}
.game-frame #combatView .fighters article.ko-contact::after{animation:none;scale:.8;opacity:1}
.game-frame #combatView .fighters article.knocked-out{animation:none}
.game-frame #combatView .fighters article.knocked-out img{transform-origin:center;animation:nw-ko-arc 1.056s linear both,nw-ko-tumble 1.056s steps(9,end) both!important}
.game-frame #combatView .fighters article.knocked-out::before{content:'';display:block;position:absolute;left:38%;bottom:8px;width:20px;height:12px;background:#e6d8ff;box-shadow:18px 4px #c9bbe8,-14px 6px #a899c0;pointer-events:none;animation:nw-ko-dust .77s steps(4,end) both}
.game-frame #combatView .fighters article.knocked-out::after{content:'';position:absolute;left:var(--ko-star-x,50%);top:var(--ko-star-y,16%);width:18px;height:18px;margin:-9px 0 0 -9px;pointer-events:none;background:#fff4c8;clip-path:polygon(40% 0,60% 0,60% 30%,70% 40%,100% 40%,100% 60%,70% 60%,60% 70%,60% 100%,40% 100%,40% 70%,30% 60%,0 60%,0 40%,30% 40%,40% 30%);animation:nw-ko-twinkle 1.7s steps(3,end) both}
.game-frame #combatView[data-phase=knockout] #roundTotal{font-size:clamp(24px,6cqw,42px);color:var(--cream);white-space:nowrap;animation:nw-ko-caption .32s steps(4,end) both;animation-delay:.19s}
/* The arc stays continuous; only the rotation and shrinking have stepped timing.
   Reference launch is 28–72% of 2.4s; twinkle starts at 74%, after disappearance. */
@keyframes nw-ko-arc{
 0%{translate:var(--recoil-x) -4px}
 18.18%{translate:calc(var(--recoil-x)*.8182 + var(--ko-x,0px)*.1818) calc(var(--ko-y,-80px)*.43)}
 45.45%{translate:calc(var(--recoil-x)*.5455 + var(--ko-x,0px)*.4545) calc(var(--ko-y,-80px)*.74)}
 81.82%{translate:calc(var(--recoil-x)*.1818 + var(--ko-x,0px)*.8182) calc(var(--ko-y,-80px)*.95)}
 100%{translate:var(--ko-x,0px) var(--ko-y,-80px)}
}
@keyframes nw-ko-tumble{
 0%{transform:rotate(5deg) scale(1);filter:brightness(0) invert(1);opacity:1}
 7%{filter:none}
 18.18%{transform:rotate(110deg) scale(.7)}
 36.36%{transform:rotate(240deg) scale(.44)}
 59.09%{transform:rotate(400deg) scale(.26)}
 81.82%{transform:rotate(560deg) scale(.12);opacity:1}
 95.45%{transform:rotate(660deg) scale(.06);opacity:1}
 100%{transform:rotate(700deg) scale(.04);opacity:0}
}
@keyframes nw-ko-dust{0%{opacity:0;translate:0 0;scale:.4}6%{opacity:1;scale:.7}37%{opacity:1;translate:calc(var(--recoil-x)*-.7) -6px;scale:1.15}100%{opacity:0;translate:calc(var(--recoil-x)*-1.2) -10px;scale:1.4}}
@keyframes nw-ko-twinkle{0%,65%{opacity:0;scale:.2;rotate:45deg}69%{opacity:1;scale:1;rotate:45deg}76%{opacity:1;scale:.7;rotate:45deg}82%,100%{opacity:0;scale:.2;rotate:45deg}}
@keyframes nw-ko-caption{from{opacity:0;translate:0 6px}to{opacity:1;translate:0 0}}
@media(prefers-reduced-motion:reduce){
 .game-frame #combatView .fighters article.ko-contact img{translate:0 0;transform:none;filter:sepia(1) saturate(3)}
 .game-frame #combatView .fighters article.knocked-out img{animation:none!important;opacity:.15}
 .game-frame #combatView .fighters article.knocked-out::before,.game-frame #combatView .fighters article.knocked-out::after{display:none}
}

.result-bump{position:absolute;inset:0;z-index:40;overflow:hidden;display:grid;grid-template-rows:auto minmax(0,1fr) 44px;justify-items:center;gap:18px;padding:15% 8% 8%;background:repeating-conic-gradient(from 0deg at 50% 48%,#413478 0deg 8deg,#251d48 8deg 16deg);color:#fff0b0;text-align:center;isolation:isolate}
.result-bump[data-outcome=loss]{background:repeating-conic-gradient(from 0deg at 50% 48%,#38283e 0deg 8deg,#1c142b 8deg 16deg);color:#ec96ab}
.result-bump h2{margin:0;font:clamp(28px,8cqw,58px)/1.2 Console,monospace;white-space:nowrap;text-shadow:3px 3px #121025;animation:nw-land .4s steps(5,end)}
.result-bump img{width:100%;height:100%;min-height:0;object-fit:contain;image-rendering:pixelated;filter:drop-shadow(5px 5px #100b25);align-self:end}
.result-bump[data-outcome=loss] img{filter:saturate(.35) brightness(.7) drop-shadow(5px 5px #100b25)}
.result-bump button{min-width:100px;font:16px Console,monospace}
.result-bump button[hidden]{display:none}
.match-stats{font:11px/1.6 Console,monospace;text-align:center;margin:8px 0;color:var(--ink)}

.result-bump .bump-mute{position:absolute;top:12px;right:12px;min-width:32px;width:32px;height:32px}
/* Results keep the score above a compact stat table, with busts at the bottom. */
.game-frame #combatView[data-phase=finished] .versus{top:8%;width:70%;gap:4px}
.game-frame #combatView[data-phase=finished] .fighters img{max-height:24%}
.game-frame #combatView[data-phase=finished] .match-stats{position:absolute;z-index:7;top:26%;left:12%;right:12%;margin:0;color:var(--ink);text-align:left}
.match-stats-label{margin:0 0 8px;text-align:center;font:clamp(8px,2cqw,12px)/1.4 Console,monospace;color:var(--lav)}
.match-stats dl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px 12px;margin:0;padding:10px 12px;background:#130e26e8;border-top:2px solid var(--edge);border-bottom:2px solid var(--edge)}
.match-stats dl>div{min-width:0;display:flex;flex-direction:column;gap:3px;padding:4px 0}
.match-stats dt{font:clamp(8px,1.9cqw,11px)/1.25 Console,monospace;color:var(--lav)}
.match-stats dd{margin:0;font:clamp(11px,2.6cqw,16px)/1.25 Console,monospace;color:var(--cream);overflow-wrap:anywhere}
/* Reference win/loss choreography, played once and held for the player's OK. */
.result-bump{grid-template-columns:minmax(0,1fr);--bump-light:#ffe9a3}
.result-bump[data-outcome=loss]{--bump-light:#9fe9e6}
.result-bump h2{grid-area:1/1;z-index:5;animation:nw-bump-stamp 2.4s steps(5,end) both;transform-origin:center}
.result-bump>.bump-portrait{grid-area:2/1;z-index:2;transform-origin:bottom center}
.result-bump>button:not(.bump-mute){grid-area:3/1;z-index:6}
.result-bump[data-outcome=win]>.bump-portrait{animation:nw-bump-win 2.4s steps(6,end) both}
.result-bump[data-outcome=loss]>.bump-portrait{animation:nw-bump-drain 2.4s steps(6,end) both}
.result-bump::before{content:'';position:absolute;z-index:0;left:50%;top:58%;width:180%;aspect-ratio:1;pointer-events:none;background:repeating-conic-gradient(#ffd98a33 0deg 7deg,transparent 7deg 14deg);animation:nw-bump-rays 2.4s steps(6,end) both}
.result-bump[data-outcome=loss]::before{display:none}
.result-bump::after{content:'';position:absolute;inset:0;z-index:4;pointer-events:none;background:var(--bump-light);animation:nw-bump-flash 2.4s steps(1,end) both}
.bump-effects{position:relative;grid-area:2/1;align-self:stretch;width:100%;height:100%;min-height:0;z-index:3;pointer-events:none;overflow:hidden}
.result-bump[data-outcome=loss] .bump-soul{position:absolute;inset:0;object-fit:contain;filter:grayscale(1) brightness(1.35) sepia(1) hue-rotate(135deg) saturate(3.4);animation:nw-bump-soul 2.4s steps(8,end) both}
.bump-spark,.bump-ring{position:absolute;left:50%;top:56%;width:26px;height:26px;display:block;background:#fff;box-shadow:0 0 0 5px var(--bump-light);animation:nw-bump-spark 2.4s steps(3,end) both}
.bump-ring{width:64px;height:64px;background:none;box-shadow:inset 0 0 0 5px var(--bump-light);animation:nw-bump-ring 2.4s steps(4,end) both}
.bump-aura{position:absolute;left:calc(30% + var(--i)*20%);bottom:4%;width:10px;height:38px;background:var(--bump-light);animation:nw-bump-aura 2.4s steps(4,end) both;animation-delay:calc(var(--i)*40ms)}
.bump-aura:nth-of-type(4){background:#fff;height:46px}
.bump-confetti{position:absolute;left:calc(12% + var(--i)*24%);top:0;width:8px;height:8px;background:#ff5c8a;animation:nw-bump-confetti 2.4s steps(8,end) both;animation-delay:calc(var(--i)*55ms)}
.bump-confetti:nth-of-type(even){background:#5ee6e0}.bump-confetti:last-child{background:#ffe9a3}
@keyframes nw-bump-win{0%,12%{transform:translateY(0) scale(1);filter:none}16%{transform:translateY(6px) scale(1.04,.94);filter:grayscale(.6) brightness(.8)}20%{transform:translateY(8px) scale(1.05,.92);filter:grayscale(.6) brightness(.75)}21%,28%{transform:translateY(-14px) scale(.97,1.06);filter:brightness(1.5) saturate(1.5)}34%{transform:translateY(-22px);filter:brightness(1.3) saturate(1.4)}56%{transform:translateY(-16px);filter:brightness(1.25) saturate(1.35)}84%,100%{transform:translateY(-18px);filter:brightness(1.25) saturate(1.35)}}
@keyframes nw-bump-drain{0%,20%{filter:none;transform:translate(0,0)}21%,28%{filter:grayscale(1) brightness(.85);transform:translate(-6px,0)}36%{filter:grayscale(1) brightness(.34);transform:rotate(-5deg)}84%,100%{filter:grayscale(1) brightness(.3);transform:translate(0,4px) rotate(-7deg)}}
@keyframes nw-bump-soul{0%,20%{opacity:0;transform:translateY(0) scale(1)}21%,28%{opacity:.95;transform:translateY(0) scale(1)}34%{opacity:.95;transform:translateY(-20px) scale(.97)}50%{opacity:.9;transform:translateY(-62px) scale(.92)}70%{opacity:.7;transform:translateY(-108px) scale(.86)}84%,100%{opacity:0;transform:translateY(-138px) scale(.82)}}
@keyframes nw-bump-rays{0%,20%{opacity:0;transform:translate(-50%,-50%) scale(.5)}21%,28%{opacity:.75;transform:translate(-50%,-50%) scale(1)}84%,100%{opacity:.5;transform:translate(-50%,-50%) scale(1.25) rotate(26deg)}}
@keyframes nw-bump-aura{0%,14%{opacity:0;transform:translateY(0) scaleY(.3)}18%{opacity:1;transform:translateY(-26px) scaleY(1)}21%{opacity:1;transform:translateY(-54px) scaleY(1)}24%,100%{opacity:0;transform:translateY(-78px) scaleY(.4)}}
@keyframes nw-bump-stamp{0%,32%{opacity:0;transform:scale(2.4)}36%{opacity:1;transform:scale(1.25)}40%{opacity:1;transform:scale(.92)}44%,100%{opacity:1;transform:scale(1)}}
@keyframes nw-bump-confetti{0%,34%{opacity:0;transform:translateY(-10px)}38%{opacity:1;transform:translateY(0) rotate(45deg)}80%{opacity:1;transform:translateY(150px) rotate(320deg)}88%,100%{opacity:0;transform:translateY(190px) rotate(380deg)}}
@keyframes nw-bump-spark{0%,20%{opacity:0;transform:translate(-50%,-50%) scale(.35) rotate(45deg)}21%,28%{opacity:1;transform:translate(-50%,-50%) scale(1) rotate(45deg)}31%{opacity:1;transform:translate(-50%,-50%) scale(1.5) rotate(45deg)}34%,100%{opacity:0;transform:translate(-50%,-50%) scale(1.9) rotate(45deg)}}
@keyframes nw-bump-ring{0%,28%{opacity:0;transform:translate(-50%,-50%) scale(.35) rotate(45deg)}29%{opacity:1;transform:translate(-50%,-50%) scale(.7) rotate(45deg)}33%{opacity:1;transform:translate(-50%,-50%) scale(1.25) rotate(45deg)}37%{opacity:1;transform:translate(-50%,-50%) scale(1.8) rotate(45deg)}40%,100%{opacity:0;transform:translate(-50%,-50%) scale(2.2) rotate(45deg)}}
@keyframes nw-bump-flash{0%,20%{opacity:0}21%{opacity:.22}24%,100%{opacity:0}}
@media(prefers-reduced-motion:reduce){
 .result-bump h2,.result-bump>.bump-portrait{animation:none!important;transform:none}
 .result-bump .bump-effects,.result-bump::before,.result-bump::after{display:none}
}
/* Compact lobby: primary roster tabs stay visible; secondary sections expand. */
.game-frame #lobbyView .lobby-heading{min-height:48px;padding:0 100px 0 10px;gap:8px;border-bottom-width:2px;overflow:visible;z-index:25}
.game-frame #lobbyView #lobbyMode{display:none}
.game-frame #lobbyView .lobby-nav-menu{position:relative;min-width:140px;border:0;padding:0;margin:0;overflow:visible}
.game-frame #lobbyView summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:10px;color:var(--cream);font:12px/1 Console,monospace}
.game-frame #lobbyView summary::-webkit-details-marker{display:none}
.game-frame #lobbyView summary svg{flex:none;transition:transform .15s}
.game-frame #lobbyView details[open]>summary svg{transform:rotate(180deg)}
.game-frame #lobbyView summary:is(:hover,:focus-visible){color:#fff;outline:2px solid var(--cream);outline-offset:-2px}
.game-frame #lobbyView .lobby-nav-menu>summary{min-height:44px;padding:10px}
.game-frame #lobbyView .lobby-nav-menu>.game-tabs{position:absolute;z-index:30;top:100%;left:0;display:flex;flex-direction:column;width:205px;gap:4px;padding:8px;background:#161129;border:2px solid var(--edge);box-shadow:6px 6px #080611cc}
.game-frame #lobbyView .lobby-nav-menu:not([open])>.game-tabs{display:none}
.game-frame #lobbyView .game-tabs::after{display:none}
.game-frame #lobbyView .lobby-layout{display:flex;flex-direction:column;flex:1;min-height:0}
.game-frame #lobbyView .lobby-body{flex:1;min-height:0}
.game-frame #lobbyView #panel-matches>.roster-heading{display:none}
.game-frame #lobbyView .fight-tabs{grid-template-columns:minmax(0,1fr) minmax(0,1.7fr) minmax(0,1fr);padding:3px 5px;gap:3px}
.game-frame #lobbyView .fight-tabs button{min-width:0;min-height:40px;font-size:9px;white-space:nowrap}
.game-frame #lobbyView .fight-tabs button[data-fights=direct]{font-size:9px}
.game-frame #lobbyView .offer{min-height:66px;grid-template-columns:40px minmax(0,1fr) auto;gap:8px;padding:7px 9px}
.game-frame #lobbyView .match-code{width:38px;height:38px;font-size:10px}
.game-frame #lobbyView .match-player{font-size:11px;line-height:1.4}
.game-frame #lobbyView .match-detail{font-size:11px;line-height:1.4}
.game-frame #lobbyView .match-stake{font-size:8px;max-width:90px}
.game-frame #lobbyView .match-stake b{font-size:12px}
.game-frame #lobbyView .match-lookup{position:relative;flex:none;padding:0;margin:0;border:0;background:var(--bar);overflow:visible}
.game-frame #lobbyView .match-lookup>summary{min-height:36px;padding:8px 12px;font-size:10px;border-top:1px solid var(--edge-dim)}
.game-frame #lobbyView .match-lookup #findMatch{position:absolute;z-index:20;bottom:100%;left:0;right:0;border:2px solid var(--edge);padding:10px;background:#161129}
.game-frame #lobbyView .match-lookup:not([open]) #findMatch{display:none}
.game-frame #lobbyView .lobby-command{min-height:52px;padding:4px 10px;gap:8px;border-top-width:2px}
.game-frame #lobbyView .lobby-command button{min-height:40px;padding:9px 12px;font-size:11px}
.game-frame #lobbyView .offer{grid-template-columns:48px minmax(0,1fr) auto}
.game-frame #lobbyView .match-code{display:block;width:46px;height:38px;font-size:8px;line-height:38px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Lobby filters overlay the roster; they never shrink its scrolling viewport. */
.game-frame #lobbyView .fight-tabs[hidden]{display:none}
.game-frame #lobbyView #panel-matches>.roster-heading{display:flex;min-height:32px;padding:7px 12px}
.game-frame #lobbyView #panel-matches>.roster-heading h2{font-size:10px}
.game-frame #lobbyView .lobby-command{position:relative}
.game-frame #lobbyView .lobby-filter-menu{position:static;border:0;margin:0;padding:0;background:none}
.game-frame #lobbyView .lobby-filter-menu>summary{min-height:40px;padding:9px 10px;font-size:11px;justify-content:flex-start;background:#30213f;border:1px solid var(--edge)}
.game-frame #lobbyView .lobby-filter-menu>summary svg{transform:none}
.game-frame #lobbyView .lobby-filter-popup{position:absolute;z-index:35;bottom:calc(100% + 4px);left:8px;right:8px;max-height:365px;overflow:auto;padding:12px;background:#171125;border:2px solid var(--edge);box-shadow:0 -5px 20px #0009;display:grid;gap:10px}
.game-frame #lobbyView .lobby-filter-menu:not([open])>.lobby-filter-popup{display:none}
.game-frame #lobbyView .filter-heading{display:flex;align-items:center;justify-content:space-between;gap:8px;font:11px Console,monospace;color:var(--cream)}
.game-frame #lobbyView .lobby-filter-popup label{display:grid;gap:6px;font:9px Console,monospace;color:var(--lav-dim);margin:0}
.game-frame #lobbyView .lobby-filter-popup [data-fields]{display:grid;gap:10px}
.game-frame #lobbyView .lobby-filter-popup select{width:100%;min-width:0;height:36px;padding:6px 8px;background:#262036;color:var(--cream);border:1px solid var(--edge);font:14px monospace;border-radius:0}
.game-frame #lobbyView .lobby-filter-popup button{min-height:32px;font-size:9px;padding:8px}
.game-frame #lobbyView .lobby-filter-popup p{font:12px monospace;color:var(--lav-dim);margin:0}
.game-frame #lobbyView .online-entry{display:grid;grid-template-columns:38px minmax(0,1fr);align-items:stretch;border-bottom:1px solid var(--edge-dim);min-height:62px}
.game-frame #lobbyView .online-entry .online-row{min-width:0;border:0;padding:8px 6px;gap:5px;font-size:9px}
.game-frame #lobbyView .online-entry .online-row>span:first-child{min-width:0}
.game-frame #lobbyView .online-entry .online-row small{font:11px monospace;margin-top:6px}
.game-frame #lobbyView .star-wallet{padding:6px;min-width:0;background:none;border:0;box-shadow:none;color:var(--lav-dim);display:grid;place-items:center}
.game-frame #lobbyView .star-wallet[aria-pressed=true]{color:var(--cream)}
.game-frame #lobbyView .star-wallet[aria-pressed=true] svg{fill:currentColor}
.game-frame #lobbyView .star-wallet:is(:hover,:focus-visible){color:white;background:#30213f;outline:1px solid var(--cream);outline-offset:-2px}

.game-frame #lobbyView .lobby-review-shade{position:absolute;inset:0;z-index:45;display:grid;place-items:center;padding:16px;background:#070510ba}
.game-frame #lobbyView .lobby-review-shade[hidden]{display:none}
.game-frame #lobbyView .lobby-review-shade .confirm-panel{width:100%;height:min(340px,100%);min-height:0;border:2px solid var(--edge);background:#191228;box-shadow:5px 5px #080611;gap:10px;padding:14px}
.game-frame #lobbyView .lobby-review-shade .confirm-heading h2{font:11px/1.6 Console,monospace;margin:0;color:var(--cream)}
.game-frame #lobbyView .lobby-review-shade .confirm-versus img{width:min(110px,100%);max-height:calc(100% - 28px);aspect-ratio:1;object-fit:contain}
.game-frame #lobbyView .lobby-review-shade .confirm-versus>div{font-size:10px}
.game-frame #lobbyView .lobby-review-shade .confirm-money{grid-template-columns:1fr;font-size:14px;text-align:center;gap:3px}
.game-frame #lobbyView .lobby-review-shade .confirm-money>*:nth-child(even){text-align:center}
.game-frame #lobbyView .lobby-review-shade .confirm-actions{gap:6px}
.game-frame #lobbyView .lobby-review-shade .confirm-actions button{min-width:0;min-height:40px;padding:8px 4px;font:10px/1.2 Console,monospace}
.game-frame #lobbyView .confirm-status{font:12px/1.35 monospace;color:var(--cream);margin:0;max-height:48px;overflow:auto;flex:none}
.game-frame #lobbyView .confirm-status:empty{display:none}
/* Isolated playable review: never mounted by the production game. */
.royale-preview-panel{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:48px 16px 16px;text-align:center;min-height:0;font:11px/1.5 Console,monospace;background:#100d20}
.royale-preview-panel h2{font-size:17px;margin:0;color:var(--cream)}
.royale-preview-panel p{margin:0}.royale-preview-panel small{font-size:8px;color:#aaa}
.royale-preview-portrait{width:100px;height:100px;object-fit:contain;image-rendering:pixelated}
.royale-preview-actions{display:flex;justify-content:center;gap:8px;flex-shrink:0;flex-wrap:wrap}.royale-preview-actions button{font-size:10px;padding:10px}
.royale-preview-panel select{background:#211a33;color:#ffe9a3;padding:8px;border:1px solid #665680;max-width:100%}
.royale-preview-panel progress{width:90%;height:18px}
.royale-preview-roster{overflow:auto;min-height:0;flex:1;width:100%;text-align:left}.royale-preview-roster div{display:flex;justify-content:space-between;padding:7px;border-bottom:1px solid #ffffff20}
.royale-preview-help{position:absolute;inset:0;z-index:60;padding:48px 20px 20px;background:#100d20;overflow:auto;font:11px/1.7 Console,monospace}.royale-preview-help h2{font-size:16px}
.royale-return{position:fixed;bottom:14px;right:14px;z-index:80;max-width:calc(100vw - 28px);padding:14px 18px;background:#171322;color:#ffe9a3;border:2px solid #7661a0;box-shadow:0 6px 20px #0008;font:11px/1.4 Console,monospace}
.royale-return[hidden]{display:none}

/* ------------------------------------------------------------- chat rail */
/* Transcribed from "Play Page Crowd.dc.html". Every declaration below is the
   design's own; the only additions are the parts the design had no state for
   (disabled, hover, focus) and the narrow breakpoint.

   Beside the cabinet on a wide screen, under it on a narrow one. The row
   stretches, so the rail is exactly as tall as the console and the match and
   the room are one screenful — nobody should scroll away from the game to
   read the chat. */
@media(min-width:1120px){
 body.battle main{
  /* The row is sized to the cabinet, not to whichever column happens to be
     taller. Left to itself the grid takes the rail's content height and the
     rail hangs below the console — which is the whole thing this layout is
     for. So the cabinet's height is computed the same way the cabinet
     computes it: column, minus the arena's 28px gutters, capped at 720, at
     4:3, plus the arena's 36px top and bottom. */
  --chat-w:340px;
  --col:min(760px,calc(min(1158px,100vw) - var(--chat-w)));
  --frame:min(720px,calc(var(--col) - 56px));
  display:grid;grid-template-columns:minmax(0,760px) var(--chat-w);
  grid-template-rows:calc(var(--frame) * 3 / 4 + 72px);
  align-items:stretch;
  width:100%;max-width:1158px;margin:0 auto;
 }
 body.battle .chat-rail{margin:36px 28px 36px 0;max-width:none;height:auto;min-height:0}
 /* Stretched to the cabinet, so the well takes whatever is left rather than
    capping itself. */
 body.battle .chat-log{max-height:none}
}

.chat-rail{
 --ink:#ffe9a3;--ink-deep:#1b1030;--ink-shade:#8d6b33;
 --pink:#ff5c8a;--pink-soft:#ff9dc0;--cyan:#5ee6e0;
 --lav:#c9bbe8;--lav-dim:#9d90c4;--lav-faint:#6b5f99;
 --panel-dark:#120d24;--bar:#0f0b1f;--well:#191330;
 --edge:#4b3f70;--edge-dim:#3b3260;
 display:flex;flex-direction:column;min-height:0;
 width:100%;max-width:720px;margin:20px auto 0;
 background:#161129;
 box-shadow:inset 0 0 0 2px #4b3f70,0 0 0 4px #14121d,0 0 0 6px #35304a;
 font-family:Console,monospace;color:var(--lav);
}

/* Title bar.
   Scoped under .chat-rail because the rail's bar is a <header>, and
   `.battle header` in battle.css is (0,1,1) — it was winning over a bare
   .chat-head and giving the bar 170px of side padding, which squeezed the
   room name to zero width. Every rule below is scoped for the same reason. */
.chat-rail .chat-head{
 flex:none;display:flex;align-items:center;justify-content:space-between;gap:10px;
 min-height:44px;padding:0 14px;
 background:linear-gradient(180deg,#221a3c,#151026);border-bottom:4px solid #6a3d8a;
}
.chat-rail .chat-head h2{
 margin:0;font:400 13px/1 Console,monospace;color:#ffe9a3;text-shadow:2px 2px #5a2d7a;
 white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.chat-count{flex:none;font:10px/1 Console,monospace;color:#ff9dc0;
 font-variant-numeric:tabular-nums;white-space:nowrap}

/* Tab tray. */
/* The tray is a <nav>, so it also has to outrank `.battle nav button`. */
.chat-rail .chat-rooms{
 flex:none;display:grid;grid-template-columns:1fr 1fr;gap:3px;margin:0;padding:5px;
 background:#0f0b1f;
}
.chat-rail .chat-rooms:empty{display:none}
.chat-rail .chat-rooms button{
 min-height:32px;padding:0 6px;border:0;font:10px/1 Console,monospace;cursor:pointer;
 background:#1d1738;color:var(--lav);box-shadow:inset 0 0 0 2px var(--edge-dim);
 white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.chat-rail .chat-rooms button[aria-current=true]{
 background:linear-gradient(180deg,#ffe9a3,#e0bf67);color:#1b1030;box-shadow:0 3px #8d6b33;
}
.chat-rail .chat-rooms button:hover:not(:disabled):not([aria-current=true]){color:var(--ink)}
.chat-rail .chat-rooms button:disabled{color:var(--lav-faint);cursor:not-allowed}

/* The log. */
/* Bounded when the rail is stacked under the cabinet, or a busy room pushes
   the page to whatever length it likes. Beside the cabinet it is stretched
   instead and the cap comes off. */
.chat-log{
 position:relative;flex:1;min-height:0;max-height:clamp(200px,40vh,340px);
 display:flex;flex-direction:column;background:#1a1433;
}
.chat-messages{
 flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;
 display:flex;flex-direction:column;justify-content:flex-end;padding:6px 0;
}
.chat-line{
 flex:none;margin:0;padding:3px 14px;
 font:13px/1.45 'DM Sans',sans-serif;color:#e4dcf5;overflow-wrap:anywhere;
}
.chat-line b{font:400 11px/1 Console,monospace;color:var(--lav-faint);margin-right:5px}
.chat-line.is-me{background:#1f1840}
.chat-line.is-me b{color:#ffe9a3}

/* A refusal is the room talking, not a person. */
.chat-status{
 flex:none;margin:5px 14px;padding:6px;text-align:center;
 font:10px/1.4 Console,monospace;color:#ff9dc0;box-shadow:inset 0 0 0 2px #7a1f55;
}
.chat-status:empty{display:none}

/* Composer tray. */
/* align-items is spelled out because battle.css styles bare <form> with
   align-items:center, which otherwise shrink-wraps the row and leaves the
   composer floating in the middle of its own tray. */
.chat-form{
 flex:none;display:flex;flex-direction:column;align-items:stretch;gap:6px;
 padding:8px 10px 10px;background:#0f0b1f;border-top:2px solid #3b3260;
}
.chat-row{display:flex;gap:6px}
/* The bid strip, taking the design's full-width bar treatment: label left,
   what it costs right. */
.chat-rail .chat-rename{
 flex:none;display:flex;align-items:center;justify-content:space-between;gap:10px;
 min-height:40px;padding:0 14px;border:0;border-block:2px solid #544874;
 background:#2a2340;cursor:pointer;
 font:12px/1 Console,monospace;color:#ffe9a3;white-space:nowrap;
}
.chat-rail .chat-rename #chatAsk{color:#5ee6e0;font:10px/1 Console,monospace;
 font-variant-numeric:tabular-nums}
.chat-rail .chat-rename:hover{background:#352b52}
.chat-form input{
 flex:1;min-width:0;min-height:44px;padding:0 12px;border:0;
 background:#191330;box-shadow:inset 0 0 0 2px #4b3f70;
 font:14px/1 'DM Sans',sans-serif;color:#ffe9a3;outline:none;
}
.chat-form input::placeholder{color:var(--lav-faint)}
/* The tray's one lit control. */
.chat-form .cab-btn{
 flex:none;min-height:44px;padding:0 14px;
 background:linear-gradient(180deg,#ffe9a3,#e0bf67);color:#1b1030;box-shadow:0 3px #8d6b33;
 font:11px/1 Console,monospace;letter-spacing:1px;
}
.chat-meta{
 display:flex;justify-content:space-between;align-items:center;gap:8px;margin:0;
 font:9px/1 Console,monospace;color:#6b5f99;
}

/* Naming a room spends ETH, so it gets its own strip rather than sharing the
   composer's. */
.chat-name-form{
 flex:none;display:flex;align-items:stretch;gap:6px;padding:8px 10px;
 background:#120d24;border-top:2px solid #3b3260;
}
.chat-name-form input{
 flex:1;min-width:0;min-height:40px;padding:0 10px;border:0;
 background:#191330;box-shadow:inset 0 0 0 2px #4b3f70;
 font:13px/1 'DM Sans',sans-serif;color:#ffe9a3;outline:none;
}
.chat-name-form .cab-btn{
 flex:none;min-height:40px;padding:0 12px;
 background:linear-gradient(180deg,#ffe9a3,#e0bf67);color:#1b1030;box-shadow:0 3px #8d6b33;
 font:10px/1 Console,monospace;letter-spacing:1px;
}
.chat-name-form button[type=button]{
 flex:none;padding:0 8px;border:0;background:none;cursor:pointer;
 font:10px/1 Console,monospace;color:var(--lav-faint);
}
.chat-name-form button[type=button]:hover{color:#ffe9a3}

.chat-rail :is(input,button):focus-visible{outline:3px solid #5ee6e0;outline-offset:2px}

@media(max-width:640px){
 /* Line up with the cabinet. body.battle escapes site.css's main padding, so
    the frame gets its gutter from the arena and the rail had none. */
 .chat-rail{margin:16px 12px 0;width:auto}
 .chat-log{height:clamp(200px,38vh,300px)}
 /* Two 10px labels in a 150px cell is unreadable. */
 .chat-rooms{grid-template-columns:1fr}
}

/* Labels meant for screen readers only.
   The class was in the markup before it was in any stylesheet, so every
   "visually hidden" label was rendering as visible text. */
.sr-only{
 position:absolute;width:1px;height:1px;margin:-1px;padding:0;
 overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0;
}