/* The teaching voice is a readable rule card, separate from the compact game HUD. */
#tutorialBanner{display:block;padding:18px;background:#e3c778;color:#263e31;border:3px solid #f5dda1;border-radius:3px;box-shadow:0 5px #806a38;margin:0 0 16px}
#tutorialBanner .lesson-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
#tutorialBanner .lesson-top>span{font-size:13px;font-weight:700;line-height:1.3;min-width:0;flex:1;color:#4e5d37}
#tutorialBanner .lesson-top>button{font-size:13px;min-height:34px;flex-shrink:0;padding:6px 10px}
#tutorialBanner .lesson-heading{font-size:24px;line-height:1.35;margin:15px 0 10px;font-weight:900;letter-spacing:0}
#tutorialBanner .lesson-explanation{font-size:18px;line-height:1.65;margin:0 0 14px;font-weight:500;color:#263e31}
#tutorialBanner .lesson-rule{font-size:16px;line-height:1.65;padding:10px 11px;border:1px solid #a78e4f;background:#f6e2a7;color:#42533a;font-weight:800;overflow-wrap:anywhere}
#tutorialBanner .lesson-task{font-size:16px;line-height:1.6;margin:14px 0 0}
#tutorialBanner .lesson-task>b{display:block;font-size:12px;letter-spacing:2px;color:#68703d;margin-bottom:3px}
#tutorialBanner .lesson-feedback{font-size:16px;line-height:1.6;color:#6e3d2b;margin:12px 0 0;border-left:4px solid #9b6444;padding-left:9px;background:#f5d79c}
#tutorialBanner #learnCard{width:100%;font-size:17px;margin-top:17px;padding:11px}
#tutorialBanner .primer-answers{display:flex;gap:10px;margin-top:13px}
#tutorialBanner .primer-answers button{flex:1;font-size:20px;padding:10px}
.primer-stage{grid-column:1/-1;align-self:stretch;justify-self:center;width:100%;max-width:650px;text-align:center;color:#eee7c6;padding:16px 20px;background:#153c32bf;border:2px solid #819b6466;border-radius:4px}
.primer-stage h2{font-size:25px;margin:9px 0 15px;line-height:1.4;color:#f2d98c}
.primer-stage p{font-size:17px;line-height:1.6;margin:12px 0}
.primer-kicker{font-size:12px;color:#c4cdaa;letter-spacing:3px}
.goal-score{display:flex;align-items:center;justify-content:center;gap:30px;font-size:14px}
.goal-score b{display:block;font:900 34px 'Courier New',monospace;color:#f4dba1}
.goal-score i{font-size:30px;font-style:normal;color:#adc3a1}
.turn-ribbon{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:6px;font-size:12px;color:#d6dcb9}
.turn-ribbon span{background:#46694f;padding:5px 8px;border-radius:2px}
.anatomy-stage{display:flex;align-items:center;justify-content:center;gap:23px;text-align:left;padding:20px}
.anatomy-card{width:170px;flex-shrink:0;background:#eee6c9;color:#304536;padding:20px 13px;border:5px solid #d6cfac;box-shadow:4px 5px #0d3028;transform:rotate(-2deg)}
.anatomy-name,.anatomy-elements{display:flex;justify-content:space-around;gap:8px}
.anatomy-name{font-size:52px;line-height:1.2}
.anatomy-name>b:first-child{color:#477544}
.anatomy-name>b:last-child{color:#3e6b7b}
.anatomy-elements{font-size:17px;margin:10px 0 16px}
.anatomy-card small{display:block;font-size:12px;line-height:1.6;padding-top:9px;border-top:2px dotted #aaa98b;color:#657358}
.anatomy-notes>div+div{margin-top:16px;border-top:1px solid #78946877;padding-top:14px}
.anatomy-notes b{font-size:19px;color:#f2dc99}
.anatomy-notes p{font-size:16px;line-height:1.6;margin:5px 0}
.learning-basics .controls-dock{display:none}
@media(min-width:1000px){
 .teaching .layout{grid-template-columns:320px minmax(0,1fr) 200px;gap:18px}
 .teaching #tutorialBanner{position:static}
 .teaching .life-panel{display:flex;gap:15px;padding:12px;margin-bottom:14px}
 .teaching .life-panel>.health-track{display:none}
 .teaching .combatant{flex:1;min-width:0;gap:4px}
 .teaching .combatant strong{font-size:24px}
 .teaching .combatant b{font-size:13px}
 .teaching aside details{display:none}
 .teaching .stats{margin:10px 0}
 .teaching .field-panel{padding:11px;margin-bottom:10px}
 .teaching .field-panel p{font-size:12px}
 .teaching .hand{gap:17px 12px}
 .learning-basics .field-panel,.learning-basics .stats{display:none}
 .learning-basics .chain{grid-template-columns:1fr;padding:10px 0}
 .learning-basics .arena-title{display:none}
}
@media(min-width:1000px) and (max-height:870px){
 .teaching .layout{grid-template-columns:300px minmax(0,1fr) 190px;gap:16px}
 .teaching #tutorialBanner{padding:13px}
 #tutorialBanner .lesson-heading{font-size:22px;margin:10px 0 8px}
 #tutorialBanner .lesson-explanation{line-height:1.55;margin-bottom:10px}
 #tutorialBanner .lesson-rule{padding:7px 8px}
 #tutorialBanner .lesson-task{margin-top:9px}
 .primer-stage{padding:9px 13px}
 .primer-stage h2{font-size:22px;margin:4px 0 7px}
 .primer-stage p{font-size:16px;margin:7px 0}
 .goal-score b{font-size:29px}
 .anatomy-card{padding:11px;width:150px}
 .anatomy-name{font-size:40px}
 .anatomy-elements{margin:5px 0 8px}
 .anatomy-notes>div+div{padding-top:9px;margin-top:8px}
}
@media(max-width:999px){
 .teaching #tutorialBanner{position:sticky;top:7px;z-index:9;padding:14px}
 .teaching .controls-dock{top:calc(var(--lesson-height,200px) + 16px)}
 .teaching #hand .card{scroll-margin-top:calc(var(--lesson-height,200px) + 150px)}
 #tutorialBanner .lesson-heading{font-size:22px;margin:10px 0 7px}
 #tutorialBanner .lesson-explanation{font-size:17px;line-height:1.55;margin-bottom:10px}
 #tutorialBanner .lesson-rule{font-size:15px;line-height:1.5;padding:7px 9px}
 #tutorialBanner .lesson-task{font-size:16px;line-height:1.45;margin-top:9px}
 #tutorialBanner .lesson-task>b{display:inline;margin-right:7px;font-size:12px}
 .primer-stage{padding:13px 9px}
 .primer-stage h2{font-size:21px}
 .primer-stage p{font-size:16px}
 .anatomy-stage{gap:12px;flex-wrap:wrap}
 .anatomy-card{width:140px;padding:12px}
 .anatomy-name{font-size:44px}
 .anatomy-elements{font-size:16px;margin:6px 0 10px}
 .anatomy-notes{flex:1;min-width:160px}
 .anatomy-notes b{font-size:17px}
 .anatomy-notes p{font-size:15px}
 .learning-basics .chain{grid-template-columns:1fr}
}