:root { --bg:#12100c; --ink:#f6ecd4; --fun:#f5a623; --facts:#9ad4d6; --steel:#1b1914; --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:linear-gradient(180deg,#1a140c,#12100c 40%,#0c0e10); color:var(--ink); font-family:var(--font); overflow:hidden; }
.car-head { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:max(14px,env(safe-area-inset-top)) 18px 8px; }
.mark { color:var(--fun); text-decoration:none; letter-spacing:0.28em; font-family:var(--cyber); font-size:12px; }
.chips { display:flex; gap:8px; }
.chips button, .btn { min-height:48px; padding:0 14px; border:1px solid #3a3224; background:transparent; color:var(--ink); font:inherit; font-size:12px; cursor:pointer; }
.chips button[aria-selected="true"] { border-color:var(--fun); color:var(--fun); }
.sheet-only { display:none; }
.rail-only { display:inline-flex; align-items:center; justify-content:center; text-decoration:none; }
.train { display:grid; grid-template-columns:1fr 1fr; height:calc(100dvh - 120px); gap:10px; padding:0 16px; }
.car { display:grid; grid-template-columns:repeat(2,1fr); gap:8px; padding:16px; background:var(--steel); border:2px solid #2a2418; border-radius:18px 18px 6px 6px; overflow:auto; }
.car.fun { box-shadow:inset 0 0 40px rgba(245,166,35,0.08); }
.car.facts { box-shadow:inset 0 0 40px rgba(154,212,214,0.1); border-color:#243238; }
.ad {
  min-height:72px; display:grid; place-items:center; text-align:center;
  border:1px solid currentColor; background:#0e0c09; color:inherit;
  font-family:var(--cyber); font-size:13px; letter-spacing:0.05em; text-decoration:none; padding:8px;
}
.car.fun .ad { color:var(--fun); }
.car.facts .ad { color:var(--facts); }
.ad:hover,.ad.hot { background:#16120c; box-shadow:0 0 16px currentColor; animation:flicker 160ms steps(2) 2; }
@keyframes flicker { 50% { opacity:0.4; } }
@media (prefers-reduced-motion:reduce) { .ad.hot { animation:none; } }
dialog .btn { display:flex; align-items:center; justify-content:center; text-decoration:none; }
.note { text-align:center; color:#8a8070; font-size:12px; padding:10px 16px max(12px,env(safe-area-inset-bottom)); }
dialog { width:min(100%,400px); margin:auto 0 0; padding:20px; background:var(--steel); color:var(--ink); border:1px solid #3a3224; }
dialog .btn { width:100%; margin-top:8px; }
@media (max-width:899px) {
  .sheet-only { display:inline-flex; }
  nav .rail-only { display:none; }
  .train { grid-template-columns:1fr; }
  .car { display:none; }
  .car.on { display:grid; }
}