/* 3 Elephants Bakery — warm bakery theme */
:root, [data-kitchen="0"] {
  --cocoa-900: #170b05;
  --cocoa-800: #2b170d;
  --cocoa-700: #4a2c1a;
  --cocoa-600: #6b3e1f;
  --caramel: #c98a44;
  --gold: #f0c46a;
  --gold-hi: #ffe3a0;
  --cream: #fff7e4;
  --cream-2: #f1d9a6;
  --ink: #4a2510;
  --ink-soft: #a0612a;
  --pink: #ff9cbe;
  --gold-rgb: 240, 196, 106;
  --glow-rgb: 240, 160, 70;
  --wood-hi: #7a4724;
  --wood-lo: #4a2814;
  --board-hi: #8b5a2b;
  --board-lo: #5e3a1a;
  --max: 460px;
  color-scheme: dark; /* deliberate single dark "warm kitchen" look */
}

/* Kitchens: every 10 levels the frames, board wood and glow take a new color (js/kitchens.js).
   Still the one dark look; only the accent changes. Kitchen 0 (Morning Bakery) is the default above. */
[data-kitchen="1"] { /* Strawberry Kitchen */
  --gold: #ff9cbe; --gold-hi: #ffd9e6; --gold-rgb: 255, 156, 190; --glow-rgb: 255, 110, 150;
  --wood-hi: #8a3552; --wood-lo: #4f1a2e; --board-hi: #9a4a5e; --board-lo: #5e2436;
  --cocoa-700: #4a1a2a; --cocoa-800: #2b0f18; --cocoa-900: #16070c;
}
[data-kitchen="2"] { /* Pistachio Garden */
  --gold: #a8e07a; --gold-hi: #e2f7c8; --gold-rgb: 168, 224, 122; --glow-rgb: 150, 220, 110;
  --wood-hi: #4c6e2c; --wood-lo: #2a4016; --board-hi: #6b7a3a; --board-lo: #3d4a1e;
  --cocoa-700: #2f3a1a; --cocoa-800: #1a2410; --cocoa-900: #0c1207;
}
[data-kitchen="3"] { /* Blueberry Night */
  --gold: #8fb8ff; --gold-hi: #d6e6ff; --gold-rgb: 143, 184, 255; --glow-rgb: 110, 150, 255;
  --wood-hi: #34477e; --wood-lo: #1c2850; --board-hi: #4a5788; --board-lo: #283258;
  --cocoa-700: #1e2448; --cocoa-800: #121633; --cocoa-900: #080a1a;
}
[data-kitchen="4"] { /* Lavender Loft */
  --gold: #c9a6ff; --gold-hi: #ece0ff; --gold-rgb: 201, 166, 255; --glow-rgb: 180, 130, 255;
  --wood-hi: #5c3a86; --wood-lo: #34205a; --board-hi: #6a4a8c; --board-lo: #3c2858;
  --cocoa-700: #34204a; --cocoa-800: #1e122e; --cocoa-900: #0e0818;
}
[data-kitchen="5"] { /* Caramel Sunset */
  --gold: #ffab5c; --gold-hi: #ffe0b8; --gold-rgb: 255, 171, 92; --glow-rgb: 255, 120, 60;
  --wood-hi: #8e3f1c; --wood-lo: #55210c; --board-hi: #9a5226; --board-lo: #5e2c12;
  --cocoa-700: #4e2010; --cocoa-800: #2e1208; --cocoa-900: #170804;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none; }
html, body { margin: 0; height: 100%; }
body {
  font-family: 'Fredoka', system-ui, -apple-system, 'Segoe UI', sans-serif;
  color: var(--cream);
  background:
    radial-gradient(rgba(255, 240, 210, 0.05) 1px, transparent 1.6px) 0 0 / 22px 22px,
    radial-gradient(circle at 50% 30%, rgba(var(--glow-rgb), 0.18), transparent 60%),
    radial-gradient(circle at 50% 12%, var(--cocoa-700) 0%, var(--cocoa-800) 55%, var(--cocoa-900) 100%);
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding-block: 8px 0;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
  touch-action: none;
}
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }
.hidden { display: none !important; }
.row { display: flex; align-items: center; gap: 6px; }
.fill-box { width: 100%; height: 100%; display: block; }

#spriteHost { position: absolute; width: 0; height: 0; overflow: hidden; }
#confettiCanvas { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 80; }

/* ---------- HUD ---------- */
.hud {
  width: 100%; max-width: var(--max);
  display: flex; gap: 6px; padding: 6px;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--wood-hi), var(--wood-lo));
  border: 3px solid var(--gold);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.55), inset 0 2px 0 rgba(255, 230, 170, 0.5);
}
.hud-pod {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 4px 8px; border-radius: 999px;
  background: linear-gradient(180deg, var(--cream), var(--cream-2));
  box-shadow: inset 0 -3px 0 rgba(150, 90, 30, 0.35), inset 0 2px 0 #fff;
}
.hud-moves { flex: 0 0 auto; min-width: 72px; }
.hud-goal { flex: 1; }
.hud-wallet { flex: 0 0 auto; flex-direction: row; justify-content: space-around; gap: 10px; padding-inline: 12px; }
.hud-wallet .hud-num { font-variant-numeric: tabular-nums; }
.hud-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-soft); }
.hud-label.light { color: var(--gold); }
.hud-num { font-weight: 700; color: var(--ink); line-height: 1; font-size: 17px; }
.hud-num.big { font-size: 26px; }
.hud-num.sm { font-size: 14px; }
.hud-icon { width: 20px; height: 20px; }
.hud-icon.lg { width: 26px; height: 26px; }
.goals { gap: 10px; }
.goal { gap: 3px; }
.hud-icon svg { width: 100%; height: 100%; display: block; }

/* ---------- Chat + Bella banner ---------- */
.chat-bar {
  width: 100%; max-width: var(--max);
  display: flex; align-items: center; gap: 8px;
  padding: 3px 12px 3px 4px; border-radius: 999px;
  background: rgba(60, 30, 12, 0.75); border: 1px solid rgba(var(--gold-rgb), 0.4);
  font-size: 12px; font-weight: 600; color: var(--gold-hi);
  transition: transform 0.25s;
}
.chat-bar.pop { transform: scale(1.04); }
.chat-bar span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-avatar { width: 30px; height: 30px; flex-shrink: 0; border-radius: 50%; overflow: hidden; background: #ffe4ed; border: 1.5px solid #f9a8c9; }

.view { width: 100%; max-width: var(--max); flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; }
#matchView { justify-content: space-evenly; } /* spare height goes around the board, not above the tabs */

.bella-banner {
  width: 100%; display: flex; align-items: center; gap: 4px; padding: 0 8px;
  background: linear-gradient(90deg, rgba(60, 30, 12, 0.85), rgba(40, 22, 10, 0.85), rgba(60, 30, 12, 0.85));
  border: 1px solid rgba(var(--gold-rgb), 0.4); border-radius: 16px;
}
.bella-scene { width: 84px; height: 88px; margin: -12px 0 -2px; flex-shrink: 0; position: relative; }
.level-strip { display: flex; align-items: center; gap: 8px; }
.level-chip { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink);
  background: linear-gradient(180deg, var(--gold-hi), var(--gold)); padding: 2px 9px; border-radius: 999px; white-space: nowrap; }
.level-chip b { font-size: 13px; }
.level-bar { flex: 1; height: 10px; border-radius: 999px; background: rgba(0, 0, 0, 0.4); border: 1px solid rgba(var(--gold-rgb), 0.4); overflow: hidden; }
#levelBarFill { height: 100%; width: 0; border-radius: 999px; position: relative; overflow: hidden;
  background: linear-gradient(90deg, var(--gold), var(--gold-hi)); box-shadow: 0 0 8px rgba(var(--gold-rgb), 0.7);
  transition: width 0.5s cubic-bezier(0.3, 1.3, 0.5, 1); }
#levelBarFill::after { content: ''; position: absolute; inset: 0; transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.75), transparent); animation: barShine 2.4s ease-in-out infinite; }
@keyframes barShine { 60%, 100% { transform: translateX(100%); } }
.level-bar.bump { animation: barBump 0.45s ease-out; }
@keyframes barBump { 40% { transform: scaleY(1.6); box-shadow: 0 0 12px rgba(var(--gold-rgb), 0.9); } }
.live-stars { display: flex; gap: 1px; font-size: 14px; line-height: 1; }
.live-stars .star { color: rgba(255, 255, 255, 0.2); transition: color 0.3s, transform 0.3s; }
.live-stars .star.lit { color: #ffd34d; text-shadow: 0 0 6px rgba(255, 190, 60, 0.8); }
.bella-text { flex: 1; min-width: 0; padding: 4px 4px 4px 0; }
.chip-pink { font-size: 10px; font-weight: 700; text-transform: uppercase; color: #ffc2d6; background: rgba(100, 20, 50, 0.7); border: 1px solid rgba(255, 156, 190, 0.4); padding: 1px 8px; border-radius: 999px; }
.shop-label { font-size: 10px; font-weight: 600; color: rgba(255, 210, 140, 0.8); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#bellaCheerQuote { margin: 3px 0 0; font-size: 11.5px; font-weight: 600; line-height: 1.2; color: #fbe9c8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- Board ---------- */
.board {
  --cols: 7; --rows: 9; /* set from js/board.js WIDTH × HEIGHT by game.js */
  --size: min(430px, calc(100vw - 32px), calc((100dvh - 330px) * var(--cols) / var(--rows)));
  width: max(230px, var(--size));
  max-width: 100%;
  aspect-ratio: var(--cols) / var(--rows);
  position: relative;
  padding: 10px;
  border-radius: 24px;
  background:
    repeating-linear-gradient(92deg, rgba(0, 0, 0, 0.07) 0 3px, transparent 3px 11px),
    linear-gradient(180deg, var(--board-hi), var(--board-lo));
  border: 4px solid var(--gold);
  box-shadow: 0 22px 44px rgba(0, 0, 0, 0.7), inset 0 3px 5px rgba(255, 220, 160, 0.45), inset 0 -6px 10px rgba(0, 0, 0, 0.5);
}
.grid {
  width: 100%; height: 100%;
  display: grid; grid-template-columns: repeat(var(--cols), 1fr); grid-template-rows: repeat(var(--rows), 1fr);
  gap: 3px; overflow: hidden; border-radius: 14px;
}
.cell {
  position: relative; border-radius: 10px;
  background: radial-gradient(circle at 50% 35%, #fff8ea 0%, #f0dcb6 100%);
  box-shadow: inset 0 2px 4px rgba(120, 70, 30, 0.35), inset 0 -1px 0 rgba(255, 255, 255, 0.6);
  touch-action: none;
}
.cell.alt { background: radial-gradient(circle at 50% 35%, #fbefd6 0%, #e6cc9e 100%); }
.cell.blocked { background: radial-gradient(circle at 50% 35%, #d9bf92 0%, #a98451 100%); }
.cell.selected { box-shadow: 0 0 0 3px #ffd34d, 0 0 14px rgba(255, 211, 77, 0.9), inset 0 0 8px rgba(255, 211, 77, 0.6); z-index: 2; }

.tile { position: absolute; inset: 0; padding: 6%; z-index: 1; will-change: transform; }
.tile > svg { width: 100%; height: 100%; display: block; overflow: visible; filter: drop-shadow(0 2px 1.5px rgba(60, 30, 10, 0.35)); }
/* Colored tile backs: each pastry has its own pale color so matches stand out (Settings → Colored tiles).
   The tint moves with the pastry as it falls. */
.tile[data-piece]::before { content: ''; position: absolute; inset: 4%; border-radius: 24%; z-index: -1;
  background: radial-gradient(circle at 50% 32%, var(--tint-hi) 0%, var(--tint) 100%); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.55); }
.tile[data-piece="sourdough"] { --tint: #a9cbf5; --tint-hi: #e4effd; }
.tile[data-piece="cookie"] { --tint: #9fdcb6; --tint-hi: #e2f7ea; }
.tile[data-piece="croissant"] { --tint: #f5dc6a; --tint-hi: #fff8d0; }
.tile[data-piece="muffin"] { --tint: #c9b2f2; --tint-hi: #efe6ff; }
.tile[data-piece="macaron"] { --tint: #f7a9c4; --tint-hi: #ffe6ef; }
.tile[data-piece="eclair"] { --tint: #f5b58a; --tint-hi: #ffeadb; }
body.plain-tiles .tile[data-piece]::before { display: none; }
.tile.pop[data-piece]::before { animation: popOut 0.3s ease-in both; animation-delay: inherit; }
.tile .overlay { position: absolute; inset: 4%; width: 92%; height: 92%; pointer-events: none; overflow: visible; }

.tile.drop {
  animation: dropIn calc(0.2s + var(--fall, 1) * 0.045s) cubic-bezier(0.3, 1.25, 0.55, 1) backwards;
}
@keyframes dropIn { from { transform: translateY(calc(var(--fall, 1) * -105%)); } }

.tile.pop { animation: none; }
/* Clearing: the pastry squashes, swells and pops while a sparkle ring flies out.
   An inline animation-delay on the tile (ripple from a special) is passed down with inherit. */
.tile.pop > svg, .tile.pop .overlay { animation: popOut 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) both; animation-delay: inherit; }
@keyframes popOut {
  0% { transform: scale(1); }
  20% { transform: scale(1.18, 0.82); }
  50% { transform: scale(1.32) rotate(8deg); filter: brightness(1.45) drop-shadow(0 0 6px #fff3c4); }
  100% { transform: scale(0) rotate(-20deg); opacity: 0; }
}
.tile.pop::after { content: ''; position: absolute; inset: 8%; border-radius: 50%; pointer-events: none;
  border: 3px solid rgba(255, 244, 200, 0.95); box-shadow: 0 0 10px rgba(255, 220, 140, 0.8);
  animation: popRing 0.38s ease-out both; animation-delay: inherit; }
@keyframes popRing { 0% { transform: scale(0.3); opacity: 0; } 30% { opacity: 1; } 100% { transform: scale(1.6); opacity: 0; } }
.tile.pop-special > svg, .tile.pop-special .overlay { animation: popSpecial 0.42s cubic-bezier(0.2, 1.2, 0.4, 1) both; animation-delay: inherit; }
@keyframes popSpecial {
  0% { transform: scale(1); }
  35% { transform: scale(1.6) rotate(-10deg); filter: brightness(2) drop-shadow(0 0 14px #ffe08a); }
  100% { transform: scale(0) rotate(160deg); opacity: 0; }
}
.tile.pop-special::after { border-width: 5px; border-color: #ffe08a; animation-duration: 0.5s; }

/* Special-piece bursts (js/effects.js) */
.fx-ring { position: fixed; z-index: 62; pointer-events: none; width: var(--s, 120px); height: var(--s, 120px);
  margin: calc(var(--s, 120px) / -2) 0 0 calc(var(--s, 120px) / -2); border-radius: 50%;
  animation: ringOut 0.6s cubic-bezier(0.2, 0.8, 0.3, 1) forwards; }
.fx-ring.gold { border: 5px solid #ffe08a; box-shadow: 0 0 18px #ffc94d, inset 0 0 14px rgba(255, 224, 138, 0.8); }
.fx-ring.flour { border: 9px solid rgba(255, 253, 245, 0.95); box-shadow: 0 0 24px rgba(255, 250, 235, 0.9);
  background: radial-gradient(circle, rgba(255, 252, 240, 0.5), transparent 60%); }
.fx-ring.rainbow { background: conic-gradient(#ff6fb5, #ffe36b, #8ce07a, #4fd8e6, #c9a6ff, #ff6fb5);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 8px), #000 calc(100% - 7px));
          mask: radial-gradient(farthest-side, transparent calc(100% - 8px), #000 calc(100% - 7px));
  filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.8)); }
@keyframes ringOut { 0% { transform: scale(0.1); opacity: 1; } 70% { opacity: 0.9; } 100% { transform: scale(1); opacity: 0; } }

.sprinkle { position: fixed; z-index: 63; pointer-events: none; width: 4px; height: 12px; border-radius: 3px;
  box-shadow: 0 0 4px rgba(255, 255, 255, 0.6); transform: translate(-50%, -50%) rotate(var(--r, 0deg));
  animation: sprinkleFly 0.72s cubic-bezier(0.15, 0.7, 0.35, 1) forwards; }
@keyframes sprinkleFly {
  to { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy) + 18px)) rotate(calc(var(--r, 0deg) + 420deg)); opacity: 0; }
}

.trail-star { position: fixed; z-index: 64; pointer-events: none; font-size: 20px; line-height: 1; color: #fff6c8;
  text-shadow: 0 0 6px #ffd25e, 0 0 14px #ffb84d; transform: translate(-50%, -50%) scale(0);
  animation: trailStar 0.6s ease-out both; }
@keyframes trailStar {
  0% { transform: translate(-50%, -50%) scale(0) rotate(-90deg); opacity: 0; }
  35% { transform: translate(-50%, -50%) scale(1.4) rotate(0deg); opacity: 1; }
  100% { transform: translate(-50%, -110%) scale(0.4) rotate(40deg); opacity: 0; }
}

.board-flash { position: absolute; inset: 0; z-index: 55; border-radius: 20px; pointer-events: none; mix-blend-mode: screen;
  animation: boardFlash 0.42s ease-out forwards; }
@keyframes boardFlash { 0% { opacity: 0; } 15% { opacity: 1; } 100% { opacity: 0; } }

.shake-big { animation: shakeBig 0.42s cubic-bezier(0.36, 0.07, 0.19, 0.97) both; }
@keyframes shakeBig {
  10%, 90% { transform: translate3d(-2px, 1px, 0) rotate(-0.4deg); }
  20%, 80% { transform: translate3d(4px, -2px, 0) rotate(0.5deg); }
  30%, 50%, 70% { transform: translate3d(-6px, 2px, 0) rotate(-0.6deg); }
  40%, 60% { transform: translate3d(6px, -1px, 0) rotate(0.6deg); }
}

/* Low moves: the Moves counter pulses (faster and redder at the last 3) */
.hud-moves.low { animation: movesPulse 1s ease-in-out infinite; }
.hud-moves.low .hud-num { color: #c2410c; }
.hud-moves.critical { animation-duration: 0.5s; }
.hud-moves.critical .hud-num { color: #dc2626; }
@keyframes movesPulse { 50% { transform: scale(1.08); box-shadow: 0 0 0 3px rgba(255, 120, 90, 0.7), 0 0 16px rgba(255, 90, 60, 0.8); } }
.tile.spawn { animation: spawnIn 0.4s cubic-bezier(0.2, 1.6, 0.4, 1) backwards; }
@keyframes spawnIn { from { transform: scale(0.2) rotate(-30deg); } }

/* Special pieces */
.tile.glazed > svg:first-child { filter: drop-shadow(0 0 5px rgba(255, 210, 122, 0.95)); }
.tile.glazed .overlay { animation: glazeShimmer 1.3s ease-in-out infinite; }
@keyframes glazeShimmer { 50% { opacity: 0.7; transform: scale(1.04); } }
.tile.bundle { animation: bundlePulse 1.6s ease-in-out infinite; }
@keyframes bundlePulse { 50% { transform: scale(1.06); filter: brightness(1.12); } }
.tile.bundt > svg { animation: bundtSpin 7s linear infinite; filter: drop-shadow(0 0 7px rgba(255, 210, 122, 0.9)); }
@keyframes bundtSpin { to { transform: rotate(360deg); } }

.shake { animation: shakeFX 0.28s cubic-bezier(0.36, 0.07, 0.19, 0.97) both; }
@keyframes shakeFX {
  10%, 90% { transform: translate3d(-1.5px, 0, 0); }
  20%, 80% { transform: translate3d(2.5px, 0, 0); }
  30%, 50%, 70% { transform: translate3d(-3.5px, 0, 0); }
  40%, 60% { transform: translate3d(3.5px, 0, 0); }
}

/* Glaze beams & flour puffs */
.beam { position: absolute; pointer-events: none; z-index: 50; }
.beam-h { left: 0; right: 0; height: 16px; transform: translateY(-50%);
  background: linear-gradient(90deg, transparent, #fff7e0 12%, #ffd27a 50%, #fff7e0 88%, transparent);
  box-shadow: 0 0 22px #ffb84d, 0 0 40px rgba(255, 247, 224, 0.9); animation: beamH 0.38s ease-out forwards; }
.beam-v { top: 0; bottom: 0; width: 16px; transform: translateX(-50%);
  background: linear-gradient(180deg, transparent, #fff7e0 12%, #ffd27a 50%, #fff7e0 88%, transparent);
  box-shadow: 0 0 22px #ffb84d, 0 0 40px rgba(255, 247, 224, 0.9); animation: beamV 0.38s ease-out forwards; }
@keyframes beamH { 0% { transform: translateY(-50%) scaleY(0.2); } 50% { transform: translateY(-50%) scaleY(2); } 100% { transform: translateY(-50%) scaleY(0.1); opacity: 0; } }
@keyframes beamV { 0% { transform: translateX(-50%) scaleX(0.2); } 50% { transform: translateX(-50%) scaleX(2); } 100% { transform: translateX(-50%) scaleX(0.1); opacity: 0; } }

.flour-puff {
  position: absolute; border-radius: 50%; pointer-events: none; z-index: 50; transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(255, 253, 247, 0.95) 0%, rgba(255, 244, 220, 0.6) 45%, transparent 70%);
  animation: puff 0.5s ease-out forwards;
}
.flour-puff.big { animation-name: puffBig; }
@keyframes puff { from { width: 20px; height: 20px; opacity: 1; } to { width: 180px; height: 180px; opacity: 0; } }
@keyframes puffBig { from { width: 30px; height: 30px; opacity: 1; } to { width: 300px; height: 300px; opacity: 0; } }

.crumb {
  position: fixed; z-index: 60; pointer-events: none; border-radius: 40%;
  transform: translate(-50%, -50%);
  animation: crumbFly 0.6s cubic-bezier(0.2, 0.7, 0.4, 1) forwards;
}
.crumb.puff { border-radius: 50%; filter: blur(1.5px); opacity: 0.9; }
@keyframes crumbFly { to { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) rotate(220deg) scale(0.3); opacity: 0; } }

.score-popup {
  position: fixed; z-index: 70; pointer-events: none;
  font-weight: 700; font-size: 18px; color: #fff3c4;
  text-shadow: 0 2px 3px #3a1e0c, 0 0 10px rgba(255, 190, 80, 0.9);
  animation: floatUp 0.75s cubic-bezier(0.2, 0.8, 0.2, 1) forwards; white-space: nowrap;
}
.score-popup.big { font-size: 20px; color: #ffe3a0; }
@keyframes floatUp {
  0% { transform: translate(-50%, -50%) scale(0.6); opacity: 0; }
  25% { transform: translate(-50%, -85%) scale(1.15); opacity: 1; }
  100% { transform: translate(-50%, -170%) scale(1); opacity: 0; }
}

.board-footer {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 0 4px; font-size: 11.5px; font-weight: 600; color: rgba(255, 220, 160, 0.9);
}
.board-footer span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pill-btn { flex-shrink: 0; padding: 4px 10px; border-radius: 999px; font-size: 11px; font-weight: 600;
  background: rgba(60, 30, 12, 0.85); border: 1px solid rgba(var(--gold-rgb), 0.4); color: var(--gold-hi); }
.pill-btn:active { transform: scale(0.95); }

/* ---------- The elephant family (Natalie, Noi, Deli) ---------- */
.fam .eyes-happy, .fam .eyes-sad, .fam .mouth-open, .fam .mouth-sad { display: none; }
.fam[data-mood="cheer"] .eyes-open, .fam[data-mood="sad"] .eyes-open,
.fam[data-mood="cheer"] .mouth-smile, .fam[data-mood="sad"] .mouth-smile { display: none; }
.fam[data-mood="cheer"] .eyes-happy, .fam[data-mood="cheer"] .mouth-open { display: inline; }
.fam[data-mood="sad"] .eyes-sad, .fam[data-mood="sad"] .mouth-sad { display: inline; }
.fam .eyes-open { transform-box: fill-box; transform-origin: center; animation: blink 4.6s infinite; }
@keyframes blink { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(0.1); } }
.fam .fam-ear { transform-box: view-box; }
.fam .ear-l { transform-origin: 60px 90px; animation: earL 3.2s ease-in-out infinite; }
.fam .ear-r { transform-origin: 140px 90px; animation: earR 3.2s ease-in-out infinite; }
@keyframes earL { 50% { transform: rotate(-5deg); } }
@keyframes earR { 50% { transform: rotate(5deg); } }
.fam .fam-trunk { transform-box: view-box; transform-origin: 100px 98px; animation: trunk 3.6s ease-in-out infinite; }
@keyframes trunk { 50% { transform: rotate(4deg); } }
.fam[data-mood="cheer"] .fam-trunk { animation: trunkUp 0.5s ease-in-out infinite alternate; }
@keyframes trunkUp { to { transform: rotate(-10deg) translateY(-3px); } }
.fam[data-mood="cheer"] .ear-l { animation-duration: 0.45s; }
.fam[data-mood="cheer"] .ear-r { animation-duration: 0.45s; }
.fam[data-mood="sad"] .fam-ear, .fam[data-mood="sad"] .fam-trunk { animation: none; }
.fam[data-mood="sad"] .fam-trunk { transform: rotate(8deg); }
.fam .knead-arm { transform-box: view-box; animation: knead 1.1s ease-in-out infinite; }
@keyframes knead { 50% { transform: translateY(4px); } }
.fam .dough-squish { transform-box: fill-box; transform-origin: center bottom; animation: doughPulse 1.1s ease-in-out infinite; }
@keyframes doughPulse { 50% { transform: scale(1.08, 0.88); } }
.fam .flour-dust { animation: dust 1.1s ease-out infinite; }
@keyframes dust { 0% { opacity: 0; transform: translateY(4px); } 50% { opacity: 1; } 100% { opacity: 0; transform: translateY(-8px); } }
.elephant-idle { animation: elephantBounce 3s infinite ease-in-out; transform-origin: bottom center; }
@keyframes elephantBounce { 50% { transform: translateY(-4px); } }
.elephant-cheer { animation: cheer 0.95s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important; transform-origin: bottom center; }
@keyframes cheer {
  20% { transform: scale(1.12) translateY(-12px) rotate(-4deg); filter: brightness(1.15) drop-shadow(0 0 12px #fbbf24); }
  40% { transform: scale(1.12) translateY(-16px) rotate(4deg); }
  60% { transform: scale(1.08) translateY(-8px) rotate(-2deg); }
  80% { transform: scale(1.03) translateY(-3px); }
}
.cheer-sparkle { position: absolute; pointer-events: none; font-size: 18px; z-index: 50; animation: sparkleFloat 0.8s ease-out forwards; }
@keyframes sparkleFloat {
  0% { transform: translate(-50%, -50%) scale(0.3); opacity: 0; }
  40% { transform: translate(-50%, -80%) scale(1.3); opacity: 1; }
  100% { transform: translate(-50%, -140%) scale(0.6); opacity: 0; }
}

/* ---------- Bakery shop view ---------- */
.chapter-head {
  width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 10px 12px;
  border-radius: 16px; border: 2px solid rgba(var(--gold-rgb), 0.6);
  background: linear-gradient(90deg, rgba(74, 40, 18, 0.95), rgba(43, 23, 13, 0.95));
}
.badge-gold { font-size: 10px; font-weight: 700; text-transform: uppercase; padding: 1px 8px; border-radius: 999px; background: var(--gold); color: var(--ink); white-space: nowrap; }
.chapter-title { font-size: 16px; font-weight: 700; color: var(--gold-hi); }
.chapter-sub { margin: 2px 0 0; font-size: 12px; color: rgba(255, 240, 210, 0.85); }
.chapter-progress { display: flex; flex-direction: column; align-items: center; }
#chapterProgressVal { font-size: 18px; font-weight: 700; color: var(--gold); }

.diorama {
  width: 100%; height: 214px; flex-shrink: 0; position: relative; overflow: hidden; border-radius: 16px;
  border: 3px solid var(--gold); box-shadow: 0 14px 30px rgba(0, 0, 0, 0.6);
  background: #f3d9ae;
}
.diorama-wall { position: absolute; inset: 0; }
.diorama-glow { position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse at 50% 20%, rgba(255, 236, 190, 0.35), transparent 60%), linear-gradient(180deg, transparent 70%, rgba(40, 20, 8, 0.25)); }
.shop-sign { position: absolute; top: 6px; left: 50%; transform: translateX(-50%); z-index: 2;
  padding: 3px 12px; border-radius: 6px; background: linear-gradient(180deg, var(--wood-hi), var(--wood-lo)); border: 2px solid var(--gold);
  font-size: 9px; font-weight: 700; letter-spacing: 0.12em; color: var(--gold-hi); white-space: nowrap; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); }
.station-slot { position: absolute; padding: 0; cursor: pointer; z-index: 1;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.3s; filter: drop-shadow(0 6px 6px rgba(40, 20, 8, 0.35)); }
.station-slot:hover, .station-slot:focus-visible { transform: scale(1.06); filter: drop-shadow(0 0 10px rgba(255, 210, 122, 0.9)); outline: none; }
.slot-cooling { left: 3%; top: 15%; width: 23%; height: 36%; }
.slot-display { right: 3%; top: 15%; width: 23%; height: 36%; }
.slot-oven { left: 2%; bottom: 4%; width: 27%; height: 56%; z-index: 2; }
.slot-table { right: 2%; bottom: 4%; width: 31%; height: 36%; z-index: 2; }
.slot-mixer { right: 13%; bottom: 31%; width: 13%; height: 22%; z-index: 3; }
.diorama-noi { position: absolute; left: 27%; bottom: 3%; width: 25%; height: 74%; z-index: 2; pointer-events: none; }
.diorama-natalie { position: absolute; left: 45%; bottom: 2%; width: 24%; height: 72%; z-index: 2; pointer-events: none; animation-delay: -1s; }
.diorama-deli { position: absolute; left: 62%; bottom: 1%; width: 22%; height: 66%; z-index: 4; /* in front of the mixer on the counter */ pointer-events: none; animation-delay: -2s; }
.diorama-tip { position: absolute; left: 50%; bottom: 4px; transform: translateX(-50%); z-index: 4; font-size: 9px; font-weight: 700; padding: 2px 8px; border-radius: 999px;
  background: rgba(43, 23, 13, 0.82); color: var(--gold-hi); white-space: nowrap; }
.upgrade-flash { animation: upgradeGleam 0.75s ease-out; }
@keyframes upgradeGleam {
  0% { transform: scale(0.85); filter: brightness(2.2) drop-shadow(0 0 24px #fbbf24); }
  50% { transform: scale(1.15) rotate(-3deg); filter: brightness(1.5); }
}
.venue-out { animation: venueOut 0.75s cubic-bezier(0.7, 0, 0.3, 1) forwards; }
.venue-in { animation: venueIn 0.85s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
@keyframes venueOut { to { transform: translateX(-110%) scale(0.9); opacity: 0; filter: blur(6px); } }
@keyframes venueIn { from { transform: translateX(110%) scale(0.9); opacity: 0; filter: blur(6px); } }

.stations { width: 100%; flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; padding: 2px 2px 6px; touch-action: pan-y; }
.stations::-webkit-scrollbar { width: 6px; }
.stations::-webkit-scrollbar-thumb { background: rgba(var(--gold-rgb), 0.4); border-radius: 999px; }
.station-card {
  display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 16px;
  background: linear-gradient(135deg, rgba(90, 52, 26, 0.92), rgba(43, 23, 13, 0.96));
  border: 1.5px solid rgba(var(--gold-rgb), 0.35); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.45);
  transition: border-color 0.25s, box-shadow 0.25s;
}
.station-card.flash { border-color: var(--gold); box-shadow: 0 0 0 2px var(--gold); }
.station-icon { width: 56px; height: 56px; flex-shrink: 0; border-radius: 12px; padding: 4px; background: #fff3dc; border: 1px solid rgba(var(--gold-rgb), 0.6); }
.station-info { flex: 1; min-width: 0; }
.station-name { font-size: 13px; font-weight: 700; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.station-desc { margin: 2px 0 0; font-size: 10.5px; color: rgba(255, 240, 210, 0.75); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.station-buff { display: block; margin-top: 3px; font-size: 10.5px; font-weight: 600; color: var(--gold); }
.pips { display: flex; gap: 4px; margin-left: auto; }
.pip { width: 10px; height: 10px; border-radius: 50%; background: #3a2414; border: 1.5px solid #8a6a4a; }
.pip.on { background: #fbbf24; border-color: #fef08a; box-shadow: 0 0 8px #fbbf24; }
.upgrade-btn { flex-shrink: 0; padding: 7px 10px; border-radius: 12px; font-size: 11px; font-weight: 700; display: flex; flex-direction: column; align-items: center;
  background: #3a2414; color: #a8916f; border: 1px solid #5a3d24; opacity: 0.7; }
.upgrade-btn small { font-size: 9px; margin-top: 2px; }
.upgrade-btn.can { background: linear-gradient(90deg, #fbbf24, #f59e0b); color: var(--ink); border-color: #fde68a; opacity: 1; box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3); }
.upgrade-btn.max { pointer-events: none; }
.upgrade-btn:active { transform: scale(0.95); }
.next-btn { width: 100%; padding: 12px; border-radius: 14px; font-size: 14px; font-weight: 700; color: var(--ink);
  background: linear-gradient(90deg, #fbbf24, #f59e0b, #ca8a04); border: 2px solid #fde68a; box-shadow: 0 0 24px rgba(251, 191, 36, 0.6);
  animation: pulse 1.6s infinite; }
@keyframes pulse { 50% { opacity: 0.8; } }

/* ---------- Nav ---------- */
.tabs {
  width: 100%; max-width: var(--max); margin-top: auto;
  display: flex; align-items: center; padding: 6px 10px max(6px, env(safe-area-inset-bottom));
  background: rgba(30, 15, 7, 0.95); border-top: 2px solid rgba(var(--gold-rgb), 0.4); border-radius: 16px 16px 0 0;
}
.tab { flex: 1; min-width: 0; white-space: nowrap; display: flex; align-items: center; justify-content: center; gap: 5px; padding: 7px 6px; border-radius: 12px;
  font-size: 12px; font-weight: 700; color: rgba(255, 220, 160, 0.65); border: 1px solid transparent; position: relative; }
.tab span:first-child { font-size: 16px; }
.tab.active { color: var(--gold-hi); background: rgba(90, 50, 20, 0.6); border-color: rgba(var(--gold-rgb), 0.5); }
.tab-sep { width: 1px; height: 24px; background: rgba(var(--gold-rgb), 0.3); margin: 0 6px; }
.tab-gear { width: 38px; height: 38px; }
/* Narrow phones (360-400px): drop the tab icons, stack stars over coins so the HUD fits */
@media (max-width: 400px) {
  .tab > span:first-child { display: none; }
  .tab-sep { margin: 0 4px; }
  .hud-moves { min-width: 60px; }
  .hud-wallet { flex-direction: column; align-items: flex-start; gap: 1px; padding-inline: 10px; }
}
.tab-gear svg { width: 22px; height: 22px; }
.dot { font-size: 9px; font-weight: 700; padding: 0 5px; border-radius: 999px; background: #f43f5e; color: #fff; animation: bounce 1s infinite; }
@keyframes bounce { 50% { transform: translateY(-3px); } }

/* ---------- Modal ---------- */
.modal { position: fixed; inset: 0; z-index: 90; display: flex; align-items: center; justify-content: center; padding: 16px;
  background: rgba(20, 10, 4, 0.8); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.modal-card { width: 100%; max-width: 360px; text-align: center; padding: 24px; border-radius: 24px; position: relative;
  background: linear-gradient(180deg, var(--cocoa-700), var(--cocoa-800) 70%, var(--cocoa-900)); border: 3.5px solid var(--gold); box-shadow: 0 0 50px rgba(var(--gold-rgb), 0.4);
  animation: modalIn 0.4s cubic-bezier(0.2, 1.4, 0.4, 1); }
@keyframes modalIn { from { transform: scale(0.8); opacity: 0; } }
.modal-avatar { width: 96px; height: 96px; margin: -66px auto 2px; }
.modal-family { display: flex; align-items: flex-end; justify-content: center; height: 110px; margin: -78px auto 4px; }
.modal-family > div { height: 100%; }
.fam-noi { width: 96px; margin-right: -22px; }
.fam-natalie { width: 96px; z-index: 1; }
.fam-deli { width: 90px; height: 92% !important; margin-left: -22px; z-index: 2; }
#modalTitle { margin: 0 0 4px; font-size: 28px; font-weight: 700; color: var(--gold-hi); }
#modalTitle.lose { color: #fda4af; }
#modalSubtitle { margin: 0 0 16px; font-size: 13px; color: rgba(255, 240, 210, 0.9); }
.rewards { display: flex; justify-content: center; align-items: center; gap: 22px; padding: 12px; margin-bottom: 16px;
  border-radius: 16px; background: rgba(0, 0, 0, 0.3); border: 1px solid rgba(var(--gold-rgb), 0.3); }
.reward-num { font-size: 20px; font-weight: 700; }
.reward-sep { width: 1px; height: 32px; background: rgba(var(--gold-rgb), 0.4); }
.modal-btn { width: 100%; padding: 13px; border-radius: 16px; font-size: 18px; font-weight: 700; color: #fff; }
.modal-btn.win { background: linear-gradient(90deg, #10b981, #0d9488); border: 2px solid #6ee7b7; box-shadow: 0 8px 20px rgba(16, 185, 129, 0.4); }
.modal-btn.lose { background: linear-gradient(90deg, #f43f5e, #dc2626); border: 2px solid #fda4af; box-shadow: 0 8px 20px rgba(244, 63, 94, 0.4); }
.modal-btn-alt { width: 100%; margin-top: 8px; padding: 9px; border-radius: 12px; font-size: 12px; font-weight: 700; color: var(--gold-hi);
  background: rgba(90, 50, 20, 0.6); border: 1px solid rgba(var(--gold-rgb), 0.4); }
.modal-btn:active, .modal-btn-alt:active { transform: scale(0.97); }
.card-x { position: absolute; top: 10px; right: 10px; width: 34px; height: 34px; border-radius: 50%; z-index: 2;
  display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 700; color: var(--gold-hi);
  background: rgba(0, 0, 0, 0.3); border: 1.5px solid rgba(var(--gold-rgb), 0.5); }
.card-x:active { transform: scale(0.92); }
.card-x:focus-visible { outline: 3px solid var(--gold-hi); outline-offset: 2px; }

.level-path { display: flex; align-items: center; justify-content: center; margin: 0 0 10px; }
.path-node { width: 40px; height: 40px; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: rgba(0, 0, 0, 0.35); border: 2px solid rgba(var(--gold-rgb), 0.35); color: rgba(255, 240, 210, 0.5); flex-shrink: 0; }
.path-node b { font-size: 14px; line-height: 1; }
.path-node i { font-style: normal; font-size: 8px; color: #ffd34d; letter-spacing: -1px; height: 9px; }
.path-node.done { background: linear-gradient(180deg, var(--wood-hi), var(--wood-lo)); border-color: var(--gold); color: var(--gold-hi); }
.path-node.current { width: 50px; height: 50px; background: linear-gradient(180deg, var(--gold-hi), var(--gold)); color: var(--ink); border-color: #fff4d6;
  box-shadow: 0 0 16px rgba(255, 200, 90, 0.7); animation: nodePulse 1.6s ease-in-out infinite; }
.path-node.current b { font-size: 18px; }
@keyframes nodePulse { 50% { transform: scale(1.06); } }
.path-link { width: 14px; height: 4px; background: rgba(var(--gold-rgb), 0.25); }
.path-link.done { background: var(--gold); }

/* Kitchen track: 10 levels per kitchen, one segment each */
.kitchen-track { margin: 4px 0 8px; padding: 7px 10px 8px; border-radius: 14px; text-align: left;
  background: rgba(0, 0, 0, 0.28); border: 1px solid rgba(var(--gold-rgb), 0.35); }
.kt-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 5px;
  font-size: 12px; font-weight: 700; color: var(--gold-hi); }
.kt-head small { font-size: 11px; color: var(--gold); font-variant-numeric: tabular-nums; }
.kt-segs { display: flex; gap: 3px; }
.kt-seg { flex: 1; height: 10px; border-radius: 3px; position: relative;
  background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(var(--gold-rgb), 0.25); }
.kt-seg:first-child { border-radius: 999px 3px 3px 999px; }
.kt-seg:last-child { border-radius: 3px 999px 999px 3px; }
.kt-seg.won { background: linear-gradient(180deg, var(--gold-hi), var(--gold)); border-color: transparent; }
.kt-seg.three { box-shadow: 0 0 6px rgba(var(--gold-rgb), 0.9); }
.kt-seg.next { background: rgba(var(--gold-rgb), 0.3); border-color: var(--gold); animation: segPulse 1.4s ease-in-out infinite; }
@keyframes segPulse { 50% { background: rgba(var(--gold-rgb), 0.55); } }
.kt-seg.here { outline: 2px solid #fff; outline-offset: 1px; }
.kt-seg em { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -55%); font-style: normal; font-size: 11px; line-height: 1;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.6)); }
.kt-seg.fresh { animation: segFill 0.7s 0.9s cubic-bezier(0.2, 1.4, 0.4, 1) backwards; }
@keyframes segFill { from { transform: scaleY(0.2); background: rgba(255, 255, 255, 0.1); } 60% { transform: scaleY(1.7); filter: brightness(1.5); } }
#resultKitchen .kitchen-track { margin: 0 0 10px; }
.kitchen-new { margin: 0 0 6px; font-size: 13px; font-weight: 700; color: var(--gold-hi);
  text-shadow: 0 0 10px rgba(var(--gold-rgb), 0.8); animation: kitchenNew 0.8s cubic-bezier(0.2, 1.6, 0.4, 1) backwards; }
@keyframes kitchenNew { from { transform: scale(0.4); opacity: 0; } }
#levelTitle { margin: 0; font-size: 28px; font-weight: 700; color: var(--gold-hi); }
.level-tip { margin: 4px 0 12px; font-size: 13px; color: rgba(255, 240, 210, 0.9); text-wrap: balance; }
.level-goals { display: flex; flex-direction: column; gap: 8px; padding: 12px; margin-bottom: 16px; text-align: left;
  border-radius: 16px; background: rgba(0, 0, 0, 0.3); border: 1px solid rgba(var(--gold-rgb), 0.3); }
.goal-row { display: flex; align-items: center; gap: 10px; font-size: 15px; }
.goal-row b { color: var(--gold-hi); }
.goal-row small { color: rgba(255, 240, 210, 0.7); }
.goal-icon { width: 34px; height: 34px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.goal-icon svg { width: 100%; height: 100%; overflow: visible; }
.goal-icon.num { border-radius: 50%; background: linear-gradient(180deg, var(--cream), var(--cream-2)); color: var(--ink); font-weight: 700; font-size: 15px; }
.result-stars { display: flex; justify-content: center; gap: 6px; margin: -4px 0 6px; }
.big-star { font-size: 42px; line-height: 1; color: rgba(255, 255, 255, 0.15); transform: scale(0.8); transition: color 0.2s, transform 0.35s cubic-bezier(0.2, 1.8, 0.4, 1); }
.big-star:nth-child(2) { font-size: 52px; margin-top: -8px; }
.big-star.lit { color: #ffd34d; transform: scale(1); text-shadow: 0 0 14px rgba(255, 190, 60, 0.9); }

.load-error { margin: auto; max-width: 320px; text-align: center; font-size: 14px; color: var(--gold-hi); }

@media (prefers-reduced-motion: reduce) {
  .tile.drop, .tile.spawn, .elephant-idle, .fam *, .path-node.current,
  .tile.bundle, .tile.bundt > svg, .tile.glazed .overlay,
  #levelBarFill::after, .level-bar.bump, .kt-seg.fresh, .kitchen-new,
  .shake-big, .hud-moves.low { animation: none !important; }
  .tile.pop::after, .sprinkle, .fx-ring, .board-flash, .trail-star { display: none; }
}

/* ---------- Family powers ---------- */
.board-footer { padding: 0; gap: 8px; }
.power-btn {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; padding: 3px 10px 3px 3px; border-radius: 999px; position: relative;
  background: linear-gradient(180deg, var(--wood-hi), var(--wood-lo)); border: 2px solid var(--gold); box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
  text-align: left; transition: transform 0.15s, filter 0.2s;
}
.power-btn:active { transform: scale(0.96); }
.power-btn:focus-visible { outline: 3px solid var(--gold-hi); outline-offset: 2px; }
.power-btn.using { filter: brightness(1.25); animation: powerGlow 0.6s ease-in-out infinite alternate; }
@keyframes powerGlow { to { box-shadow: 0 0 18px rgba(255, 210, 122, 0.9); } }
.power-face { width: 36px; height: 36px; flex-shrink: 0; border-radius: 50%; overflow: hidden; background: #fff3dc; border: 2px solid var(--gold-hi); }
.power-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.05; }
.power-text b { font-size: 13px; color: var(--gold-hi); }
.power-text small { font-size: 10px; color: rgba(255, 240, 210, 0.75); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.power-count { position: absolute; top: -6px; right: -4px; min-width: 22px; height: 22px; padding: 0 5px; border-radius: 999px;
  display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; color: #fff;
  background: #e2465f; border: 2px solid #fff4d6; }
.power-meter { display: block; height: 4px; margin-top: 3px; border-radius: 2px; background: rgba(0, 0, 0, 0.35); overflow: hidden; }
.power-meter i { display: block; height: 100%; width: 0; border-radius: 2px; background: linear-gradient(90deg, #ffd27a, #fff3c4); transition: width 0.4s ease-out; }
.power-btn.earned { animation: powerEarned 0.5s cubic-bezier(0.2, 1.6, 0.4, 1) 2; filter: brightness(1.2); }
@keyframes powerEarned { 50% { transform: scale(1.08); box-shadow: 0 0 22px rgba(255, 220, 130, 0.95); } }
.power-plus { position: absolute; left: 50%; top: -10px; transform: translateX(-50%); white-space: nowrap; pointer-events: none;
  padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; color: #3b2208; background: #ffe48a; border: 2px solid #fff;
  animation: plusUp 1.6s ease-out forwards; }
@keyframes plusUp { from { opacity: 0; transform: translate(-50%, 6px); } 15% { opacity: 1; transform: translate(-50%, -4px); } 80% { opacity: 1; } to { opacity: 0; transform: translate(-50%, -22px); } }
.result-gift { margin: -8px 0 14px; padding: 8px 10px; border-radius: 12px; font-size: 13px; font-weight: 600; color: #3b2208;
  background: linear-gradient(180deg, #ffe9a8, #ffd06a); animation: modalIn 0.5s 0.6s cubic-bezier(0.2, 1.4, 0.4, 1) backwards; }
.power-btn.empty { filter: saturate(0.6); }
.power-btn.empty .power-count { background: #22a06b; }

.power-cameo { position: absolute; left: 50%; bottom: -6px; width: 46%; height: 62%; margin-left: -23%; z-index: 60; pointer-events: none;
  animation: cameoIn 0.5s cubic-bezier(0.2, 1.4, 0.4, 1) both; filter: drop-shadow(0 10px 12px rgba(0, 0, 0, 0.5)); }
.power-cameo.deli { width: 44%; height: 60%; margin-left: -22%; }
.power-cameo.leave { animation: cameoOut 0.45s ease-in forwards; }
@keyframes cameoIn { from { transform: translateY(110%) scale(0.8); } }
@keyframes cameoOut { to { transform: translateY(115%); opacity: 0; } }
.fam .noi-arm { transform-box: view-box; transform-origin: 138px 136px; }
.fam .noi-arm.swing { animation: noiSwing 0.42s cubic-bezier(0.5, 0, 0.7, 1) infinite alternate; }
@keyframes noiSwing { from { transform: rotate(-35deg); } to { transform: rotate(25deg); } }
.fam .deli-munch { transform-box: view-box; transform-origin: 70px 140px; animation: munch 0.3s ease-in-out infinite alternate; }
@keyframes munch { to { transform: translate(4px, -4px) rotate(-6deg); } }

.hammer-drop { position: fixed; z-index: 70; pointer-events: none; transform-origin: 50% 90%;
  transform: translate(-30%, -88%) rotate(-70deg); animation: hammerDrop 0.5s cubic-bezier(0.6, 0, 0.8, 0.4) forwards; }
@keyframes hammerDrop {
  30% { transform: translate(-30%, -88%) rotate(10deg); }
  45% { transform: translate(-30%, -84%) rotate(-6deg); }
  100% { transform: translate(-30%, -88%) rotate(-30deg); opacity: 0; }
}
.impact-ring { position: fixed; z-index: 69; width: 10px; height: 10px; border-radius: 50%; pointer-events: none;
  border: 4px solid #ffe3a0; transform: translate(-50%, -50%); animation: impact 0.45s ease-out forwards; }
@keyframes impact { to { width: 90px; height: 90px; opacity: 0; border-width: 1px; } }
.tile.chomp { animation: chomp 0.2s ease-in-out 2 alternate; }
@keyframes chomp { to { transform: scale(0.75) rotate(-8deg); filter: brightness(1.2); } }

/* Get-more sheet, ads, shop pantry */
.sheet-title { margin: 0; font-size: 22px; font-weight: 700; color: var(--gold-hi); }
.sheet-have { margin: -4px 0 14px; font-size: 13px; font-weight: 600; color: var(--gold); }
.modal-btn.disabled { filter: grayscale(0.7); opacity: 0.6; }
.modal-btn-alt:disabled { opacity: 0.5; }
.modal-btn:disabled { filter: grayscale(0.5); opacity: 0.75; }
.ad-overlay { z-index: 95; }
.ad-tag { display: inline-block; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; padding: 2px 8px;
  border-radius: 999px; background: #e2465f; color: #fff; margin-bottom: 10px; }
.ad-screen { aspect-ratio: 16 / 9; border-radius: 12px; background: #120a05; border: 2px solid rgba(var(--gold-rgb), 0.4);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 14px; margin-bottom: 10px; }
.ad-screen p { margin: 0; font-size: 12px; color: rgba(255, 240, 210, 0.8); }
.ad-spinner { width: 34px; height: 34px; border-radius: 50%; border: 4px solid rgba(var(--gold-rgb), 0.25); border-top-color: var(--gold); animation: spin 0.9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.ad-reward { margin: 0 0 12px; font-size: 13px; }
.pantry-card { flex-direction: column; align-items: stretch; gap: 8px; }
.pantry-head { font-size: 13px; font-weight: 700; color: var(--gold-hi); }
.pantry-head small { font-weight: 500; color: rgba(255, 240, 210, 0.7); margin-left: 4px; }
.pantry-item { display: flex; align-items: center; gap: 8px; }
.pantry-face { width: 44px; height: 44px; flex-shrink: 0; border-radius: 50%; overflow: hidden; background: #fff3dc; border: 2px solid var(--gold); }
.pantry-info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pantry-info b { font-size: 13px; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pantry-info small { font-size: 11px; color: var(--gold); }
.upgrade-btn.ad { background: linear-gradient(90deg, #22a06b, #17805a); color: #fff; border-color: #8ee8bd; opacity: 1; }
.upgrade-btn.ad.off { opacity: 0.45; pointer-events: none; }
#powerSheetAd:disabled { opacity: 0.6; font-size: 14px; }

/* ---------- Noi builds the next bakery ---------- */
.build-overlay { z-index: 92; }
.build-overlay.closing { animation: fadeOut 0.25s forwards; }
@keyframes fadeOut { to { opacity: 0; } }
.build-card { width: 100%; max-width: 420px; padding: 16px; border-radius: 22px; text-align: center;
  background: linear-gradient(180deg, #4a2c1a, #2b170d); border: 3.5px solid var(--gold); box-shadow: 0 0 40px rgba(251, 191, 36, 0.35); }
.build-card h3 { margin: 0 0 10px; font-size: 18px; color: var(--gold-hi); text-wrap: balance; }
.build-stage { position: relative; width: 100%; aspect-ratio: 320 / 190; border-radius: 14px; overflow: hidden; border: 2px solid rgba(var(--gold-rgb), 0.5); }
.build-scene { position: absolute; inset: 0; width: 100%; height: 100%; }
.build-scene .scaffold path { stroke: #8B5A2B; stroke-width: 4; stroke-linecap: round; fill: none;
  stroke-dasharray: 200; stroke-dashoffset: 200; animation: scaffoldUp 1.6s ease-out forwards; }
.build-scene .scaffold path:nth-child(n+5) { animation-delay: 0.6s; }
.build-scene .scaffold path:nth-child(n+9) { animation-delay: 1.2s; }
@keyframes scaffoldUp { to { stroke-dashoffset: 0; } }
.build-scene .scaffold { transition: opacity 0.6s, transform 0.6s; }
.build-scene .scaffold.down { opacity: 0; transform: translateY(20px); }
.build-scene .build-sign { transition: opacity 0.4s; }
.build-noi { position: absolute; left: 0; bottom: 0; width: 38%; height: 92%; }
.build-noi .noi-arm.swing { animation-duration: 0.22s; }
.build-family { position: absolute; inset: 0; pointer-events: none; }
.build-natalie { position: absolute; left: 30%; bottom: 0; width: 26%; height: 62%; animation: cameoIn 0.5s cubic-bezier(0.2, 1.4, 0.4, 1) both; }
.build-deli { position: absolute; left: 50%; bottom: 0; width: 24%; height: 58%; animation: cameoIn 0.5s 0.15s cubic-bezier(0.2, 1.4, 0.4, 1) both; }
.build-fx { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.build-dust { position: absolute; width: 18px; height: 18px; border-radius: 50%; background: rgba(255, 248, 230, 0.9); filter: blur(2px);
  animation: dustPuff 0.7s ease-out forwards; }
@keyframes dustPuff { from { transform: scale(0.3); opacity: 1; } to { transform: translate(var(--dx), -26px) scale(2.2); opacity: 0; } }
.build-plank { position: absolute; left: -20%; top: var(--ty); width: 46px; height: 9px; border-radius: 2px;
  background: linear-gradient(180deg, #e3a866, #9a5f2e); border: 1.5px solid #3a2210; animation: plankFly 0.9s cubic-bezier(0.3, 0.6, 0.4, 1) forwards; }
@keyframes plankFly { 50% { transform: translate(180%, -40px) rotate(200deg); } to { left: 70%; transform: translate(0, 0) rotate(360deg); opacity: 0; } }
.build-step { margin: 10px 0 6px; font-weight: 600; color: var(--cream); min-height: 1.3em; }
.build-bar { height: 12px; border-radius: 999px; background: rgba(0, 0, 0, 0.4); border: 1px solid rgba(var(--gold-rgb), 0.4); overflow: hidden; margin-bottom: 12px; }
.build-bar div { height: 100%; width: 0; background: repeating-linear-gradient(45deg, #ffc21f 0 10px, #3a2210 10px 20px); transition: width 0.35s ease; }
.build-actions { display: flex; flex-direction: column; gap: 6px; }

/* ---------- Gear + settings ---------- */
.gear-btn { flex-shrink: 0; width: 40px; height: 40px; align-self: center; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  color: var(--ink); background: linear-gradient(180deg, var(--cream), var(--cream-2)); border: 2px solid var(--gold-hi);
  box-shadow: inset 0 -3px 0 rgba(150, 90, 30, 0.35), 0 2px 4px rgba(0, 0, 0, 0.3); transition: transform 0.3s; }
.gear-btn svg { width: 24px; height: 24px; }
.gear-btn:hover svg, .gear-btn:focus-visible svg { transform: rotate(60deg); transition: transform 0.4s; }
.gear-btn:active { transform: scale(0.92); }
.gear-btn:focus-visible { outline: 3px solid var(--gold-hi); outline-offset: 2px; }

/* ---------- Tall phones (about 9:19 and taller, e.g. Galaxy S25, iPhone 15) ----------
   The 8x8 board is limited by screen width, so the spare height goes to a bigger
   Natalie banner and power buttons, and the rest is shared out evenly (#matchView). */
@media (min-height: 780px) and (max-aspect-ratio: 10/18) {
  .hud { padding: 8px; }
  .hud-pod { padding: 6px 10px; }
  .hud-num.big { font-size: 30px; }
  .bella-banner { padding: 4px 12px 4px 8px; }
  .bella-scene { width: 112px; height: 120px; }
  .level-chip { font-size: 12.5px; padding: 3px 11px; }
  .level-chip b { font-size: 15px; }
  .score-box b { font-size: 23px; }
  .live-stars { font-size: 17px; }
  .level-bar { height: 12px; }
  #bellaCheerQuote { font-size: 12.5px; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .power-face { width: 42px; height: 42px; }
  .power-text b { font-size: 14px; }
  .tab { padding-block: 9px; }
}
.settings-card { text-align: left; padding-top: 20px; }
.settings-card .sheet-title { text-align: center; margin-bottom: 14px; }
.setting { padding: 12px 14px; margin-bottom: 10px; border-radius: 14px; background: rgba(0, 0, 0, 0.28); border: 1px solid rgba(var(--gold-rgb), 0.3); }
.setting-head { display: flex; align-items: center; justify-content: space-between; font-size: 16px; font-weight: 600; margin-bottom: 8px; }
.setting input[type="range"] { width: 100%; accent-color: var(--gold); }
.setting input[type="range"]:disabled { opacity: 0.35; }
.switch { width: 52px; height: 30px; border-radius: 999px; background: #5a3d24; border: 2px solid rgba(var(--gold-rgb), 0.4); position: relative; transition: background 0.2s; }
.switch span { position: absolute; top: 2px; left: 2px; width: 22px; height: 22px; border-radius: 50%; background: #fff4d6; box-shadow: 0 2px 4px rgba(0,0,0,0.4); transition: transform 0.2s; }
.switch.on { background: #22a06b; }
.switch.on span { transform: translateX(22px); }
.switch:focus-visible { outline: 3px solid var(--gold-hi); outline-offset: 2px; }
.settings-card .modal-btn { margin-top: 4px; }
.link-btn { display: block; margin: 12px auto 0; font-size: 12px; color: rgba(255, 220, 160, 0.7); text-decoration: underline; }
.reset-confirm { margin-top: 10px; padding: 10px; border-radius: 12px; background: rgba(160, 30, 40, 0.25); border: 1px solid rgba(253, 164, 175, 0.4); }
.reset-confirm p { margin: 0 0 8px; font-size: 12.5px; text-align: center; }
.reset-confirm .row { gap: 8px; }
.reset-confirm .row > * { flex: 1; margin: 0; font-size: 13px; padding: 10px 6px; }

/* ---------- Title screen ---------- */
.title-screen {
  position: fixed; inset: 0; z-index: 85; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: space-between;
  padding-block: max(18px, env(safe-area-inset-top, 0px)) max(22px, env(safe-area-inset-bottom, 0px));
  padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px));
  background: radial-gradient(circle at 50% 30%, var(--wood-hi) 0%, var(--wood-lo) 45%, #1e0f07 100%);
}
.title-screen.leaving { animation: titleOut 0.45s ease-in forwards; }
@keyframes titleOut { to { opacity: 0; transform: scale(1.08); } }
.title-rays { position: absolute; left: 50%; top: 26%; width: 180vmax; height: 180vmax; margin: -90vmax 0 0 -90vmax; pointer-events: none;
  background: repeating-conic-gradient(rgba(255, 210, 122, 0.10) 0deg 9deg, transparent 9deg 18deg);
  -webkit-mask-image: radial-gradient(circle, #000 0%, transparent 55%); mask-image: radial-gradient(circle, #000 0%, transparent 55%);
  animation: raysSpin 60s linear infinite; }
@keyframes raysSpin { to { transform: rotate(360deg); } }
.title-rain { position: absolute; inset: 0; pointer-events: none; }
.title-pastry { position: absolute; top: -80px; opacity: 0.9; filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.4));
  animation: pastryFall var(--dur, 7s) linear forwards; }
.title-pastry svg { width: 100%; height: 100%; overflow: visible; }
@keyframes pastryFall { to { transform: translateY(calc(100vh + 160px)) rotate(var(--spin, 180deg)); } }
.title-top { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; width: min(100%, 420px); }
.title-logo { width: 100%; aspect-ratio: 360 / 190; animation: logoDrop 0.9s cubic-bezier(0.3, 1.5, 0.5, 1) both, logoFloat 4s 1s ease-in-out infinite; }
@keyframes logoDrop { from { transform: translateY(-120%) rotate(-6deg); opacity: 0; } }
@keyframes logoFloat { 50% { transform: translateY(-6px) rotate(0.6deg); } }
.title-tagline { margin: -6px 0 0; font-family: 'Pacifico', 'Fredoka', cursive; font-size: clamp(20px, 6vw, 28px); color: var(--gold-hi);
  text-shadow: 0 3px 0 #3a1e0c, 0 0 18px rgba(255, 190, 80, 0.5); transform: rotate(-3deg); animation: taglineIn 0.7s 0.7s cubic-bezier(0.3, 1.5, 0.5, 1) both; }
@keyframes taglineIn { from { opacity: 0; transform: rotate(-3deg) scale(0.4); } }
.title-stage { position: relative; z-index: 2; width: min(100%, 420px); flex: 1; max-height: 340px; min-height: 200px; margin-top: 4px; }
.title-stand { position: absolute; inset: 0 0 12% 0; animation: famIn 0.8s 0.5s cubic-bezier(0.3, 1.4, 0.5, 1) backwards; filter: drop-shadow(0 12px 18px rgba(0, 0, 0, 0.5)); }
.title-ground { position: absolute; left: -8%; right: -8%; bottom: 0; height: 15%; border-radius: 50% 50% 14px 14px / 30% 30% 14px 14px;
  background: radial-gradient(ellipse at 50% 0%, #b98a5a 0%, #9a6a3e 55%, #6e4724 100%); box-shadow: inset 0 3px 0 rgba(255, 230, 180, 0.25); }
.title-ground::before { content: ''; position: absolute; left: 4%; right: 4%; top: -5px; height: 12px; border-radius: 6px;
  background: repeating-linear-gradient(90deg, #7ec06a 0 6px, #5fa64e 6px 10px); opacity: 0.9; }
.title-family { position: absolute; left: 6%; right: 6%; bottom: 5%; height: 62%; }
.title-family > div { position: absolute; bottom: 0; animation: famBob 2.6s ease-in-out infinite, famIn 0.7s cubic-bezier(0.3, 1.5, 0.5, 1) backwards; }
.tf-noi { left: 0; width: 40%; height: 100%; animation-delay: -0.6s, 0.9s !important; }
.tf-natalie { left: 33%; width: 36%; height: 94%; animation-delay: -1.3s, 1s !important; }
.tf-deli { right: 0; width: 32%; height: 86%; animation-delay: 0s, 1.1s !important; }
@keyframes famBob { 50% { transform: translateY(-6px); } }
@keyframes famIn { from { transform: translateY(80%); opacity: 0; } }
.title-actions { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.play-btn { font-family: 'Lilita One', 'Fredoka', sans-serif; font-size: 34px; letter-spacing: 2px; color: var(--ink);
  padding: 10px 54px 12px; border-radius: 999px; background: linear-gradient(180deg, #fff3c4, #ffd25e 50%, #e39a1f);
  border: 3px solid #3a1e0c; box-shadow: 0 7px 0 #8a4a14, 0 14px 28px rgba(0, 0, 0, 0.5);
  animation: playPulse 1.6s 1.4s ease-in-out infinite, famIn 0.6s 1.2s cubic-bezier(0.3, 1.5, 0.5, 1) backwards; }
.play-btn:active { transform: translateY(5px); box-shadow: 0 2px 0 #8a4a14, 0 6px 14px rgba(0, 0, 0, 0.5); animation: none; }
.play-btn:focus-visible { outline: 3px solid #fff; outline-offset: 4px; }
@keyframes playPulse { 50% { transform: scale(1.06); } }
.play-sub { font-size: 13px; font-weight: 600; color: rgba(255, 240, 210, 0.85); }
.title-gear { position: absolute; z-index: 3; top: max(14px, env(safe-area-inset-top, 0px)); right: max(16px, env(safe-area-inset-right, 0px)); width: 46px; height: 46px; }
@media (prefers-reduced-motion: reduce) {
  .title-rays, .title-logo, .title-family > div, .play-btn, .title-tagline { animation: none !important; }
}

/* ---------- Score ---------- */
.score-row { display: flex; align-items: center; gap: 8px; margin-bottom: 3px; min-width: 0; }
.score-box { display: flex; align-items: baseline; gap: 5px; min-width: 0; }
.score-box small { font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--gold); }
.score-box b { font-family: 'Lilita One', 'Fredoka', sans-serif; font-weight: 400; font-size: 19px; line-height: 1; color: #fff3c4;
  font-variant-numeric: tabular-nums; text-shadow: 0 2px 0 #3a1e0c; }
.best-val { margin-left: auto; font-size: 10.5px; font-weight: 600; color: rgba(255, 220, 160, 0.7); white-space: nowrap; font-variant-numeric: tabular-nums; }
.chain-callout { position: absolute; left: 50%; top: 42%; z-index: 65; pointer-events: none; white-space: nowrap;
  font-family: 'Lilita One', 'Fredoka', sans-serif; font-size: 34px; letter-spacing: 1px; color: #fff3c4;
  -webkit-text-stroke: 2px #3a1e0c; paint-order: stroke fill; text-shadow: 0 4px 0 #3a1e0c, 0 0 20px rgba(255, 190, 60, 0.9);
  transform: translate(-50%, -50%); animation: callout 0.95s cubic-bezier(0.2, 1.6, 0.4, 1) forwards; }
.chain-callout.c3 { font-size: 40px; color: #ffd25e; }
.chain-callout.c4 { font-size: 46px; color: #ff9f43; }
@keyframes callout {
  0% { transform: translate(-50%, -50%) scale(0.3) rotate(-8deg); opacity: 0; }
  30% { transform: translate(-50%, -50%) scale(1.1) rotate(2deg); opacity: 1; }
  75% { transform: translate(-50%, -60%) scale(1); opacity: 1; }
  100% { transform: translate(-50%, -85%) scale(0.95); opacity: 0; }
}
.level-best { margin: -6px 0 14px; font-size: 13px; font-weight: 600; color: var(--gold); font-variant-numeric: tabular-nums; }
.result-score { display: flex; flex-direction: column; align-items: center; margin: 2px 0 6px; }
.result-score b { font-family: 'Lilita One', 'Fredoka', sans-serif; font-weight: 400; font-size: 40px; line-height: 1.05; color: #fff3c4;
  text-shadow: 0 3px 0 #3a1e0c; font-variant-numeric: tabular-nums; }
.result-score small { font-size: 12px; color: rgba(255, 240, 210, 0.75); font-variant-numeric: tabular-nums; }
.new-best { margin: 2px 0; padding: 3px 12px; border-radius: 999px; font-weight: 700; font-size: 13px; letter-spacing: 0.06em; color: var(--ink);
  background: linear-gradient(90deg, #ffd25e, #fff3c4, #ffd25e); animation: newBest 0.6s cubic-bezier(0.2, 1.8, 0.4, 1) both, shine 1.6s 0.6s ease-in-out infinite; }
@keyframes newBest { from { transform: scale(0.2) rotate(-10deg); opacity: 0; } }
@keyframes shine { 50% { box-shadow: 0 0 18px rgba(255, 210, 94, 0.9); } }

/* Short phones: keep the result card on one screen */
@media (max-height: 720px) {
  .modal-card { padding: 18px; }
  .modal-family { height: 90px; margin-top: -64px; }
  .big-star { font-size: 32px; }
  .big-star:nth-child(2) { font-size: 40px; }
  #modalTitle { font-size: 22px; }
  .result-score b { font-size: 32px; }
  .rewards { padding: 8px; margin-bottom: 10px; }
  .modal-btn { padding: 11px; font-size: 16px; }
}

/* ---------- Replay & level select ---------- */
.path-node { cursor: pointer; font: inherit; padding: 0; }
.path-node:disabled { cursor: default; }
.path-node.done:hover, .path-node.done:focus-visible { transform: scale(1.08); outline: none; box-shadow: 0 0 10px rgba(255, 210, 122, 0.7); }
.result-alt { gap: 6px; margin-top: 8px; }
.result-alt .modal-btn-alt { flex: 1; margin: 0; padding: 9px 4px; }
.level-select-card { max-height: calc(100dvh - 40px); display: flex; flex-direction: column; padding-top: 20px; }
.level-select-card .sheet-title { margin-bottom: 2px; }
.level-grid { flex: 1; min-height: 0; overflow-y: auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; padding: 4px 2px 10px; touch-action: pan-y; }
.lvl-tile { aspect-ratio: 1; border-radius: 14px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  background: linear-gradient(180deg, var(--wood-hi), var(--wood-lo)); border: 2px solid var(--gold); color: var(--gold-hi); font: inherit; cursor: pointer; }
.lvl-tile b { font-family: 'Lilita One', 'Fredoka', sans-serif; font-weight: 400; font-size: 22px; line-height: 1; }
.lvl-tile i { font-style: normal; font-size: 11px; color: #ffd34d; letter-spacing: -1px; }
.lvl-tile small { font-size: 9px; color: rgba(255, 240, 210, 0.7); font-variant-numeric: tabular-nums; min-height: 11px; }
.lvl-tile.current { background: linear-gradient(180deg, var(--gold-hi), var(--gold)); color: var(--ink); border-color: #fff4d6; box-shadow: 0 0 14px rgba(255, 200, 90, 0.6); }
.lvl-tile.current i { color: var(--ink); font-weight: 700; letter-spacing: 0.05em; }
.lvl-tile.locked { background: rgba(0, 0, 0, 0.3); border-color: rgba(var(--gold-rgb), 0.25); color: rgba(255, 240, 210, 0.35); cursor: default; }
.lvl-tile:not(.locked):active { transform: scale(0.95); }
.lvl-tile.done { border-color: rgba(var(--gold-rgb), 0.6); background: linear-gradient(180deg, var(--wood-hi), var(--wood-lo)); }
.lvl-kitchen { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: baseline; margin-top: 6px; padding: 6px 12px;
  border-radius: 12px; font-size: 13px; font-weight: 700; color: var(--gold-hi);
  background: linear-gradient(90deg, rgba(var(--gold-rgb), 0.3), rgba(var(--gold-rgb), 0.06)); border-left: 4px solid var(--gold); }
.lvl-kitchen:first-child { margin-top: 0; }
.lvl-kitchen small { font-size: 10px; font-weight: 600; color: var(--gold); }
.lvl-kitchen.locked { opacity: 0.55; }
.lvl-tile:focus-visible { outline: 3px solid var(--gold-hi); outline-offset: 2px; }

/* ---------- Hints ---------- */
.setting-note { margin: 0; font-size: 12px; color: rgba(255, 240, 210, 0.75); }
.setting:has(.setting-note) .setting-head { margin-bottom: 4px; }
.tile.hint { animation: hintNudge 1.1s ease-in-out 2; z-index: 3; }
.tile.hint > svg:first-child { filter: drop-shadow(0 0 8px rgba(255, 236, 150, 1)) brightness(1.12); }
@keyframes hintNudge {
  20%, 60% { transform: translate(var(--hx, 0), var(--hy, 0)) scale(1.06); }
  40%, 80%, 100% { transform: none; }
}
@media (prefers-reduced-motion: reduce) { .tile.hint { animation: none; } }

/* ---------- Starter (real-world rewards) ---------- */
.starter-card { align-items: center; gap: 10px; background: linear-gradient(180deg, #5b3a22, #3a2212); border-color: #f4b8c8; }
.starter-card-icon { width: 46px; height: 46px; flex-shrink: 0; }
.starter-card-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.starter-card-text b { font-size: 15px; color: #fff3c4; }
.starter-card-text small { font-size: 11px; color: rgba(255, 240, 210, 0.8); line-height: 1.3; }
.starter-sheet { text-align: left; max-height: calc(100dvh - 32px); overflow-y: auto; padding-top: 18px; }
.starter-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.starter-jar { width: 54px; height: 54px; flex-shrink: 0; }
.starter-sub { margin: 0; font-size: 12px; color: rgba(255, 240, 210, 0.8); }
.starter-p { margin: 0 0 12px; font-size: 13px; line-height: 1.45; color: rgba(255, 240, 210, 0.92); }
.starter-label { display: block; margin-bottom: 4px; font-size: 12px; font-weight: 700; color: var(--gold-hi); }
.starter-input { width: 100%; box-sizing: border-box; margin-bottom: 10px; padding: 11px 12px; border-radius: 12px; font: inherit; font-size: 16px;
  color: #3b2208; background: #fff8ea; border: 2px solid var(--gold); }
.starter-input.code { text-align: center; font-size: 26px; letter-spacing: 0.3em; font-weight: 700; }
.starter-msg { margin: 8px 0 10px; padding: 8px 10px; border-radius: 10px; font-size: 13px; font-weight: 600; }
.starter-msg.ok { color: #10351f; background: #b8f0cf; }
.starter-msg.err { color: #4a0d18; background: #ffc2cc; }
.starter-fine { margin: 10px 0 0; font-size: 11px; line-height: 1.4; color: rgba(255, 240, 210, 0.65); }
.starter-fine a { color: var(--gold-hi); }
.starter-balance { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px; margin: 2px 0 8px; }
.starter-balance b { font-family: 'Lilita One', 'Fredoka', sans-serif; font-weight: 400; font-size: 40px; line-height: 1; color: #fff3c4; }
.starter-balance span { font-size: 16px; font-weight: 700; color: var(--gold-hi); }
.starter-balance small { width: 100%; font-size: 11px; color: rgba(255, 240, 210, 0.7); }
.starter-week small { display: block; margin-top: 4px; font-size: 11px; color: rgba(255, 240, 210, 0.75); }
.starter-week-bar { height: 8px; border-radius: 4px; background: rgba(0, 0, 0, 0.35); overflow: hidden; }
.starter-week-bar i { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, #f4b8c8, #ffd27a); }
.starter-h3 { margin: 16px 0 6px; font-size: 14px; color: var(--gold-hi); }
.starter-rewards { display: flex; flex-direction: column; gap: 6px; }
.starter-reward { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 12px; background: rgba(0, 0, 0, 0.25); }
.starter-reward > div { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.starter-reward b { font-size: 14px; color: #fff3c4; }
.starter-reward small { font-size: 11px; color: rgba(255, 240, 210, 0.75); }
.starter-reward .upgrade-btn[disabled] { opacity: 0.45; }
.starter-earn { margin: 0; padding-left: 18px; font-size: 12px; line-height: 1.6; color: rgba(255, 240, 210, 0.9); }
.starter-earn b { color: #b8f0cf; }
.starter-code-box { margin: 10px 0; padding: 12px; border-radius: 16px; text-align: center; color: #3b2208;
  background: linear-gradient(180deg, #fff8e6, #ffe3a1); border: 3px dashed #c47a2c; }
.starter-code-box small { display: block; font-size: 12px; font-weight: 600; }
.starter-code { margin: 4px 0; font-family: 'Lilita One', 'Fredoka', sans-serif; font-size: 34px; letter-spacing: 0.04em; color: #8b2b4a; }
.starter-code-box .link-btn { color: var(--board-hi); }
.starter-code-box .starter-purchase { margin-top: 2px; color: #8b2b4a; font-weight: 700; }
.result-starter { display: flex; align-items: center; justify-content: center; gap: 6px; margin: -6px 0 12px; font-size: 13px; color: #ffe9b0; }
.result-starter svg { width: 26px; height: 26px; flex-shrink: 0; }
.result-starter b { color: #b8f0cf; }
.link-btn.inline { display: inline; padding: 0; margin: 0; font-size: inherit; text-decoration: underline; }

/* ---------- Bonus Bakes (mini games: js/minigames.js) ---------- */
.modal-btn.bonus { margin-bottom: 8px; color: var(--ink); background: linear-gradient(90deg, #ffd25e, #ff9f43);
  border: 2px solid #fff0b8; box-shadow: 0 6px 18px rgba(255, 160, 60, 0.45); font-size: 16px; animation: pulse 1.6s infinite; }
.result-bonus { margin: -6px 0 12px; padding: 8px 10px; border-radius: 12px; font-size: 13px; font-weight: 700; color: #3b2208;
  background: linear-gradient(180deg, #ffe0b8, #ffb36b); animation: modalIn 0.5s 0.8s cubic-bezier(0.2, 1.4, 0.4, 1) backwards; }

.mini-overlay { z-index: 95; }
.mini-card { padding: 18px 18px 16px; }
.mini-tag { display: inline-block; margin-top: 2px; padding: 2px 10px; border-radius: 999px; font-size: 10px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink); background: linear-gradient(90deg, var(--gold-hi), var(--gold)); }
.mini-title { margin: 6px 0 4px; font-size: 22px; color: var(--gold-hi); }
.mini-how { margin: 0 0 8px; font-size: 13px; line-height: 1.3; color: rgba(255, 240, 210, 0.9); transition: opacity 0.3s; }
.mini-how.dim { opacity: 0.55; }
.mini-timer { height: 8px; border-radius: 999px; background: rgba(0, 0, 0, 0.4); overflow: hidden; margin-bottom: 6px; }
.mini-timer i { display: block; height: 100%; width: 100%; border-radius: 999px; background: linear-gradient(90deg, #6ee7b7, #10b981); }
.mini-timer i.low { background: linear-gradient(90deg, #fda4af, #ef4444); }
.mini-stage { position: relative; height: clamp(240px, 37dvh, 310px); margin-bottom: 6px; border-radius: 18px; overflow: hidden;
  touch-action: none; display: flex; flex-direction: column; align-items: center; justify-content: space-evenly;
  /* same wood and gold frame as the match-3 board */
  background: repeating-linear-gradient(92deg, rgba(0, 0, 0, 0.07) 0 3px, transparent 3px 11px), linear-gradient(180deg, var(--board-hi), var(--board-lo));
  border: 3px solid var(--gold); box-shadow: inset 0 3px 5px rgba(255, 220, 160, 0.45), inset 0 -6px 10px rgba(0, 0, 0, 0.5); }
.mini-title { display: flex; align-items: center; justify-content: center; gap: 6px; }
.mini-title-art { width: 34px; height: 34px; flex-shrink: 0; }
.mini-title-art svg { width: 100%; height: 100%; overflow: visible; }
.mini-status { min-height: 1.4em; margin: 0 0 8px; font-size: 16px; font-weight: 700; color: var(--gold-hi); }
.mini-result { margin-bottom: 10px; display: flex; flex-direction: column; gap: 2px; }
.mini-result b { font-size: 18px; color: #fff3c4; }
.mini-result small { font-size: 12.5px; color: rgba(255, 240, 210, 0.85); }
.mini-stars { font-size: 40px; line-height: 1; letter-spacing: 4px; }
.mini-stars span { color: rgba(255, 255, 255, 0.18); display: inline-block; }
.mini-stars span.lit { color: #ffd34d; text-shadow: 0 0 12px rgba(255, 190, 60, 0.9); animation: miniStar 0.5s cubic-bezier(0.2, 1.8, 0.4, 1) backwards; }
@keyframes miniStar { from { transform: scale(0) rotate(-40deg); } }

/* Rise the Loaf: dough rises out of a rattan banneton, then bakes into the board's sourdough */
.rise-scene { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.rise-basket { position: relative; width: 170px; height: 126px; flex-shrink: 0; }
.rise-back, .rise-front { position: absolute; left: 0; right: 0; height: 85px; }
.rise-back { bottom: 0; z-index: 0; }
.rise-front { bottom: 0; z-index: 2; pointer-events: none; }
.rise-back svg, .rise-front svg { width: 100%; height: 100%; overflow: visible; }
.rise-back svg { height: 85px; }
/* The loaf nests down in the basket and grows upward; at a full rise (5) it still fits inside the stage. */
.rise-loaf { position: absolute; z-index: 1; left: 50%; bottom: 14px; width: 110px; height: 110px; margin-left: -55px; transform-origin: 50% 88%;
  transform: scale(calc(0.62 + var(--rise, 0) * 0.066), calc(0.5 + var(--rise, 0) * 0.09)); transition: transform 0.35s cubic-bezier(0.3, 1.6, 0.5, 1); }
.rise-loaf span { position: absolute; inset: 0; transition: opacity 0.4s, transform 0.4s; }
.rise-loaf svg { width: 100%; height: 100%; overflow: visible; }
.rise-baked { opacity: 0; transform: scale(0.8); }
.rise-loaf.baked .rise-dough { opacity: 0; }
.rise-loaf.baked .rise-baked { opacity: 1; transform: scale(1); }
/* a warm glow behind the baked loaf (a gradient, not a filter, so phones don't flicker) */
.rise-loaf.baked::before { content: ''; position: absolute; inset: -12%; border-radius: 50%; z-index: -1;
  background: radial-gradient(circle, rgba(255, 220, 140, 0.75) 0%, rgba(255, 210, 120, 0) 65%); }
/* The finished loaf: big and round, filling the basket */
.rise-loaf.baked { bottom: 8px; transform: scale(1.34, 1.02); }
.rise-loaf.puff .rise-dough svg { animation: risePuff 0.4s ease-out; }
@keyframes risePuff { 40% { transform: scale(1.06); } }
.rise-steps { display: flex; gap: 6px; }
.rise-steps i { width: 16px; height: 16px; border-radius: 50%; background: radial-gradient(circle at 50% 35%, #fbefd6, #d9bf92);
  border: 2px solid #6b3612; box-shadow: inset 0 2px 3px rgba(120, 70, 30, 0.35); transition: background 0.3s, transform 0.3s; }
.rise-steps i.on { background: radial-gradient(circle at 40% 30%, #fff3c4, #f0b33c 60%, #b9772f); box-shadow: 0 0 8px #ffc94d; transform: scale(1.15); }
.rise-meter { position: relative; width: 88%; height: 30px; border-radius: 999px; border: 3px solid #6b3612;
  background: radial-gradient(circle at 50% 35%, #fff8ea 0%, #f0dcb6 100%); box-shadow: inset 0 3px 5px rgba(120, 70, 30, 0.4); }
.rise-meter.miss { animation: shakeFX 0.28s both; }
.rise-zone { position: absolute; top: 3px; bottom: 3px; border-radius: 999px; background: linear-gradient(180deg, #b6ef9a, #4fbf5a 60%, #2e8a3e);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.6), 0 0 8px rgba(110, 210, 110, 0.7); transition: left 0.25s, width 0.25s; }
.rise-needle { position: absolute; top: -9px; bottom: -9px; width: 8px; margin-left: -4px; border-radius: 4px;
  background: linear-gradient(180deg, #fff, #e8e2f0); border: 2px solid #3b3350; box-shadow: 0 2px 3px rgba(0, 0, 0, 0.4); }
.rise-tap { padding: 10px 26px; border-radius: 999px; font-size: 18px; font-weight: 700; color: var(--ink);
  background: linear-gradient(180deg, #fff3c4, #f0b33c 70%, #c9852a); border: 3px solid #6b3612; box-shadow: 0 4px 0 #6b3612, inset 0 2px 0 rgba(255, 255, 255, 0.7); }
.rise-tap:active { transform: translateY(3px); box-shadow: 0 1px 0 #6b3612, inset 0 2px 0 rgba(255, 255, 255, 0.7); }

/* Cookie Catch: Noi tosses from above, the steel tray slides along a cream counter */
.catch-field { position: absolute; inset: 0; cursor: grab; }
.catch-counter { position: absolute; left: 0; right: 0; bottom: 0; height: 16%;
  background: radial-gradient(circle at 50% 0%, #fff8ea, #e6cc9e); border-top: 3px solid #6b3612; }
.catch-noi { position: absolute; top: 4px; left: 50%; width: 64px; height: 56px; transform: translateX(-50%); filter: drop-shadow(0 3px 3px rgba(0, 0, 0, 0.4)); }
.catch-score { position: absolute; top: 8px; left: 10px; padding: 2px 10px; border-radius: 999px; font-size: 15px; font-weight: 700; color: var(--ink);
  background: linear-gradient(180deg, var(--cream), var(--cream-2)); border: 2px solid #6b3612; }
.catch-tray { position: absolute; bottom: 9%; width: 34%; aspect-ratio: 140 / 32; transform: translateX(-50%); z-index: 2; }
.catch-tray svg { width: 100%; height: 100%; overflow: visible; }
.catch-cookie { position: absolute; width: 14%; aspect-ratio: 1; transform: translate(-50%, -50%); pointer-events: none; z-index: 1; }
.catch-cookie svg { width: 100%; height: 100%; overflow: visible; }
.catch-cookie.got { animation: cookieGot 0.25s ease-out forwards; }
@keyframes cookieGot { to { transform: translate(-50%, -50%) scale(1.5); opacity: 0; } }

/* Decorate with Deli: toppings land on a frosted cake; pads look like board cells */
.deco-cake { position: relative; width: 170px; height: 106px; }
.deco-cake > svg { width: 100%; height: 100%; overflow: visible; }
.deco-top { position: absolute; left: 14%; right: 14%; top: 4px; display: flex; justify-content: center; gap: 0; }
.deco-top span { width: 38px; height: 38px; margin: 0 -4px; animation: miniStar 0.4s cubic-bezier(0.2, 1.8, 0.4, 1); }
.deco-top svg { width: 100%; height: 100%; overflow: visible; }
.deco-pads { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 82%; }
.deco-pad { height: 66px; border-radius: 14px; padding: 6px; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 50% 35%, #fff8ea 0%, #f0dcb6 100%); border: 3px solid #6b3612;
  box-shadow: inset 0 2px 4px rgba(120, 70, 30, 0.35), 0 3px 0 #6b3612; transition: transform 0.1s, box-shadow 0.1s, background 0.1s; }
.deco-pad svg { height: 100%; width: auto; overflow: visible; }
.deco-pad.lit { transform: scale(1.08); background: radial-gradient(circle at 50% 35%, #ffffff, #ffe08a);
  box-shadow: 0 0 0 3px #ffd34d, 0 0 18px rgba(255, 211, 77, 0.95); }
.deco-pad:disabled { cursor: default; }

/* Knead the Dough: Natalie's floury hands press the dough on a wooden board */
.knead-board { position: relative; width: 230px; height: 128px; display: flex; align-items: flex-end; justify-content: center; }
.knead-dough { width: calc(160px + var(--k, 0) * 30px); height: 128px; transition: width 0.2s; }
.knead-dough svg { width: 100%; height: 100%; overflow: visible; }
.knead-dough.squish-L { animation: squishL 0.18s ease-out; }
.knead-dough.squish-R { animation: squishR 0.18s ease-out; }
@keyframes squishL { 50% { transform: scale(1.16, 0.82) translateX(-6px) skewX(8deg); } }
@keyframes squishR { 50% { transform: scale(1.16, 0.82) translateX(6px) skewX(-8deg); } }
.knead-dough.wobble { animation: shakeFX 0.28s both; }
.knead-hand { position: absolute; top: 22px; width: 76px; height: 76px; z-index: 1; transition: transform 0.12s; }
.knead-hand svg { width: 100%; height: 100%; overflow: visible; }
.knead-hand.L { left: 14px; transform: rotate(-28deg); }
.knead-hand.R { right: 14px; transform: scaleX(-1) rotate(-28deg); }
.knead-hand.L.press { animation: pressL 0.18s ease-out; }
.knead-hand.R.press { animation: pressR 0.18s ease-out; }
@keyframes pressL { 50% { transform: translate(18px, 14px) rotate(-12deg) scale(0.9); } }
@keyframes pressR { 50% { transform: scaleX(-1) translate(18px, 14px) rotate(-12deg) scale(0.9); } }
.knead-meter { width: 82%; height: 14px; border-radius: 999px; border: 2px solid #6b3612; overflow: hidden;
  background: radial-gradient(circle at 50% 35%, #fff8ea, #f0dcb6); box-shadow: inset 0 2px 3px rgba(120, 70, 30, 0.4); }
.knead-meter i { display: block; height: 100%; width: 0; background: linear-gradient(180deg, #fff3c4, #f0b33c 70%, #c9852a); transition: width 0.12s; }
.knead-pads { display: flex; gap: 10px; width: 90%; }
.knead-pad { flex: 1; height: 64px; border-radius: 16px; display: flex; align-items: center; justify-content: center; gap: 4px;
  font-size: 17px; font-weight: 700; color: var(--ink);
  background: radial-gradient(circle at 50% 35%, #fff8ea 0%, #f0dcb6 100%); border: 3px solid #6b3612;
  box-shadow: inset 0 2px 4px rgba(120, 70, 30, 0.35), 0 4px 0 #6b3612; }
.knead-pad span { width: 34px; height: 34px; }
.knead-pad.right span { transform: scaleX(-1); }
.knead-pad svg { width: 100%; height: 100%; overflow: visible; }
.knead-pad:active { transform: translateY(3px); box-shadow: inset 0 2px 4px rgba(120, 70, 30, 0.35), 0 1px 0 #6b3612; }
.knead-pad:disabled { opacity: 0.6; }

/* ---------- Bonus Bakery (title screen practice: js/practice.js) ---------- */
.practice-btn { display: flex; align-items: center; gap: 10px; margin-top: 4px; padding: 6px 18px 6px 8px; border-radius: 999px; text-align: left;
  background: linear-gradient(180deg, var(--cream), var(--cream-2)); border: 3px solid #3a1e0c; box-shadow: 0 5px 0 #8a4a14, 0 10px 20px rgba(0, 0, 0, 0.45);
  color: var(--ink); animation: famIn 0.6s 1.5s cubic-bezier(0.3, 1.5, 0.5, 1) backwards; }
.practice-btn:active { transform: translateY(4px); box-shadow: 0 1px 0 #8a4a14, 0 4px 10px rgba(0, 0, 0, 0.45); }
.practice-btn.locked { filter: saturate(0.5); opacity: 0.85; }
.pb-art { width: 52px; height: 34px; flex-shrink: 0; }
.pb-art svg { width: 100%; height: 100%; overflow: visible; }
.pb-text { display: flex; flex-direction: column; line-height: 1.1; }
.pb-text b { font-family: 'Lilita One', 'Fredoka', sans-serif; font-weight: 400; font-size: 19px; letter-spacing: 0.5px; }
.pb-text small { font-size: 11px; font-weight: 600; color: var(--ink-soft); }

.practice-card { padding: 20px 16px 16px; max-height: calc(100dvh - 32px); display: flex; flex-direction: column; }
.practice-card .sheet-have { margin: 0 0 10px; font-size: 12.5px; line-height: 1.3; }
.practice-list { display: flex; flex-direction: column; gap: 8px; overflow-y: auto; min-height: 0; touch-action: pan-y; padding: 2px; }
.pr-game { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 16px; text-align: left;
  background: linear-gradient(135deg, var(--wood-hi), var(--wood-lo)); border: 2px solid rgba(var(--gold-rgb), 0.6); box-shadow: 0 6px 14px rgba(0, 0, 0, 0.4); }
.pr-game.locked { opacity: 0.6; filter: saturate(0.4); }
.pr-art { width: 52px; height: 52px; flex-shrink: 0; padding: 4px; border-radius: 12px;
  background: radial-gradient(circle at 50% 35%, #fff8ea 0%, #f0dcb6 100%); border: 2px solid #6b3612; box-shadow: inset 0 2px 4px rgba(120, 70, 30, 0.35); }
.pr-art svg { width: 100%; height: 100%; overflow: visible; }
.pr-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.pr-info > b { font-size: 15px; color: #fff3c4; }
.pr-info small { font-size: 11.5px; color: rgba(255, 240, 210, 0.85); }
.pr-info small b { color: var(--gold-hi); }
.pr-tiers { display: flex; gap: 4px; flex-wrap: wrap; }
.pr-tier { padding: 2px 8px; border-radius: 999px; font-size: 10.5px; font-weight: 700; color: var(--gold-hi);
  background: rgba(0, 0, 0, 0.3); border: 1.5px solid rgba(var(--gold-rgb), 0.5); }
.pr-tier.on { color: var(--ink); background: linear-gradient(180deg, var(--gold-hi), var(--gold)); border-color: #fff4d6; }
.pr-tier.locked { opacity: 0.55; cursor: default; }
.pr-play { width: 44px; height: 44px; flex-shrink: 0; border-radius: 50%; font-size: 18px; color: #fff;
  background: linear-gradient(180deg, #34d399, #0d9488); border: 2px solid #6ee7b7; box-shadow: 0 4px 0 #0b5e55; }
.pr-play:active { transform: translateY(3px); box-shadow: 0 1px 0 #0b5e55; }

.mini-tag.practice { background: linear-gradient(90deg, #b6ef9a, #4fbf5a); }
.mini-best { color: var(--gold-hi); }
.mini-score { font-family: 'Lilita One', 'Fredoka', sans-serif; font-weight: 400; font-size: 30px !important; }
.mini-newbest { align-self: center; margin: 2px 0; padding: 3px 12px; border-radius: 999px; font-weight: 700; font-size: 13px; color: var(--ink);
  background: linear-gradient(90deg, #ffd25e, #fff3c4, #ffd25e); animation: newBest 0.6s cubic-bezier(0.2, 1.8, 0.4, 1) both, shine 1.6s 0.6s ease-in-out infinite; }
.mini-unlock { align-self: center; margin: 2px 0; padding: 3px 12px; border-radius: 999px; font-weight: 700; font-size: 13px; color: #0b3d1c;
  background: linear-gradient(90deg, #b6ef9a, #6ee7b7); animation: newBest 0.6s 0.3s cubic-bezier(0.2, 1.8, 0.4, 1) both; }
.mini-note { opacity: 0.7; }

/* ---------- Wardrobe (family outfits: js/wardrobe-ui.js) ---------- */
.wardrobe-card-shop { gap: 10px; }
.wardrobe-faces { display: flex; flex-shrink: 0; }
.wardrobe-faces span { width: 36px; height: 34px; margin-right: -8px; border-radius: 50%; overflow: hidden;
  background: radial-gradient(circle at 50% 35%, #fff8ea, #f0dcb6); border: 2px solid var(--gold); }
.wardrobe-faces span:last-child { margin-right: 4px; }

.wardrobe-card { padding: 18px 14px 14px; max-height: calc(100dvh - 24px); display: flex; flex-direction: column; }
.wardrobe-card .sheet-title { margin: 0 0 8px; }
.wr-tabs { display: flex; gap: 6px; margin-bottom: 8px; }
.wr-tab { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 4px 4px 6px; border-radius: 14px;
  font-size: 13px; font-weight: 700; color: var(--gold-hi); background: rgba(0, 0, 0, 0.28); border: 2px solid rgba(var(--gold-rgb), 0.35); }
.wr-tab.on { color: var(--ink); background: linear-gradient(180deg, var(--gold-hi), var(--gold)); border-color: #fff4d6; }
.wr-tab-face { width: 40px; height: 36px; }
.wr-tab-face svg { width: 100%; height: 100%; }
.wr-preview { height: clamp(150px, 26dvh, 220px); flex-shrink: 0; border-radius: 16px; padding: 8px 0 4px; display: flex; justify-content: center;
  background: repeating-linear-gradient(92deg, rgba(0, 0, 0, 0.07) 0 3px, transparent 3px 11px), linear-gradient(180deg, var(--board-hi), var(--board-lo));
  border: 3px solid var(--gold); box-shadow: inset 0 3px 5px rgba(255, 220, 160, 0.45), inset 0 -6px 10px rgba(0, 0, 0, 0.5); position: relative; }
.wr-preview > svg { width: auto; height: 100%; max-width: 70%; }
.wr-coins { margin: 6px 0; font-size: 13px; color: rgba(255, 240, 210, 0.9); }
.wr-coins b { color: var(--gold-hi); }
.wardrobe-card .modal-btn { padding: 10px; font-size: 16px; }
.modal-btn.wr-idle { color: rgba(255, 240, 210, 0.75); background: rgba(0, 0, 0, 0.3); border: 2px solid rgba(var(--gold-rgb), 0.35); box-shadow: none; }
.modal-btn.wr-off { color: var(--gold-hi); background: linear-gradient(180deg, var(--wood-hi), var(--wood-lo)); border: 2px solid var(--gold); }
.wr-note { min-height: 1.2em; margin: 4px 0 6px; font-size: 12px; font-weight: 600; color: var(--gold-hi); }
.wr-list { flex: 1; min-height: 0; overflow-y: auto; touch-action: pan-y; text-align: left; padding: 0 2px; }
.wr-slot h3 { margin: 6px 0 4px; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold); }
.wr-items { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; }
.wr-item { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; padding: 7px 9px; border-radius: 12px; text-align: left;
  color: var(--ink); background: radial-gradient(circle at 50% 35%, #fff8ea 0%, #f0dcb6 100%); border: 2px solid #b98a4d;
  box-shadow: inset 0 2px 3px rgba(120, 70, 30, 0.25), 0 2px 0 #8a5a2b; }
.wr-item b { font-size: 12.5px; line-height: 1.15; }
.wr-item small { font-size: 11px; font-weight: 700; color: var(--ink-soft); }
.wr-item.own small { color: #2e8a3e; }
.wr-item.earn small { color: #8a5a2b; }
.wr-item.worn { background: linear-gradient(180deg, #fff3c4, #ffd25e); border-color: #6b3612; }
.wr-item.worn small { color: #6b3612; }
.wr-item.picked { outline: 3px solid #4fd8e6; outline-offset: 1px; }
.wr-item:active { transform: scale(0.97); }

/* ---------- Pets: Baymax the cat and Pearly the collie (powers.js, art-pets.js) ---------- */
/* With the pets the power row holds four buttons: face on top, name below, count badge. */
/* 3 or more powers: compact pills, four to a row (face, name and meter; the count badge on top) */
.board-footer.many { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; }
.board-footer.many .power-btn { gap: 3px; padding: 2px 4px 2px 2px; }
.board-footer.many .power-text { flex: 1; }
.board-footer.many .power-text b { font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.board-footer.many .power-text small { display: none; }
.board-footer.many .power-meter { width: 100%; margin-top: 2px; height: 3px; }
.board-footer.many .power-face { width: 30px; height: 30px; }
.board-footer.many .power-count { min-width: 19px; height: 19px; font-size: 11px; top: -8px; right: -5px; }
.power-btn.pet .power-face { background: radial-gradient(circle at 50% 35%, #fbf6ff, #dfe6f5); }
.power-btn.pet { border-color: #b9d4ff; }
@media (min-height: 780px) and (max-aspect-ratio: 10/18) {
  .board-footer.many .power-btn { padding-block: 3px; }
}


/* Baymax peeks up at an edge of the board (clipped by it, so only ears and eyes show) and his paw
   stretches out to the treat and back; the treat flies off the way he came. */
.peek-zone { position: absolute; inset: 10px; overflow: hidden; border-radius: 14px; pointer-events: none; z-index: 66; }
.cat-peek-head { position: absolute; filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.35));
  animation: catPeek 1s cubic-bezier(0.3, 1.3, 0.5, 1) forwards; }
.cat-peek-head svg { width: 100%; height: 100%; display: block; transform: rotate(var(--turn)); }
@keyframes catPeek {
  0% { transform: translate(var(--px), var(--py)); }
  18%, 78% { transform: translate(0, 0); }
  100% { transform: translate(var(--px), var(--py)); }
}
.cat-peek-arm { position: absolute; width: 0; transform: rotate(var(--ang)); transform-origin: 0 50%; border-radius: 999px;
  background: linear-gradient(180deg, #ffffff, #e2e6ef); border: 2.5px solid #3b3350;
  animation: catReach 1s ease-in-out forwards; }
.cat-peek-paw { position: absolute; right: 0; top: 50%; transform: translate(45%, -50%); }
@keyframes catReach {
  0%, 14% { width: 0; }
  40%, 56% { width: var(--len); }
  86%, 100% { width: 0; }
}
.tile.snatched > svg { animation: snatchLeft 0.3s ease-in forwards; }
.tile.snatched[data-away="right"] > svg { animation-name: snatchRight; }
.tile.snatched[data-away="top"] > svg { animation-name: snatchTop; }
.tile.snatched[data-away="bottom"] > svg { animation-name: snatchBottom; }
@keyframes snatchLeft { 25% { transform: scale(1.15) rotate(-8deg); } 100% { transform: translateX(-320%) scale(0.5) rotate(-30deg); opacity: 0; } }
@keyframes snatchRight { 25% { transform: scale(1.15) rotate(8deg); } 100% { transform: translateX(320%) scale(0.5) rotate(30deg); opacity: 0; } }
@keyframes snatchTop { 25% { transform: scale(1.15) rotate(-8deg); } 100% { transform: translateY(-320%) scale(0.5) rotate(30deg); opacity: 0; } }
@keyframes snatchBottom { 25% { transform: scale(1.15) rotate(8deg); } 100% { transform: translateY(320%) scale(0.5) rotate(-30deg); opacity: 0; } }

/* Pearly races along a row; the row's pastries are herded off to the right one after another. */
.herd-run { position: absolute; left: -18%; z-index: 66; width: 24%; aspect-ratio: 256 / 210; pointer-events: none;
  transform: translateY(-74%); animation: herdRun 1.6s linear forwards;
  filter: drop-shadow(0 6px 6px rgba(0, 0, 0, 0.4)); }
.herd-run svg { width: 100%; height: 100%; overflow: visible; }
/* Pearly gallops along the row (collieSVG('run')): her nose reaches each tile as it gets herded
   (one tile every HERD_STEP_MS = 160 ms, i.e. 12.5% of the board per 0.16 s). */
@keyframes herdRun { from { left: -18%; } to { left: 107%; } }
.tile.herded > svg, .tile.herded .overlay { animation: herded 0.6s cubic-bezier(0.5, 0, 0.8, 0.4) both; animation-delay: inherit; }
@keyframes herded { 20% { transform: translateX(-8%) rotate(-6deg); } 100% { transform: translateX(260%) rotate(25deg); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .herd-run, .cat-peek-head, .cat-peek-arm { display: none; } }

/* ---------- Pets in the scenes (title screen + shop), once you've met them ---------- */
.title-pets { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
.title-pets > div { position: absolute; animation: famIn 0.7s 1.3s cubic-bezier(0.3, 1.5, 0.5, 1) backwards; }
.title-pets svg, .diorama-baymax svg, .diorama-pearly svg { width: 100%; height: 100%; display: block; overflow: visible; }
.tp-baymax { left: 9%; bottom: 47%; width: 15%; height: 20%; }        /* on the farm stand's counter */
.tp-pearly { left: 56%; bottom: 0; width: 17%; height: 28%; }         /* at the family's feet */
.tp-pearly svg { animation: petHop 2.2s ease-in-out infinite; transform-origin: 50% 100%; }

.diorama-baymax { position: absolute; right: 7%; top: 9%; width: 12%; height: 21%; z-index: 2; pointer-events: none; }   /* on the display case */
.diorama-pearly { position: absolute; left: 20%; bottom: 1%; width: 13%; height: 34%; z-index: 4; pointer-events: none; } /* by Noi */
.diorama-pearly svg { animation: petHop 2.4s ease-in-out infinite; transform-origin: 50% 100%; }

/* Baymax's tail flicks now and then; Pearly bounces like an excited puppy. */
.pet .cat-tail { transform-box: fill-box; transform-origin: 0% 100%; animation: tailFlick 3.4s ease-in-out infinite; }
@keyframes tailFlick { 0%, 70%, 100% { transform: rotate(0deg); } 78% { transform: rotate(-14deg); } 86% { transform: rotate(8deg); } 92% { transform: rotate(-6deg); } }
@keyframes petHop { 0%, 60%, 100% { transform: translateY(0) scale(1); } 70% { transform: translateY(-8%) scale(0.97, 1.03); } 80% { transform: translateY(0) scale(1.04, 0.96); } }
@media (prefers-reduced-motion: reduce) { .pet .cat-tail, .tp-pearly svg, .diorama-pearly svg, .title-pets > div { animation: none !important; } }

/* ---------- Bonus Jar (fills toward the next Bonus Bake: bonus.js) ---------- */
.bonus-jar { position: relative; flex-shrink: 0; width: 20px; height: 24px; margin-top: 5px; border-radius: 4px 4px 9px 9px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0.08) 45%, rgba(255, 255, 255, 0.2));
  border: 2px solid rgba(255, 246, 220, 0.85); box-shadow: inset 0 -2px 4px rgba(0, 0, 0, 0.25); }
.bonus-jar::before { content: ""; position: absolute; left: 1px; right: 1px; top: -7px; height: 5px; border-radius: 2px;
  background: linear-gradient(180deg, var(--gold-hi), var(--gold)); border: 1.5px solid #6b3612; }
.bonus-jar i { position: absolute; left: 1px; right: 1px; bottom: 1px; height: 0; max-height: calc(100% - 2px); border-radius: 2px 2px 6px 6px;
  background: radial-gradient(circle at 30% 30%, #3b1d0e 1.2px, transparent 1.6px) 0 0 / 6px 6px,
              linear-gradient(180deg, #f6cf92, #d99a50 60%, #b9772f);
  transition: height 0.5s cubic-bezier(0.3, 1.3, 0.5, 1); }
.bonus-jar.full { animation: jarGlow 1.2s ease-in-out infinite; border-color: #fff3c4; }
@keyframes jarGlow { 50% { box-shadow: 0 0 0 2px rgba(255, 210, 94, 0.7), 0 0 14px rgba(255, 200, 80, 0.95); transform: scale(1.08); } }
.bonus-jar.resting { opacity: 0.6; filter: saturate(0.5); }
.bonus-jar.pop { animation: jarPop 0.6s cubic-bezier(0.2, 1.8, 0.4, 1), jarGlow 1.2s 0.6s ease-in-out infinite; }
@keyframes jarPop { 40% { transform: scale(1.4) rotate(-8deg); } }
@media (min-height: 780px) and (max-aspect-ratio: 10/18) { .bonus-jar { width: 24px; height: 28px; } }
@media (prefers-reduced-motion: reduce) { .bonus-jar.full, .bonus-jar.pop { animation: none; box-shadow: 0 0 10px rgba(255, 200, 80, 0.9); } }

/* ---------- Tutorial (first level tour: js/tutorial.js) ---------- */
.tut-overlay { position: fixed; inset: 0; z-index: 96; }
.tut-overlay.pass { pointer-events: none; }           /* the match step: swipes reach the board */
.tut-overlay.pass .tut-bubble { pointer-events: auto; }
.tut-shade { position: absolute; inset: 0; background: rgba(20, 10, 4, 0.62); }
.tut-spot { position: absolute; border-radius: 16px; pointer-events: none; transition: all 0.35s cubic-bezier(0.3, 1.2, 0.5, 1);
  box-shadow: 0 0 0 9999px rgba(20, 10, 4, 0.62), 0 0 0 3px var(--gold-hi), 0 0 24px 6px rgba(var(--gold-rgb), 0.85);
  animation: tutPulse 1.4s ease-in-out infinite; }
@keyframes tutPulse { 50% { box-shadow: 0 0 0 9999px rgba(20, 10, 4, 0.62), 0 0 0 5px var(--gold-hi), 0 0 34px 10px rgba(var(--gold-rgb), 0.95); } }
.tut-bubble { position: absolute; left: 50%; width: min(340px, calc(100vw - 32px)); transform: translateX(-50%);
  display: grid; grid-template-columns: 56px 1fr; gap: 4px 10px; align-items: center; padding: 12px 14px 12px 10px;
  border-radius: 20px; background: linear-gradient(180deg, var(--cream), var(--cream-2)); border: 3px solid #6b3612;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.55); color: var(--ink); transition: top 0.3s cubic-bezier(0.3, 1.2, 0.5, 1);
  animation: modalIn 0.35s cubic-bezier(0.2, 1.4, 0.4, 1); }
.tut-face { width: 56px; height: 56px; grid-row: span 2; align-self: start; }
.tut-face svg { width: 100%; height: 100%; }
.tut-text { margin: 0; font-size: 14px; line-height: 1.35; font-weight: 600; }
.tut-text b { color: #a0410f; }
.tut-buttons { display: flex; gap: 8px; flex-wrap: wrap; }
.tut-buttons button { padding: 7px 14px; border-radius: 999px; font-size: 13px; font-weight: 700; }
.tut-next { color: #fff; background: linear-gradient(90deg, #10b981, #0d9488); border: 2px solid #6ee7b7; }
.tut-skip { color: var(--ink-soft); background: rgba(0, 0, 0, 0.06); border: 2px solid rgba(107, 54, 18, 0.25); }
.tut-step { position: absolute; right: 12px; bottom: 8px; font-size: 10px; font-weight: 700; color: var(--ink-soft); }
@media (prefers-reduced-motion: reduce) { .tut-spot, .tut-bubble { animation: none; transition: none; } }

/* ---------- How to play (js/howto.js) ---------- */
.title-howto { margin-top: 2px; color: var(--gold-hi); font-size: 14px; font-weight: 700; }
.settings-help { gap: 6px; margin-top: 2px; }
.settings-help .modal-btn-alt { flex: 1; }
.howto-card { padding: 18px 14px 14px; margin-top: 44px; max-height: calc(100dvh - 76px); display: flex; flex-direction: column; text-align: left; }
.howto-card .modal-avatar { margin: -58px auto 0; width: 84px; height: 84px; }
.howto-card .sheet-title { text-align: center; margin: 2px 0 8px; }
.howto-body { flex: 1; min-height: 0; overflow-y: auto; touch-action: pan-y; padding: 0 2px 4px; }
.ht-section { margin-bottom: 8px; padding: 10px 12px; border-radius: 14px; background: rgba(0, 0, 0, 0.25); border: 1px solid rgba(var(--gold-rgb), 0.3); }
.ht-section h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; font-size: 16px; color: var(--gold-hi); }
.ht-section p { margin: 0 0 6px; font-size: 13px; line-height: 1.4; color: rgba(255, 244, 222, 0.95); }
.ht-section p:last-child { margin-bottom: 0; }
.ht-section b { color: #fff3c4; }
.ht-art { width: 30px; height: 30px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; }
.ht-art svg { width: 100%; height: 100%; overflow: visible; }
.ht-art.face { border-radius: 50%; overflow: hidden; background: radial-gradient(circle at 50% 35%, #fff8ea, #f0dcb6); border: 2px solid var(--gold); }
.ht-art.star { font-size: 26px; color: #ffd34d; text-shadow: 0 0 6px rgba(255, 190, 60, 0.8); }
.ht-art.gear { font-size: 24px; color: var(--gold-hi); }
.ht-jar { margin-top: 6px; }
.ht-list { list-style: none; margin: 0 0 6px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.ht-list li { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; line-height: 1.35; color: rgba(255, 244, 222, 0.95); }

/* Pastry Spinner: Noi's pink-and-gold pastry machine, three reels and a lever (skill timing, nothing wagered) */
.spin-machine { position: relative; width: 236px; padding: 6px 10px 10px; border-radius: 22px 22px 16px 16px;
  background: linear-gradient(180deg, #ffb3cc, #f07aa2 55%, #c94f7c); border: 3px solid #6b3612;
  box-shadow: 0 5px 0 #6b3612, inset 0 2px 0 rgba(255, 255, 255, 0.6), inset 0 0 0 4px rgba(255, 211, 77, 0.55); }
/* a row of marquee bulbs along the top edge */
.spin-machine::before { content: ''; position: absolute; left: 16px; right: 16px; top: -7px; height: 10px;
  background: radial-gradient(circle, #fff6c4 0 3px, #ffbf2e 3.5px 4.5px, transparent 5px) 0 0 / 16px 10px repeat-x;
  animation: spinBulbs 0.8s steps(2) infinite; }
@keyframes spinBulbs { 50% { background-position: 8px 0; filter: brightness(1.35); } }
.spin-top { display: flex; align-items: center; justify-content: space-between; margin: 2px 2px 6px; }
.spin-order { display: flex; align-items: center; gap: 6px; padding: 2px 8px 2px 10px; border-radius: 999px;
  background: linear-gradient(180deg, var(--cream), var(--cream-2)); border: 2px solid #6b3612; }
.spin-order small { font-size: 11px; font-weight: 800; color: #a0410f; text-transform: uppercase; letter-spacing: 0.04em; }
.spin-want { width: 34px; height: 34px; display: inline-block; }
.spin-want svg { width: 100%; height: 100%; overflow: visible; }
.spin-want.pop { animation: spinPop 0.45s cubic-bezier(0.2, 1.6, 0.4, 1); }
@keyframes spinPop { from { transform: scale(0.3) rotate(-20deg); } }
.spin-pulls { display: flex; gap: 5px; }
.spin-pulls i { width: 14px; height: 14px; border-radius: 50%; background: rgba(60, 20, 30, 0.35); border: 2px solid #6b3612; }
.spin-pulls i.on { background: radial-gradient(circle at 35% 30%, #fff3c4, #f0b33c); }
.spin-pulls i.jackpot { background: radial-gradient(circle at 35% 30%, #fff, #ffd34d); box-shadow: 0 0 8px #ffd34d; }
.spin-pulls i.off { background: rgba(60, 20, 30, 0.6); }
.spin-window { position: relative; display: flex; gap: 6px; padding: 4px; border-radius: 12px; background: #4a1e2c;
  box-shadow: inset 0 3px 6px rgba(0, 0, 0, 0.6); }
.spin-reel { position: relative; flex: 1; height: 138px; overflow: hidden; border-radius: 8px;
  background: linear-gradient(180deg, #d9c9a8, #fff8e8 30%, #fff8e8 70%, #d9c9a8); transition: box-shadow 0.2s; }
/* shading at the top and bottom of each reel so it looks round */
.spin-reel::after { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(60, 20, 10, 0.45), transparent 32%, transparent 68%, rgba(60, 20, 10, 0.45)); }
.spin-strip { display: flex; flex-direction: column; will-change: transform; }
.spin-strip span { height: 46px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.spin-strip svg { width: 40px; height: 40px; overflow: visible; }
.spin-reel.next { box-shadow: 0 0 0 3px #ffd34d, 0 0 12px rgba(255, 211, 77, 0.9); }
.spin-reel.hit { box-shadow: 0 0 0 3px #6ee7b7, 0 0 14px rgba(110, 231, 183, 0.9); }
.spin-reel.miss { filter: saturate(0.55) brightness(0.85); }
/* the middle row (the pay line) */
.spin-line { position: absolute; left: 2px; right: 2px; top: calc(50% - 23px); height: 46px; pointer-events: none;
  border-top: 2px solid rgba(255, 211, 77, 0.9); border-bottom: 2px solid rgba(255, 211, 77, 0.9); }
.spin-line::before, .spin-line::after { content: ''; position: absolute; top: 50%; margin-top: -7px; border: 7px solid transparent; }
.spin-line::before { left: -4px; border-left-color: #ffd34d; }
.spin-line::after { right: -4px; border-right-color: #ffd34d; }
.spin-lever { position: absolute; right: -20px; top: 40px; width: 14px; height: 62px; border-radius: 0 8px 8px 0;
  background: linear-gradient(90deg, #868ea2, #f2f4f8, #868ea2); border: 2px solid #3b3350; transform-origin: 50% 100%; }
.spin-lever i { position: absolute; left: 50%; top: -14px; width: 22px; height: 22px; margin-left: -11px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ff9a9a, #f0384a 50%, #7e0c1e); border: 2px solid #6b3612; }
.spin-machine.lever-pull .spin-lever { animation: spinLever 0.5s ease-in-out; }
@keyframes spinLever { 40% { transform: scaleY(-0.6); } }
.spin-machine.jackpot { animation: spinJackpot 0.5s ease-in-out 2; }
@keyframes spinJackpot { 25% { transform: rotate(-2deg) scale(1.03); } 75% { transform: rotate(2deg) scale(1.03); } }
.spin-machine.jackpot::before { animation-duration: 0.25s; }
.spin-stop { margin-top: 2px; padding: 10px 34px; border-radius: 999px; font-size: 18px; font-weight: 700; color: var(--ink);
  background: linear-gradient(180deg, #fff3c4, #f0b33c 70%, #c9852a); border: 3px solid #6b3612; box-shadow: 0 4px 0 #6b3612, inset 0 2px 0 rgba(255, 255, 255, 0.7); }
.spin-stop:active { transform: translateY(3px); box-shadow: 0 1px 0 #6b3612, inset 0 2px 0 rgba(255, 255, 255, 0.7); }
.spin-stop:disabled { opacity: 0.55; }
@media (prefers-reduced-motion: reduce) { .spin-machine::before, .spin-machine.jackpot, .spin-want.pop { animation: none; } }
.mini-spin .mini-stage { height: clamp(290px, 40dvh, 320px); justify-content: center; gap: 6px; padding-top: 8px; }

/* Butcher blocks (level 61+): fixed wooden blocks; and the second bake goal on the top bar */
.cell.butcher { background: radial-gradient(circle at 50% 35%, #8a5a30 0%, #5a361a 100%); box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.25); }
.cell.butcher .tile { cursor: default; }
.row.goal .goal2 { display: inline-flex; align-items: center; gap: 2px; margin-left: 6px; }
.row.goal .goal2.hidden { display: none; }
.hud-goal { min-width: 0; }
.goals:has(.row.goal.two) { gap: 5px; }
.goals:has(.row.goal.two) .hud-icon.lg { width: 19px; height: 19px; }
.goals:has(.row.goal.two) .hud-num { font-size: 14px; letter-spacing: -0.02em; }
.row.goal.two .goal2 { margin-left: 4px; }
.tile.chopped { animation: blockChop 0.3s ease-out; }
@keyframes blockChop { 30% { transform: translateX(-3px) rotate(-3deg) scale(0.95); } 60% { transform: translateX(3px) rotate(2deg); } }

/* Natalie's Golden Rolling Pin (super power): rolls down the board, clearing everything */
.pin-roll { position: absolute; left: -4%; width: 108%; aspect-ratio: 240 / 40; top: -12%; z-index: 66; pointer-events: none;
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.45)) drop-shadow(0 0 14px rgba(255, 211, 77, 0.9)); animation: pinRoll 1.3s cubic-bezier(0.45, 0, 0.55, 1) forwards; }
.pin-roll svg { width: 100%; height: 100%; display: block; }
@keyframes pinRoll { from { top: -12%; } to { top: 104%; opacity: 0.2; } }
.power-btn.super { background: linear-gradient(180deg, #fff6c4, #ffd34d 60%, #d99a16); border-color: #8a5a0a; }
.power-btn.super .power-text b { color: #6b3612; }
.power-btn.super .power-meter { display: none; }
.board-footer.many.five { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 5px; }
.board-footer.many.five { gap: 4px; }
.board-footer.many.five .power-btn { padding-right: 3px; }
.board-footer.many.five .power-face { width: 26px; height: 26px; }
.board-footer.many.five .power-text b { font-size: 10px; }
@media (prefers-reduced-motion: reduce) { .pin-roll { display: none; } }

/* ---------- The Grand Finale: ending scene and credits (js/credits.js) ---------- */
.ending { position: fixed; inset: 0; z-index: 120; display: flex; flex-direction: column; background: #1a0d06; overflow: hidden;
  animation: endFadeIn 0.6s ease-out; user-select: none; }
@keyframes endFadeIn { from { opacity: 0; } }
.end-stage { position: relative; flex: 1; min-height: 0; overflow: hidden; transition: filter 0.8s, opacity 0.8s;
  background: radial-gradient(ellipse at 50% 85%, #ffe3a8 0%, #f6a66b 35%, #c45a6a 70%, #5a2a4a 100%); }
.ending-cozy .end-stage { background: radial-gradient(ellipse at 70% 15%, #3a3f7a 0%, #1f2150 45%, #120c26 100%); }
.ending-cozy .end-stage::before { content: ''; position: absolute; inset: 0 0 50% 0; pointer-events: none;
  background: radial-gradient(circle, #fff 0 1.2px, transparent 1.6px) 0 0 / 46px 38px, radial-gradient(circle, #fffbe6 0 1px, transparent 1.4px) 21px 17px / 61px 47px; opacity: 0.7; }
/* the shop at its own shape, standing on the floor behind the family */
.end-wall { position: absolute; left: -6%; right: -6%; bottom: 21%; aspect-ratio: 400 / 210; border-top: 6px solid #6b3612;
  box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.35); }
.end-wall svg { width: 100%; height: 100%; display: block; }
.end-wall.fade { animation: endFadeIn 1.2s ease-out; }
.end-floor { position: absolute; left: 0; right: 0; bottom: 0; height: 22%;
  background: repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.12) 0 2px, transparent 2px 46px), linear-gradient(180deg, #a86a30, #6b3a16); }
.end-cast { position: absolute; left: 0; right: 0; bottom: 6%; display: flex; align-items: flex-end; justify-content: center; padding: 0 4px; }
.end-fam { width: 27%; max-width: 150px; aspect-ratio: 200 / 222; transition: transform 0.3s; }
.end-fam.natalie { width: 30%; max-width: 165px; z-index: 2; }
.end-fam.speaking { transform: translateY(-6px) scale(1.04); }
.end-pet { width: 16%; max-width: 90px; aspect-ratio: 200 / 230; margin-bottom: -2%; }
.end-fam svg, .end-pet svg { width: 100%; height: 100%; overflow: visible; }
.ending-golden .end-fam { animation: endHop 0.9s ease-in-out infinite; }
.ending-golden .end-fam.noi { animation-delay: 0.3s; }
.ending-golden .end-fam.deli { animation-delay: 0.6s; }
@keyframes endHop { 50% { transform: translateY(-5px); } }
.end-banner { position: absolute; top: 6%; left: 50%; transform: translateX(-50%) rotate(-2deg); padding: 6px 18px; border-radius: 10px;
  font-family: 'Lilita One', Fredoka, sans-serif; font-size: clamp(20px, 6.5vw, 30px); letter-spacing: 0.06em; color: #6b3612;
  background: linear-gradient(180deg, #fff6c4, #ffd34d 60%, #d99a16); border: 3px solid #6b3612; box-shadow: 0 6px 0 #6b3612; white-space: nowrap; }
.end-banner.lit { animation: endGlow 1.2s ease-in-out infinite; }
@keyframes endGlow { 50% { box-shadow: 0 6px 0 #6b3612, 0 0 28px 8px rgba(255, 211, 77, 0.85); } }
.end-ribbon { position: absolute; left: 0; right: 0; bottom: 30%; height: 14px; z-index: 3; background: linear-gradient(180deg, #ff6b7d, #d81e3a);
  box-shadow: 0 3px 4px rgba(0, 0, 0, 0.35); transition: transform 0.6s, opacity 0.6s; transform-origin: center; }
.end-ribbon i { position: absolute; left: 50%; top: -12px; width: 38px; height: 38px; margin-left: -19px; border-radius: 50%;
  background: radial-gradient(circle, #ff8a9a 0 30%, #d81e3a 31%); border: 3px solid #7e0c1e; }
.end-ribbon.cut { transform: scaleX(0); opacity: 0; }
.end-night { position: absolute; left: -6%; right: -6%; bottom: 0; top: 0; background: linear-gradient(180deg, rgba(20, 24, 70, 0.1) 40%, rgba(20, 24, 70, 0.5)); pointer-events: none; z-index: 1; }
.end-moon { position: absolute; top: 9%; right: 12%; width: 46px; height: 46px; border-radius: 50%; z-index: 1;
  background: radial-gradient(circle at 35% 35%, #fffbe6, #f3dc8a); box-shadow: 0 0 24px 6px rgba(255, 245, 200, 0.55); }
/* hangs on the shop's top edge (the wall is 112% wide at 400:210, so 58.8vw tall) */
.end-sign { position: absolute; bottom: calc(21% + 58.8vw - 26px); left: 50%; z-index: 2; transform: translateX(-50%); padding: 5px 16px; border-radius: 8px;
  font-family: 'Lilita One', Fredoka, sans-serif; font-size: 22px; color: #fff; background: #2e8b57; border: 3px solid #6b3612; }
.end-sign.flip { background: #b3263a; animation: endFlip 0.6s ease-in-out; }
@keyframes endFlip { 50% { transform: translateX(-50%) rotateY(90deg); } }
.ending-cozy .end-cast { z-index: 2; }
.end-trophy { position: absolute; top: 17%; left: 50%; width: 120px; height: 120px; margin-left: -60px; z-index: 3;
  filter: drop-shadow(0 0 18px rgba(255, 211, 77, 0.95)); animation: endTrophy 0.8s cubic-bezier(0.2, 1.6, 0.4, 1); }
.end-trophy svg { width: 100%; height: 100%; }
@keyframes endTrophy { from { transform: scale(0.2) rotate(-30deg); opacity: 0; } }
.end-talk { position: relative; margin: 10px 12px calc(14px + env(safe-area-inset-bottom)); display: grid; grid-template-columns: 58px 1fr; gap: 10px;
  align-items: center; padding: 12px 14px 22px 10px; border-radius: 20px; background: linear-gradient(180deg, var(--cream), var(--cream-2));
  border: 3px solid #6b3612; color: var(--ink); min-height: 86px; }
.end-talk.pop { animation: modalIn 0.35s cubic-bezier(0.2, 1.4, 0.4, 1); }
.end-face { width: 58px; height: 58px; }
.end-face svg { width: 100%; height: 100%; }
.end-line { margin: 0; font-size: 16px; line-height: 1.35; font-weight: 600; }
.end-next { position: absolute; right: 14px; bottom: 5px; font-size: 11px; font-weight: 700; color: var(--ink-soft); animation: endBlink 1.2s infinite; }
@keyframes endBlink { 50% { opacity: 0.35; } }
.end-skip { position: absolute; top: calc(10px + env(safe-area-inset-top)); right: 10px; z-index: 6; padding: 6px 14px; border-radius: 999px;
  font-size: 13px; font-weight: 700; color: #fff3c4; background: rgba(0, 0, 0, 0.45); border: 2px solid rgba(255, 211, 77, 0.6); }
.ending.rolling .end-stage { filter: brightness(0.3) blur(1.5px); }
.end-credits { position: absolute; inset: 0; z-index: 4; overflow: hidden; pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 14%, #000 86%, transparent);
  mask-image: linear-gradient(180deg, transparent, #000 14%, #000 86%, transparent); }
.end-roll { position: absolute; left: 0; right: 0; top: 100%; text-align: center; color: #fff3c4; padding: 0 24px; }
.end-roll.go { animation: endRoll 30s linear forwards; }
@keyframes endRoll { to { transform: translateY(calc(-100% - 100dvh)); } }
.end-roll h2 { margin: 0 0 30px; font-family: 'Lilita One', Fredoka, sans-serif; font-size: 40px; color: #ffd34d; text-shadow: 0 3px 0 #6b3612; }
.end-roll h3 { margin: 34px 0 10px; font-size: 13px; letter-spacing: 0.18em; text-transform: uppercase; color: #f0c46a; }
.end-roll p { margin: 0; font-size: 17px; line-height: 1.6; }
.end-cast-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; align-items: center; }
.end-cast-list li { width: min(270px, 86vw); display: grid; grid-template-columns: 54px 1fr; grid-template-rows: auto auto; column-gap: 12px; align-items: center; text-align: left; }
.end-cface { grid-row: span 2; width: 54px; height: 54px; border-radius: 50%; overflow: hidden; background: radial-gradient(circle at 50% 35%, #fff8ea, #f0dcb6); border: 2px solid #f0c46a; }
.end-cface svg { width: 100%; height: 100%; }
.end-cast-list b { font-size: 19px; color: #fff; }
.end-cast-list small { font-size: 13px; color: #f0c46a; }
.end-final { position: absolute; inset: 0; z-index: 5; display: flex; align-items: center; justify-content: center; padding: 16px; }
.end-card { width: min(360px, 100%); padding: 20px 18px 18px; border-radius: 24px; text-align: center; color: #fff3c4;
  background: linear-gradient(180deg, #4a2a16, #2b170d); border: 3px solid var(--gold); box-shadow: 0 14px 40px rgba(0, 0, 0, 0.6);
  animation: modalIn 0.5s cubic-bezier(0.2, 1.4, 0.4, 1); }
.end-card h2 { margin: 0 0 12px; font-size: 22px; color: #ffd34d; }
.end-card p { margin: 0 0 10px; font-size: 14px; line-height: 1.4; }
.end-badge { display: inline-block; margin-bottom: 10px; padding: 8px 16px; border-radius: 999px; font-size: 18px; font-weight: 800; color: #6b3612;
  background: linear-gradient(180deg, #fff6c4, #ffd34d 60%, #d99a16); border: 3px solid #6b3612; }
.end-badge.cozy { background: linear-gradient(180deg, #fff7e4, #f1d9a6); }
.end-rewards { list-style: none; margin: 0 0 12px; padding: 0; text-align: left; display: flex; flex-direction: column; gap: 6px; font-size: 13.5px; }
.end-rewards li { padding: 7px 10px; border-radius: 12px; background: rgba(255, 211, 77, 0.12); border: 1px solid rgba(255, 211, 77, 0.35); }
.end-encore { color: #f0c46a; font-weight: 700; }
.end-done { width: 100%; margin-top: 4px; }
@media (prefers-reduced-motion: reduce) {
  .ending, .ending .end-fam, .end-banner.lit, .end-trophy, .end-talk.pop, .end-next { animation: none; }
}

/* Title screen badge after the golden ending, and the Encore tag on levels past 100 */
.title-badge { margin-top: 2px; padding: 4px 12px; border-radius: 999px; font-size: 13px; font-weight: 800; color: #6b3612;
  background: linear-gradient(180deg, #fff6c4, #ffd34d 60%, #d99a16); border: 2px solid #6b3612; box-shadow: 0 0 14px rgba(255, 211, 77, 0.6); }
.encore-tag { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 999px; font-size: 11px; font-weight: 800; letter-spacing: 0.08em;
  vertical-align: middle; color: #6b3612; background: linear-gradient(180deg, #fff6c4, #ffd34d); border: 2px solid #6b3612; }

/* Level card: All levels and Shop side by side */
.level-alt-row { display: flex; gap: 8px; width: 100%; }
.level-alt-row .modal-btn-alt { flex: 1; min-width: 0; position: relative; }
.shop-dot { position: absolute; top: -6px; right: -4px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; font-size: 12px;
  font-weight: 800; line-height: 20px; color: #fff; background: #e11d48; border: 2px solid #fff3c4; }

/* Hidden gifts (secret Wardrobe items) */
.goal-row.gift span { color: #ffd34d; }
.wr-item.secret { background: repeating-linear-gradient(45deg, rgba(255, 211, 77, 0.12) 0 8px, transparent 8px 16px); border-style: dashed; }
.wr-item.secret b { letter-spacing: 0.2em; color: #ffd34d; }
.wr-item.secret small { color: #fff3c4; }

/* ---------- "Our Story" storybook (js/story.js) ---------- */
.story { position: fixed; inset: 0; z-index: 110; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; padding: 16px; background: radial-gradient(circle at 50% 40%, #4a2a16, #1a0d06 75%); animation: stIn 0.6s ease-out; transition: opacity 0.4s; }
.story.gone { opacity: 0; }
@keyframes stIn { from { opacity: 0; } }
.st-book { width: min(440px, 100%); padding: 10px 10px 12px; border-radius: 22px; background: linear-gradient(180deg, #fff7e4, #f1d9a6);
  border: 4px solid #6b3612; box-shadow: 0 14px 40px rgba(0, 0, 0, 0.6), inset 0 0 0 3px rgba(240, 196, 106, 0.6); }
.st-stage { position: relative; width: 100%; aspect-ratio: 400 / 340; overflow: hidden; border-radius: 14px; border: 3px solid #6b3612;
  background: #f3d9ae; animation: stPage 0.7s ease-out; }
@keyframes stPage { from { opacity: 0; transform: scale(0.97); } }
.st-caption { margin: 10px 4px 6px; min-height: 3.9em; font-size: 16px; line-height: 1.3; font-weight: 600; text-align: center; color: #3a1e0c; }
.st-caption.in { animation: stCap 0.8s ease-out 0.3s backwards; }
@keyframes stCap { from { opacity: 0; transform: translateY(6px); } }
.st-dots { display: flex; justify-content: center; gap: 6px; }
.st-dots i { width: 9px; height: 9px; border-radius: 50%; background: rgba(107, 54, 18, 0.25); transition: background 0.3s; }
.st-dots i.on { background: #c2410c; }
.st-hint { margin: 0; font-size: 13px; font-weight: 700; color: #f0c46a; opacity: 0.85; animation: endBlink 1.6s infinite; }
.st-close { position: absolute; top: calc(12px + env(safe-area-inset-top)); right: 12px; width: 40px; height: 40px; border-radius: 50%;
  font-size: 18px; color: #fff3c4; background: rgba(0, 0, 0, 0.45); border: 2px solid rgba(255, 211, 77, 0.6); }
.story.idle .st-close { display: none; }

/* scenery */
.st-stage > * { position: absolute; }
.st-wall { left: -4%; right: -4%; top: 0; aspect-ratio: 400 / 210; }
.st-wall svg, .st-stand svg, .st-shop svg { width: 100%; height: 100%; display: block; }
/* The kitchen floor: cream-and-caramel tiles in perspective under a dark baseboard, clearly not wall */
.st-floor { left: 0; right: 0; bottom: 0; height: 34%; overflow: hidden; background: #c99d6a; border-top: 5px solid #5a3418;
  box-shadow: inset 0 8px 10px -4px rgba(40, 18, 6, 0.45); }
.st-floor::before { content: ''; position: absolute; left: -60%; right: -60%; top: 0; bottom: -40%;
  background: repeating-conic-gradient(#f3e2c2 0 25%, #c99d6a 0 50%) 0 0 / 34px 34px;
  transform: perspective(160px) rotateX(48deg); transform-origin: 50% 0; }
.st-floor::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(40, 18, 6, 0.28), rgba(40, 18, 6, 0) 45%); }
.st-sky { inset: 0 0 30% 0; background: linear-gradient(180deg, #8fd0f0, #d8f1fb); }
.st-sun { position: absolute; top: 8%; left: 8%; width: 13%; aspect-ratio: 1; border-radius: 50%; background: #ffe07a; box-shadow: 0 0 24px 8px rgba(255, 224, 122, 0.7); }
.st-cloud { position: absolute; width: 22%; height: 9%; border-radius: 999px; background: #fff; opacity: 0.9; animation: stCloud 14s linear infinite; }
.st-cloud::before { content: ''; position: absolute; left: 22%; top: -55%; width: 45%; height: 120%; border-radius: 50%; background: #fff; }
.st-cloud.c1 { top: 10%; left: 60%; } .st-cloud.c2 { top: 24%; left: 26%; transform: scale(0.7); animation-duration: 20s; }
@keyframes stCloud { to { translate: -40% 0; } }
.st-hills { left: -10%; right: -10%; bottom: 26%; height: 22%; border-radius: 50% 50% 0 0; background: #8bc27a; }
.st-grass { left: 0; right: 0; bottom: 0; height: 30%; background: linear-gradient(180deg, #9ccb86, #6fa65a); }
.st-road { left: 0; right: 0; bottom: 6%; height: 9%; background: #c9a77a; border-top: 2px solid #a8865a; border-bottom: 2px solid #a8865a; }
.st-who svg { width: 100%; height: 100%; overflow: visible; }

/* 1 · Natalie kneads, a loaf rises */
.s1 .natalie.knead { left: 24%; bottom: 4%; width: 52%; aspect-ratio: 1; }
.s1 .st-shelf { right: 4%; top: 46%; width: 26%; height: 4%; border-radius: 3px; background: #8b5a2b; border: 2px solid #3a1e0c; }
.st-loaf svg, .st-sprite svg { width: 100%; height: 100%; }
.s1 .st-loaf.rise { right: 9%; top: 30%; width: 16%; aspect-ratio: 1; transform-origin: 50% 100%; animation: stRise 3.5s ease-in-out 0.6s both; }
@keyframes stRise { from { transform: scale(0.55, 0.4); filter: saturate(0.3) brightness(1.25); } to { transform: scale(1); } }
.st-puffs i { position: absolute; width: 12px; height: 12px; border-radius: 50%; background: #fffdf6; opacity: 0; animation: stPuff 1.6s ease-out infinite; }
.s1 .st-puffs { left: 34%; bottom: 30%; width: 32%; height: 10%; }
.st-puffs i:nth-child(1) { left: 5%; } .st-puffs i:nth-child(2) { left: 25%; animation-delay: 0.3s; } .st-puffs i:nth-child(3) { left: 45%; animation-delay: 0.6s; }
.st-puffs i:nth-child(4) { left: 65%; animation-delay: 0.9s; } .st-puffs i:nth-child(5) { left: 85%; animation-delay: 1.2s; } .st-puffs i:nth-child(6) { left: 55%; animation-delay: 0.45s; }
@keyframes stPuff { 0% { opacity: 0.9; transform: translateY(0) scale(0.6); } 100% { opacity: 0; transform: translateY(-40px) scale(1.6); } }

/* 2 · loaves pile up; Deli sneaks a cookie */
.s2 .st-table { left: 36%; right: 4%; bottom: 20%; height: 6%; border-radius: 4px; background: #8b5a2b; border: 2px solid #3a1e0c; }
.st-table::after { content: ''; position: absolute; left: 10%; right: 10%; top: 100%; height: 300%; border-left: 8px solid #6b3a16; border-right: 8px solid #6b3a16; }
.s2 .st-pile { left: 40%; right: 8%; bottom: 26%; height: 40%; }
.s2 .st-pile .st-loaf { position: absolute; width: 22%; aspect-ratio: 1; animation: stDrop 0.5s cubic-bezier(0.3, 1.5, 0.5, 1) both; }
.s2 .p0 { left: 0; bottom: 0; animation-delay: 0.4s; } .s2 .p1 { left: 22%; bottom: 0; animation-delay: 0.8s; } .s2 .p2 { left: 44%; bottom: 0; animation-delay: 1.2s; }
.s2 .p3 { left: 66%; bottom: 0; animation-delay: 1.6s; } .s2 .p4 { left: 11%; bottom: 22%; animation-delay: 2s; } .s2 .p5 { left: 33%; bottom: 22%; animation-delay: 2.4s; }
.s2 .p6 { left: 55%; bottom: 22%; animation-delay: 2.8s; } .s2 .p7 { left: 22%; bottom: 44%; animation-delay: 3.2s; } .s2 .p8 { left: 44%; bottom: 44%; animation-delay: 3.6s; }
@keyframes stDrop { from { opacity: 0; transform: translateY(-60px); } }
.s2 .natalie.left { left: 2%; bottom: 4%; width: 36%; aspect-ratio: 200 / 222; animation: stWow 0.6s ease-in-out 3.8s 2; }
@keyframes stWow { 50% { transform: translateY(-8px) rotate(-3deg); } }
.s2 .deli.peek { right: -4%; bottom: 2%; width: 30%; aspect-ratio: 200 / 220; animation: stPeek 1.2s ease-out 2.6s both; }
@keyframes stPeek { from { transform: translateX(80%); } }

/* 3 · Noi builds the farm stand */
.st-stand { left: 14%; right: 4%; bottom: 8%; aspect-ratio: 400 / 300; }
.s3 .st-stand.build { animation: stBuild 4.6s steps(6, end) 0.4s both; }
@keyframes stBuild { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0 0 0 0); } }
.s3 .noi.builder { left: -4%; bottom: 2%; width: 38%; aspect-ratio: 220 / 236; }
.s3 .noi .noi-arm.swing { animation-duration: 0.3s; }
.s3 .st-dust { left: 20%; right: 10%; bottom: 10%; height: 30%; }
.s3 .st-dust i { position: absolute; width: 16px; height: 16px; border-radius: 50%; background: rgba(240, 220, 190, 0.9); opacity: 0; animation: stPuff 0.9s ease-out infinite; }
.s3 .st-dust i:nth-child(odd) { animation-delay: 0.45s; }
.s3 .st-dust i:nth-child(1) { left: 10%; bottom: 10%; } .s3 .st-dust i:nth-child(2) { left: 30%; bottom: 40%; } .s3 .st-dust i:nth-child(3) { left: 50%; bottom: 20%; }
.s3 .st-dust i:nth-child(4) { left: 70%; bottom: 50%; } .s3 .st-dust i:nth-child(5) { left: 85%; bottom: 15%; } .s3 .st-dust i:nth-child(6) { left: 60%; bottom: 70%; }

/* 4 · neighbors come by */
/* Natalie stands behind the counter: the stand is drawn again on top of her with only the counter showing
   (.front), so she shows from the chest up between the counter and the awning. */
.s4 .natalie.behind, .s5 .natalie.behind { left: 35%; bottom: 15%; width: 30%; aspect-ratio: 200 / 222; z-index: 2; }
.st-stand.front { z-index: 3; clip-path: inset(74% 0 0 0); pointer-events: none; }
.s4 .nb, .s5 .st-line { z-index: 4; }
.s4 .st-sprite.buy { z-index: 5; }
.s5 .st-soldout { z-index: 4; }
.s4 .cat.nap { z-index: 2; }
.s4 .cat.nap { left: 70%; bottom: 52%; width: 14%; aspect-ratio: 200 / 230; }
.st-stage .nb { position: absolute; bottom: 3%; width: 20%; aspect-ratio: 120 / 160; }
.s4 .nb.walk1 { left: 18%; animation: stWalkIn 2.2s ease-out 0.3s both, stBob 0.4s ease-in-out 0.3s 5 alternate; }
.s4 .nb.walk2 { left: 44%; animation: stWalkIn 2.4s ease-out 3.2s both, stBob 0.4s ease-in-out 3.2s 6 alternate; }
@keyframes stWalkIn { from { transform: translateX(260%); } }
@keyframes stBob { to { translate: 0 -5px; } }
/* what each neighbor bought, carried home in their arms */
.st-sprite.buy { width: 8%; aspect-ratio: 1; opacity: 0; z-index: 3; animation: stBuy 1.2s ease-out both; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.3)); }
.s4 .buy.b1 { left: 29%; bottom: 3%; animation-delay: 2.6s; } .s4 .buy.b2 { left: 55%; bottom: 3%; animation-delay: 5.7s; }
@keyframes stBuy { 0% { opacity: 0; transform: translateY(20px) scale(0.5); } 30% { opacity: 1; transform: translateY(0) scale(1.15); } 100% { opacity: 1; transform: translateY(-6px) scale(1); } }

/* 5 · the line grows, SOLD OUT */
.s5 .st-line { left: 0; right: 0; bottom: 2%; height: 32%; }
.s5 .st-line .nb { bottom: 0; width: 15%; animation: stWalkIn 1.4s ease-out both, stBob 0.5s ease-in-out infinite alternate; }
.s5 .q0 { left: 2%; animation-delay: 0.2s !important; } .s5 .q1 { left: 18%; animation-delay: 0.6s !important; } .s5 .q2 { left: 34%; animation-delay: 1s !important; }
.s5 .q3 { left: 50%; animation-delay: 1.4s !important; } .s5 .q4 { left: 66%; animation-delay: 1.8s !important; } .s5 .q5 { left: 82%; animation-delay: 2.2s !important; }
.s5 .st-soldout { left: 50%; top: 30%; padding: 4px 12px; border-radius: 8px; transform: translateX(-30%) rotate(-10deg); font-family: 'Lilita One', Fredoka, sans-serif;
  font-size: clamp(16px, 5vw, 24px); color: #fff; background: #d81e3a; border: 3px solid #3a1e0c; box-shadow: 0 4px 0 #3a1e0c; animation: stStamp 0.5s cubic-bezier(0.2, 1.6, 0.4, 1) 3s both; }
@keyframes stStamp { from { opacity: 0; transform: translateX(-30%) rotate(-10deg) scale(2.4); } }
.s5 .st-faces { left: 3%; top: 4%; display: flex; gap: 2%; width: 44%; }
.s5 .st-faces .st-who { width: 32%; aspect-ratio: 180 / 160; border-radius: 50%; background: radial-gradient(circle at 50% 35%, #fff8ea, #f0dcb6); border: 2px solid #f0c46a;
  animation: stPop 0.5s cubic-bezier(0.2, 1.6, 0.4, 1) both; }
.s5 .f1 { animation-delay: 4s !important; } .s5 .f2 { animation-delay: 4.3s !important; } .s5 .f3 { animation-delay: 4.6s !important; }
@keyframes stPop { from { opacity: 0; transform: scale(0.2); } }

/* 6 · the bakery opens */
.s6 .st-shop { left: 6%; right: 6%; bottom: 14%; aspect-ratio: 400 / 300; animation: stRiseUp 1.2s cubic-bezier(0.2, 1.2, 0.4, 1) 0.2s both; }
@keyframes stRiseUp { from { transform: translateY(40%); opacity: 0; } }
/* Three depth planes (back to front): neighbors further back and a little higher, partly hidden by the family;
   the family in the middle; the pets sitting lowest, in front of everyone. Overlaps are fine, the order is what matters. */
.s6 .st-family { left: 14%; right: 14%; bottom: 4%; height: 37%; z-index: 2; display: flex; align-items: flex-end; justify-content: center; }
.s6 .st-family .st-who { height: 100%; aspect-ratio: 200 / 222; animation: stPop 0.6s cubic-bezier(0.2, 1.6, 0.4, 1) 1.2s both; }
.s6 .st-family .noi, .s6 .st-family .deli { height: 88%; }
.s6 .cat.front, .s6 .collie.front { bottom: 0; width: 15%; z-index: 3; animation: stPop 0.6s cubic-bezier(0.2, 1.6, 0.4, 1) 1.6s both; }
.s6 .cat.front { left: 28%; aspect-ratio: 200 / 230; } .s6 .collie.front { right: 27%; aspect-ratio: 220 / 250; }
.s6 .nb.cheer { bottom: 8%; width: 12%; z-index: 1; animation: stPop 0.5s ease-out both, stBob 0.35s ease-in-out infinite alternate; }
.s6 .c1 { left: 6%; animation-delay: 2s !important; } .s6 .c2 { left: 17%; bottom: 10%; animation-delay: 2.3s !important; }
.s6 .c3 { right: 17%; bottom: 10%; animation-delay: 2.6s !important; } .s6 .c4 { right: 6%; animation-delay: 2.9s !important; }

@media (prefers-reduced-motion: reduce) { .story *, .story { animation-duration: 0.01s !important; animation-iteration-count: 1 !important; } }

/* "Our story" buttons */
.title-links { display: flex; gap: 16px; justify-content: center; }

/* The daily Bonus Bake limit, shown next to the jar */
.jar-tag { flex-shrink: 0; margin-left: -4px; padding: 1px 5px; border-radius: 999px; font-size: 10px; font-weight: 700; line-height: 1.3; white-space: nowrap;
  color: #fff3c4; background: rgba(30, 24, 70, 0.75); border: 1px solid rgba(201, 166, 255, 0.6); }
.jar-tag.hidden { display: none; }

/* ---------- Pet stories: Baymax (b1-b4) and Pearly (p1-p3) ---------- */
.b1 .st-shop, .p1 .st-shop, .p2 .st-shop { left: 6%; right: 6%; bottom: 14%; aspect-ratio: 400 / 300; }
/* Baymax acting out a scene: poses stacked in one box (story.js actor), one shown at a time */
.st-who.actor .ap { position: absolute; inset: 0; opacity: 0; }
.pet.cat .ct-leg, .pet.cat .ct-body { transform-box: view-box; }
.pet.cat.pose-walk .ct-leg.front.near, .pet.cat.pose-walk .ct-leg.back.far { animation: ctWalk 0.56s ease-in-out infinite; }
.pet.cat.pose-walk .ct-leg.front.far, .pet.cat.pose-walk .ct-leg.back.near { animation: ctWalk 0.56s ease-in-out -0.28s infinite; }
@keyframes ctWalk { 0%, 100% { transform: rotate(20deg); } 50% { transform: rotate(-20deg); } }
.pet.cat.pose-walk .ct-body { animation: ctBob 0.28s ease-in-out infinite alternate; }
@keyframes ctBob { to { transform: translateY(-3px); } }
.ap.run .pet.cat .ct-leg { animation-duration: 0.3s !important; animation-name: ctRun !important; }
.ap.run .pet.cat .ct-leg.front.far, .ap.run .pet.cat .ct-leg.back.near { animation-delay: -0.15s !important; }
.ap.run .pet.cat .ct-body { animation-duration: 0.15s; }
@keyframes ctRun { 0%, 100% { transform: rotate(36deg); } 50% { transform: rotate(-36deg); } }
@media (prefers-reduced-motion: reduce) { .pet.cat .ct-leg, .pet.cat .ct-body { animation: none !important; } }
/* b1: he walks along the sidewalk, jumps up to the window sill and lies down to peek in */
.b1 .cat.peek { left: 8%; bottom: 33%; width: 34%; z-index: 2; aspect-ratio: 260 / 180; animation: b1Move 3.6s linear 0.3s both; }
@keyframes b1Move { 0% { transform: translate(290%, 87%); } 58% { transform: translate(0, 87%); animation-timing-function: ease-out; }
  67% { transform: translate(0, -14%); animation-timing-function: ease-in; } 74%, 100% { transform: translate(0, 0); } }
.b1 .peek .walk { animation: b1Walk 3.6s linear 0.3s both; }
.b1 .peek .jump { animation: b1Jump 3.6s linear 0.3s both; }
.b1 .peek .lie { animation: b1Lie 3.6s linear 0.3s both; }
@keyframes b1Walk { 0%, 57.9% { opacity: 1; } 58%, 100% { opacity: 0; } }
@keyframes b1Jump { 0%, 57.9% { opacity: 0; } 58%, 73.9% { opacity: 1; } 74%, 100% { opacity: 0; } }
@keyframes b1Lie { 0%, 73.9% { opacity: 0; } 74%, 100% { opacity: 1; } }
/* b2: the croissant heist */
.b2 .st-table, .b3 .st-table { left: 36%; right: 4%; bottom: 20%; height: 6%; border-radius: 4px; background: #8b5a2b; border: 2px solid #3a1e0c; }
.b2 .st-pile { left: 40%; right: 8%; bottom: 26%; height: 20%; }
.b2 .st-pile .st-sprite { position: absolute; bottom: 0; width: 22%; aspect-ratio: 1; }
.b2 .t0 { left: 0; } .b2 .t1 { left: 24%; } .b2 .t2 { left: 48%; animation: stGone 0.1s linear 2.65s both; } .b2 .t3 { left: 72%; }
@keyframes stGone { to { opacity: 0; } }
.b2 .natalie.left { left: 2%; bottom: 4%; width: 36%; aspect-ratio: 200 / 222; animation: stWow 0.5s ease-in-out 2.9s 3; }
.st-bang { left: 14%; top: 18%; font-family: 'Lilita One', Fredoka, sans-serif; font-size: clamp(30px, 10vw, 46px); color: #d81e3a;
  -webkit-text-stroke: 2px #3a1e0c; animation: stPop 0.4s cubic-bezier(0.2, 1.6, 0.4, 1) 2.8s both; }
/* b2: he walks in, jumps onto the counter, crouches and paws the croissant, jumps down with it and runs off */
.b2 .cat.dash { left: 68%; bottom: 25%; width: 30%; z-index: 2; aspect-ratio: 260 / 180; animation: b2Move 4.2s linear 0.3s both; }
@keyframes b2Move { 0% { transform: translate(115%, 90%); } 38% { transform: translate(12%, 90%); animation-timing-function: ease-out; }
  44% { transform: translate(6%, -16%); animation-timing-function: ease-in; } 50%, 59.5% { transform: translate(0, 0); animation-timing-function: ease-out; }
  64% { transform: translate(-40%, -12%); animation-timing-function: ease-in; } 71.4% { transform: translate(-80%, 90%); } 100% { transform: translate(-360%, 90%); } }
.b2 .dash .walk { animation: b2Walk 4.2s linear 0.3s both; }
.b2 .dash .jump { animation: b2Jump 4.2s linear 0.3s both; }
.b2 .dash .lie { animation: b2Lie 4.2s linear 0.3s both; }
.b2 .dash .run { animation: b2Run 4.2s linear 0.3s both; }
@keyframes b2Walk { 0%, 37.9% { opacity: 1; } 38%, 100% { opacity: 0; } }
@keyframes b2Jump { 0%, 37.9% { opacity: 0; } 38%, 49.9% { opacity: 1; } 50%, 59.4% { opacity: 0; transform: none; }
  59.5%, 71.3% { opacity: 1; transform: rotate(-20deg); } 71.4%, 100% { opacity: 0; } }
@keyframes b2Lie { 0%, 49.9% { opacity: 0; } 50%, 59.4% { opacity: 1; } 59.5%, 100% { opacity: 0; } }
@keyframes b2Run { 0%, 71.3% { opacity: 0; } 71.4%, 100% { opacity: 1; } }
/* the croissant in his mouth, from the moment he grabs it */
.b2 .dash .st-sprite.held { position: absolute; left: 7%; bottom: 27%; width: 19%; aspect-ratio: 1; animation: b2Held 4.2s linear 0.3s both; }
@keyframes b2Held { 0%, 59.4% { opacity: 0; } 59.5%, 100% { opacity: 1; } }
/* b3: back every day */
.b3 .cat.ontable { left: 60%; bottom: 25%; width: 22%; aspect-ratio: 200 / 230; }
/* the cookie sits by his front paws (away from the swishing tail) and gets nudged as he nibbles */
.b3 .st-sprite.nibble { left: 57%; bottom: 25%; width: 9%; aspect-ratio: 1; z-index: 2; transform-origin: 50% 90%; animation: stNibble 0.9s ease-in-out 1s infinite; }
@keyframes stNibble { 0%, 100% { transform: rotate(0deg); } 30% { transform: rotate(-8deg) translateY(-2px); } 60% { transform: rotate(4deg); } }
.b3 .deli.laugh { left: 2%; bottom: 4%; width: 30%; aspect-ratio: 200 / 220; animation: stBob 0.35s ease-in-out infinite alternate; }
.b3 .noi.watch { left: 26%; bottom: 3%; width: 30%; aspect-ratio: 220 / 236; }
/* b4 / p3: the family with the new pet, hearts and a name banner */
/* The family on the floor (each placed, all feet on the same floor line), the new pet small in front of Natalie */
.st-family.pets { inset: 0; }
.st-stage .st-family.pets .st-who { position: absolute; bottom: 2%; height: auto; aspect-ratio: 200 / 222; }
.st-family.pets .noi { left: 1%; width: 32%; z-index: 1; }
.st-family.pets .natalie { left: 30%; width: 38%; z-index: 2; }
.st-family.pets .deli { right: 1%; width: 32%; z-index: 1; }
.b4 .cat.star, .p3 .collie.star { left: 43%; bottom: 0; width: 15%; aspect-ratio: 200 / 230; z-index: 3; animation: stPop 0.6s cubic-bezier(0.2, 1.6, 0.4, 1) 0.8s both; }
.p3 .collie.star { left: 42%; width: 16%; aspect-ratio: 220 / 250; }
.p3 .cat.side { left: 28%; bottom: 0; width: 12%; aspect-ratio: 200 / 230; z-index: 3; }
.st-hearts { left: 20%; right: 20%; top: 6%; height: 40%; }
.st-hearts i { position: absolute; bottom: 0; font-style: normal; font-size: clamp(16px, 6vw, 26px); color: #f4577e; opacity: 0; animation: stHeart 2.4s ease-out infinite; }
.st-hearts i:nth-child(1) { left: 10%; } .st-hearts i:nth-child(2) { left: 30%; animation-delay: 0.5s; } .st-hearts i:nth-child(3) { left: 50%; animation-delay: 1s; }
.st-hearts i:nth-child(4) { left: 70%; animation-delay: 1.5s; } .st-hearts i:nth-child(5) { left: 88%; animation-delay: 0.8s; }
@keyframes stHeart { 0% { opacity: 0; transform: translateY(20px) scale(0.6); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateY(-60px) scale(1.2); } }
.st-name { left: 50%; top: 5%; padding: 4px 16px; border-radius: 10px; transform: translateX(-50%) rotate(-3deg); font-family: 'Lilita One', Fredoka, sans-serif;
  font-size: clamp(18px, 6vw, 28px); letter-spacing: 0.08em; color: #6b3612; white-space: nowrap;
  background: linear-gradient(180deg, #fff6c4, #ffd34d 60%, #d99a16); border: 3px solid #6b3612; box-shadow: 0 4px 0 #6b3612;
  animation: stStampName 0.6s cubic-bezier(0.2, 1.6, 0.4, 1) 1.6s both; }
@keyframes stStampName { from { opacity: 0; transform: translateX(-50%) rotate(-3deg) scale(2); } }
/* p1: rainy morning */
.p1 .st-sky { background: linear-gradient(180deg, #7a8ca3, #b8c4d2); }
.p1 .st-sun { display: none; }
.st-rain { inset: 0; z-index: 3; pointer-events: none; opacity: 0.55;
  background: repeating-linear-gradient(105deg, transparent 0 14px, rgba(220, 235, 255, 0.9) 14px 15.5px, transparent 15.5px 30px);
  background-size: 60px 60px; animation: stRain 0.5s linear infinite; }
@keyframes stRain { to { background-position: -16px 60px; } }
.p1 .collie.wet { left: 50%; bottom: 10%; width: 22%; aspect-ratio: 220 / 250; transform: translateX(-50%); z-index: 2; animation: stShiver 0.25s ease-in-out infinite alternate; }
@keyframes stShiver { from { rotate: -2deg; } to { rotate: 2deg; } }
/* p2: herding the line */
.p2 .st-line { left: 2%; right: 26%; bottom: 2%; height: 30%; }
.p2 .st-line .nb { bottom: 0; width: 24%; }
.p2 .q0 { left: 0; animation: stJumble1 2.4s ease-in-out both; } .p2 .q1 { left: 25%; animation: stJumble2 2.4s ease-in-out both; }
.p2 .q2 { left: 50%; animation: stJumble1 2.4s ease-in-out 0.2s both; } .p2 .q3 { left: 75%; animation: stJumble2 2.4s ease-in-out 0.2s both; }
@keyframes stJumble1 { 0%, 30% { transform: translate(-30%, -40%) rotate(-12deg); } 100% { transform: none; } }
@keyframes stJumble2 { 0%, 30% { transform: translate(30%, -20%) rotate(10deg); } 100% { transform: none; } }
.p2 .collie.herd { right: 0; bottom: 3%; width: 28%; aspect-ratio: 256 / 210; animation: stHerd 2.4s ease-in-out both; }
@keyframes stHerd { 0% { transform: translateX(-280%); } 50% { transform: translateX(-120%); } 100% { transform: none; } }

/* Stories menu */
.story-menu { position: fixed; inset: 0; z-index: 105; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(20, 10, 4, 0.7); }
.story-menu .modal-card { width: min(380px, 100%); }
.sm-list { display: flex; flex-direction: column; gap: 8px; margin: 10px 0; }
.sm-item { display: flex; align-items: center; gap: 10px; padding: 8px 12px 8px 8px; border-radius: 16px; text-align: left; color: #fff3c4;
  background: rgba(0, 0, 0, 0.25); border: 2px solid rgba(var(--gold-rgb), 0.45); }
.sm-item:active { transform: translateY(2px); }
.sm-face { width: 46px; height: 46px; flex-shrink: 0; border-radius: 50%; overflow: hidden; background: radial-gradient(circle at 50% 35%, #fff8ea, #f0dcb6); border: 2px solid var(--gold); }
.sm-face svg { width: 100%; height: 100%; }
.sm-item b { display: block; font-size: 15px; } .sm-item small { font-size: 12px; color: rgba(255, 240, 210, 0.8); }
.sm-item.locked { opacity: 0.55; }

/* Storybook: a soft contact shadow under each family member so their feet sit on the floor */
.st-who.natalie::after, .st-who.noi::after, .st-who.deli::after {
  content: ''; position: absolute; left: 8%; right: 8%; bottom: -1%; height: 9%; border-radius: 50%; z-index: 0;
  background: radial-gradient(ellipse at center, rgba(30, 12, 4, 0.6) 0%, rgba(30, 12, 4, 0.3) 45%, rgba(30, 12, 4, 0) 72%); }
.st-family .st-who { position: relative; }
.st-family .st-who svg { position: relative; z-index: 1; }
.st-stage .st-who.natalie > svg, .st-stage .st-who.noi > svg, .st-stage .st-who.deli > svg { position: relative; z-index: 1; }
.b3 .deli.laugh, .b3 .noi.watch { bottom: 1.5%; }
.s2 .natalie.left { bottom: 2%; }
.st-stage .st-family.pets .st-who > svg { display: block; width: 100%; height: 100%; }
.mini-timer.hit { animation: timerHit 0.4s ease-out; }
@keyframes timerHit { 30% { box-shadow: 0 0 0 3px #ef4444; transform: scaleY(1.6); } }
.catch-field.burnt-hit { animation: burntHit 0.35s ease-out; }
@keyframes burntHit { 30% { box-shadow: inset 0 0 0 4px rgba(239, 68, 68, 0.85), inset 0 0 30px rgba(60, 20, 10, 0.6); } }
.settings-version { margin: 4px 0 0; font-size: 11px; text-align: center; color: rgba(255, 240, 210, 0.5); }
.mini-card.quake { animation: miniQuake 0.45s cubic-bezier(0.36, 0.07, 0.19, 0.97); }
@keyframes miniQuake { 15% { transform: translate(-8px, 3px) rotate(-1.5deg); } 30% { transform: translate(7px, -3px) rotate(1.2deg); }
  45% { transform: translate(-6px, 2px) rotate(-1deg); } 60% { transform: translate(5px, -1px) rotate(0.6deg); } 80% { transform: translate(-2px, 0); } }
@media (prefers-reduced-motion: reduce) { .mini-card.quake { animation: none; } }

/* Shoo, Baymax! (whack-a-mole): nine bread baskets; Baymax (or Pearly) pops up behind one */
.shoo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px 10px; width: 92%; }
.shoo-hole { position: relative; aspect-ratio: 140 / 104; cursor: pointer; touch-action: none; }
.shoo-back, .shoo-front { position: absolute; left: 0; right: 0; bottom: 0; aspect-ratio: 140 / 70; pointer-events: none; }
.shoo-back { z-index: 0; } .shoo-front { z-index: 2; }
.shoo-back svg, .shoo-front svg { width: 100%; height: 100%; display: block; overflow: visible; }
.shoo-treat { position: absolute; left: 50%; bottom: 30%; width: 34%; aspect-ratio: 1; margin-left: -17%; z-index: 1; pointer-events: none; }
.shoo-treat svg { width: 100%; height: 100%; }
/* the pop-up head sits inside the basket and rises above the rim */
.shoo-pop { position: absolute; left: 14%; right: 14%; bottom: 28%; aspect-ratio: 160 / 140; z-index: 1; pointer-events: none;
  transform: translateY(70%) scale(0.85); opacity: 0; transition: transform 0.16s cubic-bezier(0.3, 1.6, 0.5, 1), opacity 0.12s; }
.shoo-pop svg { width: 100%; height: 100%; display: block; }
.shoo-hole.collie .shoo-pop { aspect-ratio: 172 / 190; }
.shoo-hole.up .shoo-pop { transform: translateY(0) scale(1); opacity: 1; }
.shoo-hole.up .shoo-treat { opacity: 0; }
.shoo-hole.bonk::after, .shoo-hole.oops::after { position: absolute; left: 50%; top: 4%; transform: translateX(-50%); z-index: 3; pointer-events: none;
  font-weight: 800; font-size: 14px; white-space: nowrap; animation: shooTag 0.6s ease-out forwards; }
.shoo-hole.bonk::after { content: 'Shoo!'; color: #fff3c4; text-shadow: 0 2px 0 #6b3612; }
.shoo-hole.oops::after { content: '−1 −1s'; color: #ff8a8a; text-shadow: 0 2px 0 #3a1e0c; }
@keyframes shooTag { from { opacity: 1; transform: translate(-50%, 6px) scale(0.8); } to { opacity: 0; transform: translate(-50%, -14px) scale(1.1); } }
.shoo-hole.bonk .shoo-front { animation: shooBonk 0.25s ease-out; }
@keyframes shooBonk { 40% { transform: scale(1.08, 0.92); } }
.shoo-hole.stole .shoo-treat { animation: shooStole 0.6s ease-out; }
@keyframes shooStole { 0% { opacity: 0; transform: translateY(-30%); } 100% { opacity: 1; } }
.shoo-score { margin-top: 2px; padding: 3px 12px; border-radius: 999px; font-weight: 800; font-size: 15px; color: var(--ink);
  background: linear-gradient(180deg, var(--cream), var(--cream-2)); border: 2px solid #6b3612; }
.mini-shoo .mini-stage { justify-content: center; gap: 6px; }
.mini-title-art svg { overflow: visible; }
.pr-art > svg { width: 100%; height: 100%; }
@media (prefers-reduced-motion: reduce) { .shoo-pop { transition: none; } }

/* Knead the Dough (rhythm): hand notes slide along the lane to the ring; tap the matching pad on the beat */
.mini-knead .mini-stage { justify-content: center; gap: 8px; }
.mini-knead .knead-board { height: 100px; }
.mini-knead .knead-dough { height: 100px; width: calc(130px + var(--k, 0) * 26px); }
.mini-knead .knead-hand { top: 14px; width: 62px; height: 62px; }
.knead-lane { position: relative; width: 92%; height: 46px; flex-shrink: 0; border-radius: 999px; overflow: hidden;
  background: linear-gradient(180deg, #fff7e4, #f1d9a6); border: 3px solid #6b3612; box-shadow: inset 0 3px 6px rgba(120, 70, 30, 0.35); }
.knead-lane::before { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px; background: rgba(107, 54, 18, 0.25); }
.knead-ring { position: absolute; left: 16%; top: 50%; width: 38px; height: 38px; margin: -19px 0 0 -19px; border-radius: 50%; z-index: 2;
  border: 4px solid #f0b33c; box-shadow: 0 0 0 2px #6b3612, inset 0 0 0 2px #6b3612; pointer-events: none; }
.knead-lane.good .knead-ring { animation: ringGood 0.25s ease-out; }
.knead-lane.bad .knead-ring { animation: ringBad 0.3s ease-out; }
@keyframes ringGood { 40% { transform: scale(1.25); border-color: #6ee7b7; box-shadow: 0 0 0 2px #6b3612, 0 0 14px #6ee7b7; } }
@keyframes ringBad { 40% { border-color: #ef4444; box-shadow: 0 0 0 2px #6b3612, 0 0 12px #ef4444; } }
.knead-note { position: absolute; top: 50%; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%; z-index: 1; will-change: left;
  display: flex; align-items: center; justify-content: center; border: 2px solid #6b3612; }
.knead-note.L { background: radial-gradient(circle at 40% 30%, #ffd1e2, #f07aa2); }
.knead-note.R { background: radial-gradient(circle at 40% 30%, #cfe3ff, #5aa8ff); }
.knead-note svg { position: absolute; width: 70%; height: 70%; opacity: 0.35; }
.knead-note.R svg { transform: scaleX(-1); }
.knead-note b { position: relative; font-size: 15px; font-weight: 800; color: #3a1e0c; }
.knead-combo { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); z-index: 2; font-weight: 800; font-size: 15px; color: #c2410c; }
.knead-pad.left { background: linear-gradient(180deg, #ffe0ec, #f6a6c1); }
.knead-pad.right { background: linear-gradient(180deg, #e0ecff, #a6c8f6); }

/* Pearly's Puddle Dash: a rainy Oregon sidewalk scrolling past; tap to jump */
.mini-dash .mini-stage { justify-content: center; gap: 6px; padding: 6px; }
.dash-field { position: relative; width: 100%; flex: 1; min-height: 0; overflow: hidden; border-radius: 12px; border: 2px solid #6b3612;
  background: linear-gradient(180deg, #7a8ca3 0%, #a9b8c8 55%, #c7d2dc 78%); touch-action: none; }
.dash-shop { position: absolute; left: 0; right: 0; bottom: 22%; height: 30%;
  background: repeating-linear-gradient(90deg, #8a6a5a 0 18%, #7a5a4c 18% 20%, #9c7a66 20% 34%, transparent 34% 40%),
              linear-gradient(180deg, transparent 0 20%, rgba(255, 230, 170, 0.35) 20% 32%, transparent 32%); opacity: 0.55; }
.dash-walk { position: absolute; left: 0; right: 0; bottom: 0; height: 22%; border-top: 3px solid #6b5a50;
  background: repeating-linear-gradient(90deg, #b9b3ad 0 18%, #a29b94 18% 19%), #b9b3ad; background-size: 25% 100%; }
.dash-world { position: absolute; inset: 0; pointer-events: none; }
.dash-puddle { position: absolute; bottom: 16%; width: 10%; height: 7%; border-radius: 50%; will-change: left;
  background: radial-gradient(ellipse at 50% 40%, #cfe6ff 0%, #6fa8dc 45%, #3d6f9e 100%); border: 2px solid #2f5a85; }
.dash-puddle.wide { width: 17%; }
.dash-puddle.splash { animation: dashSplash 0.5s ease-out; }
@keyframes dashSplash { 40% { transform: scale(1.3, 1.6); background: radial-gradient(ellipse, #fff, #8cc4f0); } }
.dash-cookie { position: absolute; bottom: 22%; width: 7%; aspect-ratio: 1; will-change: left; }
.dash-cookie.high { bottom: 54%; animation: dashFloat 0.9s ease-in-out infinite alternate; }
.dash-cookie svg { width: 100%; height: 100%; display: block; }
.dash-cookie.high::after { content: '✨'; position: absolute; right: -40%; top: -30%; font-size: 10px; }
@keyframes dashFloat { to { translate: 0 -6px; } }
.dash-cookie.got { animation: dashGot 0.35s ease-out forwards; }
@keyframes dashGot { to { transform: translateY(-120%) scale(1.4); opacity: 0; } }
.dash-pearly { position: absolute; left: 7%; bottom: 17%; width: 25%; aspect-ratio: 256 / 210; z-index: 2; pointer-events: none; will-change: transform; }
.dash-pearly > span { position: absolute; inset: 0; }
.dash-pearly svg { width: 100%; height: 100%; display: block; overflow: visible; }
/* galloping on the ground, the jump pose in the air */
.dash-pearly .dp-jump, .dash-pearly.air .dp-run { display: none; }
.dash-pearly.air .dp-jump { display: block; }
.dash-pearly.double .dp-jump svg { animation: dashFlip 0.4s ease-out; transform-origin: 50% 55%; }
@keyframes dashFlip { from { transform: rotate(0deg); } to { transform: rotate(-360deg); } }
@keyframes dashTrot { to { transform: translateY(-6%) rotate(3deg); } }
.dash-score { position: absolute; right: 8px; top: 6px; z-index: 3; padding: 2px 10px; border-radius: 999px; font-weight: 800; font-size: 14px;
  color: var(--ink); background: linear-gradient(180deg, var(--cream), var(--cream-2)); border: 2px solid #6b3612; }
/* rain: thin streaks falling (transform only, so phones keep up) */
.dash-rain { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.dash-rain i { position: absolute; top: -16%; width: 2px; height: 14%; border-radius: 2px; background: rgba(235, 245, 255, 0.6);
  transform: rotate(12deg); animation: dashRain 0.9s linear infinite; will-change: transform; }
@keyframes dashRain { to { transform: translate(-30px, 900%) rotate(12deg); } }
.dash-field.splashed::after { content: ''; position: absolute; inset: 0; z-index: 4; pointer-events: none;
  background: rgba(120, 180, 255, 0.35); animation: dashFlash 0.4s ease-out forwards; }
@keyframes dashFlash { to { opacity: 0; } }
.dash-jump { flex-shrink: 0; padding: 9px 34px; border-radius: 999px; font-size: 18px; font-weight: 700; color: var(--ink);
  background: linear-gradient(180deg, #fff3c4, #f0b33c 70%, #c9852a); border: 3px solid #6b3612; box-shadow: 0 4px 0 #6b3612, inset 0 2px 0 rgba(255, 255, 255, 0.7); }
.dash-jump:active { transform: translateY(3px); box-shadow: 0 1px 0 #6b3612, inset 0 2px 0 rgba(255, 255, 255, 0.7); }
@media (prefers-reduced-motion: reduce) { .dash-rain { display: none; } }

/* Pearly running (collieSVG('run')): diagonal leg pairs swing at the hip, the body bobs, the tail wags */
.pet.collie .pl-leg, .pet.collie .pl-tail, .pet.collie .pl-body { transform-box: view-box; }
.pet.collie.pose-run .pl-leg.front.near, .pet.collie.pose-run .pl-leg.back.far { animation: plSwing 0.36s linear infinite; }
.pet.collie.pose-run .pl-leg.front.far, .pet.collie.pose-run .pl-leg.back.near { animation: plSwing 0.36s linear -0.18s infinite; }
@keyframes plSwing { 0%, 100% { transform: rotate(34deg); } 50% { transform: rotate(-34deg); } }
.pet.collie.pose-run .pl-body { transform-origin: 112px 104px; animation: plBob 0.18s ease-in-out infinite alternate; }
@keyframes plBob { to { transform: translateY(-5px) rotate(-1.5deg); } }
.pet.collie.pose-run .pl-tail, .pet.collie.pose-jump .pl-tail { animation: plWag 0.36s ease-in-out infinite alternate; }
@keyframes plWag { from { transform: rotate(-10deg); } to { transform: rotate(12deg); } }
@media (prefers-reduced-motion: reduce) { .pet.collie .pl-leg, .pet.collie .pl-body, .pet.collie .pl-tail { animation: none !important; } }

/* ---------- Seasons (js/season.js): Halloween ----------
   body[data-season="halloween"]: night purple with pumpkin orange, over every kitchen's colors.
   Decorations come from js/art-halloween.js and only show while the look is on. No blur filters (S25). */
body[data-season="halloween"] {
  --gold: #ff9a3c; --gold-hi: #ffd7a8; --gold-rgb: 255, 154, 60; --glow-rgb: 150, 90, 240;
  --wood-hi: #4b2a6e; --wood-lo: #22123a; --board-hi: #5a3480; --board-lo: #2c1946;
  --cocoa-700: #2a1840; --cocoa-800: #1a0f2a; --cocoa-900: #0d0716;
}
/* Every holiday's decorations are on the page (js/season-art.js), each in .sz[data-for]; only the active one shows. */
.sz { display: none; }
body[data-season="halloween"] .sz[data-for="halloween"], body[data-season="thanksgiving"] .sz[data-for="thanksgiving"],
body[data-season="christmas"] .sz[data-for="christmas"] { display: contents; }
.sz * { pointer-events: none; }
.sz svg { width: 100%; height: 100%; overflow: visible; }
/* behind the whole game (the sky layer) */
.sz-sky { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }

/* Halloween: the moon, bats and stars behind the game */
.sz-sky .hw-moon { position: absolute; top: 4%; right: 6%; width: 70px; aspect-ratio: 1; opacity: 0.8; }
.hw-stars { position: absolute; inset: 0; opacity: 0.5;
  background: radial-gradient(1.4px 1.4px at 12% 18%, #fff, transparent), radial-gradient(1.2px 1.2px at 32% 8%, #fff, transparent),
    radial-gradient(1.6px 1.6px at 58% 22%, #fff, transparent), radial-gradient(1.2px 1.2px at 78% 40%, #fff, transparent),
    radial-gradient(1.4px 1.4px at 22% 62%, #fff, transparent), radial-gradient(1.2px 1.2px at 88% 72%, #fff, transparent),
    radial-gradient(1.4px 1.4px at 46% 84%, #fff, transparent); }
.hw-bat { position: absolute; width: 46px; aspect-ratio: 2; opacity: 0.85; animation: hwFly 16s linear infinite; }
.hw-bat svg { animation: hwFlap 0.45s ease-in-out infinite alternate; transform-origin: 50% 60%; }
.hw-bat.bat1 { top: 12%; animation-delay: -2s; }
.hw-bat.bat2 { top: 30%; width: 34px; animation-duration: 21s; animation-delay: -11s; }
.hw-bat.bat3 { top: 54%; width: 40px; animation-duration: 18s; animation-delay: -6s; }
.hw-bat.bat4 { top: 6%; width: 30px; animation-duration: 24s; animation-delay: -16s; }
@keyframes hwFly { 0% { transform: translate(-20vw, 0); } 25% { transform: translate(25vw, -18px); } 50% { transform: translate(60vw, 10px); }
  75% { transform: translate(90vw, -14px); } 100% { transform: translate(125vw, 0); } }
@keyframes hwFlap { to { transform: scaleY(0.55); } }

/* title screen */
body[data-season="halloween"] .title-screen { background: radial-gradient(circle at 50% 30%, #5a3a8a 0%, #2c1848 45%, #0d0716 100%); }
body[data-season="halloween"] .title-rays { background: repeating-conic-gradient(rgba(255, 154, 60, 0.09) 0deg 9deg, transparent 9deg 18deg); }
body[data-season="halloween"] .title-ground { background: radial-gradient(ellipse at 50% 0%, #6a4a3a 0%, #4a2e24 55%, #2a1810 100%); }
body[data-season="halloween"] .title-ground::before { background: repeating-linear-gradient(90deg, #4f8a3e 0 6px, #3e7030 6px 10px); }
.hw-title-sky { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.hw-title-sky .hw-moon { position: absolute; top: 11%; right: 3%; width: min(26vw, 110px); aspect-ratio: 1; }
.hw-web { position: absolute; width: min(24vw, 110px); aspect-ratio: 1; z-index: 3; }
.hw-web.left { top: 0; left: 0; }
.hw-web.right { top: 0; right: 0; transform: scaleX(-1); }
.hw-lights { position: absolute; left: 8%; right: 8%; top: 8%; height: 9%; z-index: 3; }
.hw-bulb { animation: hwGlow 1.6s ease-in-out infinite alternate; }
.hw-bulb.b1 { animation-delay: -0.5s; } .hw-bulb.b2 { animation-delay: -1.1s; }
@keyframes hwGlow { from { opacity: 0.65; } to { opacity: 1; } }
.title-stage .hw-pumpkin { position: absolute; z-index: 4; aspect-ratio: 100 / 90; }
.hw-pumpkin.p1 { left: -4%; bottom: 2%; width: 20%; }
.hw-pumpkin.p2 { right: -3%; bottom: 3%; width: 17%; }
.hw-pumpkin.p3 { right: 12%; bottom: 0; width: 11%; }
.hw-ghost { position: absolute; left: 4%; top: 18%; width: 13%; aspect-ratio: 70 / 80; z-index: 1; animation: hwFloat 3.4s ease-in-out infinite; }
@keyframes hwFloat { 50% { transform: translateY(-10px) rotate(-4deg); } }

/* shop scene */
.hw-bunting { position: absolute; left: 4%; right: 4%; top: 30px; height: 26px; z-index: 3; }
.hw-web.shop { top: 0; right: 0; left: auto; width: 76px; transform: scaleX(-1); z-index: 3; }
.diorama .hw-pumpkin { position: absolute; z-index: 6; aspect-ratio: 100 / 90; }
.hw-pumpkin.s1 { left: 2%; bottom: 2%; width: 13%; }
.hw-pumpkin.s2 { right: 3%; bottom: 3%; width: 10%; }

/* board frame: pumpkins on two corners, a cobweb in one */
.board .hw-pumpkin { position: absolute; z-index: 6; width: 13%; aspect-ratio: 100 / 90; }
.hw-pumpkin.b1 { left: -4%; bottom: -2%; width: 11%; }
.hw-pumpkin.b2 { right: -3%; bottom: -1.5%; width: 9%; }
.hw-web.frame { top: -4px; left: -4px; width: 15%; z-index: 6; opacity: 0.7; } /* not "board": that name is the board frame itself */

/* Wardrobe: holiday costumes get a little badge */
.wr-item.seasonal { position: relative; }
.wr-season { position: absolute; top: -7px; right: -4px; font-style: normal; font-size: 9px; font-weight: 700; padding: 1px 5px; border-radius: 999px;
  background: #2a1840; color: #ffd7a8; border: 1px solid #ff9a3c; white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { .hw-bat, .hw-bat svg, .hw-bulb, .hw-ghost { animation: none !important; } }
.season-card .season-icon { width: 54px; height: 50px; flex-shrink: 0; }
.season-card .season-icon svg { width: 100%; height: 100%; }
.season-card { background: linear-gradient(135deg, rgba(var(--gold-rgb), 0.2), rgba(0, 0, 0, 0.35)); border-color: var(--gold); }

.setting-select { font: inherit; font-size: 14px; padding: 5px 8px; border-radius: 10px; max-width: 58%; color: #fff3c4;
  background: rgba(0, 0, 0, 0.35); border: 1px solid rgba(var(--gold-rgb), 0.45); }

/* ---------- Thanksgiving (Nov 2 – 30): cozy harvest, maple red and amber ---------- */
body[data-season="thanksgiving"] {
  --gold: #ffb347; --gold-hi: #ffe0b0; --gold-rgb: 255, 179, 71; --glow-rgb: 255, 120, 60;
  --wood-hi: #7a2e1a; --wood-lo: #3a140a; --board-hi: #8a3a22; --board-lo: #4e1c10;
  --cocoa-700: #4a1c10; --cocoa-800: #2c1008; --cocoa-900: #160804;
}
body[data-season="thanksgiving"] .title-screen { background: radial-gradient(circle at 50% 34%, #c8642e 0%, #7a2e14 45%, #1e0804 100%); }
body[data-season="thanksgiving"] .title-ground { background: radial-gradient(ellipse at 50% 0%, #d9a650 0%, #a8742e 55%, #6a4214 100%); }
body[data-season="thanksgiving"] .title-ground::before { background: repeating-linear-gradient(90deg, #c99a3a 0 6px, #a8782a 6px 10px); }
.tg-sun { position: absolute; left: 50%; top: 30%; width: 70vmin; aspect-ratio: 1; margin-left: -35vmin; border-radius: 50%; z-index: 0;
  background: radial-gradient(circle, rgba(255, 200, 110, 0.45), rgba(255, 150, 60, 0.12) 55%, transparent 70%); }
.tg-fall { position: absolute; top: -8%; width: 30px; aspect-ratio: 40 / 44; animation: tgFall 13s linear infinite; }
.tg-fall svg { animation: tgSway 2.6s ease-in-out infinite alternate; }
.tg-fall.f1 { left: 8%; animation-delay: -1s; } .tg-fall.f2 { left: 26%; width: 22px; animation-duration: 16s; animation-delay: -7s; }
.tg-fall.f3 { left: 48%; animation-duration: 15s; animation-delay: -12s; } .tg-fall.f4 { left: 64%; width: 24px; animation-delay: -4s; }
.tg-fall.f5 { left: 80%; animation-duration: 18s; animation-delay: -9s; } .tg-fall.f6 { left: 92%; width: 20px; animation-duration: 14s; animation-delay: -2s; }
@keyframes tgFall { to { transform: translateY(115vh); } }
@keyframes tgSway { from { transform: translateX(-14px) rotate(-30deg); } to { transform: translateX(14px) rotate(40deg); } }
.tg-garland { position: absolute; left: 6%; right: 6%; top: 8%; height: 9%; z-index: 3; }
.title-stage :is(.tg-hay, .tg-pumpkin, .tg-corn, .tg-pie, .tg-turkey) { position: absolute; z-index: 4; }
.tg-hay { left: -5%; bottom: 0; width: 24%; aspect-ratio: 120 / 70; }
.tg-pumpkin.t1 { left: -1%; bottom: 12%; width: 15%; aspect-ratio: 100 / 90; }
.tg-pumpkin.t2 { right: 13%; bottom: 0; width: 11%; aspect-ratio: 100 / 90; }
.tg-corn.c1 { left: 19%; bottom: 1%; width: 5%; aspect-ratio: 40 / 90; transform: rotate(-12deg); }
.tg-corn.c2 { left: 22%; bottom: 0; width: 5%; aspect-ratio: 40 / 90; transform: rotate(10deg); }
.tg-pie { right: -2%; bottom: 1%; width: 17%; aspect-ratio: 100 / 60; }
.tg-turkey { left: -4%; top: 2%; width: 14%; aspect-ratio: 110 / 100; z-index: 1 !important; animation: tgBob 2.4s ease-in-out infinite; }
@keyframes tgBob { 50% { transform: translateY(-5px) rotate(3deg); } }
.tg-garland.shop { top: 30px; left: 4%; right: 4%; height: 24px; }
.diorama :is(.tg-pumpkin, .tg-corn, .tg-pie) { position: absolute; z-index: 6; }
.tg-pumpkin.s1 { left: 2%; bottom: 2%; width: 13%; aspect-ratio: 100 / 90; }
.tg-corn.s2 { left: 15%; bottom: 2%; width: 4%; aspect-ratio: 40 / 90; }
.tg-pie.shop { right: 3%; left: auto; bottom: 3%; width: 14%; }
.board .tg-leaf { position: absolute; z-index: 6; width: 9%; aspect-ratio: 40 / 44; }
.tg-leaf.b1 { left: -3%; top: -3%; transform: rotate(-30deg); } .tg-leaf.b2 { right: -2%; bottom: -1%; transform: rotate(140deg); }
.tg-leaf.b3 { left: 3%; top: -4%; width: 6%; transform: rotate(20deg); }

/* ---------- Christmas (Dec 1 – 26): a cozy snowy Christmas night ---------- */
body[data-season="christmas"] {
  --gold: #9fd8ff; --gold-hi: #e4f5ff; --gold-rgb: 159, 216, 255; --glow-rgb: 140, 190, 255;
  --wood-hi: #1f3a5c; --wood-lo: #0e1c30; --board-hi: #2a4a6e; --board-lo: #16283e;
  --cocoa-700: #182a44; --cocoa-800: #0e1a2e; --cocoa-900: #060c18;
}
body[data-season="christmas"] .title-screen { background: radial-gradient(circle at 50% 30%, #3a5f8f 0%, #16284a 45%, #060c18 100%); }
body[data-season="christmas"] .title-rays { background: repeating-conic-gradient(rgba(200, 230, 255, 0.08) 0deg 9deg, transparent 9deg 18deg); }
body[data-season="christmas"] .title-ground { background: radial-gradient(ellipse at 50% 0%, #ffffff 0%, #dceaf7 55%, #a9c3dc 100%); }
body[data-season="christmas"] .title-ground::before { background: #f4f9ff; }
.wn-snow { position: absolute; inset: -100% 0 0 0; height: 200%; opacity: 0.8; z-index: 0;
  background: radial-gradient(2px 2px at 10% 10%, #fff, transparent), radial-gradient(2.4px 2.4px at 30% 30%, #fff, transparent),
    radial-gradient(1.6px 1.6px at 50% 15%, #fff, transparent), radial-gradient(2px 2px at 70% 40%, #fff, transparent),
    radial-gradient(2.6px 2.6px at 85% 20%, #fff, transparent), radial-gradient(1.8px 1.8px at 20% 45%, #fff, transparent),
    radial-gradient(2.2px 2.2px at 60% 5%, #fff, transparent), radial-gradient(1.6px 1.6px at 92% 48%, #fff, transparent);
  background-size: 100% 50%; animation: wnSnow 14s linear infinite; }
.wn-snow.s2 { opacity: 0.5; background-size: 80% 40%; animation-duration: 22s; animation-delay: -6s; }
@keyframes wnSnow { to { transform: translateY(50%); } }
.wn-flake { position: absolute; top: -6%; width: 22px; aspect-ratio: 1; opacity: 0.85; animation: tgFall 16s linear infinite; }
.wn-flake svg { animation: wnSpin 6s linear infinite; }
.wn-flake.f1 { left: 12%; animation-delay: -3s; } .wn-flake.f2 { left: 34%; width: 16px; animation-duration: 20s; animation-delay: -10s; }
.wn-flake.f3 { left: 56%; animation-delay: -6s; } .wn-flake.f4 { left: 76%; width: 18px; animation-duration: 19s; animation-delay: -14s; }
.wn-flake.f5 { left: 90%; width: 14px; animation-duration: 13s; animation-delay: -1s; }
@keyframes wnSpin { to { transform: rotate(360deg); } }
.wn-lights { position: absolute; left: 8%; right: 8%; top: 8%; height: 9%; z-index: 3; }
.wn-twinkle { animation: hwGlow 1.2s ease-in-out infinite alternate; }
.wn-twinkle.b1 { animation-delay: -0.4s; } .wn-twinkle.b2 { animation-delay: -0.8s; }
.wn-tree { position: absolute; left: -3%; bottom: 8%; width: 17%; aspect-ratio: 80 / 120; z-index: 1; }
.title-stage :is(.wn-snowman, .wn-gifts) { position: absolute; z-index: 4; }
.wn-snowman { right: -3%; bottom: 1%; width: 17%; aspect-ratio: 80 / 110; }
.title-stage .wn-gifts { left: -4%; bottom: 0; width: 22%; aspect-ratio: 110 / 70; }
.wn-garland { position: absolute; left: 3%; right: 3%; top: 28px; height: 26px; z-index: 3; }
.diorama .wn-gifts { position: absolute; z-index: 6; right: 2%; bottom: 2%; width: 17%; aspect-ratio: 110 / 70; }
.diorama .wn-tree { left: 1%; bottom: 3%; width: 12%; z-index: 6; }
.board .wn-drift { position: absolute; z-index: 6; left: -6px; right: -6px; bottom: -4px; height: 16px; border-radius: 0 0 20px 20px;
  background: radial-gradient(ellipse at 50% 100%, #fff 45%, transparent 46%) 0 0 / 22% 100% repeat-x; }
.board .wn-gifts { position: absolute; z-index: 7; right: -4%; bottom: -1.5%; width: 14%; aspect-ratio: 110 / 70; }
@media (prefers-reduced-motion: reduce) { .tg-fall, .tg-fall svg, .tg-turkey, .wn-snow, .wn-flake, .wn-flake svg, .wn-twinkle { animation: none !important; } }

/* Christmas extras: Santa's sleigh, the banner, stockings and candy canes */
.wn-sleigh { position: absolute; top: 9%; width: 150px; aspect-ratio: 200 / 60; animation: wnSleigh 26s linear infinite; }
.sz-sky .wn-sleigh { top: 6%; width: 110px; opacity: 0.85; animation-delay: -9s; }
@keyframes wnSleigh { 0% { transform: translate(-40vw, 20px); } 50% { transform: translate(55vw, -10px); } 100% { transform: translate(130vw, 10px); } }
.wn-banner { position: absolute; left: 50%; top: 23%; width: min(58vw, 240px);
  aspect-ratio: 260 / 44; transform: translateX(-50%) rotate(-2deg); z-index: 3; animation: wnSwing 3s ease-in-out infinite alternate; }
@keyframes wnSwing { to { transform: translateX(-50%) rotate(2deg); } }
.wn-stockings { position: absolute; left: 1%; right: 1%; top: 33%; height: 8%; z-index: 3; display: flex; justify-content: space-between; }
.wn-stockings svg { width: 7%; height: 100%; }
.title-stage .wn-stockings svg:nth-child(2) { visibility: hidden; } /* one on each post of the stand */
.title-stage .wn-cane { position: absolute; z-index: 4; left: 20%; bottom: 1%; width: 4.5%; aspect-ratio: 40 / 80; transform: rotate(-8deg); }
.wn-stockings.shop { top: 64px; left: 34%; right: 34%; height: 34px; z-index: 3; }
.board .wn-cane { position: absolute; z-index: 6; top: -12px; width: 6%; aspect-ratio: 40 / 80; }
.wn-cane.b3 { left: -6px; transform: rotate(-24deg); } .wn-cane.b4 { left: 4%; transform: rotate(18deg) scaleX(-1); }
@media (prefers-reduced-motion: reduce) { .wn-sleigh, .wn-banner { animation: none !important; } }

/* Hidden gift unwrapped (main.js showGiftPopup): shown right away over the board */
.gift-pop { position: fixed; inset: 0; z-index: 92; display: flex; align-items: center; justify-content: center; padding: 16px;
  background: rgba(10, 5, 2, 0.45); animation: giftIn 0.35s cubic-bezier(0.2, 1.5, 0.4, 1) both; }
.gift-pop.out { animation: giftOut 0.3s ease-in both; }
@keyframes giftIn { from { opacity: 0; transform: scale(0.6); } }
@keyframes giftOut { to { opacity: 0; transform: scale(0.85); } }
.gift-card { width: min(300px, 100%); padding: 16px 16px 14px; border-radius: 22px; text-align: center; position: relative;
  background: radial-gradient(circle at 50% 30%, var(--cocoa-700), var(--cocoa-900)); border: 3px solid var(--gold); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.6); }
.gift-tag { display: inline-block; padding: 3px 12px; border-radius: 999px; font-weight: 700; font-size: 14px; color: var(--ink); background: linear-gradient(90deg, var(--gold-hi), var(--gold)); }
.gift-art { position: relative; height: 170px; margin: 8px auto 6px; width: 70%; animation: giftBob 1.6s ease-in-out infinite alternate; }
.gift-art svg { width: 100%; height: 100%; }
@keyframes giftBob { to { transform: translateY(-5px) rotate(-1.5deg); } }
.gift-name { display: block; font-size: 18px; color: var(--gold-hi); }
.gift-sub { display: block; margin: 2px 0 10px; color: rgba(255, 240, 210, 0.8); font-size: 12.5px; }
.gift-btns { display: flex; flex-direction: column; gap: 6px; }
@media (prefers-reduced-motion: reduce) { .gift-pop, .gift-art { animation: none !important; } }

/* Moving to the new web address (move.js) */
.move-card .modal-card { text-align: center; }
.move-emoji { font-size: 44px; line-height: 1; margin-bottom: 4px; }
.move-card p { margin: 6px 0; line-height: 1.35; }
.move-card .modal-btn { margin-top: 10px; }
.move-welcome { position: absolute; left: 16px; right: 16px; bottom: max(16px, env(safe-area-inset-bottom, 0px)); z-index: 5; display: flex; flex-direction: column; gap: 2px;
  padding: 10px 14px; border-radius: 16px; background: rgba(20, 10, 4, 0.88); border: 2px solid var(--gold); color: var(--cream); font-size: 13px;
  animation: giftIn 0.35s cubic-bezier(0.2, 1.5, 0.4, 1) both; }
.move-welcome b { color: var(--gold-hi); font-size: 15px; }