html, body { margin: 0; height: 100%; background: #000; overflow: hidden; overscroll-behavior: none; font-family: 'Helvetica Neue', Roboto, Arial, sans-serif; color: #F9F9F9 }
#viewport { position: fixed; inset: 0; display: grid; place-items: center }
#stage { position: absolute; left: 50%; top: 50%; transform-origin: 0 0; overflow: hidden }
#stage .scene { position: absolute; inset: 0 }
#stage .fx { position: absolute; inset: 0; pointer-events: none }
#controls { position: fixed; left: 0; right: 0; bottom: 0; padding: 16px 24px 20px; display: flex; flex-direction: column; gap: 10px; background: linear-gradient(to top, rgba(0,0,0,.85), rgba(0,0,0,0)); transition: opacity .3s }
body.idle #controls, body.kiosk #controls { opacity: 0; pointer-events: none }
#row { display: flex; align-items: center; gap: 16px; font-size: 14px }
#row button { background: none; border: 1px solid rgba(249,249,249,.4); color: #F9F9F9; font: inherit; padding: 6px 14px; cursor: pointer }
#row button:hover { border-color: #F9F9F9 }
#time { font-family: 'Courier New', monospace; font-variant-numeric: tabular-nums; color: #A09F9E }
#scrub { width: 100%; accent-color: #F9F9F9 }
#chapters { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 13px }
#chapters button { background: none; border: 0; border-bottom: 1px solid transparent; color: #A09F9E; font: inherit; padding: 2px 0; cursor: pointer }
#chapters button.on { color: #F9F9F9; border-bottom-color: #EB5231 }
#err { position: fixed; inset: 0; display: none; place-items: center; padding: 40px; font-family: 'Courier New', monospace; color: #F9F9F9; white-space: pre-wrap }

/* Booth (?kiosk=1): no zoom, scroll, long-press menu or text selection */
body.booth { touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent }

/* Booth menu, pause button and hint live inside #stage, so sizes are film pixels (1920x1080) */
#menu { z-index: 10; font-family: 'SuisseIntl-Light', 'Helvetica Neue', Arial, sans-serif; color: #F9F9F9 }
#menu { position: absolute; inset: 0; box-sizing: border-box; padding: 80px; display: flex; flex-direction: column; gap: 44px; background: rgba(0,0,0,.97); opacity: 0; visibility: hidden; transition: opacity .25s, visibility .25s }
body.menu-open #menu { opacity: 1; visibility: visible }
#menu h2 { margin: 0; font: 500 61px/1 'SuisseIntl-Medium', 'Helvetica Neue', Arial, sans-serif; letter-spacing: -.03em }
#menu-grid { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px }
.menu-col { display: flex; flex-direction: column; gap: 12px }
.menu-group { margin: 0 0 12px; font: 500 39px/1 'SuisseIntl-Medium', 'Helvetica Neue', Arial, sans-serif; letter-spacing: -.02em }
.menu-group::after { content: ''; display: block; width: 56px; height: 3px; margin-top: 16px; background: #EB5231 }
#menu button { font: inherit; color: inherit; cursor: pointer; text-align: left }
.menu-col button { position: relative; display: flex; gap: 20px; min-height: 88px; padding: 0 24px; box-sizing: border-box; align-items: center; background: #111; border: 1px solid rgba(208,207,206,.3); font: 500 28px/1.15 'SuisseIntl-Medium', 'Helvetica Neue', Arial, sans-serif }
.menu-col button .n { font: 18px/1 'Pitch-Regular', 'Courier New', monospace; letter-spacing: .03em; color: #D0CFCE }
.menu-col button.on::before { content: ''; position: absolute; left: -1px; top: -1px; bottom: -1px; width: 5px; background: #EB5231 }
#menu button:active { background: #2a2a2a }
#menu-actions { display: flex; align-items: center; gap: 24px }
#menu-actions button { min-height: 80px; padding: 0 40px; background: none; border: 1px solid rgba(249,249,249,.5); font: 500 28px/1 'SuisseIntl-Medium', 'Helvetica Neue', Arial, sans-serif }
#menu-actions button.primary { background: #F9F9F9; border-color: #F9F9F9; color: #000 }
#menu-actions button.primary:active { background: #D0CFCE }
#menu-status { margin-left: auto; font: 16px/1 'Pitch-Regular', 'Courier New', monospace; letter-spacing: .03em; color: #D0CFCE }
#booth-bar { position: absolute; right: 80px; bottom: 48px; z-index: 10; display: none; gap: 16px }
body.booth:not(.menu-open) #booth-bar { display: flex }
#hint, #pause { box-sizing: border-box; height: 72px; display: flex; align-items: center; gap: 14px; padding: 0 28px; background: rgba(0,0,0,.72); border: 1px solid rgba(249,249,249,.25); font: 300 24px/1 'SuisseIntl-Light', 'Helvetica Neue', Arial, sans-serif; letter-spacing: .02em; color: #F9F9F9 }
#hint .dot { width: 10px; height: 10px; border-radius: 50%; background: #EB5231 }
body.paused #hint { display: none }
#pause { cursor: pointer }
#pause:active { background: #2a2a2a }
#pause .icon { box-sizing: border-box; width: 16px; height: 20px; border-left: 5px solid #F9F9F9; border-right: 5px solid #F9F9F9 }
body.paused #pause .icon { width: 0; height: 0; border-style: solid; border-width: 10px 0 10px 16px; border-color: transparent transparent transparent #F9F9F9 }