.app { grid-template-rows:auto auto minmax(0,1fr); overflow:auto; }
.app:has(> .curriculum-tool-context) { grid-template-rows:auto auto auto minmax(0,1fr); }
button, select { font:inherit; min-height:48px; border:2px solid #c4d6e2; border-radius:8px; color:#102131; background:#fff; padding:8px 14px; font-weight:700; }
button { cursor:pointer; }
button:hover:enabled { background:#e9f6fc; border-color:#149bd7; }
button:disabled { cursor:default; }
button:focus-visible, select:focus-visible { outline:4px solid #149bd7; outline-offset:3px; }
[hidden] { display:none!important; }
.toolbar { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:12px; padding:8px 16px; border-bottom:1px solid #c4d6e2; background:#fff; }
.toolbar label { display:flex; align-items:center; gap:8px; font-weight:700; }
.match-board { display:grid; grid-template-rows:auto minmax(130px,1fr) minmax(40px,auto) minmax(124px,1fr) 48px auto minmax(56px,auto); gap:6px; min-height:0; padding:8px 24px; width:100%; max-width:1500px; margin:auto; height:100%; }
.status-strip { display:flex; justify-content:space-between; font-size:clamp(18px,2vw,26px); }
.question-panel { position:relative; display:grid; align-items:center; border:2px solid #c4d6e2; border-radius:10px; background:#fff; min-height:0; overflow:hidden; padding:8px; }
#divisionModel { position:absolute; inset:8px; min-height:0; }
#divisionModel .question-visual { margin:0; width:100%; height:100%; min-height:0; display:flex; flex-direction:column; justify-content:center; }
#divisionModel .question-visual svg { width:100%; height:100%; min-height:0; max-height:100%; display:block; }
.explanation { margin:0; min-height:40px; align-content:center; text-align:center; font-size:clamp(17px,1.8vw,24px); font-weight:700; color:#145f3d; }
.digit-grid { min-height:0; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); grid-template-rows:repeat(2,minmax(54px,1fr)); gap:10px; }
.digit-card { position:relative; background:#163d57; color:#fff; border-color:#163d57; font-size:clamp(30px,3.8vw,58px); padding:4px; min-height:54px; }
.digit-card:hover:enabled { background:#245b7b; color:#fff; }
.digit-card.is-revealed { background:#fff; color:#102131; border:3px solid #149bd7; }
.digit-card.is-claimed { background:#e2eee7; color:#326749; border-color:#bad4c4; }
.card-position { position:absolute; top:5px; left:8px; font-size:13px; font-weight:normal; opacity:.8; }
.stage-controls { display:flex; justify-content:center; align-items:center; min-height:48px; }
button.primary { background:#149bd7; border-color:#149bd7; }
button.primary:hover:enabled { background:#c7eafd; }
.player-claims { display:grid; grid-template-columns:repeat(var(--players,2),minmax(0,1fr)); gap:10px; }
.player-claim { display:grid; grid-template-columns:1fr auto; align-items:center; gap:2px 8px; min-height:58px; text-align:left; font-size:clamp(17px,1.6vw,24px); }
.player-label { display:contents; }
.claim-action { grid-row:2; grid-column:1 / -1; font-size:15px; }
.player-score { grid-row:1; grid-column:2; white-space:nowrap; }
.player-claim:disabled { color:#4a5965; background:#f3f6f8; }
.player-claim.is-active { border-color:#6d5fd0; box-shadow:inset 0 0 0 1px #6d5fd0; }
.feedback { margin:0; display:grid; align-items:center; min-height:56px; text-align:center; font-size:clamp(18px,1.7vw,24px); font-weight:700; }
.feedback[data-kind="correct"] { color:#145f3d; }
.feedback[data-kind="wrong"] { color:#9d2828; }
@media (max-width:950px) { .match-board { padding:8px 14px; gap:6px; } .digit-grid { gap:8px; } .player-claim { padding:8px; } }
@media (min-width:601px) and (min-height:621px) and (max-height:740px) {
  .app:has(> .curriculum-tool-context) .match-board { grid-template-rows:auto minmax(130px,1fr) minmax(32px,auto) minmax(120px,1fr) 48px auto minmax(48px,auto); gap:4px; padding-block:4px; }
  .app:has(> .curriculum-tool-context) .explanation { min-height:32px; }
  .app:has(> .curriculum-tool-context) .feedback { min-height:48px; }
}
@media (max-width:600px), (max-height:620px) {
  .app { height:auto; min-height:100dvh; overflow:visible; grid-template-rows:auto auto auto; }
  .toolbar { gap:8px; padding:8px; } .toolbar label { flex-wrap:wrap; gap:4px; }
  .match-board { height:auto; padding:12px; grid-template-rows:auto 155px 76px 170px 48px auto minmax(80px,auto); gap:8px; }
  .status-strip { font-size:17px; } .explanation { font-size:17px; }
  .digit-grid { grid-template-columns:repeat(5,minmax(0,1fr)); gap:6px; }
  .digit-card { font-size:38px; } .card-position { top:3px; left:5px; font-size:11px; }
  .player-claims { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .player-claim { font-size:17px; min-height:58px; }
  .feedback { font-size:18px; }
}
