/* Cinematic presentation owns its bars and input class, independently of town tier reveals. */
#cinematic { position:fixed; inset:0; z-index:70; pointer-events:none; --cine-bar:min(8vh,64px); -webkit-font-smoothing:antialiased; }
.cine-fade { position:absolute; inset:0; background:#000; opacity:0; transition:opacity .9s ease; }
.cine-bar { position:absolute; left:0; width:100%; height:var(--cine-bar); background:#000; transform:scaleY(0); transition:transform .35s ease; }
.cine-top { top:0; transform-origin:top; }.cine-bottom { bottom:0; transform-origin:bottom; }
body.cinematic-shot .cine-bar { transform:scaleY(1); }
/* No shadow on any of the lettering (owner rule, 2026-10-06; tools/verify_no_text_shadow.mjs): over the world each line sits on a plain see-through dark plate. */
.cine-card { position:absolute; top:24%; left:16px; right:16px; width:fit-content; max-width:calc(100% - 32px); box-sizing:border-box; margin:0 auto; padding:.16em .7em .34em; border-radius:14px; background:rgba(8,6,4,.58); text-align:center; color:#f3e6c4; font:700 clamp(28px,4.2vw,56px)/1.2 Cinzel,Georgia,serif; letter-spacing:.06em; text-wrap:balance; }
.cine-card-lower { top:auto; bottom:calc(var(--cine-bar) + 66px); font-size:clamp(24px,3vw,40px); }
.cine-location { position:absolute; left:calc(28px + env(safe-area-inset-left,0px)); bottom:calc(var(--cine-bar) + 20px); padding:8px 16px 10px; border-radius:12px; background:rgba(8,6,4,.58); opacity:0; transition:opacity .6s ease, bottom .35s ease; color:#f3e6c4; font:600 clamp(12px,1vw,15px)/1.3 Cinzel,Georgia,serif; letter-spacing:.16em; }
/* (an arrival's place card, src/arrivals.js: the name in the caption's lettering, larger, and what the place is under it) */
.cine-location .cine-place { display:block; font:600 clamp(22px,2.3vw,34px)/1.15 Cinzel,Georgia,serif; letter-spacing:.1em; }
.cine-location .cine-sub { display:block; margin-top:6px; font:italic 400 clamp(14px,1.25vw,19px)/1.3 'EB Garamond',Georgia,serif; letter-spacing:.03em; color:#e6d6b0; }
.cine-card::after { content:''; display:block; width:140px; height:1px; margin:12px auto 0; background:linear-gradient(90deg,transparent,#d6aa5cd9,transparent); }
.cine-caption { position:absolute; bottom:calc(var(--cine-bar) + 16px); left:10%; right:10%; width:fit-content; max-width:80%; box-sizing:border-box; margin:0 auto; padding:5px 16px 7px; border-radius:12px; background:rgba(8,6,4,.62); color:#f3e6c4; text-align:center; font:clamp(16px,1.5vw,22px)/1.35 'EB Garamond',Georgia,serif; text-wrap:pretty; }
/* (a plain line of text: ui-layout.css paints every button with frame art through a selector that carries an id, so the art is taken off with !important) */
#cinematic .cine-skip { position:absolute; bottom:calc(var(--cine-bar) + 8px + env(safe-area-inset-bottom,0px)); right:calc(20px + env(safe-area-inset-right,0px)); min-height:40px; padding:6px 12px !important; border:0 !important; border-image:none !important; border-radius:10px; background:rgba(8,6,4,.58) !important; box-shadow:none; filter:none; color:#e8d8b7; font:16px/1.3 'EB Garamond',Georgia,serif; text-decoration:underline; text-underline-offset:4px; pointer-events:auto; cursor:pointer; transition:transform .15s, color .15s; }
#cinematic .cine-skip:active { transform:scale(.96); }#cinematic .cine-skip:focus-visible { outline:1px solid #d6aa5c; outline-offset:4px; }
#cinematic [hidden] { display:none; }
body:has(#cinematic) :is(#hud,#minis,#playerCard,#targetCard,#buffs,#hirelingCard,#msgs,#questTracker,#prologueObjective,#mHud,#mControls,#mCluster,#mStick) { transition:opacity .35s ease; }
body.cinematic-shot :is(#hud,#minis,#playerCard,#targetCard,#buffs,#hirelingCard,#msgs,#questTracker,#prologueObjective,#mHud,#mControls,#mQuestMore,#mQuestMin,#mQuestPill,#areaTitle,#tipToast,#discoveryStack,#banner) { opacity:0 !important; pointer-events:none !important; }
body.prologue-objective :is(#mQuestMore,#mQuestMin,#mQuestPill),body.prologue-road :is(#mQuestMore,#mQuestMin,#mQuestPill) { visibility:hidden; }
body.cinematic-shot #voiceSubtitle,body.cinematic-shot #voiceBubble { z-index:75; }
body.cinematic-shot #ui #voiceSubtitle:not(.voice-sr) { bottom:calc(min(8vh,64px) + 16px); left:50%; top:auto; transform:translateX(-50%); width:max-content; max-width:min(900px,80vw); padding:5px 16px 7px; border:0; border-radius:12px; background:rgba(8,6,4,.62); box-shadow:none; backdrop-filter:none; -webkit-backdrop-filter:none; color:#f3e6c4; font:clamp(16px,1.5vw,22px)/1.35 'EB Garamond',Georgia,serif; text-wrap:pretty; text-align:center; }
body.cinematic-shot #ui #voiceSubtitle:not(.voice-sr) strong { color:inherit !important; }
body.cinematic-shot #mCluster,body.cinematic-shot #mStick,body.cinematic-shot #chat,body.cinematic-shot #chatBubbles { opacity:0; pointer-events:none; }
body.arrival-scene.cinematic-shot #mTouch { opacity:0; } /* (an arrival scene, src/arrivals.js: the phone's resting thumb ring too) */
body.mobile.cinematic-shot #voiceBubble:not([hidden]) { display:block; } /* (only a line that has a speaker in the frame: a hidden bubble stays hidden) */
body.prologue-objective #questTracker,body.prologue-road #questTracker { visibility:hidden; }
#prologueObjective { position:fixed; z-index:18; box-sizing:border-box; padding:14px 16px; color:#f6c95e; font:600 16px/1.25 'EB Garamond',Georgia,serif; text-wrap:pretty; font-variant-numeric:tabular-nums; pointer-events:none; background:linear-gradient(#1a130ce0,#0a0806dc); }
/* (phones: under the row of menu buttons, left of the minimap: the tip card sits under the portrait) */
body.mobile #prologueObjective { top:calc(64px + env(safe-area-inset-top,0px)); left:auto; right:calc(120px + env(safe-area-inset-right,0px)); width:max-content; max-width:min(260px,34vw); height:auto; max-height:none; overflow:visible; padding:6px 12px; font-size:13px; text-align:right; border-radius:12px; }
/* (a place line while a caption or a spoken line is up: the place line steps up out of the caption's band, so the two plates never overlap) */
body.cinematic-shot:has(#voiceSubtitle:not([hidden]):not(.voice-sr)) .cine-location,#cinematic:has(.cine-caption:not([hidden])) .cine-location { bottom:calc(var(--cine-bar) + 96px); }
@media (max-height:450px) { body.cinematic-shot:has(#voiceSubtitle:not([hidden]):not(.voice-sr)) .cine-location,#cinematic:has(.cine-caption:not([hidden])) .cine-location { bottom:calc(var(--cine-bar) + 80px); } }
@media (max-height:450px) { .cine-location .cine-place { font-size:22px; }.cine-location .cine-sub { font-size:14px; margin-top:3px; }.cine-card-lower { top:auto !important; bottom:calc(var(--cine-bar) + 60px); }.cine-location { left:20px; }.cine-card { top:23%; font-size:clamp(26px,4vw,36px); }.cine-card::after { margin-top:8px; }.cine-caption { left:12%; right:12%; font-size:16px; } }
@media (prefers-reduced-motion:reduce) { .cine-bar,.cine-fade { transition:none; } }
.quest-reduced-motion .cine-bar,.quest-reduced-motion .cine-fade { transition:none; }