/* Layout: the whole screen is a window in a dark room. A frosted control strip rests on the sill; status hangs inside the top of the frame. */
:root{
  --night:#090d13;
  --frost:rgba(14,19,27,.62);
  --frost-strong:rgba(14,19,27,.85);
  --line:rgba(214,226,238,.14);
  --track:rgba(214,226,238,.2);
  --fg:#e8edf2;
  --fg-soft:#cbd5df;
  --muted:#93a1af;
  --sodium:#f2b25c;
  --sodium-ink:#1d1306;
  --sodium-wash:rgba(242,178,92,.16);
  --scrim:rgba(5,8,12,.8);
  --scrim-0:rgba(5,8,12,0);
  --candle:rgba(255,168,88,.55);
  --fire:rgba(255,120,40,.55);
  --fire-0:rgba(255,120,40,0);
  --f-display:"Cormorant Garamond","Iowan Old Style","Palatino Linotype",Georgia,serif;
  --f-ui:"Manrope",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
  --ft:14px;--st:64px;
  color-scheme:dark;
}
html,body{height:100%}
body{background:var(--night);color:var(--fg);font-family:var(--f-ui);font-size:14px;overflow:hidden;-webkit-font-smoothing:antialiased}
#glass{position:fixed;inset:0;width:100%;height:100%;display:block;touch-action:none;cursor:crosshair}
#room{position:fixed;inset:-24px;width:calc(100% + 48px);height:calc(100% + 48px);pointer-events:none;mix-blend-mode:screen;will-change:transform}
#frame{position:fixed;inset:0;width:100%;height:100%;pointer-events:none}
#prop{position:fixed;pointer-events:none}
#refl{position:fixed;pointer-events:none;mix-blend-mode:screen;border-radius:50%;opacity:0;background:radial-gradient(closest-side,var(--candle),transparent)}
#fireGlow{position:fixed;left:-20vw;bottom:-30vh;width:85vw;height:110vh;pointer-events:none;mix-blend-mode:screen;opacity:0;background:radial-gradient(closest-side,var(--fire),var(--fire-0))}
.scrim{position:fixed;left:0;right:0;bottom:0;height:62%;pointer-events:none;background:linear-gradient(to top,var(--scrim),var(--scrim-0));transition:opacity .8s}

/* Intro */
#intro{position:fixed;left:clamp(24px,6vw,84px);right:16px;bottom:calc(var(--st) + clamp(20px,6vh,80px));max-width:38rem;display:grid;gap:18px;justify-items:start;transition:opacity .9s,transform .9s}
#intro h1{font-family:var(--f-display);font-style:italic;font-weight:400;font-size:clamp(3.4rem,10vw,7.4rem);line-height:.86;letter-spacing:-.015em;margin:0;text-wrap:balance}
#intro p{margin:0;font-size:clamp(1rem,.9rem + .4vw,1.14rem);line-height:1.6;color:var(--fg-soft);max-width:44ch}
.pick{display:flex;flex-wrap:wrap;gap:6px}
.begin{border:0;border-radius:999px;background:var(--sodium);color:var(--sodium-ink);font:600 15px/1 var(--f-ui);padding:15px 24px 15px 20px;display:inline-flex;align-items:center;gap:10px;cursor:pointer;transition:transform .2s}
.begin:hover{transform:translateY(-1px)}
.spec{font-family:var(--f-mono);font-size:11.5px;letter-spacing:.04em;color:var(--muted)}
body.started #intro{opacity:0;transform:translateY(12px);pointer-events:none;visibility:hidden;transition:opacity .9s,transform .9s,visibility 0s .9s}

/* Choices on the start screen: a mood, then a window */
.opt{display:grid;gap:8px;max-width:100%}
.lbl2{font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.lbl2 small{font:400 11px var(--f-mono);letter-spacing:0;text-transform:none;color:var(--sodium);margin-left:6px}
.strip{display:flex;gap:8px;overflow-x:auto;max-width:min(38rem,calc(100vw - 40px));padding:3px 3px 4px;scrollbar-width:none}
.strip::-webkit-scrollbar{display:none}
@media (max-width:620px){.strip{flex-wrap:wrap;overflow:visible}.tile{width:calc((100% - 24px)/4)}.tile img,.tile .more{width:100%;height:auto;aspect-ratio:3/2}}
.tile{flex:none;width:76px;display:grid;gap:5px;background:none;border:0;padding:0;color:var(--fg-soft);font:500 11.5px/1.2 var(--f-ui);cursor:pointer;text-align:left}
.tile img,.tile .more{width:76px;height:52px;border-radius:9px;object-fit:cover;display:block;border:1px solid var(--line);background:var(--frost)}
.tile .more{display:grid;place-items:center;color:var(--fg);font:600 12px/1.1 var(--f-ui);text-align:center}
.tile .more b{display:block;color:var(--sodium);font-size:17px}
.tile:hover img{filter:brightness(1.15)}
.tile[aria-pressed="true"] img,.tile[aria-pressed="true"] .more{outline:2px solid var(--sodium);outline-offset:2px}
.tile[aria-pressed="true"]{color:var(--fg)}
body.picking #intro{opacity:0;visibility:hidden;pointer-events:none}

/* Top status */
#top{position:fixed;top:calc(env(safe-area-inset-top,0px) + var(--ft) + 10px);left:calc(var(--ft) + 10px);right:calc(var(--ft) + 10px);display:flex;justify-content:space-between;align-items:flex-start;gap:12px;pointer-events:none;transition:opacity .6s}
#top > *{pointer-events:auto}
.mark{font-family:var(--f-display);font-style:italic;font-size:1.7rem;line-height:1}
.hint{font-size:12.5px;color:var(--fg-soft);margin-top:7px;transition:opacity .6s;max-width:30ch}
.hint.seen{opacity:0}
.status{font-family:var(--f-mono);font-size:11.5px;color:var(--fg-soft);text-align:right;display:grid;gap:8px;justify-items:end;font-variant-numeric:tabular-nums}
.status .sub{color:var(--muted)}
.pill{background:var(--frost-strong);border:1px solid var(--line);border-radius:10px;padding:8px 11px;color:var(--fg);display:flex;gap:8px;align-items:center;max-width:min(320px,60vw);text-align:left}
.pill svg{flex:none;color:var(--sodium)}
.pill b{color:var(--sodium);font-weight:500}
.icon-btn{width:34px;height:34px;border-radius:50%;border:1px solid var(--line);background:var(--frost);color:var(--fg);display:grid;place-items:center;cursor:pointer}

/* Dock */
#dock{position:fixed;left:50%;bottom:calc(env(safe-area-inset-bottom,0px) + 14px);transform:translateX(-50%);width:min(860px,calc(100% - 32px));background:var(--frost);-webkit-backdrop-filter:blur(18px) saturate(1.15);backdrop-filter:blur(18px) saturate(1.15);border:1px solid var(--line);border-radius:18px;padding:14px 16px;display:grid;grid-template-columns:52px minmax(0,1fr) minmax(0,1fr);gap:12px 20px;align-items:center;transition:opacity .6s;max-height:calc(100% - 130px);overflow:auto}
#play{width:52px;height:52px;border-radius:50%;border:0;background:var(--sodium);color:var(--sodium-ink);display:grid;place-items:center;cursor:pointer}
.ctl{display:grid;gap:6px;min-width:0}
.ctl label{display:flex;justify-content:space-between;gap:8px;font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.ctl output{font-family:var(--f-mono);font-weight:400;letter-spacing:0;text-transform:none;color:var(--fg);font-size:12px}
.row{grid-column:1/-1;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px 18px;padding-top:12px;border-top:1px solid var(--line)}
.row + .row{padding-top:0;border-top:0}
.group{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.lbl{font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-right:4px;min-width:4.6em}
.chip{font:500 13px/1 var(--f-ui);color:var(--fg-soft);background:transparent;border:1px solid var(--line);border-radius:999px;padding:7px 12px;cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.chip[aria-pressed="true"]{background:var(--sodium-wash);border-color:var(--sodium);color:var(--fg)}
.chip.lg{padding:9px 14px;font-size:13.5px;background:var(--frost)}
.chip.lg[aria-pressed="true"]{background:var(--sodium-wash)}
.chip input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.chip .now{font-family:var(--f-mono);font-size:11px;color:var(--muted)}
.left{font-family:var(--f-mono);font-size:12px;color:var(--sodium);font-variant-numeric:tabular-nums;min-width:4ch}

input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:22px;background:transparent;margin:0;--p:50%;cursor:pointer}
input[type=range]::-webkit-slider-runnable-track{height:4px;border-radius:4px;background:linear-gradient(to right,var(--sodium) var(--p),var(--track) var(--p))}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;border-radius:50%;background:var(--fg);margin-top:-7px;border:0}
input[type=range]::-moz-range-track{height:4px;border-radius:4px;background:var(--track)}
input[type=range]::-moz-range-progress{height:4px;border-radius:4px;background:var(--sodium)}
input[type=range]::-moz-range-thumb{width:18px;height:18px;border:0;border-radius:50%;background:var(--fg)}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--sodium);outline-offset:3px}

body.idle #dock,body.idle #top{opacity:0;pointer-events:none}
body.idle #top > *{pointer-events:none}
body.idle .scrim{opacity:0}
.credit{position:fixed;right:calc(var(--ft) + 12px);bottom:calc(var(--st) + 10px);font-family:var(--f-mono);font-size:10.5px;color:var(--fg-soft);opacity:.55;pointer-events:none;text-shadow:0 1px 2px rgba(0,0,0,.6);max-width:60vw;text-align:right;margin:0}
body.started:not(.idle) .credit{opacity:0}
.place-btn{gap:10px;padding:4px 12px 4px 4px;border-radius:12px;background:var(--frost-strong);color:var(--fg);text-align:left}
.place-btn img{width:46px;height:31px;border-radius:8px;object-fit:cover;display:block;background:var(--frost)}
.place-btn img[src=""]{visibility:hidden}
.place-btn .pt{display:grid;gap:3px}
.place-btn #placeName{font-weight:600;font-size:13.5px}
.place-btn small{font:400 11px/1 var(--f-mono);color:var(--sodium)}
.nav-btn{width:30px;height:30px;border-radius:50%;border:1px solid var(--line);background:transparent;color:var(--fg-soft);display:grid;place-items:center;cursor:pointer;padding:0}
.nav-btn:hover{color:var(--fg);border-color:var(--fg-soft)}
.chip svg.ic{flex:none;opacity:.85}
.tabs{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 2px}
.tabs .chip small{font:400 11px var(--f-mono);color:var(--muted)}
.places-head .acts{display:flex;gap:8px;align-items:center}
#tip{position:fixed;z-index:6;max-width:250px;background:var(--sodium);color:var(--sodium-ink);border-radius:12px;padding:10px 12px;font-size:13px;line-height:1.4;box-shadow:0 8px 30px rgba(0,0,0,.4);cursor:pointer;transition:opacity .4s}
#tip::after{content:"";position:absolute;left:var(--ax,40px);bottom:-6px;width:12px;height:12px;background:var(--sodium);transform:rotate(45deg)}
#tip b{font-weight:700}
body.idle #tip{opacity:0;pointer-events:none}
#wiper{position:fixed;inset:0;width:100%;height:100%;pointer-events:none}
body.noframe #frame,body.noframe #prop,body.noframe #refl,body.noframe #room,body.noframe #fireGlow{display:none}
body.trainframe #prop,body.trainframe #refl,body.trainframe #room{display:none}
#places{position:fixed;left:50%;bottom:calc(env(safe-area-inset-bottom,0px) + 14px);transform:translateX(-50%);width:min(900px,calc(100% - 32px));max-height:calc(100% - 110px);overflow:auto;background:var(--frost-strong);-webkit-backdrop-filter:blur(20px) saturate(1.15);backdrop-filter:blur(20px) saturate(1.15);border:1px solid var(--line);border-radius:18px;padding:16px;z-index:5}
.places-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.places-head h2{margin:0;font-family:var(--f-display);font-style:italic;font-weight:400;font-size:1.6rem}
.places-sec{margin-top:14px}
.places-sec h3{margin:0 0 8px;font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:10px}
.card{display:grid;gap:6px;text-align:left;background:transparent;border:0;padding:0;color:var(--fg);cursor:pointer;font:inherit;min-width:0}
.card .ph{aspect-ratio:3/2;width:100%;border-radius:10px;overflow:hidden;background:var(--frost);border:1px solid var(--line);position:relative}
.card img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s}
.card:hover img{transform:scale(1.05)}
.card[aria-pressed="true"] .ph{outline:2px solid var(--sodium);outline-offset:2px}
.card .nm{font-size:13px;font-weight:600;line-height:1.2}
.card .wh{font-size:11px;color:var(--muted);line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.card .ph.up{display:grid;place-items:center;color:var(--muted);font-size:12px}
.card input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.nogl{position:fixed;top:50%;left:16px;right:16px;text-align:center;color:var(--fg-soft)}

@media (max-width:620px){
  #dock{grid-template-columns:52px minmax(0,1fr);padding:12px 14px;gap:10px 14px}
  #play{grid-row:span 2}
  .ctl.storm{grid-column:2}
  .row{justify-content:flex-start}
  .status .sub{display:none}
  .hint{max-width:22ch}
  body:not(.started) .credit{display:none}
  .lbl{min-width:0}
  .chip{padding:7px 10px}
  .row{gap:8px 12px}
  #dock{max-height:calc(100% - 110px)}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important}
}

/* ---------- the site around the window ---------- */
body.site,body.plain{margin:0;overflow-x:hidden;overflow-y:auto;height:auto;min-height:100%}
.poster{position:fixed;inset:0;background:var(--night) center/cover no-repeat;filter:blur(14px) brightness(.5);transform:scale(1.08);z-index:-1}
body.site #intro h1{font-size:clamp(2.5rem,6.4vw,5rem);line-height:.95;max-width:14ch}
#intro .more{color:var(--fg-soft);font-size:13px;text-decoration:none;border-bottom:1px solid var(--line);padding-bottom:2px}
#intro .more:hover{color:var(--fg)}
a.mark{color:inherit;text-decoration:none}
body.reading #dock,body.reading #top,body.reading #places,body.reading #intro,body.reading .credit,body.reading .scrim{opacity:0;pointer-events:none;visibility:hidden}
.page{position:relative;z-index:6;margin-top:100vh;margin-top:100svh;background:linear-gradient(to bottom,rgba(9,13,19,0),rgba(9,13,19,.92) 140px,var(--night) 320px);padding:160px 16px 0;color:var(--fg);font-size:16px;line-height:1.65}
body.plain .page{margin-top:0;padding-top:96px;background:linear-gradient(to bottom,rgba(9,13,19,.55),var(--night) 420px)}
.wrap{max-width:44rem;margin:0 auto}
.wide{max-width:64rem;margin:0 auto}
.page h1{font-family:var(--f-display);font-style:italic;font-weight:400;font-size:clamp(2.4rem,6vw,4rem);line-height:1;margin:0 0 20px}
.page h2{font-family:var(--f-display);font-style:italic;font-weight:500;font-size:clamp(1.7rem,3.4vw,2.2rem);line-height:1.1;margin:48px 0 12px}
.page h3{font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:28px 0 12px;font-weight:600}
.page p,.page li,.page dd{color:var(--fg-soft)}
.page .lead{font-size:clamp(1.1rem,2.2vw,1.3rem);color:var(--fg);line-height:1.55}
.page a{color:var(--sodium);text-underline-offset:3px}
.page ul{padding-left:1.2em}
.crumbs{font-size:13px;color:var(--muted);margin-bottom:20px}
.crumbs a{color:var(--muted)}
.btn{display:inline-flex;align-items:center;gap:8px;border-radius:999px;background:var(--sodium);color:var(--sodium-ink)!important;font:600 14px/1 var(--f-ui);padding:12px 18px;text-decoration:none;margin-top:8px}
.photo{margin:32px 0 0}
.photo img{width:100%;height:auto;border-radius:14px;display:block;border:1px solid var(--line)}
.photo figcaption{font-size:13px;color:var(--muted);margin-top:8px}
.photo figcaption a{color:var(--muted)}
.pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px}
.pcard{display:grid;gap:4px;text-decoration:none;color:var(--fg)!important}
.pcard img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;border-radius:10px;border:1px solid var(--line);display:block;transition:transform .3s}
.pcard:hover img{transform:scale(1.03)}
.pcard span{font-size:14px;font-weight:600;line-height:1.3}
.pcard small{font-size:12px;color:var(--muted);line-height:1.3}
.sgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:12px}
.scard{display:block;padding:14px 16px;border:1px solid var(--line);border-radius:14px;background:var(--frost);text-decoration:none;color:var(--fg)!important}
.scard b{display:block;font-size:15px}
.scard small{color:var(--muted);font-size:13px;line-height:1.4;display:block;margin-top:4px}
dl.faq dt{color:var(--fg);font-weight:600;margin-top:18px}
dl.faq dd{margin:6px 0 0}
table.credits{width:100%;border-collapse:collapse;font-size:14px}
table.credits th,table.credits td{text-align:left;padding:8px 10px 8px 0;border-bottom:1px solid var(--line);vertical-align:top}
table.credits th{color:var(--muted);font-weight:600}
footer.foot{margin-top:72px;padding:40px 0 56px;border-top:1px solid var(--line);font-size:14px}
footer.foot .cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:24px}
footer.foot h3{margin-top:0}
footer.foot ul{list-style:none;padding:0;margin:0}
footer.foot li{margin:4px 0}
footer.foot a{color:var(--fg-soft);text-decoration:none}
footer.foot a:hover{color:var(--fg);text-decoration:underline}
footer.foot .fine{color:var(--muted);font-size:13px;margin-top:32px}
.topbar{position:absolute;top:0;left:0;right:0;padding:20px 16px;z-index:7}
.topbar .mark{font-family:var(--f-display);font-style:italic;font-size:22px}