/* numbers.css - Numbers: a random missing-number math problem, one per
   step, growing a tree over 20 correct answers. Reuses tokens from
   styles.css and game-shell.css's shell/bar/pause chrome, same as every
   other game. No joystick -- entirely a tap-driven numeric keypad,
   closer to Letters'/Sliders' control-free posture than the twin-stick
   games. */

.numbers-stage {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 10px;
  gap: 6px;
}

.numbers-stats {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  flex: 0 0 auto;
  flex-wrap: wrap;
}

/* Per explicit instruction ("tighten up numbers header into one line on
   mobile"): Coins was removed from the stats row entirely (same posture
   as Spiders'/Vines'/Cubes' own Coins removal -- still accrues via the
   shared system, just no on-screen readout), which is what let Score
   come back to being always-shown instead of the old mobile-only
   .numbers-stat-compact-hide hack (removed, no longer needed with only
   4 stats left). Gap/min-width both shrink further on mobile so
   Level/Step/Lives/Score sit comfortably on one line even in the narrow
   strip left between the shell's own left/right button clearance. */
@media (max-width: 480px) {
  .numbers-stats {
    padding: 0 var(--gs-bar-right-clear) 0 var(--gs-bar-left-clear);
    gap: 6px;
  }
  /* Real bug found via measurement, not just visual inspection: a plain
     single-class `.numbers-stat { min-width: 44px }` here loses the
     specificity tie against the base (unconditional) `.numbers-stat`
     rule below it in source order, so the override was silently
     ignored and every stat kept rendering at the base's 56px anyway --
     same class of bug this file's own prior header-tightening precedent
     (the now-removed .numbers-stat-compact-hide) already had to work
     around. Fixed with an extra ancestor selector to win outright.
     min-width dropped to 0 (not just a smaller floor) since the actual
     constraint is the Lives hearts' own natural width (~52px, three
     glyphs) -- a floor on the narrower stats (Level/Step/Score) only
     wastes space that the strip at 390px genuinely doesn't have. */
  .numbers-stats .numbers-stat {
    min-width: 0;
  }
  /* A little extra margin beyond the 390px-wide iPhone-standard test
     viewport this project verifies against (see CLAUDE.md) -- a
     narrower ~360px Android width has less room between the shell's
     fixed left/right button clearance, so shrink the value/label text
     itself slightly too rather than relying on spacing alone. */
  .numbers-stats .numbers-stat-value {
    font-size: 16px;
  }
  .numbers-stats .numbers-stat-label {
    font-size: 9px;
  }
}

.numbers-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.1;
  min-width: 56px;
}

.numbers-stat-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 600;
  color: var(--muted);
}

.numbers-stat-value {
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
  margin-top: 2px;
  font-variant-numeric: tabular-nums;
}

.numbers-board-wrap {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
}

.numbers-canvas {
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, #0e1a14, #0a120d);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.numbers-toast {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(52, 211, 153, .5);
  color: #06170f;
  font-weight: 700;
  font-size: 13px;
  padding: 6px 14px;
  border-radius: 999px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .3);
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease, transform .3s ease;
  z-index: 5;
}

.numbers-toast[hidden] { display: none; }

.numbers-toast.is-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(4px);
}

/* Per-question countdown -- same bottom-edge-line + numeric-readout
   pattern as Letters' own per-word timer (see that file's own comment
   for the full reasoning): a bright line across the BOTTOM of the board
   that drains left-to-right, with a slow red blink under 10s left. */
.numbers-timer-bar {
  position: absolute;
  left: 6px;
  right: 6px;
  bottom: 6px;
  height: 3px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .08);
  overflow: hidden;
  z-index: 6;
}

.numbers-timer-fill {
  height: 100%;
  width: 100%;
  background: #34d399;
  transition: width .2s linear;
}

.numbers-timer-fill.is-urgent {
  animation: numbers-timer-flash 1.6s ease-in-out infinite;
}

@keyframes numbers-timer-flash {
  0%, 100% { background: #f87171; opacity: 1; }
  50% { background: #f87171; opacity: .35; }
}

.numbers-timer-text {
  position: absolute;
  left: 10px;
  bottom: 12px;
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  z-index: 6;
  font-variant-numeric: tabular-nums;
}

/* -- Problem + answer + keypad ------------------------------------------- */

.numbers-builder {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding-top: 6px;
}

.numbers-problem {
  font-size: 28px;
  font-weight: 800;
  color: var(--text);
  letter-spacing: .02em;
  font-variant-numeric: tabular-nums;
}

.numbers-answer-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
}

.numbers-answer-box {
  min-width: 100px;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 4px 16px;
  border: 2px dashed var(--border);
  border-radius: 10px;
  background: rgba(255, 255, 255, .03);
  font-size: 22px;
  font-weight: 800;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.numbers-answer-cursor {
  color: var(--accent);
  animation: numbers-cursor-blink 1s step-end infinite;
}

@keyframes numbers-cursor-blink {
  0%, 50% { opacity: 1; }
  50.01%, 100% { opacity: 0; }
}

.numbers-reject-x {
  color: #f87171;
  font-size: 28px;
  font-weight: 900;
  animation: numbers-reject-pulse 1.2s ease-out;
}

.numbers-reject-x[hidden] { display: none; }

@keyframes numbers-reject-pulse {
  0%   { opacity: 0; transform: scale(0.6); }
  15%  { opacity: 1; transform: scale(1.15); }
  25%  { opacity: 1; transform: scale(1); }
  80%  { opacity: 1; }
  100% { opacity: 0; }
}

/* 6 columns x 2 rows (1-6 / 7,8,9,0,backspace,OK), per explicit
   instruction ("make it 6 x 2") -- a flat grid with no spanning cells,
   far shorter than the original 3-wide/4-row layout, freeing up real
   vertical space for the tree above it. */
.numbers-keypad {
  display: grid;
  grid-template-columns: repeat(6, 50px);
  gap: 6px;
}

.numbers-key {
  width: 50px;
  height: 46px;
  border-radius: 10px;
  background: #1b2430;
  border: 2px solid var(--border);
  color: var(--text);
  font-weight: 800;
  font-size: 17px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  user-select: none;
  transition: transform .1s ease, background .15s ease;
}

.numbers-key:active {
  transform: scale(0.94);
}

.numbers-key-primary {
  background: var(--accent);
  color: #06170f;
  border-color: var(--accent);
}

/* -- Overlays (start/game-over) -- same pattern as every other game. */

.numbers-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(10, 13, 16, .72);
  border-radius: var(--radius);
}

.numbers-overlay[hidden] { display: none; }

.numbers-overlay-card {
  text-align: center;
  padding: 24px;
  max-width: 340px;
}

.numbers-overlay-title {
  font-family: Georgia, serif;
  font-size: 26px;
  color: var(--text);
  margin-bottom: 8px;
}

.numbers-overlay-text {
  color: var(--muted);
  font-size: 14px;
  margin: 0 0 18px;
}