:root { --bg:#0a0a10; --ink:#f4f0ff; --fun:#ff2bd6; --facts:#3de8ff; --asphalt:#12121a; --font:ui-sans-serif,system-ui,sans-serif; --cyber:ui-monospace,monospace; }
* { box-sizing:border-box; margin:0; padding:0; }
html,body { min-height:100dvh; background:radial-gradient(120% 80% at 50% 100%,#1a1024 0%,#0a0a10 55%); color:var(--ink); font-family:var(--font); overflow:hidden; }
#rain { position:fixed; inset:0; pointer-events:none; z-index:1; }
.rail,.chips,.streets,.note { position:relative; z-index:2; }
.rail { display:flex; justify-content:space-between; align-items:center; padding:max(14px,env(safe-area-inset-top)) 18px 0; }
.mark { color:var(--ink); text-decoration:none; letter-spacing:0.28em; font-family:var(--cyber); font-size:12px; }
nav { display:flex; gap:8px; }
.btn { min-height:48px; padding:0 14px; border:1px solid #2a2433; background:transparent; color:var(--ink); font:inherit; font-size:12px; cursor:pointer; }
.sheet-only { display:none; }
.rail-only { display:inline-flex; align-items:center; justify-content:center; text-decoration:none; }
.chips { display:none; }
.streets { display:grid; grid-template-columns:1fr 1fr; height:calc(100dvh - 110px); gap:0; }
.street { position:relative; background:linear-gradient(180deg,transparent,var(--asphalt)); border-left:1px solid #1b1822; }
.street.fun { box-shadow:inset 8px 0 40px rgba(255,43,214,0.12); }
.street.facts { box-shadow:inset -8px 0 40px rgba(61,232,255,0.12); }
.sign { position:absolute; transform:translate(-50%,-50%); min-height:48px; padding:6px 12px; border:1px solid currentColor; background:rgba(10,10,16,0.72); color:inherit; font-family:var(--cyber); font-size:12px; letter-spacing:0.06em; text-decoration:none; }
.street.fun .sign { color:var(--fun); }
.street.facts .sign { color:var(--facts); }
.sign:hover,.sign.hot { background:rgba(255,255,255,0.06); text-shadow:0 0 12px currentColor; animation:flicker 180ms steps(2) 2; }
.sign.steam::after { content:""; position:absolute; inset:-10px -6px auto; height:18px; background:radial-gradient(ellipse,rgba(244,240,255,0.28),transparent 70%); pointer-events:none; }
@keyframes flicker { 50% { opacity:0.45; } }
@media (prefers-reduced-motion:reduce) { .sign.hot { animation:none; } #rain { display:none; } }
.note { text-align:center; color:#9a92a8; font-size:12px; padding-bottom:max(12px,env(safe-area-inset-bottom)); }
dialog { width:min(100%,400px); margin:auto 0 0; padding:20px; background:#12121a; color:var(--ink); border:1px solid #2a2433; }
dialog .btn { width:100%; margin-top:8px; }
@media (max-width:899px) {
  .sheet-only { display:inline-flex; align-items:center; }
  nav .rail-only { display:none; }
  .chips { display:flex; justify-content:center; gap:8px; padding:12px; }
  .chips button { min-height:48px; min-width:96px; border:1px solid #2a2433; background:transparent; color:#9a92a8; letter-spacing:0.16em; text-transform:uppercase; }
  .chips button[aria-selected="true"] { color:var(--ink); }
  .streets { grid-template-columns:1fr; }
  .street { display:none; }
  .street.on { display:block; }
}