.tutorial-decisions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin:24px 0 16px}.tutorial-prompt small{font-size:13px;color:#a0aeaf}
#tutorialHint{position:fixed;z-index:24;top:126px;left:50%;transform:translateX(-50%);width:min(460px,calc(100vw - 30px));padding:12px 16px;border:1px solid #9c8c66;background:#10191ef2;box-shadow:0 5px 24px #0008;pointer-events:none;text-align:center;box-sizing:border-box}
#tutorialHint small{font-size:12px;color:#c5ae78}#tutorialHint h3{font-size:18px;margin:4px 0;color:#f0e7d1}#tutorialHint p{font-size:15px;line-height:1.5;margin:4px 0 0;color:#d5e0de}
#tutorialHint[hidden],#tutorialExit[hidden]{display:none!important}
#tutorialExit{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);z-index:24;padding:8px 14px;font-size:14px;min-height:44px}
.tutorial-active #objective{visibility:hidden}.tutorial-active #difficulty,.tutorial-active #threatBadge,.tutorial-active #mobileGrowth{visibility:hidden}
@media (pointer:coarse),(max-width:800px){#tutorialHint{top:max(54px,calc(env(safe-area-inset-top) + 48px));width:min(410px,calc(100vw - 32px));padding:8px 12px}#tutorialHint h3{font-size:16px;margin:2px 0}#tutorialHint p{font-size:14px;line-height:1.4}#tutorialExit{bottom:max(12px,env(safe-area-inset-bottom));min-height:44px}.tutorial-prompt{max-height:85svh;overflow:auto}}
@media (max-height:500px){#assetLoading.prologue-loading{gap:7px;padding:8px}.prologue-heading strong{font-size:20px}.prologue-board{max-height:calc(100svh - 90px)}#tutorialHint{top:52px;max-width:340px;padding:6px 10px}#tutorialHint small{font-size:12px}#tutorialHint h3{font-size:15px}#tutorialHint p{font-size:13px;line-height:1.35}#tutorialExit{bottom:8px;padding:5px 12px}}
@media (prefers-reduced-motion:reduce){.prologue-panel{transition:none;transform:none}}

.tutorial-active #panel0 .progress,.tutorial-active .zone-stamp{visibility:hidden}
/* Comic entrances animate complete panels, never the illustrated scene. */
#assetLoading.prologue-loading{box-sizing:border-box;padding:18px 12px;gap:12px;overflow:hidden;background:radial-gradient(ellipse at 50% 35%,#26313c 0,#0d121a 45%,#040609 100%);justify-content:center}
.prologue-heading,.prologue-footer{width:min(640px,max(300px,calc((100svh - 150px)*.66)));max-width:calc(100vw - 24px);flex-shrink:0}
.prologue-heading{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding-bottom:8px;border-bottom:1px solid #bda97855}
#assetLoading .prologue-heading strong{font:700 clamp(21px,3vw,30px) Cinzel,Georgia,serif;color:#eee0c2;letter-spacing:.12em;text-shadow:0 2px 18px #d6a86744}
.prologue-heading span{font-size:13px;color:#b9c3cc;white-space:nowrap;letter-spacing:.2em}
.prologue-board{position:relative;width:min(640px,max(300px,calc((100svh - 150px)*.66)));max-width:calc(100vw - 24px);min-height:0;max-height:calc(100svh - 150px);overflow:hidden;border:1px solid #bbab8066;box-shadow:0 18px 70px #000c;flex-shrink:1;background:#060b11}
.prologue-panel{margin:0;position:relative;aspect-ratio:8/3;overflow:hidden;background:#111820;border-bottom:3px solid #06090e;box-sizing:border-box;opacity:0;visibility:hidden;transform:translate3d(26px,22px,0) scale(1.035);clip-path:inset(0 0 100% 0);transition:opacity .65s ease,transform .9s cubic-bezier(.16,1,.3,1),clip-path .85s cubic-bezier(.16,1,.3,1),filter .6s ease}
.prologue-panel:nth-child(even){transform:translate3d(-26px,22px,0) scale(1.035)}
.prologue-panel.revealed{opacity:1;visibility:visible;transform:translate3d(0,0,0) scale(1);clip-path:inset(0);filter:brightness(.76)}
.prologue-panel.active,.prologue-complete .prologue-panel{filter:brightness(1)}
.prologue-panel:after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,#050a1122 0,transparent 45%,#04080d99 100%);box-shadow:inset 0 0 24px #02060b77}
.prologue-panel.active:before{content:'';position:absolute;z-index:2;inset:0;border-top:1px solid #f7e4aa;box-shadow:inset 0 0 15px #cdb88244;pointer-events:none;animation:prologue-edge .9s ease-out both}
.prologue-panel img{display:block;width:100%;height:100%;object-fit:cover}
.prologue-number{position:absolute;top:9px;right:12px;z-index:3;color:#e2cf9b;font:700 13px Cinzel,Georgia,serif;letter-spacing:.12em;text-shadow:0 2px 6px #000}
.prologue-panel figcaption{position:absolute;z-index:3;bottom:8px;left:10px;max-width:calc(100% - 20px);padding:7px 10px;font-size:clamp(13px,1.25vw,16px);line-height:1.5;text-align:left;font-weight:500;color:#f5ecdc;background:linear-gradient(90deg,#0b101aef,#0b101ac9);border-left:2px solid #ccb87e;box-sizing:border-box;opacity:0;transform:translateY(6px);transition:opacity .5s .3s ease,transform .5s .3s ease}
.prologue-panel.revealed figcaption{opacity:1;transform:none}
#assetLoading .prologue-footer p{margin:0 0 9px;font-size:13px;color:#bac6ce;letter-spacing:.05em}
.asset-progress-track{height:3px;background:#67788b33;overflow:hidden}.asset-progress-track i{display:block;width:0;height:100%;background:linear-gradient(90deg,#7c99aa,#eee2bb);box-shadow:0 0 8px #e8d4a4;transition:width .2s ease}
@keyframes prologue-edge{from{opacity:1}to{opacity:0}}
@media (max-height:500px){#assetLoading.prologue-loading{padding:8px;gap:7px}.prologue-heading,.prologue-footer,.prologue-board{width:min(720px,calc((100svh - 100px)*2.66));max-width:calc(100vw - 24px)}.prologue-board{max-height:calc(100svh - 100px);flex-shrink:1}.prologue-heading{padding-bottom:4px}#assetLoading .prologue-heading strong{font-size:21px}.prologue-panel figcaption{font-size:14px;max-width:90%}}
@media (prefers-reduced-motion:reduce){.prologue-panel,.prologue-panel:nth-child(even),.prologue-panel figcaption{transition:none;transform:none;clip-path:none}.prologue-panel.active:before{animation:none;display:none}}