/* In-world tutorial: a live forest with a compact conversation overlay. */
.game-shell #guide-dialog.story-guide{padding:0;width:min(1240px,96vw);max-width:none;height:min(850px,94dvh);max-height:94dvh;overflow:hidden;border:1px solid #667c61;border-image:none;background:#132b23;box-shadow:0 25px 100px #000b;color:#f2edda;--conversation-height:230px}
#guide-dialog.story-guide::backdrop{background:#030c16da;backdrop-filter:blur(5px)}
.story-stage{position:absolute;inset:0;overflow:hidden}
#story-canvas{display:block;width:100%;height:100%;touch-action:none;cursor:crosshair;outline-offset:-4px;image-rendering:pixelated}
#story-canvas:focus-visible{outline:2px solid #e0dbaa}
.story-stage:after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(#05111860,transparent 22%,transparent 65%,#071a1590)}
.story-topbar{position:absolute;z-index:2;top:22px;left:24px;right:24px;display:flex;justify-content:space-between;align-items:center;gap:12px;pointer-events:none}
.story-brand,.story-skip{background:#10241eea;border:1px solid #799079;color:#e4e3bf;font:11px/1.5 var(--body);padding:11px 15px}
.story-brand{letter-spacing:1.8px}.story-skip{pointer-events:auto;cursor:pointer;font-size:12px}.story-skip span{font-size:19px;margin-left:12px}
.story-location{position:absolute;z-index:1;top:82px;right:25px;color:#e0e3c7;text-shadow:0 2px 4px #000;font:9px/1.5 var(--body);letter-spacing:1.5px}
.story-practice-bar{position:absolute;z-index:2;bottom:calc(var(--conversation-height) + 61px);left:6%;right:6%;display:flex;justify-content:space-between;align-items:flex-end;gap:15px;pointer-events:none}
#story-scene-status{font:11px/1.5 var(--body);color:#e0e8d4;padding:7px 10px;background:#10241edb;border-left:2px solid #9bac7d;max-width:65%}
#story-practice{pointer-events:auto;cursor:pointer;background:#10241eeb;color:#e4e3bf;border:1px solid #799079;padding:9px 14px;font:500 11px var(--body)}
.story-conversation{position:absolute;z-index:3;bottom:32px;left:6%;right:6%;border:1px solid #8aab80;background:#0d211bef;box-shadow:0 8px 28px #0006;isolation:isolate}
.story-conversation:before{content:'';position:absolute;left:34%;top:-10px;width:18px;height:18px;background:#10251e;border-top:1px solid #8aab80;border-left:1px solid #8aab80;transform:rotate(45deg);z-index:-1}
.story-copy{position:relative;padding:31px 28px 14px}
.story-speaker{position:absolute;left:18px;top:-21px;background:#1c3628;border:1px solid #a3bd8f;padding:9px 20px;color:#e9df9e;font:13px var(--heading);letter-spacing:2px}
.game-shell #guide-dialog #story-dialogue{font:400 21px/1.5 var(--body);color:#f2edda;min-height:0;margin:0;letter-spacing:0}
.story-sr-only{position:absolute!important;width:1px;height:1px;padding:0!important;margin:-1px!important;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.story-word{animation:story-word-in 220ms ease-out both}@keyframes story-word-in{from{opacity:0}to{opacity:1}}.story-revealed .story-word{animation:none;opacity:1}
.story-reveal{display:block;margin:1px 0 0 auto;padding:0;background:none;border:0;color:#b3c1ad;font:10px/18px var(--body);cursor:pointer;height:18px;transition:opacity 160ms}.story-reveal:disabled{opacity:0;pointer-events:none}
.story-notes{max-width:85%;margin-top:2px}.story-notes summary{width:max-content;cursor:pointer;color:#aabca5;font:10px/18px var(--body)}
.game-shell #guide-dialog .story-hint{font:12px/1.6 var(--body);color:#c0ceba;margin:8px 0 12px;max-width:850px}
.story-navigation{display:flex;align-items:center;gap:20px;margin-top:8px;min-height:35px}
.story-back{padding:8px 0;background:none;border:0;color:#b3c1ad;font:11px var(--body);cursor:pointer}.story-back:disabled{opacity:.3;cursor:default}
.story-progress{display:flex;gap:14px;align-items:center;color:#abbba3}.story-progress>span{font:11px var(--body);font-variant-numeric:tabular-nums}
#story-dots{display:flex;gap:6px}#story-dots i{width:5px;height:5px;background:#526858;transform:rotate(45deg);transition:background-color 200ms}#story-dots i.reached{background:#ead18a}
.game-shell #guide-dialog #story-next{margin:0 0 0 auto;min-width:144px;display:flex;align-items:center;justify-content:flex-end;gap:19px;padding:8px 0 8px 12px;border:0;border-image:none;border-radius:0;background:none;box-shadow:none;color:#f2edda;font:500 15px var(--body);cursor:pointer}
.game-shell #guide-dialog #story-next:hover{color:#ebd28d;background:none;transform:none}.story-skip:hover,#story-practice:hover{background:#284431}
.story-guide button:focus-visible,.story-notes summary:focus-visible{outline:2px solid #e9d697;outline-offset:4px}
@media(max-width:760px){
 .game-shell #guide-dialog.story-guide{width:calc(100vw - 16px);height:94dvh;max-height:94dvh}
 .story-topbar{top:12px;left:12px;right:12px;gap:8px}.story-brand{font-size:7px;letter-spacing:1px;padding:10px}.story-skip{font-size:10px;padding:7px 9px}.story-skip span{margin-left:5px}.story-location{top:63px;right:13px;font-size:7px;letter-spacing:1px}
 .story-conversation{left:12px;right:12px;bottom:16px;max-height:60%;overflow:visible}.story-copy{padding:27px 18px 12px;max-height:55dvh;overflow:auto}.story-speaker{position:absolute;left:12px;font-size:11px;padding:8px 16px;top:-18px}
 .game-shell #guide-dialog #story-dialogue{font-size:16px;line-height:1.5}.story-notes{max-width:100%}.game-shell #guide-dialog .story-hint{font-size:11px}
 .story-practice-bar{left:13px;right:13px;bottom:calc(var(--conversation-height) + 42px);gap:8px}#story-scene-status{font-size:9px;padding:6px 8px;max-width:62%}#story-practice{font-size:10px;padding:8px 10px}
 .story-navigation{gap:12px}.story-progress{gap:8px}.story-progress>span{font-size:10px}#story-dots{gap:4px}#story-dots i{width:4px;height:4px}.game-shell #guide-dialog #story-next{font-size:12px;min-width:107px;gap:10px}.story-back{font-size:10px}
}
@media(max-height:520px){.story-conversation{bottom:12px}.story-copy{max-height:49dvh;overflow:auto}.story-practice-bar{bottom:calc(var(--conversation-height) + 35px)}.story-location{display:none}}
@media(prefers-reduced-motion:reduce){.story-word{animation:none}.story-reveal,#story-dots i{transition:none}}
