/* Layout concept: the page is the night drive — a CRT-lit police band, a road map of sixteen stops, a dashboard you can touch. */
@font-face{font-family:'Pixeloid';src:url('../fonts/PixeloidSans.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:'Pixeloid';src:url('../fonts/PixeloidSans-Bold.ttf') format('truetype');font-weight:700;font-display:swap}
:root{
  --night:#0a0918; --deep:#110e24; --panel:#18142f; --panel-2:#1f1a3b;
  --pink:#ff3aaf; --pink-2:#ff8fce; --blush:#ffe8f5; --red:#ff0050; --cyan:#4fe9ff; --amber:#ffb347;
  --text:#e9e3f6; --muted:#a59dc2; --dim:#6b6487;
  --line:rgba(255,58,175,.28); --line-soft:rgba(233,227,246,.1);
  --px:'Pixeloid','VT323',ui-monospace,monospace;
  --vt:'VT323',ui-monospace,monospace;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--lk-strip-h) + 76px)}
body.rmw{margin:0;background:var(--night);color:var(--text);font-family:var(--px);font-size:15px;line-height:1.75;-webkit-font-smoothing:none;overflow-x:hidden;font-variant-ligatures:none;font-feature-settings:'liga' 0}
body.rmw::after{content:'';position:fixed;inset:0;z-index:90;pointer-events:none;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,.18) 0 1px,transparent 1px 3px),radial-gradient(130% 100% at 50% 45%,transparent 60%,rgba(0,0,0,.45));mix-blend-mode:multiply}
.rmw img{max-width:100%;display:block}
.rmw .px{image-rendering:pixelated}
.rmw a{color:var(--pink-2)}
.rmw h1,.rmw h2,.rmw h3{margin:0;text-wrap:balance;font-weight:700}
.wrap{max-width:1180px;margin:0 auto;padding-inline:clamp(16px,4vw,36px)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
.kicker{font-family:var(--vt);font-size:1.3rem;letter-spacing:.14em;color:var(--cyan);text-transform:uppercase}
.h2{font-size:clamp(1.6rem,3.4vw,2.5rem);line-height:1.15;color:var(--blush);text-shadow:0 0 18px rgba(255,58,175,.45)}
.lead{color:var(--muted);max-width:60ch}
section{padding-block:clamp(72px,10vw,120px);position:relative}

/* game nav */
.rmw-nav{position:sticky;top:var(--lk-strip-h);z-index:70;display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:12px clamp(16px,3vw,32px);margin-top:var(--lk-strip-h);background:rgba(10,9,24,.9);backdrop-filter:blur(6px);border-bottom:1px solid var(--line-soft)}
.rmw-logo{font-weight:700;font-size:.82rem;letter-spacing:.06em;color:var(--blush);text-decoration:none;text-shadow:0 0 10px rgba(255,58,175,.7)}
.rmw-nav nav{display:flex;gap:22px}
.rmw-nav nav a{font-family:var(--vt);font-size:1.2rem;letter-spacing:.08em;color:var(--muted);text-decoration:none}
.rmw-nav nav a:hover{color:var(--blush)}
.btn{display:inline-flex;align-items:center;gap:10px;font-family:var(--px);font-weight:700;font-size:.78rem;letter-spacing:.04em;text-decoration:none;
  padding:12px 18px;cursor:pointer;border:0;transition:transform .15s,background .15s,box-shadow .15s}
.btn-neon{background:var(--pink);color:#16051c;box-shadow:0 0 0 2px var(--night),0 0 0 4px var(--pink),0 0 26px rgba(255,58,175,.5)}
.btn-neon:hover{background:var(--pink-2);transform:translateY(-1px)}
.btn-ghost{background:transparent;color:var(--blush);box-shadow:inset 0 0 0 2px rgba(233,227,246,.4)}
.btn-ghost:hover{box-shadow:inset 0 0 0 2px var(--cyan);color:var(--cyan)}
.btn:focus-visible,.stop:focus-visible,.rbtn:focus-visible,.hot:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}
@media (max-width:760px){.rmw-nav nav{display:none}}

/* hero */
.hero{padding:0;position:relative;background:#06050f}
.hero-art{width:100%;aspect-ratio:1376/768;max-height:calc(100vh - 110px);object-fit:cover;object-position:50% 40%}
.hero-shade{position:absolute;inset:auto 0 0 0;height:45%;background:linear-gradient(to top,var(--night),transparent);pointer-events:none}
.hero-card{position:relative;margin-top:clamp(-150px,-12vw,-60px);z-index:2}
.hero-card .row{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:24px 40px}
.year{font-family:var(--vt);font-size:clamp(1.6rem,3vw,2.2rem);letter-spacing:.3em;color:var(--cyan);text-shadow:0 0 12px rgba(79,233,255,.6)}
.year::after{content:'_';animation:blink 1s steps(1) infinite;margin-left:.1em}
@keyframes blink{50%{opacity:0}}
.hero-card .tagline{font-size:clamp(1.05rem,2vw,1.35rem);line-height:1.5;color:var(--blush);max-width:32ch;margin:6px 0 0}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 0;padding:0;list-style:none}
.chips li{font-family:var(--vt);font-size:1.15rem;line-height:1;padding:7px 10px;border:2px solid rgba(255,58,175,.45);color:var(--pink-2)}
.ctas{display:flex;flex-wrap:wrap;gap:14px}

/* radio player — mirrors the in-game dialogue UI */
#radio{background:linear-gradient(180deg,var(--night),var(--deep))}
.radio-head{display:flex;justify-content:space-between;align-items:end;gap:20px;flex-wrap:wrap;margin-bottom:28px}
.screen{position:relative;aspect-ratio:16/9;overflow:hidden;background:#000;box-shadow:0 0 0 2px #2a2448,0 0 0 6px #0c0a1a,0 0 0 8px #2a2448,0 30px 80px rgba(0,0,0,.6)}
.screen .bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .5s ease}
.screen .bg.off{opacity:0}
.dlg{position:absolute;left:19%;right:19%;bottom:8%;z-index:3}
.dlg .who{display:flex;align-items:end;gap:10px;margin-bottom:6px}
.dlg .who img{width:clamp(28px,3.2vw,48px);height:auto;box-shadow:0 0 0 2px var(--pink)}
.dlg .name{font-weight:700;font-size:clamp(.9rem,1.7vw,1.5rem);line-height:1;color:var(--pink-2);text-shadow:0 0 8px rgba(255,58,175,.6)}
.dlg .ch{font-size:clamp(.62rem,1vw,.9rem);color:var(--text);opacity:.9;line-height:1}
.dlg .ch small{font-size:.7em;color:var(--muted)}
.dlg .box{background:rgba(14,10,24,.78);border-left:2px solid var(--pink);padding:clamp(8px,1.4vw,20px) clamp(10px,1.8vw,26px);min-height:clamp(46px,6vw,104px);
  font-size:clamp(.72rem,1.35vw,1.15rem);line-height:1.55;color:#f2eefb}
.dlg .box .caret{display:inline-block;width:.55em;height:1em;background:var(--pink);vertical-align:-.15em;margin-left:2px;animation:blink 1s steps(1) infinite}
.radio-controls{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;margin-top:22px}
.rbtns{display:flex;gap:10px}
.rbtn{width:46px;height:46px;display:grid;place-items:center;background:var(--panel);color:var(--blush);border:0;box-shadow:inset 0 0 0 2px #3a3260;cursor:pointer;font-family:var(--px);font-size:.9rem}
.rbtn:hover{box-shadow:inset 0 0 0 2px var(--pink);color:var(--pink-2)}
.rbtn.play{width:auto;padding:0 18px;gap:10px;display:flex;align-items:center}
.dial{font-family:var(--vt);font-size:1.5rem;color:var(--amber);letter-spacing:.1em;text-shadow:0 0 10px rgba(255,179,71,.5);background:#120c08;padding:4px 14px;box-shadow:inset 0 0 0 2px #3b2a14}
.ticks{display:flex;gap:6px}
.ticks i{width:18px;height:6px;background:#2d2650}
.ticks i.on{background:var(--pink);box-shadow:0 0 8px var(--pink)}
.radio-note{font-family:var(--vt);font-size:1.15rem;color:var(--dim);margin-top:14px}

/* how it plays — dashboard */
.how{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:clamp(28px,5vw,64px);align-items:center}
.dash{position:relative;box-shadow:0 0 0 2px #2a2448,0 24px 70px rgba(0,0,0,.55)}
.dash img{width:100%}
.hot{position:absolute;width:30px;height:30px;margin:-15px 0 0 -15px;border:0;padding:0;background:transparent;cursor:help}
.hot::before{content:'';position:absolute;inset:4px;border:2px solid var(--pink);box-shadow:0 0 12px var(--pink),inset 0 0 8px rgba(255,58,175,.5);animation:pulse 1.8s ease-in-out infinite}
@keyframes pulse{50%{transform:scale(1.35);opacity:.6}}
.hot .tip{position:absolute;left:50%;bottom:calc(100% + 10px);transform:translateX(-50%);width:max-content;max-width:230px;padding:8px 12px;
  background:rgba(14,10,24,.95);border-left:2px solid var(--pink);font-size:.72rem;line-height:1.5;color:var(--blush);text-align:left;opacity:0;pointer-events:none;transition:opacity .2s}
.hot:hover .tip,.hot:focus-visible .tip{opacity:1}
.nos{display:flex;flex-wrap:wrap;gap:10px;margin:22px 0 26px;padding:0;list-style:none}
.nos li{font-family:var(--vt);font-size:1.3rem;letter-spacing:.08em;color:var(--red);padding:4px 12px;border:2px solid rgba(255,0,80,.55);position:relative}
.nos li::after{content:'';position:absolute;left:6px;right:6px;top:50%;height:2px;background:var(--red);transform:rotate(-6deg)}
.is-list{display:grid;gap:18px;margin:0;padding:0;list-style:none}
.is-list li{display:grid;grid-template-columns:28px minmax(0,1fr);gap:12px}
.is-list b{display:block;color:var(--blush);font-size:.92rem}
.is-list span{color:var(--muted);font-size:.86rem}
.is-list .ic{width:28px;height:28px;display:grid;place-items:center;font-family:var(--vt);font-size:1.3rem;color:var(--night);background:var(--cyan)}
@media (max-width:860px){.how{grid-template-columns:1fr}}

/* the road — sixteen stops */
#road{background:linear-gradient(180deg,var(--deep),var(--night))}
.road-view{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:clamp(20px,3vw,40px);align-items:center;margin-top:30px}
.windshield{position:relative;aspect-ratio:16/9;background:#000;overflow:hidden;box-shadow:0 0 0 2px #2a2448,0 0 0 6px #0c0a1a,0 0 0 8px #2a2448}
.windshield img{width:100%;height:100%;object-fit:cover}
.stop-info .num{font-family:var(--vt);font-size:3.4rem;line-height:1;color:var(--pink);text-shadow:0 0 16px rgba(255,58,175,.6)}
.stop-info .type{font-family:var(--vt);font-size:1.25rem;letter-spacing:.12em;color:var(--cyan);text-transform:uppercase}
.stop-info h3{font-size:1.35rem;color:var(--blush);margin:6px 0 10px}
.stop-info p{color:var(--muted);margin:0}
.track{position:relative;margin-top:40px;overflow-x:auto;padding:26px 4px 12px;scrollbar-color:var(--pink) var(--panel)}
.track ol{display:flex;gap:0;margin:0;padding:0;list-style:none;min-width:900px;position:relative}
.track ol::before{content:'';position:absolute;left:0;right:0;top:19px;height:4px;
  background:repeating-linear-gradient(90deg,var(--amber) 0 14px,transparent 14px 26px);opacity:.55}
.track li{flex:1;display:flex;justify-content:center}
.stop{position:relative;display:flex;flex-direction:column;align-items:center;gap:10px;background:none;border:0;padding:0;cursor:pointer;color:var(--muted);font-family:var(--vt);font-size:1.15rem}
.stop .dot{width:40px;height:40px;display:grid;place-items:center;background:var(--panel);box-shadow:inset 0 0 0 2px #3a3260;color:var(--text);font-size:1.25rem;transition:all .15s}
.stop.drive .dot{border-radius:50%}
.stop:hover .dot{box-shadow:inset 0 0 0 2px var(--cyan);color:var(--cyan)}
.stop[aria-pressed="true"] .dot{background:var(--pink);color:#16051c;box-shadow:0 0 0 3px rgba(255,58,175,.35),0 0 20px var(--pink)}
.stop[aria-pressed="true"]{color:var(--blush)}
.stop.locked .dot{background:repeating-linear-gradient(45deg,#1b1733 0 5px,#100d22 5px 10px);color:var(--dim)}
.legend{display:flex;flex-wrap:wrap;gap:18px;font-family:var(--vt);font-size:1.15rem;color:var(--muted);margin-top:10px}
.legend i{display:inline-block;width:14px;height:14px;background:var(--panel);box-shadow:inset 0 0 0 2px #3a3260;margin-right:8px;vertical-align:-2px}
.legend i.c{border-radius:50%}
@media (max-width:860px){.road-view{grid-template-columns:1fr}}

/* detectives + case file */
.people{display:grid;grid-template-columns:repeat(2,minmax(0,1fr)) minmax(0,1.15fr);gap:20px;margin-top:34px}
.det{background:var(--panel);box-shadow:inset 0 0 0 2px #2c2650;padding:24px;display:grid;gap:14px;align-content:start}
.det img{width:128px;box-shadow:0 0 0 2px var(--pink)}
.det h3{font-size:1.2rem;color:var(--pink-2);text-shadow:0 0 10px rgba(255,58,175,.5)}
.det .freq{font-family:var(--vt);font-size:1.15rem;color:var(--muted)}
.det q{display:block;color:var(--blush);font-size:.9rem;border-left:2px solid var(--pink);padding-left:12px;quotes:none}
.case{background:#efe6cf;color:#2a2116;padding:26px 26px 22px;font-family:var(--vt);font-size:1.3rem;line-height:1.3;position:relative;box-shadow:6px 6px 0 #000;transform:rotate(.6deg)}
.case h3{font-family:var(--vt);font-weight:400;font-size:1.7rem;letter-spacing:.12em;color:#7a1220;border-bottom:2px dashed #b9ab8c;padding-bottom:8px;margin-bottom:12px}
.case dl{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 14px;margin:0}
.case dt{color:#7d6d52}
.case dd{margin:0}
.case .stamp{position:absolute;right:16px;top:14px;color:#c4172f;border:3px solid #c4172f;padding:0 8px;font-size:1.3rem;transform:rotate(8deg);opacity:.85}
@media (max-width:980px){.people{grid-template-columns:1fr 1fr}.case{grid-column:1/-1}}
@media (max-width:560px){.people{grid-template-columns:1fr}}

/* VHS warning */
.vhs{background:#000;color:#fff;text-align:center;padding-block:56px;font-family:var(--vt)}
.vhs .w{font-size:clamp(1.4rem,3vw,2rem);letter-spacing:.2em;color:#4fe9ff;text-shadow:2px 0 var(--red),-2px 0 var(--cyan)}
.vhs p{line-height:1.25;font-size:clamp(1.2rem,2.2vw,1.6rem);max-width:46ch;margin:12px auto 0;color:#d9d4e6}

/* play */
.play-card{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,5vw,64px);align-items:center;background:var(--panel);box-shadow:inset 0 0 0 2px #2c2650;padding:clamp(24px,4vw,48px)}
.price{font-size:clamp(1.5rem,3vw,2.2rem);color:var(--blush);line-height:1.2}
.price small{display:block;font-family:var(--vt);font-size:1.25rem;color:var(--cyan);letter-spacing:.1em;margin-top:6px}
.dl-list{display:grid;gap:10px;margin:0;padding:0;list-style:none}
.dl-list a{display:flex;justify-content:space-between;gap:12px;align-items:center;text-decoration:none;padding:14px 16px;background:var(--night);box-shadow:inset 0 0 0 2px #3a3260;color:var(--blush);font-size:.86rem}
.dl-list a:hover{box-shadow:inset 0 0 0 2px var(--pink)}
.dl-list a span{font-family:var(--vt);font-size:1.2rem;color:var(--muted)}
.meta{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:20px;font-family:var(--vt);font-size:1.15rem;color:var(--muted)}
.meta b{color:var(--amber);font-weight:400}
@media (max-width:860px){.play-card{grid-template-columns:1fr}}

.rmw-foot{border-top:1px solid var(--line-soft);padding-block:36px;font-family:var(--vt);font-size:1.15rem;color:var(--dim)}
.rmw-foot .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px}
.rmw-foot a{color:var(--muted);text-decoration:none;margin-right:18px}
.rmw-foot a:hover{color:var(--blush)}

@media (prefers-reduced-motion:reduce){
  .year::after,.hot::before,.dlg .box .caret{animation:none}
  .screen .bg{transition:none}
}
/* link color reset: .rmw a must not tint buttons */
.rmw .btn-neon{color:#16051c}
.rmw .btn-ghost{color:var(--blush)}
.rmw .btn-ghost:hover{color:var(--cyan)}
.rmw .rmw-logo{color:var(--blush)}

/* ===== Same side margins as the studio site ===== */
.wrap{max-width:none;margin-inline:0;padding-inline:var(--edge)}
.hero-art{max-height:calc(100vh - 80px)}

/* ===== Play in the browser (itch.io embed) ===== */
.play-sec{background:var(--night)}
.player{position:relative;aspect-ratio:16/9;background:#000;overflow:hidden;box-shadow:0 0 0 2px #2a2448,0 0 0 6px #0c0a1a,0 0 0 8px #2a2448,0 30px 80px rgba(0,0,0,.6)}
.player .poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.6)}
.player iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.player .launch{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;align-items:center;gap:14px;font-family:var(--px);font-weight:700;font-size:1rem;
  padding:18px 34px;background:var(--pink);color:#16051c;border:0;cursor:pointer;box-shadow:0 0 0 3px var(--night),0 0 0 6px var(--pink),0 0 40px rgba(255,58,175,.6)}
.player .launch:hover{background:var(--pink-2)}
.player .launch .tri{width:0;height:0;border-left:14px solid currentColor;border-top:9px solid transparent;border-bottom:9px solid transparent}
.player .launch:focus-visible{outline:2px solid var(--cyan);outline-offset:6px}
.player .hint{position:absolute;left:0;right:0;bottom:18px;text-align:center;font-family:var(--vt);font-size:1.2rem;color:var(--muted);margin:0}
.player.live .poster,.player.live .launch,.player.live .hint{display:none}
.player-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;margin-top:20px;font-family:var(--vt);font-size:1.2rem}
.player-bar .rbtn{width:auto;padding:0 16px;gap:10px;display:flex;align-items:center}
.player-bar .rbtn[hidden]{display:none}
.player-bar a{color:var(--muted)}
.player-bar a:hover{color:var(--blush)}