/* Match Long Multiplication's shell, paper canvas, answer panel, and controls. */
:root {
  font-family: ui-rounded, 'Arial Rounded MT Bold', system-ui, sans-serif;
  color: #171821;
  background: #d5ddd2;
  font-synthesis: none;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  min-height: 100svh;
  background:
    radial-gradient(circle at 96% 6%, #c7c9da 0 110px, transparent 112px),
    radial-gradient(circle at 2% 85%, #c2d4a8 0 90px, transparent 92px);
}
header {
  min-height: 70px;
  background: #fffdf8;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 4%;
  border-bottom: 3px solid #e7e2d5;
}
a { color: inherit; font-weight: 750; text-underline-offset: 4px; }
.brand { text-decoration: none; display: flex; align-items: center; gap: 9px; }
.brand span { background: #cafa70; border-radius: 8px; padding: 2px 10px; font-size: 24px; transform: rotate(-5deg); }
main { max-width: 1180px; margin: 36px auto; padding: 0 24px 32px; }
h1 { font-size: clamp(2.6rem, 4.5vw, 4.2rem); line-height: 1.1; letter-spacing: -.035em; margin: 12px 0 24px; }
h2 { font-size: 1.7rem; line-height: 1.25; margin: 8px 0 22px; }
p { line-height: 1.6; }
.eyebrow { text-transform: uppercase; font-size: .76rem; font-weight: 850; letter-spacing: .12em; color: #4852cf; }
button {
  min-height: 48px;
  border: 2px solid #777aa1;
  border-radius: 13px;
  padding: 12px 20px;
  background: #30314f;
  color: white;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 4px 0 #11121e;
}
button:hover:not(:disabled) { border-color: #cafa70; background: #414465; }
button:disabled { opacity: .5; cursor: default; }
button:focus-visible, a:focus-visible { outline: 3px solid #5c66e8; outline-offset: 5px; }
.answer-panel button:focus-visible, .setup-card button:focus-visible, .division-feedback button:focus-visible { outline-color: #cafa70; }
.primary { background: #cafa70; color: #171821; border-color: #cafa70; box-shadow: 0 4px 0 #8fa947; }
.primary:hover:not(:disabled) { background: #d8f99f; }
.setup-card, .finish-card { padding: 32px; background: #20213b; border: 2px solid #34365c; box-shadow: 0 8px 0 #11121e; border-radius: 26px; color: #fffdf8; max-width: 840px; }
.setup-card p, .finish-card p { color: #d9daec; }
#intro { min-height: calc(100svh - 174px); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
#intro > h1 { margin: 0 0 42px; font-size: clamp(2.5rem, 4.2vw, 4rem); font-weight: 800; letter-spacing: -.01em; }
#intro .setup-card { width: min(700px, 100%); padding: clamp(26px, 5vw, 48px); border-radius: 28px; box-shadow: 0 9px 0 #11121e, 0 25px 55px rgb(23 24 33 / 20%); }
#intro .example { color: #d9daec; font-size: 28px; font-weight: 800; margin-bottom: 24px; }
#intro .example span { color: #cafa70; }
#intro h2 { font-size: 24px; margin: 0 0 48px; }
.setup-actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 14px; }
.setup-back { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 11px 18px; border: 2px solid #171821; border-radius: 13px; background: #fffdf8; color: #171821; box-shadow: 0 4px 0 #fffdf8; text-decoration: none; }
#intro #start { border: 0; border-radius: 999px; padding: 11px 22px; box-shadow: 0 5px 0 #8fa947; }
#account-status { font-size: .8rem; margin-bottom: 0; }
#account-status:empty { display: none; }
#play { min-height: calc(100svh - 174px); display: flex; align-items: center; }
.division-board { width: 100%; max-width: 1080px; margin: auto; padding: 24px; border: 2px solid #48496e; border-radius: 28px; background: #22233b; box-shadow: 0 9px 0 #11121e; color: #f7f4ed; }
.division-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 22px; }
.division-heading h1 { font-size: 32px; margin: 0; color: #cafa70; }
.stat-chip { display: flex; align-items: center; gap: 16px; padding: 12px 18px; background: #32334f; border-radius: 18px; }
.stat-chip span { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: #e4e5f4; }
.stat-chip strong { font-size: 30px; font-variant-numeric: tabular-nums; line-height: 1; white-space: nowrap; }
.division-layout { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 22px; }
.paper {
  --paper-fill: #f7f4ed;
  --paper-grid: #ddd9ce;
  --paper-ink: #22233b;
  --box-fill: #f0ede5;
  --box-border: #d8d4c8;
  position: relative;
  min-width: 0;
  container-type: inline-size;
  min-height: 420px;
  padding: 24px 14px 76px;
  display: grid;
  place-items: center;
  overflow-x: auto;
  border: 2px solid #c3c9b7;
  border-radius: 22px;
  box-shadow: 0 5px 0 #526b53;
  background-color: var(--paper-fill);
  background-image: linear-gradient(to right, var(--paper-grid) 1px, transparent 1px), linear-gradient(to bottom, var(--paper-grid) 1px, transparent 1px);
  background-size: var(--cell, 44px) var(--cell, 44px);
  color: var(--paper-ink);
}
.paper.dark-canvas { --paper-fill: #191c2e; --paper-grid: #30354b; --paper-ink: #f7f4ed; --box-fill: #272c43; --box-border: #535b76; border-color: #575e7a; box-shadow: 0 5px 0 #111421; }
.paper { --cell: 44px; }
.working {
  --cell: clamp(24px, 9cqw, 44px);
  --row-gap: 12px;
  width: calc(5.8em + var(--row-gap) + var(--columns, 5) * var(--cell));
  justify-self: start;
  margin-inline: auto;
  font-size: clamp(18px, 6cqw, 28px);
}
.row { display: grid; grid-template-columns: 5.8em 1fr; gap: var(--row-gap); align-items: center; margin-bottom: var(--cell); }
.row:last-child { margin-bottom: 0; }
.row-label { display: block; font-size: inherit; font-weight: 800; letter-spacing: .03em; line-height: 1.3; margin-bottom: 0; }
.equation { display: flex; align-items: center; gap: 0; min-height: var(--cell); font-size: inherit; font-weight: 800; font-variant-numeric: proportional-nums; }
.equation > span, .slot { display: flex; width: calc(var(--digits, 1) * var(--cell)); flex: 0 0 calc(var(--digits, 1) * var(--cell)); height: var(--cell); }
.digit { display: grid; place-items: center; width: var(--cell); height: var(--cell); flex: 0 0 var(--cell); }
.slot { min-height: var(--cell); padding: 0; font-size: inherit; border: 0; border-radius: 0; background: var(--box-fill); color: var(--paper-ink); box-shadow: inset 0 0 0 1px var(--box-border); }
.slot .digit, .unknown .digit { box-shadow: inset -1px 0 0 var(--box-border); }
.slot.active { background: #cafa70; color: #22233b; box-shadow: inset 0 0 0 2px #7b9945, 0 0 0 3px #cafa7040; }
.slot.active .digit { box-shadow: inset -1px 0 0 #7b9945; }
.slot.done { background: transparent; box-shadow: none; }
.slot.done .digit { box-shadow: none; }
.slot:focus { outline: none; }
.equation > .unknown { background: var(--box-fill); border: 0; box-shadow: inset 0 0 0 2px var(--paper-ink); }
.equation > .unknown.revealed { background: #cafa70; box-shadow: inset 0 0 0 2px #7b9945; color: #171821; }
#canvas-theme { position: absolute; right: 14px; bottom: 14px; display: flex; align-items: center; gap: 12px; padding: 9px 14px; min-height: 44px; background: var(--paper-fill); color: var(--paper-ink); border: 2px solid var(--box-border); border-radius: 24px; box-shadow: none; font-size: 14px; }
.theme-track { display: block; width: 38px; height: 22px; border-radius: 14px; background: #a5a8b3; padding: 3px; }
.theme-track::after { content: ''; display: block; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .15s; }
#canvas-theme[aria-checked=true] .theme-track { background: #cafa70; }
#canvas-theme[aria-checked=true] .theme-track::after { transform: translateX(16px); background: #22233b; }
.answer-panel { background: #32334f; border-radius: 22px; padding: 24px; display: flex; flex-direction: column; justify-content: flex-start; gap: 20px; }
.answer-panel h2 { font-size: 14px; color: #eeeef7; text-align: center; margin: 0; letter-spacing: .06em; text-transform: uppercase; }
.tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.tile { min-width: 0; min-height: 54px; padding: 8px; background: #5c66e8; border: 2px solid #8289ec; box-shadow: 0 5px 0 #262b76; color: white; font-size: 24px; border-radius: 14px; touch-action: manipulation; }
.tile.hint-flash { animation: correct-choice-flash 1.8s ease-in-out infinite; }
@keyframes correct-choice-flash {
  0%, 100% { background-color: #5c66e8; border-color: #8289ec; color: white; }
  50% { background-color: #cafa70; border-color: #cafa70; color: #171821; }
}
.division-feedback { margin-top: 22px; padding: 16px 22px; background: #32334f; border-radius: 20px; display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 80px; }
#feedback { margin: 0; font-size: 20px; color: #f6dc7d; font-weight: 800; }
#feedback.success { color: #cafa70; }
.actions { display: flex; gap: 12px; flex-shrink: 0; }
.result-stats { display: grid; gap: 18px; margin: 24px 0; }
.result-stats > div { display: flex; flex-direction: column; gap: 8px; padding: 20px; border-radius: 16px; background: #32334f; }
.result-stats strong { font-size: 2.5rem; color: #cafa70; font-variant-numeric: tabular-nums; }
.result-stats span { color: #d9daec; }
.home { display: block; margin-top: 24px; }
[hidden] { display: none !important; }
@media (max-width: 759px) {
  header { padding: 12px 16px; font-size: .8rem; }
  .brand { gap: 5px; }
  .brand span { font-size: 18px; padding: 2px 7px; }
  main { margin-top: 24px; padding-inline: 16px; }
  #play { min-height: 0; }
  #intro { min-height: 0; }
  #intro > h1 { margin-bottom: 28px; }
  #intro .setup-card { padding: 24px 18px; }
  .finish-card { padding: 24px; }
}
@media (max-width: 759px) {
  .division-board { padding: 14px; }
  .division-heading { flex-wrap: wrap; gap: 10px; }
  .division-heading h1 { order: -1; width: 100%; font-size: 28px; text-align: center; }
  .stat-chip { padding: 10px; gap: 12px; }
  .stat-chip span { font-size: 10px; }
  .stat-chip strong { font-size: 24px; }
  .division-layout { grid-template-columns: 1fr; gap: 14px; }
  .paper { min-height: 320px; padding: 20px 6px 76px; }
  .answer-panel { padding: 16px; gap: 12px; }
  .tiles { max-width: 280px; width: 100%; margin: auto; }
  .division-feedback { flex-direction: column; align-items: stretch; padding: 16px; }
  #feedback { font-size: 17px; }
  #feedback:empty { display: none; }
  .actions { flex-wrap: wrap; }
  .actions button { flex: 1; padding-inline: 12px; }
}
/* Scale to the actual paper width, including intermediate desktop widths. */
@container (max-width: 410px) {
  .working { --cell: 20px; --row-gap: 6px; font-size: 16px; margin-inline: 0; }
}
@media (min-width: 760px) and (max-width: 900px) {
  .division-heading { flex-wrap: wrap; }
  .division-heading h1 { order: -1; width: 100%; text-align: center; }
}
@media (max-width: 420px) {
  .paper { padding-inline: 2px; }
  .result-stats > div { padding: 14px; }
}
@media (max-width: 350px) {
  header { gap: 6px; padding-inline: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .theme-track::after { transition: none; }
  .tile.hint-flash { animation: none; background: #cafa70; border-color: #cafa70; color: #171821; }
}

/* Pace and completion screens follow Long Multiplication. */
.mode-options { display:flex; gap:12px; margin-bottom:28px; }
.mode-options button { flex:1; padding:14px 12px; }
.mode-options button[aria-pressed="true"], #durations button[aria-pressed="true"] { background:#cafa70; border-color:#cafa70; color:#171821; }
.duration-setting { display:flex; flex-direction:column; align-items:center; gap:18px; margin-bottom:28px; }
.duration-setting > span { text-transform:uppercase; font-size:14px; font-weight:800; letter-spacing:.04em; color:#d9daec; }
#durations { display:flex; flex-wrap:wrap; justify-content:center; gap:16px; }
#durations button { width:64px; min-height:64px; padding:0; border-radius:50%; background:rgb(240 240 255 / 14%); font-size:1.35rem; box-shadow:none; }
#durations button[aria-pressed="true"] { box-shadow:0 5px 0 #8fa947; }
#finish-title { margin:0; color:#cafa70; font-size:clamp(2rem,4.5vw,3.5rem); line-height:1.15; }
.completion-actions { display:flex; flex-wrap:wrap; align-items:center; gap:24px; margin-top:32px; }
.completion-actions .home { margin:0; }
#save-status:empty { display:none; }

/* Level cards use Long Multiplication's configuration selection pattern. */
#selection { width: min(1100px, 100%); margin: auto; }
#selection h1 { font-size: clamp(36px, 5vw, 64px); margin: 0 0 32px; }
.level-games { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; padding: 26px; border: 2px solid #48496e; border-radius: 28px; background: #22233b; box-shadow: 0 9px 0 #11121e; }
.level-game { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; min-height: 145px; padding: 22px; border: 2px solid #777aa1; border-radius: 22px; background: #32334f; color: #f7f4ed; text-align: left; box-shadow: 0 6px 0 #11121e; }
.level-game strong { font-size: clamp(20px, 2.1vw, 28px); line-height: 1.2; }
.level-meta { display: flex; width: 100%; align-items: flex-start; justify-content: space-between; gap: 10px; }
.level-badge, .level-example { display: inline-flex; align-items: center; min-height: 36px; padding: 7px 12px; border-radius: 999px; font-size: 15px; font-weight: 800; line-height: 1.2; }
.level-badge { flex-shrink: 0; background: #cafa70; color: #171821; }
.level-example { max-width: 70%; background: #444663; color: #f7f4ed; text-align: right; }
.level-game:focus-visible { outline-color: #cafa70; }
#intro #selected-level { margin: 0 0 14px; }
.setup-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
#choose-level { min-height: 50px; padding: 11px 18px; border: 2px solid #171821; border-radius: 13px; background: #fffdf8; box-shadow: 0 4px 0 #d6d3ca; color: #171821; }
#choose-level:hover { background: #e9efdc; }
.slot.given { background: transparent; box-shadow: none; }
#play-title { font-size: clamp(24px, 2.4vw, 32px); text-align: center; }
@media (max-width: 759px) {
  .level-games { grid-template-columns: 1fr; padding: 18px; }
  .level-game { min-height: 135px; gap: 14px; }
  #selection h1 { font-size: 36px; }
}
@media (max-width: 420px) {
  .level-games { padding: 14px; gap: 14px; }
  .level-game { padding: 18px; }
  .level-badge, .level-example { font-size: 13px; padding-inline: 10px; }
}

.working.plain-variables .unknown { background: transparent; box-shadow: none; }
.working.plain-variables .unknown .digit { box-shadow: none; }
.working.plain-variables .unknown.revealed { background: #cafa70; color: #171821; }