.prologue{position:fixed;inset:0;box-sizing:border-box;width:100%;height:100%;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;overflow:hidden;background:#042644;color:#101923;touch-action:manipulation;overscroll-behavior:none;font-family:Arial,Helvetica,sans-serif}
.prologue::backdrop{background:#042644}
.prologue-fade{position:absolute;inset:0;z-index:6;background:#000;opacity:0;pointer-events:none}
.prologue[data-phase=riding],.prologue[data-phase=riding]::backdrop{background:transparent}
.prologue[data-phase=riding]>:not(.prologue-fade){display:none!important}
.prologue-scene{position:absolute;inset:0;overflow:hidden;pointer-events:none;background:#b98e78}
.prologue-scene::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 54% 25% at 50% 48%,rgba(231,198,171,.2) 0%,rgba(231,198,171,.13) 46%,rgba(231,198,171,0) 100%);opacity:0;transition:opacity .7s ease;pointer-events:none}
.prologue[data-phase=title] .prologue-scene::after{opacity:1}
.prologue-photo{position:absolute;top:0;left:0;display:block;width:100%;height:auto;will-change:transform}
.prologue-credit{position:absolute;top:43%;left:16px;right:16px;margin:0;text-align:center;color:#102b38;font-size:clamp(27px,7.2vw,46px);font-weight:850;letter-spacing:-.8px;line-height:1.08;text-shadow:0 1px 10px #f3d8c088;opacity:1;pointer-events:none;z-index:2}
.prologue-credit>strong,.prologue-credit>span,.prologue-credit>small{opacity:0}
.prologue-credit strong{display:block;font:inherit;text-transform:uppercase;letter-spacing:.08em}
.prologue-credit span,.prologue-credit small{display:block;text-transform:uppercase}
.prologue-credit span{margin-top:14px;font-size:.46em;font-weight:750;letter-spacing:4px}
.prologue-credit small{margin-top:9px;font-size:.34em;font-weight:700;letter-spacing:2.5px}
.prologue-tap{position:absolute;top:0;bottom:0;width:50%;margin:0;padding:0;border:0;background:transparent!important;border-radius:0;box-shadow:none;z-index:4;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.prologue-left{left:0}.prologue-right{right:0}
.prologue-tap:focus{outline:none}.prologue-tap:focus-visible{outline:2px dashed #ffe48a;outline-offset:-5px}
.prologue-dialogue{position:absolute;inset:0;padding-top:env(safe-area-inset-top);padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right);padding-bottom:calc(12px + env(safe-area-inset-bottom));pointer-events:none;z-index:3}
.prologue-bottom{position:absolute;display:flex;flex-direction:column;gap:6px}
.prologue-bubble{position:relative;margin:0;padding:6px 9px;border:2px solid #101923;border-radius:16px 17px 16px 4px;background:#fffdf0;box-shadow:3px 3px 0 #101923;font-size:var(--bubble-font,14px);font-weight:400;line-height:1.22;visibility:hidden}
.prologue-bubble strong{font-weight:900;font-size:1.08em}.prologue-bubble[data-speaker=You]{background:#dceef8;border-radius:16px 16px 4px 16px}
.prologue-bubble.is-visible{visibility:visible;animation:prologue-ink .38s ease-out}
.prologue-status{position:absolute;top:44%;left:20px;right:20px;margin:0;padding:18px;border-radius:12px;background:#062644e8;color:#fff;text-align:center;pointer-events:none;z-index:5;font-size:16px;line-height:1.4}
.prologue:not([data-phase=loading]):not([data-phase=error]) .prologue-status{width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%)}
.prologue [hidden]{display:none!important}
@keyframes prologue-ink{from{opacity:0}to{opacity:1}}
@media(max-height:650px){.prologue-bubble{padding:4px 7px}.prologue-bottom{gap:5px}}
/* Wide screens: the panel is a centred column (prologue.mjs MAX_ASPECT). */
@media(orientation:landscape){.prologue-scene{background:radial-gradient(ellipse at bottom right,#7c918d,#273d46 70%)}}
@media(prefers-reduced-motion:reduce){.prologue-bubble.is-visible{animation-duration:.2s}.prologue-photo{will-change:auto}.prologue-scene::after{transition-duration:.12s}}

/* Let the first line appear just after the pan comes to rest. */
.prologue[data-line="0"] .prologue-bubble.is-visible{animation:prologue-ink .55s ease-out .3s both}
@media(prefers-reduced-motion:reduce){.prologue[data-line="0"] .prologue-bubble.is-visible{animation-duration:.2s;animation-delay:.1s}}
/* Each speaker's bubble in their faded signature colour (signature-colors.mjs). */
.prologue-bubble[data-sig]{background:var(--sig-faded)}

/* Live (prologue.mjs live): the credit and bubbles over the running lake. */
.prologue-live,.prologue-live::backdrop{background:transparent}
.prologue-live .prologue-scene{display:none}
/* The stunt's own fade-in is covered while the prologue holds it before the pull. */
#game[data-prologue-live] .opening-fade{opacity:0!important}

/* Bubbles sized to their words, with a tail toward the speaker: yours blue,
   on the left; Dylan's faded maroon, on the right. */
.prologue-bottom{gap:13px}
.prologue-bubble{--fill:#fffdf0;align-self:flex-start;max-width:var(--bubble-width,86%);box-sizing:border-box;background:var(--fill);border-radius:16px}
.prologue-bubble[data-speaker=You]{--fill:#c3e0f6;border-radius:16px}
.prologue-bubble:not([data-speaker=You]){align-self:flex-end}
/* Each of the crew in their own faded colour: Dylan maroon, Jess pink, Wade sage, Marco sand, Cooper sky. */
.prologue-bubble[data-speaker=Dylan]{--fill:#dfb3ba}.prologue-bubble[data-speaker=Jess]{--fill:#f4cfe0}.prologue-bubble[data-speaker=Wade]{--fill:#d6e3c4}
.prologue-bubble[data-speaker=Marco]{--fill:#efdfbd}.prologue-bubble[data-speaker=Cooper]{--fill:#cfe6f0}
/* C (Marco's filmer at Como): a faded teal, after the board in her art. */
.prologue-bubble[data-speaker=C]{--fill:#cbe9e4}
.prologue-bubble::before,.prologue-bubble::after{content:"";position:absolute;width:0;height:0;border-style:solid;border-color:transparent}
.prologue-bubble::before{bottom:-12px;left:14px;border-width:12px 11px 0 0;border-top-color:#101923}
.prologue-bubble::after{bottom:-7.5px;left:16.5px;border-width:7.5px 6.5px 0 0;border-top-color:var(--fill)}
.prologue-bubble:not([data-speaker=You])::before{left:auto;right:14px;border-width:12px 0 0 11px}
.prologue-bubble:not([data-speaker=You])::after{left:auto;right:16.5px;border-width:7.5px 0 0 6.5px}
@media(max-height:650px){.prologue-bottom{gap:12px}}

/* A story scene staged on a lake (controls.mjs playLakeScene): no HUD. */
#game[data-story-stage] :is(header,#lakeHud,#announcements,#doubleUpCue,#controls,footer,#careerTutorial,#careerGoal,#careerGoals,#shootoutProgress){opacity:0!important;pointer-events:none}

/* A tail pointing up (a line's {tail:'up'}): longer, toward someone above the bubbles. */
.prologue-bubble[data-tail=up]{margin-top:20px}
.prologue-bubble[data-tail=up]::before{bottom:auto;top:-28px;border-color:transparent;border-bottom-color:#101923}
.prologue-bubble[data-tail=up]::after{bottom:auto;top:-17px;border-color:transparent;border-bottom-color:var(--fill)}
.prologue-bubble[data-tail=up]:not([data-speaker=You])::before{right:24px;border-width:0 0 26px 12px}
.prologue-bubble[data-tail=up]:not([data-speaker=You])::after{right:26.5px;border-width:0 0 19px 7px}
.prologue-bubble[data-tail=up][data-speaker=You]::before{left:24px;border-width:0 12px 26px 0}
.prologue-bubble[data-tail=up][data-speaker=You]::after{left:26.5px;border-width:0 7px 19px 0}

/* Tails drawn toward the speaker (prologue.mjs drawTails): the bubble's own tail hides. */
.prologue-tail{position:absolute;left:-2px;top:-2px;width:1px;height:1px;z-index:-1;pointer-events:none}
.prologue-tail .fill{fill:var(--fill);stroke:#101923;stroke-width:2;stroke-linejoin:round}
.prologue-tail .shadow{fill:#101923}
/* A bubble drawn whole by its SVG (box and tail one outline): its CSS box steps back. */
.prologue-bubble{isolation:isolate}
.prologue-live .prologue-bubble[data-shaped]{background:transparent;border-color:transparent;box-shadow:none}
/* A speaker's later bubbles on the same page go without a tail. */
.prologue-bubble[data-notail]::before,.prologue-bubble[data-notail]::after{display:none}
.prologue-bubble[data-autotail]::before,.prologue-bubble[data-autotail]::after{display:none}
/* A 'speaker' tail is drawn by prologue.mjs (none if the speaker isn't on screen). */
.prologue-bubble[data-tail=speaker]::before,.prologue-bubble[data-tail=speaker]::after{display:none}
.prologue-bubble[data-side=left]{align-self:flex-start}
/* Speaker colours come from signature-colors.mjs (data-sig); the tails share
   the fill. Your bubbles stay the bluer blue the user picked for the story. */
.prologue-bubble[data-sig]{--fill:var(--sig-faded);background:var(--fill)}
.prologue-bubble[data-sig=you]{--fill:#c3e0f6}
/* A stop's own title card (scene.credit) sits over any ground or water, not the prologue's pale sand: light lettering. */
.prologue[data-credit=light] .prologue-credit{color:#fff;text-shadow:0 1px 3px #000a,0 2px 16px #0008}