/* Night Gallery: slow views of every world, for the hours after dark. */
:root{ --gold:#f0cd7e; --ink:#f4ead6; --dim:rgba(244,234,214,.7); --faint:rgba(244,234,214,.45); --line:rgba(240,205,126,.25);
  --serif:'EB Garamond', Georgia, 'Times New Roman', serif; --display:'Cinzel', 'Trajan Pro', Georgia, serif; }
*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body{ margin:0; height:100%; overflow:hidden; background:#000; color:var(--ink); font-family:var(--serif); -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; touch-action:manipulation; }
*::selection{ background:transparent; }
.hidden{ display:none !important; }
body.idle, body.idle *{ cursor:none; }

/* the pictures: two layers, the new one fades in over the old */
#stage{ position:fixed; inset:0; overflow:hidden; background:#000; }
.slide{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; will-change:opacity, transform; transform-origin:50% 50%; backface-visibility:hidden; }
#vignette{ position:fixed; inset:0; pointer-events:none; background:radial-gradient(ellipse at 50% 50%, transparent 55%, rgba(0,0,0,.55) 100%); }
/* brightness: a black veil, so the screen itself gives off less light */
#veil{ position:fixed; inset:0; pointer-events:none; background:#000; opacity:0; transition:opacity 1.6s ease; }

.cap{ position:fixed; left:max(26px, env(safe-area-inset-left)); bottom:max(24px, env(safe-area-inset-bottom)); z-index:5; pointer-events:none; opacity:0; transition:opacity 2.4s ease; text-shadow:0 1px 14px rgba(0,0,0,.9), 0 0 2px rgba(0,0,0,.6); max-width:70vw; }
.cap.show{ opacity:.82; }
.cap .g{ font-family:var(--display); font-size:11px; letter-spacing:.32em; text-transform:uppercase; color:var(--gold); }
.cap .p{ font-size:clamp(18px, 2.6vw, 26px); font-style:italic; margin-top:3px; }
body.nocap .cap{ display:none; }
body.ui .cap{ opacity:0 !important; transition-duration:.4s; }

.clock{ position:fixed; right:max(26px, env(safe-area-inset-right)); top:max(20px, env(safe-area-inset-top)); z-index:5; pointer-events:none; font-family:var(--display); font-weight:500; font-size:clamp(26px, 4.4vw, 46px); letter-spacing:.08em; color:rgba(244,234,214,.72); text-shadow:0 1px 18px rgba(0,0,0,.9); font-variant-numeric:tabular-nums; }

/* start screen (matches the film's) */
.screen{ position:fixed; inset:0; z-index:20; display:flex; align-items:center; justify-content:center; padding:max(20px, env(safe-area-inset-top)) 20px max(20px, env(safe-area-inset-bottom)); background:radial-gradient(ellipse at 50% 40%, rgba(30,24,50,.55), rgba(0,0,0,.92) 70%); overflow-y:auto; transition:opacity 1.2s ease; }
.screen.leaving{ opacity:0; pointer-events:none; }
.startBox{ width:min(620px, 100%); text-align:center; margin:auto; }
.kicker{ font-family:var(--display); letter-spacing:.35em; text-transform:uppercase; font-size:12px; color:var(--gold); opacity:.85; }
h1{ font-family:var(--display); font-weight:700; font-size:clamp(34px, 7vw, 64px); line-height:1.02; margin:14px 0 10px; letter-spacing:.06em; text-shadow:0 0 40px rgba(140,150,255,.3); }
h1 span{ color:var(--gold); }
.lede{ font-size:clamp(16px, 2.4vw, 19px); color:var(--dim); line-height:1.5; margin:0 auto 22px; max-width:520px; font-style:italic; }
.bigPlay{ display:inline-flex; align-items:center; gap:10px; padding:14px 30px 14px 24px; border-radius:999px; border:1px solid rgba(255,205,126,.7); background:radial-gradient(circle at 50% 30%, rgba(255,190,90,.3), rgba(60,40,90,.35)); color:var(--ink); font-family:var(--display); font-size:18px; letter-spacing:.2em; cursor:pointer; box-shadow:0 0 40px rgba(160,150,255,.2); }
.bigPlay svg{ width:22px; height:22px; fill:var(--gold); }
.startMeta{ margin-top:12px; font-size:14px; color:var(--faint); }
.adsLink{ display:flex; flex-direction:column; gap:3px; margin:22px auto 0; max-width:460px; padding:12px 16px; border-radius:14px; border:1px solid var(--line); background:rgba(240,205,126,.07); color:var(--ink); text-decoration:none; text-align:center; }
.adsLink b{ font-family:var(--display); letter-spacing:.2em; text-transform:uppercase; font-size:14px; color:var(--gold); }
.adsLink span{ font-size:14px; color:var(--dim); font-style:italic; }

/* controls: hidden until you touch the screen */
#ui{ position:fixed; inset:0; z-index:10; pointer-events:none; transition:opacity .5s; }
#ui.idle{ opacity:0; }
#ui.idle *{ pointer-events:none !important; }
.topBar{ position:absolute; left:0; right:0; top:0; display:flex; align-items:center; gap:14px; padding:max(12px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) 34px max(16px, env(safe-area-inset-left)); background:linear-gradient(180deg, rgba(0,0,0,.65), transparent); }
.back{ pointer-events:auto; display:inline-flex; align-items:center; gap:6px; color:var(--ink); text-decoration:none; font-size:15px; padding:6px 10px 6px 4px; border-radius:10px; }
.back svg{ width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
.grow{ flex:1; }
.count{ font:12px system-ui, sans-serif; color:var(--faint); }
.panel{ position:absolute; left:50%; bottom:max(18px, env(safe-area-inset-bottom)); transform:translateX(-50%); width:min(560px, calc(100vw - 32px)); display:grid; gap:8px; padding:14px; border-radius:16px; background:rgba(8,7,12,.78); border:1px solid var(--line); pointer-events:auto; }
.prow{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.chip{ min-height:38px; padding:0 14px; border-radius:999px; border:1px solid rgba(255,255,255,.2); background:rgba(255,255,255,.05); color:var(--dim); font:600 13px system-ui, sans-serif; cursor:pointer; }
.chip.on{ color:#1a1206; background:var(--gold); border-color:var(--gold); }
.chip:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; }
.vol{ display:inline-flex; align-items:center; gap:6px; flex:1; min-width:140px; }
.vol svg{ width:20px; height:20px; fill:none; stroke:var(--ink); stroke-width:2; stroke-linejoin:round; flex:0 0 auto; }
.vol input{ flex:1; accent-color:#d9922b; }
.note{ font-size:13px; color:var(--faint); font-style:italic; min-height:0; }
.note:empty{ display:none; }