:root{--bg:#161d29;--bg2:#1b2230;--tile:#26324a;--ink:#f3f1ea;--accent:#f6c945;--muted:#9aa3b4}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;user-select:none}
html,body{margin:0;height:100vh;height:100dvh;overflow:hidden;background:radial-gradient(120% 120% at 50% 0,#222c40,#10141d);
  color:var(--ink);font-family:-apple-system,"Helvetica Neue",Arial,sans-serif;touch-action:manipulation}
#app{height:100vh;height:100dvh;display:flex;flex-direction:column;
  padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}
.bar{height:72px;flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;padding:0 16px;gap:12px}
.hbtn{width:64px;height:64px;border:none;border-radius:20px;background:#2b3650;color:var(--ink);font-size:30px;
  display:flex;align-items:center;justify-content:center;box-shadow:0 4px 0 rgba(0,0,0,.25);cursor:pointer;
  -webkit-touch-callout:none;position:relative;touch-action:none;z-index:1}
/* a thumb parked for the 4s parents hold drifts: give the button a fat
   invisible halo (hit area ~104px) and touch-action:none above so the
   browser can't reclaim the gesture mid-hold (pointercancel). z-index:1
   keeps the halo above later siblings (title, stage) in hit-testing. */
.hbtn::after{content:'';position:absolute;inset:-20px}
.hbtn:active{transform:translateY(2px);box-shadow:0 2px 0 rgba(0,0,0,.25)}
/* invisible at the root carousel but still pressable, so the parents hold
   gesture works everywhere — like the always-present button on a real Lunii */
.hbtn[hidden]{opacity:0}
/* hold feedback: after ~1s of holding the home button the whole screen dims
   and a big centered ring fills until the 4s mark — a ring around the button
   itself would sit under the parent's own thumb. Invisible for the first ~1s
   so a child's stray tap on the corner reveals nothing; pointer-events:none
   so the veil never steals the hold. */
#holdveil{position:fixed;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;
  background:rgba(10,14,22,.78);opacity:0;pointer-events:none;transition:opacity .3s}
#holdveil.on{animation:veilin 4s linear forwards}
#holdveil svg{width:min(55vmin,230px);height:min(55vmin,230px);transform:rotate(-90deg)}
#holdveil circle{fill:none;stroke:var(--accent);stroke-width:7;stroke-linecap:round;
  stroke-dasharray:340;stroke-dashoffset:340}
#holdveil.on circle{animation:holdfill 4s linear forwards}
#holdveil span{position:absolute;font-size:min(18vmin,76px);color:var(--ink)}
@keyframes veilin{0%,20%{opacity:0}30%,100%{opacity:1}}
@keyframes holdfill{0%,20%{stroke-dashoffset:340}100%{stroke-dashoffset:0}}
.now{flex:1;text-align:center;font-size:20px;font-weight:600;color:#dfe3ec;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:.9}
/* carousel */
/* track anchored at left (x=0) so the JS translateX centering is exact;
   justify-content:center would offset the track and double-shift the active tile */
.stage{flex:1;position:relative;display:flex;align-items:center;justify-content:flex-start;overflow:hidden}
.track{display:flex;align-items:center;gap:28px;transition:transform .32s cubic-bezier(.22,.61,.36,1);will-change:transform}
.tile{flex:0 0 auto;width:min(84vw,54vh);aspect-ratio:1/1;border-radius:32px;background:var(--tile);
  overflow:hidden;box-shadow:0 18px 40px rgba(0,0,0,.45);position:relative;transform:scale(.78);opacity:.5;
  transition:transform .32s cubic-bezier(.22,.61,.36,1),opacity .32s}
.tile.active{transform:scale(1);opacity:1}
.tile img{width:100%;height:100%;object-fit:cover;display:block}
.tile .ph{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:64px;color:#6c7d99}
/* "asleep" tiles: not playable right now (offline / bad connection) */
.tile.off img,.tile.off .ph{filter:grayscale(1);opacity:.45}
.tile.off .lbl{opacity:.55}
.tile.off::after{content:'💤';position:absolute;top:12px;right:14px;font-size:36px;text-shadow:0 2px 6px rgba(0,0,0,.6)}
@keyframes wig{25%{transform:translateX(-8px)}75%{transform:translateX(8px)}}
.tile.wig img,.tile.wig .ph{animation:wig .3s ease 2}
@keyframes tpulse{50%{opacity:.35}}
.tile.busy img,.tile.busy .ph{animation:tpulse 1s ease-in-out infinite}
.tile .lbl{position:absolute;left:0;right:0;bottom:0;padding:30px 16px 16px;font-size:22px;font-weight:600;
  text-align:center;background:linear-gradient(transparent,rgba(0,0,0,.7));text-shadow:0 1px 3px #000}
.arrow{position:absolute;top:50%;transform:translateY(-50%);width:84px;height:84px;border:none;border-radius:50%;
  background:rgba(255,255,255,.10);color:#fff;font-size:46px;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:5}
.arrow:active{background:rgba(255,255,255,.2)}
.arrow.l{left:14px}.arrow.r{right:14px}.arrow[hidden]{display:none}
/* story screen */
.story{position:absolute;inset:0;display:none;flex-direction:column;align-items:center;justify-content:center;gap:min(5vh,30px);padding:12px}
.story.on{display:flex}
/* landscape phones: art beside the button, and the bottom band stays clear
   so the play button can never overlap the (tappable) progress bar */
@media (orientation: landscape) and (max-height: 520px){
  .story{flex-direction:row;gap:min(8vw,70px);padding-bottom:64px}
  .story .art{width:min(58vh,40vw)}
}
.story .art{width:min(86vw,46vh);aspect-ratio:1/1;border-radius:36px;overflow:hidden;box-shadow:0 24px 60px rgba(0,0,0,.5)}
.story .art img{width:100%;height:100%;object-fit:cover}
.play{flex:0 0 auto;width:100px;height:100px;border-radius:50%;border:none;background:var(--accent);color:#241f00;font-size:46px;
  display:flex;align-items:center;justify-content:center;box-shadow:0 9px 0 #b9952a;cursor:pointer}
.play:active{transform:translateY(3px);box-shadow:0 6px 0 #b9952a}
.prog{position:absolute;left:28px;right:28px;bottom:12px;opacity:0;transition:opacity .45s;pointer-events:none;touch-action:none}
.prog.show{opacity:1}
.prog.seek{padding-top:26px}   /* fat invisible hit strip above the bar while seekable */
.prog.show.seek{pointer-events:auto;cursor:pointer}
.prog .t{display:flex;justify-content:space-between;font-size:13px;color:var(--muted);margin-top:7px;font-variant-numeric:tabular-nums;text-shadow:0 1px 2px rgba(0,0,0,.6)}
.prog .line{height:3px;border-radius:2px;background:rgba(255,255,255,.13);overflow:hidden;transition:height .2s}
.prog.seek .line{height:7px;border-radius:4px}
.prog .fill{height:100%;width:100%;background:var(--accent);border-radius:2px;transform-origin:left;transform:scaleX(0);transition:transform .3s linear}
.dots{flex:0 0 auto;height:26px;display:flex;align-items:center;justify-content:center;gap:7px;flex-wrap:wrap;padding:0 16px 6px}
.dot{width:7px;height:7px;border-radius:50%;background:#39435a}
.dot.on{background:var(--accent);transform:scale(1.35)}
.pwgate{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#0e1320;z-index:40}
.pwgate[hidden]{display:none}
.pwbox{display:flex;flex-direction:column;align-items:center;gap:14px}
.pwbox input{font-size:28px;text-align:center;padding:12px 18px;border-radius:14px;border:1px solid #33405a;background:#1b2230;color:var(--ink);width:200px;letter-spacing:6px;-webkit-text-security:disc;text-security:disc}
.pwbox button{font-size:22px;padding:12px 30px;border:none;border-radius:14px;background:var(--accent);color:#241f00;font-weight:700;cursor:pointer}
.pwerr{color:#e08a7c;font-size:14px;min-height:18px}
/* explainer: how to reach the parents page later (hold ⌂ 4s). Animated
   replica of the home button — finger lands, button presses, ring fills. */
.pwhint{display:flex;align-items:center;gap:16px;margin-top:22px;max-width:300px;
  color:var(--muted);font-size:14px;line-height:1.5;text-align:left}
.pwhold{position:relative;flex:0 0 auto;width:72px;height:72px}
.pwhold svg{position:absolute;inset:0;transform:rotate(-90deg)}
.pwhold circle{fill:none;stroke:var(--accent);stroke-width:4;stroke-linecap:round;
  stroke-dasharray:208;stroke-dashoffset:208;animation:pwring 6s linear infinite}
.pwhbtn{position:absolute;inset:11px;border-radius:16px;background:#2b3650;color:var(--ink);font-size:24px;
  display:flex;align-items:center;justify-content:center;box-shadow:0 3px 0 rgba(0,0,0,.25);
  animation:pwpress 6s ease-in-out infinite}
.pwfinger{position:absolute;right:-8px;bottom:-10px;font-size:28px;
  text-shadow:0 2px 4px rgba(0,0,0,.5);animation:pwtap 6s ease-in-out infinite}
@keyframes pwpress{0%,100%{transform:translateY(0);box-shadow:0 3px 0 rgba(0,0,0,.25)}
  8%,92%{transform:translateY(2px);box-shadow:0 1px 0 rgba(0,0,0,.25)}}
@keyframes pwtap{0%,100%{transform:translate(7px,9px)}8%,92%{transform:translate(0,0)}}
@keyframes pwring{0%,8%{stroke-dashoffset:208}90%,100%{stroke-dashoffset:0}}
@media (prefers-reduced-motion: reduce){
  .pwhold circle,.pwhbtn,.pwfinger{animation:none}
  .pwhold circle{stroke-dashoffset:52}}
#pwinstall{position:fixed;top:calc(env(safe-area-inset-top) + 10px);right:calc(env(safe-area-inset-right) + 10px);z-index:50;
  font-size:13px;padding:8px 14px;border:1px solid #33405a;border-radius:999px;background:rgba(27,34,48,.92);color:#cdd6e6;
  cursor:pointer;box-shadow:0 4px 16px rgba(0,0,0,.35)}
#pwios{position:fixed;left:50%;bottom:calc(env(safe-area-inset-bottom) + 10px);transform:translateX(-50%);z-index:50;
  color:#aab4c6;font-size:12px;max-width:260px;text-align:center;line-height:1.5;background:rgba(27,34,48,.92);
  padding:8px 14px;border-radius:14px;border:1px solid #2a3550}
#pwinstall[hidden],#pwios[hidden]{display:none}
.cast-slot{width:64px;display:flex;align-items:center;justify-content:center}
#castbtn{width:32px;height:32px;cursor:pointer;--connected-color:#f6c945;--disconnected-color:#dfe3ec}
#castbtn[hidden]{display:none}