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

:root { --ink:#eee8e5; --muted:#8f8589; --hot:#c83b57; --cyan:#8b263d; --line:#30262c; --bg:#08070a; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; color:var(--ink); background:var(--bg); font-family:'Space Mono',monospace; }
body { overflow:hidden; }
body:before { content:''; position:fixed; inset:0; opacity:.23; pointer-events:none; background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px); background-size:40px 40px; }
.cabinet { width:min(1160px,calc(100% - 48px)); margin:0 auto; min-height:100vh; display:flex; flex-direction:column; }
.topbar { height:88px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); }
.brand { font:800 22px 'Barlow Condensed',sans-serif; letter-spacing:3px; }.brand span { color:var(--hot); }.brand-mark { font-size:22px; margin-right:9px; color:var(--hot)!important; }
.status { color:var(--muted); font-size:10px; letter-spacing:1.5px; }.status i { display:inline-block; width:7px; height:7px; margin-right:8px; border-radius:50%; background:var(--cyan); box-shadow:0 0 12px var(--cyan); }
.game-shell { display:grid; grid-template-columns: .8fr 1.2fr; align-items:center; gap:70px; flex:1; padding:70px 0 60px; }
.eyebrow { color:#ff3d2e; font-size:10px; font-weight:700; letter-spacing:2px; margin:0 0 21px; }.game-copy h1 { margin:0; font:900 clamp(70px,9vw,116px)/.76 'Barlow Condensed',sans-serif; letter-spacing:-2px; }.game-copy h1 em { color:var(--hot); font-style:normal; }.intro { color:var(--muted); line-height:1.8; font-size:12px; margin:32px 0 28px; }
button { cursor:pointer; font-family:inherit; }.start-button { border:0; color:#fff; background:var(--hot); padding:16px 20px; font:700 12px 'Space Mono',monospace; letter-spacing:.5px; transition:transform .2s,background .2s; }.start-button:hover,.overlay-button:hover { background:#ff704b; transform:translateY(-2px); }.start-button b { font-size:18px; margin-left:28px; }.controls { display:flex; gap:22px; color:#68686f; font-size:9px; margin-top:24px; letter-spacing:1px; }
.screen-wrap { position:relative; }.screen-label { color:var(--muted); font-size:10px; letter-spacing:1.5px; margin-bottom:12px; }.screen-label span { float:right; color:var(--hot); font-size:9px; }.game-frame { position:relative; overflow:hidden; border:1px solid #45464e; background:#080b12; box-shadow:0 0 0 7px #17181d, 0 25px 80px rgba(0,0,0,.5); }.game-frame:after { content:''; position:absolute; inset:0; border:1px solid rgba(101,229,220,.12); pointer-events:none; } canvas { display:block; width:100%; height:auto; image-rendering:auto; }.scanlines { position:absolute; inset:0; pointer-events:none; opacity:.13; background:repeating-linear-gradient(0deg,transparent 0 3px,#fff 4px); mix-blend-mode:overlay; }
.overlay { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; background:rgba(6,9,16,.72); }.overlay.hidden { display:none; }.overlay-kicker { color:var(--cyan); font-size:10px; letter-spacing:4px; }.overlay h2 { margin:12px 0 10px; font:800 43px/.86 'Barlow Condensed',sans-serif; letter-spacing:1px; }.overlay h2 strong { color:var(--hot); }.overlay p:not(.overlay-kicker) { color:#aaa; font-size:10px; }.overlay-button { color:#111; border:0; background:var(--cyan); padding:13px 18px; margin-top:20px; font-size:10px; font-weight:700; transition:transform .2s; }
.overlay.scare { background:radial-gradient(circle,rgba(120,0,18,.35),rgba(0,0,0,.96) 68%); animation:scarePulse .16s steps(2) infinite; }.overlay.scare h2 { color:#eee; text-shadow:0 0 18px #c83b57,3px 0 #c83b57; letter-spacing:4px; }.overlay.scare h2 strong { color:#ff2949; } @keyframes scarePulse { 50% { transform:translate(3px,-2px); filter:contrast(1.35); } }
.footer { border-top:1px solid var(--line); color:#68686f; display:flex; justify-content:space-between; padding:20px 0; font-size:9px; letter-spacing:1px; }.footer strong { color:var(--cyan); margin-left:7px; }.footer-tip { color:#8d5950; }.mobile-controls { display:none; }
/* Immersive play mode: the maze is the whole experience. */
.cabinet { width:100%; height:100vh; min-height:0; }
.topbar, .game-copy, .screen-label, .footer { display:none; }
.game-shell { display:block; padding:0; height:100vh; }
.screen-wrap { width:100vw; height:100vh; }
.game-frame { width:100%; height:100%; border:0; box-shadow:none; display:flex; align-items:center; justify-content:center; }
.game-frame canvas { width:100%; height:100%; object-fit:contain; }
.mobile-controls { position:absolute; z-index:4; left:50%; bottom:20px; transform:translateX(-50%); width:min(320px,80vw); }
@media (max-width:760px) { .cabinet { width:calc(100% - 30px); }.topbar { height:68px; }.status { font-size:8px; }.game-shell { display:flex; flex-direction:column; align-items:stretch; gap:42px; padding:48px 0 35px; }.game-copy h1 { font-size:82px; }.intro { margin:24px 0; }.controls { display:none; }.game-frame { box-shadow:0 0 0 4px #17181d,0 18px 40px rgba(0,0,0,.5); }.footer { flex-wrap:wrap; gap:12px; line-height:1.5; }.footer-tip { width:100%; order:3; }.mobile-controls { display:flex; gap:8px; margin-top:18px; }.mobile-controls button { flex:1; color:var(--cyan); background:#171920; border:1px solid #353741; padding:12px; font-weight:700; }.mobile-controls button:nth-child(2) { color:var(--hot); } }
@media (max-width:760px) { .cabinet,.game-shell,.screen-wrap { width:100vw; height:100vh; min-height:0; }.game-shell { display:block; padding:0; }.game-frame { width:100%; height:100%; box-shadow:none; }.game-frame canvas { width:100%; height:100%; object-fit:contain; }.mobile-controls { position:absolute; margin:0; bottom:18px; } }