:root {
  --bg: #f8f4ef;
  --panel: #ffffff;
  --text: #2f251f;
  --muted: #6f6258;
  --line: #ddcec0;
  --brand: #c30000;
  --brand-soft: #f9dddd;
  --success: #2f7d4f;
  --success-soft: #e3f3e8;
  --danger: #b33632;
  --blue: #1d63d6;
  --blue-soft: #e4edfb;
  --carry: #7b3fa0;
  --carry-soft: #f1e8f7;
  --hl: #fff1b8;
  --cell: 56px;
}

* {
  box-sizing: border-box;
}

/* Quick double taps (common with kids) shouldn't zoom the page on iPhone.
   Pinch-to-zoom still works. */
html,
body {
  touch-action: manipulation;
}

body {
  margin: 0;
  font-family: "Avenir Next", "Segoe UI", sans-serif;
  color: var(--text);
  background: radial-gradient(circle at top right, #fff8f3, var(--bg) 50%);
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

h1, h2, p {
  margin: 0;
}

button {
  font: inherit;
  cursor: pointer;
  touch-action: manipulation;
}

.hidden {
  display: none !important;
}

/* ---------- Header ---------- */

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 20px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, #fff, #fcf8f3);
  box-shadow: 0 4px 20px rgba(90, 52, 38, 0.08);
}

.brand-block {
  display: flex;
  align-items: center;
  gap: 14px;
  color: inherit;
  text-decoration: none;
}

.master-logo {
  width: 42px;
  height: 42px;
  object-fit: contain;
}

.topbar h1 {
  font-size: 1.3rem;
  color: var(--brand);
}

.topbar p {
  color: var(--muted);
  margin-top: 2px;
  font-size: 0.85rem;
}

/* ---------- Grade and skill screens ---------- */

.screen {
  flex: 1;
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding: 24px 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.screen-title {
  font-size: 1.6rem;
  text-align: center;
  color: var(--text);
}

.grade-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
}

.grade-card,
.skill-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: 0 6px 18px rgba(90, 52, 38, 0.06);
  text-align: left;
  color: var(--text);
  transition: transform 0.15s ease, border-color 0.15s ease;
}

.grade-card:hover,
.skill-card:hover {
  border-color: var(--brand);
  transform: translateY(-2px);
}

.grade-card {
  padding: 20px 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 120px;
}

.grade-card .grade-name {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--brand);
}

.grade-card .grade-desc {
  font-size: 0.95rem;
  color: var(--muted);
  line-height: 1.35;
}

.skill-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 14px;
}

.skill-card {
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.code-chip {
  align-self: flex-start;
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--brand-soft);
  color: var(--brand);
  font-weight: 800;
  font-size: 0.8rem;
  letter-spacing: 0.02em;
}

.skill-card .skill-name {
  font-size: 1.2rem;
  font-weight: 800;
}

.skill-card .skill-standard {
  font-size: 0.9rem;
  color: var(--muted);
  line-height: 1.4;
}

.skill-card .skill-example {
  font-size: 1rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.back-btn {
  align-self: flex-start;
  background: none;
  border: 1px solid var(--line);
  color: var(--text);
  padding: 8px 16px;
  min-height: 44px;
  border-radius: 999px;
  font-weight: 700;
}

.back-btn:hover {
  border-color: var(--brand);
  color: var(--brand);
}

/* ---------- Work screen layout ---------- */

.layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 16px 20px;
}

.board-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 16px 12px;
  box-shadow: 0 6px 18px rgba(90, 52, 38, 0.06);
}

/* The board's digit size is picked in script.js (fitBoard) to fill this area. */
.board-area {
  width: 100%;
  min-height: 240px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.side-panel {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.panel-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 16px;
  box-shadow: 0 6px 18px rgba(90, 52, 38, 0.06);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* benchmark line at the top of the problem area */
.work-head {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.back-btn.small {
  min-height: 36px;
  padding: 4px 12px;
  font-size: 0.9rem;
}

.work-title {
  font-weight: 800;
  font-size: 0.95rem;
}

.level-title {
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--muted);
  margin-bottom: 6px;
}

.choice-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.choice-btn {
  background: #fff;
  border: 1px solid var(--line);
  color: var(--text);
  padding: 6px 4px;
  min-height: 44px;
  border-radius: 12px;
  font-weight: 700;
  font-size: 0.9rem;
  line-height: 1.15;
  text-align: center;
}

.choice-btn.active {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
}

/* ---------- The problem board ---------- */

.board {
  display: grid;
  grid-template-columns: var(--col-sizes);
  justify-content: center;
  row-gap: 4px;
}

.practice-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
}

.primary.success {
  background: var(--success);
}

.text-link-btn {
  background: none;
  border: none;
  color: var(--muted);
  text-decoration: underline;
  font-size: 0.9rem;
  padding: 6px;
}

.score-line {
  text-align: center;
  color: var(--muted);
  font-size: 0.9rem;
}

.think-line {
  height: 4rem;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  text-align: center;
  font-size: 1.15rem;
  font-weight: 700;
  max-width: 34ch;
  line-height: 1.4;
}

.primary {
  border: none;
  border-radius: 999px;
  padding: 14px 24px;
  min-height: 52px;
  font-weight: 800;
  font-size: 1.1rem;
  color: #fff;
  background: var(--brand);
  width: 100%;
}

.skal-tip {
  text-align: center;
  color: var(--muted);
  font-size: 0.8rem;
}

.skal-tip strong {
  color: var(--brand);
}

.site-footer {
  text-align: center;
  padding: 6px 20px 10px;
  color: var(--muted);
  font-size: 0.75rem;
}

.site-footer a {
  color: var(--brand);
}

/* Big enough screens (laptops, tablets, smart boards): the work screen fits on
   one screen, board on the left and panel on the right. */
@media (min-width: 760px) and (min-height: 480px) {
  body.working {
    height: 100vh;
    height: 100dvh;
  }
  .layout {
    flex: 1;
    min-height: 0;
    grid-template-columns: minmax(0, 1fr) clamp(280px, 30vw, 360px);
    grid-template-rows: minmax(0, 1fr);
  }
  .board-panel {
    min-height: 0;
  }
  .board-area {
    flex: 1;
    min-height: 0;
  }
  .side-panel {
    min-height: 0;
    overflow-y: auto;
  }
}

/* Phones (and very short screens): the board is stacked above the panel, so
   the number pad (and Next Problem) sit right under the board where thumbs are. */
@media (max-width: 759px), (max-height: 479px) {
  #keypadSlot {
    order: -2;
  }
  .practice-actions {
    order: -1;
  }
  .think-line,
  .feedback {
    height: 5rem; /* room for four lines (the longest questions at phone width) */
    font-size: 0.95rem;
    line-height: 1.3;
  }
  .board-panel {
    padding-top: 12px;
    padding-bottom: 12px;
  }
}

@media (max-width: 600px) {
  .topbar {
    padding: 6px 16px;
  }
  .topbar p {
    display: none;
  }
  .master-logo {
    width: 34px;
    height: 34px;
  }
  .topbar h1 {
    font-size: 1.15rem;
  }
  .screen {
    padding: 16px;
    gap: 12px;
  }
  .screen-title {
    font-size: 1.35rem;
  }
  .grade-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  .grade-card {
    padding: 14px;
    min-height: 0;
  }
  .grade-card .grade-name {
    font-size: 1.25rem;
  }
  .grade-card .grade-desc {
    font-size: 0.85rem;
  }
  .layout {
    padding: 12px 16px 16px;
    gap: 12px;
  }
  .board-area {
    min-height: 180px;
  }
}

/* ---------- Teach Me ---------- */

.mute-btn {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--panel);
  font-size: 1.3rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mute-btn:hover {
  border-color: var(--brand);
}

.mode-tabs {
  display: flex;
  gap: 8px;
  border-bottom: 1px solid var(--line);
}

.mode-tab {
  flex: 1;
  background: none;
  border: none;
  padding: 10px 12px;
  min-height: 48px;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--muted);
  border-bottom: 3px solid transparent;
}

.mode-tab.active {
  color: var(--brand);
  border-bottom-color: var(--brand);
}

.teach-dots {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

.teach-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: none;
  background: var(--line);
  padding: 0;
}

.teach-dot.active {
  background: var(--brand);
  transform: scale(1.25);
}

.teach-dot.done {
  background: var(--success);
}

.teach-caption {
  text-align: center;
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.5;
}

.teach-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.speak-btn {
  flex: 1;
  background: var(--panel);
  border: 1px solid var(--line);
  color: var(--text);
  padding: 12px 16px;
  min-height: 52px;
  border-radius: 999px;
  font-weight: 600;
}

.speak-btn:hover {
  border-color: var(--brand);
  color: var(--brand);
}

.ghost {
  background: none;
  border: 1px solid var(--line);
  color: var(--text);
  padding: 12px 16px;
  min-height: 52px;
  border-radius: 999px;
  font-weight: 700;
}

.ghost:disabled,
.ghost.waiting {
  opacity: 0.35;
  cursor: default;
}

/* the number sentence under a worked example */
.demo-math {
  display: inline-block;
  padding: 4px 16px;
  border-radius: 999px;
  background: var(--hl);
  font-size: 1.15rem;
  line-height: 1.3;
  font-weight: 800;
  animation: feedback-pop 0.5s ease;
}

/* ---------- Coins and bills ---------- */

.money-board {
  width: 100%;
  max-height: 100%;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 4px;
}

.money-heading {
  margin: 6px 0 0;
  font-size: 1rem;
  color: var(--muted);
}

.money-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-end;
  gap: 18px;
}

.money-item {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.money-item figcaption {
  font-size: 0.85rem;
  color: var(--muted);
  text-align: center;
}

.money-item figcaption strong {
  color: var(--text);
  text-transform: capitalize;
}

.coin {
  filter: drop-shadow(0 2px 3px rgba(60, 40, 20, 0.35));
}

.coin {
  display: block;
}

/* Bills stay under 400px wide: smaller than 75% of a real bill, as the
   federal rules for pictures of money require. */
.bill {
  display: block;
  max-width: min(100%, 400px);
  height: auto;
  border-radius: 2px;
  filter: drop-shadow(0 2px 4px rgba(40, 60, 40, 0.3));
}

.site-footer .credits {
  margin-top: 2px;
  font-size: 0.65rem;
  opacity: 0.8;
}

/* ---------- Practice ---------- */

@keyframes pop-in {
  0% { transform: translateX(-50%) scale(0.2); opacity: 0; }
  70% { transform: translateX(-50%) scale(1.15); opacity: 1; }
  100% { transform: translateX(-50%) scale(1); }
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  75% { transform: translateX(5px); }
}

@keyframes feedback-pop {
  0% { transform: scale(0.7); opacity: 0; }
  60% { transform: scale(1.08); opacity: 1; }
  100% { transform: scale(1); }
}

.money-board.count,
.money-board.know {
  justify-content: center;
  min-height: 100%;
  overflow: visible;
}

.money-sorted {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 22px 34px;
  padding-top: 16px;
}

.money-group {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 10px;
}

.money-scatter {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 22px 18px;
  padding-top: 16px;
}

.money-btn {
  position: relative;
  background: none;
  border: none;
  padding: 0;
  border-radius: 50%;
  -webkit-tap-highlight-color: transparent;
}

.money-btn.is-bill {
  border-radius: 4px;
}

.money-btn img {
  transition: opacity 0.2s ease;
}

.money-btn.counted img {
  opacity: 0.4;
}

/* the running count that pops up on each coin or bill as it is tapped */
.count-bubble {
  display: none;
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--blue);
  color: #fff;
  font-weight: 800;
  font-size: 1rem;
  white-space: nowrap;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.money-btn.counted .count-bubble {
  display: block;
  animation: pop-in 0.3s ease;
}

.find-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 24px;
}

.money-btn.wrong-pick {
  animation: shake 0.35s ease;
}

.money-btn.wrong-pick img {
  opacity: 0.3;
}

.money-btn.right-pick {
  box-shadow: 0 0 0 6px var(--success);
}

.one-coin {
  display: flex;
  justify-content: center;
}

/* the answer box ("Total: [ 26 ]¢") */
.answer-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 4px 14px;
}

.answer-text {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 1.7rem;
  font-weight: 800;
}

.ans-box {
  min-width: 3.4ch;
  height: 56px;
  padding: 0 10px;
  border: 3px solid var(--blue);
  border-radius: 12px;
  background: var(--blue-soft);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-variant-numeric: tabular-nums;
}

.ans-box.wrong {
  border-color: var(--danger);
  background: #fbe9e8;
  animation: shake 0.35s ease;
}

.ans-box.right {
  border-color: var(--success);
  background: var(--success-soft);
  color: var(--success);
}

.ans-box.reveal {
  border-color: var(--muted);
  background: var(--hl);
}

.recount-btn {
  font-size: 0.95rem;
}

/* tap-an-answer buttons (Which coin? How much?) */
.choice-answers {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  width: 100%;
  max-width: 560px;
}

.answer-btn {
  min-height: 58px;
  border-radius: 14px;
  border: 2px solid var(--line);
  background: #fff;
  color: var(--text);
  font-size: 1.25rem;
  font-weight: 800;
  text-transform: capitalize;
  box-shadow: 0 3px 0 var(--line);
}

.answer-btn:hover {
  border-color: var(--blue);
}

.answer-btn.wrong {
  opacity: 0.4;
  border-color: var(--danger);
  animation: shake 0.35s ease;
  cursor: default;
}

.answer-btn.right {
  background: var(--success);
  border-color: var(--success);
  color: #fff;
}

.feedback {
  font-weight: 700;
  text-align: center;
  border-radius: 10px;
  font-size: 1.05rem;
  width: 100%;
  max-width: 520px;
  min-height: 4rem;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1.3;
  padding: 6px 12px;
}

.feedback:empty {
  display: none;
}

.board-panel:has(.feedback:not(:empty)) .think-line {
  display: none;
}

.feedback.correct {
  color: var(--success);
  background: var(--success-soft);
  animation: feedback-pop 0.5s ease;
}

.feedback.incorrect {
  color: var(--danger);
  background: #fbe9e8;
}

.feedback.reveal {
  color: var(--text);
  background: var(--hl);
}

/* number pad: 1-9, then erase, 0, check */
.keypad {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.key-btn {
  min-height: 54px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: #fffdfa;
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--text);
  box-shadow: 0 3px 0 var(--line);
}

.key-btn:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 var(--line);
}

.key-btn.check-key {
  background: var(--success);
  border-color: var(--success);
  color: #fff;
  font-size: 1.05rem;
  white-space: nowrap;
  box-shadow: 0 3px 0 #1f5a37;
}

.keypad.locked .key-btn {
  opacity: 0.4;
  pointer-events: none;
}

.coming-note {
  display: none;
}

#practiceCard.coming .coming-note {
  display: block;
}

#practiceCard.coming > :not(.coming-note) {
  display: none;
}

@media (max-width: 600px) {
  .choice-answers {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .answer-text {
    font-size: 1.4rem;
  }
  .ans-box {
    height: 48px;
  }
  .key-btn {
    min-height: 48px;
  }
}

.think-line:empty {
  display: none;
}

/* ---------- Money mat ---------- */

.money-board.build {
  height: 100%;
  min-height: 100%;
  overflow: visible;
  padding: 0;
}

.build-host {
  width: 100%;
  height: 100%;
  min-height: 360px;
  display: flex;
}

.mat-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 0;
}

/* a green felt mat, like a classroom money mat */
.mat {
  position: relative;
  flex: 1;
  min-height: 200px;
  border-radius: 16px;
  background: radial-gradient(circle at 30% 20%, #3f8a5c, #2d6a45 70%);
  box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.35);
  border: 3px dashed rgba(255, 255, 255, 0.35);
  overflow: hidden;
  touch-action: none;
}

.mat.drop-here {
  border-color: #fff;
  box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.35), 0 0 0 4px var(--hl);
}

.mat-empty {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 16px;
  color: rgba(255, 255, 255, 0.8);
  font-weight: 700;
  font-size: 1.1rem;
  pointer-events: none;
}

.mat-piece {
  position: absolute;
  transform: translate(-50%, -50%);
  background: none;
  border: none;
  padding: 0;
  line-height: 0;
  touch-action: none;
  cursor: grab;
  -webkit-tap-highlight-color: transparent;
}

.mat-piece.is-coin {
  border-radius: 50%;
}

.mat-piece.dragging {
  opacity: 0.25;
}

.mat-piece .coin {
  filter: drop-shadow(0 3px 3px rgba(0, 0, 0, 0.45));
}

.mat-piece .bill {
  filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.4));
}

/* the piece that follows a finger or mouse while dragging */
.mat-ghost {
  position: fixed;
  z-index: 50;
  transform: translate(-50%, -50%) scale(1.08);
  pointer-events: none;
  line-height: 0;
  filter: drop-shadow(0 8px 10px rgba(0, 0, 0, 0.35));
}

.mat-tools {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px 14px;
}

.mat-tool {
  background: #fff;
  border: 1px solid var(--line);
  color: var(--text);
  border-radius: 999px;
  padding: 6px 14px;
  min-height: 40px;
  font-weight: 700;
  font-size: 0.9rem;
}

.mat-tool:disabled {
  opacity: 0.45;
  cursor: default;
}

.mat-total {
  font-size: 1.05rem;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--hl);
}

.tray {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px 18px;
  padding: 10px;
  border-radius: 14px;
  background: #efe6da;
  border: 1px solid var(--line);
}

.tray-piece {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  background: none;
  border: none;
  padding: 2px;
  touch-action: none;
  cursor: grab;
  -webkit-tap-highlight-color: transparent;
}

.tray-piece:active img {
  transform: scale(0.94);
}

.tray-name {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--muted);
  text-transform: capitalize;
}

.mat-wrap.locked .tray,
.mat-wrap.locked .mat-tool[data-act="clear"] {
  opacity: 0.45;
  pointer-events: none;
}

.mat-wrap.locked .mat-piece {
  cursor: default;
}

.check-btn {
  width: auto;
  min-width: 240px;
  background: var(--success);
}

@media (max-width: 759px), (max-height: 479px) {
  .build-host {
    min-height: 0;
    height: auto;
  }
  .mat {
    flex: none;
    height: 260px;
  }
}

/* ---------- Word problems ---------- */

.money-board.word {
  justify-content: center;
  min-height: 100%;
  overflow: visible;
  gap: 12px;
}

/* answering on the mat: a shorter story card so the mat and tray fit */
.money-board.word.with-mat {
  justify-content: flex-start;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  gap: 8px;
}

.money-board.word.with-mat .story-card {
  padding: 10px 14px;
  gap: 8px;
}

.money-board.word.with-mat .story {
  font-size: 1.15rem;
}

.money-board.word.with-mat .word-mat {
  flex: 1;
  min-height: 0;
  height: auto;
}

.money-board.word.with-mat .mat {
  min-height: 110px;
}

@media (max-width: 759px), (max-height: 479px) {
  .money-board.word.with-mat {
    height: auto;
    overflow: visible;
  }
}

.story-card {
  width: 100%;
  max-width: 640px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px 18px;
  border-radius: 16px;
  background: #fffaf2;
  border: 1px solid var(--line);
}

.price-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.price-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px 4px 8px;
  border-radius: 999px;
  background: #fff;
  border: 1px dashed var(--muted);
  font-size: 0.95rem;
}

.price-tag b {
  color: var(--success);
}

.tag-emoji {
  font-size: 1.3rem;
}

.story {
  font-size: 1.3rem;
  line-height: 1.55;
}

.story b {
  color: var(--success);
  white-space: nowrap;
}

.step-list {
  margin: 0;
  padding-left: 1.4rem;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 1.05rem;
  line-height: 1.4;
}

.step-list li.done {
  color: var(--muted);
}

.step-list li.done b {
  color: var(--success);
}

.step-list li.current {
  font-weight: 700;
  padding: 4px 8px;
  border-radius: 8px;
  background: var(--hl);
}

.helper-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.helper-btn {
  background: #fff;
  border: 2px solid var(--blue);
  color: var(--blue);
  border-radius: 999px;
  padding: 6px 16px;
  min-height: 44px;
  font-weight: 800;
  font-size: 0.95rem;
}

.helper-btn:hover {
  background: var(--blue-soft);
}

.choice-answers.yesno {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 360px;
}

.choice-answers.multi {
  grid-template-columns: minmax(0, 1fr);
  max-width: 460px;
}

.answer-btn.multi-btn {
  text-transform: none;
  font-size: 1.05rem;
  text-align: left;
  padding: 8px 14px 8px 44px;
  position: relative;
  min-height: 50px;
}

.answer-btn.multi-btn::before {
  content: "";
  position: absolute;
  left: 14px;
  top: 50%;
  width: 20px;
  height: 20px;
  margin-top: -10px;
  border: 2px solid var(--muted);
  border-radius: 5px;
  background: #fff;
}

.answer-btn.multi-btn.selected {
  border-color: var(--blue);
  background: var(--blue-soft);
}

.answer-btn.multi-btn.selected::before {
  content: "✓";
  color: #fff;
  background: var(--blue);
  border-color: var(--blue);
  font-size: 0.9rem;
  line-height: 18px;
  text-align: center;
}

.answer-btn:disabled {
  cursor: default;
}

.answer-btn.multi-btn.right {
  color: #fff;
}

/* the "Use Money" pop-up */
.mat-modal {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: rgba(30, 20, 10, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.mat-sheet {
  width: min(960px, 100%);
  height: min(720px, 100%);
  background: var(--panel);
  border-radius: 18px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
}

.mat-sheet-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.mat-sheet-head p {
  flex: 1;
  font-size: 1.05rem;
  line-height: 1.45;
}

.mat-sheet-head p b {
  white-space: normal;
}

.mat-done {
  width: auto;
  flex-shrink: 0;
  min-height: 48px;
  padding: 10px 22px;
}

.mat-modal-host {
  flex: 1;
  min-height: 0;
  display: flex;
}

body.modal-open {
  overflow: hidden;
}

@media (max-width: 600px) {
  .story {
    font-size: 1.15rem;
  }
  .mat-modal {
    padding: 8px;
  }
  .mat-sheet-head {
    flex-direction: column;
  }
  .mat-done {
    align-self: stretch;
  }
}

/* in the "Use Money" pop-up the mat fills the space (phones too) */
.mat-modal-host .mat {
  flex: 1;
  height: auto;
  min-height: 180px;
}

/* the prices are in the story, so the mat gets the tags' space */
.money-board.word.with-mat .price-tags {
  display: none;
}

/* decimal money: the point key joins the bottom row and Check gets its own row */
.key-btn.point-key {
  display: none;
  font-size: 2rem;
  line-height: 0.6;
}

.keypad.decimal .key-btn.point-key {
  display: block;
  order: 10;
}

.keypad.decimal .zero-key {
  order: 11;
}

.keypad.decimal .back-key {
  order: 12;
}

.keypad.decimal .check-key {
  order: 13;
  grid-column: 1 / -1;
}

.choice-answers.pick {
  grid-template-columns: minmax(0, 1fr);
  max-width: 460px;
}

.choice-answers.pick .answer-btn {
  text-transform: none;
  font-size: 1.05rem;
}

/* ---------- Teach Me lessons ---------- */

.money-board.lesson {
  justify-content: center;
  min-height: 100%;
  overflow: visible;
  gap: 14px;
}

.lesson-coins {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-end;
  gap: 18px 26px;
}

.lesson-coins figcaption {
  text-transform: none;
}

.money-board.lesson-money {
  min-height: 0;
  padding: 0;
}

.money-board.lesson .money-btn {
  cursor: default;
}

.lesson-math {
  text-align: center;
}

.read-btn {
  margin-left: auto;
  background: #fff;
  border: 2px solid var(--blue);
  color: var(--blue);
  border-radius: 999px;
  padding: 4px 14px;
  min-height: 40px;
  font-weight: 800;
  font-size: 0.9rem;
}

.read-btn:hover {
  background: var(--blue-soft);
}

/* Side-by-side starts at 480px tall (not 560): a classroom smart board, zoomed
   in with browser bars and a taskbar, can be only ~500-560px tall, and the
   stacked phone layout made the problem tiny there (Multiplication Lab, 2026-10-21). */

/* ---------- Laptops, short smartboards and iPads sideways ----------
   Side-by-side screens that aren't very tall: tighten everything so the work
   (left) and the number pad, lesson buttons and choices (right) all fit with
   no scrolling. Tall screens (big smartboards, iPads upright) keep full sizes. */
@media (min-width: 760px) and (min-height: 480px) and (max-height: 860px) {
  .topbar {
    padding: 6px 20px;
  }
  .master-logo {
    width: 34px;
    height: 34px;
  }
  .site-footer {
    padding: 2px 20px 4px;
    font-size: 0.7rem;
  }
  .site-footer .credits {
    display: inline;
    margin-left: 6px;
  }
  .site-footer p {
    display: inline;
  }
  .layout {
    padding-top: 10px;
    padding-bottom: 8px;
    gap: 12px;
  }
  .side-panel {
    gap: 8px;
  }
  .panel-card {
    padding: 10px 12px;
    gap: 8px;
  }
  .mode-tab {
    min-height: 40px;
    padding: 6px 12px;
  }
  /* choice labels sit beside their buttons */
  .level-wrap {
    display: grid;
    grid-template-columns: 4.4rem minmax(0, 1fr);
    align-items: center;
    gap: 6px;
  }
  .level-title {
    margin: 0;
  }
  .choice-btn {
    min-height: 36px;
    padding: 4px;
  }
  .key-btn {
    min-height: clamp(38px, 6.4vh, 54px);
    font-size: 1.4rem;
  }
  .key-btn.check-key {
    font-size: 1rem;
  }
  .practice-actions {
    gap: 4px;
  }
  .primary {
    min-height: 44px;
    padding: 8px 20px;
  }
  .text-link-btn {
    padding: 2px;
    font-size: 0.85rem;
  }
  .score-line {
    font-size: 0.8rem;
  }
  .skal-tip {
    font-size: 0.75rem;
  }
  .teach-caption {
    font-size: 0.98rem;
    line-height: 1.4;
  }
  .ghost,
  .speak-btn {
    min-height: 44px;
    padding: 8px 14px;
  }
  /* left side */
  .board-panel {
    padding: 10px 12px;
    gap: 6px;
  }
  .think-line {
    height: auto;
    min-height: 2.6rem;
    font-size: 1.05rem;
  }
  .feedback {
    min-height: 2.8rem;
    font-size: 0.98rem;
  }
  .answer-text {
    font-size: 1.4rem;
  }
  .ans-box {
    height: 46px;
  }
  .answer-btn {
    min-height: 46px;
    font-size: 1.1rem;
  }
  .answer-btn.multi-btn {
    min-height: 40px;
    padding-top: 4px;
    padding-bottom: 4px;
  }
  .choice-answers {
    gap: 6px;
  }
  .story-card {
    padding: 10px 14px;
    gap: 8px;
  }
  .story {
    font-size: 1.15rem;
    line-height: 1.45;
  }
  .price-tag {
    font-size: 0.85rem;
    padding: 2px 10px 2px 6px;
  }
  .helper-btn {
    min-height: 38px;
    padding: 4px 14px;
  }
  .build-host {
    min-height: 0;
  }
  .mat {
    min-height: 90px;
  }
  .mat-tool {
    min-height: 34px;
    padding: 4px 12px;
  }
  .tray {
    padding: 6px;
    gap: 6px 14px;
  }
  .tray-name {
    font-size: 0.7rem;
  }
}

/* Short laptop screens: a little tighter still */
@media (min-width: 760px) and (min-height: 480px) and (max-height: 700px) {
  .topbar p {
    display: none;
  }
  .teach-dots {
    gap: 6px;
  }
  .teach-dot {
    width: 11px;
    height: 11px;
  }
  .story {
    font-size: 1.05rem;
  }
  .lesson-coins figcaption,
  .money-item figcaption {
    font-size: 0.8rem;
  }
}

@media (min-width: 760px) and (min-height: 480px) and (max-height: 860px) {
  /* select-all choices side by side, so the list isn't so tall */
  .choice-answers.multi {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 640px;
  }
}

@media (min-width: 760px) and (min-height: 480px) and (max-height: 700px) {
  .mat {
    min-height: 64px;
  }
  .tray {
    padding: 4px;
  }
  .money-board.word.with-mat .story {
    font-size: 1rem;
  }
  .money-board.word.with-mat .story-card {
    padding: 8px 12px;
  }
}

@media (min-width: 760px) and (min-height: 480px) and (max-height: 700px) {
  .story {
    font-size: 0.98rem;
  }
  .think-line {
    font-size: 0.98rem;
    min-height: 2.2rem;
  }
  .helper-btn {
    min-height: 34px;
    font-size: 0.85rem;
  }
}

@media (min-width: 760px) and (min-height: 480px) and (max-height: 700px) {
  .money-board.word.with-mat .mat {
    min-height: 64px;
  }
}

/* dollars and cents lined up by the decimal point (lessons) */
.dec-stack {
  display: inline-flex;
  flex-direction: column;
  align-items: stretch;
  margin: 0 auto;
  font-size: 2.2rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  line-height: 1.25;
}

.dec-row {
  display: flex;
  justify-content: space-between;
  gap: 18px;
}

.dec-op {
  color: var(--blue);
  min-width: 1ch;
}

.dec-rule {
  border-top: 3px solid var(--text);
  margin: 4px 0;
}

.dec-answer .dec-num {
  color: var(--success);
}

/* the board on a lesson's last step */
.lesson-done {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
}

.lesson-done-icon {
  font-size: 4rem;
  line-height: 1;
}

.lesson-done p {
  font-size: 1.5rem;
  font-weight: 800;
}

.lesson-done .lesson-done-example {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--muted);
}

/* Very short side-by-side screens (smart boards zoomed in): tighter still */
@media (min-width: 760px) and (min-height: 480px) and (max-height: 620px) {
  .topbar {
    padding: 4px 20px;
  }
  .master-logo {
    width: 30px;
    height: 30px;
  }
  .topbar h1 {
    font-size: 1.1rem;
  }
  .mute-btn {
    width: 34px;
    height: 34px;
    font-size: 1rem;
  }
  .site-footer {
    font-size: 0.62rem;
    padding: 0 20px 2px;
  }
  .layout {
    padding: 6px 16px 4px;
    gap: 10px;
  }
  .side-panel {
    gap: 6px;
  }
  .mode-tab {
    min-height: 34px;
    padding: 4px 10px;
    font-size: 0.95rem;
  }
  .panel-card {
    padding: 8px 10px;
    gap: 6px;
  }
  .choice-btn {
    min-height: 30px;
    font-size: 0.85rem;
  }
  .key-btn {
    min-height: 34px;
    font-size: 1.2rem;
  }
  .ghost,
  .speak-btn,
  .primary {
    min-height: 38px;
    padding: 6px 12px;
  }
  .teach-caption {
    font-size: 0.9rem;
    line-height: 1.35;
  }
  .back-btn.small {
    min-height: 30px;
    font-size: 0.8rem;
  }
  .read-btn {
    min-height: 32px;
    padding: 2px 12px;
  }
  .board-panel {
    padding: 8px 10px;
  }
  .think-line {
    min-height: 1.8rem;
    font-size: 0.92rem;
  }
  .feedback {
    min-height: 2.2rem;
    font-size: 0.9rem;
    padding: 4px 10px;
  }
  .answer-text {
    font-size: 1.25rem;
  }
  .ans-box {
    height: 40px;
  }
  .answer-btn {
    min-height: 40px;
    font-size: 1rem;
  }
  .answer-btn.multi-btn {
    min-height: 34px;
    font-size: 0.9rem;
  }
  .story {
    font-size: 0.92rem;
    line-height: 1.35;
  }
  .story-card {
    padding: 6px 10px;
    gap: 6px;
  }
  .helper-btn {
    min-height: 30px;
    font-size: 0.8rem;
  }
  .step-list {
    font-size: 0.9rem;
    gap: 4px;
  }
  .skal-tip {
    font-size: 0.7rem;
  }
  .score-line {
    font-size: 0.75rem;
  }
  .money-board.word.with-mat .mat {
    min-height: 50px;
  }
}

@media (min-width: 760px) and (min-height: 480px) and (max-height: 620px) {
  .mat-wrap {
    gap: 4px;
  }
  .mat-tool {
    min-height: 28px;
    padding: 2px 10px;
    font-size: 0.8rem;
  }
  .mat-total {
    font-size: 0.9rem;
    padding: 2px 10px;
  }
  .tray {
    padding: 2px 6px;
    gap: 2px 12px;
  }
  .tray-name {
    font-size: 0.65rem;
  }
  .money-board.word {
    gap: 6px;
  }
}

/* ---------- Big screens (smart boards, big monitors) ----------
   Use the whole width and make everything bigger, so the class can read it
   from across the room. The page's text size grows with the screen height,
   and coins, bills and the money mat grow with it (uiScale in money.js).
   Bills still never go past 400px wide. */
@media (min-width: 1500px) and (min-height: 800px) {
  html {
    font-size: clamp(16px, 1.9vh, 26px);
  }
  .layout {
    max-width: none;
    padding: 1rem 2rem 0.75rem;
    gap: 1.5rem;
    grid-template-columns: minmax(0, 1fr) clamp(340px, 25vw, 560px);
  }
  .topbar {
    padding: 0.5rem 2rem;
  }
  .master-logo,
  .mute-btn {
    width: 2.8rem;
    height: 2.8rem;
  }
  .key-btn {
    min-height: 4rem;
    font-size: 2rem;
    border-radius: 1rem;
  }
  .key-btn.check-key {
    font-size: 1.3rem;
  }
  .choice-btn,
  .mode-tab,
  .ghost,
  .speak-btn,
  .primary,
  .answer-btn,
  .back-btn,
  .read-btn,
  .helper-btn,
  .mat-tool {
    min-height: 2.9rem;
  }
  .ans-box {
    height: 3.6rem;
  }
  .story-card {
    max-width: 48rem;
  }
  .choice-answers {
    max-width: 42rem;
  }
  .choice-answers.multi,
  .choice-answers.pick {
    max-width: 44rem;
  }
  .mat {
    min-height: 10rem;
  }
  .count-bubble {
    font-size: 1.1rem;
  }
}

@media (min-width: 1500px) and (min-height: 800px) {
  .story {
    font-size: 1.6rem;
  }
  .price-tag {
    font-size: 1.1rem;
  }
  .think-line {
    font-size: 1.4rem;
  }
  .answer-text {
    font-size: 2.1rem;
  }
  .feedback {
    font-size: 1.25rem;
  }
  .teach-caption {
    font-size: 1.2rem;
  }
  .answer-btn {
    font-size: 1.35rem;
  }
}

/* Side-by-side screens: the white work area always uses the full width (no
   cream margins), so the money and stories can be as big as possible. */
@media (min-width: 760px) and (min-height: 480px) {
  .layout {
    max-width: none;
  }
}

@media (min-width: 1500px) and (min-height: 800px) {
  /* choice labels beside their buttons, and number pad keys sized to the
     screen's height, so the right side never needs scrolling */
  .level-wrap {
    display: grid;
    grid-template-columns: 6rem minmax(0, 1fr);
    align-items: center;
    gap: 0.5rem;
  }
  .level-title {
    margin: 0;
  }
  .key-btn {
    min-height: clamp(2.8rem, 6.2vh, 4rem);
  }
}

/* Phones turned sideways: the Use Money pop-up has to fit in ~360px of height */
@media (max-height: 479px) {
  .mat-modal {
    padding: 4px;
  }
  .mat-sheet {
    padding: 6px 8px;
    gap: 4px;
  }
  .mat-sheet-head p {
    font-size: 0.8rem;
    line-height: 1.3;
    max-height: 3.9em;
    overflow-y: auto;
  }
  .mat-done {
    min-height: 34px;
    padding: 4px 14px;
    font-size: 0.9rem;
  }
  .mat-modal-host .mat {
    min-height: 60px;
  }
  .mat-tool {
    min-height: 28px;
    padding: 2px 10px;
    font-size: 0.8rem;
  }
  .tray {
    padding: 2px 6px;
  }
  .tray-name {
    font-size: 0.65rem;
  }
}