/* Player controls sit outside the visual composition, including on touch screens. */
body #hud { inset:auto 14px 12px; bottom:max(12px,env(safe-area-inset-bottom)); z-index:30; display:none; align-items:center; gap:8px; padding:10px; border:1px solid #d9a86a40; border-radius:14px; background:#08090de8; backdrop-filter:blur(16px); opacity:1; font:12px system-ui,sans-serif; }
body.playing #hud { display:flex; }
body #hud button { width:44px; height:44px; border-radius:8px; flex-shrink:0; font:12px system-ui,sans-serif; }
#seek { flex:1; min-width:40px; height:44px; accent-color:#e9b457; cursor:pointer; }
#seek:focus-visible { outline:2px solid #e9b457; outline-offset:2px; }
#time { white-space:nowrap; font-variant-numeric:tabular-nums; }
body.playing .line:not(.center):not(.title) { bottom:max(110px,calc(var(--bar) + 9vh)); }
#start.gone,#end.gone { visibility:hidden; }
#player-status { position:fixed; top:12px; left:12px; right:12px; z-index:31; text-align:center; font:12px/1.5 system-ui,sans-serif; color:#f1e4c9; }
#player-status:not(:empty) { background:#08090ddd; padding:8px; border-radius:8px; }
@media(max-width:600px) {
  body.playing #hud { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:4px; inset:auto 8px 8px; padding:6px; }
  #seek { grid-column:1/-1; grid-row:1; width:100%; height:28px; margin:0; }
  #time { grid-column:1/-1; grid-row:3; text-align:center; font-size:11px; }
  body #hud button { grid-row:2; width:100%; min-height:44px; }
  body.playing .line:not(.center):not(.title) { bottom:130px; }
  .card { gap:14px; }
  .card h2 { font-size:clamp(26px,7.4vw,40px); letter-spacing:.12em; }
  .eyebrow { font-size:10px; letter-spacing:.15em; }
  .hint { font-size:12px; }
  .title h1 { font-size:8vw; letter-spacing:.12em; }
  .line.void { letter-spacing:.12em; }
  .line.inscr { font-size:clamp(20px,4.2vw,32px); }
}
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; } }