/* Arena screens: drop-in (lobby), pause, results and the GO stamp.
   A match-day title card rather than a settings panel: the arena name is the hero, slanted like a fight card,
   and every other element is quiet so the one button that starts the fight is obvious. */
:root{--a-mid:#0b1024;--a-ink:#f5f2df;--a-soft:#c0cfe9;--a-dim:#8fa4cf;--a-lime:#baff38;--a-lime-ink:#14300b;--a-pink:#ff68bc;--a-gold:#ffe369;--a-cyan:#53edff;--a-accent:#baff38;--a-accent2:#ff68bc}
body[data-theme="japan"]{--a-accent:#ff3d7f;--a-accent2:#53edff}
/* THE FROZEN MAZE: cold moonlight and pumpkin orange, and its names set in the maze's thin serif, upright and spaced. */
body[data-theme="maze"]{--a-accent:#9fd8ff;--a-accent2:#ff7a1a}
body[data-theme="maze"] #start .lobby-title{font:600 clamp(42px,7vw,88px)/.95 "Cormorant Garamond",Georgia,serif;letter-spacing:.14em;transform:none;text-shadow:0 0 34px rgba(159,216,255,.6),0 2px 0 rgba(0,0,0,.5)}
body[data-theme="maze"] #after .res-place{font:600 clamp(64px,11vw,132px)/.95 "Cormorant Garamond",Georgia,serif;letter-spacing:.12em;transform:none;text-shadow:0 0 40px color-mix(in srgb,var(--place,#9fd8ff) 60%,transparent)}
body[data-theme="maze"] .lobby-slash{box-shadow:26px 0 0 var(--a-accent2)}

/* ---------- lobby / pause ---------- */
/* While a card is up, the live HUD behind it steps back: it is still the real match, just not the thing to read. */
#hud{transition:opacity .25s}
body:has(#start:not([hidden])) #hud,body:has(#after:not([hidden])) #hud{opacity:.18}
#start.lobby{position:fixed;inset:0;z-index:6;transform:none;left:0;top:0;width:auto;padding:0;border:0;border-radius:0;box-shadow:none;
 display:flex;align-items:center;overflow:auto;overscroll-behavior:contain;
 background:linear-gradient(100deg,rgba(8,12,30,.94) 0%,rgba(8,12,30,.82) 38%,rgba(8,12,30,.35) 70%,rgba(8,12,30,.15) 100%);
 animation:lobby-in .35s ease-out both}
#start.lobby[hidden]{display:none}
.lobby-slash{position:fixed;top:-10%;bottom:-10%;left:min(800px,64vw);width:14px;background:var(--a-accent);transform:skewX(-14deg);box-shadow:26px 0 0 var(--a-accent2),0 0 40px color-mix(in srgb,var(--a-accent) 45%,transparent);opacity:.9;pointer-events:none;animation:slash-in .5s .05s cubic-bezier(.2,.9,.2,1) both}
.lobby-inner{position:relative;width:min(600px,100%);padding:clamp(24px,5vh,56px) clamp(22px,5vw,72px);color:var(--a-ink)}
.lobby-live{display:inline-flex;align-items:center;gap:9px;margin:0 0 6px;padding:6px 12px 6px 10px;border-radius:999px;background:rgba(255,95,109,.14);border:2px solid rgba(255,95,109,.55);font:900 12px/1 Nunito,sans-serif;letter-spacing:.16em;text-transform:uppercase;color:#ffc2c8}
.live-dot{width:9px;height:9px;border-radius:50%;background:#ff5f6d;box-shadow:0 0 0 0 rgba(255,95,109,.7);animation:live 1.6s ease-out infinite}
#start .lobby-title{margin:6px 0 12px;font:400 clamp(54px,9vw,112px)/.88 Launch,'Lilita One',Nunito,sans-serif;letter-spacing:.01em;color:#fff;text-transform:uppercase;
 transform:skewX(-8deg);transform-origin:left bottom;text-shadow:5px 5px 0 var(--a-accent2),0 0 50px color-mix(in srgb,var(--a-accent) 30%,transparent);animation:title-slam .55s .08s cubic-bezier(.2,1.4,.3,1) both;overflow-wrap:anywhere}
.lobby-facts{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:0 0 20px;padding:0}
.lobby-facts li{padding:7px 13px;border-radius:9px;background:rgba(16,26,61,.85);border:2px solid #34498a;font:900 13px/1 Nunito,sans-serif;color:var(--a-soft);transform:skewX(-8deg)}
.lobby-facts li b{color:var(--a-accent);font-weight:1000}
.lobby-count{margin:0 0 8px;font:900 14px/1.3 Nunito,sans-serif;color:var(--a-ink)}
.lobby-count span{color:var(--a-dim);font-weight:800}
.lobby-roster{list-style:none;display:flex;flex-wrap:wrap;gap:7px;margin:0 0 24px;padding:0;min-height:34px}
.lobby-roster li{display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 12px 0 5px;border-radius:999px;background:rgba(16,26,61,.9);border:2px solid #2d3f78;font:800 13px/1 Nunito,sans-serif;color:var(--a-ink);animation:chip-in .3s both}
.lobby-roster li i{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font:1000 11px/1 Nunito,sans-serif;font-style:normal;color:#0b1024;background:var(--c,#7de7ff)}
.lobby-roster li small{font:1000 9px/1 Nunito,sans-serif;letter-spacing:.08em;padding:3px 5px;border-radius:5px;border:1.5px solid #52679f;color:var(--a-dim)}
.lobby-roster li.me{border-color:var(--a-lime);background:rgba(186,255,56,.12)}
.lobby-roster li.me small{border-color:var(--a-lime);color:var(--a-lime)}
.lobby-roster li.wait{border-style:dashed;color:var(--a-dim);padding-left:12px}
.lobby-cta{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-bottom:22px}
.lobby-xp{margin:0;max-width:240px;font:800 12.5px/1.45 Nunito,sans-serif;color:var(--a-dim)}
.lobby-xp b{color:var(--a-lime)}

/* The one button. Big, slanted, with the key that does the same thing printed on it. */
#start .drop,#after .drop{position:relative;display:inline-flex;align-items:center;gap:16px;min-height:72px;padding:0 20px 0 34px;border:3px solid #0b1024;border-radius:16px;
 background:var(--a-lime);color:var(--a-lime-ink);box-shadow:0 7px 0 #3d6b16,0 0 0 0 rgba(186,255,56,.5);transform:skewX(-8deg);cursor:pointer;transition:transform .08s,box-shadow .08s,filter .15s}
#start .drop:not(:disabled){animation:drop-pulse 2.4s 1s ease-in-out infinite}
#start .drop:hover,#after .drop:hover{filter:brightness(1.07)}
#start .drop:active,#after .drop:active{transform:skewX(-8deg) translateY(4px);box-shadow:0 3px 0 #3d6b16}
#start .drop:disabled{background:#4a5a86;color:#c0cfe9;box-shadow:0 7px 0 #27325a;cursor:progress}
.drop-label{font:400 34px/1 Launch,'Lilita One',Nunito,sans-serif;letter-spacing:.02em;text-transform:uppercase}
.drop-key{font:1000 11px/1 Nunito,sans-serif;letter-spacing:.1em;text-transform:uppercase;padding:7px 9px;border-radius:8px;background:rgba(11,16,36,.14);border:2px solid rgba(11,16,36,.35)}
#start .drop:disabled .drop-key{display:none}

.lobby-keys{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr));gap:10px 18px;margin:0 0 22px;padding:14px 16px;border-radius:14px;background:rgba(10,16,38,.6);border:2px solid rgba(61,85,145,.55);box-sizing:border-box;width:100%}
.lobby-keys div{display:flex;align-items:center;gap:8px;min-width:0}
.lobby-keys dt{display:flex;flex:none;align-items:center;gap:3px;margin:0;font:900 11px Nunito,sans-serif;color:var(--a-dim)}
.lobby-keys dd{margin:0;min-width:0;font:800 12px/1.25 Nunito,sans-serif;color:var(--a-soft)}
.lobby-keys kbd{display:inline-grid;place-items:center;min-width:24px;height:24px;padding:0 5px;border-radius:6px;background:#1c2a58;border:1.5px solid #4a63a5;box-shadow:0 2px 0 #0b1024;font:1000 11px/1 Nunito,sans-serif;color:#e9f6ff}
.lobby-keys kbd.wide{min-width:44px}
.lobby-keys kbd.mouse{width:18px;min-width:18px;height:26px;padding:0;border-radius:9px;background:linear-gradient(90deg,var(--a-lime) 0 50%,#1c2a58 50%) top/100% 45% no-repeat,#1c2a58}
.lobby-keys kbd.mouse.right{background:linear-gradient(90deg,#1c2a58 0 50%,var(--a-cyan) 50%) top/100% 45% no-repeat,#1c2a58}
.lobby-foot{display:flex;gap:10px;flex-wrap:wrap}
#start .ghost,#after .ghost{min-height:44px;padding:0 16px;border-radius:12px;border:2px solid #4a63a5;background:rgba(16,26,61,.85);color:#e9f0ff;box-shadow:0 4px 0 #0b1024;font:900 14px Nunito,sans-serif}
#start .ghost:hover,#after .ghost:hover{border-color:#87a9ec;background:#1f2a55}
#start .ghost:active,#after .ghost:active{transform:translateY(2px);box-shadow:0 2px 0 #0b1024}
#start .note{margin:14px 0 0;font:700 12.5px/1.4 Nunito,sans-serif;color:#ffb3bd}
#start .note:empty{display:none}
#start button:focus-visible,#after button:focus-visible{outline:3px solid var(--a-gold);outline-offset:4px}

/* Pause: the same card, smaller claim. The match does not stop, so it says so. */
#start[data-mode="pause"] .lobby-title{font-size:clamp(48px,7vw,84px)}
#start[data-mode="pause"] .lobby-live{background:rgba(255,227,105,.12);border-color:rgba(255,227,105,.5);color:var(--a-gold)}
#start[data-mode="pause"] .live-dot{background:var(--a-gold);animation:none}
#start[data-mode="pause"] .lobby-facts,#start[data-mode="pause"] .lobby-xp{display:none}

/* ---------- GO stamp ---------- */
.go-stamp{position:fixed;inset:0;z-index:7;display:grid;place-items:center;pointer-events:none}
.go-stamp[hidden]{display:none}
.go-stamp span{font:400 clamp(90px,16vw,200px)/1 Launch,'Lilita One',sans-serif;color:#fff;transform:skewX(-8deg);text-shadow:8px 8px 0 var(--a-pink),0 0 60px rgba(186,255,56,.55);animation:go .75s cubic-bezier(.2,1.5,.3,1) both}

.go-stamp[data-go="true"] span{color:var(--a-lime)}
/* Numbers are white and a touch smaller than GO, which is the one that means move. */
.go-stamp[data-go="false"] span{font-size:clamp(80px,13vw,170px);text-shadow:7px 7px 0 var(--a-pink),0 0 50px rgba(255,255,255,.35)}

/* ---------- results ---------- */
#after.results{position:fixed;inset:0;z-index:6;left:0;top:0;right:0;bottom:0;transform:none;width:auto;max-width:none;display:flex;align-items:center;justify-content:center;gap:0;overflow:auto;
 background:radial-gradient(ellipse at 50% 35%,rgba(19,35,80,.55),rgba(6,9,22,.9) 70%);padding:24px 16px}
#after.results[hidden]{display:none}
.res-inner{width:min(720px,100%);text-align:center;color:var(--a-ink)}
.res-kicker{margin:0;font:900 13px/1 Nunito,sans-serif;letter-spacing:.28em;text-transform:uppercase;color:var(--a-dim);animation:fade-up .4s both}
#after .res-place{margin:4px 0 0;text-transform:uppercase;font:400 clamp(84px,14vw,168px)/.9 Launch,'Lilita One',sans-serif;color:var(--place,#f5f2df);transform:skewX(-8deg);
 text-shadow:6px 6px 0 rgba(11,16,36,.9),0 0 60px color-mix(in srgb,var(--place,#f5f2df) 40%,transparent);animation:title-slam .6s .1s cubic-bezier(.2,1.5,.3,1) both}
.res-place sup{font-size:.42em;vertical-align:.9em;margin-left:.04em}
.res-sub{margin:8px 0 22px;font:900 18px/1.3 Nunito,sans-serif;color:var(--a-soft);animation:fade-up .4s .3s both}
.res-sub b{color:#fff}
.res-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:0 auto 14px;max-width:620px}
.res-stat{padding:14px 8px 12px;border-radius:14px;background:rgba(16,26,61,.92);border:2px solid #2d3f78;animation:fade-up .35s both}
.res-stat b{display:block;font:400 38px/1 Launch,'Lilita One',sans-serif;color:#fff}
.res-stat span{display:block;margin-top:6px;font:900 11px/1 Nunito,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--a-dim)}
.res-stat.hot{border-color:var(--a-lime)}
.res-stat.hot b{color:var(--a-lime)}
.res-xp{max-width:620px;margin:0 auto 16px;animation:fade-up .35s .5s both}
.res-xp-bar{position:relative;height:34px;border-radius:10px;background:rgba(16,26,61,.92);border:2px solid #2d3f78;overflow:hidden;display:flex;align-items:center;justify-content:space-between;padding:0 14px;font:1000 13px/1 Nunito,sans-serif}
.res-xp-bar i{position:absolute;inset:0 auto 0 0;width:0;background:linear-gradient(90deg,#6ad11f,var(--a-lime));transition:width 1.1s .6s cubic-bezier(.2,.8,.2,1)}
.res-xp-bar span{position:relative;color:#fff;text-shadow:0 1px 0 #0b1024}
.res-xp-note{font:800 13px/1.4 Nunito,sans-serif;color:var(--a-dim);padding:9px 12px;border-radius:10px;border:2px dashed #34498a}
.res-board{list-style:none;margin:0 auto 22px;padding:0;max-width:620px;display:grid;gap:5px}
.res-board li{display:grid;grid-template-columns:34px 1fr auto 56px;align-items:center;gap:10px;height:38px;padding:0 14px 0 8px;border-radius:10px;background:rgba(12,20,46,.88);font:800 14px/1 Nunito,sans-serif;color:var(--a-ink);text-align:left;animation:fade-up .3s both}
.res-board li .pos{display:grid;place-items:center;width:26px;height:26px;border-radius:8px;background:#1c2a58;font:400 15px/1 Launch,'Lilita One',sans-serif;color:var(--a-soft)}
.res-board li:nth-child(1) .pos{background:var(--a-gold);color:#3a2c00}
.res-board li:nth-child(2) .pos{background:#d6e1f5;color:#26324f}
.res-board li:nth-child(3) .pos{background:#e59a5b;color:#3b1d05}
.res-board li .kd{font:800 12px/1 Nunito,sans-serif;color:var(--a-dim)}
.res-board li .sc{font:400 20px/1 Launch,'Lilita One',sans-serif;text-align:right}
.res-board li small{margin-left:7px;font:1000 9px/1 Nunito,sans-serif;letter-spacing:.08em;padding:3px 5px;border-radius:5px;border:1.5px solid #52679f;color:var(--a-dim);vertical-align:1px}
.res-board li.me{background:rgba(186,255,56,.13);box-shadow:inset 0 0 0 2px var(--a-lime)}
.res-board li.me .sc{color:var(--a-lime)}
.res-actions{display:flex;gap:14px;justify-content:center;align-items:center;flex-wrap:wrap;animation:fade-up .35s .7s both}

@keyframes lobby-in{from{opacity:0}to{opacity:1}}
@keyframes slash-in{from{transform:skewX(-14deg) translateY(-110%)}to{transform:skewX(-14deg)}}
@keyframes title-slam{0%{opacity:0;transform:skewX(-8deg) scale(1.35)}100%{opacity:1;transform:skewX(-8deg) scale(1)}}
@keyframes chip-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes fade-up{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes live{0%{box-shadow:0 0 0 0 rgba(255,95,109,.7)}100%{box-shadow:0 0 0 10px rgba(255,95,109,0)}}
@keyframes drop-pulse{0%,100%{box-shadow:0 7px 0 #3d6b16,0 0 0 0 rgba(186,255,56,.45)}50%{box-shadow:0 7px 0 #3d6b16,0 0 0 12px rgba(186,255,56,0)}}
@keyframes go{0%{opacity:0;transform:skewX(-8deg) scale(2.2)}30%{opacity:1;transform:skewX(-8deg) scale(.95)}45%{transform:skewX(-8deg) scale(1.02)}80%{opacity:1}100%{opacity:0;transform:skewX(-8deg) scale(1.08)}}

/* Phones (always landscape in the arena) and short windows: the same card, tighter. */
@media (max-height:560px){
 .lobby-inner{padding:16px 22px}
 #start .lobby-title{font-size:clamp(40px,8vw,64px);margin:4px 0 8px}
 .lobby-facts{margin-bottom:10px}
 .lobby-roster{margin-bottom:12px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
 .lobby-roster li{flex:none}
 .lobby-keys{display:none}
 .lobby-cta{margin-bottom:12px}
 #start .drop,#after .drop{min-height:60px}
 .drop-label{font-size:28px}
 #after .res-place{font-size:clamp(64px,12vw,110px)}
 .res-sub{margin:4px 0 12px;font-size:15px}
 .res-stat{padding:9px 6px}
 .res-stat b{font-size:28px}
 .res-board li:nth-child(n+5):not(.me){display:none}
}
@media (hover:none) and (pointer:coarse){.lobby-keys{display:none}}
@media (max-width:640px){.res-stats{grid-template-columns:repeat(2,1fr)}}
@media (prefers-reduced-motion:reduce){
 #start.lobby,.lobby-slash,#start .lobby-title,.lobby-roster li,#after .res-place,.res-kicker,.res-sub,.res-stat,.res-xp,.res-board li,.res-actions{animation:none}
 #start .drop:not(:disabled),.live-dot{animation:none}
 .go-stamp span{animation-duration:.01s}
 .res-xp-bar i{transition:none}
}
#start[data-mode="pause"] .lobby-title{margin-bottom:20px}

/* Invites: the button reads as the social action it is, and a friend arriving by link gets one small name card. */
#start .ghost.invite,#after .ghost.invite{border-color:#ff68bc;color:#ffd0ea}
.invite-name{position:fixed;inset:0;z-index:100;display:grid;place-content:center;justify-items:stretch;gap:12px;padding:24px;background:radial-gradient(circle at 50% 40%,#1d2f66,#152350 60%,#0f1a3d);color:#f5f2df;font:800 16px/1.4 Nunito,system-ui,sans-serif}
.invite-name h2{margin:0;font:400 clamp(30px,7vw,48px)/1 'Lilita One',Launch,sans-serif;color:#fff}
.invite-name .invite-kicker{margin:0;color:#ff93ce;font-weight:900}
.invite-name label{display:grid;gap:6px;font-size:14px;color:#c9d4ea}
.invite-name input{min-height:52px;padding:0 14px;border-radius:12px;border:2px solid #4a63a5;background:#0f1a3d;color:#fff;font:900 20px Nunito,sans-serif;width:min(360px,86vw)}
.invite-name input:focus{outline:3px solid #baff38;outline-offset:2px}
/* THE FROZEN MAZE: the day's fastest escapes, under the lobby's XP line and under the results. */
.maze-board{margin:10px 0 0;padding:10px 12px;border-radius:12px;background:rgba(10,14,28,.55);border:1px solid rgba(159,216,255,.22);font-family:"Cormorant Garamond",Georgia,serif}
.maze-board h4{margin:0 0 6px;font:600 13px/1.2 "Cormorant Garamond",Georgia,serif;letter-spacing:.22em;text-transform:uppercase;color:#9fd8ff}
.maze-board ol{margin:0;padding:0;list-style:none;counter-reset:m}
.maze-board li{display:flex;justify-content:space-between;gap:12px;padding:2px 0;font:500 15px/1.3 "Cormorant Garamond",Georgia,serif;color:#e9eef7;counter-increment:m}
.maze-board li span::before{content:counter(m) ". ";color:rgba(233,238,247,.5)}
.maze-board li small{font:italic 12px "Cormorant Garamond",Georgia,serif;color:#ffb35a}
.maze-board li b{font:600 15px ui-monospace,Menlo,monospace;color:#ffd36b}
/* The account line on game pages (src/play-signin.js): stays on the pause card and on phones, unlike .lobby-xp. */
.play-account{display:flex;flex-direction:column;align-items:flex-start;gap:8px;margin:0 0 12px;padding:9px 12px;max-width:560px;border-radius:12px;background:rgba(16,26,61,.9);border:2px solid #34498a;font:800 13px/1.35 Nunito,sans-serif;color:var(--a-soft,#c9d4ff)}
.play-account[hidden]{display:none}
.play-account b{color:var(--a-lime,#baff38)}
.gb-signin{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border:0;border-radius:10px;background:var(--a-lime,#baff38);color:var(--a-lime-ink,#163626);font:900 14px/1.1 Nunito,sans-serif;cursor:pointer;box-shadow:0 3px 0 rgba(0,0,0,.35)}
.gb-signin b{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:#fff;color:#4285f4!important;font:900 13px/1 Arial,sans-serif}
.gb-signin:hover{filter:brightness(1.08)}.gb-signin:disabled{opacity:.6;cursor:wait}
.res-xp-note .gb-signin{display:flex;margin:8px auto 0}
.res-xp>.gb-signin{display:flex;margin:8px auto 0}