* { box-sizing: border-box; }

/* Children tap the bricks fast and repeatedly, which a touch device reads as a
   double tap and answers by zooming in. touch-action does not inherit, so the
   rule has to name every element rather than just the page — that also covers
   any control added later. Pinch zoom and scrolling are untouched, so the page
   can still be magnified on purpose. */
* { touch-action: manipulation; }

:root {
  --bg: #f4efe6;
  --ink: #1a1a1a;
  --pill: #f4a688;
  --muted: #6b6257;

  /* The readable column. Text, buttons and free-standing bricks stay inside
     it; only the base row is allowed to use the full display width. */
  --text-w: 460px;
  --pad-x: clamp(14px, 4vw, 40px);

  /* Fixed slot heights. Every screen reserves them, filled or not — this is
     what keeps the back button, the headline and the buttons from moving
     when you navigate. */
  --arrow-w: clamp(40px, 12vw, 56px);

  --nav-h: 48px;
  /* Set from a measurement in js/app.js — see reserveHeadHeight(). */
  --head-h: 0px;
  --pill-h: 58px;
  --actions-gap: 24px;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: 'Nunito', system-ui, sans-serif;
  font-weight: 400;
}

.app { width: 100%; }

/* ---------- the shared screen skeleton ---------- */

.screen {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
  padding: 16px var(--pad-x) 28px;
}
.screen[hidden] { display: none; }

.nav,
.head,
.actions {
  width: 100%;
  max-width: var(--text-w);
  margin-inline: auto;
}

.nav {
  min-height: var(--nav-h);
  display: flex;
  align-items: center;
}

/* Top-aligned rather than centred: the first line of every headline then
   starts at exactly the same y, however many lines follow it. */
.head {
  min-height: var(--head-h);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
}

.stage {
  flex: 1;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.actions {
  margin-top: auto;
  min-height: calc(var(--pill-h) + var(--actions-gap));
  padding-top: var(--actions-gap);
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

/* ---------- text ---------- */

.head-lead {
  font-size: clamp(1.35rem, 5.4vw, 1.75rem);
  margin: 0;
  line-height: 1.2;
  /* Keeps its line when empty, so a screen without a lead still places what
     follows at the same height as one with. The gap below belongs here rather
     than to the title, so every kind of head line lands on the same y. */
  min-height: 1.2em;
  margin-bottom: 2px;
}
.head-title {
  font-size: clamp(2.8rem, 12vw, 4.2rem);
  font-weight: 400;
  line-height: 1.1;
  margin: 0;
}
.head-title-sm {
  font-size: clamp(1.45rem, 6.2vw, 1.9rem);
  line-height: 1.25;
  margin: 0;
}

.task {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(8px, 3vw, 16px);
  font-size: clamp(1.55rem, 6.6vw, 2.4rem);
  line-height: 1.1;
  margin: 0;
  min-height: var(--pill-h);
}
.task.fading { transition: opacity 1.6s ease; opacity: 0.15; }

/* One line under the task, always filled: the plain-language reading of the
   task while it is open, the result once it has been answered. Reserving a
   separate, usually empty line for the result is what left a blank band here. */
.task-hint {
  font-style: italic;
  font-size: clamp(1rem, 4.2vw, 1.15rem);
  line-height: 1.3;
  margin: 10px 0 0;
}
.task-hint.is-result { font-style: normal; }

.actions-hint {
  font-size: clamp(1.15rem, 5vw, 1.35rem);
  text-align: center;
  margin: 0 0 14px;
}

.back {
  display: flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: none;
  font: inherit;
  font-size: 1.3rem;
  color: var(--ink);
  padding: 0;
  cursor: pointer;
}
.back::before {
  content: '\2039';
  font-size: 2em;
  line-height: 0.7;
}

/* ---------- controls ---------- */

.pill {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: var(--pill-h);
  background: var(--pill);
  border: none;
  border-radius: 999px;
  padding: 8px 20px;
  font: inherit;
  font-size: 1.3rem;
  color: var(--ink);
  cursor: pointer;
  margin-bottom: 12px;
}
.actions .pill:last-child { margin-bottom: 0; }

/* Same height as every other button, only narrower — so a button that sits
   next to something keeps the shared size instead of inventing its own. */
.pill-compact {
  width: auto;
  min-width: 92px;
  flex: 0 0 auto;
  padding-inline: clamp(14px, 4vw, 24px);
  font-size: 1.2rem;
  margin-bottom: 0;
}

/* Anything that comes and goes keeps its space, so nothing below it moves. */
.is-spent { visibility: hidden; }

.answer {
  font: inherit;
  font-size: inherit;
  width: calc(2.6ch + 8px);
  text-align: center;
  padding: 0 4px;
  background: transparent;
  color: inherit;
  border: 3px solid var(--ink);
  border-radius: 10px;
}
.answer:disabled { opacity: 0.55; }

/* ---------- the number picker ---------- */

/* Fixed outer columns: the arrows sit at the edge of the text column and
   stay there whatever size the brick in the middle happens to be. */
.picker {
  display: grid;
  grid-template-columns: var(--arrow-w) 1fr var(--arrow-w);
  align-items: center;
  width: 100%;
  max-width: var(--text-w);
}
.picker-brick {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 150px;
}
.arrow {
  background: none;
  border: none;
  font: inherit;
  font-size: clamp(3.2rem, 13vw, 4.2rem);
  line-height: 1;
  color: var(--ink);
  padding: 0;
  cursor: pointer;
}

/* ---------- the base row and its supply ---------- */

/* Row, value and supply are one group, as wide as the row itself. The supply
   therefore sits under what it belongs to on every display, instead of being
   centred on the narrower text column. --build-w is set from the rendered row
   width in js/app.js. */
.build {
  flex: 1;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: var(--build-w, var(--text-w));
  margin-inline: auto;
}

/* The row takes the space left between the headline and the supply below and
   centres itself in it, so it sits in the middle of that gap however tall the
   screen is. */
.row {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  padding-block: 12px;
}
/* Lines are flush left inside a block that is centred as a whole, so a short
   last line stays aligned with the ones above it. */
.row-lines { width: fit-content; margin-inline: auto; }
.row-line { margin-bottom: 6px; }
.row-brick { cursor: pointer; }

.row svg, .hero svg, .tray svg, .picker svg { display: block; }

.hero {
  display: block;
  margin: 0 auto 18px;
  background: none;
  border: none;
  padding: 0;
  line-height: 0;
  cursor: pointer;
}

.tray {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: center;
  gap: 8px;
  width: 100%;
}
.tray-brick {
  background: none;
  border: none;
  padding: 0;
  line-height: 0;
  cursor: pointer;
}

/* ---------- celebration ---------- */

.celebration-overlay {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: rgba(244, 239, 230, 0.85);
  cursor: pointer;
  overflow: hidden;
}
.celebration-field { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.confetti-burst { position: absolute; inset: 0; }
.confetti-dot { position: absolute; will-change: transform, opacity; }
.balloon-piece {
  position: absolute;
  bottom: -80px;
  width: 46px;
  height: 58px;
  border-radius: 50% / 60% 60% 40% 40%;
  animation-name: balloon-rise;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}
.balloon-piece::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -22px;
  width: 1px;
  height: 22px;
  background: rgba(0, 0, 0, 0.3);
}
@keyframes balloon-rise {
  0% { transform: translate(0, 0); opacity: 1; }
  100% { transform: translate(var(--drift), -130vh); opacity: 0.95; }
}
.celebration-card {
  position: relative;
  z-index: 1;
  max-width: 420px;
  margin: 30vh auto 0;
  background: var(--bg);
  border-radius: 18px;
  padding: 30px;
  text-align: center;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18);
}
.celebration-message { font-size: 1.6rem; margin: 0 0 8px; }
.celebration-hint { color: var(--muted); margin: 0; }