/* LANTERN / TORCH LIGHT (js/lantern.js): a dark layer over the picture with a soft, warm, flickering hole where the light is.
   It sits above the picture and its tap zones (which still answer: the layer lets every tap through) but below the portraits, the subtitles and the choices. */
#psDark{position:absolute;inset:0;z-index:4;pointer-events:none;opacity:0;transition:opacity .5s ease;--lx:50%;--ly:56%;--lr:260px;--warm:255,200,130;
  background:radial-gradient(circle at var(--lx) var(--ly),
    rgba(4,3,8,0) 0,
    rgba(4,3,8,0) calc(var(--lr) * .35),
    rgba(4,3,8,.42) calc(var(--lr) * .72),
    rgba(4,3,8,.84) var(--lr),
    rgba(3,2,6,.9) calc(var(--lr) * 1.6))}
#psDark.on{opacity:1}
/* the warm cast of the flame inside the pool */
#psDark::after{content:"";position:absolute;inset:0;mix-blend-mode:screen;
  background:radial-gradient(circle at var(--lx) var(--ly),rgba(var(--warm),calc(var(--glow,.2) * 1)) 0,rgba(var(--warm),calc(var(--glow,.2) * .55)) calc(var(--lr) * .5),rgba(var(--warm),0) calc(var(--lr) * .98))}
#psDarkHint{position:absolute;left:50%;top:calc(env(safe-area-inset-top) + var(--ps-head,44px) + 66px);transform:translateX(-50%);z-index:12;pointer-events:none;
  padding:7px 16px;border-radius:999px;background:rgba(16,12,22,.82);border:1px solid rgba(216,176,106,.5);color:#f6efe0;
  font:600 12px/1.2 var(--ps-sans,system-ui,sans-serif);letter-spacing:.12em;text-transform:uppercase;opacity:0;transition:opacity .4s;white-space:nowrap}
#psDarkHint.on{opacity:1}
@media (prefers-reduced-motion:reduce){ #psDark,#psDarkHint{transition:none} }
/* twin: in-game motion switch */ html body.ps-still #psDark,html body.ps-still #psDarkHint{transition:none}

/* THE LIGHT (2026-10-11): the pool brightens the picture under it (z 3, under the dark layer at 4), masked to the pool, so the
   flame shows the room instead of a lighter shade of black. --lift is set per screen by lantern.js (painting ~2.3, Retro ~1.25). */
#psLight{position:absolute;inset:0;z-index:3;pointer-events:none;opacity:0;transition:opacity .5s ease;--lx:50%;--ly:56%;--lr:260px;--lift:2;
  -webkit-backdrop-filter:brightness(var(--lift)) saturate(1.15) sepia(.18);backdrop-filter:brightness(var(--lift)) saturate(1.15) sepia(.18);
  -webkit-mask-image:radial-gradient(circle at var(--lx) var(--ly),#000 0,#000 calc(var(--lr) * .3),rgba(0,0,0,.55) calc(var(--lr) * .62),transparent calc(var(--lr) * .95));
  mask-image:radial-gradient(circle at var(--lx) var(--ly),#000 0,#000 calc(var(--lr) * .3),rgba(0,0,0,.55) calc(var(--lr) * .62),transparent calc(var(--lr) * .95))}
#psLight.on{opacity:1}
/* on the painting the dark outside the pool lets the room just show (Retro's lifted shadows already do), and the flame's warmth
   tints instead of fogging: soft-light, not screen */
#psDark.painted{background:radial-gradient(circle at var(--lx) var(--ly),rgba(4,3,8,0) 0,rgba(4,3,8,0) calc(var(--lr) * .35),rgba(4,3,8,.32) calc(var(--lr) * .72),rgba(4,3,8,.62) var(--lr),rgba(3,2,6,.74) calc(var(--lr) * 1.6))}
#psDark.painted::after{mix-blend-mode:soft-light}
@media (prefers-reduced-motion:reduce){ #psLight{transition:none} }
html body.ps-still #psLight{transition:none}