#ember-cinematic[hidden] { display: none !important; }
body.cinematic-active .hud, body.cinematic-active #autochip, body.cinematic-active #touch, body.cinematic-active #coop-panel, body.cinematic-active #coop-chat, body.cinematic-active #coop-net, body.cinematic-active #coop-banner, body.cinematic-active #m3-abar, body.cinematic-active #m3-tip, body.cinematic-active #m3-toasts, body.cinematic-active #m3-wheel, body.cinematic-active #m1-status, body.cinematic-active #frontier-open, body.cinematic-active #frontier-vitals, body.cinematic-active #tut-hint { display: none !important; }
#ember-cinematic { position: fixed; inset: 0; z-index: 45; pointer-events: none; color: var(--af-bone); font-family: 'Alegreya Sans', sans-serif; }
#ember-cinematic .cinematic-vote, #ember-cinematic .cinematic-film { display: none; }
#ember-cinematic.is-vote { pointer-events: auto; background: radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--af-iron-800) 92%, transparent), color-mix(in srgb, var(--af-void) 96%, transparent) 75%); display: grid; place-items: center; padding: 20px; }
#ember-cinematic.is-vote .cinematic-vote { display: block; width: min(550px, 100%); padding: clamp(25px, 5vw, 50px); border: 1px solid color-mix(in srgb, var(--af-gold-500) 53%, transparent); background: linear-gradient(145deg, var(--af-stone-700), var(--af-stone-900)); box-shadow: 0 24px 80px color-mix(in srgb, var(--af-void) 73%, transparent), inset 0 0 50px color-mix(in srgb, var(--af-gold-600) 6%, transparent); text-align: center; }
.cinematic-eyebrow { color: var(--af-ember-300); font: 700 11px Cinzel, serif; letter-spacing: .24em; }
.cinematic-vote h2 { margin: 15px 0; color: var(--af-gold-300); font: 700 clamp(24px, 5vw, 37px) Cinzel, serif; line-height: 1.18; }
.cinematic-vote p { max-width: 390px; margin: 0 auto; color: var(--af-bone); font-size: 18px; line-height: 1.4; }
.cinematic-vote-meta { display: flex; justify-content: space-between; gap: 15px; margin: 27px 0 15px; padding-top: 18px; border-top: 1px solid color-mix(in srgb, var(--af-gold-500) 27%, transparent); color: var(--af-gold-300); font-size: 16px; }
.cinematic-vote-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cinematic-vote-actions button { min-height: 50px; padding: 10px; border: 1px solid var(--af-gold-600); background: var(--af-ember-700); color: var(--af-ember-100); font: 700 15px Cinzel, serif; cursor: pointer; }
.cinematic-vote-actions button + button { border-color: var(--af-soot); background: var(--af-iron-700); }
.cinematic-vote-actions button:hover:not(:disabled), .cinematic-vote-actions button:focus-visible { outline: 2px solid var(--af-gold-300); outline-offset: 2px; filter: brightness(1.18); }
.cinematic-vote-actions button:disabled { opacity: .57; cursor: default; }
#ember-cinematic.is-playing { pointer-events: auto; }
#ember-cinematic.is-playing .cinematic-film { display: block; position: absolute; inset: 0; overflow: hidden; background: linear-gradient(180deg, color-mix(in srgb, var(--af-void) 85%, transparent) 0, color-mix(in srgb, var(--af-void) 0%, transparent) 23%, color-mix(in srgb, var(--af-void) 0%, transparent) 68%, color-mix(in srgb, var(--af-void) 91%, transparent) 100%); }
.cinematic-film::before, .cinematic-film::after { content: ''; position: absolute; left: 0; right: 0; height: clamp(34px, 7.5vh, 78px); background: var(--af-void); }
.cinematic-film::before { top: 0; } .cinematic-film::after { bottom: 0; }
.cinematic-top { position: absolute; z-index: 1; top: clamp(52px, 9vh, 98px); left: clamp(18px, 5vw, 80px); right: clamp(18px, 5vw, 80px); display: flex; justify-content: space-between; gap: 12px; color: var(--af-ember-300); font: 700 11px Cinzel, serif; letter-spacing: .2em; text-shadow: 0 2px 12px var(--af-void); }
.cinematic-heading { position: absolute; left: 0; right: 0; top: 35%; padding: 0 24px; color: var(--af-bone); text-align: center; font: 700 clamp(30px, 7vw, 76px) Cinzel, serif; letter-spacing: .12em; text-shadow: 0 6px 22px var(--af-void); opacity: 0; transform: translateY(14px); transition: opacity .6s, transform .6s; }
.cinematic-heading.visible { opacity: 1; transform: translateY(0); }
.cinematic-subtitles { position: absolute; z-index: 1; bottom: clamp(70px, 13vh, 140px); left: 50%; width: min(640px, calc(100vw - 36px)); transform: translateX(-50%); text-align: center; text-shadow: 0 2px 8px var(--af-void), 0 2px 2px var(--af-void); }
.cinematic-subtitles span { color: var(--af-ember-300); font: 700 12px Cinzel, serif; letter-spacing: .16em; }
.cinematic-subtitles p { min-height: 1.4em; margin: 7px 0 0; color: var(--af-ember-100); font: 600 clamp(19px, 3vw, 29px) 'Alegreya Sans', sans-serif; }
.cinematic-progress { position: absolute; z-index: 1; bottom: clamp(34px, 7.5vh, 78px); left: 0; right: 0; height: 2px; background: color-mix(in srgb, var(--af-ember-100) 19%, transparent); }
.cinematic-progress i { display: block; width: 0; height: 100%; background: var(--af-ember-300); box-shadow: 0 0 12px var(--af-ember-300); }
@media (max-width: 600px) { .cinematic-top { font-size: 9px; letter-spacing: .08em; } .cinematic-vote-actions { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .cinematic-heading { transition: none; } }