/* AFTERIMAGE identity: cold ink, silver type, one mint action color.
   Pink belongs to danger in-game. Square UI; circles only for spatial controls.
   Layers: scene 0, chrome 2, notices 3, panels 4, native modal top layer. */
:root{--bg:#080d15;--ink:#e3e9ee;--muted:#a0aebc;--line:#b7c7d332;--mint:#b7e9d7;--pink:#ef86b7}
button{white-space:nowrap}button:active:enabled{transform:translateY(1px)}input::placeholder{color:#8fa0b0}input,button,select{border-radius:2px!important}
.skip-link{position:fixed;top:8px;left:8px;z-index:5;background:var(--mint);color:var(--bg);padding:10px;transform:translateY(-150%)}.skip-link:focus{transform:none}
header{height:76px;padding:0 4vw;border:0;background:none}.brand{font-size:12px;letter-spacing:2px;gap:8px}.brand-mark{width:34px;height:34px;display:block;flex:0 0 auto}.edition{font-size:9px;letter-spacing:1px;color:var(--muted)}.session{font-size:11px;letter-spacing:.5px}
#settings{top:auto;bottom:26px;right:4vw;gap:18px;font-size:11px}#settings button{font-size:11px;border:0;background:none;padding:8px 0;color:var(--ink)}#settings select{font-size:11px}#connection{font-size:10px}#connection[data-state=offline]{display:none}.quality-label{color:var(--muted)}
.vignette{background:linear-gradient(90deg,#080d1555,transparent 60%),radial-gradient(ellipse at 60% 45%,transparent 45%,#050a1480)}
.landing{left:7vw;top:50%;transform:translateY(-49%);width:360px;max-height:calc(100dvh - 160px);padding:0 25px 0 0;background:none;border:0;border-radius:0;box-shadow:none;backdrop-filter:none;overflow:hidden;display:flex;flex-direction:column;justify-content:center}
.eyebrow{font-size:10px;letter-spacing:2px;font-family:'Space Grotesk',sans-serif;color:var(--muted)}
.landing h1{font-size:clamp(54px,min(9.6vw,20dvh),145px);line-height:.8;letter-spacing:-2px;margin:clamp(12px,2.8dvh,26px) 0 clamp(10px,2.6dvh,24px);padding-bottom:3px;isolation:isolate;overflow:visible}.landing h1 span{display:block;color:var(--ink)}.title-echo{position:relative;margin-top:clamp(4px,1dvh,8px)}.title-echo::before,.title-echo::after{content:attr(data-echo);position:absolute;inset:0;color:transparent;-webkit-text-stroke:1px #b7e9d755;z-index:-1;pointer-events:none}.title-echo::before{transform:translateX(10px)}.title-echo::after{transform:translateX(20px);opacity:.45}
.intro{font-size:clamp(13px,1.9dvh,15px);line-height:1.5;letter-spacing:-.2px;color:var(--muted);margin:0 0 clamp(12px,2.8dvh,27px)}.entry-controls{border-top:1px solid var(--line);padding-top:clamp(10px,2dvh,18px)}.field{font:12px 'Space Grotesk',sans-serif;letter-spacing:0;color:var(--ink);margin-bottom:clamp(10px,1.8dvh,17px)}input{background:#101924ab;border:1px solid #657c8a69;padding:clamp(8px,1.4dvh,12px) 12px;font-size:15px}.actions{display:grid;grid-template-columns:1.15fr 1fr;gap:12px}.primary,.secondary{min-height:clamp(40px,5.4dvh,46px);padding:10px 14px;font-size:12px;font-weight:600}.primary{color:#102820;background:var(--mint);border-color:var(--mint)}.primary:hover:enabled{background:#d3f1e6;transform:none}.secondary{background:transparent;border-color:var(--line);color:var(--ink)}.secondary:hover:enabled{background:#b7e9d710}.actions .secondary{border-left:0;border-right:0;border-top:0;padding-left:0;padding-right:0}.primary span,.secondary span{margin-left:4px}
#join-row{display:flex;align-items:flex-end;gap:12px;margin-top:clamp(10px,2dvh,19px);margin-bottom:0;font:12px 'Space Grotesk',sans-serif}.join-fields .field{min-width:0;margin-bottom:0;flex:1}.join-fields button{min-height:clamp(40px,5.4dvh,46px);flex:0 0 110px}.text-button{background:none;border:0;border-bottom:1px solid var(--line);padding:0 0 5px;color:var(--muted);font-size:12px;margin-top:clamp(10px,2.2dvh,23px)}.text-button:hover{color:var(--ink)}.text-button span{padding-left:22px}
#status{top:81px;left:4vw;font-size:12px;max-width:65vw;color:var(--muted)}body[data-screen=home] #status{top:auto;bottom:68px;left:7vw;max-width:80vw;color:#f0b6bf;background:#080d15dd}#status:empty{display:none}.session #hud-phase{font-size:10px}
.panel.modal{padding:32px;border-radius:2px;background:#0b1420f5;border:1px solid #405361;box-shadow:0 25px 80px #030b14aa;backdrop-filter:blur(16px);width:450px}.modal h2{font-size:48px;letter-spacing:-.3px;line-height:1;margin:20px 0}.modal p{font-size:13px}.room-code{font:42px 'Barlow Condensed',sans-serif;letter-spacing:10px;background:none;border:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);border-radius:0;padding:16px 0;margin:23px 0 10px;color:var(--mint)}li{font-size:14px;padding:14px 0}.watch-details summary{font-size:12px}.watch-details code{display:block;font-size:11px;line-height:1.5;margin-top:10px;overflow-wrap:anywhere;color:var(--ink)}.control-hint{font-size:11px!important}.roster-name{display:flex;align-items:center;gap:10px}.seat-number{font:11px monospace;color:var(--muted)!important;width:20px}.standing{display:grid;grid-template-columns:24px 1fr auto;gap:8px;align-items:center}.standing.is-winner{border-left:2px solid var(--mint);padding-left:12px;color:var(--mint)}.standing-score{font:11px monospace;color:var(--muted)}#results h2{font-size:50px}.result-rank{font:11px monospace;color:var(--muted)}
#match-hud{border:0;border-top:1px solid var(--phase);border-bottom:1px solid var(--line);border-radius:0;background:#08111edb;padding:17px 23px;bottom:26px;width:360px}.telemetry small{font-size:9px;letter-spacing:1px}.telemetry strong{font-size:25px}.phase-line{font-size:10px;margin-top:14px}.pace-heading{font-size:10px;letter-spacing:0}.pace-target{font-size:9px}#score{font-size:20px}.target-tick{background:#e3e9ee99}.phase-line span{white-space:nowrap}#leave{top:79px;right:4vw;background:none;border-color:var(--line);font-size:11px}.quiet{font-size:12px;color:var(--ink)}#help{bottom:28px;left:4vw;font-size:10px}body[data-screen=home] #help{display:none}kbd{font-size:10px}.quality-label select option{background:var(--bg)}#jump,#joystick,#stick{border-radius:50%!important}#jump{bottom:110px;width:72px;height:72px;font-size:24px}.telemetry,#clock,.phase-line{font-variant-numeric:tabular-nums}
dialog{color:var(--ink);background:#0b1420;border:1px solid #405361;width:min(520px,calc(100vw - 32px));max-height:85dvh;padding:32px;border-radius:2px;box-shadow:0 30px 100px #020813;overflow:auto}dialog::backdrop{background:#030911bf;backdrop-filter:blur(6px)}dialog h2{font-size:46px;line-height:1.02;margin:25px 0}#rules-close{display:block;margin-left:auto;background:none;border:1px solid var(--line);padding:8px 14px}dialog p{font-size:14px;line-height:1.6}.rules-list{counter-reset:none}.rules-list li{display:grid;grid-template-columns:30px 1fr;gap:15px;align-items:start}.rules-list b{font:12px monospace;color:var(--mint);padding-top:3px}.rules-list h3{margin:0;font-size:16px;font-weight:500}.rules-list p{margin:6px 0 0}.rules-list li:last-child{border:0}
body[data-busy=true] .entry-controls{opacity:.6}body[data-busy=true] .entry-controls::after{content:'Connecting to the arena…';display:block;margin-top:12px;font-size:12px;color:var(--mint)}
@media(prefers-reduced-motion:no-preference){.landing h1,.landing .intro,.entry-controls{animation:enter .7s both cubic-bezier(.2,.8,.2,1)}.landing .intro{animation-delay:.08s}.entry-controls{animation-delay:.16s}.title-echo::before,.title-echo::after{transition:transform .5s}.landing h1:hover .title-echo::before{transform:translateX(14px)}.landing h1:hover .title-echo::after{transform:translateX(28px)}@keyframes enter{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}}
@media(min-width:1500px){.landing{left:max(7vw,calc((100vw - 1440px)/2));width:410px}.landing h1{font-size:clamp(80px,min(9vw,22dvh),150px)}}
@media(max-height:780px) and (min-width:768px){.landing{max-height:calc(100dvh - 145px);width:350px}.landing h1{font-size:clamp(54px,min(9vw,19dvh),100px)}.intro{line-height:1.45}}
@media(max-height:620px) and (min-width:768px){.landing h1{font-size:clamp(48px,min(8vw,17dvh),84px)}.intro br{display:none}.intro{margin-bottom:10px}}
@media(max-width:767px){header{height:64px;padding:0 20px}.brand{font-size:11px;gap:6px}.brand-mark{width:28px;height:28px}.edition{display:none}.session{gap:3px}.session #hud-phase{font-size:9px}#settings{bottom:auto;top:72px;right:20px;gap:13px}#settings button,#settings select{font-size:11px}#connection{font-size:9px}.quality-label{font-size:10px}.landing{left:24px;top:112px;transform:none;width:calc(100vw - 48px);max-width:400px;max-height:calc(100dvh - 175px);padding:0 24px 0 0;justify-content:flex-start}.landing h1{font-size:clamp(56px,min(24vw,17dvh),100px)}.intro{font-size:13px;line-height:1.5}.eyebrow{font-size:10px}.field{font-size:13px}.primary,.secondary{font-size:13px}.vignette{background:linear-gradient(90deg,#080d15dd 10%,#080d1599 65%,#080d1577)}.modal h2{font-size:42px}.panel.modal{padding:25px;max-height:calc(100dvh - 170px)}#status{top:108px;left:20px;max-width:calc(100vw - 100px);font-size:10px}body[data-screen=home] #status{top:auto;bottom:65px;left:24px;max-width:calc(100vw - 48px)}#leave{top:108px;right:20px;font-size:10px}#match-hud{top:157px;bottom:auto;left:16px;transform:none;width:230px;padding:12px 16px}.telemetry small{font-size:8px}.telemetry strong{font-size:19px}#score{font-size:15px}.phase-line{font-size:9px}.pace-heading{font-size:9px}#jump{bottom:38px;width:80px;height:80px}#rules{padding:24px}dialog h2{font-size:38px}#help{display:none}}
@media(max-width:767px) and (max-height:740px){.landing{top:104px;max-height:calc(100dvh - 160px)}.landing h1{font-size:clamp(48px,min(22vw,15dvh),76px)}.intro br{display:none}.intro{margin-bottom:10px}}
@media(prefers-reduced-transparency:reduce){.panel.modal,#match-hud{background:#0b1420;backdrop-filter:none}dialog::backdrop{backdrop-filter:none}}