/* The school owns its layout. Match and spectator board dimensions stay intact. */
.welcome-classroom-button{display:block;width:100%;margin-top:12px}
.classroom-scene{min-height:100dvh;overflow:visible}
.classroom-scene::before{background:rgba(255,247,234,.88)}
.classroom-content{--classroom-font-scale:1;max-width:1200px;margin:0 auto;padding:24px 30px 60px;font:calc(16px * var(--classroom-font-scale))/1.85 "Yu Gothic","Hiragino Kaku Gothic ProN",Meiryo,sans-serif;overflow-wrap:anywhere}
.classroom-content *{box-sizing:border-box}
.classroom-content h1,.classroom-content h2,.classroom-content h3{font-family:"Yu Mincho","Hiragino Mincho ProN",serif;line-height:1.5;color:#263f59}
.classroom-content h1{font-size:2em;margin:.4em 0 .6em}
.classroom-content h2{font-size:1.4em;margin:.1em 0 .65em}
.classroom-content h3{font-size:1.15em}
.classroom-content p{margin:.55em 0}
.classroom-content a{color:#254f70;text-underline-offset:4px}
.classroom-content button{min-height:44px;border:1px solid #a7bac5;border-radius:10px;background:#fffdf8;color:#28445e;font:700 .94em/1.45 "Yu Gothic",Meiryo,sans-serif;padding:10px 16px;cursor:pointer;touch-action:manipulation;max-width:100%;overflow-wrap:anywhere}
.classroom-content button:not(:disabled):hover{background:#eaf1f3;border-color:#607f98}
.classroom-content button:disabled{opacity:.52;cursor:default}
.classroom-content button[aria-pressed="true"]{border:2px solid #a92f49;background:#fff0e4}
.classroom-content button:focus-visible,.classroom-content a:focus-visible,.classroom-content summary:focus-visible{outline:3px solid #ac3150;outline-offset:3px}
.classroom-content h1:focus,.classroom-content h2:focus{outline:none}
.classroom-nav{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-bottom:22px}
.classroom-text-size{margin-left:auto;display:flex;gap:7px;align-items:center;font-size:13px}
.classroom-text-size button{font-size:13px;padding:7px 10px}
.classroom-heading .eyebrow{font-size:.88em}
.classroom-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin:20px 0 30px}
.classroom-card{background:rgba(255,253,248,.97);border:1px solid #d7c8b5;border-radius:18px;box-shadow:0 5px 18px #593e2110;padding:23px;margin:20px 0;min-width:0}
.classroom-grid .classroom-card{margin:0;display:flex;flex-direction:column;align-items:flex-start}
.classroom-grid .classroom-card p{flex:1}
.classroom-grid .classroom-card>button{margin-top:10px}
.classroom-teacher{display:flex;align-items:center;gap:18px;background:#f7eedc;border:1px solid #d8c5a4;border-radius:16px;padding:12px 18px;margin:18px 0}
.classroom-teacher>img{width:84px;height:114px;object-fit:cover;object-position:top;flex:none}
.classroom-teacher>div{flex:1;min-width:0}
.classroom-teacher p{font-weight:600}
.classroom-note,.classroom-board-caption{font-size:.85em;color:#666d70}
.classroom-actions{display:flex;gap:9px;flex-wrap:wrap;margin:16px 0 4px}
.classroom-more>.classroom-extra{margin:8px 0 0}
.classroom-extra,.classroom-example{background:#f3f0e7;border-left:4px solid #b68b5b;padding:12px 16px;margin:14px 0}
.classroom-lesson-columns,.classroom-play-columns{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,.9fr);gap:25px;align-items:start}
.classroom-play-columns{grid-template-columns:minmax(280px,450px) minmax(0,1fr)}
.classroom-play-columns:has(>div:only-child){grid-template-columns:1fr}
.classroom-content figure{margin:0;min-width:0}
.classroom-content figcaption{font-size:.82em;color:#686657;line-height:1.6;margin-top:10px}
.classroom-section-links{display:flex;flex-wrap:wrap;gap:10px 20px;margin:20px 0}
.classroom-lesson-section{scroll-margin-top:20px}
.classroom-choices{display:grid;gap:10px;margin:14px 0}
.classroom-choices button{text-align:left;min-height:48px}
.classroom-check{border:1px solid #d8cbbc;border-radius:12px;margin:20px 0;padding:16px}
.classroom-check legend{font-weight:700;padding:0 7px;max-width:100%}
.classroom-feedback{background:#f4efe4;border:1px solid #d8cab4;border-radius:12px;padding:14px;margin:16px 0;min-height:52px}
.classroom-feedback.correct{background:#eff7ee;border-color:#6a9670;color:#254b31}
.classroom-feedback.incorrect{background:#fff4e8;border-color:#ba8e5c;color:#64472b}
.classroom-warning{background:#fff0d2;border:2px solid #b88a38;border-radius:12px;padding:16px;margin:18px 0}
.classroom-warning button{margin:5px 7px 0 0}
.classroom-stage-picker{display:flex;flex-wrap:wrap;gap:6px;max-height:150px;overflow:auto;padding:5px 4px 12px}
.classroom-stage-picker button{font-size:.8em;padding:8px 11px}
.classroom-practice{width:100%;min-width:0}
.classroom-board-wrap{width:100%;max-width:470px;margin:auto;padding:6px 6px 8px 8px;background:linear-gradient(135deg,#bb884f,#a16d3c);border:2px solid #815b32;border-radius:10px;color:#fff4de}
.classroom-files{display:grid;grid-template-columns:repeat(9,1fr);padding-right:18px;text-align:center;font-size:12px;line-height:20px}
.classroom-board-row{display:flex}
.classroom-board{display:grid;grid-template-columns:repeat(9,minmax(0,1fr));grid-template-rows:repeat(9,minmax(0,1fr));aspect-ratio:1;flex:1;min-width:0;background:repeating-linear-gradient(0deg,#ebc17d,#ebc17d 7px,#e9bb70 10px);border-top:1px solid #7c5931;border-left:1px solid #7c5931;touch-action:manipulation;container-type:inline-size}
.classroom-content .classroom-cell{position:relative;display:grid;place-items:center;margin:0;padding:0;border:0;border-radius:0;border-right:1px solid #917044;border-bottom:1px solid #917044;background:transparent;min-height:0;aspect-ratio:1;color:#263e56;line-height:1;box-shadow:none;overflow:visible}
.classroom-content button.classroom-cell{min-height:0}
.classroom-diagram-hand{font-size:.85em}
.classroom-content .classroom-cell:not(:disabled):hover{background:#fff6ce99;border-color:#917044}
.classroom-cell .classroom-piece{width:81%;height:87%;display:grid;place-items:center;clip-path:polygon(50% 0,96% 18%,88% 100%,12% 100%,4% 18%);background:linear-gradient(135deg,#fff2c9,#f9d28a);font:900 clamp(16px,5.4cqw,30px)/1 "Yu Mincho",serif;color:#20364d;padding-top:9%;white-space:nowrap;letter-spacing:-.08em}
.classroom-piece.gote{transform:rotate(180deg)}
.classroom-piece.promoted{color:#a8283d}
.classroom-cell.selected,.classroom-content button.classroom-cell[aria-pressed="true"]{box-shadow:inset 0 0 0 3px #b32b46;background:#ffd78c;border-right:1px solid #917044;border-bottom:1px solid #917044;border-left:0;border-top:0}
.classroom-cell.marked{box-shadow:inset 0 0 0 2px #315e6b}
.classroom-cell.target{background:#e4edb8}
.classroom-cell i{position:absolute;font-size:30px;color:#374d39;font-style:normal;line-height:1}
.classroom-content button.classroom-cell:focus-visible{outline:3px solid #af2c48;outline-offset:-3px;z-index:1}
.classroom-ranks{display:grid;grid-template-rows:repeat(9,1fr);width:18px;font-size:12px;text-align:center}
.classroom-ranks span{display:grid;place-items:center}
.classroom-hand{display:flex;flex-wrap:wrap;align-items:center;gap:5px;font-size:.8em;min-height:40px;margin:9px 0}
.classroom-hand strong{margin-right:4px}
.classroom-hand button{font-size:1em;padding:6px 10px;min-height:38px}
.classroom-promotion{padding:14px;background:#fff0d1;border:2px solid #b58343;border-radius:12px}
.classroom-promotion button{margin:4px}
.classroom-summary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.classroom-summary p{padding:16px;border:1px solid #cfc1aa;border-radius:12px;background:#fffdf6}
.classroom-summary strong{display:block;font-size:1.4em}
.classroom-badges{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.classroom-badge{border:1px dashed #bdb5a6;padding:16px;border-radius:12px;background:#f3f2ee;color:#686c6a}
.classroom-badge.earned{background:#fff1cc;border:2px solid #ac8035;color:#685018}
.classroom-badge p{font-size:.85em}
.classroom-content summary{cursor:pointer;font-weight:700;min-height:44px;padding:9px 0}
.classroom-content li{margin:10px 0}
.classroom-review-list{padding-left:22px}
.classroom-review-list li{padding:8px 0}
.classroom-review-list button{margin-left:8px}
.classroom-consult-layout{display:grid;grid-template-columns:minmax(230px,.85fr) minmax(0,1.2fr);align-items:start;gap:22px}
.classroom-consult-layout>.classroom-card{position:sticky;top:10px}
.classroom-player-choice{background:#eaf1f5;border:1px solid #c1d1dc;border-radius:12px;padding:12px 16px;margin:14px 0 14px auto!important;max-width:80%}
.classroom-chat-history{max-height:420px;overflow:auto;overscroll-behavior:contain}
.classroom-match{padding:15px;background:#f7ecd4;border-radius:10px}
.classroom-content .classroom-primary{background:#25455f;color:#fff;border-color:#25455f}
.classroom-content .classroom-primary:not(:disabled):hover{background:#355e78;color:#fff}
.classroom-course-welcome{border-color:#b5a07b;background:#fff7e5}
.classroom-course-welcome>button{margin:7px 10px 0 0}
.classroom-course-progress{color:#5d685c;font-weight:700}
.classroom-course-steps{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0}
.classroom-course-steps button{font-size:.82em;flex:1 1 180px;text-align:left}
.classroom-course-steps [aria-current="step"]{border:2px solid #315a70;background:#e9f1f2}
.classroom-stage-list{border:1px solid #c9bda7;border-radius:12px;background:#fffbf3;margin:16px 0;padding:0 12px}
.classroom-stage-list summary{font-size:.9em}
.classroom-backup{margin-top:16px}
.classroom-file-button{position:relative;display:inline-flex;align-items:center;justify-content:center;min-height:44px;border:1px solid #a7bac5;border-radius:10px;background:#fffdf8;color:#28445e;font-weight:700;padding:10px 16px;cursor:pointer;overflow:hidden}
.classroom-file-button input{position:absolute;inset:0;opacity:0;width:100%;height:100%;cursor:pointer}
.classroom-file-button:focus-within{outline:3px solid #ac3150;outline-offset:3px}
.classroom-import-preview{border:1px solid #b5a07b;background:#fff8e9;border-radius:12px;padding:16px;margin-top:15px}
@media(max-width:1100px){
  .welcome-classroom-button{margin-top:7px;padding:9px 12px;min-height:40px;font-size:13px}
  .title-scene .welcome-card{padding-bottom:12px}
  .classroom-scene .site-header{min-height:54px}
  .classroom-scene .header-status{display:none}
  .classroom-content{padding:14px max(12px,env(safe-area-inset-right)) calc(32px + env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left));max-width:900px;font-size:calc(16px * var(--classroom-font-scale))}
  .classroom-content h1{font-size:1.65em}
  .classroom-card{padding:18px}
  .classroom-nav{margin-bottom:16px}
  .classroom-grid{gap:12px}
  .classroom-lesson-columns,.classroom-play-columns{grid-template-columns:1fr;gap:18px}
  .classroom-lesson-columns figure{max-width:420px;width:100%;margin:0 auto}
  .classroom-practice{max-width:470px;margin:auto}
  .classroom-consult-layout{grid-template-columns:1fr;gap:10px}
  .classroom-consult-layout>.classroom-card{position:static;order:-1}
  .classroom-teacher{gap:12px;padding:10px 12px}
  .classroom-teacher>img{width:65px;height:94px}
  .classroom-summary{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:580px){
  .classroom-grid,.classroom-badges{grid-template-columns:1fr}
  .classroom-content .classroom-card{padding:16px 12px}
  .classroom-nav>button{font-size:13px;padding:9px 11px}
  .classroom-text-size{width:100%;justify-content:flex-end}
  .classroom-teacher{align-items:flex-start}
  .classroom-teacher>img{width:52px;height:85px}
  .classroom-content .classroom-check{padding:13px 9px}
  .classroom-actions{gap:7px}
  .classroom-actions>button{flex:1 1 130px}
  .classroom-player-choice{max-width:95%}
  .classroom-content .classroom-practice-card{padding-left:4px;padding-right:4px}
  .classroom-practice-card>h2,.classroom-practice-card>.classroom-prompt,.classroom-practice-card .classroom-response{padding-left:8px;padding-right:8px}
  .classroom-practice-card .classroom-board-wrap{padding-left:5px;padding-right:4px}
  .classroom-course-steps button{flex-basis:calc(50% - 4px);font-size:.78em}
  .classroom-file-button{width:100%;text-align:center}
}

/* Keep the classroom's new navigation separate from the match scenes. */
.classroom-main-entries{grid-template-columns:repeat(3,minmax(0,1fr))}
.classroom-main-entries .classroom-card{display:flex;flex-direction:column}
.classroom-main-entries .classroom-card>button{margin-top:auto;align-self:flex-start}
.classroom-secondary,.classroom-review-tabs{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0}
.classroom-review-tabs [aria-current="page"]{border:2px solid #315a70;background:#e9f1f2}
.classroom-display-options{margin-left:auto;position:relative}
.classroom-display-options>summary{font-size:.85em;color:#28445e}
.classroom-display-options .classroom-text-size{padding:8px 0;justify-content:flex-end;flex-wrap:wrap}
.classroom-nav:has(.classroom-display-options){align-items:flex-start}
.classroom-more{display:block;margin-top:16px;border-top:1px solid #e0d4c3;padding-top:8px}
.classroom-more>summary{touch-action:manipulation}
.classroom-related{margin-top:20px}
.classroom-related button{margin:6px 8px 6px 0}
.classroom-game-category{margin:14px 0;border:1px solid #d8cbbc;border-radius:12px;padding:8px 16px;background:#fffbf3}
.classroom-game-category>.classroom-grid{margin-bottom:12px}
.classroom-unit-navigation{justify-content:space-between}
@media(max-width:850px){.classroom-main-entries{grid-template-columns:1fr}.classroom-main-entries .classroom-card>button{align-self:stretch}.classroom-display-options{margin-left:0}}
@media(max-width:850px){
  .classroom-content[data-school-page="home"] .classroom-main-entries .classroom-card{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:12px;padding:14px}
  .classroom-content[data-school-page="home"] .classroom-main-entries h2{grid-column:1;font-size:1.1em;margin:0}
  .classroom-content[data-school-page="home"] .classroom-main-entries p{grid-column:1;font-size:.9em;line-height:1.65;margin:6px 0 0}
  .classroom-content[data-school-page="home"] .classroom-main-entries .classroom-card>button{grid-column:2;grid-row:1/3;align-self:center;margin:0;padding:10px 12px}
}

/* Beginner classroom: keep the familiar materials, reveal one task at a time. */
.classroom-lesson-lead{font-size:1.06em;font-weight:600;line-height:1.85;color:#263f59}
.classroom-input-guide{padding:12px 16px;margin:14px 0 20px;border:1px solid #a5b9c1;border-radius:12px;background:#edf4f5;color:#29465b;line-height:1.65}
.classroom-input-guide strong{display:block;font-size:1.05em}
.classroom-input-guide p{margin:5px 0 0}
.classroom-content .classroom-cell.suggested{outline:3px dashed #294d64;outline-offset:-4px;z-index:1}
.classroom-cell.suggested::after{content:'▼';position:absolute;right:1px;top:-3px;color:#8a233e;font:900 11px/1 sans-serif;pointer-events:none}
.classroom-content .classroom-cell.target i{font-size:26px;background:#f4f8decc;border-radius:50%;width:18px;height:18px;display:grid;place-items:center;pointer-events:none}
.classroom-hint{border:1px solid #d5c7ae;border-radius:10px;padding:0 12px;margin-top:16px;background:#fffaf0}
.classroom-hint>summary{font-size:.95em;color:#354d60}
.classroom-promotion{scroll-margin:20px}
.classroom-course-intro{margin-bottom:14px}
.classroom-course-intro>.classroom-teacher{margin-top:0}
.classroom-course-intro>figure{max-width:340px;margin:16px auto}
.classroom-content .classroom-course-progress{font-variant-numeric:tabular-nums}
.classroom-lesson-section>.classroom-actions{margin-top:18px}
.classroom-response .classroom-feedback{margin-top:0}
.classroom-response .classroom-actions .classroom-primary{flex:1 1 220px}
@media(min-width:1101px){.classroom-practice{position:sticky;top:20px}.classroom-course-intro{max-width:100%}.classroom-course-intro>.classroom-teacher{max-width:100%}}
@media(max-width:580px){
  .classroom-content{line-height:1.8}
  .classroom-content h1{font-size:1.48em}
  .classroom-course-intro>.classroom-teacher{margin-bottom:10px}
  .classroom-course-intro>p{font-size:.98em}
  .classroom-input-guide{padding:10px 12px;margin:12px 8px 16px;font-size:.94em}
  .classroom-practice-card>.classroom-prompt{font-weight:700;line-height:1.7}
  .classroom-course-steps button{min-height:48px;font-size:.85em}
  .classroom-board-caption{line-height:1.7;font-size:.88em;padding:0 8px}
  .classroom-hint{margin-top:12px}
  .classroom-content .classroom-response .classroom-actions{display:grid;grid-template-columns:1fr}
  .classroom-content .classroom-response .classroom-actions>button{width:100%;min-height:48px}
  .classroom-promotion button{min-height:48px}
}

/* Guided practice has one short introduction, with the actual board immediately after. */
.classroom-content[data-school-page="course"] .classroom-course-intro,.classroom-content[data-school-page="path"] .classroom-course-intro{padding:0;border:0;box-shadow:none;background:transparent;margin:12px 0}
.classroom-course-intro>.classroom-teacher:only-child{margin:0}
.classroom-content[data-school-page="course"] .classroom-stage-list,.classroom-content[data-school-page="path"] .classroom-stage-list{margin:8px 0 12px}
.classroom-content[data-school-page="course"] .classroom-course-progress,.classroom-content[data-school-page="path"] .classroom-course-progress{margin:2px 0}
.classroom-course-intro+.classroom-practice-card{margin-top:12px}
@media(max-width:580px){.classroom-course-intro>.classroom-teacher{gap:9px;padding:9px 10px}.classroom-course-intro>.classroom-teacher>img{width:42px;height:70px}.classroom-course-intro+.classroom-practice-card>.classroom-prompt{margin-top:4px}}

/* Hasami lessons reuse the school board; match/spectator styles stay untouched. */
.classroom-hasami-units{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0}
.classroom-hasami-units button{flex:1 1 160px;text-align:left}
.classroom-hasami-units button[aria-current="step"]{background:#f7eedc;border:2px solid #a57c49}
.classroom-hasami-tally{display:flex;flex-wrap:wrap;gap:8px 18px;padding:12px;background:#f7eedc;border-radius:10px}
.classroom-hasami-practice .classroom-actions{align-items:stretch}
@media(max-width:480px){.classroom-content .classroom-card.classroom-hasami-practice{margin-inline:-6px;padding-inline:8px}.classroom-hasami-units button{flex-basis:calc(50% - 8px);padding:9px;font-size:.85em}.classroom-hasami-entry>button{width:100%}}