#prologue{position:fixed;inset:0;height:100dvh;z-index:1000;background:var(--ui-panel-prologue-prologue-background);color:var(--ui-panel-prologue-prologue-text);display:grid;place-items:center;overflow:hidden;isolation:isolate}
#prologue[hidden]{display:none!important}
#prologue video{display:block;width:100%;height:100%;object-fit:contain;position:absolute;inset:0;background:var(--ui-panel-prologue-prologue-background);image-rendering:auto}
.prologue-copy{position:absolute;left:5%;right:5%;top:8%;text-align:center;text-shadow:0 2px 8px var(--ui-panel-prologue-prologue-copy-text-shadow);background:linear-gradient(90deg,transparent,var(--ui-panel-prologue-prologue-copy-background),transparent);padding:12px;transition:opacity .2s}
.prologue-copy h2{margin:0 0 8px;font-size:clamp(20px,4vw,34px)}.prologue-copy p{font-size:14px;margin:0;line-height:1.5}
#prologue[data-phase="playing"] .prologue-copy{opacity:0;pointer-events:none}
.prologue-controls{position:absolute;bottom:max(18px,env(safe-area-inset-bottom));left:4%;right:4%;display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;padding:8px;background:linear-gradient(90deg,transparent,var(--ui-panel-prologue-prologue-controls-background),transparent)}
.pack-ui #prologue button,#prologue button{min-height:44px;min-width:110px;border:1px solid var(--ui-panel-prologue-prologue-prologue-border);border-radius:8px;border-image:none;background:var(--ui-panel-prologue-prologue-prologue-background);color:var(--ui-panel-prologue-prologue-prologue-text);text-shadow:none;padding:10px 16px;font:inherit;font-size:14px;cursor:pointer}
#prologue button:disabled{opacity:.55;cursor:wait}#prologue button:focus-visible{outline:3px solid var(--ui-panel-prologue-prologue-focus);outline-offset:3px}
.guide-actions{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin:10px 0 0}
.guide-actions #guide-replay,.guide-actions #guide-close{display:block;margin:0;min-width:0;font:inherit;padding:8px 16px}
#prologue-guide-backdrop{display:none;position:fixed;inset:0;background:var(--ui-panel-prologue-prologue-guide-backdrop-background);z-index:6}
#guide-panel.prologue-guide:not([hidden])~#prologue-guide-backdrop{display:block}
@media(orientation:landscape) and (max-height:450px){.prologue-copy{top:3%;padding:8px}.prologue-copy h2{font-size:20px}.prologue-copy p{font-size:12px}.prologue-controls{bottom:max(5px,env(safe-area-inset-bottom));padding:4px}.pack-ui #prologue button{padding:8px 12px}}
@media(prefers-reduced-motion:reduce){.prologue-copy{transition:none}}
/* Fill each phone's viewport without stretching the picture. Existing portrait
   and landscape masters are selected by JS; rotation preserves playback time. */
@media(pointer:coarse){#prologue video{object-fit:cover}}
.prologue-controls{inset:0;pointer-events:none;background:none;padding:0}
.prologue-controls button{pointer-events:auto;position:absolute}
body #prologue [data-prologue-play]{left:50%;top:50%;transform:translate(-50%,-50%);min-width:64px;min-height:64px;border-radius:50%;font-size:24px;padding:12px;background:var(--ui-panel-prologue-prologue-background-2)}
body #prologue [data-prologue-skip]{left:max(16px,env(safe-area-inset-left));bottom:max(14px,env(safe-area-inset-bottom));min-width:0;font-size:12px;padding:8px 12px;background:var(--ui-panel-prologue-prologue-background-3)}
body #prologue [data-prologue-mute]{right:max(16px,env(safe-area-inset-right));bottom:max(14px,env(safe-area-inset-bottom));min-width:44px;width:44px;height:44px;padding:10px;border-radius:50%;background:var(--ui-panel-prologue-prologue-background-3)}
body #prologue [data-prologue-mute] svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.scene-subtitle{position:absolute;left:8%;right:8%;bottom:max(68px,calc(env(safe-area-inset-bottom) + 54px));margin:0 auto;max-width:760px;padding:9px 14px;border-radius:8px;background:var(--ui-panel-prologue-scene-subtitle-background);color:var(--ui-panel-prologue-scene-subtitle-text);text-align:center;font-weight:700;font-size:clamp(14px,2.2vw,21px);line-height:1.45;text-shadow:0 2px 3px var(--ui-panel-prologue-scene-subtitle-text-shadow);box-shadow:0 2px 14px var(--ui-panel-prologue-scene-subtitle-shadow);pointer-events:none}
.scene-subtitle[hidden]{display:none!important}
#prologue[data-scene^="tutorial."] .prologue-copy h2{color:var(--ui-panel-prologue-prologue-prologue-copy-text)}
@media(orientation:landscape) and (max-height:450px){.scene-subtitle{left:15%;right:15%;bottom:max(48px,calc(env(safe-area-inset-bottom) + 38px));padding:6px 10px;font-size:13px}}
.job-options .job-option{display:grid;grid-template-rows:1fr auto;gap:5px;min-width:0}.job-options .job-option>button{width:100%;box-sizing:border-box}.job-options .job-option .job-preview{min-height:40px;padding:7px 10px;font-size:12px;background:var(--ui-panel-prologue-job-options-job-option-job-preview-background);color:var(--ui-panel-prologue-job-options-job-option-job-preview-text)}