:root { --ink:#11140f; --acid:#d7ff3f; --paper:#e7e5dc; --muted:#899082; --amber:#ff6247; --cyan:#4dd9ff; }
* { box-sizing:border-box; }
html,body { margin:0; min-height:100%; background:var(--ink); color:var(--paper); }
body { font-family:Arial, Helvetica, sans-serif; overflow-x:hidden; }
button,input { font:inherit; }
button { color:inherit; }
.grain { position:fixed; inset:0; z-index:0; opacity:.04; pointer-events:none; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E"); }
.shell { min-height:100vh; position:relative; overflow:hidden; padding:30px 48px; background:radial-gradient(circle at 70% 35%,#293225 0,transparent 34%),linear-gradient(115deg,#10130f 0%,#171d15 55%,#0c0f0c 100%); }
.shell:before { content:""; position:absolute; inset:0; opacity:.2; background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px); background-size:72px 72px; mask-image:linear-gradient(to right,transparent,#000); }
.nav { position:relative; z-index:2; display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid #ffffff2a; padding-bottom:22px; font-size:12px; letter-spacing:.16em; }
.brand { display:flex; gap:12px; align-items:center; font-weight:900; }
.brand-mark { width:31px; height:31px; display:grid; place-items:center; border:1px solid var(--acid); color:var(--acid); transform:rotate(-4deg); }
.network { color:#a8ad9e; }
.network i,.waiting i,.connection-dot i { display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--acid); box-shadow:0 0 12px var(--acid); margin-right:5px; }
.hero { position:relative; z-index:1; width:min(700px,65vw); padding:7vh 0 10vh 4vw; }
.eyebrow { color:var(--acid); font:700 11px ui-monospace,monospace; letter-spacing:.23em; margin-bottom:24px; }
h1 { font-size:clamp(64px,8.2vw,126px); line-height:.76; letter-spacing:-.075em; margin:0; font-weight:950; font-stretch:condensed; }
h1 span { color:transparent; -webkit-text-stroke:1.5px var(--paper); }
.premise { max-width:520px; margin:30px 0 20px; color:#a9ad9f; font-size:15px; line-height:1.65; }
.name-field { display:block; margin:0 0 16px; width:240px; }
.name-field span { display:block; color:#656d61; font:700 9px ui-monospace,monospace; letter-spacing:.14em; margin-bottom:7px; }
.name-field input { width:100%; height:38px; border:0; border-bottom:1px solid #ffffff3a; background:transparent; color:var(--paper); outline:none; font:700 12px ui-monospace,monospace; letter-spacing:.1em; }
.actions { display:flex; gap:12px; align-items:stretch; }
.primary { min-width:220px; min-height:58px; display:flex; justify-content:space-between; align-items:center; background:var(--acid); color:var(--ink); border:0; padding:0 20px; font-weight:900; font-size:13px; letter-spacing:.1em; cursor:pointer; transition:transform .18s,filter .18s; }
.primary:hover { transform:translateY(-2px); filter:brightness(1.06); }
.primary:disabled { opacity:.5; cursor:wait; }
.primary b { font-size:22px; }
.join-box { display:flex; height:58px; border:1px solid #ffffff3b; background:#080a0890; }
.join-box input { width:180px; background:transparent; border:0; outline:0; color:white; padding:0 16px; font-size:11px; letter-spacing:.1em; text-transform:uppercase; }
.join-box button { border:0; border-left:1px solid #ffffff3b; background:transparent; color:white; padding:0 18px; font-size:11px; font-weight:800; letter-spacing:.1em; cursor:pointer; }
.notice { color:#ff7b67; font:700 11px ui-monospace,monospace; letter-spacing:.04em; }
.rule-card { position:absolute; z-index:1; right:6vw; top:26vh; width:320px; display:grid; grid-template-columns:34px 1fr; gap:26px 10px; padding:28px; border:1px solid #ffffff21; background:#0b0e0bd9; backdrop-filter:blur(14px); box-shadow:0 25px 80px #0007; }
.rule-card:before { content:"PROTOCOLO"; position:absolute; right:18px; top:-7px; background:var(--acid); color:var(--ink); font:900 9px ui-monospace,monospace; letter-spacing:.14em; padding:4px 8px; }
.rule-number { color:#555b50; font:700 11px ui-monospace,monospace; padding-top:2px; }
.rule-card b { color:var(--paper); font-size:12px; letter-spacing:.14em; }
.rule-card p { color:#7f8578; font-size:11px; line-height:1.6; margin:7px 0 0; }
.home footer { position:absolute; left:48px; bottom:27px; color:#656b61; font:700 9px ui-monospace,monospace; letter-spacing:.14em; display:flex; gap:13px; }

.lobby-shell { min-height:100vh; padding:30px 48px 42px; position:relative; background:radial-gradient(circle at 50% 30%,#263021 0,transparent 42%),#0e110e; }
.host-chip { border:1px solid #44503f; color:var(--acid); padding:9px 12px; font:700 9px ui-monospace,monospace; }
.lobby-head { position:relative; z-index:1; display:flex; justify-content:space-between; align-items:end; padding:7vh 5vw 4vh; }
.lobby-head .eyebrow { display:block; margin-bottom:12px; }
.lobby-head h2 { margin:0; font-size:clamp(52px,7vw,94px); line-height:.82; letter-spacing:-.065em; }
.room-code { width:310px; border:1px solid #ffffff2c; background:#0a0c0aa8; padding:20px; text-align:left; }
.room-code small,.room-code span { display:block; color:#697065; font:700 9px ui-monospace,monospace; letter-spacing:.13em; }
.room-code strong { display:block; color:var(--acid); font:800 38px ui-monospace,monospace; letter-spacing:.13em; margin:8px 0; }
.room-code span { color:#bbc1b2; }
.share-actions { display:grid; grid-template-columns:1fr 1fr; gap:7px; margin-top:14px; }
.share-actions button { min-height:38px; border:1px solid #ffffff2b; background:#151914; color:#c1c7b9; font:800 8px ui-monospace,monospace; letter-spacing:.08em; cursor:pointer; }
.share-actions button:last-child { border-color:#d7ff3f55; color:var(--acid); }
.share-actions button:hover { background:#20261d; }
.teams { position:relative; z-index:1; display:grid; grid-template-columns:1fr 1fr; gap:16px; width:min(1180px,90vw); margin:0 auto; }
.team-card { min-height:265px; border:1px solid #ffffff24; background:#111510d9; cursor:pointer; transition:border-color .2s,transform .2s; }
.team-card:hover { transform:translateY(-2px); }
.team-card.amber:hover { border-color:#ff624780; } .team-card.cyan:hover { border-color:#4dd9ff80; }
.team-card header { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:14px; border-bottom:1px solid #ffffff1c; padding:18px 22px; }
.team-card header span,.team-card header em { color:#697065; font:700 9px ui-monospace,monospace; letter-spacing:.13em; font-style:normal; }
.team-card header b { font-size:16px; letter-spacing:.12em; }
.team-card.amber header b { color:var(--amber); } .team-card.cyan header b { color:var(--cyan); }
.roster { padding:12px; }
.player-row { display:flex; align-items:center; gap:11px; min-height:46px; padding:0 10px; border-bottom:1px solid #ffffff12; font:700 11px ui-monospace,monospace; letter-spacing:.06em; }
.player-row.me { background:#ffffff08; }
.player-row i { width:8px; height:8px; border-radius:50%; }
.amber .player-row i { background:var(--amber); } .cyan .player-row i { background:var(--cyan); }
.player-row small { color:#687064; font-size:8px; border:1px solid #ffffff24; padding:3px 5px; margin-left:auto; }
.player-row small + small { margin-left:0; }
.empty-slot { display:grid; place-items:center; height:120px; color:#4e554b; font:700 10px ui-monospace,monospace; letter-spacing:.12em; }
.lobby-actions { position:relative; z-index:1; width:min(1180px,90vw); margin:18px auto 0; display:flex; align-items:center; justify-content:flex-end; gap:22px; }
.lobby-actions p { color:#6d7469; font:10px ui-monospace,monospace; margin-right:auto; }
.waiting { color:#9da593; font:700 10px ui-monospace,monospace; letter-spacing:.13em; }

.game-shell { height:100vh; min-height:680px; overflow:hidden; background:#0b0e0b; display:flex; flex-direction:column; }
.game-top { height:74px; flex:none; display:grid; grid-template-columns:1fr 135px minmax(300px,480px) 135px 1fr; align-items:center; border-bottom:1px solid #ffffff1c; background:#10130f; }
.brand.compact { padding-left:24px; font-size:11px; }
.game-top .score { height:100%; display:flex; align-items:center; justify-content:center; gap:12px; border-left:1px solid #ffffff14; border-right:1px solid #ffffff14; }
.score small { font:700 9px ui-monospace,monospace; letter-spacing:.14em; }
.score strong { font:900 32px ui-monospace,monospace; }
.score.amber strong { color:var(--amber); } .score.cyan strong { color:var(--cyan); }
.phase { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:14px; padding:0 20px; text-align:center; }
.phase small,.phase span { color:#788071; font:700 9px ui-monospace,monospace; letter-spacing:.12em; }
.phase span { text-align:right; color:var(--acid); }
.phase b { font-size:11px; letter-spacing:.1em; }
.connection-dot { justify-self:end; padding-right:24px; color:#747d70; font:700 9px ui-monospace,monospace; letter-spacing:.12em; }
.game-body { flex:1; min-height:0; display:grid; grid-template-columns:190px minmax(0,1fr) 210px; }
.squad-panel,.intel-panel { background:#0d100d; padding:22px 16px; overflow:auto; }
.squad-panel { border-right:1px solid #ffffff16; } .intel-panel { border-left:1px solid #ffffff16; }
.squad-panel>span,.intel-panel>span { display:block; color:#62695e; font:700 9px ui-monospace,monospace; letter-spacing:.16em; border-bottom:1px solid #ffffff14; padding-bottom:13px; margin-bottom:10px; }
.squadmate { display:grid; grid-template-columns:8px 1fr auto; align-items:center; gap:8px; padding:10px 2px; border-bottom:1px solid #ffffff10; }
.squadmate i { width:7px; height:7px; border-radius:50%; }
.squadmate div b,.squadmate div small { display:block; font:700 9px ui-monospace,monospace; letter-spacing:.04em; }
.squadmate div small { color:#62695e; margin-top:4px; font-size:8px; }
.squadmate em { color:#6d7568; font:700 10px ui-monospace,monospace; font-style:normal; }
.legend { margin-top:30px; color:#62695e; font:700 8px ui-monospace,monospace; }
.legend p { margin:10px 0; }.legend kbd { display:inline-block; min-width:43px; color:#b9c0b1; border:1px solid #3b4238; padding:4px; margin-right:6px; text-align:center; }
.stage-wrap { min-width:0; position:relative; display:grid; place-items:center; padding:18px; background:radial-gradient(circle,#1a2118,#0a0c0a); overflow:hidden; }
.stage-wrap canvas { display:block; width:100%; max-height:100%; aspect-ratio:16/9; background:#141813; box-shadow:0 20px 70px #000b; cursor:crosshair; touch-action:none; }
.zoom-controls { position:absolute; left:28px; top:28px; display:flex; align-items:center; height:34px; border:1px solid #ffffff2a; background:#070907dc; box-shadow:0 8px 22px #0006; }
.zoom-controls button { width:34px; align-self:stretch; border:0; background:transparent; color:#cbd1c2; font-size:18px; cursor:pointer; }
.zoom-controls button:hover { color:var(--acid); background:#ffffff0a; }
.zoom-controls span { min-width:48px; text-align:center; color:#7f8879; font:700 8px ui-monospace,monospace; letter-spacing:.06em; }
.objective-status { position:absolute; left:50%; bottom:28px; transform:translateX(-50%); background:#070907e8; border:1px solid #ffffff2c; color:#aeb5a7; padding:10px 15px; font:700 9px ui-monospace,monospace; letter-spacing:.08em; white-space:nowrap; }
.objective-status.carrying { color:var(--acid); border-color:#d7ff3f66; box-shadow:0 0 25px #d7ff3f15; }
.ready-panel { position:absolute; top:28px; right:28px; display:flex; align-items:stretch; background:#070907e8; border:1px solid #ffffff2c; box-shadow:0 12px 30px #0007; }
.ready-panel div { display:flex; flex-direction:column; justify-content:center; gap:5px; min-width:116px; padding:9px 12px; border-right:1px solid #ffffff20; }
.ready-panel span { color:#71796d; font:700 8px ui-monospace,monospace; letter-spacing:.08em; }
.ready-panel span.done { color:var(--acid); }
.ready-panel button { min-width:126px; border:0; background:var(--acid); color:var(--ink); padding:0 14px; font:900 9px ui-monospace,monospace; letter-spacing:.1em; cursor:pointer; }
.ready-panel button:disabled { background:#242a22; color:#737b6e; cursor:not-allowed; }
.intel-panel>div { border-bottom:1px solid #ffffff12; padding:14px 0; }
.intel-panel small { color:#636b60; font:700 8px ui-monospace,monospace; letter-spacing:.13em; }
.intel-panel p { color:#92998d; font:10px/1.55 ui-monospace,monospace; }
.intel-panel p b { color:var(--paper); }
.kill-list p { display:flex; justify-content:space-between; gap:8px; }.kill-list p span { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.touch-controls { display:none; }.touch-controls button:disabled { opacity:.35; }
.end-overlay { position:fixed; inset:0; z-index:20; display:grid; place-items:center; background:#050705d9; backdrop-filter:blur(10px); }
.end-card { width:min(580px,calc(100% - 32px)); border:1px solid #ffffff31; background:#111510; padding:50px; text-align:center; box-shadow:0 30px 100px #000; }
.end-card>span,.end-card>small { color:#727a6d; font:700 9px ui-monospace,monospace; letter-spacing:.15em; }
.end-card h2 { margin:15px 0; font-size:clamp(38px,6vw,70px); line-height:.9; letter-spacing:-.055em; }
.end-card p { color:#a4ab9d; font-size:13px; }.end-card>strong { display:block; color:var(--amber); font:800 11px ui-monospace,monospace; letter-spacing:.08em; margin:18px 0; }
.final-score { display:flex; justify-content:center; align-items:center; gap:20px; margin:25px 0; }.final-score b { font:900 54px ui-monospace,monospace; }.final-score i { color:#52594f; font-style:normal; }
.end-card .primary { margin:20px auto 0; }

@media (max-width:1100px){.rule-card{right:3vw;width:290px}.game-body{grid-template-columns:160px minmax(0,1fr)}.intel-panel{display:none}.game-top{grid-template-columns:1fr 110px minmax(250px,420px) 110px}.connection-dot{display:none}.game-top .brand{display:none}}
@media (max-width:760px){
  .shell{padding:24px;overflow:auto}.hero{width:100%;padding:8vh 0 330px}.rule-card{left:24px;right:24px;top:auto;bottom:45px;width:auto}.actions{flex-direction:column;width:min(440px,100%)}.primary{height:58px}.join-box input{flex:1;width:auto}.home footer{display:none}h1{font-size:clamp(57px,17vw,96px)}
  .lobby-shell{padding:22px}.lobby-head{padding:5vh 0 3vh;align-items:start;gap:14px}.lobby-head h2{font-size:48px}.room-code{width:230px}.room-code strong{font-size:28px}.share-actions{grid-template-columns:1fr}.teams{grid-template-columns:1fr;width:100%}.team-card{min-height:190px}.lobby-actions{width:100%;flex-wrap:wrap}.lobby-actions p{display:none}
  .game-shell{min-height:560px}.game-top{height:62px;grid-template-columns:80px 1fr 80px}.phase{grid-template-columns:1fr;padding:0 6px}.phase small,.phase span{display:none}.phase b{font-size:9px}.score{gap:4px!important}.score small{display:none}.score strong{font-size:25px}.game-body{display:block;position:relative}.squad-panel{display:none}.stage-wrap{height:100%;padding:4px}.objective-status{bottom:8px;max-width:72%;overflow:hidden;text-overflow:ellipsis}.ready-panel{top:8px;right:8px}.ready-panel div{display:none}.ready-panel button{min-width:112px;min-height:38px}.zoom-controls{left:8px;top:8px}.touch-controls{display:flex;position:absolute;inset:auto 8px 42px;justify-content:space-between;align-items:end;pointer-events:none}.touch-controls button{pointer-events:auto;border:1px solid #ffffff4d;background:#0a0c0ab8;color:white;touch-action:none}.dpad{width:118px;height:118px;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr)}.dpad button:nth-child(1){grid-column:2}.dpad button:nth-child(2){grid-column:1;grid-row:2}.dpad button:nth-child(3){grid-column:2;grid-row:2}.dpad button:nth-child(4){grid-column:3;grid-row:2}.touch-e{width:48px;height:48px;border-radius:50%!important}.touch-fire{width:70px;height:70px;border-radius:50%!important;color:var(--amber)!important}.stage-wrap canvas{width:100%;max-height:none}.end-card{padding:32px 20px}
}
@media (max-height:700px) and (min-width:761px){.hero{padding-top:4vh}.premise{margin:22px 0 12px}.rule-card{top:20vh}.home footer{display:none}}