/* melody.games · 加减法练习 — column-form practice layout.
   Tokens + reset + header/brand live in packages/brand/. */

/* Fix #2: one variable owns the body's bottom reserve for the keypad dock —
   no scattered magic numbers; breakpoints retune the variable only. */
:root {
  --dock-h: 216px;
  --op-col-w: 42px;
}

body {
  overflow-x: hidden;
  /* Fix #6: no double-tap-zoom delay on the keypad, no rubber-band pull. */
  touch-action: manipulation;
  overscroll-behavior-y: contain;
  padding-bottom: calc(var(--dock-h) + env(safe-area-inset-bottom, 0px));
}

.app-shell {
  position: relative;
  z-index: 5;
  width: min(1080px, calc(100% - 24px));
  margin: 0 auto;
  padding-top: 10px;
}

/* ====== Nav: two views + one print action ====== */
.app-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 10px;
}
.nav-tabs { display: flex; gap: 8px; }

.nav-btn {
  min-height: 38px;
  padding: 6px 20px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: var(--paper-card);
  color: var(--ink-2);
  font-family: var(--font-cn);
  font-size: 14px;
  letter-spacing: 2px;
  cursor: pointer;
  transition: transform .12s, box-shadow .12s, background .12s, color .12s;
}
.nav-btn.is-active {
  background: var(--ink);
  color: var(--paper-card);
}
.nav-btn:hover { transform: translateY(-1px); box-shadow: 0 3px 0 rgba(42,53,84,.18); }
.nav-print { background: var(--butter); color: var(--ink); border-color: var(--brown); }

/* ====== Selectors: op + difficulty row, range row ====== */
.selector-strip {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
.selector-row {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: center;
  gap: 8px;
}

.seg {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  border: 1.5px solid rgba(42,53,84,.16);
  border-radius: 12px;
  background: rgba(255,250,240,.58);
}

.seg-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  min-height: 34px;
  padding: 4px 14px;
  border: none;
  border-radius: 9px;
  background: transparent;
  color: var(--ink-2);
  font-family: var(--font-cn);
  font-size: 14px;
  letter-spacing: 1px;
  cursor: pointer;
  transition: background .12s, color .12s, transform .12s;
}
.seg-btn:hover { background: rgba(42,53,84,.07); }
.seg-btn.is-active {
  background: var(--ink);
  color: var(--paper-card);
}
.seg-btn .glyph {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 800;
  line-height: 1.15;
}
.seg-btn .word {
  font-size: 11px;
  line-height: 1.2;
  letter-spacing: 2px;
}

/* ====== Score strip ====== */
.score-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.restart-btn {
  flex-shrink: 0;
  width: var(--tap);
  height: var(--tap);
  font-size: 18px;
}

.progress-dots {
  display: grid;
  grid-template-columns: repeat(10, minmax(10px, 1fr));
  gap: 5px;
  flex: 1;
}
.progress-dot {
  height: 9px;
  border-radius: 999px;
  background: rgba(42,53,84,.12);
  border: 1px solid rgba(42,53,84,.16);
}
.progress-dot.done { background: var(--sage); border-color: var(--sage); }
.progress-dot.active { background: var(--butter); border-color: var(--brown); }

.stats span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 28px;
  padding: 3px 10px;
  border: 1.5px solid rgba(42,53,84,.18);
  border-radius: 999px;
  background: rgba(255,250,240,.58);
  color: var(--ink-2);
  font-family: var(--font-cn);
  font-size: 13px;
  letter-spacing: 1px;
}
.stats b { color: var(--ink); font-family: var(--font-body); font-weight: 800; }

/* ====== Practice grid: card above keypad (mobile), side by side >= 720px ====== */
.practice-grid {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Fix #5: the result panel swaps in where the equation card was — the stage
   owns both, one hidden at a time, so nothing is appended below. */
.stage {
  display: flex;
  flex-direction: column;
}

.equation-card,
.result-panel {
  background: var(--paper-card);
  border: 2px solid var(--ink);
  border-radius: 8px;
  box-shadow: 0 5px 0 rgba(42,53,84,.16);
}

.equation-card {
  padding: 10px 14px 12px;
  container-type: inline-size;
}

/* Fix #7: dynamic 1–5 digit columns. --cols is set per problem by app.js;
   digits scale with the card (cqi) and the column count. */
.column-grid {
  display: grid;
  grid-template-columns: var(--op-col-w) repeat(var(--cols, 3), minmax(0, 1fr));
  gap: 6px 8px;
  align-items: stretch;
}

.row { display: contents; }

.labels .label {
  align-self: end;
  color: var(--muted);
  font-family: var(--font-cn);
  font-size: 12px;
  letter-spacing: 2px;
  text-align: center;
  padding-bottom: 2px;
}

.number-line .cell,
.answer-line .cell {
  height: 58px;
}

.cell {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid rgba(42,53,84,.16);
  border-radius: 8px;
  background: var(--paper);
}
.cell .digit {
  color: var(--ink);
  font-family: var(--font-display);
  font-size: clamp(1.7rem, calc(44cqi / var(--cols, 3)), 3.4rem);
  font-weight: 800;
  line-height: 1;
}
/* Hidden high-order blanks: the cell keeps its grid track but vanishes. */
.cell.void { border-color: transparent; background: transparent; }

.operator {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--coral);
  font-family: var(--font-display);
  font-size: 2.3rem;
  font-weight: 800;
  line-height: 1;
}

/* Fix #3: the answer rule is a grid member spanning exactly the digit
   columns (operator column excluded) — no margin-left hardcoding. */
.rule {
  grid-column: 2 / -1;
  height: 4px;
  margin: 4px 0 8px;
  border-radius: 999px;
  background: var(--ink);
}

.answer-line { position: relative; }

.cell.answer-slot { background: #f6ecd4; border-color: var(--brown); }
.cell.answer-slot .digit { color: var(--blue); }
.cell.answer-slot.empty .digit::before {
  content: "";
  display: block;
  width: 34%;
  height: 3px;
  border-radius: 999px;
  background: rgba(42,53,84,.22);
}
.cell.answer-slot.active {
  background: #fff4c9;
  border-color: var(--butter);
  box-shadow: 0 0 0 4px rgba(201,166,74,.24);
}
.answer-line.correct .cell.answer-slot {
  background: #e5efd8;
  border-color: var(--sage);
  box-shadow: none;
}
.answer-line.correct .cell.answer-slot .digit { color: var(--sage); }
.answer-line.wrong .cell.answer-slot {
  background: #f8ddd1;
  border-color: var(--coral);
  animation: nudge .28s ease-in-out;
}
.answer-line.wrong .cell.answer-slot .digit { color: var(--coral); }

@keyframes nudge {
  0%, 100% { transform: translateX(0); }
  30% { transform: translateX(-5px); }
  70% { transform: translateX(5px); }
}

.status {
  min-height: 24px;
  margin-top: 8px;
  text-align: center;
  color: var(--ink-2);
  font-family: var(--font-cn);
  font-size: 15px;
  letter-spacing: 2px;
}
.status.good { color: var(--sage); font-weight: 700; }
.status.bad { color: var(--coral); font-weight: 700; }

/* ====== Result panel (in-place swap) ====== */
.result-panel {
  flex: 1;
  padding: 24px;
  text-align: center;
}
.result-panel h2 {
  font-family: var(--font-cn);
  font-size: 32px;
  letter-spacing: 4px;
}
.result-panel p {
  margin: 12px 0 18px;
  color: var(--sage);
  font-family: var(--font-display);
  font-size: 48px;
  line-height: 1;
}
.result-panel .next-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 8px 28px;
  color: var(--paper-card);
  background: var(--ink);
  border: 2px solid var(--ink);
  border-radius: 8px;
  font-family: var(--font-cn);
  font-size: 15px;
  letter-spacing: 1px;
  cursor: pointer;
  transition: transform .12s, box-shadow .12s;
}
.result-panel .next-btn:hover { transform: translateY(-2px); box-shadow: 0 4px 0 rgba(42,53,84,.18); }

/* ====== Keypad: fixed thumb dock on phones, plain panel column >= 720px ====== */
.keypad-dock {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 20;
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  backdrop-filter: saturate(140%) blur(10px);
  border-top: 1px solid rgba(42,53,84,.12);
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
}

.keypad {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  max-width: 440px;
  margin: 0 auto;
}

/* Fix #4: every key carries a semantic class; digit keys share one color —
   no nth-child column-color hacks. */
.key {
  border: 2px solid currentColor;
  border-radius: 8px;
  cursor: pointer;
  user-select: none;
  transition: transform .12s, box-shadow .12s, opacity .12s;
  min-height: var(--tap);
  background: var(--paper-card);
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 800;
}
.key-digit { color: var(--blue); }
.key-zero { grid-column: span 2; }
.key-erase {
  color: var(--ink-2);
  background: var(--paper-2);
}
.key-erase.is-next {
  background: var(--ink);
  color: var(--paper-card);
  border-color: var(--ink);
  font-family: var(--font-cn);
  font-size: 0.95rem;
  letter-spacing: 1px;
}
.key:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 4px 0 rgba(42,53,84,.18); }
.key:disabled { cursor: default; opacity: .45; }

/* ====== Quick tables ====== */
.table-tabs {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-bottom: 12px;
}
.table-tab {
  min-height: 38px;
  padding: 6px 22px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: var(--paper-card);
  color: var(--ink-2);
  font-family: var(--font-cn);
  font-size: 14px;
  letter-spacing: 2px;
  cursor: pointer;
  transition: background .12s, color .12s;
}
.table-tab.is-active { background: var(--ink); color: var(--paper-card); }

.table-scroll {
  overflow-x: auto;
  padding: 4px 2px 10px;
}
.fact-table {
  width: max-content;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.fact-row {
  display: flex;
  gap: 8px;
  width: max-content;
}
.fact {
  display: inline-flex;
  align-items: baseline;
  padding: 7px 13px;
  border: 1.5px solid rgba(42,53,84,.18);
  border-radius: 8px;
  background: var(--paper-card);
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  white-space: nowrap;
}
.fact b {
  margin-left: 3px;
  color: var(--blue);
  font-weight: 800;
}
.fact-row.golden .fact {
  background: #f6e7bd;
  border-color: var(--butter);
}
.fact-row.golden .fact b { color: var(--brown); }

/* ====== Confetti ====== */
.celebration-layer {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 30;
}
.confetti {
  position: absolute;
  top: -20px;
  width: 10px;
  height: 14px;
  border-radius: 2px;
  animation: fall 1.6s ease-in forwards;
}
@keyframes fall {
  to {
    transform: translate(var(--x), var(--drop)) rotate(var(--r));
    opacity: .85;
  }
}

/* ====== Tablet ====== */
@media (min-width: 560px) {
  .app-shell { width: min(600px, calc(100% - 40px)); padding-top: 18px; }
  .selector-strip { gap: 10px; margin-bottom: 12px; }
  .score-strip { gap: 16px; margin-bottom: 14px; }
  .progress-dot { height: 10px; }

  :root { --op-col-w: 56px; }
  .equation-card { padding: 16px 22px 18px; }
  .column-grid { gap: 8px 12px; }
  .labels .label { font-size: 14px; }
  .number-line .cell,
  .answer-line .cell { height: 74px; }
  .operator { font-size: 3rem; }
  .seg-btn { font-size: 15px; padding: 5px 16px; }
  .seg-btn .glyph { font-size: 21px; }
  .status { font-size: 17px; min-height: 28px; }

  .keypad { gap: 10px; }
  .key { min-height: 48px; font-size: 1.55rem; }

  .fact { font-size: 16px; padding: 8px 15px; }
}

/* ====== Phone ====== */
@media (max-width: 480px) {
  :root { --dock-h: 190px; --op-col-w: 32px; }
  .app-shell { width: calc(100% - 18px); padding-top: 8px; }
  .nav-btn { padding: 5px 14px; font-size: 13px; letter-spacing: 1px; }
  .equation-card { padding: 8px 10px 10px; }
  .column-grid { gap: 5px 6px; }
  .number-line .cell,
  .answer-line .cell { height: 52px; }
  .operator { font-size: 2rem; }
  .status { font-size: 13px; min-height: 20px; margin-top: 6px; letter-spacing: 1.5px; }
  .keypad-dock { padding: 8px 12px calc(8px + env(safe-area-inset-bottom, 0px)); }
  .keypad { gap: 6px; }
  .key { font-size: 1.3rem; }
  .fact { font-size: 13.5px; padding: 6px 10px; }
  .fact-row { gap: 6px; }
  .fact-table { gap: 6px; }
}

/* Fix #1: real two-column layout — the equation card and the keypad sit side
   by side; the keypad leaves the fixed dock and stops costing body space. */
@media (min-width: 720px) {
  :root { --dock-h: 12px; }

  .app-shell { width: min(1080px, calc(100% - 40px)); }

  .practice-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(260px, 330px);
    align-items: start;
    gap: 16px;
  }

  .keypad-dock {
    position: static;
    background: var(--paper-card);
    border: 2px solid var(--ink);
    border-radius: 8px;
    box-shadow: 0 5px 0 rgba(42,53,84,.16);
    padding: 12px;
  }
  .keypad { max-width: none; gap: 10px; }
}