#gameTutorial[hidden]{display:none}
#gameTutorial{position:fixed;inset:0;z-index:160;display:flex;align-items:center;justify-content:center;background:#273b39ed;padding:max(12px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left));box-sizing:border-box;color:#364f42}
.tutorial-scene{position:relative;width:min(1200px,100%,calc((100dvh - 32px)*1.5));aspect-ratio:3/2;flex-shrink:0;border-radius:22px;overflow:hidden;box-shadow:0 20px 80px #0006;background:#eee2c7}
.tutorial-scene>img{display:block;width:100%;height:100%;object-fit:contain;position:absolute;inset:0}
.tutorial-board{position:absolute;left:40%;right:6%;top:17%;bottom:41%;display:flex;flex-direction:column;min-height:0;padding:12px 16px;background:#fff8e9f2;border:1px solid #d7bf8a88;border-radius:12px;box-sizing:border-box;overflow:hidden}
#gameTutorial button{font:inherit;color:#365344;background:#fff9e9;border:1px solid #bca879;border-radius:10px;min-height:44px;padding:8px 14px;cursor:pointer;touch-action:manipulation}
#gameTutorial button:focus-visible{outline:3px solid #4e846f;outline-offset:-4px}#gameTutorial button:disabled{opacity:.35}
#tutorialClose{position:absolute;right:12px;top:12px;z-index:1;box-shadow:0 2px 12px #69472420}
.tutorial-kicker{display:flex;gap:10px;align-items:center;color:#957348;font-size:12px;font-weight:bold;flex-shrink:0}
.tutorial-kicker svg{width:36px;height:36px;padding:6px;box-sizing:border-box;border-radius:11px;background:#e6eddf;color:#3e6d57;flex-shrink:0;overflow:hidden}
#tutorialTitle{font-size:clamp(18px,2vw,25px);margin:6px 0;letter-spacing:.02em;flex-shrink:0}
#tutorialItems{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;counter-reset:lesson}
#tutorialItems article{display:block;position:relative;width:auto;max-width:none;margin:0;padding:8px 0 8px 30px;background:none;box-shadow:none;border-radius:0;text-align:left;border-bottom:1px solid #cfbc953d;counter-increment:lesson}
#tutorialItems article::before{content:counter(lesson);position:absolute;left:0;top:10px;width:21px;height:21px;display:grid;place-items:center;border-radius:50%;background:#ede2ca;color:#795c37;font-size:11px;font-weight:700}
#tutorialItems h3{font-size:14px;margin:0 0 3px}#tutorialItems p{font-size:13px;line-height:1.55;margin:0;color:#606b59;overflow-wrap:anywhere}
.tutorial-board nav{display:flex;flex-shrink:0;align-items:center;justify-content:space-between;gap:6px;margin-top:8px;padding-top:6px;border-top:1px solid #d9cba9}
#gameTutorial nav button{font-size:13px;padding:6px 10px}#tutorialCount{font-size:12px;color:#8b876e;white-space:nowrap}
#gameTutorial #tutorialNext{background:#3e6d57;color:#fff8e9;border-color:#3e6d57}
.tutorial-caption{position:absolute;left:4%;bottom:4%;background:#fff8e6e8;border-radius:20px;padding:9px 16px;font-size:12px}
.tutorial-open .bar,.tutorial-open .controls,.tutorial-open #interactionPrompts{visibility:hidden}
/* Compact screens get a separate reading card, keeping the full illustration visible. */
@media(max-width:700px) and (orientation:portrait){
 .tutorial-scene{width:100%;height:100%;max-height:900px;aspect-ratio:auto;display:grid;grid-template-rows:minmax(0,36%) minmax(0,1fr);border-radius:16px}
 .tutorial-scene>img{position:static;width:100%;height:100%;object-fit:contain;background:#ddcfb6}
 .tutorial-board{position:relative;inset:auto;margin:8px 10px 10px;padding:14px;min-height:0}
 #tutorialClose{top:8px;right:8px;font-size:12px}.tutorial-caption{display:none}#tutorialTitle{font-size:22px}
}
@media(max-height:600px) and (orientation:landscape){
 #gameTutorial{padding:max(6px,env(safe-area-inset-top)) max(8px,env(safe-area-inset-right)) max(6px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left))}
 .tutorial-scene{width:100%;height:100%;aspect-ratio:auto;display:grid;grid-template-columns:38% minmax(0,1fr);border-radius:12px}
 .tutorial-scene>img{position:static;object-fit:contain;align-self:center;background:#ddcfb6}
 .tutorial-board{position:relative;inset:auto;margin:50px 10px 10px 0;padding:10px 12px;min-height:0}
 #tutorialClose{top:6px;right:10px;font-size:12px;padding:4px 12px}.tutorial-caption{left:12px;bottom:12px;max-width:32%;font-size:10px;padding:6px 9px}
 .tutorial-kicker{font-size:11px}.tutorial-kicker svg{width:28px;height:28px;padding:4px}#tutorialTitle{font-size:18px;margin:4px 0}#tutorialItems article{padding-top:5px;padding-bottom:5px}#tutorialItems p{font-size:12px}.tutorial-board nav{margin-top:5px;padding-top:4px}
}
@media(any-pointer:coarse) and (max-width:1100px){.bar>#gameHelp{display:none}.mobile-menu-open .bar>#gameHelp{display:block}}