:root {
  --bg: #0b0d0e; --panel: #15191bee; --ink: #e9e4d8; --muted: #a49e90; --accent: #e8b25a; --green: #6dff8f; --red: #ff4a3d;
  --line: #ffffff1c; --serif: 'IM Fell English', Georgia, serif; --sans: Inter, system-ui, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--ink); font: 16px/1.55 var(--sans); }
button { font: inherit; color: inherit; cursor: pointer; }
.skip-link { position: absolute; left: -999px; top: 8px; background: var(--accent); color: #000; padding: 8px 12px; z-index: 99; }
.skip-link:focus { left: 8px; }
.btn { border: 1px solid var(--line); background: #ffffff10; border-radius: 10px; padding: 11px 18px; font-weight: 600; transition: background .15s, transform .1s; }
.btn:hover { background: #ffffff1e; }
.btn:active { transform: translateY(1px); }
.btn.primary { background: var(--accent); color: #1a1206; border-color: transparent; }
.btn.primary:hover { background: #f5c470; }
.btn.primary:disabled { opacity: .55; cursor: wait; }
.btn.big { font-size: 1.15rem; padding: 15px 28px; box-shadow: 0 0 40px #e8b25a40; }
.btn.ghost { background: transparent; }
.icon-btn { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); background: #0008; display: grid; place-items: center; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------- Landing ---------- */
.welcome { position: relative; min-height: 100vh; overflow: hidden; }
.welcome-art { position: absolute; inset: 0; height: 100vh; background: radial-gradient(ellipse at 50% 40%, #2a3a3044 0, #0000 60%), linear-gradient(#0b1014, #0b0d0e); }
.welcome-art canvas { width: 100%; height: 100%; display: block; }
.welcome-content { position: relative; max-width: 720px; margin: 0 auto; padding: 22vh 20px 40px; text-align: center; min-height: 100vh; }
.eyebrow { text-transform: uppercase; letter-spacing: .22em; font-size: .78rem; color: var(--muted); margin: 0 0 8px; }
h1 { font: 400 clamp(2rem, 4vw, 3rem)/1.1 var(--serif); margin: 0 0 14px; text-shadow: 0 0 30px #000; }
.welcome-intro { font: italic 1.3rem var(--serif); color: #d4cdbd; margin: 0 0 30px; }
.cta-row { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.quick-settings { display: flex; gap: 18px; justify-content: center; align-items: center; flex-wrap: wrap; margin: 22px 0 6px; }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.seg button { border: 0; background: transparent; padding: 8px 14px; min-height: 44px; font-size: .9rem; color: var(--muted); }
.seg button[aria-checked="true"] { background: #ffffff1c; color: var(--ink); }
.check { display: inline-flex; gap: 8px; align-items: center; min-height: 44px; font-size: .92rem; color: #cfc8b8; cursor: pointer; }
.check input { width: 18px; height: 18px; accent-color: var(--accent); }
.local-note { color: var(--muted); font-size: .9rem; }
.status-text { color: var(--muted); font-size: .85rem; min-height: 1.4em; }
.my-haunts { margin: 26px auto 0; max-width: 460px; text-align: left; }
.my-haunts h2 { font: 400 1.3rem var(--serif); margin: 0 0 8px; }
.my-haunts ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.my-haunts li { display: flex; gap: 8px; align-items: center; background: #ffffff0a; border: 1px solid var(--line); border-radius: 10px; padding: 6px 6px 6px 12px; }
.my-haunts li span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.my-haunts li button { border: 0; background: #ffffff12; border-radius: 8px; padding: 6px 10px; font-size: .85rem; }
.how-it-works, .help-copy { position: relative; max-width: 760px; margin: 0 auto; padding: 0 20px 40px; }
.how-it-works h2, .help-copy h2 { font: 400 1.8rem var(--serif); }
.how-it-works ol { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }
.how-it-works li { background: #ffffff08; border: 1px solid var(--line); border-radius: 12px; padding: 14px; display: grid; gap: 4px; }
.how-it-works li span { color: var(--muted); font-size: .9rem; }
.help-copy h3 { font: 400 1.25rem var(--serif); margin: 24px 0 4px; color: var(--accent); }
.help-copy p { color: #cfc8b8; }
.help-copy a { color: var(--accent); }

/* ---------- Game ---------- */
.game { position: fixed; inset: 0; background: #000; z-index: 50; overflow: hidden; touch-action: none; user-select: none; -webkit-user-select: none; }
.game[hidden] { display: none; }
#scene { position: absolute; inset: 0; width: 100%; height: 100%; display: block; outline: none; }
.grain { position: absolute; inset: -50%; pointer-events: none; animation: grain .5s steps(6) infinite; opacity: .9; }
@keyframes grain { 0% { transform: translate(0, 0); } 20% { transform: translate(-7%, 5%); } 40% { transform: translate(6%, -8%); } 60% { transform: translate(-4%, 9%); } 80% { transform: translate(9%, 2%); } }
.vignette { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at center, #0000 45%, #000a 85%, #000 115%); }
.flash { position: absolute; inset: 0; pointer-events: none; opacity: 0; background: #fff; }
.hud { position: absolute; inset: 0; pointer-events: none; }
.hud > * { pointer-events: auto; }
.hud-top { position: absolute; top: max(12px, env(safe-area-inset-top)); left: 12px; right: 12px; display: flex; align-items: center; gap: 12px; pointer-events: none; }
.hud-top > * { pointer-events: auto; }
.room-label { flex: 1; text-align: center; font: italic 1.5rem var(--serif); color: #e9e4d8; text-shadow: 0 0 12px #000; opacity: 0; transition: opacity 1.2s; pointer-events: none; }
.room-label.show { opacity: .92; }
.dots { display: flex; gap: 6px; }
.dots i { width: 8px; height: 8px; border-radius: 50%; background: #ffffff26; }
.dots i.done { background: #e9e4d880; }
.dots i.here { background: var(--accent); box-shadow: 0 0 8px var(--accent); }
.dots i.exit.here, .dots i.exit.done { background: var(--green); }
.hint { position: absolute; left: 50%; bottom: 120px; transform: translateX(-50%); background: #000a; border: 1px solid var(--line); border-radius: 999px; padding: 9px 18px; font-size: .95rem; opacity: 0; transition: opacity .4s; white-space: nowrap; pointer-events: none; max-width: calc(100vw - 32px); overflow: hidden; text-overflow: ellipsis; }
.hint.show { opacity: 1; }
.run-banner { position: absolute; left: 50%; top: 22%; transform: translateX(-50%); font: 900 clamp(3rem, 12vw, 7rem)/1 var(--sans); letter-spacing: .1em; color: var(--red); text-shadow: 0 0 30px #f00a; animation: pulse .45s infinite alternate; pointer-events: none; }
@keyframes pulse { to { transform: translateX(-50%) scale(1.08); opacity: .7; } }
.door-btn { position: absolute; left: 50%; bottom: 46px; transform: translateX(-50%); background: #0009; border: 1px solid #e8b25a88; color: var(--ink); border-radius: 999px; padding: 13px 24px; font-weight: 600; font-size: 1.05rem; box-shadow: 0 0 24px #e8b25a33; }
.door-btn kbd { font: 600 .8rem var(--sans); border: 1px solid var(--line); border-radius: 5px; padding: 1px 6px; margin-left: 6px; opacity: .8; }
.walk-btn { position: absolute; left: max(20px, env(safe-area-inset-left)); bottom: max(26px, env(safe-area-inset-bottom)); width: 104px; height: 104px; border-radius: 50%; border: 2px solid #ffffff40; background: #0007; font-weight: 700; letter-spacing: .1em; display: none; touch-action: none; }
.walk-btn.on { background: #e8b25a44; border-color: var(--accent); }
.torch-btn { position: absolute; right: max(20px, env(safe-area-inset-right)); bottom: max(34px, env(safe-area-inset-bottom)); display: none; width: 56px; height: 56px; font-size: 1.4rem; }
.torch-btn[aria-pressed="false"] { opacity: .45; }
.touch .walk-btn, .touch .torch-btn { display: grid; place-items: center; }
.touch .door-btn kbd, .touch .hint kbd { display: none; }
.caption { position: absolute; left: 50%; bottom: 168px; transform: translateX(-50%); margin: 0; color: #fff; background: #000c; padding: 4px 10px; border-radius: 6px; font-size: .9rem; opacity: 0; transition: opacity .3s; pointer-events: none; }
.caption.show { opacity: 1; }
.loading { position: absolute; inset: 0; display: grid; place-items: center; background: #000; font: italic 1.4rem var(--serif); color: var(--muted); transition: opacity 1.2s; pointer-events: none; }
.loading.gone { opacity: 0; }

/* ---------- Panels ---------- */
dialog.panel { background: var(--panel); color: var(--ink); border: 1px solid var(--line); border-radius: 16px; padding: 22px; max-width: min(560px, calc(100vw - 24px)); width: 100%; backdrop-filter: blur(8px); }
dialog::backdrop { background: #000a; }
dialog h2 { font: 400 1.8rem var(--serif); margin: 0 0 14px; }
.pause-grid { display: grid; gap: 14px; }
.row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.range { display: flex; gap: 12px; align-items: center; font-size: .92rem; }
.range input { flex: 1; accent-color: var(--accent); }
.end { text-align: center; }
.end .row { justify-content: center; }
.rating { font: 400 2.2rem var(--serif); color: var(--accent); margin: 4px 0; }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 18px 0; }
.stats div { background: #ffffff0a; border-radius: 10px; padding: 10px 6px; }
.stats dt { font-size: .78rem; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; }
.stats dd { margin: 0; font-size: 1.6rem; font-weight: 700; }
.builder { max-width: min(720px, calc(100vw - 16px)); max-height: calc(100dvh - 24px); overflow: auto; }
.builder-head { display: flex; justify-content: space-between; align-items: center; }
.builder-head h2 { margin: 0; }
.name-field { display: grid; gap: 6px; font-size: .9rem; color: var(--muted); margin: 14px 0 6px; }
.name-field input, .room-list select { background: #0006; border: 1px solid var(--line); color: var(--ink); border-radius: 8px; padding: 9px 10px; font: inherit; width: 100%; min-width: 0; }
.builder-help { color: var(--muted); font-size: .88rem; margin: 6px 0 12px; }
.room-list { list-style: none; padding: 0; margin: 0 0 12px; display: grid; gap: 8px; counter-reset: room; }
.room-list li { display: grid; grid-template-columns: 26px 1fr 1fr auto; gap: 8px; align-items: center; background: #ffffff08; border: 1px solid var(--line); border-radius: 10px; padding: 8px; counter-increment: room; }
.room-list li::before { content: counter(room); color: var(--accent); font-weight: 700; text-align: center; }
.room-list li.exit { grid-template-columns: 26px 1fr; color: var(--green); }
.room-list li.exit::before { content: '⌂'; color: var(--green); }
.room-list .tell { grid-column: 2 / -1; font-size: .82rem; color: var(--muted); margin-top: -2px; }
.room-list .tools { display: flex; gap: 4px; }
.room-list .tools button { width: 34px; height: 34px; border-radius: 8px; border: 1px solid var(--line); background: #ffffff0c; }
.room-list .tools button:disabled { opacity: .3; }
.builder-msg { color: var(--accent); font-size: .88rem; }
.builder-actions { margin-top: 10px; }
.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%) translateY(20px); background: #1d2224; border: 1px solid var(--line); border-radius: 999px; padding: 10px 18px; opacity: 0; transition: .3s; z-index: 200; pointer-events: none; }
.toast.show { opacity: 1; transform: translateX(-50%); }
.noscript { text-align: center; padding: 20px; }

@media (max-width: 560px) {
  .welcome-content { padding-top: 16vh; }
  .room-list li { grid-template-columns: 22px 1fr auto; }
  .room-list li select.scare { grid-column: 2 / 4; }
  .room-list li .tools { grid-row: 1; grid-column: 3; }
  .hint { bottom: 150px; font-size: .88rem; }
  .room-label { font-size: 1.15rem; }
  .stats dd { font-size: 1.3rem; }
}
@media (prefers-reduced-motion: reduce) { .grain, .run-banner { animation: none; } }
body.in-game random-express-nav { display: none !important; }
body.in-game { overflow: hidden; }