/* Small playable lessons: a goal, a board and a result. */
#tutorialBanner{display:block;padding:16px 20px;margin:0 0 18px;background:#dfc57c;color:#263d31;border:3px solid #f2dda0;border-radius:3px;box-shadow:0 5px #78633b}
#tutorialBanner .lesson-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
#tutorialBanner .lesson-top>b{font-size:15px;white-space:nowrap;letter-spacing:1px}
#tutorialBanner .lesson-top>div{display:flex;gap:7px}
#tutorialBanner button{font-size:13px;min-height:34px;padding:6px 10px}
#tutorialBanner .lesson-goal{font-size:24px;line-height:1.4;margin:14px 0 5px;letter-spacing:0}
#tutorialBanner .lesson-hint{font-size:18px;line-height:1.55;margin:0;color:#42513a}
#tutorialBanner .lesson-feedback{color:#843e25;font-weight:700}
#tutorialBanner .lesson-visual{font-size:16px;font-weight:800;line-height:1.4;margin-top:10px;padding-top:9px;border-top:1px solid #8e7a4455;color:#53603b}
#tutorialBanner .lesson-map{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:14px;padding-top:12px;border-top:1px solid #8e7a4455}
#tutorialBanner .lesson-map button{font-size:15px;padding:9px 5px}
#tutorialBanner .lesson-map [aria-current]{background:#e4a75b;color:#253e31;box-shadow:0 3px #996937}
#tutorialBanner span{min-width:0;flex:initial}
.teaching .opponent-rack,.teaching .stats,.teaching aside details,.teaching .table-mark{display:none}
.teaching:not(.lesson-fields) .field-panel{display:none}
.teaching .layout{grid-template-columns:210px minmax(0,1fr) 200px;gap:24px}
.teaching .hand{grid-template-columns:repeat(var(--lesson-columns,4),minmax(0,170px));gap:18px;justify-content:center;padding:7px 8px 14px}
.teaching .hand .card{min-height:210px;padding:5px 8px 8px}
.teaching .hand .card-top>b{font-size:29px}
.teaching .hand .card-illustration{min-height:68px}
.teaching .hand .pixel-art{width:65px;height:65px}
.teaching .hand .card-attributes{font-size:13px;padding:5px 0}
.teaching .hand .card-attributes b{font-size:20px}
.teaching .hand .card-preview{font-size:12px;min-height:40px;line-height:1.5}
.teaching .hand .field-card .card-preview{font-size:13px}
.teaching .hand .field-card .hexagram{height:70px;width:56px}
.teaching .hand-label b{font-size:15px}
.teaching .hand-label span:empty{display:none}
.teaching .chain{min-height:110px;grid-template-columns:repeat(5,minmax(0,120px));padding:16px 0}
.teaching .chain-card{min-height:110px}
.teaching .empty-chain{gap:8px;display:flex;flex-direction:column;align-items:center;justify-content:center}
.teaching .controls-dock .actions button,.teaching .responses button{font-size:15px;min-height:42px}
.teaching .card:focus-visible{outline:3px solid #ffe08d;outline-offset:5px}
.lesson-stems .card-attributes>span:first-child,.lesson-branches .card-attributes>span:last-child{background:#f4d587;color:#354b35;box-shadow:0 0 0 2px #b28e46}
.lesson-stems .card-attributes>span:last-child,.lesson-branches .card-attributes>span:first-child{opacity:.7}
.lesson-result{grid-column:1/-1;justify-self:stretch;display:flex;flex-direction:column;align-items:center;text-align:center;padding:24px 14px 32px;background:#193f33d9;border:2px solid #79966c;border-radius:3px;box-shadow:0 6px #123429;color:#e9e9cd}
.lesson-result .result-stamp{font-size:26px;display:grid;place-items:center;width:45px;height:45px;border:2px solid #e0cc8c;background:#637c4e;color:#f6e6a2}
.lesson-result.failed .result-stamp{background:#9b6447}
.lesson-result h2{font-size:24px;letter-spacing:3px;margin:13px 0}
.lesson-result .result-value{font-size:40px;line-height:1.3;color:#f3d685}
.lesson-result>span:not(.result-stamp){font-size:15px;margin-top:5px;color:#bfd0ac}
.lesson-result p{font-size:18px;line-height:1.5;margin:15px 0}
.result-trace{display:flex;justify-content:center;gap:10px;align-items:center;margin:6px 0}
.result-trace span{display:flex;align-items:center;gap:10px}
.result-trace b{font-size:23px;background:#496447;color:#f5dda2;padding:7px 10px}
.result-trace small{font-size:18px;color:#c7d7b2}
.lesson-ended .hand,.lesson-ended .hand-label,.lesson-ended .controls-dock,.lesson-ended .arena-title,.lesson-ended .lesson-hint,.lesson-ended .lesson-visual{display:none}
.lesson-field-played .hand,.lesson-field-played .hand-label{display:none}
.field-route{grid-column:1/-1;display:flex;gap:28px;align-items:center;justify-content:center;padding:20px 5px;color:#dfd8ae}
.field-route>div{display:flex;flex-direction:column;align-items:center;gap:9px}
.field-route .hexagram{width:65px;height:75px;color:#e3c887}
.field-route b{font-size:21px}
.field-route small{font-size:14px;color:#b6c5a1}
.field-route>span{font-size:26px;color:#b3b987}
.route-queue b{padding:6px 10px;background:#3b6045;font-size:17px}
@media(min-width:1000px) and (max-height:870px){
 .teaching .layout{grid-template-columns:190px minmax(0,1fr) 180px;gap:20px}
 .teaching #tutorialBanner{padding:12px 17px;margin-bottom:12px}
 #tutorialBanner .lesson-goal{font-size:22px;margin-top:10px}
 .teaching .hand .card{min-height:192px}
 .teaching .hand .card-illustration{min-height:56px}
 .teaching .chain{min-height:98px;padding:12px 0}
 .teaching .chain-card{min-height:98px}
}
@media(max-width:999px){
 .teaching .layout{display:flex;flex-direction:column;gap:12px}
 .teaching .layout aside{display:contents}
 .teaching .table{display:contents}
 .teaching #tutorialBanner{order:0;width:100%;box-sizing:border-box;position:sticky;top:6px;z-index:9;padding:13px;margin-bottom:4px}
 .teaching .life-panel{order:1;display:flex;flex-direction:row;width:100%;box-sizing:border-box;min-width:0;gap:20px;padding:9px 13px;margin:0}
 .teaching .life-panel .combatant{flex:1;min-width:0;gap:3px}
 .teaching .life-panel .combatant strong{font-size:22px}
 .teaching .life-panel>.health-track{display:none}
 .teaching .field-panel{order:2;width:100%;box-sizing:border-box;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px;margin:0;padding:12px}
 .teaching .field-panel .eyebrow{grid-column:1/-1}
 .teaching #field{min-width:0}
 .teaching #field h2{font-size:19px}
 .teaching #field p{font-size:12px}
 .teaching .field-panel .protection{font-size:13px}
 .teaching .field-symbol{display:none}
 .teaching #queue{align-self:center;font-size:13px;padding:6px}
 .teaching .arena{order:3;width:100%;box-sizing:border-box;padding:3px 0;margin:0}
 .teaching .controls-dock{order:4;width:100%;box-sizing:border-box;top:calc(var(--lesson-height,160px) + 14px);margin:0}
 .teaching .hand-label{order:5;width:100%;box-sizing:border-box;margin:3px 0}
 .teaching .hand{order:6;width:100%;box-sizing:border-box;grid-template-columns:repeat(min(2,var(--lesson-columns,2)),minmax(0,180px));gap:16px 12px}
 .teaching .hand .card{scroll-margin-top:calc(var(--lesson-height,160px) + 150px);min-height:194px}
 .teaching .hand .card-illustration{min-height:58px}
 .teaching .chain{grid-template-columns:repeat(4,minmax(0,1fr));gap:7px;min-height:88px;padding:10px 1px}
 .teaching .chain .card-top>b{font-size:19px}
 .teaching .chain .card-attributes{font-size:9px;gap:4px}
 .teaching .chain .card-attributes b{font-size:12px}
 .teaching .chain-card .card-preview{font-size:9px}
 .teaching .chain-card .card-preview b{font-size:14px}
 .teaching #discardPanel{order:7;width:100%;box-sizing:border-box}
 .teaching #relationsPanel{order:8;width:100%;box-sizing:border-box}
 #tutorialBanner .lesson-top{gap:8px}
 #tutorialBanner .lesson-top>b{font-size:14px}
 #tutorialBanner .lesson-top>div{gap:5px}
 #tutorialBanner button{font-size:12px;padding:6px 8px}
 #tutorialBanner .lesson-goal{font-size:21px;margin-top:11px}
 #tutorialBanner .lesson-hint{font-size:17px;line-height:1.5}
 #tutorialBanner .lesson-visual{font-size:15px;margin-top:7px;padding-top:7px}
 .lesson-result{padding:20px 12px}
 .lesson-result .result-value{font-size:29px}
 .lesson-result p{font-size:17px}
 .field-route{gap:22px;padding:12px 5px}
}

.teaching .field-panel .protection{font-size:13px;line-height:1.7;padding:9px 0 4px;margin-top:12px}
.teaching .field-panel p{font-size:13px;line-height:1.6}
.teaching #queue{margin-top:14px;padding-top:12px}
.teaching .queued-field{font-size:13px;line-height:1.6}

.branch-mask{display:inline-block;min-width:1.1em;text-align:center;background:repeating-linear-gradient(135deg,#657260 0 3px,#879276 3px 6px);color:#d3d6bd;vertical-align:baseline;border:1px solid #4e634c;line-height:1.15;user-select:none}
.card-top>b .branch-mask{font-size:.8em;margin-left:2px}
.card-attributes>.branch-mask{font-size:18px;min-width:42px;opacity:1}
.lesson-masked #discardPanel,.lesson-masked #buildFields{display:none}
.lesson-fields .action-note{display:none}
.lesson-result .notice-hint{font-size:16px;color:#dacb94;margin-top:20px;padding-top:10px}
.lesson-result{padding-bottom:48px}
.result-trace{flex-wrap:wrap}
@media(max-width:999px){.teaching .chain{grid-template-columns:repeat(3,minmax(0,1fr))}.lesson-result{padding-bottom:42px}.lesson-result .notice-hint{font-size:15px}}

/* Keep the current instruction beside the controls the player actually uses. */
#lessonPrompt{display:flex;align-items:center;gap:11px;margin:0 0 13px;padding:11px 14px;border-left:4px solid #e3c477;background:#132f28e8;color:#f3e5b9;text-align:left}
#lessonPrompt[hidden]{display:none}
#lessonPrompt .prompt-arrow{flex:none;color:#efd075;font-size:18px}
#lessonPrompt .lesson-hint{font-size:18px;line-height:1.5;margin:0;font-weight:500}
#lessonPrompt .lesson-feedback{color:#ffc29d}
.teaching .action-note{display:none}
.teaching button.tutorial-target{outline:3px solid #f4cf70;outline-offset:4px}
.teaching .card.tutorial-target .card-preview{color:#284333;background:#f2d484;border-top-color:#9f773b}
.teaching .card.lesson-pair{outline:3px solid #bd99df;outline-offset:3px}
#tutorialBanner .lesson-calculation{display:flex;align-items:stretch;gap:8px;flex-wrap:wrap}
#tutorialBanner .lesson-step{display:flex;flex-direction:column;gap:4px;min-width:78px;padding:6px 10px;background:#f2dfa1;border:1px solid #927747;border-bottom:3px solid #927747}
.lesson-step>small{font-size:13px;color:#40533c}
.lesson-step>span{display:flex;align-items:baseline;gap:10px}
.lesson-step i{font-size:16px;font-style:normal;color:#68703f}
#tutorialBanner .lesson-step b{font-size:23px;color:#2a4838;line-height:1.1}
#tutorialBanner .lesson-step.paired{background:#f2dcea;border-color:#8d659a}
#tutorialBanner .lesson-match{display:block;font-size:16px;margin-top:8px;color:#644368}
.lesson-field-status{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center}
#tutorialBanner .lesson-field-status>b{font-size:16px;color:#304d37}
#tutorialBanner .lesson-field-status>span{font-size:15px}
@media(orientation:landscape) and (max-width:999px){
 #lessonPrompt{gap:8px;margin-bottom:8px;padding:7px 9px}
 #lessonPrompt .lesson-hint{font-size:17px;line-height:1.4}
 #tutorialBanner .lesson-step{min-width:66px;padding:4px 8px}
 #tutorialBanner .lesson-step b{font-size:21px}
 .teaching #hand .card{scroll-margin-top:calc(var(--controls-height,160px) + 18px)}
}

/* A short conversation gives the fixed practice hand a reason to exist. */
#lessonScene{display:flex;gap:20px;align-items:center;position:relative;margin:0 0 18px;padding:22px 24px 44px;border:3px solid #b49b58;background:#e8d7a2;color:#293f32;box-shadow:0 5px #6f5c35}
.amu-portrait{flex:0 0 100px;align-self:center;background:#244b3b;border:3px solid #84976b;box-shadow:3px 4px #b19a61;padding:8px}
.amu-portrait .pixel-art{width:100%;height:auto;display:block}
.amu-dialogue{min-width:0;flex:1}.scene-speaker{display:inline-block;padding:2px 9px;background:#365b43;color:#f4e5b4;font-size:14px;font-weight:800}
.amu-dialogue h2{font-size:25px;line-height:1.3;margin:8px 0 12px;letter-spacing:1px}
.amu-dialogue p{font-size:18px;line-height:1.65;margin:9px 0;color:#2e4635}
.amu-dialogue .scene-why{color:#665439}.amu-dialogue>small{font-size:15px;display:block;margin-top:17px;color:#746139}
.lesson-intro .lesson-goal,.lesson-intro .lesson-visual,.lesson-intro .arena-title,.lesson-intro .controls-dock{display:none}
.lesson-intro #tutorialBanner{margin-bottom:13px}
.lesson-intro .hand .card:disabled{opacity:1;filter:drop-shadow(2px 4px #102f27)}
.lesson-result .result-speaker{display:block;color:#d6bb77;font-size:14px;margin-bottom:6px}
@media(max-width:999px){
 #lessonScene{gap:14px;padding:14px 16px 37px;margin-bottom:12px}.amu-portrait{flex-basis:68px;padding:4px}
 .amu-dialogue h2{font-size:21px;margin:6px 0 8px}.amu-dialogue p{font-size:17px;line-height:1.5;margin:7px 0}.amu-dialogue>small{margin-top:12px;font-size:14px}
 .lesson-intro .hand .card{scroll-margin-top:15px}
}

.lesson-intro .chain:has(.empty-chain){display:none}
.teaching.lesson-turns .opponent-rack{display:flex}
.lesson-notice .controls-dock,.lesson-notice .hand-label,.lesson-notice .hand,.lesson-notice .lesson-visual{display:none}
.round-notice{grid-column:1/-1;text-align:center;padding:20px 18px 48px;border:2px solid #9da579;background:#183e33e8;box-shadow:0 5px #102e28}
.round-notice p{font-size:18px;line-height:1.5;margin:14px 0}
.round-notice>small{display:block;font-size:15px;color:#d7c68e;margin-top:18px}
.draw-count{display:flex;gap:16px;align-items:center;justify-content:center;color:#e8cb77}
.draw-count b,.draw-count strong{font:900 42px/1.2 var(--font-numeric)}.draw-count span{font-size:20px}
.lesson-ended.lesson-refilled .hand{display:grid}
.lesson-ended.lesson-refilled .hand-label{display:flex}
.lesson-refilled .hand .card:disabled{opacity:1}
.lesson-refilled .lesson-result{padding:18px 14px 32px}
.lesson-refilled .lesson-result .result-stamp,.lesson-refilled .lesson-result h2,.lesson-refilled .result-trace{display:none}

/* Keep the full practice hand on desktop without reducing its type size. */
@media(min-width:1000px) and (max-height:950px){
 .teaching .arena-title{display:none}
 .teaching .arena{padding:0 0 4px}
 .teaching .chain{padding:8px 0}
 .teaching #tutorialBanner{padding:12px 17px;margin-bottom:12px}
 .teaching #tutorialBanner .lesson-goal{margin:8px 0 4px}
 .teaching #tutorialBanner .lesson-visual{margin-top:6px;padding-top:6px}
}