:root { --ink:#f3f0e7; --muted:#717a75; --dark:#0d1110; --coral:#ff715b; --mint:#8fffc1; --blue:#68b7ff; --yellow:#ffe982; --line:rgba(243,240,231,.14); }
* { box-sizing:border-box; }
[hidden] { display:none!important; }
html,body { width:100%; height:100%; margin:0; overflow:hidden; color:var(--ink); background:var(--dark); font-family:"Manrope",sans-serif; }
button,a { -webkit-tap-highlight-color:transparent; }
button:focus-visible,a:focus-visible { outline:2px solid var(--mint); outline-offset:4px; }
#game { position:fixed; inset:0; width:100%; height:100%; touch-action:none; }
.noise { position:fixed; z-index:50; inset:0; opacity:.045; 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='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
header { position:fixed; z-index:10; top:0; left:0; right:0; height:72px; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; padding:0 25px; border-bottom:1px solid var(--line); background:linear-gradient(180deg,rgba(13,17,16,.9),rgba(13,17,16,.15)); font-family:"DM Mono",monospace; }
.brand { width:max-content; display:flex; align-items:center; gap:12px; color:var(--ink); text-decoration:none; }
.brand-orbit { position:relative; width:34px; height:34px; border:1px solid var(--mint); border-radius:50%; }
.brand-orbit i { position:absolute; width:10px; height:10px; top:2px; right:-2px; border-radius:50%; background:var(--coral); box-shadow:0 0 12px var(--coral); }
.brand b,.brand small { display:block; }
.brand b { font-size:10px; letter-spacing:.14em; }.brand small { margin-top:5px; color:var(--muted); font-size:6px; letter-spacing:.12em; }
.sector { display:flex; align-items:center; gap:12px; color:var(--muted); font-size:7px; letter-spacing:.14em; }.sector strong { color:var(--ink); font-size:10px; font-weight:400; }
.sound { justify-self:end; display:flex; align-items:center; gap:9px; padding:10px 0; border:0; color:var(--muted); background:none; font:400 7px/1 "DM Mono",monospace; letter-spacing:.12em; cursor:pointer; }.sound i { width:7px; height:7px; border-radius:50%; background:var(--mint); box-shadow:0 0 10px var(--mint); }.sound.is-muted i { background:var(--muted); box-shadow:none; }
.hud { position:fixed; z-index:10; top:102px; font-family:"DM Mono",monospace; }.hud>span,.chain-readout span { display:block; margin-bottom:8px; color:var(--muted); font:300 7px/1 "DM Mono",monospace; letter-spacing:.14em; }
.score { left:25px; }.score>strong { display:block; font-size:22px; font-weight:300; }.score small { display:block; margin-top:7px; color:#4f5853; font-size:7px; }.score small b { font-weight:400; }
.quota { left:50%; transform:translateX(-50%); text-align:center; }.quota strong { display:flex; justify-content:center; align-items:baseline; gap:8px; font:300 20px/1 "DM Mono",monospace; }.quota strong b:first-child { color:var(--mint); }.quota strong i { color:#525b56; font-style:normal; }.quota-bar { width:125px; height:2px; margin-top:10px; background:#2b302e; }.quota-bar i { display:block; width:0; height:100%; background:var(--mint); box-shadow:0 0 9px var(--mint); transition:width 180ms ease; }
.attempts { right:25px; text-align:right; }.attempts div { display:flex; gap:7px; }.attempts i { width:20px; height:20px; display:block; border:1px solid var(--coral); border-radius:50%; box-shadow:inset 0 0 10px rgba(255,113,91,.12); }.attempts i.is-spent { border-color:#333a36; box-shadow:none; }
.chain-readout { position:fixed; z-index:10; left:25px; top:190px; opacity:.45; transition:opacity 160ms ease,transform 160ms ease; }.chain-readout strong { color:var(--coral); font:300 25px/1 "DM Mono",monospace; text-shadow:0 0 18px rgba(255,113,91,.25); }.chain-readout.is-hot { opacity:1; transform:translateX(5px); }
.instruction { position:fixed; z-index:10; left:50%; bottom:36px; transform:translateX(-50%); color:var(--yellow); font:400 7px/1 "DM Mono",monospace; letter-spacing:.18em; animation:pulse 1.5s ease-in-out infinite; }
@keyframes pulse { 50% { opacity:.35; } }
.overlay { position:fixed; z-index:30; inset:0; display:grid; grid-template-columns:1.05fr .95fr; align-items:center; gap:8vw; padding:9vh 10vw; visibility:hidden; opacity:0; background:radial-gradient(circle at 20% 45%,rgba(255,113,91,.09),transparent 30%),radial-gradient(circle at 82% 30%,rgba(143,255,193,.07),transparent 28%),rgba(13,17,16,.96); backdrop-filter:blur(12px); transition:opacity 450ms ease,visibility 450ms; }.overlay.is-visible { visibility:visible; opacity:1; }
.eyebrow { color:var(--coral); font:400 8px/1 "DM Mono",monospace; letter-spacing:.18em; }
h1,h2 { margin:24px 0; font-weight:700; line-height:.72; letter-spacing:-.085em; }h1 { font-size:clamp(83px,11vw,166px); }h1 span { color:transparent; -webkit-text-stroke:1px rgba(243,240,231,.75); }
.orbit-graphic { position:relative; width:min(390px,75%); height:35px; margin-top:35px; border-top:1px solid var(--line); }.orbit-graphic i { position:absolute; top:-6px; width:12px; height:12px; border-radius:50%; }.orbit-graphic i:nth-child(1){left:8%;background:var(--coral);}.orbit-graphic i:nth-child(2){left:49%;background:var(--mint);}.orbit-graphic i:nth-child(3){right:5%;background:var(--blue);}
.briefing { position:relative; max-width:440px; padding:34px; border:1px solid var(--line); background:rgba(19,24,22,.72); box-shadow:0 28px 90px rgba(0,0,0,.3); }.briefing-number { position:absolute; top:-15px; right:28px; color:var(--mint); font:300 42px/1 "DM Mono",monospace; }.briefing h2 { margin-top:10px; font-size:31px; line-height:.9; letter-spacing:-.05em; }.briefing p { margin:25px 0; color:#929a95; font-size:12px; line-height:1.72; }
.rule-list { display:grid; gap:9px; margin-bottom:27px; }.rule-list div { display:grid; grid-template-columns:25px 1fr auto; align-items:center; padding-bottom:8px; border-bottom:1px solid rgba(255,255,255,.07); font-family:"DM Mono",monospace; }.rule-list span { color:var(--coral); font-size:7px; }.rule-list b { font-size:8px; letter-spacing:.1em; }.rule-list small { color:var(--muted); font-size:6px; letter-spacing:.1em; }
.primary { width:100%; height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 19px; border:1px solid var(--mint); color:#07100b; background:var(--mint); font:500 9px/1 "DM Mono",monospace; letter-spacing:.15em; cursor:pointer; transition:160ms ease; }.primary:hover { background:#c2ffdd; box-shadow:0 0 35px rgba(143,255,193,.14); }.primary span { font-size:17px; }
.result-card,.pause-card { position:fixed; z-index:24; top:50%; left:50%; width:min(400px,88vw); padding:31px; transform:translate(-50%,-50%) scale(.94); visibility:hidden; opacity:0; border:1px solid var(--line); background:rgba(13,17,16,.9); text-align:center; backdrop-filter:blur(12px); transition:180ms ease; }.result-card.is-visible,.pause-card.is-visible { visibility:visible; opacity:1; transform:translate(-50%,-50%) scale(1); }.result-card>span,.pause-card span,.pause-card small { color:var(--mint); font:300 7px/1 "DM Mono",monospace; letter-spacing:.15em; }.result-card h2 { margin:20px 0; font-size:46px; line-height:.8; }.result-card p { margin:0 0 24px; color:var(--muted); font-size:11px; }.pause-card { width:300px; display:grid; gap:11px; }.pause-card b { font-size:33px; }.pause-card small { color:var(--muted); }
.end-overlay { grid-template-columns:1fr; place-items:center; text-align:center; }.end-copy { width:min(560px,90vw); }.end-copy>span { color:var(--coral); font:400 8px/1 "DM Mono",monospace; letter-spacing:.2em; }.end-copy h2 { font-size:clamp(75px,10vw,134px); }.end-score { display:flex; justify-content:space-between; align-items:center; margin:35px 0 25px; padding:18px 0; border-block:1px solid var(--line); font-family:"DM Mono",monospace; }.end-score span { color:var(--muted); font-size:7px; letter-spacing:.14em; }.end-score strong { color:var(--yellow); font-size:24px; font-weight:300; }
footer { position:fixed; z-index:10; left:0; right:0; bottom:0; height:20px; display:flex; justify-content:space-between; align-items:center; padding:0 13px; border-top:1px solid rgba(243,240,231,.08); color:#424a46; font:300 6px/1 "DM Mono",monospace; letter-spacing:.12em; }
@media(max-width:740px){header{height:60px;padding:0 15px}.brand small{display:none}.sector span,.sound span{display:none}.hud{top:78px}.score{left:15px}.quota{top:80px}.attempts{right:15px}.chain-readout{top:155px;left:15px}.overlay{grid-template-columns:1fr;align-content:center;gap:36px;padding:7vh 7vw;overflow-y:auto}h1{font-size:clamp(70px,22vw,112px);margin-block:17px}.orbit-graphic{display:none}.briefing{padding:24px;max-width:none}.briefing p{display:none}.rule-list{grid-template-columns:repeat(3,1fr)}.rule-list div{display:grid;grid-template-columns:1fr;gap:6px;text-align:center;border:0}.rule-list small{display:none}}
@media(prefers-reduced-motion:reduce){.instruction{animation:none}.overlay,.result-card,.pause-card{transition:none}}