body[data-tablas] .learning-header .header-brand { flex: 1; }
body[data-tablas] .learning-header .header-controls { flex: 0 0 auto; width: auto; }

.tables-page {
  --tables-ink: #263a35;
  --tables-mint: #aee7cc;
  width: min(100%, calc(860px * var(--play-scale, 1)));
  margin: 0 auto 18px;
}
.tables-head, .tables-sheet-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 12px;
}
.tables-head h2 { font-size: clamp(22px, 4.5vw, 37px); line-height: 1.15; }
.tables-eyebrow { color: var(--tables-mint); font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.tables-controls { display: flex; flex-wrap: wrap; gap: 7px; }
.tables-controls label { display: grid; gap: 3px; color: var(--muted); font-size: 12px; font-weight: 700; }
.tables-controls select { min-height: 44px; }
.tables-sheet {
  padding: clamp(9px, 2vw, 21px);
  border: 1px solid #dac69f;
  border-radius: 20px;
  color: var(--tables-ink);
  background: linear-gradient(150deg, #fff6dc, #e5efd3);
}
.tables-sheet-head h3 { font-size: clamp(21px, 4vw, 30px); line-height: 1.15; }
.tables-sheet-head p { margin-top: 3px; font-size: 14px; line-height: 1.35; }
.tables-progress { display: grid; gap: 3px; min-width: 106px; font-size: 13px; font-weight: 800; color: #205c47; }
.tables-progress progress { width: 100%; height: 9px; accent-color: #377d60; }
.tables-board {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(5px, 1.1vw, 10px);
  padding: 0;
  list-style: none;
}
.tables-board li {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 5px;
  min-width: 0;
  min-height: 54px;
  padding: 4px;
  border: 2px solid #d4ccb0;
  border-radius: 13px;
  background: #fffcf0;
}
.tables-equation, .tables-answer, .tables-board input {
  font: inherit;
  font-size: clamp(16px, 3.9vw, 23px);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.tables-board input, .tables-answer {
  width: clamp(44px, 12vw, 55px);
  height: 44px;
  padding: 0;
  border: 2px solid #738b84;
  border-radius: 9px;
  background: #f6fbf5;
  color: #163e34;
  text-align: center;
}
.tables-answer { display: grid; place-items: center; }
.tables-board input::placeholder { text-align: center; color: #61756c; opacity: 1; }
.tables-board input:focus-visible { outline: 3px solid #27775c; outline-offset: 2px; }
.tables-answer, .tables-board [data-state="correct"] input { background: #dff1d9; border-color: #51856d; }
.tables-board [data-state="correct"] { border-color: #72a483; }
.tables-board [data-state="wrong"], .tables-board [data-state="wrong"] input { border-color: #ad5642; }
.tables-board [data-state="wrong"] input { background: #fff0df; }
.tables-mark:not(:empty) {
  position: absolute;
  inset: -3px 0 auto auto;
  display: grid;
  place-items: center;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: #2c6d53;
  color: #fff;
  font-size: 11px;
  font-weight: 900;
  pointer-events: none;
}
.tables-board [data-state="wrong"] .tables-mark { background: #a24838; }
.tables-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 11px; }
.tables-actions .btn { min-height: 44px; padding-inline: 9px; -webkit-tap-highlight-color: transparent; }
.tables-actions .accent { background: #256e53; color: #fff; }
.tables-feedback { font-size: 14px; font-weight: 700; line-height: 1.4; }
.tables-feedback:not(:empty) { margin-top: 9px; }
.tables-feedback[data-kind="review"] { color: #923a2e; }
.tables-feedback[data-kind="success"] { color: #1d5e42; }
.tables-complete li { animation: tables-celebrate .35s ease-out both; }
@keyframes tables-celebrate { 50% { transform: translateY(-3px); } }
@media (min-width: 870px) {
  .tables-board { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .tables-board li { min-height: 65px; }
}
@media (prefers-reduced-motion: reduce) {
  .tables-complete li { animation: none; }
}