@font-face { font-family: 'Fredoka'; font-weight: 700; font-display: swap; src: url('./assets/fonts/fredoka-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family: 'Outfit'; font-weight: 400; font-display: swap; src: url('./assets/fonts/outfit-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Outfit'; font-weight: 600; font-display: swap; src: url('./assets/fonts/outfit-latin-600-normal.woff2') format('woff2'); }

:root {
  --wall: #0b3b3e; --lagoon: #072325; --deep: #051b1d; --foam: #e9f6f1;
  --gold: #ffc23d; --gold-lip: #c98f12; --coral: #ff5e6c; --coral-lip: #c43d4b; --teal: #2fc4b2;
  --cream: #fff4e4; --cream-lip: #dcc3a0; --ink: #3a1d2e; --grape: #a66bff; --ice: #8fd3ff;
  --cherry: #ff4f5e; --lime: #7ed957; --blueberry: #4f8dff; --lemon: #ffd23d; --mint: #3fdcc0; --bubblegum: #ff8fd0; --orange: #ff9a3d;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; background: var(--wall); color: var(--foam); overflow: hidden;
  overscroll-behavior: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
  font: 16px/1.3 'Outfit', system-ui, sans-serif; }
#app { position: fixed; inset: 0; }
button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; }
button:disabled { opacity: 0.45; cursor: default; }
[hidden] { display: none !important; }

/* Candy-shop backdrop behind the transparent 3D canvas. */
.backdrop { position: absolute; inset: 0; overflow: hidden;
  background: radial-gradient(90% 55% at 50% 45%, #17676a 0%, #0e4a4d 45%, var(--wall) 70%, var(--lagoon) 100%); }
.backdrop .bokeh { position: absolute; inset: -10%; filter: blur(14px); opacity: 0.55;
  background:
    radial-gradient(circle at 8% 14%, rgba(255, 143, 208, 0.7) 0 22px, transparent 24px),
    radial-gradient(circle at 92% 10%, rgba(255, 194, 61, 0.7) 0 26px, transparent 28px),
    radial-gradient(circle at 18% 86%, rgba(126, 217, 87, 0.55) 0 30px, transparent 32px),
    radial-gradient(circle at 86% 82%, rgba(79, 141, 255, 0.6) 0 24px, transparent 26px),
    radial-gradient(circle at 95% 48%, rgba(255, 94, 108, 0.5) 0 18px, transparent 20px),
    radial-gradient(circle at 4% 52%, rgba(166, 107, 255, 0.55) 0 20px, transparent 22px);
  animation: drift 14s ease-in-out infinite alternate; }
@keyframes drift { to { transform: translate(-12px, 10px) scale(1.04); } }
.backdrop .shelf { position: absolute; left: -5%; right: -5%; height: 14px; border-radius: 7px; background: rgba(5, 27, 29, 0.45); box-shadow: 0 6px 0 rgba(255, 255, 255, 0.04); }
.backdrop .s1 { top: 11%; }
.backdrop .s2 { bottom: 13%; }
#board { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
.frost { position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 70px 18px rgba(143, 211, 255, 0.55); animation: frostIn 0.4s ease-out; }
@keyframes frostIn { from { opacity: 0; } }

/* HUD: 96 px at the top and 132 px at the bottom are kept clear by scene.js. */
.hud { position: absolute; left: 0; right: 0; top: 0; display: flex; align-items: flex-start; justify-content: space-between;
  padding: calc(env(safe-area-inset-top) + 10px) 14px 0; pointer-events: none; }
.hud > * { pointer-events: auto; }
.round { width: 48px; height: 48px; border-radius: 50%; background: var(--cream); color: var(--ink); display: grid; place-items: center; box-shadow: 0 4px 0 var(--cream-lip); }
.round:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--cream-lip); }
.hud-mid { display: grid; justify-items: center; gap: 4px; }
.level-row { display: flex; align-items: center; gap: 6px; }
.level { font: 700 15px 'Fredoka', sans-serif; letter-spacing: 0.04em; text-shadow: 0 2px 0 rgba(0, 0, 0, 0.3); }
.level-tag { font: 700 11px 'Fredoka', sans-serif; text-transform: uppercase; letter-spacing: 0.06em; padding: 2px 8px; border-radius: 10px; background: var(--coral); box-shadow: 0 2px 0 var(--coral-lip); }
.level-tag.super { background: var(--grape); box-shadow: 0 2px 0 #6a3fbf; }
.timer-wrap { position: relative; display: flex; align-items: center; gap: 6px; height: 46px; padding: 0 18px 0 14px; border-radius: 23px;
  background: var(--cream); color: var(--ink); box-shadow: 0 4px 0 var(--cream-lip); overflow: hidden; }
.timer-ring { position: absolute; left: 0; bottom: 0; height: 5px; width: calc(var(--p, 1) * 100%); background: var(--teal); border-radius: 0 3px 3px 0; transition: width 0.25s linear; }
.timer { font: 700 26px 'Fredoka', sans-serif; min-width: 62px; text-align: center; font-variant-numeric: tabular-nums; }
.timer-wrap.hurry { background: var(--coral); color: #fff; box-shadow: 0 4px 0 var(--coral-lip); animation: pulse 0.5s ease-in-out infinite alternate; }
.timer-wrap.hurry .timer-ring { background: #fff; }
.timer-wrap.frozen { background: var(--ice); color: #12406b; box-shadow: 0 4px 0 #4f9ad6; }
.timer-wrap.frozen .timer-ring { background: #fff; }
.timer-wrap.chill { background: var(--teal); color: var(--lagoon); box-shadow: 0 4px 0 #1a8d80; }
@keyframes pulse { to { transform: scale(1.07); } }
.coins { display: flex; align-items: center; gap: 6px; height: 42px; padding: 0 14px 0 8px; border-radius: 21px;
  background: var(--cream); color: var(--ink); box-shadow: 0 4px 0 var(--cream-lip); font: 700 19px 'Fredoka', sans-serif; }
.coins.bump { animation: bump 0.18s ease-out; }
@keyframes bump { 50% { transform: scale(1.14); } }
.coin { width: 24px; height: 24px; border-radius: 50%; flex: none; display: inline-block;
  background: radial-gradient(circle at 35% 32%, #fff6c9 0 18%, var(--gold) 40%, #f0a800 75%, var(--gold-lip));
  box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.15), 0 1px 0 rgba(0, 0, 0, 0.2); }
.fly-coin { position: fixed; z-index: 60; width: 26px; height: 26px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle at 35% 32%, #fff6c9 0 18%, var(--gold) 40%, #f0a800 75%, var(--gold-lip)); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3); }

.coach { position: absolute; left: 50%; top: calc(env(safe-area-inset-top) + 104px); transform: translateX(-50%); margin: 0; z-index: 5;
  max-width: min(330px, calc(100% - 32px)); padding: 10px 16px; border-radius: 16px; background: var(--cream); color: var(--ink);
  font-weight: 600; text-align: center; box-shadow: 0 4px 0 var(--cream-lip), 0 10px 20px rgba(0, 0, 0, 0.25); pointer-events: none; animation: rise 0.35s cubic-bezier(.2, 1.5, .4, 1); }
@keyframes rise { from { transform: translate(-50%, 12px); opacity: 0; } }
.hand { position: fixed; left: 0; top: 0; z-index: 6; pointer-events: none; filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.35));
  animation: handDrag 2.2s ease-in-out infinite; }
@keyframes handDrag {
  0%, 12% { transform: translate(calc(var(--fx) - 18px), calc(var(--fy) - 4px)) scale(1); opacity: 0; }
  20% { transform: translate(calc(var(--fx) - 18px), calc(var(--fy) - 4px)) scale(0.88); opacity: 1; }
  70% { transform: translate(calc(var(--tx) - 18px), calc(var(--ty) - 4px)) scale(0.88); opacity: 1; }
  85%, 100% { transform: translate(calc(var(--tx) - 18px), calc(var(--ty) - 4px)) scale(1); opacity: 0; } }
.pop-banner { position: absolute; left: 50%; top: calc(env(safe-area-inset-top) + 104px); transform: translateX(-50%); z-index: 5;
  display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 16px; border-radius: 22px; background: var(--bubblegum); color: var(--ink);
  font: 700 16px 'Fredoka', sans-serif; box-shadow: 0 4px 0 #c75b98; white-space: nowrap; animation: rise 0.3s ease-out; }
.pop-banner button { padding: 6px 12px; border-radius: 14px; background: rgba(255, 255, 255, 0.7); font-weight: 700; }

/* Level intro banner. */
.banner { position: absolute; left: 0; right: 0; top: 38%; z-index: 8; display: grid; justify-items: center; gap: 8px; pointer-events: none; }
.banner-title { font: 700 56px 'Fredoka', sans-serif; color: #fff; text-shadow: 0 5px 0 var(--coral-lip), 0 10px 26px rgba(0, 0, 0, 0.4); animation: bannerOut 1.3s forwards; }
.banner.hard .banner-title { text-shadow: 0 5px 0 #8f2433, 0 10px 26px rgba(0, 0, 0, 0.4); color: #ffd0d4; }
.banner.super .banner-title { text-shadow: 0 5px 0 #4b2591, 0 10px 26px rgba(0, 0, 0, 0.4); color: #e6d6ff; }
.banner-sub { font: 700 18px 'Fredoka', sans-serif; padding: 6px 16px; border-radius: 16px; background: var(--coral); box-shadow: 0 4px 0 var(--coral-lip); animation: rise2 0.4s 0.2s both cubic-bezier(.2, 1.6, .4, 1), bannerOut 1.3s forwards; }
.banner.super .banner-sub { background: var(--grape); box-shadow: 0 4px 0 #6a3fbf; }
@keyframes rise2 { from { transform: scale(0.4); opacity: 0; } }
@keyframes bannerOut { 80% { opacity: 1; } 100% { opacity: 0; transform: translateY(-14px); } }
.pop-letters .word { display: inline-block; white-space: nowrap; }
.pop-letters .letter { display: inline-block; animation: letter 0.42s both cubic-bezier(.2, 1.8, .4, 1); }
@keyframes letter { from { transform: translateY(18px) scale(0.3); opacity: 0; } }

/* Callouts over the board. */
.callout { position: fixed; z-index: 40; transform: translate(-50%, -50%); pointer-events: none; white-space: nowrap;
  font: 700 26px 'Fredoka', sans-serif; color: #fff; text-shadow: 0 3px 0 var(--coral-lip), 0 0 14px rgba(255, 94, 108, 0.6);
  animation: callout 1.25s cubic-bezier(.2, 1.4, .4, 1) forwards; }
.callout.hot { font-size: 32px; color: var(--gold); text-shadow: 0 3px 0 var(--gold-lip), 0 0 18px rgba(255, 194, 61, 0.8); }
.callout.soft { font-size: 19px; text-shadow: 0 2px 0 rgba(0, 0, 0, 0.45); }
.callout.long { animation-duration: 3.2s; max-width: calc(100vw - 48px); white-space: normal; text-align: center; padding: 10px 18px; border-radius: 18px; background: rgba(5, 27, 29, 0.82); text-shadow: none; }
@keyframes callout { 0% { transform: translate(-50%, -30%) scale(0.4); opacity: 0; } 18% { transform: translate(-50%, -50%) scale(1.12); opacity: 1; }
  30% { transform: translate(-50%, -50%) scale(1); } 75% { opacity: 1; } 100% { transform: translate(-50%, -110%) scale(0.95); opacity: 0; } }

/* Booster bar. */
.boosters { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: center; align-items: flex-end; gap: 10px;
  padding: 0 12px calc(env(safe-area-inset-bottom) + 16px); pointer-events: none; }
.boosters > * { pointer-events: auto; }
.side { flex: none; width: 50px; height: 50px; margin-bottom: 8px; border-radius: 50%; background: rgba(233, 246, 241, 0.16); color: var(--foam); display: grid; place-items: center; border: 2px solid rgba(233, 246, 241, 0.25); }
.side:active:not(:disabled) { transform: scale(0.92); }
.booster { position: relative; width: 74px; height: 82px; border-radius: 22px; background: var(--cream); color: var(--ink);
  display: grid; justify-items: center; align-content: center; gap: 2px; box-shadow: 0 5px 0 var(--cream-lip), 0 10px 18px rgba(0, 0, 0, 0.25); }
.booster:active:not(:disabled) { transform: translateY(4px); box-shadow: 0 1px 0 var(--cream-lip); }
.booster .label { font: 700 13px 'Fredoka', sans-serif; }
.booster .badge { position: absolute; top: -8px; right: -8px; min-width: 26px; height: 26px; padding: 0 7px; border-radius: 13px;
  background: var(--coral); color: #fff; font: 700 14px/26px 'Fredoka', sans-serif; box-shadow: 0 2px 0 var(--coral-lip); }
.booster.buy .badge { background: var(--gold); color: var(--ink); box-shadow: 0 2px 0 var(--gold-lip); padding-left: 22px; }
.booster.buy .badge::before { content: ''; position: absolute; left: 4px; top: 5px; width: 16px; height: 16px; border-radius: 50%;
  background: radial-gradient(circle at 35% 32%, #fff6c9 0 18%, var(--gold) 40%, #f0a800 75%, var(--gold-lip)); }
.booster.glow { animation: glow 1s ease-in-out infinite alternate; }
@keyframes glow { to { box-shadow: 0 5px 0 var(--cream-lip), 0 0 0 6px rgba(255, 194, 61, 0.7), 0 0 26px rgba(255, 194, 61, 0.9); } }
.shake { animation: shake 0.4s; }
@keyframes shake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }

/* Buttons. */
.pill { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 0 22px; border-radius: 26px;
  background: #f1e2cb; color: var(--ink); font: 700 17px 'Fredoka', sans-serif; box-shadow: 0 5px 0 var(--cream-lip); }
.pill:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 2px 0 var(--cream-lip); }
.wide { width: 100%; }
.big { width: 100%; min-height: 62px; border-radius: 31px; font: 700 23px 'Fredoka', sans-serif; }
.primary { background: linear-gradient(180deg, #ffd668, var(--gold)); color: var(--ink); box-shadow: 0 6px 0 var(--gold-lip), 0 12px 22px rgba(0, 0, 0, 0.25); }
.primary:active:not(:disabled) { transform: translateY(4px); box-shadow: 0 2px 0 var(--gold-lip); }
.toggle { min-height: 52px; padding: 0 20px; border-radius: 26px; background: rgba(233, 246, 241, 0.12); border: 2px solid rgba(233, 246, 241, 0.35);
  font: 700 17px 'Fredoka', sans-serif; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.toggle small { font: 400 13px 'Outfit', sans-serif; opacity: 0.8; }
.toggle[aria-pressed="true"] { background: var(--teal); border-color: var(--teal); color: var(--lagoon); }
.link { min-height: 44px; padding: 10px; text-decoration: underline; opacity: 0.85; font-weight: 600; }

/* CSS gummies (title, map) until Codex art lands. */
.mini-gummy { position: relative; width: 58px; height: 58px; border-radius: 18px; --c: var(--cherry);
  background: radial-gradient(70% 55% at 32% 26%, rgba(255, 255, 255, 0.75) 0 18%, transparent 42%), linear-gradient(160deg, color-mix(in srgb, var(--c), #fff 25%), var(--c) 55%, color-mix(in srgb, var(--c), #000 18%));
  box-shadow: inset 0 -6px 0 color-mix(in srgb, var(--c), #000 22%), inset 0 0 14px color-mix(in srgb, var(--c), #fff 30%), 0 8px 14px rgba(0, 0, 0, 0.3); }
.mini-gummy.bar { width: 96px; }
.mini-gummy .eye { position: absolute; top: 22%; width: 15px; height: 17px; border-radius: 50%; background: #fff; box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.08); }
.mini-gummy .eye::after { content: ''; position: absolute; left: 4px; top: 5px; width: 8px; height: 9px; border-radius: 50%; background: #24122a; box-shadow: inset 2px 2px 0 -1px #fff; }
.mini-gummy .eye.l { left: calc(50% - 19px); }
.mini-gummy .eye.r { left: calc(50% + 4px); }
.mini-gummy.lime { --c: var(--lime); } .mini-gummy.blueberry { --c: var(--blueberry); } .mini-gummy.lemon { --c: var(--lemon); }
.mini-gummy.grape { --c: var(--grape); } .mini-gummy.mint { --c: var(--mint); } .mini-gummy.bubblegum { --c: var(--bubblegum); } .mini-gummy.orange { --c: var(--orange); }

/* Screens. */
.screen { position: absolute; inset: 0; z-index: 20; display: flex; flex-direction: column; align-items: center; justify-content: space-between;
  padding: calc(env(safe-area-inset-top) + 48px) 24px calc(env(safe-area-inset-bottom) + 28px);
  background: radial-gradient(120% 70% at 50% 30%, #1a6b6b 0%, var(--wall) 55%, var(--lagoon) 100%); overflow: hidden; }
.screen.has-art { background-size: cover; background-position: center; }
.title.has-art { background-image: url("assets/art/title/bg.webp"); }
/* Until main.js is running the title is painted but its buttons can't do anything yet. */
.booting .title-buttons { pointer-events: none; }
.logo-h1 { margin: 0; line-height: 0; }
@keyframes floaty { from { translate: 0 0; rotate: -6deg; } to { translate: 0 -16px; rotate: 6deg; } }
.title-art { position: relative; text-align: center; margin-top: 4vh; }
.title-art img { max-width: min(360px, 90vw); height: auto; }
@keyframes wobble { 50% { transform: scale(1.03, 0.97); } }
.tagline { margin: 18px 0 0; font-size: 18px; opacity: 0.9; }
.hero { position: relative; width: min(200px, 50vw); height: auto; animation: floaty 2.4s ease-in-out infinite alternate; }
.title-buttons { position: relative; width: min(340px, 100%); display: grid; gap: 14px; }
.brand { position: relative; margin: 0; font: 700 14px 'Fredoka', sans-serif; letter-spacing: 0.08em; opacity: 0.6; }

/* Map. */
.map { padding: 0; justify-content: flex-start; }
.map-top { position: relative; z-index: 2; width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: calc(env(safe-area-inset-top) + 10px) 14px 8px; }
.map-jar { display: flex; align-items: center; gap: 8px; flex: 1; max-width: 190px; height: 42px; padding: 0 12px 0 8px; border-radius: 21px; background: var(--cream); color: var(--ink); box-shadow: 0 4px 0 var(--cream-lip); font: 700 15px 'Fredoka', sans-serif; }
.jar-bar { flex: 1; height: 12px; border-radius: 6px; background: #ead7bb; overflow: hidden; }
.jar-bar-fill { display: block; height: 100%; width: calc(var(--p, 0) * 100%); border-radius: 6px; background: linear-gradient(90deg, var(--bubblegum), var(--coral)); transition: width 0.9s cubic-bezier(.2, 1.4, .4, 1); }
.jar-mini { width: 22px; height: 26px; border-radius: 6px 6px 8px 8px; flex: none; background: linear-gradient(180deg, #d9f2ff 0 22%, transparent 22%), radial-gradient(circle at 30% 65%, var(--cherry) 0 4px, transparent 5px), radial-gradient(circle at 68% 58%, var(--lime) 0 4px, transparent 5px), radial-gradient(circle at 50% 84%, var(--lemon) 0 4px, transparent 5px), rgba(200, 235, 255, 0.55); border: 2px solid #7fb3d3; }
.streak-pill { position: relative; z-index: 2; display: flex; align-items: center; gap: 6px; padding: 4px 14px; border-radius: 16px; background: rgba(5, 27, 29, 0.55); font: 700 15px 'Fredoka', sans-serif; }
.flame { display: inline-block; width: 14px; height: 18px; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; background: radial-gradient(circle at 50% 70%, #fff1a8 0 25%, var(--gold) 45%, var(--coral) 80%); vertical-align: -3px; margin-right: 4px; }
.map-scroll { position: relative; flex: 1; width: 100%; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; touch-action: pan-y; }
.map-inner { position: relative; margin: 0 auto; }
.map-band { position: absolute; left: -20%; right: -20%; opacity: 0.55; }
.map-area { position: absolute; left: 50%; top: 22px; transform: translateX(-50%); font: 700 14px 'Fredoka', sans-serif; letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.85; white-space: nowrap; padding: 4px 14px; border-radius: 12px; background: rgba(5, 27, 29, 0.5); }
.map-path { position: absolute; left: 0; top: 0; overflow: visible; }
.path-shadow { fill: none; stroke: rgba(0, 0, 0, 0.25); stroke-linecap: round; transform: translateY(5px); }
.path-base { fill: none; stroke: #ffe9d1; stroke-linecap: round; }
.path-dash { fill: none; stroke: #ff9ec4; stroke-linecap: round; stroke-dasharray: 2 16; }
.node { position: absolute; width: 64px; height: 64px; transform: translate(-50%, -50%); border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff 0 12%, transparent 35%), linear-gradient(180deg, #ffd668, var(--gold)); color: var(--ink);
  box-shadow: 0 6px 0 var(--gold-lip), 0 10px 16px rgba(0, 0, 0, 0.3); font: 700 24px 'Fredoka', sans-serif; }
.node .num { position: relative; }
.node.done { background: radial-gradient(circle at 35% 30%, #fff 0 12%, transparent 35%), linear-gradient(180deg, #ff8fa6, var(--coral)); color: #fff; box-shadow: 0 6px 0 var(--coral-lip), 0 10px 16px rgba(0, 0, 0, 0.3); }
.node.locked { background: linear-gradient(180deg, #6f8f91, #4e6c6e); box-shadow: 0 6px 0 #34494b; }
.node.locked::after { content: ''; position: absolute; left: 50%; top: 50%; width: 18px; height: 14px; transform: translate(-50%, -20%); border-radius: 3px; background: #c8d9da; box-shadow: 0 -9px 0 -3px transparent; }
.node.locked::before { content: ''; position: absolute; left: 50%; top: 50%; width: 10px; height: 10px; transform: translate(-50%, -110%); border: 3px solid #c8d9da; border-bottom: 0; border-radius: 7px 7px 0 0; }
.node.hard:not(.locked) { outline: 4px solid var(--coral); outline-offset: 3px; }
.node.super:not(.locked) { outline: 4px solid var(--grape); outline-offset: 3px; }
.node.current { width: 76px; height: 76px; animation: nodePulse 1.2s ease-in-out infinite alternate; }
@keyframes nodePulse { to { box-shadow: 0 6px 0 var(--gold-lip), 0 0 0 10px rgba(255, 194, 61, 0.3), 0 10px 16px rgba(0, 0, 0, 0.3); } }
.node-stars { position: absolute; left: 50%; bottom: -16px; transform: translateX(-50%); font-size: 15px; color: var(--gold); text-shadow: 0 2px 0 #7a4c00; letter-spacing: 1px; white-space: nowrap; }
.node-tag { position: absolute; left: 50%; top: -16px; transform: translateX(-50%); font: 700 10px 'Fredoka', sans-serif; text-transform: uppercase; padding: 2px 7px; border-radius: 8px; background: var(--coral); color: #fff; white-space: nowrap; }
.node.super .node-tag { background: var(--grape); }
.map-hero { position: absolute; transform: translate(-50%, -50%); animation: hop 0.9s ease-in-out infinite alternate; pointer-events: none; z-index: 1; }
@keyframes hop { from { margin-top: 0; } to { margin-top: -12px; } }
.map-areas { display: none; }
.map-bottom { position: relative; z-index: 2; width: min(340px, calc(100% - 48px)); padding: 10px 0 calc(env(safe-area-inset-bottom) + 22px); }

/* Cards. */
.card-wrap { position: absolute; inset: 0; z-index: 30; display: flex; flex-direction: column; padding: 16px; overflow-x: hidden; overflow-y: auto; background: rgba(5, 27, 29, 0.6); animation: fade 0.25s; }
/* margin: auto centres the card but lets a card taller than the screen scroll from its top. */
.card-wrap > .card { margin: auto; flex: none; }
/* Room above a card whose gummy art sits on its top edge, so it never leaves the screen. */
.card-wrap:has(.card-art:not([hidden])) { padding-top: 84px; }
@keyframes fade { from { opacity: 0; } }
.card { position: relative; width: min(340px, 100%); padding: 26px 22px 16px; border-radius: 30px; background: var(--cream); color: var(--ink);
  display: grid; gap: 12px; text-align: center; box-shadow: 0 8px 0 var(--cream-lip), 0 22px 44px rgba(0, 0, 0, 0.4); animation: pop 0.38s cubic-bezier(.2, 1.6, .4, 1); }
.card h2 { position: relative; margin: 0 0 2px; font: 700 32px 'Fredoka', sans-serif; color: var(--coral); text-shadow: 0 3px 0 #ffd0d4; }
.card .toggle { color: var(--ink); background: #f1e2cb; border-color: #e3cfb0; }
.card .toggle[aria-pressed="true"] { background: var(--teal); border-color: var(--teal); }
.card .link { color: var(--ink); }
@keyframes pop { from { transform: scale(0.6); opacity: 0; } }
.rays { position: absolute; left: 50%; top: 92px; width: 420px; height: 420px; margin: -210px 0 0 -210px; pointer-events: none; z-index: 0;
  background: repeating-conic-gradient(rgba(255, 194, 61, 0.28) 0 10deg, transparent 10deg 24deg); border-radius: 50%;
  -webkit-mask: radial-gradient(circle, #000 20%, transparent 68%); mask: radial-gradient(circle, #000 20%, transparent 68%); animation: spin 9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.stars { position: relative; display: flex; justify-content: center; align-items: flex-end; gap: 6px; height: 64px; }
.stars i { font-style: normal; font-size: 50px; line-height: 1; color: #e6d3b6; text-shadow: 0 3px 0 #cfb893; transform: scale(0.4); opacity: 0; }
.stars i.mid { font-size: 64px; }
.stars i.pop { animation: starPop 0.45s cubic-bezier(.2, 2, .4, 1) forwards; }
.stars i.on { color: var(--gold); text-shadow: 0 4px 0 var(--gold-lip), 0 0 18px rgba(255, 194, 61, 0.8); }
@keyframes starPop { from { transform: scale(2) rotate(-30deg); opacity: 0; } to { transform: scale(1) rotate(0); opacity: 1; } }
.muted { position: relative; margin: 0; opacity: 0.7; }
.reward-box { position: relative; display: grid; gap: 6px; padding: 10px 14px; border-radius: 18px; background: #f4e5cd; }
.reward-row { display: flex; justify-content: space-between; align-items: center; font: 700 17px 'Fredoka', sans-serif; }
.reward-row b { display: flex; align-items: center; gap: 6px; font-size: 22px; }
.reward-row.mult { justify-content: center; color: var(--coral); font-size: 15px; }
.reward-row.streak { color: #c25a00; }
.jar-row { position: relative; display: flex; align-items: center; gap: 8px; font: 700 15px 'Fredoka', sans-serif; padding: 0 4px; }
.win-buttons { display: grid; gap: 6px; opacity: 0; transform: translateY(10px); transition: 0.3s; pointer-events: none; }
.win-buttons.in { opacity: 1; transform: none; pointer-events: auto; }
.row2 { display: flex; justify-content: center; gap: 18px; }
.lose-streak { margin: 0; padding: 8px 12px; border-radius: 14px; background: #ffe3c2; color: #a04400; font-weight: 600; }
.continue { display: flex; align-items: center; justify-content: center; gap: 10px; }
.continue .price { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px 3px 4px; border-radius: 16px; background: rgba(255, 255, 255, 0.6); font-size: 18px; }
.jar-art { position: relative; width: 120px; height: 140px; margin: 6px auto 0; }
.jar-art .glass { position: absolute; left: 10px; right: 10px; top: 26px; bottom: 0; border-radius: 22px 22px 30px 30px; background: rgba(200, 235, 255, 0.55); border: 4px solid #7fb3d3; overflow: hidden; }
.jar-art .glass i { position: absolute; width: 28px; height: 28px; border-radius: 9px; }
.jar-art .glass i:nth-child(1) { left: 8px; bottom: 6px; background: var(--cherry); } .jar-art .glass i:nth-child(2) { left: 40px; bottom: 8px; background: var(--lime); }
.jar-art .glass i:nth-child(3) { left: 22px; bottom: 34px; background: var(--lemon); } .jar-art .glass i:nth-child(4) { left: 56px; bottom: 36px; background: var(--grape); }
.jar-art .glass i:nth-child(5) { left: 38px; bottom: 62px; background: var(--blueberry); }
.jar-art .lid { position: absolute; left: 4px; right: 4px; top: 10px; height: 24px; border-radius: 10px; background: linear-gradient(180deg, #ff8fb8, var(--coral)); box-shadow: 0 4px 0 var(--coral-lip); z-index: 1; }
.jar-art.open { animation: jarShake 0.6s ease-in-out; }
.jar-art.open .lid { animation: lidOff 0.5s 0.55s forwards cubic-bezier(.3, 1.5, .5, 1); }
@keyframes jarShake { 20%, 60% { transform: rotate(-8deg); } 40%, 80% { transform: rotate(8deg); } }
@keyframes lidOff { to { transform: translate(40px, -60px) rotate(40deg); opacity: 0; } }
.jar-prize { margin: 0; font: 700 18px 'Fredoka', sans-serif; color: var(--teal); }
/* Codex art hooks (orders GG-001, GG-005..013): main.js sets these when a file exists. */
.booster-art { width: 40px; height: 40px; object-fit: contain; }
.art-coin .coin, .art-coin .fly-coin { background: var(--coin-art) center / contain no-repeat; box-shadow: none; }
.art-coin .booster.buy .badge::before { background: var(--coin-art) center / contain no-repeat; }
.art-jar .jar-mini { width: 32px; height: 32px; margin: -4px -2px; background: var(--jar-closed) center / contain no-repeat; border: 0; border-radius: 0; }
.art-jar .jar-art { background: var(--jar-closed) center / contain no-repeat; }
.art-jar .jar-art > * { display: none; }
.art-jar .jar-art.opened { background-image: var(--jar-open, var(--jar-closed)); }
/* The area paintings fade to the wall color over their top ~10% and bottom ~12%; scale them up so
   the fades fall outside the band and neighbouring areas meet without a dead strip. */
.art-map .map-band { opacity: 1; left: 0; right: 0; background-size: auto 128% !important; background-position: center 46% !important; }
/* On the painted title the counter is light, so the ghost toggle and wordmark need a dark backing. */
.title.has-art .toggle:not([aria-pressed="true"]) { background: rgba(5, 27, 29, 0.72); border-color: rgba(233, 246, 241, 0.45); }
.title.has-art .brand { opacity: 0.9; color: var(--ink); }
.art-hero .map-hero { width: 72px; height: 72px; background: var(--hero-art) center / contain no-repeat; box-shadow: none; }
.art-hero .map-hero .eye { display: none; }
.art-play .backdrop { background: var(--play-bg) center / cover no-repeat; }
.art-play .backdrop > * { display: none; }
.card-art { position: relative; width: 120px; height: 120px; margin: -86px auto -10px; object-fit: contain; filter: drop-shadow(0 8px 10px rgba(0, 0, 0, 0.3)); }
/* Above the board, below the result cards, so it never covers a card's title. */
.confetti { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 29; pointer-events: none; }
.card-wrap.win { background: rgba(5, 27, 29, 0.38); }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } }
.toggle.sound { display: flex; align-items: center; justify-content: center; gap: 8px; }
.toggle.sound .mute { display: none; }
.title-gear { position: absolute; top: calc(env(safe-area-inset-top) + 12px); right: 14px; z-index: 2; }
/* The live-ops kit's in-game Reduced motion switch (it sets this attribute) does what the system setting does. */
[data-hula-reduced-motion] *, [data-hula-reduced-motion] *::before, [data-hula-reduced-motion] *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
.toggle.sound[aria-pressed="false"] .waves { display: none; }
.toggle.sound[aria-pressed="false"] .mute { display: inline; }
.booster.off { opacity: 0.45; }
.daily-btn { display: flex; align-items: center; justify-content: center; gap: 8px; }
.daily-btn small { font: 600 13px 'Outfit', sans-serif; opacity: 0.75; }
.up-goal { margin: 0 0 2px; font: 700 17px 'Fredoka', sans-serif; color: var(--ink); text-align: center; }
.streak-note { margin: -4px 0 0; font-weight: 600; color: #c25a00; }
.pause-note { margin: -6px 0 2px; font-weight: 600; color: #8a5a3a; }
.up-next { display: block; margin-top: 2px; padding: 12px 8px; font: 600 14px 'Outfit', sans-serif; color: var(--ink); opacity: 0.8; text-align: center; }
.age { margin: 2px 0 0; font-size: 13px; color: #8a6a5a; }
.need { margin: -4px 0 0; font-size: 14px; color: #8a5a3a; }
/* Portrait-only game: a phone held sideways gets a prompt instead of a squashed board. */
.rotate { display: none; }
@media (orientation: landscape) and (max-height: 500px) {
  .rotate { position: fixed; inset: 0; z-index: 100; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
    background: var(--wall); color: var(--foam); font: 700 20px 'Fredoka', sans-serif; text-align: center; }
  .rotate p { margin: 0; }
}
@media (max-width: 340px) { .boosters { gap: 6px; } }
/* Short phones: three title buttons plus the age line need the hero smaller and the gaps tighter. */
@media (max-height: 760px) {
  .title { padding-top: calc(env(safe-area-inset-top) + 28px); padding-bottom: calc(env(safe-area-inset-bottom) + 14px); }
  .title-art { margin-top: 0; }
  .title-art img { max-width: min(300px, 80vw); }
  .tagline { margin-top: 8px; font-size: 16px; }
  .hero { width: min(130px, 34vw); }
  .title-buttons { gap: 10px; }
  .title-buttons .big { min-height: 56px; }
}
@media (max-height: 600px) { .hero { width: 96px; } .tagline { display: none; } }
@media (max-height: 620px) {
  .card-wrap:has(.card-art:not([hidden])) { padding-top: 58px; }
  .card-art { width: 92px; height: 92px; margin: -64px auto -12px; }
  .card { padding: 18px 18px 10px; gap: 8px; }
  .card h2 { font-size: 28px; }
  .up-next { padding: 4px; font-size: 12.5px; }
  .up-goal { font-size: 15px; }
  .stars { font-size: 40px; }
  .card .muted { margin: 0; }
}
@media (max-height: 700px) { .booster { width: 66px; height: 70px; } .side { width: 44px; height: 44px; } }