.story-tutorial {position:absolute;inset:0;z-index:110;pointer-events:none;}
.token.tutorial-actor .token-figure{filter:drop-shadow(0 0 .35px #ffe3a0) drop-shadow(0 0 .9px #f5bb4a)}
.token.tutorial-actor .token-halo{stroke:#ffe3a0;stroke-width:2px;vector-effect:non-scaling-stroke;fill:#ffd16b44}
.tutorial-actor-marker{fill:#ffe2a0;stroke:#5d3612;stroke-width:1.2px}
.character-nav-btn.tutorial-actor{border-color:#ffe1a0!important;box-shadow:0 0 0 2px #b8873a,0 0 12px #eeb651aa}
.tutorial-actor-badge{position:absolute;top:0;right:2px;z-index:3;color:#ffe1a0;font-size:13px;text-shadow:0 1px 2px #211005;pointer-events:none}
.story-card {position:absolute;top:12px;left:50%;transform:translateX(-50%);width:min(760px,calc(100% - 24px));--story-card-max:min(340px,max(220px,42cqh),calc(100cqh - 24px));max-height:var(--story-card-max);overflow:hidden;box-sizing:border-box;display:flex;align-items:flex-start;gap:16px;padding:16px;border:1px solid #c39a57;border-radius:12px;background:#261b12 url('./assets/ui/leather-dark-seamless-v1.webp') center/512px;box-shadow:0 8px 28px #0008;color:#f6e9ce;pointer-events:auto;}
.story-art {width:clamp(88px,24cqw,160px);flex-shrink:0;}
.story-scene {width:100%;height:160px;max-height:calc(var(--story-card-max) - 34px);object-fit:contain;border-radius:7px;}
.story-copy {min-width:0;flex:1;display:flex;flex-direction:column;min-height:0;align-self:stretch;max-height:calc(var(--story-card-max) - 34px);}
.story-kicker {color:#d3b986;font-size:10px;letter-spacing:.08em;}
.story-copy h2 {font-size:22px;line-height:1.15;margin:5px 0 8px;text-transform:none;}
.story-copy p {font-size:15px;line-height:1.45;margin:0 0 10px;min-height:0;max-height:none;overflow:auto;white-space:pre-line;}
.story-forward,.story-action {border:1px solid #e9ca79;border-radius:7px;background:#c39a43;color:#24180d;font-weight:bold;flex-shrink:0;min-height:40px;padding:8px 14px;cursor:pointer;}
.story-play {position:absolute;top:12px;left:50%;transform:translateX(-50%);z-index:110;display:flex;align-items:center;gap:10px;flex-wrap:wrap;width:max-content;max-width:min(700px,calc(100% - 24px));padding:9px 12px;box-sizing:border-box;border:1px solid #c39a57;border-radius:9px;background:#241a13ec;color:#f6e9ce;font-size:14px;}
.story-play span {flex:1;min-width:min(170px,100%);max-height:24cqh;overflow:auto;touch-action:pan-y;}
.story-read {background:none;border:0;color:#d3b986;cursor:pointer;min-height:36px;}
.story-resume {position:absolute;top:12px;max-width:calc(100% - 24px);left:50%;transform:translateX(-50%);z-index:110;padding:12px 18px;border:1px solid #e9ca79;border-radius:9px;background:#352513;color:#ffebad;cursor:pointer;}
.story-forward:disabled,.story-action:disabled {opacity:.55;cursor:wait;}
.story-tutorial button:focus-visible,.story-play button:focus-visible {outline:3px solid #a4ffe7;outline-offset:3px;}
.story-tutorial.hidden,.story-card.hidden,.story-play.hidden,.story-resume.hidden,.story-art.hidden {display:none!important;}
/* Menus temporarily cover the lesson without changing its stage or reading state. */
body:has(:is(#gameMenu,#settingsOverlay,#encyclopediaOverlay,#lobby,#matchResult):not(.hidden)) :is(.story-tutorial,.story-play,.story-resume) {display:none!important;}
/* Only the lesson speaks while it is active; no regular hints or notifications underneath. */
.story-running #guidePanel,.story-running .guide-hint,.story-running #gameMessages {display:none!important;}
.story-running .board-controls {visibility:hidden;}
.story-reading #board {pointer-events:none;}
.story-reading .action-rail,.story-reading #characters,.story-reading #characterDice {visibility:hidden;}
.story-running .cell.valid:not(.story-map-target) {stroke-width:1.2;stroke:var(--cell-stroke,#aab6cf);fill:var(--cell-fill);fill-opacity:var(--cell-fill-opacity,.22);}
.story-running .cell.story-map-target {fill:#63ffe8!important;fill-opacity:.7!important;stroke:#fffbd0!important;stroke-width:5!important;filter:drop-shadow(0 0 8px #63ffe8)!important;animation:story-pulse .9s ease-in-out infinite alternate!important;}
.story-running .token.story-map-target,.story-running .dwarf-token.story-map-target,.story-running .resource-tile.story-map-target {filter:drop-shadow(0 0 5px #fff0a0) drop-shadow(0 0 8px #ff733a)!important;}
@keyframes story-pulse {to {fill-opacity:1;stroke-width:7;}}
/* Respond to the field width, including landscape with the inventory beside it. */
@container (max-width:520px){
 .story-card {top:8px;padding:10px;gap:10px;width:calc(100% - 16px);--story-card-max:min(320px,max(220px,44cqh),calc(100cqh - 16px));}
 .story-art {width:64px;}.story-scene{height:90px;max-height:calc(var(--story-card-max) - 22px);}
 .story-copy{max-height:calc(var(--story-card-max) - 22px);}
 .story-copy h2{font-size:17px;line-height:1.15;margin:4px 0 6px;}.story-copy p{font-size:13px;line-height:1.4;touch-action:pan-y;}
 .story-kicker{font-size:8px;letter-spacing:.02em;}
 .story-play{top:8px;max-width:calc(100% - 16px);font-size:13px;gap:7px;padding:9px;}
 .story-forward,.story-action,.story-read{min-height:44px;font-size:13px;padding:8px 10px;}
}
@container (max-height:400px){
 .story-card{top:6px;padding:8px;gap:8px;--story-card-max:min(max(180px,calc(55cqh - 6px)),calc(100cqh - 12px));}
 .story-copy{max-height:calc(var(--story-card-max) - 18px);}
 .story-kicker{display:none;}.story-copy h2{font-size:16px;margin:0 0 4px;}
 .story-copy p{font-size:12px;line-height:1.35;margin-bottom:6px;}
 .story-art{width:64px;}.story-scene{height:90px;max-height:calc(var(--story-card-max) - 18px);}
 .story-forward,.story-action,.story-read{min-height:36px;padding:6px 10px;font-size:12px;}
 .story-play{top:6px;font-size:12px;gap:6px;}.story-play span{max-height:22cqh;}
}
.story-transition :is(.story-tutorial,.story-play){visibility:hidden;}
.story-transition :is(#board,.action-rail,#characters,#characterDice,#sheet){pointer-events:none;}
@media(prefers-reduced-motion:reduce){.story-tutorial *,.story-map-target {animation:none!important;transition:none!important;}}
.story-close {position:absolute;right:6px;top:6px;width:40px;height:40px;padding:0;border:0;background:transparent url('./assets/ui/icons/bronze/close-skull-v1.webp') center/32px 32px no-repeat;cursor:pointer;z-index:2;}
.story-card .story-copy {padding-top:2px;}
.story-kicker,.story-copy h2 {padding-right:30px;}
.story-play {padding-right:48px;}
.story-close:focus-visible {outline:2px solid #ffe3a4;border-radius:6px;}
.story-end {position:absolute;z-index:120;top:12px;left:50%;transform:translateX(-50%);box-sizing:border-box;width:min(520px,calc(100% - 24px));max-height:calc(100% - 24px);overflow:auto;padding:18px;border:1px solid #c39a57;border-radius:12px;background:#261b12 url('./assets/ui/leather-dark-seamless-v1.webp') center/512px;color:#f6e9ce;touch-action:pan-y;box-shadow:0 8px 28px #000a;}
.story-end h2 {margin:0 0 10px;font-size:21px;}.story-end p {font-size:14px;line-height:1.45;}.story-end>div {display:flex;flex-wrap:wrap;gap:8px;}
.story-end.hidden {display:none!important;}
.story-ending :is(.story-tutorial,.story-play) {visibility:hidden;}
.story-ending :is(#board,.action-rail,#characters,#characterDice,#sheet) {pointer-events:none;}
body:has(:is(#gameMenu,#settingsOverlay,#encyclopediaOverlay,#lobby,#matchResult):not(.hidden)) .story-end {display:none!important;}
@container(max-width:520px){.story-close{width:36px;height:36px;background-size:28px 28px;right:3px;top:3px;}.story-play{padding-right:42px;}.story-end{padding:12px;}.story-end h2{font-size:18px;}.story-end button{min-height:44px;}}

@container(max-height:400px){.story-copy h2{min-height:32px;}}
.story-ending #guidePanel,.story-ending #gameMessages{display:none!important;}
.story-revealing :is(.story-tutorial,.story-play,#guidePanel){visibility:hidden;}
.story-revealing #professionDraw{position:absolute;inset:0;}
.story-revealing .profdraw-row{max-width:calc(100cqw - 24px);gap:10px;flex-wrap:nowrap;}
.story-revealing .profdraw-card{width:min(60cqw,300px,calc(74cqh * 9 / 16));}
.story-revealing .profdraw-stage-multi .profdraw-card{width:min(calc((100cqw - 38px) / 2),260px,calc(74cqh * 9 / 16));}
.story-revealing .profdraw-hint{max-width:calc(100cqw - 24px);text-align:center;}