:root{
  --bg:#080a0b;--panel:#101416;--panel2:#151a1c;--line:#293034;
  --text:#edf1ed;--muted:#8d9997;--acid:#d9ff58;--cyan:#63e0d1;
  --max:1220px;
}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;min-height:100vh}
body:before{content:"";position:fixed;inset:0;background:radial-gradient(circle at 80% 15%,rgba(217,255,88,.08),transparent 28%),radial-gradient(circle at 15% 80%,rgba(99,224,209,.06),transparent 25%);pointer-events:none}
.grain{position:fixed;inset:0;opacity:.035;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)'/%3E%3C/svg%3E")}
.topbar{height:78px;max-width:var(--max);margin:auto;display:flex;align-items:center;justify-content:space-between;padding:0 28px;border-bottom:1px solid rgba(255,255,255,.07)}
.brand{display:flex;align-items:center;gap:11px;color:var(--text);text-decoration:none;font-weight:900;letter-spacing:.18em;font-size:13px}.brand-mark{display:grid;place-items:center;width:31px;height:31px;border:1px solid var(--acid);color:var(--acid);font-weight:900;font-size:15px}
.top-status{font:700 10px/1 ui-monospace,monospace;letter-spacing:.15em;color:var(--muted)}.dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--acid);box-shadow:0 0 12px rgba(217,255,88,.6);margin-right:8px}
.hero-shell{max-width:var(--max);margin:0 auto;padding:105px 28px 120px;display:grid;grid-template-columns:1.25fr .75fr;gap:80px;align-items:center}
.eyebrow,.section-kicker{font:800 10px/1 ui-monospace,monospace;letter-spacing:.25em;color:var(--acid);margin-bottom:22px}
h1{font-size:clamp(45px,6.3vw,86px);line-height:.94;letter-spacing:-.065em;margin:0 0 28px;max-width:850px}h1 em{font-style:normal;color:#78827f}
.lead{max-width:650px;color:#aab4b1;font-size:18px;line-height:1.65}.hero-actions{display:flex;gap:12px;margin:38px 0 28px;flex-wrap:wrap}
.btn{border:0;padding:15px 19px;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:25px;font-weight:900;font-size:11px;letter-spacing:.12em;cursor:pointer}.btn-primary{background:var(--acid);color:#0a0c0c}.btn-primary:hover{filter:brightness(1.08);transform:translateY(-1px)}.btn-ghost{color:var(--text);border:1px solid var(--line);background:rgba(255,255,255,.02)}
.hero-meta{display:flex;gap:15px;align-items:center;color:#67716f;font:700 9px ui-monospace,monospace;letter-spacing:.12em}.hero-meta i{width:3px;height:3px;background:#56605e;border-radius:50%}
.case-card{border:1px solid var(--line);background:var(--panel);padding:12px;box-shadow:0 30px 90px rgba(0,0,0,.35);transform:rotate(1.5deg)}.case-top,.case-bottom{display:flex;justify-content:space-between;padding:12px 8px;font:700 9px ui-monospace,monospace;letter-spacing:.12em;color:#6e7a77}.case-live{color:var(--acid)}.case-live b{display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--acid);margin-right:6px}.case-image{height:365px;position:relative;overflow:hidden;background:linear-gradient(135deg,#182022,#0c1011);border:1px solid #30383a}.case-image:after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 49%,rgba(217,255,88,.05) 50%,transparent 51%),linear-gradient(90deg,transparent 49%,rgba(217,255,88,.04) 50%,transparent 51%);background-size:100% 44px,44px 100%;opacity:.65}.radar{position:absolute;width:270px;height:270px;border:1px solid rgba(99,224,209,.22);border-radius:50%;left:50%;top:48%;transform:translate(-50%,-50%);box-shadow:0 0 0 45px rgba(99,224,209,.02),0 0 0 90px rgba(99,224,209,.02)}.pin{position:absolute;width:10px;height:10px;border-radius:50%;background:var(--acid);box-shadow:0 0 18px rgba(217,255,88,.6);z-index:2}.pin-a{left:36%;top:37%}.pin-b{left:65%;top:53%}.pin-c{left:49%;top:68%}.case-label{position:absolute;z-index:3;left:24px;bottom:22px;font:900 25px/1.05 ui-monospace,monospace;letter-spacing:-.06em}.case-label small{font-size:8px;letter-spacing:.18em;color:#8b9895}.case-bottom strong{color:#dfe7e3}
.how{border-top:1px solid var(--line);max-width:var(--max);margin:auto;padding:80px 28px 110px}.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}.steps article{background:var(--bg);padding:34px;min-height:220px}.steps b{color:var(--acid);font:700 10px ui-monospace,monospace}.steps h2{font-size:28px;letter-spacing:-.04em}.steps p{color:#818d8a;line-height:1.6;max-width:300px}
footer{max-width:var(--max);margin:auto;padding:24px 28px 50px;border-top:1px solid var(--line);display:flex;justify-content:space-between;color:#596360;font:700 9px ui-monospace,monospace;letter-spacing:.12em}
.join-shell,.lobby-shell{max-width:900px;margin:auto;padding:100px 28px}.join-card{max-width:580px;margin:auto;border:1px solid var(--line);background:var(--panel);padding:44px}.join-card h1{font-size:54px}.join-card p{color:var(--muted);line-height:1.6}.join-card label{display:block;margin:35px 0 9px;color:#71807c;font:800 9px ui-monospace,monospace;letter-spacing:.15em}.join-card input{width:100%;padding:18px;background:#090c0d;border:1px solid #30383a;color:var(--text);font:800 23px ui-monospace,monospace;letter-spacing:.18em;text-transform:uppercase;outline:none}.join-card input:focus{border-color:var(--acid)}.join-card button{margin-top:14px;width:100%}.tiny{margin-top:20px;color:#5d6865;font-size:11px}
.lobby-head{display:flex;justify-content:space-between;align-items:end;border-bottom:1px solid var(--line);padding-bottom:28px}.lobby-head h1{font-size:55px;margin-bottom:12px}.lobby-head p{color:var(--muted)}.lobby-head strong{color:var(--acid);font-family:ui-monospace,monospace;letter-spacing:.15em}.count{font:900 30px ui-monospace,monospace;color:#64706d}.player-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:28px 0}.player{background:var(--panel);border:1px solid var(--line);padding:18px;display:flex;align-items:center;gap:14px}.avatar{width:42px;height:42px;display:grid;place-items:center;background:#1d2525;color:var(--acid);font-weight:900}.player strong{display:block}.player small{display:block;color:#687470;font:700 8px ui-monospace,monospace;letter-spacing:.15em;margin-top:4px}.player>i{margin-left:auto;width:6px;height:6px;background:var(--acid);border-radius:50%}.player.empty{opacity:.45}.player.empty>span{border:1px dashed #4b5552;background:none;color:#687470}.lobby-foot{display:flex;justify-content:space-between;align-items:center;padding-top:12px}.lobby-foot span{font:700 9px ui-monospace,monospace;color:#687470}.lobby-foot .dot{background:var(--acid)}
@media(max-width:850px){.hero-shell{grid-template-columns:1fr;gap:55px;padding-top:70px}.case-card{max-width:560px}.steps{grid-template-columns:1fr}.hero-meta{flex-wrap:wrap}.lobby-head{align-items:start;gap:25px}.player-grid{grid-template-columns:1fr}}
@media(max-width:520px){.topbar{padding:0 18px}.hero-shell,.how,.join-shell,.lobby-shell{padding-left:18px;padding-right:18px}.hero-shell{padding-top:55px}.hero h1{font-size:46px}.case-image{height:300px}.join-card{padding:28px 22px}.join-card h1,.lobby-head h1{font-size:42px}.lobby-foot{align-items:stretch;flex-direction:column;gap:18px}.lobby-foot .btn{width:100%}footer{padding-left:18px;padding-right:18px;gap:20px;flex-direction:column}}

.case-option{display:flex!important;align-items:center;gap:14px;border:1px solid var(--line);padding:18px;margin:10px 0;background:#0b0e0f}.case-option input{accent-color:var(--acid)}.case-option strong{display:block}.case-option small{display:block;color:#687470;font:700 8px ui-monospace,monospace;letter-spacing:.1em;margin-top:5px}.case-code{font:900 42px ui-monospace,monospace;letter-spacing:.15em;color:var(--acid)}.invite-box{border:1px solid var(--line);background:#0b0e0f;padding:18px;margin:28px 0}.invite-box span{display:block;color:#65716e;font:800 8px ui-monospace,monospace;letter-spacing:.15em;margin-bottom:7px}.invite-box strong{font:900 30px ui-monospace,monospace;color:var(--acid);letter-spacing:.18em}.join-player-form{border:1px solid var(--line);padding:22px;background:var(--panel);margin:25px 0}.join-player-form label{display:block;color:#71807c;font:800 9px ui-monospace,monospace;letter-spacing:.15em;margin-bottom:8px}.join-player-form input{width:100%;padding:15px;background:#090c0d;border:1px solid #30383a;color:var(--text);margin-bottom:12px}.error-box,.success-box{padding:14px 16px;border:1px solid #4d3a3a;background:#211617;color:#ffb8b8;margin:15px 0}.success-box{border-color:#536333;background:#151d0e;color:var(--acid)}.game-shell{max-width:1280px;margin:auto;padding:55px 28px;display:grid;grid-template-columns:280px 1fr;gap:45px}.case-nav{border-right:1px solid var(--line);padding-right:30px}.case-stamp{font:800 9px ui-monospace,monospace;color:var(--acid);letter-spacing:.2em}.case-nav h1{font-size:42px;margin:18px 0}.case-nav p{color:#7d8885;line-height:1.6}.nav-block{border-top:1px solid var(--line);padding:16px 0}.nav-block span{display:block;color:#56615e;font:800 8px ui-monospace,monospace;letter-spacing:.15em;margin-bottom:6px}.game-clock{font:900 19px ui-monospace,monospace;color:var(--acid);margin-left:auto;margin-right:25px}.evidence-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.evidence-card,.puzzle-card{background:var(--panel);border:1px solid var(--line);padding:24px}.evidence-type,.puzzle-card>div>span{font:800 8px ui-monospace,monospace;color:var(--cyan);letter-spacing:.16em}.evidence-card h2,.puzzle-card h2{font-size:21px}.evidence-card p,.puzzle-card p{color:#8d9895;line-height:1.6}.puzzle-kicker{margin-top:45px}.puzzle-card{display:flex;justify-content:space-between;gap:25px;align-items:center;margin-bottom:12px}.puzzle-card form{display:flex;gap:8px;min-width:330px}.puzzle-card input{background:#090c0d;border:1px solid var(--line);color:var(--text);padding:13px;width:170px}.solved{color:var(--acid);font:900 10px ui-monospace,monospace;letter-spacing:.15em}@media(max-width:850px){.game-shell{grid-template-columns:1fr}.case-nav{border-right:0;border-bottom:1px solid var(--line);padding:0 0 25px}.evidence-grid{grid-template-columns:1fr}.puzzle-card{display:block}.puzzle-card form{min-width:0;margin-top:20px}}@media(max-width:520px){.game-shell{padding:35px 18px}.puzzle-card form{flex-direction:column}.puzzle-card input{width:100%}.puzzle-card .btn{width:100%}}

/* Solo mode */
.mode-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:18px 0}.mode-option{display:block;cursor:pointer}.mode-option input{position:absolute;opacity:0}.mode-option span{display:block;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.025);padding:18px;border-radius:14px;min-height:110px;transition:.2s}.mode-option input:checked+span{border-color:#c7ff3d;box-shadow:0 0 0 1px rgba(199,255,61,.2),0 10px 35px rgba(0,0,0,.18)}.mode-option b{display:block;font-size:14px;letter-spacing:.14em;margin-bottom:8px}.mode-option small{display:block;color:#9aa3ad;line-height:1.5}.solo-name{margin:10px 0 18px}.solo-name label{display:block;font-size:11px;letter-spacing:.13em;color:#8e969f;margin-bottom:7px}.solo-name label span{opacity:.55}.solo-callout{border:1px solid rgba(199,255,61,.2);background:rgba(199,255,61,.045);padding:13px 14px;border-radius:12px;margin:18px 0}.solo-callout span{display:block;font-size:10px;letter-spacing:.14em;color:#c7ff3d;margin-bottom:5px}.solo-callout strong{font-size:12px;line-height:1.4}.role-list{margin-top:24px}.role-list>span{display:block;font-size:10px;letter-spacing:.14em;color:#747c84;margin-bottom:8px}.role-row{display:flex;align-items:center;gap:9px;padding:8px 0;font-size:12px}.role-row b{width:20px;height:20px;display:grid;place-items:center;border-radius:50%;font-size:10px;background:rgba(255,255,255,.07);color:#727a83}.role-row.is-unlocked b{background:rgba(199,255,61,.12);color:#c7ff3d}.role-row.is-locked{opacity:.42}.role-row.is-unlocked span{color:#f0f2f4}@media(max-width:700px){.mode-grid{grid-template-columns:1fr}.mode-option span{min-height:0}}

/* Investigation progression */
.progress-strip{margin:0 0 26px;padding:16px 18px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.025);border-radius:14px}.progress-strip>div:first-child{display:flex;justify-content:space-between;align-items:center;gap:20px}.progress-strip span{font-size:10px;letter-spacing:.18em;color:#8d98a6}.progress-strip strong{font-size:12px;letter-spacing:.1em}.progress-strip small{display:block;color:#7d8794;margin-top:10px}.progress-track{height:5px!important;background:#1a222b;border-radius:99px;overflow:hidden;margin-top:12px}.progress-track i{display:block;height:100%;background:linear-gradient(90deg,#c9ff36,#53e6ff);border-radius:99px;transition:width .5s ease}.puzzle-card.is-solved{border-color:rgba(201,255,54,.25)}.case-complete{position:fixed;inset:0;display:grid;place-items:center;padding:24px;background:rgba(5,8,12,.72);backdrop-filter:blur(10px);z-index:20}.complete-card{max-width:560px;width:100%;padding:42px;border:1px solid rgba(201,255,54,.35);border-radius:24px;background:#0d1218;box-shadow:0 25px 80px rgba(0,0,0,.45);text-align:center}.complete-card>span{font-size:11px;letter-spacing:.2em;color:#c9ff36}.complete-card h2{font-size:34px;margin:12px 0}.complete-card p{color:#a8b1bd;line-height:1.6}.complete-mark{width:58px;height:58px;margin:28px auto 0;display:grid;place-items:center;border:1px solid rgba(201,255,54,.5);border-radius:16px;color:#c9ff36;font-weight:800}