/* The story reads like a comic page: inked captions above an unobstructed stage. */
#intro-screen,#island-ending{--comic-ink:#191222;--comic-paper:#fff3d5;--comic-accent:#ffbf5c;box-sizing:border-box;background:#100e1c;overflow:hidden;flex-direction:column;align-items:stretch;justify-content:flex-start;isolation:isolate;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}
#intro-screen::before,#island-ending::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:-1;background:radial-gradient(ellipse at 50% 35%,#332344 0%,#171121 60%,#100e1c 100%)}
.intro-stage,.ending-stage{position:relative;flex:1 1 0;min-height:0;min-width:0;overflow:hidden;margin:0 8px 8px;background:transparent}
#intro-canvas,#ending-canvas{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:contain;image-rendering:pixelated}
.intro-copy,.ending-footer{position:relative;flex:none;z-index:2;display:flex;justify-content:center;padding:18px 24px 10px;background:none;border:0;text-align:left}
.story-dialogue{position:relative;box-sizing:border-box;width:100%;max-width:850px;min-width:0;margin:0;padding:17px 20px 10px;border:3px solid var(--comic-ink);border-radius:3px 8px 4px 5px;background:var(--comic-paper);color:var(--comic-ink);box-shadow:4px 4px 0 #06050bc9,0 0 0 1px #a991bc;transform:rotate(-.35deg)}
#intro-scene-label,#ending-scene-label{position:absolute;top:-13px;left:12px;max-width:calc(100% - 24px);box-sizing:border-box;display:block;padding:4px 11px;border:2px solid var(--comic-ink);background:var(--comic-accent);color:var(--comic-ink);font:900 clamp(12px,1.5vw,15px)/1.1 "Comic Sans MS","Chalkboard SE","Trebuchet MS",sans-serif;letter-spacing:.55px;text-transform:uppercase;transform:rotate(-1.1deg);box-shadow:2px 2px 0 var(--comic-ink)}
#intro-caption,#ending-caption{margin:0;padding:0;border:0;border-radius:0;background:none;max-width:none;color:var(--comic-ink);text-align:left;font:700 clamp(16px,1.8vw,21px)/1.28 "Comic Sans MS","Chalkboard SE","Trebuchet MS",sans-serif;overflow-wrap:normal;text-shadow:none}
[data-kind="speech"] .story-dialogue{border-radius:23px 17px 24px 19px;background:#fffaf0;transform:rotate(.3deg)}
[data-kind="speech"] .story-dialogue::after{content:"";position:absolute;bottom:-10px;left:17%;width:16px;height:16px;background:#fffaf0;border-right:3px solid var(--comic-ink);border-bottom:3px solid var(--comic-ink);transform:skewY(24deg) rotate(32deg)}
[data-scene="signal"]{--comic-accent:#ffc4de!important}
[data-scene="rescue"]{--comic-accent:#ceb0ff!important}
.intro-navigation{position:absolute;z-index:3;right:max(13px,env(safe-area-inset-right));bottom:max(10px,env(safe-area-inset-bottom));display:flex;align-items:center;gap:8px;padding:0;background:none}
#intro-next,#ending-score{pointer-events:auto;box-sizing:border-box;min-height:44px;min-width:64px;padding:8px 13px;border:3px solid #191222;border-radius:5px;background:#ffd277;color:#21142c;box-shadow:3px 3px 0 #07050a;letter-spacing:.35px;text-shadow:none;font:900 14px/1 "Comic Sans MS","Chalkboard SE","Trebuchet MS",sans-serif;white-space:nowrap;touch-action:manipulation}
#intro-next:active,#ending-score:active{transform:translate(2px,2px);box-shadow:1px 1px 0 #07050a}
#intro-next:disabled{opacity:.5}
#intro-next:focus-visible,#ending-score:focus-visible{outline:3px solid #fff;outline-offset:3px}
#intro-count{padding:4px 6px;border-radius:4px;background:#100b19d9;color:#f9e8d0;font:700 12px/1.2 "Trebuchet MS",sans-serif}
#island-ending{position:absolute;inset:0;z-index:18;pointer-events:none;display:flex}
#island-ending.hidden{display:none}
.ending-footer{order:-1;position:static}
#ending-thanks{position:static;transform:none;width:auto;max-width:none;padding:0;border:0;border-radius:0;background:none;box-shadow:none;text-align:left;color:var(--comic-ink)}
#ending-thanks strong{display:block;font:900 clamp(16px,1.8vw,21px)/1.25 "Comic Sans MS","Chalkboard SE","Trebuchet MS",sans-serif}
#ending-thanks span{display:block;font:700 clamp(14px,1.5vw,18px)/1.25 "Comic Sans MS","Chalkboard SE","Trebuchet MS",sans-serif;margin-top:3px;color:#563657}
#ending-score{position:absolute;right:max(13px,env(safe-area-inset-right));bottom:max(10px,env(safe-area-inset-bottom));z-index:3}
#ending-caption[hidden],#ending-thanks[hidden],#ending-score[hidden]{display:none}
@media(max-width:640px) and (orientation:portrait){.intro-copy,.ending-footer{padding:22px 15px 13px}.story-dialogue{padding:18px 13px 12px}#intro-scene-label,#ending-scene-label{font-size:12px;left:8px}.intro-stage,.ending-stage{margin:0 0 58px}.intro-navigation{right:14px;bottom:max(12px,env(safe-area-inset-bottom))}#ending-score{bottom:max(12px,env(safe-area-inset-bottom))}}
@media(max-height:450px) and (orientation:landscape){.intro-copy,.ending-footer{padding:15px 70px 7px}.story-dialogue{padding:13px 15px 7px;max-width:760px}#intro-scene-label,#ending-scene-label{font-size:12px;top:-11px;padding:3px 9px}#intro-caption,#ending-caption{font-size:16px;line-height:1.18}#ending-thanks strong{font-size:16px}#ending-thanks span{font-size:14px}.intro-stage,.ending-stage{margin-bottom:4px}#intro-next,#ending-score{font-size:12px;padding:7px 10px}}
@media(prefers-reduced-motion:reduce){.story-dialogue{transform:none}}