:root{--ink: #0b0e12;--panel: rgba(11, 14, 19, .98);--raise: rgba(30, 37, 46, .9);--line: rgba(190, 206, 218, .2);--bone: #e7eae5;--dim: #8a97a2;--ghost: #9d8cff;--def: #ff9a3c;--go: #7fe0c4;--warn: #ff5a4a;--face: "Bahnschrift", "Segoe UI Variable Display", "Segoe UI", system-ui, sans-serif}#ui{position:fixed;inset:0;pointer-events:none;font-family:var(--face);color:var(--bone);font-size:15px;z-index:10}#ui *{box-sizing:border-box}#ui .screen{position:absolute;z-index:2;inset:0;display:none;align-items:center;justify-content:center;pointer-events:auto;background:#06080b9e}#ui .screen.open{display:flex}#ui .screen.solid{background:radial-gradient(ellipse at 50% 30%,#172029,#0a0d11 70%)}#ui .card{position:relative;background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--bone);padding:22px 26px;max-height:calc(100vh - 32px);overflow:auto;clip-path:polygon(0 0,calc(100% - 18px) 0,100% 18px,100% 100%,0 100%)}#ui h1,#ui h2,#ui h3{margin:0;font-weight:700;letter-spacing:.04em}#ui h2{font-size:26px}#ui h3{font-size:15px;letter-spacing:.08em;color:var(--dim);font-weight:600}#ui p{margin:0}#ui .dim{color:var(--dim)}#ui button{font:700 15px/1 var(--face);letter-spacing:.06em;padding:11px 18px;border:1px solid var(--line);background:var(--raise);color:var(--bone);cursor:pointer;clip-path:polygon(0 0,calc(100% - 8px) 0,100% 8px,100% 100%,0 100%)}#ui button:hover{background:#3c4a5ae6}#ui button:focus-visible,#ui input:focus-visible,#ui select:focus-visible{outline:2px solid var(--go);outline-offset:2px}#ui button.primary{background:var(--bone);color:var(--ink);border-color:var(--bone)}#ui button.primary:hover{background:#fff}#ui button.go{background:var(--go);color:#06231c;border-color:var(--go)}#ui button.go.on{background:transparent;color:var(--go)}#ui button.danger{color:var(--warn)}#ui button[disabled]{opacity:.4;cursor:default}#ui input[type=text],#ui select{font:600 16px var(--face);padding:10px 12px;border:1px solid var(--line);background:#10151b;color:var(--bone);width:100%}#ui label.f{display:grid;gap:6px;font-size:13px;color:var(--dim)}#ui .row{display:flex;gap:10px;align-items:center}#ui .stack{display:grid;gap:12px}#ui .sp{flex:1}#menu-screen .wrap{display:grid;grid-template-columns:minmax(320px,400px) minmax(240px,300px);gap:20px;align-items:start}#menu-screen .brand{grid-column:1 / -1;position:relative;padding:4px 0 6px}#menu-screen .brand h1{font-size:clamp(44px,8vw,84px);letter-spacing:.22em;line-height:1;font-weight:800}#menu-screen .brand p{margin-top:8px;color:var(--dim);font-size:17px;letter-spacing:.03em}#menu-screen .rings{position:absolute;left:50%;top:50%;width:0;height:0;pointer-events:none}#menu-screen .rings i{position:absolute;border:1px solid var(--ghost);border-radius:50%;opacity:0;width:180px;height:180px;margin:-90px;animation:ring 4.5s ease-out 1 .2s both}#menu-screen .rings i:nth-child(2){animation-delay:.7s}#menu-screen .rings i:nth-child(3){animation-delay:1.2s}@keyframes ring{0%{transform:scale(.2);opacity:.7}to{transform:scale(5);opacity:0}}#menu-screen .or{text-align:center;color:var(--dim);font-size:13px}#howto h3{margin-bottom:10px}#howto dl{margin:0;display:grid;gap:12px}#howto dt{font-weight:700}#howto dt.g{color:var(--ghost)}#howto dt.d{color:var(--def)}#howto dd{margin:2px 0 0;color:#c3cbd1;line-height:1.4}#howto button{margin-top:14px}#loading-screen .bar{width:320px;height:4px;background:#ffffff1f;margin-top:18px;overflow:hidden}#loading-screen .bar i{display:block;width:40%;height:100%;background:var(--bone);animation:slide 1.1s ease-in-out infinite}@keyframes slide{0%{transform:translate(-100%)}to{transform:translate(250%)}}#error-screen .card{max-width:460px;border-left-color:var(--warn)}#error-screen p{margin:10px 0 18px;line-height:1.45;color:#d1d7dc}#lobby-screen .card{width:min(760px,calc(100vw - 32px))}#lobby-screen .head{display:flex;flex-wrap:wrap;gap:10px 18px;align-items:baseline;margin-bottom:14px}#lobby-screen .code{font:800 28px var(--face);letter-spacing:.12em}#lobby-screen .teams{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:14px 0}#lobby-screen .team{border-top:3px solid currentColor;background:#ffffff08;padding:10px 12px 12px;min-height:130px}#lobby-screen .team.ghosts{color:var(--ghost)}#lobby-screen .team.defenders{color:var(--def)}#lobby-screen .team h3{color:inherit;margin-bottom:8px}#lobby-screen .p{display:flex;align-items:center;gap:8px;padding:5px 0;color:var(--bone);border-bottom:1px solid rgba(255,255,255,.06)}#lobby-screen .p.me{font-weight:800}#lobby-screen .p .st{margin-left:auto;font-size:13px;color:var(--dim)}#lobby-screen .p .st.ready{color:var(--go)}#lobby-screen .p .host{font-size:11px;padding:1px 6px;border:1px solid var(--line);color:var(--dim)}#lobby-screen .empty{color:var(--dim);font-style:italic;padding:6px 0}#lobby-screen .msg{min-height:20px;color:var(--dim);font-size:14px}#lobby-strip{position:absolute;left:50%;top:112px;transform:translate(-50%);padding:6px 14px;background:#090c10b8;border-bottom:2px solid var(--go);font-size:14px;display:none;white-space:nowrap}#lobby-strip b{color:var(--go)}#pause-screen .card{width:320px}#pause-screen .stack button{width:100%;text-align:left}#settings-screen .card{width:min(900px,calc(100vw - 32px));padding:18px 24px}#controls-screen .card{width:min(640px,calc(100vw - 32px))}#settings-screen .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px 28px;margin:8px 0 14px}#settings-screen .group{grid-column:1 / -1;margin-top:2px;padding-top:8px;border-top:1px solid var(--line)}#settings-screen .ctl{display:grid;grid-template-columns:1fr auto;gap:4px 10px;align-items:center;font-size:14px}#settings-screen .ctl output{color:var(--dim);font-variant-numeric:tabular-nums;min-width:44px;text-align:right}#settings-screen .ctl input[type=range]{grid-column:1 / -1;width:100%;accent-color:var(--bone)}#settings-screen .ctl input[type=color]{width:44px;height:28px;padding:0;border:1px solid var(--line);background:none}#settings-screen .ctl input[type=checkbox]{width:20px;height:20px;accent-color:var(--go)}#controls-screen dl{display:grid;grid-template-columns:auto 1fr;gap:8px 22px;margin:14px 0 18px}#controls-screen dt{font-weight:700}#controls-screen dd{margin:0;color:#c3cbd1}kbd{display:inline-block;padding:1px 7px;margin-right:4px;border:1px solid var(--line);border-bottom-width:2px;background:var(--raise);font:700 13px var(--face)}#result-screen .card{width:min(820px,calc(100vw - 32px));border-left-width:4px}#result-screen .top{display:flex;align-items:baseline;gap:18px;flex-wrap:wrap}#result-screen .verdict{font:800 44px/1 var(--face);letter-spacing:.06em}#result-screen .verdict.win{color:var(--go)}#result-screen .verdict.lose{color:var(--warn)}#result-screen .score{font:700 30px var(--face);font-variant-numeric:tabular-nums}#result-screen .score .g{color:var(--ghost)}#result-screen .score .d{color:var(--def)}#result-screen .mvp{margin:10px 0 12px;color:#d8dcd6}#result-screen .mvp b{color:#ffd36b}#result-screen table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}#result-screen th{text-align:right;font-weight:600;font-size:12px;color:var(--dim);padding:6px 8px}#result-screen th:first-child,#result-screen td:first-child{text-align:left}#result-screen td{text-align:right;padding:5px 8px;border-bottom:1px solid rgba(255,255,255,.06)}#result-screen tr.teamhdr td{text-align:left;font-weight:800;letter-spacing:.08em;border-bottom:2px solid currentColor;padding-top:12px}#result-screen tr.teamhdr.ghosts td{color:var(--ghost)}#result-screen tr.teamhdr.defenders td{color:var(--def)}#result-screen tr.me td{background:#ffffff21;font-weight:800}#result-screen .star{color:#ffd36b}#result-screen .foot{margin-top:16px}#chat-log{position:absolute;z-index:1;left:16px;bottom:200px;width:min(460px,44vw);display:grid;gap:2px;font-size:15px;text-shadow:0 1px 2px #000;pointer-events:none}#chat-log div{padding:2px 8px;background:#080a0d80;border-left:2px solid var(--dim);animation:chatfade 12s forwards;word-break:break-word}#chat-log div.team{border-left-color:var(--go)}#chat-log div.dead{opacity:.85;font-style:italic}#chat-log div.note{border-left-color:var(--warn);color:#ffd0cb}#chat-log.typing div{animation:none}#chat-log b{font-weight:800}@keyframes chatfade{0%,80%{opacity:1}to{opacity:0}}#chat-form{position:absolute;left:16px;bottom:160px;width:min(460px,44vw);display:none;pointer-events:auto}#chat-form.open{display:flex;gap:8px;align-items:center}#chat-form span{font-weight:800;padding:9px 10px;background:var(--raise);min-width:56px;text-align:center}#chat-form span.team{color:var(--go)}#chat-form input{flex:1;font:600 15px var(--face);padding:9px 10px;border:1px solid var(--line);background:#080a0deb;color:var(--bone)}#sb-radar{position:absolute;left:14px;top:14px;border-radius:50%;border:1px solid var(--line);box-shadow:0 0 0 3px #080b0f8c}#click-hint{position:absolute;left:50%;top:62%;transform:translate(-50%);padding:10px 22px;background:#090c10cc;border-bottom:2px solid var(--bone);font-weight:700;letter-spacing:.08em;display:none;pointer-events:auto;cursor:pointer}#toast{position:absolute;left:50%;bottom:40px;transform:translate(-50%);padding:8px 16px;background:var(--raise);border-bottom:2px solid var(--go);display:none}body.no-stats #hud,body.no-stats #sb-info .ping{display:none}@media(max-width:760px){#menu-screen .wrap,#lobby-screen .teams,#settings-screen .grid{grid-template-columns:1fr}}@media(prefers-reduced-motion:reduce){#menu-screen .rings i,#loading-screen .bar i{animation:none}}