/* ============================================================
   Felt Workshop — Castle Crew design system
   A tactile handmade kid's game. Cream, walnut, moss, sky, tomato.
   Animal Crossing's warmth, Tinybop's craftsmanship,
   none of Royal Match's neon.

   Source of truth: /DESIGN.md
   Do NOT override these tokens in component files.
   Edit DESIGN.md, then mirror changes here.
   ============================================================ */

:root {
  /* ----- Colors ----- */
  --color-primary:        #3D2A1B;   /* Walnut — text, borders, flat shadows */
  --color-secondary:      #8E7558;   /* Driftwood — captions, locked nodes */
  --color-tertiary:       #6B9B5E;   /* Moss — primary CTA, completed nodes */
  --color-neutral:        #F8EFD9;   /* Cream — page background */
  --color-surface-raised: #FFFAEB;   /* Page — cards, modals, data cells */

  --color-accent-tomato:  #D9573B;   /* Red tile, destructive only */
  --color-accent-sky:     #6FA8D6;   /* Blue tile, info, default curtains */
  --color-accent-butter:  #F2C84B;   /* Stars, yellow tile, feature cards */
  --color-accent-grape:   #9067A7;   /* Purple tile only */
  --color-accent-orange:  #E8924B;   /* Orange tile only */

  --color-shadow-walnut:  #3D2A1B;   /* Same as primary — flat-offset shadow blocks */

  --color-on-primary:     #F8EFD9;
  --color-on-tertiary:    #FFFFFF;
  --color-on-tomato:      #FFFFFF;
  --color-on-butter:      #3D2A1B;
  --color-on-sky:         #FFFFFF;

  --color-state-success:  #6B9B5E;
  --color-state-warning:  #F2C84B;
  --color-state-danger:   #D9573B;

  /* ----- Typography ----- */
  --font-display:         'Bricolage Grotesque', system-ui, sans-serif;
  --font-body:            'DM Sans', system-ui, sans-serif;

  --text-display-lg:      3.75rem;
  --text-display-md:      2.75rem;
  --text-h1:              2.25rem;
  --text-h2:              1.5rem;
  --text-h3:              1.125rem;
  --text-body-lg:         1.125rem;
  --text-body-md:         1rem;
  --text-body-sm:         0.875rem;
  --text-caption:         0.78rem;
  --text-numeric-lg:      2.5rem;
  --text-button:          1.05rem;

  --weight-display:       800;
  --weight-heading:       700;
  --weight-h2:            600;
  --weight-body:          500;
  --weight-caption:       700;

  --tracking-display:     -0.025em;
  --tracking-heading:     -0.02em;
  --tracking-caption:     0.06em;

  /* ----- Spacing (deliberately off the 8-grid for hand-cut feel) ----- */
  --space-xs:             4px;
  --space-sm:             10px;
  --space-md:             18px;
  --space-lg:             28px;
  --space-xl:             48px;
  --space-2xl:            80px;

  /* ----- Rounded ----- */
  --radius-none:          0;
  --radius-sm:            10px;
  --radius-md:            18px;
  --radius-lg:            28px;
  --radius-full:          9999px;

  /* ----- Borders ----- */
  --border-hairline:      1px;
  --border-standard:      2px;
  --border-chunky:        3px;

  /* ----- Shadows (flat-offset only — no blurs in chrome) ----- */
  --shadow-toy-sm:        3px 3px 0 var(--color-shadow-walnut);
  --shadow-toy-md:        4px 4px 0 var(--color-shadow-walnut);
  --shadow-toy-lg:        6px 6px 0 var(--color-shadow-walnut);
  --shadow-press:         0 2px 0 var(--color-shadow-walnut);

  /* ----- Motion ----- */
  --ease-out-toy:         cubic-bezier(0.34, 1.18, 0.64, 1);
  --ease-out-soft:        cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast:        120ms;
  --duration-normal:      180ms;
  --duration-pop:         240ms;
}

/* ============================================================
   Base reset and body
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font-body);
  font-size: var(--text-body-md);
  font-weight: var(--weight-body);
  color: var(--color-primary);
  background: var(--color-neutral);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
  /* Disable double-tap zoom and text selection on the game UI by default */
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

button { font-family: inherit; }

/* ============================================================
   Mobile viewport wrapper — 375px is the primary target
   Centred on larger viewports with a soft cream margin
   ============================================================ */

#app {
  max-width: 480px;
  margin: 0 auto;
  min-height: 100vh;
  position: relative;
  background: var(--color-neutral);
}

/* ============================================================
   Typographic scale classes
   ============================================================ */

.text-display-lg {
  font-family: var(--font-display);
  font-size: var(--text-display-lg);
  font-weight: var(--weight-display);
  letter-spacing: var(--tracking-display);
  line-height: 0.98;
}
.text-display-md {
  font-family: var(--font-display);
  font-size: var(--text-display-md);
  font-weight: var(--weight-display);
  letter-spacing: var(--tracking-display);
  line-height: 1.02;
}
.text-h1 {
  font-family: var(--font-display);
  font-size: var(--text-h1);
  font-weight: var(--weight-heading);
  letter-spacing: var(--tracking-heading);
  line-height: 1.1;
}
.text-h2 {
  font-family: var(--font-display);
  font-size: var(--text-h2);
  font-weight: var(--weight-h2);
  letter-spacing: -0.01em;
  line-height: 1.2;
}
.text-h3 {
  font-family: var(--font-display);
  font-size: var(--text-h3);
  font-weight: var(--weight-h2);
  letter-spacing: -0.005em;
  line-height: 1.3;
}
.text-body-lg { font-size: var(--text-body-lg); line-height: 1.55; }
.text-body-md { font-size: var(--text-body-md); line-height: 1.55; }
.text-body-sm { font-size: var(--text-body-sm); line-height: 1.5; }
.text-caption {
  font-size: var(--text-caption);
  font-weight: var(--weight-caption);
  letter-spacing: var(--tracking-caption);
  text-transform: uppercase;
  color: var(--color-secondary);
}
.text-numeric-lg {
  font-family: var(--font-display);
  font-size: var(--text-numeric-lg);
  font-weight: var(--weight-display);
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  color: var(--color-accent-tomato);
}

/* ============================================================
   Buttons
   ============================================================ */

.btn-primary {
  background: var(--color-tertiary);
  color: var(--color-on-tertiary);
  font-family: var(--font-body);
  font-size: var(--text-button);
  font-weight: 700;
  letter-spacing: 0;
  border: var(--border-standard) solid var(--color-primary);
  border-radius: var(--radius-full);
  padding: 16px 28px;
  box-shadow: var(--shadow-toy-md);
  cursor: pointer;
  transition: transform var(--duration-fast) var(--ease-out-toy),
              box-shadow var(--duration-fast) var(--ease-out-toy);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-decoration: none;
  user-select: none;
}
.btn-primary:hover { transform: translate(0, 0); }
.btn-primary:active {
  transform: translate(2px, 2px);
  box-shadow: var(--shadow-press);
}

.btn-secondary {
  background: var(--color-surface-raised);
  color: var(--color-primary);
  font-family: var(--font-body);
  font-size: var(--text-button);
  font-weight: 700;
  border: var(--border-standard) solid var(--color-primary);
  border-radius: var(--radius-full);
  padding: 14px 24px;
  box-shadow: var(--shadow-toy-sm);
  cursor: pointer;
  transition: transform var(--duration-fast) var(--ease-out-toy),
              box-shadow var(--duration-fast) var(--ease-out-toy);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.btn-secondary:active {
  transform: translate(2px, 2px);
  box-shadow: var(--shadow-press);
}

.btn-danger {
  background: var(--color-accent-tomato);
  color: var(--color-on-tomato);
  font-family: var(--font-body);
  font-size: var(--text-button);
  font-weight: 700;
  border: var(--border-standard) solid var(--color-primary);
  border-radius: var(--radius-full);
  padding: 16px 28px;
  box-shadow: var(--shadow-toy-md);
  cursor: pointer;
  transition: transform var(--duration-fast) var(--ease-out-toy),
              box-shadow var(--duration-fast) var(--ease-out-toy);
}
.btn-danger:active {
  transform: translate(2px, 2px);
  box-shadow: var(--shadow-press);
}

/* ============================================================
   Cards
   ============================================================ */

.card-primary {
  background: var(--color-surface-raised);
  color: var(--color-primary);
  border: var(--border-standard) solid var(--color-primary);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  box-shadow: var(--shadow-toy-md);
}

.card-feature {
  background: var(--color-accent-butter);
  color: var(--color-on-butter);
  border: var(--border-standard) solid var(--color-primary);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  box-shadow: var(--shadow-toy-md);
}

.card-info {
  background: var(--color-accent-sky);
  color: var(--color-on-sky);
  border: var(--border-standard) solid var(--color-primary);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  box-shadow: var(--shadow-toy-md);
}

/* ============================================================
   Pills (status, lives counter, etc.)
   ============================================================ */

.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--color-accent-butter);
  color: var(--color-on-butter);
  border: var(--border-standard) solid var(--color-primary);
  border-radius: var(--radius-full);
  padding: 6px 14px;
  font-size: var(--text-body-sm);
  font-weight: 700;
  font-family: var(--font-body);
  box-shadow: var(--shadow-toy-sm);
}

/* ============================================================
   King speech bubble
   ============================================================ */

.king-bubble {
  background: var(--color-surface-raised);
  color: var(--color-primary);
  border: var(--border-standard) solid var(--color-primary);
  border-radius: var(--radius-lg);
  padding: var(--space-md) 22px;
  box-shadow: var(--shadow-toy-lg);
  font-size: var(--text-body-lg);
  line-height: 1.5;
  position: relative;
  max-width: 320px;
}

/* ============================================================
   Splash screen — Sprint 1 demo target
   ============================================================ */

.splash-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: var(--space-xl) var(--space-lg) calc(var(--space-2xl) + 60px);
  text-align: center;
  gap: var(--space-lg);
  cursor: pointer;
}
.splash-title {
  font-family: var(--font-display);
  font-size: var(--text-display-lg);
  font-weight: var(--weight-display);
  letter-spacing: var(--tracking-display);
  line-height: 0.95;
  color: var(--color-primary);
  margin: 0;
}
.splash-title em {
  font-style: normal;
  color: var(--color-accent-tomato);
}
.splash-tagline {
  font-size: var(--text-body-lg);
  color: var(--color-secondary);
  font-weight: 600;
  margin: 0;
  max-width: 280px;
}
.splash-tap-hint {
  font-size: var(--text-caption);
  font-weight: 700;
  letter-spacing: var(--tracking-caption);
  text-transform: uppercase;
  color: var(--color-secondary);
  animation: tapBreathe 1.6s var(--ease-out-soft) infinite;
}

@keyframes tapBreathe {
  0%, 100% { opacity: 0.55; transform: translateY(0); }
  50%      { opacity: 1;    transform: translateY(-2px); }
}

/* ============================================================
   King Rufus mascot (placeholder SVG-driven)
   Sprint 1 uses a CSS/SVG inline placeholder. Sprint 8 swaps in real art.
   ============================================================ */

.king-mascot {
  width: 180px;
  height: 180px;
  display: block;
  filter: drop-shadow(4px 4px 0 var(--color-primary));
}

/* Crown gem on splash — gem is Josh's favourite pictogram */
.gem-flourish {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  background: var(--color-accent-sky);
  border: var(--border-standard) solid var(--color-primary);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-toy-md);
  transform: rotate(-6deg);
}

/* ============================================================
   Dev toolbar (Sprint 1 — fixed bottom-left)
   Visually distinct from app UI — deliberately breaks the design
   to signal it's a dev-only construct.
   ============================================================ */

.dev-toolbar {
  position: fixed;
  bottom: 12px;
  left: 12px;
  z-index: 9999;
  background: var(--color-primary);
  color: var(--color-neutral);
  border: var(--border-standard) solid var(--color-primary);
  border-radius: var(--radius-md);
  padding: 8px;
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 11px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  box-shadow: var(--shadow-toy-sm);
  opacity: 0.7;
  transition: opacity var(--duration-normal) var(--ease-out-soft);
  max-width: 220px;
}
.dev-toolbar:hover { opacity: 1; }

.dev-toolbar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-accent-butter);
  padding-bottom: 4px;
  border-bottom: 1px dashed var(--color-secondary);
}
.dev-toolbar-toggle {
  background: transparent;
  border: none;
  color: var(--color-accent-butter);
  cursor: pointer;
  font-family: inherit;
  font-size: 11px;
  padding: 0 4px;
}
.dev-toolbar-row {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}
.dev-toolbar button.dev-btn {
  background: transparent;
  border: 1px solid var(--color-neutral);
  color: var(--color-neutral);
  border-radius: 4px;
  padding: 4px 8px;
  font-family: inherit;
  font-size: 11px;
  cursor: pointer;
  transition: background var(--duration-fast) ease;
}
.dev-toolbar button.dev-btn:hover {
  background: var(--color-accent-butter);
  color: var(--color-primary);
}
.dev-toolbar select.dev-select {
  background: var(--color-primary);
  color: var(--color-neutral);
  border: 1px solid var(--color-neutral);
  border-radius: 4px;
  padding: 3px 6px;
  font-family: inherit;
  font-size: 11px;
}
.dev-toolbar.collapsed .dev-toolbar-body { display: none; }

/* ============================================================
   Utility helpers
   ============================================================ */

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

.fade-in { animation: fadeIn var(--duration-pop) var(--ease-out-soft); }
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   Top bar — used on map, pre-level, game board (Sprints 2+4)
   ============================================================ */

.top-bar {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--color-neutral);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  padding: var(--space-md) var(--space-md);
  border-bottom: var(--border-standard) solid var(--color-primary);
}
.top-bar-left,
.top-bar-right {
  display: flex; align-items: center; gap: 8px;
}
.lives-pill,
.stars-pill {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--color-primary);
  background: var(--color-surface-raised);
  border: var(--border-standard) solid var(--color-primary);
  border-radius: var(--radius-full);
  padding: 5px 14px;
  box-shadow: var(--shadow-toy-sm);
}
.lives-pill .pip-icon { color: var(--color-accent-tomato); }
.stars-pill .pip-icon { color: var(--color-accent-butter); }

.cog-btn {
  width: 40px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--color-surface-raised);
  border: var(--border-standard) solid var(--color-primary);
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-toy-sm);
  cursor: pointer;
  color: var(--color-primary);
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.cog-btn:active { transform: translate(2px,2px); box-shadow: var(--shadow-press); }

.back-btn {
  display: inline-flex; align-items: center; gap: 6px;
  background: transparent;
  border: none;
  color: var(--color-primary);
  font-weight: 700;
  font-size: var(--text-body-md);
  cursor: pointer;
  padding: 6px 4px;
}

/* ============================================================
   Kingdom Map (Sprint 9 — replaces the area-list with an SVG kingdom)
   ============================================================ */

.kingdom-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--space-sm) var(--space-md);
  background: var(--color-surface-raised);
  border-bottom: var(--border-standard) solid var(--color-primary);
}
.kingdom-header-title { display: flex; flex-direction: column; }
.kingdom-header-title strong {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--color-primary);
  margin-top: 1px;
}
.kingdom-header-progress {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.4rem;
  color: var(--color-tertiary);
  font-variant-numeric: tabular-nums;
  background: var(--color-accent-butter);
  border: var(--border-standard) solid var(--color-primary);
  border-radius: var(--radius-full);
  padding: 4px 14px;
  box-shadow: var(--shadow-toy-sm);
  color: var(--color-on-butter);
}

.kingdom-stage {
  padding: var(--space-md) 0 calc(80px + var(--space-md));
  background: var(--color-neutral);
  min-height: calc(100vh - 73px);
  position: relative;
}
.kingdom-svg {
  width: 100%;
  display: block;
  height: auto;
  max-width: 480px;
  margin: 0 auto;
  border: var(--border-standard) solid var(--color-primary);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-toy-md);
  background: var(--color-surface-raised);
}

/* Real fog-of-war: a deep midnight overlay masks the kingdom. As regions
   reveal, their mask "torchlight" blobs fade in (opacity 0 → 1), softly
   punching holes in the fog. Same feel as HoMM / Red Alert. */
.kingdom-svg .reveal-blob {
  opacity: 0;
  transition: opacity 1.4s var(--ease-out-soft);
}
.kingdom-svg .reveal-blob.revealed {
  opacity: 1;
}

/* Tiny stars twinkling inside the fog — atmospheric flavour. */
@keyframes twinkle {
  0%, 100% { opacity: 0.25; transform: scale(1); }
  50%      { opacity: 0.85; transform: scale(1.4); }
}

/* Easter-egg gentle idle motion (so the kid notices them after a beat) */
.kingdom-svg .easter-egg { transform-box: fill-box; transform-origin: center; }
.kingdom-svg .easter-egg.dragon  { animation: dragonBreath 5s var(--ease-out-soft) infinite; }
.kingdom-svg .easter-egg.sparkles { animation: sparklePulse 1.6s ease-in-out infinite; }
@keyframes dragonBreath {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-2px); }
}
@keyframes sparklePulse {
  0%, 100% { opacity: 0.55; }
  50%      { opacity: 1; }
}

/* Level node interactions */
.kingdom-svg .kingdom-level-node {
  cursor: pointer;
  transform-box: fill-box;
  transform-origin: center;
  transition: transform 160ms var(--ease-out-toy);
}
.kingdom-svg .kingdom-level-node.locked  { opacity: 0.55; cursor: not-allowed; }
.kingdom-svg .kingdom-level-node.unlocked { animation: nodeBreath 2s var(--ease-out-soft) infinite; }
.kingdom-svg .kingdom-level-node:active { transform: translate(2px, 2px); }
.kingdom-svg .kingdom-level-node.node-wobble { animation: wobble 360ms ease-in-out; }

/* ============================================================
   Castle Map LEGACY — kept for any direct stub references
   ============================================================ */

.map-stage {
  padding: var(--space-md) var(--space-md) calc(80px + var(--space-2xl));
  display: flex; flex-direction: column;
  gap: var(--space-xl);
  background:
    radial-gradient(circle at 25% 12%, rgba(217,87,59,0.06), transparent 38%),
    radial-gradient(circle at 78% 60%, rgba(107,155,94,0.07), transparent 42%);
  min-height: calc(100vh - 73px);
}
.area-block {
  display: flex; flex-direction: column; gap: var(--space-md);
}
.area-header {
  display: flex; align-items: baseline; justify-content: space-between;
  border-bottom: 2px dashed var(--color-secondary);
  padding-bottom: 6px;
}
.area-header h2 {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--color-primary);
  margin: 0;
}
.area-header .area-status {
  font-size: var(--text-caption);
  font-weight: 700;
  letter-spacing: var(--tracking-caption);
  text-transform: uppercase;
  color: var(--color-secondary);
}
.area-locked .area-header h2 { color: var(--color-secondary); }
.area-empty {
  text-align: center;
  font-style: italic;
  color: var(--color-secondary);
  padding: var(--space-md) 0;
}

/* Level path — winding column of nodes */
.level-path {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--space-md) var(--space-sm);
  position: relative;
  padding: var(--space-md) 0;
}
.level-node-wrap {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  /* offset alternating items for the winding path feel */
}
.level-path .level-node-wrap:nth-child(2),
.level-path .level-node-wrap:nth-child(7),
.level-path .level-node-wrap:nth-child(12) { transform: translateY(8px); }
.level-path .level-node-wrap:nth-child(4),
.level-path .level-node-wrap:nth-child(9),
.level-path .level-node-wrap:nth-child(14) { transform: translateY(-6px); }

.level-node {
  width: 56px; height: 56px;
  display: inline-flex; align-items: center; justify-content: center;
  border: var(--border-standard) solid var(--color-primary);
  border-radius: var(--radius-full);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.25rem;
  color: var(--color-primary);
  background: var(--color-secondary);
  box-shadow: var(--shadow-toy-md);
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  position: relative;
  transition: transform 160ms var(--ease-out-toy);
}
.level-node.locked {
  background: var(--color-secondary);
  color: var(--color-neutral);
  cursor: not-allowed;
}
.level-node.unlocked {
  background: var(--color-accent-butter);
  color: var(--color-primary);
  animation: nodeBreath 2s var(--ease-out-soft) infinite;
}
.level-node.completed {
  background: var(--color-tertiary);
  color: var(--color-on-tertiary);
}
.level-node:active:not(.locked) { transform: translate(2px,2px); box-shadow: var(--shadow-press); }
.level-node-stars {
  display: inline-flex;
  gap: 2px;
  font-size: 0.7rem;
  height: 12px;
  color: var(--color-accent-butter);
}
.level-node-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--color-secondary);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
@keyframes nodeBreath {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.05); }
}

/* Settings cog wobble on locked tap */
.level-node.wobble {
  animation: wobble 360ms ease-in-out;
}
@keyframes wobble {
  0%, 100% { transform: rotate(0); }
  20%      { transform: rotate(-6deg); }
  40%      { transform: rotate(6deg); }
  60%      { transform: rotate(-4deg); }
  80%      { transform: rotate(3deg); }
}

/* ============================================================
   Pre-level (Sprint 2)
   ============================================================ */

.prelevel-stage {
  padding: var(--space-md);
  display: flex; flex-direction: column; gap: var(--space-md);
  min-height: calc(100vh - 73px);
}
.prelevel-card {
  background: var(--color-surface-raised);
  border: var(--border-standard) solid var(--color-primary);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  box-shadow: var(--shadow-toy-md);
  display: flex; flex-direction: column; gap: var(--space-md);
  margin-top: var(--space-md);
  position: relative;
}
.prelevel-card .level-label {
  font-size: var(--text-caption);
  font-weight: 700;
  letter-spacing: var(--tracking-caption);
  text-transform: uppercase;
  color: var(--color-tertiary);
}
.prelevel-card h2 {
  font-family: var(--font-display);
  font-size: 1.85rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0;
  line-height: 1.05;
}
.objective-list {
  list-style: none;
  margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 8px;
}
.objective-row {
  display: flex; align-items: center; gap: 10px;
  font-size: var(--text-body-md);
  font-weight: 600;
}
.objective-icon {
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  border: var(--border-standard) solid var(--color-primary);
  border-radius: var(--radius-sm);
  flex-shrink: 0;
}
.prelevel-meta {
  display: flex;
  justify-content: space-between;
  gap: var(--space-md);
  border-top: 1px dashed var(--color-secondary);
  padding-top: var(--space-md);
  font-size: var(--text-body-sm);
  color: var(--color-secondary);
  font-weight: 600;
}
.prelevel-actions {
  display: flex; gap: var(--space-sm);
}
.prelevel-actions .btn-primary { flex: 1; }
.prelevel-hint-card {
  background: var(--color-accent-butter);
  border: var(--border-standard) solid var(--color-primary);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  font-size: var(--text-body-sm);
  font-weight: 600;
  color: var(--color-on-butter);
  box-shadow: var(--shadow-toy-sm);
}

/* ============================================================
   Game Board (Sprint 4)
   ============================================================ */

.gameboard-stage {
  display: flex; flex-direction: column;
  min-height: 100vh;
  background:
    radial-gradient(circle at 50% 0%, rgba(255,250,235,0.8), transparent 50%),
    var(--color-neutral);
}
/* ============================================================
   King-stage — Wes-driven feature.
   The king sits above the board, racing the clock.
   On timer expiry he does a silly slapstick animation (the
   PLAYER is never the comic target — only the king is).
   ============================================================ */

.king-stage {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: var(--space-md);
  padding: var(--space-sm) var(--space-md) 0;
  height: 110px;
  overflow: visible;
}
.king-stage-character {
  position: relative;
  display: flex; align-items: flex-end;
  width: 92px;
  height: 100px;
  z-index: 2;
}
.king-stage-character svg {
  width: 100%; height: 100%;
  filter: drop-shadow(3px 3px 0 var(--color-primary));
  animation: kingIdleBob 2.4s var(--ease-out-soft) infinite;
}
@keyframes kingIdleBob {
  0%, 100% { transform: translateY(0) rotate(-1.5deg); }
  50%      { transform: translateY(-4px) rotate(1.5deg); }
}

.timer-bubble {
  position: relative;
  background: var(--color-surface-raised);
  border: var(--border-standard) solid var(--color-primary);
  border-radius: var(--radius-md);
  padding: 8px 14px 6px;
  box-shadow: var(--shadow-toy-md);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.4rem;
  color: var(--color-primary);
  font-variant-numeric: tabular-nums;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  line-height: 1;
  min-width: 80px;
  text-align: center;
}
.timer-bubble .timer-label {
  font-family: var(--font-body);
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--color-secondary);
  margin-bottom: 3px;
}
.timer-bubble.warning {
  background: var(--color-accent-tomato);
  color: var(--color-on-tomato);
  animation: timerPulse 600ms ease-in-out infinite;
}
.timer-bubble.warning .timer-label { color: rgba(255,255,255,0.85); }
@keyframes timerPulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.04); }
}

/* Speech-bubble tail pointing toward the king */
.timer-bubble::after {
  content: '';
  position: absolute;
  bottom: 8px;
  left: -10px;
  width: 0; height: 0;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-right: 10px solid var(--color-primary);
}
.timer-bubble::before {
  content: '';
  position: absolute;
  bottom: 8px;
  left: -7px;
  width: 0; height: 0;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-right: 8px solid var(--color-surface-raised);
  z-index: 1;
}
.timer-bubble.warning::before {
  border-right-color: var(--color-accent-tomato);
}

/* ----- Three king-fail animations (slapstick, never grim) ----- */

.king-fail-poof {
  animation: kingPoof 900ms var(--ease-out-toy) forwards !important;
}
@keyframes kingPoof {
  0%   { transform: scale(1) rotate(0); opacity: 1; }
  30%  { transform: scale(1.25) rotate(-8deg); }
  60%  { transform: scale(0.4) rotate(40deg); opacity: 0.6; }
  100% { transform: scale(0) rotate(180deg); opacity: 0; }
}

.king-fail-runaway {
  animation: kingRunaway 900ms cubic-bezier(0.55, 0.06, 0.68, 0.19) forwards !important;
}
@keyframes kingRunaway {
  0%   { transform: translateX(0) rotate(0); }
  20%  { transform: translateX(-8px) rotate(-4deg); }
  100% { transform: translateX(280px) rotate(8deg); opacity: 0.4; }
}

.king-fail-balloon {
  animation: kingBalloon 1200ms var(--ease-out-soft) forwards !important;
}
@keyframes kingBalloon {
  0%   { transform: translateY(0) rotate(0); }
  20%  { transform: translateY(2px) rotate(0); }
  100% { transform: translateY(-220px) rotate(15deg); opacity: 0.6; }
}

/* Poof particles overlay */
.poof-burst {
  position: absolute;
  top: 30%; left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 3;
}
.poof-burst .poof-particle {
  position: absolute;
  width: 12px; height: 12px;
  border-radius: var(--radius-full);
  background: var(--color-accent-butter);
  border: 2px solid var(--color-primary);
  animation: poofParticle 700ms var(--ease-out-toy) forwards;
}
@keyframes poofParticle {
  to { transform: translate(var(--px), var(--py)) scale(0.4); opacity: 0; }
}

.balloon-string {
  position: absolute;
  top: -42px; left: 50%;
  transform: translateX(-50%);
  font-size: 32px;
  pointer-events: none;
  animation: balloonRise 1200ms var(--ease-out-soft) forwards;
  z-index: 3;
}
@keyframes balloonRise {
  to { transform: translate(-50%, -180px); }
}

/* ----- Stalker indicator: shows what's coming for the king ----- */

.hazard-stalker {
  position: absolute;
  right: 6px;
  bottom: 8px;
  font-size: 28px;
  /* --time-progress goes 1.0 (full) → 0.0 (empty); stalker creeps left as time drops */
  transform: translateX(calc(-1 * (1 - var(--time-progress, 1)) * 70px));
  transition: transform 600ms var(--ease-out-soft);
  filter: drop-shadow(2px 2px 0 var(--color-primary));
  z-index: 1;
  user-select: none;
  animation: stalkerWobble 1.6s var(--ease-out-soft) infinite;
}
@keyframes stalkerWobble {
  0%, 100% { transform: translateX(calc(-1 * (1 - var(--time-progress, 1)) * 70px)) rotate(-4deg); }
  50%      { transform: translateX(calc(-1 * (1 - var(--time-progress, 1)) * 70px)) rotate(4deg); }
}

/* ----- Extra slapstick fail animations ----- */

.king-fail-snake {
  animation: kingSnakeSqueeze 1100ms var(--ease-out-toy) forwards !important;
}
@keyframes kingSnakeSqueeze {
  0%   { transform: scale(1) rotate(0); }
  30%  { transform: scaleX(1.2) scaleY(0.85) rotate(-3deg); }
  60%  { transform: scaleX(0.7) scaleY(1.25) rotate(2deg); }
  100% { transform: scaleX(0.5) scaleY(0.4) rotate(0); opacity: 0.5; }
}

.king-fail-lava {
  animation: kingLavaSquish 1000ms var(--ease-out-toy) forwards !important;
}
@keyframes kingLavaSquish {
  0%   { transform: scaleY(1) translateY(0); }
  60%  { transform: scaleY(0.3) translateY(36px); }
  100% { transform: scaleY(0.15) translateY(40px); opacity: 0.65; }
}

.king-fail-rock {
  animation: kingRockBump 900ms var(--ease-out-toy) forwards !important;
}
@keyframes kingRockBump {
  0%   { transform: translateX(0) rotate(0); }
  40%  { transform: translateX(60px) rotate(35deg); }
  100% { transform: translateX(220px) rotate(120deg); opacity: 0.55; }
}

.king-fail-ice {
  animation: kingIceFreeze 1100ms steps(2, end) forwards !important;
  filter: drop-shadow(3px 3px 0 var(--color-primary)) hue-rotate(180deg) brightness(1.15) !important;
}
@keyframes kingIceFreeze {
  0%   { transform: scale(1); }
  60%  { transform: scale(1.05); }
  100% { transform: scale(1) translateY(2px); }
}

.king-fail-pie {
  animation: kingPieSplat 900ms var(--ease-out-toy) forwards !important;
}
@keyframes kingPieSplat {
  0%   { transform: scale(1) rotate(0); }
  35%  { transform: scale(1.08) rotate(-5deg); }
  100% { transform: scale(0.9) rotate(2deg); }
}

.king-fail-anvil {
  animation: kingAnvilSquish 950ms var(--ease-out-toy) forwards !important;
}
@keyframes kingAnvilSquish {
  0%   { transform: scaleY(1) translateY(0); }
  55%  { transform: scaleY(0.25) translateY(45px); }
  100% { transform: scaleY(0.18) translateY(45px); opacity: 0.7; }
}

/* ----- Falling/incoming hazard graphics ----- */

.hazard-incoming {
  position: absolute;
  font-size: 64px;
  pointer-events: none;
  z-index: 4;
  filter: drop-shadow(3px 3px 0 var(--color-primary));
}
.hazard-incoming.from-top {
  top: -80px; left: 50%;
  transform: translateX(-50%);
  animation: hazardFromTop 700ms var(--ease-out-soft) forwards;
}
@keyframes hazardFromTop {
  0%   { top: -80px; transform: translateX(-50%) rotate(0); }
  85%  { top: 24px;  transform: translateX(-50%) rotate(8deg); }
  100% { top: 28px;  transform: translateX(-50%) rotate(-3deg); }
}
.hazard-incoming.from-side {
  bottom: 8px; right: -80px;
  animation: hazardFromSide 700ms var(--ease-out-soft) forwards;
}
@keyframes hazardFromSide {
  0%   { right: -80px; transform: rotate(0); }
  100% { right: 38%;   transform: rotate(540deg); }
}
.hazard-incoming.snake-attack {
  bottom: 4px; right: -80px;
  animation: snakeSlither 800ms var(--ease-out-soft) forwards;
}
@keyframes snakeSlither {
  0%   { right: -80px; transform: scaleX(1) rotate(-15deg); }
  60%  { right: 36%;   transform: scaleX(1.2) rotate(15deg); }
  100% { right: 38%;   transform: scaleX(1) rotate(0); }
}
.hazard-incoming.spike-rise {
  bottom: -40px; left: 50%;
  transform: translateX(-50%);
  animation: spikeRise 600ms var(--ease-out-toy) forwards;
}
@keyframes spikeRise {
  0%   { bottom: -40px; }
  100% { bottom: 4px; }
}

/* "Try again?" caption shown briefly after fail-anim */
.king-fail-caption {
  position: absolute;
  bottom: -24px; left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.1rem;
  color: var(--color-primary);
  background: var(--color-accent-butter);
  border: var(--border-standard) solid var(--color-primary);
  border-radius: var(--radius-full);
  padding: 4px 14px;
  box-shadow: var(--shadow-toy-sm);
  white-space: nowrap;
  animation: fadeIn 280ms var(--ease-out-toy) backwards;
  animation-delay: 700ms;
  opacity: 0;
  animation-fill-mode: forwards;
}

.gameboard-objectives {
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
  padding: var(--space-sm) var(--space-md);
  background: var(--color-surface-raised);
  border-bottom: var(--border-standard) solid var(--color-primary);
}
.objective-chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--color-neutral);
  border: var(--border-standard) solid var(--color-primary);
  border-radius: var(--radius-full);
  padding: 4px 10px 4px 4px;
  font-size: var(--text-body-sm);
  font-weight: 700;
  color: var(--color-primary);
  font-variant-numeric: tabular-nums;
}
.objective-chip.met {
  background: var(--color-tertiary);
  color: var(--color-on-tertiary);
}
.objective-chip-icon {
  width: 24px; height: 24px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--color-primary);
}
.moves-pill {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--color-accent-butter);
  border: var(--border-standard) solid var(--color-primary);
  border-radius: var(--radius-full);
  padding: 4px 14px;
  font-family: var(--font-display);
  font-weight: 800;
  color: var(--color-on-butter);
  box-shadow: var(--shadow-toy-sm);
  font-size: 1.05rem;
  font-variant-numeric: tabular-nums;
}
.moves-pill.warning { background: var(--color-accent-tomato); color: var(--color-on-tomato); }
.moves-pill .moves-label {
  font-family: var(--font-body);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
  opacity: 0.75;
}

/* ============================================================
   Inventory bar (in-level) + adventure items (Sprint-9 push)
   ============================================================ */

.gameboard-inventory {
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
  padding: 6px var(--space-md);
  background: var(--color-neutral);
  border-bottom: var(--border-standard) solid var(--color-primary);
}
.inv-pill {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--color-surface-raised);
  border: var(--border-standard) solid var(--color-primary);
  border-radius: var(--radius-full);
  padding: 4px 12px 4px 8px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--text-body-sm);
  color: var(--color-primary);
  box-shadow: var(--shadow-toy-sm);
  cursor: pointer;
  transition: transform var(--duration-fast) var(--ease-out-toy),
              box-shadow var(--duration-fast) var(--ease-out-toy);
  -webkit-tap-highlight-color: transparent;
}
.inv-pill:active { transform: translate(2px, 2px); box-shadow: var(--shadow-press); }
.inv-pill.armed {
  background: var(--color-accent-butter);
  outline: 3px solid var(--color-tertiary);
  outline-offset: -2px;
  animation: armedBreath 1.1s ease-in-out infinite;
}
.inv-pill .inv-emoji { font-size: 1.05rem; line-height: 1; }
.inv-pill .inv-count {
  font-family: var(--font-display);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
@keyframes armedBreath {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.06); }
}
.inv-armed-hint {
  font-size: var(--text-caption);
  font-weight: 700;
  letter-spacing: var(--tracking-caption);
  text-transform: uppercase;
  color: var(--color-tertiary);
}
body.hammer-armed .tile { cursor: crosshair; }

.time-bonus-float {
  position: absolute;
  top: -10px; left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.35rem;
  color: var(--color-tertiary);
  pointer-events: none;
  animation: timeBonusFloat 900ms var(--ease-out-soft) forwards;
}
@keyframes timeBonusFloat {
  from { transform: translate(-50%, 0); opacity: 1; }
  to   { transform: translate(-50%, -36px); opacity: 0; }
}

/* ============================================================
   Royal Workshop (Sprint-9 push)
   ============================================================ */

.workshop-pill {
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--color-accent-butter);
  border: var(--border-standard) solid var(--color-primary);
  border-radius: var(--radius-full);
  padding: 4px 12px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.95rem;
  color: var(--color-on-butter);
  text-decoration: none;
  box-shadow: var(--shadow-toy-sm);
  font-variant-numeric: tabular-nums;
  margin: 0 8px;
}
.workshop-pill:active { transform: translate(2px, 2px); box-shadow: var(--shadow-press); }

.workshop-stage {
  padding: var(--space-md);
  display: flex; flex-direction: column; gap: var(--space-md);
  min-height: calc(100vh - 73px);
}
.workshop-stars-banner {
  display: flex; align-items: center; gap: 8px;
  background: var(--color-accent-butter);
  border: var(--border-standard) solid var(--color-primary);
  border-radius: var(--radius-md);
  padding: 10px var(--space-md);
  box-shadow: var(--shadow-toy-sm);
  color: var(--color-on-butter);
  font-weight: 600;
}
.workshop-stars-banner strong {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.2rem;
}
.workshop-grid {
  display: flex; flex-direction: column; gap: var(--space-sm);
}
.workshop-card {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-sm) var(--space-md);
  background: var(--color-surface-raised);
  border: var(--border-standard) solid var(--color-primary);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  box-shadow: var(--shadow-toy-md);
  align-items: start;
}
.workshop-card-icon {
  width: 56px; height: 56px;
  display: inline-flex; align-items: center; justify-content: center;
  border: var(--border-standard) solid var(--color-primary);
  border-radius: var(--radius-md);
  font-size: 1.6rem;
  box-shadow: var(--shadow-toy-sm);
}
.workshop-card-body { display: flex; flex-direction: column; gap: 4px; }
.workshop-card-title {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: -0.015em;
}
.workshop-card-tagline { font-size: 0.85rem; font-weight: 700; color: var(--color-tertiary); }
.workshop-card-desc { font-size: 0.85rem; color: var(--color-secondary); line-height: 1.45; }
.workshop-card-meta {
  display: flex; gap: var(--space-md); align-items: center;
  margin-top: 6px;
  font-size: var(--text-body-sm);
}
.workshop-owned strong { font-family: var(--font-display); font-weight: 800; }
.workshop-cost {
  display: inline-flex; align-items: center; gap: 4px;
  color: var(--color-accent-tomato);
  font-weight: 700;
}
.workshop-cost strong { font-family: var(--font-display); font-weight: 800; font-size: 1.05rem; }
.workshop-buy {
  grid-column: 1 / -1;
  margin-top: 4px;
}

.prelevel-charm-row {
  display: flex; align-items: center; justify-content: space-between;
  background: var(--color-accent-butter);
  border: var(--border-standard) solid var(--color-primary);
  border-radius: var(--radius-md);
  padding: 10px var(--space-md);
  box-shadow: var(--shadow-toy-sm);
  font-weight: 600;
  color: var(--color-on-butter);
}

.gameboard-king-banner {
  background: var(--color-accent-sky);
  color: var(--color-on-sky);
  font-size: var(--text-body-sm);
  font-weight: 600;
  padding: 10px var(--space-md);
  border-bottom: var(--border-standard) solid var(--color-primary);
  text-align: center;
  line-height: 1.35;
}

.gameboard-grid-wrap {
  flex: 1;
  display: flex; align-items: center; justify-content: center;
  padding: var(--space-md);
}

.tile-grid {
  --grid-cols: 9;
  /* viewport - app padding (36) - grid border (4) - grid padding (20) - gaps (cols-1)*4 */
  --tile-size: clamp(26px, calc((100vw - 90px) / var(--grid-cols)), 36px);
  display: grid;
  grid-template-columns: repeat(var(--grid-cols), var(--tile-size));
  grid-auto-rows: var(--tile-size);
  gap: 4px;
  padding: 10px;
  background: var(--color-surface-raised);
  border: var(--border-standard) solid var(--color-primary);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-toy-md);
  user-select: none;
  touch-action: manipulation;
}
.tile {
  width: var(--tile-size);
  height: var(--tile-size);
  border-radius: var(--radius-sm);
  border: var(--border-standard) solid var(--color-primary);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  font-family: var(--font-display);
  font-weight: 800;
  color: var(--color-primary);
  position: relative;
  transition: transform 140ms var(--ease-out-toy), box-shadow 140ms var(--ease-out-toy);
  -webkit-tap-highlight-color: transparent;
}
.tile.selected {
  transform: translateY(-3px);
  box-shadow: 0 4px 0 var(--color-shadow-walnut);
  outline: 3px solid var(--color-tertiary);
  outline-offset: -2px;
}
.tile.hinted {
  animation: hintPulse 1.4s var(--ease-out-soft) infinite;
}
.tile.hinted-strong {
  animation: hintPulseStrong 1s var(--ease-out-soft) infinite;
  outline: 2px solid var(--color-tertiary);
  outline-offset: -1px;
}
@keyframes hintPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(107,155,94,0); }
  50%      { box-shadow: 0 0 0 5px rgba(107,155,94,0.45); }
}
@keyframes hintPulseStrong {
  0%, 100% { box-shadow: 0 0 0 0 rgba(107,155,94,0); }
  50%      { box-shadow: 0 0 0 8px rgba(107,155,94,0.6); }
}
.tile.clearing {
  animation: tileClear 240ms var(--ease-out-toy) forwards;
}
@keyframes tileClear {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.18); }
  100% { transform: scale(0); opacity: 0; }
}
.tile.invalid {
  animation: tileShake 320ms ease-in-out;
}
@keyframes tileShake {
  0%, 100% { transform: translateX(0); }
  25%      { transform: translateX(-4px); }
  50%      { transform: translateX(4px); }
  75%      { transform: translateX(-3px); }
}
.tile.spawned {
  animation: tileSpawn 220ms var(--ease-out-toy);
}
@keyframes tileSpawn {
  from { transform: translateY(-12px) scale(0.9); opacity: 0; }
  to   { transform: translateY(0) scale(1); opacity: 1; }
}

/* Tile colours — drive from DESIGN.md tokens */
.tile.color-red    { background: var(--color-accent-tomato); color: var(--color-on-tomato); }
.tile.color-blue   { background: var(--color-accent-sky);    color: var(--color-on-sky); }
.tile.color-green  { background: var(--color-tertiary);      color: var(--color-on-tertiary); }
.tile.color-yellow { background: var(--color-accent-butter); color: var(--color-on-butter); }
.tile.color-purple { background: var(--color-accent-grape);  color: var(--color-neutral); }
.tile.color-orange { background: var(--color-accent-orange); color: var(--color-primary); }

.tile.obstacle-crate { background: #C9A26B; }
.tile.obstacle-ice   { background: #BCDDEA; }
.tile.creature       { background: var(--color-surface-raised); }

.tile-pictogram {
  width: 60%; height: 60%;
  display: block;
}
.tile-booster-marker {
  position: absolute;
  bottom: 1px; right: 2px;
  font-size: 0.55rem;
  letter-spacing: 0.06em;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--color-on-primary);
  background: var(--color-primary);
  border-radius: 3px;
  padding: 1px 3px;
}
.obstacle-hits {
  position: absolute;
  top: 1px; right: 2px;
  font-size: 0.65rem;
  font-weight: 800;
  color: var(--color-primary);
  background: var(--color-surface-raised);
  border: 1px solid var(--color-primary);
  border-radius: 3px;
  padding: 0 3px;
}

/* ============================================================
   Renovation (Sprint 7)
   ============================================================ */

.renovation-stage {
  padding: var(--space-md);
  display: flex; flex-direction: column; gap: var(--space-md);
  min-height: calc(100vh - 73px);
}

.room-preview {
  background: linear-gradient(180deg, #F8E5C4 0%, #F2D9B0 100%);
  border: var(--border-standard) solid var(--color-primary);
  border-radius: var(--radius-lg);
  padding: var(--space-md);
  box-shadow: var(--shadow-toy-md);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-sm);
  position: relative;
  min-height: 240px;
}

.room-element-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  align-items: stretch;
  width: 100%;
}
.room-element {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  background: var(--color-surface-raised);
  border: var(--border-standard) solid var(--color-primary);
  border-radius: var(--radius-md);
  padding: 12px 8px;
  min-height: 72px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.85rem;
  text-align: center;
  gap: 4px;
  box-shadow: var(--shadow-toy-sm);
}
.room-element .room-element-emoji {
  font-size: 1.6rem;
  line-height: 1;
}
.room-element .room-element-label {
  font-family: var(--font-body);
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-secondary);
}
.room-element.empty {
  background: rgba(255,255,255,0.4);
  color: var(--color-secondary);
  font-style: italic;
}
.room-element.active-task {
  outline: 3px dashed var(--color-tertiary);
  outline-offset: -2px;
}

.renovation-prompt-card {
  background: var(--color-surface-raised);
  border: var(--border-standard) solid var(--color-primary);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  box-shadow: var(--shadow-toy-md);
  display: flex; flex-direction: column; gap: var(--space-md);
}
.renovation-prompt-card h2 {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0;
  line-height: 1.1;
}
.renovation-cost {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--text-caption);
  font-weight: 700;
  letter-spacing: var(--tracking-caption);
  text-transform: uppercase;
  color: var(--color-tertiary);
}

.renovation-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 10px;
}
.renovation-option {
  display: flex; flex-direction: column;
  align-items: center;
  gap: 6px;
  background: var(--color-surface-raised);
  border: var(--border-standard) solid var(--color-primary);
  border-radius: var(--radius-md);
  padding: 12px 8px;
  cursor: pointer;
  font-family: var(--font-body);
  font-weight: 700;
  color: var(--color-primary);
  box-shadow: var(--shadow-toy-sm);
  transition: transform 140ms var(--ease-out-toy), box-shadow 140ms var(--ease-out-toy);
  -webkit-tap-highlight-color: transparent;
}
.renovation-option:active { transform: translate(2px,2px); box-shadow: var(--shadow-press); }
.renovation-option.selected {
  background: var(--color-accent-butter);
  outline: 3px solid var(--color-tertiary);
  outline-offset: -2px;
}
.renovation-option .swatch-preview {
  width: 100%; height: 38px;
  border-radius: var(--radius-sm);
  border: var(--border-standard) solid var(--color-primary);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem;
}
.renovation-option-label { font-size: 0.85rem; }

.renovation-actions {
  display: flex; gap: var(--space-sm);
}
.renovation-actions .btn-primary { flex: 1; }
.renovation-stars-summary {
  display: flex; align-items: center; justify-content: space-between;
  font-size: var(--text-body-sm);
  color: var(--color-secondary);
  font-weight: 600;
}

.area-progress-strip {
  display: flex; gap: 6px; align-items: center;
  font-size: var(--text-caption);
  font-weight: 700;
  letter-spacing: var(--tracking-caption);
  text-transform: uppercase;
  color: var(--color-secondary);
}
.area-progress-pip {
  width: 14px; height: 14px;
  border: var(--border-standard) solid var(--color-primary);
  border-radius: var(--radius-full);
  background: var(--color-surface-raised);
}
.area-progress-pip.done { background: var(--color-tertiary); }

/* ============================================================
   Area Complete celebration (Sprint 7)
   ============================================================ */

.area-complete-stage {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: 100vh;
  padding: var(--space-xl) var(--space-md);
  text-align: center;
  gap: var(--space-md);
  position: relative;
  overflow: hidden;
}
.area-complete-stage::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 30% 20%, rgba(242,200,75,0.25), transparent 30%),
    radial-gradient(circle at 70% 60%, rgba(217,87,59,0.18), transparent 35%),
    radial-gradient(circle at 50% 90%, rgba(107,155,94,0.18), transparent 40%);
  z-index: 0;
}
.area-complete-stage > * { position: relative; z-index: 1; }

.area-complete-king {
  width: 160px; height: 180px;
  filter: drop-shadow(4px 4px 0 var(--color-primary));
  animation: kingDance 0.9s var(--ease-out-toy) infinite;
}
@keyframes kingDance {
  0%, 100% { transform: translateY(0) rotate(-3deg); }
  50%      { transform: translateY(-10px) rotate(3deg); }
}
.area-complete-title {
  font-family: var(--font-display);
  font-size: 2.5rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1;
  margin: 0;
}
.area-complete-title em {
  color: var(--color-accent-tomato);
  font-style: normal;
}
.area-complete-bubble {
  background: var(--color-surface-raised);
  border: var(--border-standard) solid var(--color-primary);
  border-radius: var(--radius-lg);
  padding: var(--space-md) 22px;
  box-shadow: var(--shadow-toy-lg);
  font-size: var(--text-body-lg);
  max-width: 320px;
  margin-top: var(--space-sm);
}

.confetti-piece {
  position: absolute;
  width: 12px; height: 16px;
  border-radius: 2px;
  border: 1.5px solid var(--color-primary);
  animation: confettiFall 2.4s linear infinite;
  z-index: 0;
}
@keyframes confettiFall {
  0%   { transform: translate(var(--cx), -40px) rotate(0deg); opacity: 1; }
  100% { transform: translate(var(--cx), 110vh) rotate(720deg); opacity: 0.4; }
}

/* ============================================================
   Out of lives + Parent gate + Settings (Sprint 8)
   ============================================================ */

.center-stage {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  min-height: calc(100vh - 73px);
  padding: var(--space-xl) var(--space-md);
  text-align: center;
  gap: var(--space-md);
}
.center-stage h2 {
  font-family: var(--font-display);
  font-size: 2.25rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0;
  max-width: 320px;
}

.regen-clock {
  font-family: var(--font-display);
  font-size: 3rem;
  font-weight: 800;
  letter-spacing: -0.025em;
  font-variant-numeric: tabular-nums;
  color: var(--color-accent-tomato);
  background: var(--color-surface-raised);
  border: var(--border-standard) solid var(--color-primary);
  border-radius: var(--radius-lg);
  padding: 12px 28px;
  box-shadow: var(--shadow-toy-md);
  display: inline-block;
}

.heart-row {
  display: inline-flex; gap: 6px;
}
.heart-row .heart-pip {
  width: 28px; height: 28px;
  border: var(--border-standard) solid var(--color-primary);
  border-radius: var(--radius-full);
  background: var(--color-surface-raised);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--color-secondary);
}
.heart-row .heart-pip.full { background: var(--color-accent-tomato); color: var(--color-on-tomato); }

.math-input {
  width: 160px;
  padding: 12px 16px;
  border: var(--border-standard) solid var(--color-primary);
  border-radius: var(--radius-md);
  background: var(--color-surface-raised);
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 800;
  text-align: center;
  font-variant-numeric: tabular-nums;
  color: var(--color-primary);
  box-shadow: var(--shadow-toy-sm);
}

.settings-list {
  display: flex; flex-direction: column;
  width: 100%;
  max-width: 320px;
  gap: var(--space-sm);
}
.settings-row {
  display: flex; align-items: center; justify-content: space-between;
  background: var(--color-surface-raised);
  border: var(--border-standard) solid var(--color-primary);
  border-radius: var(--radius-md);
  padding: 14px var(--space-md);
  box-shadow: var(--shadow-toy-sm);
  font-weight: 700;
}
.toggle-switch {
  width: 52px; height: 28px;
  border: var(--border-standard) solid var(--color-primary);
  border-radius: var(--radius-full);
  background: var(--color-surface-raised);
  position: relative;
  cursor: pointer;
  transition: background 180ms ease;
  flex-shrink: 0;
}
.toggle-switch::after {
  content: '';
  position: absolute;
  width: 18px; height: 18px;
  border: var(--border-standard) solid var(--color-primary);
  border-radius: var(--radius-full);
  background: var(--color-neutral);
  top: 3px; left: 3px;
  transition: transform 180ms var(--ease-out-toy);
}
.toggle-switch.on { background: var(--color-tertiary); }
.toggle-switch.on::after { transform: translateX(24px); background: var(--color-on-tertiary); }

.parent-stat-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-sm);
  width: 100%;
  max-width: 320px;
}
.parent-stat {
  background: var(--color-surface-raised);
  border: var(--border-standard) solid var(--color-primary);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  text-align: center;
}
.parent-stat .num {
  font-family: var(--font-display);
  font-size: 1.65rem;
  font-weight: 800;
  color: var(--color-tertiary);
  font-variant-numeric: tabular-nums;
}
.parent-stat .label {
  font-size: var(--text-caption);
  font-weight: 700;
  letter-spacing: var(--tracking-caption);
  text-transform: uppercase;
  color: var(--color-secondary);
}

.privacy-block {
  font-size: 0.85rem;
  color: var(--color-secondary);
  background: var(--color-surface-raised);
  border: var(--border-standard) solid var(--color-secondary);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  text-align: left;
  line-height: 1.55;
  max-width: 320px;
}

/* ============================================================
   Modals (pause, win, lose — Sprints 4+6)
   ============================================================ */

.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(61, 42, 27, 0.55);
  display: flex; align-items: center; justify-content: center;
  z-index: 1000;
  padding: var(--space-md);
}
.modal-card {
  background: var(--color-surface-raised);
  border: var(--border-standard) solid var(--color-primary);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  box-shadow: var(--shadow-toy-lg);
  max-width: 320px;
  width: 100%;
  display: flex; flex-direction: column; gap: var(--space-md);
  text-align: center;
  animation: fadeIn var(--duration-pop) var(--ease-out-soft);
}
.modal-card h2 {
  font-family: var(--font-display);
  font-size: 1.65rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0;
}
.modal-actions {
  display: flex; flex-direction: column; gap: var(--space-sm);
}

.starburst-row {
  display: flex; gap: 6px; justify-content: center;
  margin: var(--space-sm) 0;
}
.star-pip {
  width: 32px; height: 32px;
  border: var(--border-standard) solid var(--color-primary);
  border-radius: var(--radius-full);
  background: var(--color-secondary);
  color: var(--color-neutral);
  display: inline-flex; align-items: center; justify-content: center;
}
.star-pip.earned {
  background: var(--color-accent-butter);
  color: var(--color-on-butter);
  animation: starPop 360ms var(--ease-out-toy);
}
@keyframes starPop {
  from { transform: scale(0); }
  60%  { transform: scale(1.2); }
  to   { transform: scale(1); }
}