/* The phone holds the room; the room's weather and light fill the page around it. */
@font-face{font-family:'Pixelify Sans';src:url(a/PixelifySans.ttf) format('truetype');font-display:swap}
@font-face{font-family:'Karla';src:url(a/Karla.ttf) format('truetype');font-weight:200 800;font-display:swap}

:root{
  color-scheme:dark;
  --ink:#030308;--paper:#FFF2E8;--ice:#B6E2E3;--mist:#92B5BB;--lamp:#F0A05D;--lamp-hi:#FEDA7D;--rim:#3D2544;
  --display:'Pixelify Sans',ui-monospace,monospace;
  --body:'Karla',system-ui,sans-serif;
}
*{box-sizing:border-box}
body{margin:0;background:var(--ink);color:var(--paper);font-family:var(--body);-webkit-font-smoothing:antialiased}
a{color:var(--lamp)}a:hover{color:var(--lamp-hi)}

.ride{position:relative}
.stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
#world{position:absolute;inset:0;image-rendering:pixelated}

.phone{position:absolute;left:0;top:0;border-radius:44px;box-shadow:0 0 0 10px #1D1228,0 0 0 11px var(--rim),0 40px 90px -20px rgba(3,3,8,.75);pointer-events:none}
.lock{position:absolute;inset:0;border-radius:44px;display:flex;flex-direction:column;align-items:center;padding:48px 14px 18px;opacity:0}
.np{margin-top:auto;width:100%;padding:14px 16px 12px;border-radius:24px;background:#130C1F;box-shadow:inset 0 0 0 1px #281932}
.np-head{display:flex;gap:12px;align-items:center}
.np-art{width:44px;height:44px;border-radius:8px;background:#20384A url(a/night_train_cover.png) center/cover no-repeat}
.np-meta{display:flex;flex-direction:column;font-size:15px;line-height:1.25}
.np-meta span{font-size:13px;color:var(--mist)}
.np-bar{margin-top:14px;height:4px;border-radius:2px;background:#3D2544}
.np-bar span{display:block;width:38%;height:100%;border-radius:2px;background:var(--paper)}
.np-ctrl{display:flex;justify-content:space-around;align-items:center;margin-top:12px}

.wordmark{position:absolute;left:max(28px,env(safe-area-inset-left,0px));top:max(22px,env(safe-area-inset-top,0px));font-family:var(--display);font-size:24px;color:var(--paper);text-decoration:none;z-index:2}

/* one block of copy per room; world.js fades them and places them beside the phone */
.stop{position:absolute;top:50%;width:min(470px,40vw);transform:translateY(-50%);opacity:0;visibility:hidden}
.stop h1,.stop h2{margin:0 0 20px;font-family:var(--display);font-weight:400;font-size:clamp(40px,4.6vw,68px);line-height:1;letter-spacing:-.01em;color:var(--paper);text-wrap:balance}
.stop h2{font-size:clamp(34px,3.8vw,56px)}
.stop p{margin:0;font-size:clamp(17px,1.3vw,20px);line-height:1.55;color:var(--paper);opacity:.82;max-width:34ch}

.stores{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.store{display:inline-flex;flex-direction:column;justify-content:center;min-height:54px;padding:0 22px;border-radius:12px;text-decoration:none;font-weight:700;font-size:17px;line-height:1.1}
.store small{font-weight:500;font-size:11px;opacity:.7}
.store-a{background:var(--lamp);color:var(--ink)}
.store-b{color:var(--paper);box-shadow:inset 0 0 0 1.5px rgba(255,242,232,.35)}
.foot a:focus-visible,.wordmark:focus-visible{outline:2px solid var(--lamp-hi);outline-offset:3px}

.cue{margin-top:40px!important;font-size:14px!important;opacity:.6!important;animation:nudge 2.4s steps(2) infinite}
@keyframes nudge{50%{transform:translateY(3px)}}
@media (prefers-reduced-motion:reduce){.cue{animation:none}}
.credits{display:grid;grid-template-columns:auto 1fr;gap:10px 28px;margin:32px 0 0;font-size:17px}
.credits dt{color:var(--mist)}
.credits dd{margin:0}
.credits dd:last-of-type{color:var(--lamp)}

.thumbs{list-style:none;display:grid;grid-template-columns:repeat(7,56px);gap:10px;margin:32px 0 0;padding:0;font-size:12px;color:var(--mist)}
.thumbs li{display:flex;flex-direction:column;gap:8px;padding-top:86px;font-size:11px;position:relative;white-space:nowrap}

.plans{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin:28px 0 0;padding-top:20px;box-shadow:inset 0 1px 0 rgba(255,242,232,.18);max-width:420px}
.plans dt{font-size:15px;color:var(--mist);margin-bottom:6px}
.plans dd{margin:0;font-size:15px;line-height:1.4}
.plans strong{display:block;font-family:var(--display);font-weight:400;font-size:30px;line-height:1.1;color:var(--paper)}
.stop p.small{margin-top:16px;font-size:14px;opacity:.65}
.callout{position:absolute;left:0;top:0;display:flex;flex-direction:row-reverse;align-items:center;gap:10px;opacity:0;transition:opacity .35s;pointer-events:none}
.callout-line{display:block;height:2px;background:var(--lamp-hi)}
.callout-text{font-size:16px;font-weight:600;color:var(--lamp-hi);white-space:nowrap}

.foot{display:flex;flex-wrap:wrap;align-items:center;gap:12px 32px;padding:36px max(28px,env(safe-area-inset-right,0px)) 36px max(28px,env(safe-area-inset-left,0px));background:var(--ink)}
.foot-mark{font-family:var(--display);font-size:20px}
.foot nav{display:flex;flex-wrap:wrap;gap:4px 24px;margin-left:auto;font-size:15px}
.foot nav a{color:var(--paper);opacity:.72;text-decoration:none;min-height:44px;display:inline-flex;align-items:center}
.foot nav a:hover{opacity:1}
.fine{flex-basis:100%;margin:0;font-size:13px;color:var(--mist)}

@media (max-width:760px){
  .stop{top:auto;bottom:max(24px,env(safe-area-inset-bottom,0px));left:20px!important;right:20px;width:auto;transform:none}
  .stop h1,.stop h2{font-size:34px;margin-bottom:12px}
  .stop p{font-size:16px}
  .stores{margin-top:18px}
  .store{min-height:46px;padding:0 16px;font-size:15px}
  .credits{margin-top:16px;font-size:15px;gap:6px 20px}
  .thumbs{grid-template-columns:repeat(7,40px);gap:6px;margin-top:16px}
  .thumbs li{padding-top:56px;font-size:0}
  .callout-text{font-size:14px}
  .plans{margin-top:14px;padding-top:12px;gap:16px}
  .plans strong{font-size:22px}
  .stop p.small{display:none}
  .s-roof h2{display:none}
  .cue{display:none}
}