/* Isolated from the stage: text and controls keep their readable viewport size. */
#tutorial-story[hidden]{display:none!important}
#tutorial-story{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;padding:18px;background:#0a1425e8;color:#fff5e3;font-family:system-ui,-apple-system,"Noto Sans JP",sans-serif;--story-accent:#83cfff}
#tutorial-story *{box-sizing:border-box}
.story-shell{position:relative;isolation:isolate;display:flex;flex-direction:column;width:min(1100px,100%);height:min(740px,100%);overflow:hidden;border:1px solid #8ea5b48c;border-radius:18px;box-shadow:0 24px 100px #0009;background:#142b3e}
.story-backdrop{position:absolute;inset:0;z-index:-2;background:linear-gradient(90deg,#10233208,#10233235 45%,#102332bb) center/cover}
.story-header{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:20px 26px;background:linear-gradient(#091c30dd,#091c3040)}
.story-kicker{font-size:10px;font-weight:800;letter-spacing:3px;color:#e8c58e}
.story-header h2{font-size:23px;line-height:1.3;margin:5px 0 0;letter-spacing:1px}
.story-scene{position:relative;display:flex;flex:1;min-height:0;align-items:center;justify-content:flex-end;padding:15px 40px}
.story-standee{position:absolute;left:4%;bottom:-15px;height:110%;max-height:440px;width:42%;object-fit:contain;filter:drop-shadow(0 12px 16px #0a173c85)}
.story-direction{width:52%;max-width:510px;z-index:1;text-shadow:0 2px 8px #102332}
.story-chapter{font-size:12px;color:#f1d39e;letter-spacing:2px;font-weight:700}
.story-heading{font-size:clamp(22px,3vw,36px);line-height:1.5;margin:12px 0 20px;text-wrap:balance}
.story-tip{display:flex;gap:14px;align-items:center;border:1px solid #95bbc160;border-radius:12px;background:#102a3ee8;padding:16px;text-shadow:none}
.story-tip-label{font-size:10px;letter-spacing:2px;color:#e5c58d;font-weight:800}
.story-tip-text{font-size:15px;line-height:1.7;margin:4px 0 0}
.story-icon{flex:none;width:54px;height:54px;background-size:200% 200%}
.story-icon[data-icon="radio"]{background-position:0 0}.story-icon[data-icon="shield"]{background-position:100% 0}.story-icon[data-icon="map"]{background-position:0 100%}.story-icon[data-icon="sunrise"]{background-position:100% 100%}
.story-dialogue{position:relative;display:flex;gap:18px;align-items:center;flex:none;min-height:156px;margin:0 24px;padding:14px 24px 14px 12px;border:1px solid #c3dbd88c;border-left:4px solid var(--story-accent);border-radius:12px;background:linear-gradient(110deg,#16354bf5,#102738f5);box-shadow:0 6px 25px #0004}
.story-face{width:122px;height:112px;flex:none;object-fit:contain;align-self:center}
.story-speaker{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.story-name{font-size:18px;color:var(--story-accent)}.story-role{font-size:11px;color:#b5ccd5}
.story-line{font-size:17px;line-height:1.85;margin:8px 0 0;max-width:790px}
.story-footer{display:flex;gap:12px;align-items:center;flex:none;padding:14px 24px 20px;background:#102332bd}
#tutorial-story button{font:inherit;font-size:13px;min-height:44px;cursor:pointer;touch-action:manipulation;border-radius:8px;white-space:nowrap;transition:background .15s}
#tutorial-story button:focus-visible{outline:3px solid #fff2b8;outline-offset:3px}
#tutorial-story button:disabled{opacity:.35;cursor:default}
.story-quiet{background:#0a21337a;color:#d6e3e7;border:1px solid #99b9c14d;padding:9px 14px}
.story-back{padding:10px 18px;border:1px solid #79949d;background:#1c394c;color:#f4eadb}
.story-next{padding:10px 24px;min-width:150px;background:#f3cf88;color:#17303e;border:1px solid #ffe3ac;font-weight:800!important}
.story-next:hover{background:#ffe4af}.story-quiet:hover,.story-back:not(:disabled):hover{background:#345567}
.story-pagination{display:flex;flex:1;align-items:center;gap:12px;justify-content:center;font-size:11px;letter-spacing:2px;color:#c6d9de}
.story-progress{width:75px;height:3px;background:#69889455}.story-progress-fill{height:100%;display:block;background:#f3cf88}
body.story-open{overflow:hidden}
#btn-story-replay{min-height:32px}
@media(max-height:600px) and (orientation:landscape){
 #tutorial-story{padding:8px}.story-shell{border-radius:12px}.story-header{padding:9px 18px}.story-header h2{font-size:18px}.story-kicker{font-size:8px}
 .story-scene{padding:5px 22px}.story-standee{height:115%;left:7%;width:30%;bottom:-5px}.story-direction{width:60%}.story-heading{font-size:22px;margin:5px 0 8px}.story-chapter{font-size:10px}
 .story-tip{padding:7px 12px;gap:10px}.story-tip-text{font-size:12px;line-height:1.5}.story-icon{width:36px;height:36px}.story-tip-label{font-size:8px}
 .story-dialogue{min-height:100px;margin:0 14px;gap:12px;padding:8px 14px}.story-face{width:86px;height:78px}.story-name{font-size:15px}.story-role{font-size:10px}.story-line{font-size:14px;line-height:1.65;margin-top:4px}
 .story-footer{padding:7px 14px;gap:8px}.story-next{min-width:125px}.story-pagination{gap:7px}.story-progress{width:40px}
}
@media(max-width:600px) and (orientation:portrait){
 #tutorial-story{padding:8px}.story-header{padding:14px}.story-header h2{font-size:18px}.story-kicker{font-size:8px}.story-scene{padding:8px 14px;align-items:flex-start}
 .story-standee{height:90%;width:55%;left:0;bottom:0}.story-direction{width:57%;margin-top:10px}.story-chapter{font-size:9px;letter-spacing:0}.story-heading{font-size:22px;margin:8px 0 14px}.story-tip{display:block;padding:10px}.story-icon{display:none}.story-tip-text{font-size:12px}
 .story-dialogue{margin:0 10px;padding:12px;gap:6px;min-height:175px}.story-face{width:68px;height:80px;align-self:flex-start}.story-name{font-size:16px}.story-role{font-size:9px}.story-speaker{gap:2px}.story-line{font-size:14px;line-height:1.8}
 .story-footer{padding:10px;gap:6px;flex-wrap:wrap}.story-pagination{order:-1;flex-basis:100%;height:16px}.story-next{flex:1;min-width:100px;padding:8px 10px}.story-back{padding:8px 10px}#tutorial-story button{font-size:12px}.story-quiet{padding:8px 10px}
}
@media(prefers-reduced-motion:reduce){#tutorial-story button{transition:none}}