/* CLAUDE 2026-10-31 — Story Hall overlay. Colours and fonts from the CGD Design System (Night theme). */

:root {
  --void: #07060d;
  --gold3: #ffe08a;
  --gold5: #e3a635;
  --ink: #fffaf0;
  --muted: #e9d6b0;
  --accent: #ffe08a;
}
html, body { margin: 0; height: 100%; background: var(--void); color: var(--ink); overflow: hidden; font-family: 'Anuphan', 'Noto Sans Thai', system-ui, sans-serif; }
#hall { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
#vignette { position: fixed; inset: 0; pointer-events: none; background: linear-gradient(to top, rgba(7, 6, 13, .92), transparent 30%), radial-gradient(ellipse 80% 75% at 50% 46%, transparent 58%, rgba(7, 6, 13, .88) 100%); }
#brand { position: fixed; top: 14px; left: 0; right: 0; display: flex; justify-content: center; pointer-events: none; }
#brand img { display: block; height: clamp(64px, 13vh, 124px); width: auto; filter: drop-shadow(0 4px 18px rgba(7, 6, 13, .85)); }
#caption { position: fixed; left: 0; right: 0; bottom: 7%; display: grid; justify-items: center; gap: 6px; text-align: center; pointer-events: none; padding: 0 16px; transition: opacity .6s ease, transform .6s ease; }
#caption.out { opacity: 0; transform: translateY(8px); }
#cap-meta { font-size: clamp(14px, 1.25vw, 18px); letter-spacing: .3em; text-indent: .3em; text-transform: uppercase; color: color-mix(in srgb, var(--accent) 70%, #fff); text-shadow: 0 0 1em rgba(7, 6, 13, .95); }
#cap-name { margin: 0; font: 400 clamp(30px, 4.4vw, 58px)/1.1 'Chonburi', 'Taviraj', Georgia, serif; text-shadow: 0 0 1.4em rgba(7, 6, 13, .95), 0 0 .4em color-mix(in srgb, var(--accent) 40%, transparent); }
#cap-dots { display: flex; gap: 8px; margin-top: 4px; }
#cap-dots i { width: 22px; height: 3px; border-radius: 2px; background: rgba(255, 224, 138, .22); }
#cap-dots i.on { background: var(--accent); box-shadow: 0 0 8px var(--accent); }
#controls { position: fixed; right: max(16px, env(safe-area-inset-right, 0px)); bottom: 16px; display: flex; gap: 8px; }
#controls button { font: 500 13px 'Anuphan', system-ui, sans-serif; color: var(--ink); background: rgba(20, 17, 42, .72); border: 1px solid rgba(255, 224, 138, .35); border-radius: 999px; padding: 8px 14px; cursor: pointer; backdrop-filter: blur(6px); }
#controls button:hover { border-color: var(--gold3); }
#controls button:focus-visible { outline: none; box-shadow: 0 0 0 3px #5fc9ff; }
#empty { position: fixed; inset: 0; display: grid; place-items: center; color: var(--muted); font-size: 16px; }
#empty[hidden], #caption[hidden] { display: none; }
body.idle #controls { opacity: 0; transition: opacity 1.2s ease; }
@media (hover: none) { body.idle #controls { opacity: 1; } } /* touch screens have no mouse to wake them with */
@media (max-width: 640px) { #controls button { padding: 7px 10px; } }