@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Space+Grotesk:wght@500;600;700&display=swap');

:root { --bg:#0a0e0e; --bone:#ecf0dd; --muted:#91a0a0; --line:rgba(222,237,216,.14); --acid:#d9ff57; --ember:#ff755e; --mint:#8ff0bd; color-scheme:dark; }
* { box-sizing:border-box }
body { min-width:320px; min-height:100vh; margin:0; color:var(--bone); background:radial-gradient(ellipse at 50% -20%,#26352c 0,#101514 36%,#080a0a 80%); font-family:'DM Mono',monospace; }
button { font:inherit; cursor:pointer }
.shell { width:min(1440px,100%); min-height:100vh; margin:auto; padding:0 28px; display:grid; grid-template-rows:72px 1fr 48px; }
.topbar, footer { display:flex; align-items:center; justify-content:space-between; border-color:var(--line); border-style:solid; font-size:10px; letter-spacing:.12em; color:var(--muted); }
.topbar { border-width:0 0 1px } footer { border-width:1px 0 0 }
.brand { display:flex; align-items:center; gap:9px; color:var(--bone); font:700 22px/1 'Space Grotesk',sans-serif; letter-spacing:.14em; text-decoration:none }
.brand i { display:block; width:13px; height:13px; border:2px solid var(--acid); border-radius:50%; box-shadow:0 0 18px rgba(217,255,87,.72); }
.topbar p b { display:inline-block; width:4px; height:4px; margin:0 9px 2px; border-radius:50%; background:var(--acid) }
.quiet { padding:8px 0; color:var(--muted); border:0; background:transparent; font-size:9px; letter-spacing:.12em; } .quiet:hover { color:var(--bone) }
.arena { position:relative; min-height:0; overflow:hidden; border-left:1px solid rgba(255,255,255,.03); border-right:1px solid rgba(255,255,255,.03); background:#0c1110; }
canvas { display:block; width:100%; height:100%; object-fit:contain; }
.hud { position:absolute; z-index:2; inset:0; display:flex; justify-content:space-between; align-items:flex-start; padding:24px 28px; pointer-events:none; }
.objective, .telemetry div { display:grid; gap:5px; } small { color:var(--muted); font-size:9px; letter-spacing:.15em }
.objective strong { color:var(--acid); font:600 20px/1 'Space Grotesk',sans-serif; letter-spacing:-.035em }.objective span { color:#b9c2b3; font-size:9px; letter-spacing:.07em }.objective .role-cue { max-width:260px; margin-top:3px; color:#91c6ad; font-size:8px; line-height:1.35; letter-spacing:.08em }
.telemetry { display:flex; gap:27px; text-align:right }.telemetry strong { font:600 20px/1 'Space Grotesk',sans-serif }
.role-panel { position:absolute; z-index:3; right:25px; top:117px; width:200px; display:grid; gap:5px; }
.role { width:100%; display:grid; grid-template-columns:26px 1fr auto; align-items:center; gap:9px; padding:7px 9px; color:#81908e; text-align:left; border:1px solid transparent; background:rgba(5,8,8,.48); transition:.16s ease; }
.role b { font:600 10px 'Space Grotesk',sans-serif; letter-spacing:.05em }.role span { font-size:8px; opacity:.75 }.role i { width:18px; height:18px; display:grid; place-items:center; color:#11160f; background:#61706c; font:600 9px 'DM Mono',monospace; font-style:normal; }
.role:hover { color:var(--bone); border-color:var(--line) }.role.active { color:var(--bone); border-color:rgba(217,255,87,.72); background:rgba(217,255,87,.09); }.role.active i { background:var(--acid); box-shadow:0 0 13px rgba(217,255,87,.5) }.role.locked { opacity:.42 }
.overlay { position:absolute; z-index:5; inset:0; display:grid; place-content:center; padding:32px; text-align:center; background:rgba(8,12,11,.77); backdrop-filter:blur(9px) }
.overlay.is-hidden,.result.is-hidden { display:none }.sigil { width:62px; height:62px; display:grid; place-items:center; margin:0 auto 25px; border:1px solid var(--acid); border-radius:50%; color:var(--acid); box-shadow:inset 0 0 23px rgba(217,255,87,.08),0 0 32px rgba(217,255,87,.12); }.sigil span { font:700 27px 'Space Grotesk',sans-serif }.eyebrow { margin:0; color:var(--acid); font-size:10px; letter-spacing:.2em }
h1,h2 { margin:13px 0 17px; font:700 clamp(47px,8vw,104px)/.8 'Space Grotesk',sans-serif; letter-spacing:-.085em } h1 em,h2 em { color:var(--acid); font-style:normal }.intro { width:min(372px,90vw); margin:0 auto 27px; color:#b1bbb2; font-size:12px; line-height:1.75 }
.mission-brief { width:min(372px,90vw); margin:0 auto 17px; text-align:left; border-top:1px solid rgba(217,255,87,.55); border-bottom:1px solid var(--line); background:linear-gradient(90deg,rgba(217,255,87,.09),transparent 66%); }.mission-heading { display:flex; justify-content:space-between; gap:12px; padding:9px 11px; color:var(--muted); font-size:8px; letter-spacing:.16em }.mission-heading b { color:var(--acid); font-weight:500; text-align:right }.mission-brief ol { display:grid; grid-template-columns:1fr 1fr; gap:1px; margin:0; padding:0; list-style:none; background:var(--line) }.mission-brief li { display:flex; gap:7px; min-height:43px; padding:8px; color:#aeb9ae; background:#101715; font-size:8px; line-height:1.35 }.mission-brief li i { color:var(--acid); font-style:normal; font-size:8px }.mission-brief li b { display:block; color:var(--bone); font-size:8px; letter-spacing:.08em }.mission-brief p { margin:0; padding:9px 11px; color:#91a38f; font-size:8px; line-height:1.5; letter-spacing:.03em }
.primary { min-width:254px; padding:15px 17px; border:1px solid var(--acid); color:#11170c; background:var(--acid); font-size:10px; letter-spacing:.13em; transition:.17s ease }.primary:hover { transform:translateY(-2px); box-shadow:0 13px 34px rgba(217,255,87,.25) }.primary b { margin-left:14px; font-size:16px }.keys { margin:22px 0 0; color:var(--muted); font-size:9px; letter-spacing:.04em }kbd { padding:3px 5px; border:1px solid var(--line); color:#d7ded1; background:#151b19; font:inherit }
.lobby { width:min(372px,90vw); margin:0 auto 17px; padding:11px; border:1px solid var(--line); background:rgba(9,14,12,.54) }.lobby-fields,.lobby-actions { display:grid; grid-template-columns:1fr 1fr; gap:6px }.lobby-fields select,.lobby-actions #copy-invite { grid-column:1 / -1 }.lobby input,.lobby select,.lobby-actions button { min-width:0; padding:9px; border:1px solid rgba(222,237,216,.18); color:var(--bone); background:#111916; font:500 9px 'DM Mono',monospace; letter-spacing:.09em }.lobby input:focus,.lobby select:focus { outline:1px solid var(--acid); border-color:var(--acid) }.lobby-actions { margin-top:6px }.lobby-actions button { color:#b9c7b5; cursor:pointer }.lobby-actions button:hover { color:var(--acid); border-color:rgba(217,255,87,.55) }.network-status { min-height:20px; margin:9px 2px 0; color:#829088; font-size:8px; line-height:1.45; letter-spacing:.07em }.network-status.connected { color:var(--mint) }.network-status.error { color:var(--ember) }
.recent-runs { margin-top:10px; padding-top:9px; border-top:1px solid rgba(222,237,216,.12); color:#839084; font:8px/1.5 'DM Mono',monospace; letter-spacing:.07em }.recent-runs > div { display:flex; justify-content:space-between; color:#aeb9ae }.recent-runs b { color:var(--acid); font-weight:500 }.recent-runs p { margin:5px 0 0; min-height:12px }.recent-run { display:block; margin-top:3px; color:#aeb9ae }.recent-run strong { color:var(--bone); font-weight:500 }
.result { position:absolute; z-index:5; top:50%; left:50%; width:min(470px,calc(100% - 32px)); padding:37px; text-align:center; transform:translate(-50%,-50%); border:1px solid var(--line); background:rgba(8,12,11,.94); box-shadow:0 25px 70px #000b }.result h2 { font-size:54px }.result > p:not(.eyebrow) { color:#abb5aa; font-size:11px; line-height:1.7 }.result-grid { display:grid; grid-template-columns:1fr 1fr; gap:1px; margin:25px 0; background:var(--line) }.result-grid div { display:grid; gap:7px; padding:14px 7px; background:#111817 }.result-grid strong { font:600 18px 'Space Grotesk',sans-serif }
.touch { display:none; position:absolute; z-index:4; right:16px; bottom:16px; width:232px; height:62px }.touch-key { position:absolute; width:58px; height:58px; border:1px solid rgba(217,255,87,.3); color:#e7f3ca; background:rgba(12,18,16,.75); border-radius:50%; touch-action:none; }.left{left:0}.right{left:65px}.grab{right:65px;font-size:9px}.jump{right:0;font-size:9px}.touch-key:active{background:rgba(217,255,87,.24)}
footer b { color:var(--acid); font-weight:500 }#signal i { display:inline-block; width:6px; height:6px; margin-right:7px; border-radius:50%; background:var(--mint); box-shadow:0 0 10px var(--mint) }
@media(max-width:700px){.shell{padding:0 12px;grid-template-rows:58px 1fr 44px}.topbar p{display:none}.arena{margin:0 -12px;border:0}.hud{padding:16px}.objective strong{font-size:15px}.objective span{max-width:180px;line-height:1.4}.telemetry{gap:13px}.telemetry strong{font-size:16px}.role-panel{top:auto;right:12px;bottom:9px;width:calc(100% - 24px);grid-template-columns:repeat(4,1fr);gap:3px}.role{grid-template-columns:1fr;padding:5px;text-align:center;justify-items:center;background:rgba(5,8,8,.78)}.role span{display:none}.role i{width:17px;height:17px}.role b{font-size:8px}.touch{display:block;bottom:140px}.keys{display:none}.mission-brief{margin-bottom:12px}.mission-brief li{min-height:38px;padding:6px}.result{padding:29px 17px}.result h2{font-size:43px}}
@media(hover:none) and (pointer:coarse){.touch{display:block}}
#result-team { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1px; margin:-14px 0 24px; background:var(--line); text-align:left } #result-team:empty { display:none } #result-team div { padding:8px 9px; background:#0d1311; color:#aeb9ae; font-size:8px; letter-spacing:.04em } #result-team b { display:block; margin-bottom:3px; color:var(--bone); font:600 9px 'Space Grotesk',sans-serif; letter-spacing:.06em } #result-team span { color:var(--acid) }
.chaos-card { min-height:38px; margin:-10px 0 12px; padding:10px; border:1px solid rgba(217,255,87,.22); color:#c4d6b9; background:rgba(217,255,87,.05); font:8px/1.6 'DM Mono',monospace; letter-spacing:.06em; text-align:left; overflow-wrap:anywhere }.share-button { width:100%; margin:0 0 8px; padding:10px; border:1px solid rgba(217,255,87,.52); color:var(--acid); background:rgba(217,255,87,.06); font:600 9px 'DM Mono',monospace; letter-spacing:.13em; cursor:pointer }.share-button:hover { background:rgba(217,255,87,.14); box-shadow:0 0 18px rgba(217,255,87,.12) }
.playtest-feedback { display:grid; grid-template-columns:1fr 1fr; gap:6px; margin:0 0 10px; padding:10px; border:1px solid rgba(222,237,216,.16); color:#aeb9ae; background:#0d1311; text-align:left; font:8px 'DM Mono',monospace; letter-spacing:.05em }.playtest-feedback p,.playtest-feedback input:not([type=checkbox]) { grid-column:1 / -1 }.playtest-feedback p { margin:0 0 2px; color:var(--acid) }.playtest-feedback label { display:flex; align-items:center; justify-content:space-between; gap:6px }.playtest-feedback select,.playtest-feedback input:not([type=checkbox]),.playtest-feedback button { min-width:0; padding:7px; border:1px solid rgba(222,237,216,.18); color:var(--bone); background:#111916; font:inherit }.playtest-feedback button { grid-column:1 / -1; color:var(--acid); cursor:pointer }.playtest-feedback small { grid-column:1 / -1; min-height:10px; color:var(--mint) }