@font-face { font-family: "Sigle"; src: url("/assets/fonts/Sigle-Regular.ttf") format("truetype"); font-display: swap; }
html, body { margin: 0; height: 100%; background: #000; color: #fff; font-family: Jost, Futura, "Helvetica Neue", system-ui, sans-serif; overflow: hidden; }
#stage { position: fixed; inset: 0; margin: auto; display: block; background: #000; }

.reel-ui { position: fixed; inset: 0; pointer-events: none; transition: opacity .4s; }
.reel-ui.idle, body.recording .reel-ui { opacity: 0; }
.reel-ui > * { pointer-events: auto; }
.reel-logo { position: absolute; left: 20px; top: 16px; height: 22px; width: calc(22px * 1685 / 268); background: #fff; -webkit-mask: url("/assets/brand/logo-black.png") center / contain no-repeat; mask: url("/assets/brand/logo-black.png") center / contain no-repeat; mix-blend-mode: difference; }
.reel-bar { position: absolute; left: 50%; bottom: max(16px, env(safe-area-inset-bottom)); transform: translateX(-50%); display: flex; gap: 8px; align-items: center; padding: 8px; background: rgba(0,0,0,.55); backdrop-filter: blur(8px); border-radius: 999px; }
.reel-bar button { font: 500 13px/1 Jost, Futura, sans-serif; letter-spacing: .08em; text-transform: uppercase; color: #fff; background: rgba(255,255,255,.12); border: 0; border-radius: 999px; padding: 10px 14px; cursor: pointer; }
.reel-bar button:hover { background: #ff2d9b; }
.reel-status { font-size: 12px; letter-spacing: .06em; color: rgba(255,255,255,.75); padding: 0 8px; white-space: nowrap; }
.reel-status:empty { display: none; }

.reel-start { position: absolute; inset: 0; display: grid; place-items: center; align-content: center; gap: 18px; background: #000; cursor: pointer; }
.reel-start button { font: 400 clamp(40px, 9vw, 120px)/1 Sigle, sans-serif; text-transform: uppercase; color: #fff; background: none; border: 0; cursor: pointer; }
.reel-start button:hover { color: #ff2d9b; }
.reel-progress { margin: 0; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.6); min-height: 1.2em; }
.reel-hint { position: absolute; bottom: 24px; left: 0; right: 0; text-align: center; font-size: 12px; letter-spacing: .08em; color: rgba(255,255,255,.45); }
@media (max-width: 600px) { .reel-bar button { padding: 10px 11px; font-size: 12px; } .reel-status { display: none; } }