/*
  Times tables layout. Every color, control and type style comes from SmileyKit (smileykit/);
  this file only places things. Rules: ~/Desktop/CODING/SmileyKit/DESIGN.md.
*/

html { -webkit-text-size-adjust: 100%; }
body { margin: 0; overscroll-behavior-y: none; }
button { -webkit-touch-callout: none; }

.screen {
  width: min(100% - 32px, 1120px);
  margin: 0 auto;
  padding: max(12px, env(safe-area-inset-top)) 0 max(28px, env(safe-area-inset-bottom));
}

.top { display: flex; align-items: center; gap: 12px; min-height: 60px; margin-bottom: 10px; }
.top .sk-title { flex: 1; min-width: 0; }

.panes { display: grid; gap: 16px; }
.side { min-width: 0; }

/* ---------- The 3D stage ---------- */

.stage-slot {
  position: relative;
  height: 230px;
  border-radius: var(--sk-radius-card);
  background: rgba(255, 255, 255, 0.5);
  border: 2px solid var(--sk-line);
  box-shadow: 0 8px 18px rgba(41, 41, 56, 0.06);
  overflow: hidden;
}
.stage { position: absolute; inset: 0; }
.stage canvas { display: block; width: 100%; height: 100%; touch-action: none; }
.stage-labels { position: absolute; inset: 0; pointer-events: none; }
.stage-anchor { position: relative; width: 0; height: 0; }
.stage-chip { position: absolute; left: 0; top: 0; transform: translateY(-50%); font-size: 14px; padding: 5px 10px; box-shadow: 0 2px 4px rgba(41, 41, 56, 0.08); }

/* Smiley Man's bubble floats at the top of the stage; his picture shows only without 3D. */
.stage-says {
  position: absolute;
  top: 10px;
  left: 12px;
  right: 12px;
  z-index: 2;
  pointer-events: none;
  align-items: flex-start;
}
.stage-says > img { display: none; width: 64px; }
.stage-says .sk-bubble { max-width: 440px; font-size: 16px; padding: 10px 14px; border-radius: 22px 22px 22px 6px; }
.stage-says.is-quiet .sk-bubble { visibility: hidden; }
.no-3d .stage-slot { height: auto; min-height: 0; padding: 12px; background: none; border: 0; box-shadow: none; }
.no-3d .stage-says { position: static; align-items: flex-end; }
.no-3d .stage-says > img { display: block; }

/* ---------- Home ---------- */

.sk-paper .sk-heading { margin-bottom: 12px; }
.tables { display: grid; grid-template-columns: repeat(auto-fill, minmax(56px, 1fr)); gap: 10px; margin-bottom: 16px; }
.tables .sk-pill { padding: 0; min-height: 56px; font-size: 20px; font-weight: 900; }
.tables [data-all] { grid-column: span 2; }
.mode { margin-bottom: 8px; }
.mode-note { margin: 0 0 14px; text-align: center; }

/* ---------- Question screen ---------- */

.dots { flex: 1; display: flex; justify-content: center; gap: 7px; margin: 0; padding: 0; list-style: none; }
.dots li { width: 14px; height: 14px; border-radius: 50%; background: var(--c-tint); border: 2px solid var(--c-stroke); }
.dots li.is-now { background: var(--c); border-color: var(--c); transform: scale(1.2); }
.dots li.is-right { background: var(--sk-green); border-color: var(--sk-green); }
.dots li.is-help { background: var(--sk-sunshine); border-color: var(--sk-sunshine); }

.timer { flex: 1; height: 16px; border-radius: 999px; background: var(--c-track); border: 2px solid var(--c-edge); overflow: hidden; }
.timer-fill { height: 100%; background: var(--c); border-radius: 999px; transform-origin: left center; }
.top .sk-chip { font-size: 16px; padding: 8px 14px; }

.question-card { padding: 14px 16px; }
.question {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-size: 46px;
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1;
  white-space: nowrap;
}
.equals { color: var(--sk-muted); }
.answer {
  display: inline-grid;
  place-items: center;
  min-width: 2.1em;
  height: 1.45em;
  padding: 0 10px;
  border-radius: var(--sk-radius-small);
  background: #FFF6D4;
  border: 2px solid rgba(255, 216, 61, 0.6);
  transition: background 160ms ease, border-color 160ms ease;
}
.answer:empty::after { content: ""; width: 3px; height: 0.8em; border-radius: 2px; background: var(--sk-ink); animation: blink 1s steps(2) infinite; }
.answer.is-right { background: var(--sk-green); border-color: var(--sk-green); animation: sk-pop-in 0.42s cubic-bezier(0.2, 0.8, 0.3, 1.2); }
.answer.is-help { background: var(--sk-sunshine); border-color: var(--sk-sunshine); animation: sk-pop-in 0.42s cubic-bezier(0.2, 0.8, 0.3, 1.2); }
@keyframes blink { to { opacity: 0; } }

.keypad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; width: 100%; max-width: 420px; margin: 0 auto; }
.keypad .key { min-height: 58px; height: 58px; padding: 0; font-size: 26px; font-weight: 900; }
.keypad .key:disabled { opacity: 0.5; }
.keypad .key-go { width: 100%; font-size: 20px; }

/* ---------- Results ---------- */

.result .big-number { font-size: 72px; font-weight: 900; letter-spacing: -0.04em; line-height: 1; }
.result .big-number span { font-size: 32px; color: var(--sk-muted); }
.result .sk-body { margin: 6px 0 14px; }
.result .sk-heading { margin-top: 6px; }

/* ---------- See it in 3D ---------- */

.explore-eq { font-size: 44px; margin: 4px 0 14px; }
.steppers { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.stepper { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.stepper-row { display: flex; align-items: center; gap: 10px; }
.step { font-size: 30px; font-weight: 900; line-height: 1; color: var(--sk-ink); }
.step-value { min-width: 1.6em; text-align: center; font-size: 34px; font-weight: 900; }
.sk-pill:disabled { opacity: 0.5; }
@media (max-width: 520px) {
  .steppers { grid-template-columns: 1fr; gap: 8px; }
  .stepper { flex-direction: row; justify-content: space-between; }
}

/* ---------- My facts ---------- */

.chart-card { padding: 14px; }
.chart { display: grid; grid-template-columns: repeat(13, minmax(0, 1fr)); gap: 3px; }
.cell {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  border-radius: 7px;
  font-size: clamp(11px, 2.6vw, 16px);
  font-weight: 800;
  background: #FFFFFF;
  border: 1.5px solid var(--sk-line);
  color: var(--sk-muted);
}
.cell.head { background: #D6DDFE; border-color: rgba(119, 142, 250, 0.42); color: var(--sk-ink); font-weight: 900; }
.cell.corner { background: transparent; border-color: transparent; }
.cell.is-known { background: var(--sk-green); border-color: var(--sk-green); color: var(--sk-ink); }
.cell.is-learning { background: #FFF2D4; border-color: rgba(255, 194, 61, 0.6); color: var(--sk-ink); }
.legend { margin-top: 12px; }
.legend-new { --c-tint: #FFFFFF; --c-stroke: var(--sk-line); }
.grown-up { align-self: center; font-family: var(--sk-font-grown-up); font-weight: 600; }

/* ---------- Home hub ---------- */

.hub { max-width: var(--sk-width-stage); margin: 0 auto; }
.hub-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.hub-tiles .sk-tile { height: 176px; }
.hub-tiles .sk-tile-name { height: 48px; font-size: 16px; }

/* ---------- Learn the tricks ---------- */

.trick-list { display: grid; gap: 10px; max-width: var(--sk-width-action); }
.trick-badge {
  flex: none;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--c);
  color: var(--c-label);
  font-size: 19px;
  font-weight: 900;
  letter-spacing: -0.02em;
}
.lesson-eq { font-size: 44px; margin: 6px 0 10px; }
.lesson-line { margin: 0; }

/* ---------- Long division and Multiply: pick a level ---------- */

.method-home { max-width: var(--sk-width-stage); margin: 0 auto; }
.levels { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; margin-bottom: 12px; }
.levels .level { flex-direction: column; gap: 2px; min-height: 68px; padding: 8px 12px; white-space: normal; }
.level-label { font-size: 20px; font-weight: 900; }
.level-note { font-size: 13px; font-weight: 700; opacity: 0.85; }
.level-done { margin: 0 0 14px; }

/* ---------- The workspace ---------- */

.method-panes { display: grid; gap: 14px; }
.card-title { margin: 0 0 10px; font-weight: 800; }
.dock { display: flex; flex-direction: column; gap: 12px; }
.dock .sk-smiley-says > img { width: 64px; }
.dock .sk-bubble { font-size: 17px; line-height: 1.45; }
.dock .hint { color: var(--sk-muted); font-size: 15px; font-weight: 700; }
.dock .keypad .key { height: 52px; min-height: 52px; }
.dock-actions:empty { display: none; }
.answer.inline {
  min-width: 2.4em;
  height: 1.55em;
  font-size: 22px;
  font-weight: 900;
  vertical-align: middle;
  margin-left: 2px;
}

/* Written work: one digit per square, like squared paper. */
.written {
  --cell: 38px;
  display: grid;
  grid-template-columns: auto repeat(var(--cols), var(--cell));
  grid-auto-rows: var(--cell);
  justify-content: center;
  font-size: 27px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  overflow-x: auto;
  padding: 4px 0;
}
.written-multiply { grid-template-columns: repeat(var(--cols), var(--cell)); }
.cell-w {
  position: relative;
  display: grid;
  place-items: center;
  visibility: hidden;
  border-radius: 9px;
  transition: background 160ms ease, box-shadow 160ms ease;
}
.cell-w.is-shown { visibility: visible; }
/* Where the next answer goes: an empty, glowing square (the digit stays hidden until it's earned). */
.cell-w.is-focus { visibility: visible; background: #FFF6D4; box-shadow: 0 0 0 2px rgba(255, 194, 61, 0.7); }
.cell-w.is-focus:not(.is-shown) { color: transparent; }
.cell-w.just-shown { animation: sk-pop-in 0.42s cubic-bezier(0.2, 0.8, 0.3, 1.2); }
.cell-w.underline { box-shadow: inset 0 -3px 0 var(--sk-ink); border-radius: 0; }
.cell-w.dividend { border-top: 3px solid var(--sk-ink); border-radius: 0; }
.cell-w.divisor {
  padding: 0 10px 0 6px;
  border-right: 3px solid var(--sk-ink);
  border-top-right-radius: 16px;
  border-bottom-right-radius: 16px;
}
.cell-w.wide { justify-content: start; padding-left: 8px; color: var(--sk-red); white-space: nowrap; }
.cell-w.sign { color: var(--sk-muted); }
.cell-w.carry { font-size: 15px; color: var(--sk-red); align-self: end; place-items: end center; }
.cell-w.carry.is-old { opacity: 0.25; }
.cell-w.pp.is-shown { background: var(--c-wash); }
.cell-w.is-linked, .area-total.is-linked { box-shadow: 0 0 0 3px rgba(255, 194, 61, 0.8), 0 0 14px rgba(255, 194, 61, 0.5); }
.rule { align-self: end; border-bottom: 3px solid var(--sk-ink); pointer-events: none; }
.place { align-self: end; justify-self: center; font-size: 12px; font-weight: 900; padding: 1px 6px; border-radius: 999px; }
.place-h { background: #F1E6FA; color: #8D5CC0; }
.place-t { background: #D5ECFD; color: #1F7FC4; }
.place-o { background: #FFE9D8; color: #C76A1E; }
.place-th { background: #E2F3E0; color: #3F8F35; }

/* The area box: one box for each place times each place; each row adds up to one written row. */
.area {
  display: grid;
  grid-template-columns: auto repeat(var(--area-cols), minmax(54px, 1fr)) auto;
  gap: 6px;
  align-items: stretch;
  font-weight: 900;
}
.area-corner { display: grid; place-items: center; color: var(--sk-muted); font-size: 20px; }
.area-label { display: grid; place-items: center; min-height: 36px; padding: 0 6px; font-size: 18px; visibility: hidden; }
.area-label.is-shown { visibility: visible; }
.area-cell {
  display: grid;
  place-items: center;
  min-height: 58px;
  border-radius: var(--sk-radius-small);
  background: var(--c-wash);
  border: 2px solid var(--c-edge);
  font-size: 21px;
  color: transparent;
  transition: box-shadow 160ms ease;
}
.area-cell.is-shown { color: var(--sk-ink); animation: sk-pop-in 0.42s cubic-bezier(0.2, 0.8, 0.3, 1.2); }
.area-cell.is-focus, .area-label.is-focus { box-shadow: 0 0 0 3px rgba(255, 194, 61, 0.8); border-radius: var(--sk-radius-small); }
.area-total { display: grid; place-items: center start; padding: 0 4px; font-size: 18px; visibility: hidden; border-radius: 10px; }
.area-total.is-shown { visibility: visible; }
.area-grand { margin-top: 6px; font-size: 20px; visibility: hidden; }
.area-grand.is-shown { visibility: visible; }

/* The divisor's times table, for "how many 12s fit?" */
.multiples { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 12px; }
.multiples .sk-chip { font-size: 13px; }
.multiples .is-best { transform: scale(1.08); box-shadow: 0 2px 6px rgba(255, 194, 61, 0.5); }

/* Place-value blocks: a hundred flat, a ten rod, a one cube. */
.blocks { --u: 6px; display: grid; gap: 10px; }
.blocks-pile { padding: 8px; border-radius: var(--sk-radius-small); border: 2px dashed var(--sk-line); min-height: calc(var(--u) * 10 + 34px); }
.blocks-label, .group-label { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 800; color: var(--sk-muted); }
.blocks-groups { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; }
.blocks-group { padding: 6px 8px 8px; border-radius: var(--sk-radius-small); background: var(--c-wash); border: 2px solid var(--c-edge); min-height: calc(var(--u) * 10 + 34px); }
.pieces { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 6px; }
.pk { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 2px; }
.pk:empty { display: none; }
.pk-o { display: grid; grid-template-columns: repeat(10, var(--u)); gap: 1px; }
.piece { display: block; box-sizing: border-box; border: 1.5px solid var(--sk-ink); border-radius: 2px; }
.piece-o { width: var(--u); height: var(--u); background: var(--sk-orange); }
.piece-t { width: var(--u); height: calc(var(--u) * 10); background: var(--sk-pop); }
.piece-h {
  width: calc(var(--u) * 10);
  height: calc(var(--u) * 10);
  background-color: var(--sk-purple);
  background-image: linear-gradient(90deg, rgba(41, 41, 56, 0.22) 1px, transparent 1px), linear-gradient(rgba(41, 41, 56, 0.22) 1px, transparent 1px);
  background-size: var(--u) var(--u);
}
.piece.is-glow { box-shadow: 0 0 0 2px #FFC23D, 0 0 8px rgba(255, 194, 61, 0.8); }
.piece.mini { display: inline-block; vertical-align: middle; --u: 2px; }
.piece-o.mini { width: 6px; height: 6px; }
.legend .sk-chip { font-size: 13px; }

/* Phones and small tablets: Smiley Man and the keypad stay at the bottom while the work scrolls above. */
@media (max-width: 899px) {
  .method .dock {
    position: sticky;
    bottom: 0;
    z-index: 5;
    margin: 0 -16px;
    padding: 18px 16px max(10px, env(safe-area-inset-bottom));
    background: linear-gradient(rgba(255, 246, 232, 0), var(--sk-cream) 18px);
    gap: 8px;
  }
  .method .dock .sk-smiley-says > img { width: 48px; }
  .method .dock .sk-bubble { font-size: 16px; padding: 9px 13px; }
  .method .dock .keypad { gap: 8px; }
  .method .dock .keypad .key { height: 46px; min-height: 46px; font-size: 24px; }
  .method .card-title { margin-bottom: 6px; }
  .method .written { --cell: 34px; font-size: 25px; }
  /* When it's his turn, the written work (where he answers) comes first; the picture follows. */
  .method.is-do .written-card { order: -1; }
}

/* ---------- Bigger screens ---------- */

@media (max-width: 599px) {
  .lesson .stage-slot, .explore .stage-slot { height: 340px; }
  .stage-says .sk-bubble { font-size: 15px; padding: 8px 12px; }
}

@media (min-width: 600px) {
  .stage-slot { height: 340px; }
}

/* Wide: the stage on the leading side, choices on the trailing side. */
@media (min-width: 900px) {
  .panes { grid-template-columns: minmax(0, 1.15fr) minmax(360px, 1fr); align-items: start; gap: 22px; }
  .stage-slot { position: sticky; top: 16px; height: min(72vh, 600px); }
  .facts-panes { grid-template-columns: minmax(0, 1.2fr) minmax(300px, 1fr); }
  .question { font-size: 56px; }
  .keypad .key { height: 64px; min-height: 64px; }
  .method-panes { grid-template-columns: minmax(0, 1fr) minmax(360px, 1fr); align-items: start; }
  .method-panes .picture-card { grid-row: span 2; }
  .written { --cell: 46px; font-size: 32px; }
  .blocks { --u: 8px; }
}

/* Phones: while Smiley Man explains a fact, the locked number keys step aside and the blocks get the room. */
@media (max-width: 599px) {
  .quiz .stage-slot { transition: height 260ms cubic-bezier(0.2, 0.8, 0.3, 1); }
  .quiz.is-help .stage-slot { height: 380px; }
  .quiz.is-help .keypad .key:not(.key-go) { display: none; }
  .quiz.is-help .keypad .key-go { grid-column: 1 / -1; justify-self: center; max-width: var(--sk-width-action); }
}

/* Short phones (iPhone 13 mini in Safari): a smaller stage so the keypad fits without scrolling. */
@media (max-width: 599px) and (max-height: 760px) {
  .quiz .stage-slot { height: 170px; }
  .quiz.is-help .stage-slot { height: 340px; }
  .quiz .question { font-size: 40px; }
  .quiz .keypad .key { height: 54px; min-height: 54px; }
  .quiz .panes, .quiz .side { gap: 10px; }
  .quiz .top { min-height: 56px; margin-bottom: 6px; }
}