:root{--ink:#f4f7ec;--muted:#8ba0a6;--lime:#c9ff38;--cyan:#20c7d8;--red:#ff4d57;--panel:#092433;--line:rgba(255,255,255,.12)}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:#061923;color:var(--ink);font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,sans-serif}body{overflow-x:hidden;background:radial-gradient(circle at 80% 0,#103e4c 0,transparent 34rem),linear-gradient(160deg,#071d2b,#041117 70%)}
body:before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.18;background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);background-size:36px 36px}
.shell{width:min(1180px,calc(100% - 32px));margin:auto;position:relative}.topbar{height:86px;display:flex;align-items:center;border-bottom:1px solid var(--line);gap:24px}.brand{display:flex;align-items:center;gap:12px;color:white;text-decoration:none;font-weight:950;letter-spacing:-1px;font-style:italic;font-size:21px}.brand span span{color:var(--lime)}.brand-ball{width:31px;height:31px;border:6px solid var(--lime);border-radius:50%;position:relative;box-shadow:0 0 20px rgba(201,255,56,.25)}.brand-ball:after{content:"";position:absolute;width:7px;height:7px;background:var(--lime);border-radius:50%;left:6px;top:6px}.status{margin-left:auto;color:#9eb1b6;font-size:11px;font-weight:800;letter-spacing:2px}.status i{display:inline-block;width:7px;height:7px;background:var(--lime);border-radius:50%;margin-right:8px;box-shadow:0 0 10px var(--lime)}.icon-button,.pause-button{border:1px solid var(--line);background:#0a2634;color:white;border-radius:50%;width:38px;height:38px;font-weight:900;cursor:pointer}.hero{display:flex;justify-content:center;align-items:center;gap:16px;flex-wrap:wrap;padding:18px 0}.eyebrow{font-size:10px;letter-spacing:3px;font-weight:900;color:var(--lime);margin:0 0 12px}.hero h1{margin:0;font-size:clamp(38px,6vw,72px);line-height:.9;text-transform:uppercase;letter-spacing:-4px;font-weight:950}.hero h1 em{font-style:italic;color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.55)}.score-card{height:72px;width:min(520px,100%);background:rgba(8,36,50,.8);border:1px solid var(--line);border-radius:18px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 24px;box-shadow:0 15px 60px rgba(0,0,0,.25);backdrop-filter:blur(12px)}.score-card>div:not(.clock){display:flex;align-items:center;gap:10px}.score-card>div:last-child{justify-content:flex-end}.score-card strong{font-size:34px}.score-card small{font-size:10px;letter-spacing:1.8px;color:#b3c1c4;font-weight:900}.team-dot{width:8px;height:8px;border-radius:50%}.blue{background:var(--cyan);box-shadow:0 0 10px var(--cyan)}.red{background:var(--red);box-shadow:0 0 10px var(--red)}.clock{font-variant-numeric:tabular-nums;border-left:1px solid var(--line);border-right:1px solid var(--line);padding:12px 18px;font-weight:900;letter-spacing:2px}
.game-frame{position:relative;border-radius:22px;overflow:hidden;border:1px solid rgba(255,255,255,.17);box-shadow:0 35px 90px rgba(0,0,0,.42);background:#123d40;isolation:isolate}.game-frame:after{content:"";pointer-events:none;position:absolute;inset:0;box-shadow:inset 0 0 55px rgba(0,0,0,.38)}canvas{width:100%;height:auto;display:block;aspect-ratio:16/9}.overlay{position:absolute;z-index:4;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;background:rgba(3,18,25,.64);backdrop-filter:blur(4px);transition:.25s}.overlay.hidden{opacity:0;visibility:hidden;pointer-events:none}.overlay h2{font-size:clamp(36px,6vw,76px);line-height:.9;text-transform:uppercase;letter-spacing:-4px;margin:14px 0 10px;font-style:italic}.overlay p{color:#bac9cc;margin:0 0 28px}.badge{font-size:10px;letter-spacing:3px;color:var(--lime);font-weight:950}.primary{border:0;padding:16px 22px;background:var(--lime);color:#0a1719;font-weight:950;letter-spacing:1px;clip-path:polygon(0 0,94% 0,100% 28%,100% 100%,6% 100%,0 72%);cursor:pointer;transition:.18s}.primary:hover{transform:translateY(-2px);filter:brightness(1.08);box-shadow:0 12px 40px rgba(201,255,56,.2)}.primary span{margin-left:22px}.controls-summary{display:flex;gap:24px;margin-top:27px;color:#9fb0b4;font-size:11px}.controls-summary kbd{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);border-radius:4px;padding:4px 6px;color:white}.pause-button{position:absolute;z-index:3;top:16px;right:16px;background:rgba(5,23,30,.62)}.goal-flash{position:absolute;z-index:5;inset:0;display:grid;place-items:center;font-size:clamp(70px,14vw,170px);font-weight:1000;font-style:italic;color:var(--lime);text-shadow:0 8px 0 #0b5960;letter-spacing:-8px;opacity:0;transform:scale(.5) rotate(-5deg);pointer-events:none}.goal-flash.show{animation:goal .9s ease-out}@keyframes goal{0%{opacity:0;transform:scale(.45) rotate(-7deg)}24%,64%{opacity:1;transform:scale(1) rotate(-3deg)}100%{opacity:0;transform:scale(1.18) rotate(-1deg)}}footer{display:flex;justify-content:space-between;color:#799096;padding:20px 2px 45px;font-size:11px;letter-spacing:.5px}footer strong{color:var(--lime)}.copyright{letter-spacing:2px}.mobile-controls{display:none}
@media(max-width:720px){.shell{width:min(100% - 18px,1180px)}.topbar{height:66px}.status{display:none}.hero{padding:12px 0}.score-card{min-width:0;width:100%;height:62px}.game-frame{border-radius:14px}.overlay h2{font-size:35px;letter-spacing:-2px}.overlay p{font-size:12px;margin-bottom:14px}.controls-summary{display:none}.primary{padding:12px 18px}.mobile-controls{display:flex;justify-content:space-between;align-items:center;width:min(100% - 30px,600px);margin:18px auto 22px}.dpad{display:grid;grid-template:repeat(3,42px)/repeat(3,42px);gap:4px}.dpad button,.kick{border:1px solid rgba(255,255,255,.17);background:#0c2a38;color:white;border-radius:10px;touch-action:none;font-weight:900}.dpad button:nth-child(1){grid-area:1/2}.dpad button:nth-child(2){grid-area:2/1}.dpad button:nth-child(3){grid-area:2/2}.dpad button:nth-child(4){grid-area:2/3}.kick{width:82px;height:82px;border-radius:50%;background:var(--lime);color:#102026;border:6px solid rgba(201,255,56,.15);font-style:italic}.dpad button.active,.kick.active{transform:scale(.92);filter:brightness(1.3)}footer{padding-bottom:12px}.copyright{display:none}}
@media(max-height:700px) and (min-width:721px){.topbar{height:62px}.hero{padding:10px 0}.score-card{height:58px}.game-frame{max-width:950px;margin:auto}footer{padding:14px 0}}
.field{width:min(320px,82%);height:48px;margin:7px 0;padding:0 16px;border-radius:12px;border:1px solid var(--line);background:rgba(4,22,30,.72);color:var(--ink);font-size:15px;font-weight:700;text-align:center;letter-spacing:.5px;outline:none;font-family:inherit}.field::placeholder{color:#6d838a;font-weight:700}.field:focus{border-color:var(--lime);box-shadow:0 0 0 3px rgba(201,255,56,.15)}.field.code{width:126px;height:48px;text-transform:uppercase;letter-spacing:7px;font-size:21px;font-weight:900;padding-left:7px}.join-row{display:flex;gap:10px;align-items:center;margin-top:5px}.hint{margin:12px 0 0;font-size:12px;color:#bac9cc;min-height:16px}.hint.error{color:var(--red);font-weight:700}.primary.ghost{background:transparent;color:var(--ink);border:1px solid var(--line)}.primary.ghost:hover{border-color:var(--lime);box-shadow:none;filter:none}.result-actions{display:flex;gap:12px;align-items:center;flex-wrap:wrap;justify-content:center}#waitingOverlay h2{letter-spacing:10px;padding-left:10px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-style:normal}.status i{transition:background .2s}@media(max-width:720px){.field{width:min(280px,88%)}.result-actions{flex-direction:column;gap:10px}}
.room{margin-top:18px;background:rgba(8,36,50,.72);border:1px solid var(--line);border-radius:18px;padding:16px}.room.hidden{display:none}.room-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:14px;flex-wrap:wrap}.room-title{display:flex;align-items:center;gap:10px;font-weight:900;font-size:14px}.room-code{font-family:ui-monospace,Menlo,monospace;letter-spacing:4px;background:rgba(255,255,255,.08);border:1px solid var(--line);padding:4px 9px;border-radius:8px}.room-status{font-size:12px;color:var(--lime);font-weight:800}.room-body{display:grid;grid-template-columns:1.05fr .95fr;gap:16px}.teams{display:grid;grid-template-columns:1fr 1fr;gap:10px}.team-block{background:rgba(3,20,27,.6);border:1px solid var(--line);border-radius:12px;padding:10px}.team-block.spec{grid-column:1/-1}.team-block h4{display:flex;align-items:center;gap:8px;margin:0 0 9px;font-size:11px;letter-spacing:1.5px}.team-block h4 span:last-child{color:var(--muted);margin-left:auto}.team-block.blue h4{color:var(--cyan)}.team-block.red h4{color:var(--red)}.player-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:5px;min-height:24px}.player-row{display:flex;align-items:center;gap:7px;background:rgba(255,255,255,.04);border-radius:8px;padding:5px 8px;font-size:13px}.player-row.me{outline:1px solid rgba(201,255,56,.45)}.p-name{font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.p-admin{color:var(--lime)}.p-me{font-size:9px;letter-spacing:1px;color:#0a1719;background:var(--lime);border-radius:5px;padding:1px 5px;font-weight:900}.p-actions{margin-left:auto;display:flex;gap:3px}.mini{border:1px solid var(--line);background:#0a2634;color:#d7ecf0;width:24px;height:24px;border-radius:6px;font-size:11px;font-weight:900;cursor:pointer;padding:0}.mini.active{background:var(--lime);color:#0a1719;border-color:var(--lime)}.mini.danger{color:var(--red)}.mini:hover{filter:brightness(1.3)}.room-side{display:flex;flex-direction:column;gap:12px}.admin-panel{background:rgba(3,20,27,.6);border:1px solid var(--line);border-radius:12px;padding:10px;display:flex;flex-direction:column;gap:8px}.admin-panel.hidden{display:none}.admin-row{display:flex;gap:8px;flex-wrap:wrap}.btn{border:1px solid var(--line);background:#0a2634;color:var(--ink);border-radius:8px;padding:8px 12px;font-weight:800;font-size:12px;cursor:pointer}.btn.lime{background:var(--lime);color:#0a1719;border-color:var(--lime)}.btn.ghost{background:transparent}.btn:disabled{opacity:.4;cursor:not-allowed}.setting-row{display:flex;gap:8px;align-items:flex-end;flex-wrap:wrap}.setting-row label{display:flex;flex-direction:column;gap:4px;font-size:10px;letter-spacing:1px;color:var(--muted);font-weight:800}.setting-row label.grow{flex:1}.setting-row input{background:rgba(4,22,30,.72);border:1px solid var(--line);border-radius:8px;color:var(--ink);padding:7px 9px;font-size:13px;width:100%;min-width:70px;font-family:inherit}.chat{background:rgba(3,20,27,.6);border:1px solid var(--line);border-radius:12px;padding:10px;display:flex;flex-direction:column;gap:8px;min-height:190px}.chat-log{flex:1;overflow-y:auto;max-height:230px;display:flex;flex-direction:column;gap:4px;font-size:13px}.chat-msg .who{color:var(--lime);font-weight:800;margin-right:6px}.chat-sys{color:var(--muted);font-style:italic;font-size:12px}.chat-form{display:flex;gap:8px}.chat-form input{flex:1;background:rgba(4,22,30,.72);border:1px solid var(--line);border-radius:8px;color:var(--ink);padding:9px 11px;font-size:13px;font-family:inherit}@media(max-width:820px){.room-body{grid-template-columns:1fr}.teams{grid-template-columns:1fr 1fr}}
.room-open{display:flex;align-items:center;gap:8px;height:40px;padding:0 14px;border-radius:10px;border:1px solid var(--line);background:#0a2634;color:var(--ink);font-weight:900;cursor:pointer;font-family:inherit}.room-open:hover{border-color:var(--lime)}.room-open span{font-size:10px;letter-spacing:2px;color:var(--lime);font-weight:900}.room-open b{font-family:ui-monospace,Menlo,monospace;font-size:15px;letter-spacing:2px}.room-open.hidden{display:none}.room-chat{margin-top:18px}.room-chat.hidden{display:none}.room-chat .chat{height:110px;min-height:110px;max-height:110px}.room-chat .chat-log{max-height:none;min-height:0}.modal{position:fixed;inset:0;z-index:30;display:grid;place-items:center;padding:16px}.modal.hidden{display:none}.modal-backdrop{position:absolute;inset:0;background:rgba(2,12,18,.66);backdrop-filter:blur(4px)}.modal-card{position:relative;z-index:1;width:min(820px,100%);max-height:88vh;overflow-y:auto;background:linear-gradient(160deg,#0a2b39,#071e28);border:1px solid var(--line);border-radius:18px;box-shadow:0 30px 90px rgba(0,0,0,.55);padding:18px}.modal-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:16px;flex-wrap:wrap}.modal-head-right{display:flex;align-items:center;gap:12px}.modal-body{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px}.modal-body .admin-panel{grid-column:1/-1}.modal-body .team-block.spec{grid-column:auto}@media(max-width:720px){.modal-body{grid-template-columns:1fr}.modal-body .team-block.spec{grid-column:auto}.room-open{height:34px;padding:0 10px}.room-open b{font-size:13px}}
.lobby{width:min(380px,92%);display:flex;flex-direction:column;gap:14px}.lobby .badge{text-align:center}.lobby-form{display:flex;flex-direction:column;gap:10px;padding:20px;border-radius:16px;background:rgba(6,28,38,.55);border:1px solid var(--line);box-shadow:0 20px 60px rgba(0,0,0,.3)}.lobby .lbl{text-align:left;font-size:10px;letter-spacing:2px;color:var(--muted);font-weight:900;margin:2px 0 -4px}.lobby .field{width:100%;margin:0}.lobby-form .primary{width:100%;text-align:center}.lobby-sep{display:flex;align-items:center;gap:12px;color:var(--muted);font-size:10px;letter-spacing:3px;font-weight:900;margin:4px 0}.lobby-sep:before,.lobby-sep:after{content:"";flex:1;height:1px;background:var(--line)}.lobby .join-row{display:flex;flex-direction:column;gap:10px;margin:0}.lobby .join-row .field.code{width:100%;flex:none;margin:0}.lobby .join-row .primary{width:100%}.lobby .hint{margin:0;text-align:center}.lobby .controls-summary{margin-top:2px}
.joystick{position:relative;width:132px;height:132px;border-radius:50%;border:2px solid rgba(255,255,255,.18);background:radial-gradient(circle at 50% 42%,rgba(255,255,255,.07),rgba(6,28,38,.72));touch-action:none;box-shadow:inset 0 0 30px rgba(0,0,0,.35);-webkit-user-select:none;user-select:none}.joystick:before{content:"";position:absolute;inset:16px;border-radius:50%;border:1px dashed rgba(255,255,255,.12)}.joy-knob{position:absolute;left:50%;top:50%;width:58px;height:58px;margin:-29px 0 0 -29px;border-radius:50%;background:linear-gradient(160deg,#2fd8ea,#0d7f8c);box-shadow:0 6px 18px rgba(0,0,0,.45),0 0 0 3px rgba(255,255,255,.12);will-change:transform;pointer-events:none}
#startOverlay{position:fixed;inset:0;z-index:25;padding:24px;overflow-y:auto}
.topbar-right{margin-left:auto;display:flex;align-items:center;gap:12px}.perf{font-family:ui-monospace,Menlo,monospace;font-size:11px;color:var(--muted);white-space:nowrap}
html,body{touch-action:manipulation;-webkit-text-size-adjust:100%;text-size-adjust:100%}
.topbar{gap:16px}.brand{min-width:0}.brand>span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.topbar-right{flex:0 0 auto;gap:10px}
@media(max-width:720px){.topbar{height:56px;gap:10px}.brand{font-size:16px;gap:8px}.brand-ball{width:24px;height:24px;border-width:5px}.topbar-right{gap:8px}.perf{font-size:9px;letter-spacing:0}.icon-button{width:32px;height:32px;font-size:14px}.room-open{height:30px;padding:0 8px;gap:6px}.room-open span{font-size:9px;letter-spacing:1px}.room-open b{font-size:12px;letter-spacing:1px}}
@media(max-width:420px){.perf{display:none}}
html{height:100%;background:radial-gradient(circle at 80% 0,#103e4c 0,transparent 34rem),linear-gradient(160deg,#071d2b,#041117 70%)}body{min-height:100vh;min-height:100dvh}
.modal-foot{display:flex;justify-content:flex-end;margin-top:14px}.btn.danger{color:var(--red);border-color:rgba(255,77,87,.5)}.btn.danger:hover{background:rgba(255,77,87,.14)}
#confirmModal{z-index:40}.confirm-card{width:min(400px,100%);text-align:center}.confirm-card h3{margin:2px 0 10px;font-size:20px;font-style:normal;letter-spacing:-.3px;text-transform:none}.confirm-card p{margin:0;color:var(--muted);font-size:13px}.confirm-card .modal-foot{justify-content:center;gap:10px;margin-top:18px}