/* Visual support stays beside the railway, with one model shown at a time. */
#gameScreen{grid-template-rows:auto auto minmax(340px,1fr) auto;overflow:auto;overscroll-behavior:contain}
.topbar{min-height:54px}
.question-area{min-height:100px;grid-template-columns:minmax(350px,auto) 1fr;gap:6px 16px;padding-block:8px}
.route-summary{min-height:78px;padding:10px 12px;border:3px solid #102348;box-shadow:0 4px #10234822;background:#fff;gap:10px}
.route-pill{font-size:clamp(1.15rem,2vw,1.55rem);padding:12px 14px;border-width:3px}
.start-pill{background:#e1f8ec;border-color:#16805a}
.goal-pill{background:#fff2b8;border-color:#c18a00}
.route-arrow{font-size:2.7rem;font-weight:900;color:#26469a;line-height:1}
.route-summary.backward-route{flex-direction:row-reverse}
.question-area h2{font-size:clamp(1.45rem,2.4vw,2rem);line-height:1.1;padding:9px 14px}
#instruction{font-size:1rem}
.play-area{grid-template-columns:150px minmax(0,1fr);align-items:stretch;padding:5px 0;gap:10px}
.board{grid-template-rows:40px minmax(145px,1fr) auto auto;gap:4px;padding:7px 14px;background:linear-gradient(#edf9ff 0 58%,#edf6df 58%);min-height:340px;overflow:hidden}
.direction-banner{display:flex;justify-content:center;align-items:center;gap:14px;border:2px solid #26469a;border-radius:12px;background:#fff;color:#26469a;min-width:0;font-weight:900;font-size:1rem}
.direction-banner[data-direction=forward]{color:#075e40;border-color:#18835a;background:#e1f8ec}
.direction-banner[data-direction=backward]{color:#913706;border-color:#c65b1d;background:#fff0e5}
.direction-symbol{font-size:3rem;line-height:.8;font-weight:900;display:inline-block}
.direction-banner.is-moving .direction-symbol{animation:direction-forward .8s ease-in-out infinite}
.direction-banner.is-moving[data-direction=backward] .direction-symbol{animation-name:direction-backward}
.route-wrap{min-height:145px}
.major-stations{height:55px;top:72%;gap:4px}
.station{height:55px;font-size:clamp(.85rem,1.7vw,1.2rem)}
.rail{top:67%}
.train-marker{height:80px;top:clamp(0px,calc(72% - 116px),60px)}
.flag{top:calc(72% - 77px);height:44px}
.step-display{position:relative;left:auto;bottom:auto;transform:none;max-width:100%;min-height:32px;justify-self:center;white-space:normal;padding:5px 12px;font-size:1rem;margin:1px 0}
.step-display:empty{display:none}
.counting-support{padding:7px 10px;border:2px solid #b9cadd;border-radius:14px;background:#fff;min-width:0}
.counting-toolbar{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}
.aid-tabs{display:flex;gap:5px;flex-wrap:wrap}
.aid-tabs button,.count-help-button{border:2px solid #b1c2d7;border-radius:9px;background:#f4f7fb;color:#243e60;font-weight:800;font-size:.78rem;padding:6px 9px;min-height:32px}
.aid-tabs button[aria-pressed=true]{background:#26469a;border-color:#26469a;color:#fff}
.count-help-button{border-color:#c29200;background:#fff3bd;color:#614700}
.count-help-button:disabled{opacity:.5;cursor:default}
.counting-body{display:flex;align-items:center;gap:12px;margin-top:6px}
.counting-total{flex:none;width:62px;text-align:center;color:#102348;border-right:2px solid #d6e0eb;padding-right:8px}
.counting-total strong{display:block;font-size:1.8rem;line-height:1}
.counting-total span{font-size:.72rem;font-weight:800}
.counting-picture{display:flex;align-items:center;justify-content:flex-start;gap:9px;flex-wrap:wrap;min-height:62px;min-width:0}
.count-group{width:100px;text-align:center;flex-shrink:0}
.count-group svg{display:block;width:100%;height:43px;overflow:visible}
.count-group span{font-weight:800;font-size:.65rem;display:block;color:#243e60;margin-top:2px}
.domino-group{width:82px}
.bar-group{width:118px}
.bar-group svg{height:30px}
.hundred-group{display:flex;align-items:center;gap:8px;border:2px solid #102348;border-radius:9px;padding:5px 8px;color:#102348}
.hundred-group strong{font-size:1.8rem}
.hundred-group span{font-size:.72rem;font-weight:800}
.counting-note{margin:3px 0 0;font-size:.75rem;font-weight:700;color:#465a72}
.new-counter{transform-box:fill-box;transform-origin:center;animation:counter-in .24s ease-out}
.maya-panel{display:block;min-width:0}
.maya-panel:after{display:none}
.maya-panel #guideImage{display:block;left:50%;bottom:28px;width:110%;height:65%;padding:0;transform:translateX(-50%);object-fit:contain;mix-blend-mode:normal;filter:drop-shadow(0 4px 4px #10234822)}
.maya-bubble{font-size:.86rem;line-height:1.2;padding:9px 7px}
.guide-name{position:absolute;left:6px;right:6px;bottom:6px;color:#fff;background:#102348;border-radius:9px;text-align:center;padding:5px 3px;font-size:.68rem;font-weight:800;z-index:2}
.guide-hello #guideImage{animation:guide-hello .65s ease-out}
.guide-cheer #guideImage{animation:guide-cheer .75s ease-in-out}
.answer-dock{margin:4px 14px 7px;padding:9px max(12px,calc((100vw - 1200px)/2));min-height:254px;height:auto}
.answer-left,.stage2-panel,.stage3-panel{padding:9px}
.answer-left>div:last-child{grid-template-rows:80px minmax(75px,1fr);gap:8px}
.operation-row,.op-button{height:80px}
.op-button{font-size:1.45rem;padding:7px 3px}
.op-button span{font-size:.75rem;letter-spacing:0}
.op-arrow{font-size:2.4rem;line-height:1;vertical-align:middle;font-style:normal;display:inline-block;margin-right:6px}
.sentence{min-height:75px;background:#fff;border:4px solid #26469a;padding:7px 12px;box-shadow:0 4px #26469a25}
.sentence #sentenceText{font-size:clamp(1.7rem,2.4vw,2.15rem)}
.sentence.is-teaching{background:#e4f8ed;border-color:#16805a}
.practice-link{display:inline-block;margin:12px 0 0;font-weight:800;color:#26469a;text-underline-offset:3px}
@keyframes direction-forward{50%{transform:translateX(8px)}}
@keyframes direction-backward{50%{transform:translateX(-8px)}}
@keyframes counter-in{from{transform:scale(.65)}to{transform:scale(1)}}
@keyframes guide-hello{from{opacity:.35;translate:0 12px}to{opacity:1;translate:0 0}}
@keyframes guide-cheer{35%{translate:0 -8px;rotate:-3deg}70%{translate:0 -4px;rotate:3deg}}
@media(max-width:1000px){
  .question-area{grid-template-columns:minmax(290px,auto) 1fr;column-gap:10px}
  .route-pill{font-size:1.1rem;padding:10px}
  .route-summary{padding:8px;min-height:70px}
  .question-area h2{font-size:1.35rem}
  .play-area{grid-template-columns:120px minmax(0,1fr)}
  .maya-bubble{font-size:.78rem}
  .answer-dock{padding:8px;min-height:280px}
  .count-group{width:90px}
  .bar-group{width:102px}
}
@media(max-width:700px){
  #gameScreen{grid-template-rows:auto auto auto auto}
  .topbar{grid-template-columns:1fr auto;gap:5px;padding:5px 8px;min-height:76px}
  .top-actions{grid-column:1/-1;justify-self:center;gap:8px}
  .question-area{grid-template-columns:1fr;grid-template-rows:auto auto auto;text-align:center;gap:5px;padding:6px 8px;min-height:125px}
  .route-summary{grid-row:auto;justify-self:center;min-height:54px;padding:5px 8px;gap:10px}
  .route-pill{font-size:1.06rem;padding:8px 10px}
  .route-arrow{font-size:2.2rem}
  .question-area h2{font-size:1.2rem;line-height:1.2;padding:7px}
  #instruction{font-size:.86rem;margin:0;justify-self:center}
  .play-area{grid-template-columns:1fr;gap:6px;width:calc(100% - 12px)}
  .maya-panel{display:block;min-height:62px;overflow:hidden;border-radius:12px}
  .maya-panel #guideImage{width:62px;height:64px;left:34px;bottom:0}
  .maya-bubble{left:72px;right:7px;top:6px;padding:6px;font-size:.75rem;min-height:28px}
  .guide-name{left:76px;right:10px;bottom:4px;padding:2px;font-size:.62rem;background:transparent;color:#102348}
  .board{padding:6px 8px;min-height:338px;grid-template-rows:40px 146px auto auto}
  .direction-banner{font-size:.82rem;gap:9px}
  .direction-symbol{font-size:2.6rem}
  .station{font-size:.74rem;border-width:2px;border-radius:7px}
  .major-stations{gap:2px}
  .counting-support{padding:6px}
  .counting-toolbar{gap:5px}
  .aid-tabs button,.count-help-button{font-size:.7rem;padding:5px 6px;min-height:31px}
  .counting-body{gap:8px}
  .counting-total{width:44px;padding-right:5px}
  .counting-total strong{font-size:1.6rem}
  .counting-picture{gap:5px}
  .count-group{width:76px}
  .domino-group{width:68px}
  .bar-group{width:90px}
  .counting-note{font-size:.69rem}
  .answer-dock{grid-template-columns:1fr;grid-template-rows:auto auto;margin:4px 6px 6px;min-height:0;gap:8px;padding:8px}
  .answer-left>div:last-child{grid-template-columns:1fr;grid-template-rows:64px 62px;gap:7px}
  .operation-row,.op-button{height:64px}
  .op-button{font-size:1.25rem}
  .op-arrow{font-size:1.9rem}
  .op-button span{font-size:.66rem}
  .sentence{display:flex;min-height:62px;padding:5px}
  .sentence #sentenceText{font-size:1.65rem}
  .sentence small{font-size:.68rem;margin-bottom:3px}
  .answer-right{min-height:200px}
  .panel-heading{font-size:.68rem}
}
@media(prefers-reduced-motion:reduce){
  .direction-banner.is-moving .direction-symbol,.new-counter,.guide-hello #guideImage,.guide-cheer #guideImage{animation:none}
}

.train-direction-cue{display:none;position:absolute;top:0;left:calc(50% + 36px);border:2px solid #18835a;border-radius:10px;background:#fff;color:#075e40;width:38px;height:34px;text-align:center;font-size:2rem;font-weight:900;line-height:.85;z-index:5}
.train-marker.is-moving[data-direction=forward] .train-direction-cue,.train-marker.is-moving[data-direction=backward] .train-direction-cue{display:block}
.train-marker[data-direction=backward] .train-direction-cue{left:calc(50% - 76px);border-color:#c65b1d;color:#913706}
#startScreen{overflow:auto;place-items:safe center;padding:12px}

.route-wrap{overflow-x:auto;overflow-y:hidden;scrollbar-width:thin;scrollbar-color:#8196b5 transparent;display:block}
.railway-canvas{position:relative;width:100%;height:100%;min-height:145px}
.major-stations{left:8%;right:8%}
.rail{left:8%;right:8%}
.train-marker{animation:none}