:root{--mint:#6fffe2;--lime:#c9ff6d;--ink:#efffff;--muted:#8ba5aa;--panel:#07151be8;--enemy:#ff5268;--violet:#9b6bff}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#030709;color:var(--ink);font-family:Segoe UI,system-ui,sans-serif}button,a{font:inherit}button{cursor:pointer}#game{position:fixed;inset:0;width:100%;height:100%;outline:0;touch-action:none}.grain{position:fixed;z-index:2;inset:0;pointer-events:none;opacity:.035;background:repeating-linear-gradient(0deg,transparent 0 3px,#a9fff417 4px)}
.topbar{position:fixed;z-index:4;left:0;right:0;top:0;display:flex;justify-content:space-between;align-items:flex-start;padding:18px 22px;pointer-events:none;background:linear-gradient(#020a0ee6,transparent)}.brand b{display:block;font-size:clamp(17px,2.4vw,28px);letter-spacing:.15em}.brand b span{color:var(--mint)}.brand small,.mission small{display:block;margin-top:4px;color:#7fa3a9;font-size:11px;letter-spacing:.12em}.mission{text-align:right}.mission>b{color:var(--lime);letter-spacing:.12em}
.squad-panel{position:fixed;z-index:5;left:16px;top:92px;width:224px;padding:12px;border:1px solid #6fffe23b;background:linear-gradient(145deg,#06131be8,#0b1823c9);box-shadow:0 16px 50px #0009;clip-path:polygon(0 0,92% 0,100% 8%,100% 100%,8% 100%,0 92%)}.panel-title{margin:0 4px 9px;color:#72d8ca;font-size:10px;letter-spacing:.18em}.squad{display:grid;gap:7px}.hero-card{position:relative;display:grid;grid-template-columns:34px 1fr auto;align-items:center;gap:8px;width:100%;padding:7px 8px;border:1px solid #8affdf26;background:#07131c;color:#dff;text-align:left}.hero-card:hover{border-color:#73ffe168}.hero-card.selected{border-color:var(--mint);background:#12332f;box-shadow:0 0 18px #5bffe32b}.hero-card.done{opacity:.6}.hero-card.dead{filter:grayscale(1);opacity:.35}.portrait{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--hero);color:#03100d;font-size:15px;font-weight:1000;box-shadow:0 0 12px color-mix(in srgb,var(--hero),transparent 50%)}.hero-card b{display:block;font-size:12px}.hero-card small{display:block;color:#78979d;font-size:9px}.hero-card em{font-style:normal;color:var(--lime);font-size:10px}
.unit-panel{position:fixed;z-index:5;left:50%;bottom:18px;width:min(560px,calc(100% - 520px));min-width:390px;transform:translateX(-50%);display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 15px;border:1px solid #70ffe14f;background:#06131bea;box-shadow:0 18px 55px #000c;clip-path:polygon(3% 0,97% 0,100% 25%,100% 100%,0 100%,0 25%)}.unit-copy{min-width:0}.unit-copy small{display:block;color:#75cfc3;font-size:9px;letter-spacing:.15em}.unit-copy b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin:2px 0;font-size:17px}.unit-copy span{display:block;color:#8ba6aa;font-size:11px}.unit-panel button,.actionbar button,.briefing button{border:0;background:linear-gradient(100deg,var(--mint),var(--lime));color:#03100e;padding:11px 14px;font-weight:900;font-size:11px;letter-spacing:.09em;clip-path:polygon(0 0,92% 0,100% 25%,100% 100%,8% 100%,0 75%)}.unit-panel button:disabled{cursor:not-allowed;filter:grayscale(1);opacity:.35}.unit-panel button.targeting{background:linear-gradient(100deg,#cf8cff,#ff6092);color:#fff;box-shadow:0 0 20px #c067ff66}
.dice-panel{position:fixed;z-index:5;right:18px;top:100px;display:flex;align-items:center;gap:10px;padding:10px 13px;border:1px solid #9c72ff4d;background:#0a1021db}.die{display:grid;place-items:center;width:40px;height:40px;border:1px solid #c4a4ff;background:#47278b;color:#fff;font-size:20px;transform:rotate(45deg);box-shadow:0 0 18px #864dff55}.die.rolling{animation:roll .25s linear infinite}.die+div{max-width:170px}.dice-panel small{display:block;color:#9b87c4;font-size:9px;letter-spacing:.15em}.dice-panel b{display:block;margin-top:3px;font-size:11px}
.actionbar{position:fixed;z-index:5;right:18px;bottom:18px;width:230px;padding:12px;border:1px solid #ff667642;background:#1a0b12e8;text-align:right}.actionbar div{min-height:33px;margin-bottom:9px;color:#c0a9ad;font-size:10px;line-height:1.45}.actionbar button{background:linear-gradient(100deg,#ff6677,#ffb65a);width:100%}.actionbar button:disabled{filter:grayscale(1);opacity:.45}
.toast{position:fixed;z-index:8;left:50%;top:18%;max-width:min(560px,80vw);transform:translate(-50%,-12px);padding:10px 18px;border:1px solid #7effdf85;background:#07131eee;color:var(--lime);font-weight:900;letter-spacing:.09em;text-align:center;opacity:0;transition:.2s;pointer-events:none}.toast.show{opacity:1;transform:translate(-50%,0)}
.menu{position:fixed;z-index:10;inset:0;display:grid;place-items:center;overflow:auto;padding:18px;background:radial-gradient(circle at 50% 35%,#22443dba,#030509f4)}.menu.hidden{display:none}.briefing{width:min(650px,calc(100% - 24px));padding:clamp(25px,5vw,52px);border:1px solid #71ffe06b;background:#050e17f2;text-align:center;box-shadow:0 0 100px #5affe126;clip-path:polygon(0 0,93% 0,100% 10%,100% 100%,7% 100%,0 90%)}.kicker{color:#79ffe1;font-size:10px;letter-spacing:.23em}.briefing h1{margin:14px 0;font-size:clamp(40px,8vw,78px);line-height:.84}.briefing h1 span{color:transparent;-webkit-text-stroke:1px var(--lime)}.briefing p{color:#9ab3b7;line-height:1.55}.roster{display:flex;justify-content:center;align-items:center;gap:15px;margin:20px 0}.roster span{padding:8px 12px;border:1px solid #78ffe152;color:var(--mint);font-size:11px;letter-spacing:.1em}.roster span:last-child{border-color:#ff687152;color:#ff8996}.roster i{font-style:normal;color:#667b80;font-weight:900}.briefing button{display:block;margin:21px auto 0;padding:14px 25px}.briefing a{display:block;margin-top:18px;color:#75e7d8;font-size:12px;text-decoration:none}.controls{font-size:12px}
@keyframes roll{to{transform:rotate(405deg)}}
@media(max-width:900px){.squad-panel{top:auto;left:8px;right:8px;bottom:92px;width:auto;padding:7px}.panel-title{display:none}.squad{grid-template-columns:repeat(5,1fr);gap:4px}.hero-card{display:block;padding:5px;text-align:center}.hero-card .portrait{margin:auto;width:29px;height:29px}.hero-card b,.hero-card small{display:none}.hero-card em{display:block;margin-top:3px;font-size:8px}.unit-panel{left:8px;right:8px;bottom:8px;width:auto;min-width:0;transform:none;padding:8px 11px}.unit-copy b{font-size:13px}.unit-copy span{font-size:9px}.unit-panel button{padding:9px;font-size:9px}.dice-panel{right:8px;top:76px;padding:7px}.die{width:31px;height:31px}.die+div{max-width:110px}.actionbar{right:8px;bottom:170px;width:170px;padding:8px}.actionbar div{display:none}.topbar{padding:10px}.brand small{display:none}.mission small{font-size:8px}}
@media(max-width:560px){.brand b span{display:block}.mission{font-size:11px}.roster{gap:6px}.roster span{padding:6px;font-size:8px}.briefing p{font-size:13px}.dice-panel{top:94px}.actionbar{bottom:164px;width:145px}.actionbar button{padding:8px;font-size:9px}}
@media(prefers-reduced-motion:reduce){*{animation-duration:.001ms!important;transition:none!important}}
.intent-panel{position:fixed;z-index:5;right:18px;top:178px;width:205px;padding:10px;border:1px solid #ff667642;background:#120b12e8}.intent-panel>div:last-child{display:grid;gap:5px}.enemy-intent{display:grid;grid-template-columns:8px 1fr;gap:7px;padding:5px 6px;border-left:2px solid var(--intent);background:#090b12;color:#bfc8cf;font-size:9px}.enemy-intent i{width:7px;height:7px;margin-top:3px;border-radius:50%;background:var(--intent);box-shadow:0 0 7px var(--intent)}.enemy-intent b,.enemy-intent span{display:block}.enemy-intent b{color:#eff;font-size:9px}.enemy-intent span{margin-top:2px;color:#8c9aa2}.protocol-select{max-width:580px;margin:15px auto}.protocol-select>p{margin:9px 0 6px;color:#7fa3a9;font-size:9px;font-weight:900;letter-spacing:.16em}.protocol-select>div{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}.protocol-select button{padding:9px 6px;border:1px solid #70ffe133;background:#07131c;color:#94aaa8;font-size:9px;font-weight:900;letter-spacing:.06em}.protocol-select button small{display:block;margin-top:3px;color:#61777c;font-size:8px;font-weight:500;letter-spacing:0}.protocol-select button.selected{border-color:var(--mint);background:#16342f;color:#eff;box-shadow:inset 0 0 18px #42ffd31f}.difficulty-select button.selected{border-color:#ffb65a;background:#3a2418}@media(max-width:900px){.intent-panel{display:none}}@media(max-width:560px){.protocol-select button{padding:7px 4px;font-size:8px}.protocol-select button small{display:none}}