*{box-sizing:border-box;margin:0}:root{--bg:#0a1410;--glass:#080e0cb8;--accent:#ffe066;--red:#ff7a7e;--blue:#7ea6ff;--safe-t:env(safe-area-inset-top,0px);--safe-r:env(safe-area-inset-right,0px);--safe-b:env(safe-area-inset-bottom,0px);--safe-l:env(safe-area-inset-left,0px)}html,body{background:var(--bg);color:#fff;-webkit-tap-highlight-color:transparent;overscroll-behavior:none;height:100%;font-family:system-ui,-apple-system,sans-serif;overflow:hidden}[hidden]{display:none!important}#game canvas{touch-action:none;display:block}button{font:inherit;color:inherit;cursor:pointer;background:#ffffff1a;border:0;border-radius:10px;padding:8px 14px;transition:background-color .15s,transform .12s}button:hover{background:#ffffff29}button:active{transform:scale(.97)}button:disabled{opacity:.4;cursor:default;background:#ffffff1a;transform:none}button.primary{background:var(--accent);color:#1a1a1a;font-weight:700}button.primary:hover{background:#ffe88a}input{font:inherit;color:#fff;background:#ffffff1a;border:0;border-radius:10px;outline:2px solid #0000;padding:10px 14px;transition:outline-color .15s}input:focus{outline-color:var(--accent)}.muted{opacity:.65;font-size:14px}kbd{font:inherit;border:1px solid #ffffff4d;border-bottom-width:2px;border-radius:5px;padding:1px 6px;font-size:12px;display:inline-block}.chips{flex-wrap:wrap;gap:6px;display:flex}.chips button{padding:6px 12px;font-size:14px}.chips button.on{color:#111;background:#fff;font-weight:600}.segmented{background:#ffffff14;border-radius:12px;grid-auto-columns:1fr;grid-auto-flow:column;padding:3px;display:grid}.segmented button{background:0 0;font-size:14px}.segmented button.on{background:#ffffff2e;font-weight:600}#home{padding:calc(24px + var(--safe-t)) calc(16px + var(--safe-r)) calc(24px + var(--safe-b)) calc(16px + var(--safe-l));-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);background:radial-gradient(#0a141080,#0a1410eb);position:fixed;inset:0;overflow-y:auto}#home .panel{gap:22px;width:min(420px,100%);margin:auto;display:grid}#home h1{text-align:center;letter-spacing:-.04em;font-size:clamp(56px,12vw,104px);font-style:italic;font-weight:900;line-height:.9}#home h1 span{color:var(--accent)}#home h2{text-transform:uppercase;letter-spacing:.08em;opacity:.7;margin-bottom:10px;font-size:13px}#home section{gap:10px;display:grid}#home section h2{margin-bottom:0}.field{gap:6px;font-size:13px;display:grid}.field span{opacity:.7}.field input{font-size:17px}.field input.missing{outline-color:var(--red)}#invite{background:#ffe0661f;border-radius:14px;outline:1px solid #ffe06666;padding:14px}#room-list{gap:8px;padding:0;list-style:none;display:grid}#room-list button{text-align:left;justify-content:space-between;align-items:center;gap:12px;width:100%;padding:12px 14px;display:flex}#room-list .meta{opacity:.65;white-space:nowrap;font-size:13px}#join-code{grid-template-columns:1fr auto;gap:8px;display:grid}#join-code input{text-transform:uppercase;letter-spacing:.2em}#conn{text-align:center}#lang{justify-content:center}#lang button{font-size:13px}#hud{pointer-events:none;position:fixed;inset:0}#hud button,#hud .chips{pointer-events:auto}.glass{background:var(--glass);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:0 6px 24px #00000059}#scoreboard{top:calc(14px + var(--safe-t));justify-items:center;gap:6px;display:grid;position:absolute;left:50%;translate:-50%}#score{background:var(--glass);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);letter-spacing:.04em;border-radius:999px;align-items:center;gap:14px;padding:8px 20px;font-weight:700;display:flex;box-shadow:0 6px 24px #00000059}#score .team{font-size:13px}#score .red{color:var(--red)}#score .blue{color:var(--blue)}#score .num{font-variant-numeric:tabular-nums;text-align:center;min-width:1ch;font-size:26px}#score .sep{opacity:.4}#clock{background:var(--glass);font-variant-numeric:tabular-nums;border-radius:999px;padding:3px 12px;font-size:14px;font-weight:600}#clock.golden{background:var(--accent);color:#1a1a1a}#room-badge{top:calc(16px + var(--safe-t));left:calc(16px + var(--safe-l));background:var(--glass);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-radius:12px;align-items:center;gap:8px;padding:6px 6px 6px 12px;font-size:13px;display:flex;position:absolute}#room-code{letter-spacing:.14em}#room-badge button{padding:4px 10px;font-size:13px}#ping{opacity:.6;font-variant-numeric:tabular-nums}#actions{top:calc(16px + var(--safe-t));right:calc(16px + var(--safe-r));gap:8px;display:flex;position:absolute}#actions button{background:var(--glass);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);font-size:13px}#banner{text-align:center;opacity:0;position:absolute;top:38%;left:50%;translate:-50% -50%;scale:.6}#banner-title{letter-spacing:-.02em;white-space:nowrap;text-shadow:0 8px 40px #00000080;font-size:clamp(48px,11vw,140px);font-style:italic;font-weight:900;line-height:1}#banner-sub{text-shadow:0 2px 12px #0009;font-size:clamp(16px,2.4vw,24px);font-weight:600}#banner.show{animation:2.2s cubic-bezier(.2,.9,.3,1.2) forwards banner}#banner.stay{animation:.5s cubic-bezier(.2,.9,.3,1.2) forwards banner-in}@keyframes banner{0%{opacity:0;scale:.6}12%{opacity:1;scale:1.05}20%{scale:1}80%{opacity:1;scale:1}to{opacity:0;scale:1.1}}@keyframes banner-in{0%{opacity:0;scale:.6}70%{opacity:1;scale:1.05}to{opacity:1;scale:1}}#notice{top:calc(104px + var(--safe-t));text-shadow:0 2px 8px #000000b3;font-size:14px;font-weight:600;position:absolute;left:50%;translate:-50%}#host-panel,#wait-host{bottom:calc(52px + var(--safe-b));background:var(--glass);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);pointer-events:auto;border-radius:16px;justify-items:center;gap:10px;padding:14px 18px;display:grid;position:absolute;left:50%;translate:-50%}#wait-host{font-size:14px}#bot-controls{flex-wrap:wrap;justify-content:center;align-items:center;gap:10px;display:flex}#bot-controls .label{letter-spacing:.08em;opacity:.7;font-size:12px;font-weight:700}.stepper{background:#ffffff14;border-radius:10px;align-items:center;gap:2px;padding:2px;display:flex}.stepper button{width:30px;padding:4px 0;font-weight:700}.stepper span{text-align:center;font-variant-numeric:tabular-nums;min-width:2ch;font-weight:700}.stepper.red span{color:var(--red)}.stepper.blue span{color:var(--blue)}#start-btn{padding:10px 22px;font-size:16px}#help{bottom:calc(16px + var(--safe-b));opacity:.75;white-space:nowrap;font-size:13px;position:absolute;left:50%;translate:-50%}#summary{padding:calc(16px + var(--safe-t)) calc(16px + var(--safe-r)) 0 calc(16px + var(--safe-l));-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);z-index:5;background:#060c099e;place-items:center;animation:.4s ease-out fade-in;display:grid;position:fixed;inset:0;overflow-y:auto}@keyframes fade-in{0%{opacity:0}}#summary .card{width:min(560px,100%);margin-bottom:calc(16px + var(--safe-b));background:#0c1611eb;border-radius:22px;outline:1px solid #ffffff14;gap:18px;padding:24px;animation:.5s cubic-bezier(.2,.9,.3,1.15) card-in;display:grid;box-shadow:0 20px 60px #00000080}@keyframes card-in{0%{opacity:0;translate:0 24px;scale:.96}}#summary .eyebrow{text-align:center;letter-spacing:.12em;text-transform:uppercase;opacity:.6;font-size:12px;font-weight:700}#sum-title{text-align:center;letter-spacing:-.02em;margin-top:-10px;font-size:clamp(30px,6vw,44px);font-style:italic;font-weight:900}.sum-score{justify-content:center;align-items:center;gap:16px;font-weight:700;display:flex}.sum-score strong{font-variant-numeric:tabular-nums;font-size:48px;line-height:1}.sum-score .team{letter-spacing:.06em;font-size:13px}.sum-score .red{color:var(--red)}.sum-score .blue{color:var(--blue)}.sum-score .sep{opacity:.4;font-size:32px}.possession{gap:6px;display:grid}.possession .bar{background:#4b74d6;border-radius:99px;height:8px;overflow:hidden}.possession .bar div{background:#e5484d;height:100%;transition:width .8s cubic-bezier(.2,.9,.3,1)}.possession .labels{opacity:.75;justify-content:space-between;font-size:12px;display:flex}.sum-goals{grid-template-columns:1fr 1fr;gap:16px;font-size:14px;display:grid}.sum-goals ul{align-content:start;gap:6px;padding:0;list-style:none;display:grid}.sum-goals ul:last-child{text-align:right}.sum-goals li{line-height:1.3}.sum-goals .scorer{font-weight:600}.sum-goals .time{opacity:.55;font-variant-numeric:tabular-nums;font-size:12px;display:block}.sum-goals .own{opacity:.6;font-size:12px}.sum-goals:has(li){padding-block:2px}.sum-goals:not(:has(li)){display:none}#sum-players{border-collapse:collapse;width:100%;font-size:14px}#sum-players th{letter-spacing:.06em;text-transform:uppercase;text-align:right;opacity:.55;padding:0 6px 6px;font-size:11px;font-weight:600}#sum-players th:first-child{text-align:left}#sum-players td{text-align:right;font-variant-numeric:tabular-nums;border-top:1px solid #ffffff0f;padding:6px}#sum-players td:first-child{text-align:left}#sum-players .dot{border-radius:50%;width:9px;height:9px;margin-right:8px;display:inline-block}#sum-players .dot.red{background:#e5484d}#sum-players .dot.blue{background:#4b74d6}#sum-players .tag{opacity:.55;margin-left:6px;font-size:11px}#sum-players .mvp{background:var(--accent);color:#1a1a1a;border-radius:99px;margin-left:6px;padding:1px 7px;font-size:11px;font-weight:800}#sum-players tr.me td{background:#ffe06612}.sum-actions{background:linear-gradient(#0c161100,#0c1611 14px);border-radius:0 0 22px 22px;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px;margin:-12px -24px -24px;padding:14px 24px 20px;display:flex;position:sticky;bottom:0}.sum-actions button{padding:10px 18px}.sum-actions p{text-align:center;flex-basis:100%}@media (height<=500px){#summary{place-items:start center}#summary .card{gap:12px;padding:16px 20px}.sum-actions{margin:-8px -20px -16px;padding:10px 20px 14px}.sum-score strong{font-size:36px}}#touch{pointer-events:none;touch-action:none;-webkit-user-select:none;user-select:none;position:fixed;inset:0}#stick-zone{pointer-events:auto;width:55%;position:absolute;top:25%;bottom:0;left:0}#stick-base{opacity:.55;background:#ffffff14;border-radius:50%;outline:2px solid #ffffff40;place-items:center;width:120px;height:120px;transition:opacity .15s;display:grid;position:absolute;top:-60px;left:-60px}#stick-base.active{opacity:1}#stick-knob{background:#ffffffd9;border-radius:50%;width:54px;height:54px;box-shadow:0 4px 16px #0006}#kick-btn{right:calc(28px + var(--safe-r));bottom:calc(32px + var(--safe-b));color:#1a1a1a;letter-spacing:.06em;pointer-events:auto;background:#ffe066d9;border-radius:50%;place-items:center;width:104px;height:104px;font-size:14px;font-weight:900;transition:scale 80ms,background-color 80ms;display:grid;position:absolute;box-shadow:0 6px 24px #0006,inset 0 -4px #00000026}#kick-btn.pressed{background:#fff;scale:.92}body.touch #help{display:none}body.touch #host-panel,body.touch #wait-host{bottom:calc(14px + var(--safe-b))}body.touch #notice{top:calc(96px + var(--safe-t))}@media (height<=500px){#score{gap:10px;padding:5px 14px}#score .num{font-size:20px}#room-badge,#actions{top:calc(10px + var(--safe-t))}#room-badge{left:calc(10px + var(--safe-l))}#actions{right:calc(10px + var(--safe-r))}#scoreboard{top:calc(8px + var(--safe-t))}#notice{top:calc(78px + var(--safe-t))}}#rotate{background:var(--bg);z-index:10;place-content:center;justify-items:center;gap:20px;font-weight:600;display:none;position:fixed;inset:0}#rotate .phone{border:4px solid #fff;border-radius:10px;width:46px;height:80px;animation:1.8s ease-in-out infinite rotate-phone}@keyframes rotate-phone{0%,20%{rotate:0deg}60%,to{rotate:-90deg}}body.touch.playing #rotate{display:grid}@media (orientation:landscape){body.touch.playing #rotate{display:none}}#toast{bottom:calc(24px + var(--safe-b));text-align:center;opacity:0;pointer-events:none;z-index:20;background:#2a1517;border-radius:12px;outline:1px solid #ff7a7e80;max-width:min(90vw,420px);padding:10px 16px;font-size:14px;transition:opacity .2s,translate .2s;position:fixed;left:50%;translate:-50% 20px}#toast.show{opacity:1;translate:-50%}#toast.info{background:#14251c;outline-color:#39d98a80}