/* ===========================================================================
   Cookie Empire
   ---------------------------------------------------------------------------
   Sizing is in rem throughout, anchored to a 16px root, which is what makes the
   in-game text-size setting work: `applyFontScale` changes one value on :root and
   the entire interface scales with it, borders and spacing included. A transform
   scale would have been one line but would also have scaled the button borders,
   so it is deliberately not used.

   Colour is entirely CSS custom properties. The theme tables in
   shared/balance.js write these onto the document element at runtime, which is
   why adding a theme needs no CSS here at all.
   =========================================================================== */

:root {
  /* Written by applyTheme(); these are Lagoon Bakery's values as a fallback for
     the first paint, before the module has run. Keeping them in step with
     THEMES[0] is what stops the page flashing the wrong theme on load. */
  --bg: #04121a;
  --bg-2: #062430;
  --panel: #082b38;
  --panel-hi: #0b3746;
  --panel-deep: #041a24;
  --border: #1d5a6b;
  --text: #eaf7f3;
  --text-dim: #8fb7bd;
  --text-mute: #5d878f;
  --accent: #00b4d8;
  --accent-2: #ffcf5c;

  --success: #02c39a;
  --danger: #ff8a72;
  --info: #7bdff2;
  --purple: #b9a3ff;

  --cookie-a: #f4a460;
  --cookie-b: #b87333;
  --cookie-edge: #e8d4b8;
  --cookie-glow: #f4a460;

  --radius: 0.75rem;
  --radius-sm: 0.5rem;
  --gap: 0.5rem;

  --shadow: 0 0.5rem 1.5rem rgb(0 0 0 / 0.35);
  --shadow-lg: 0 1rem 3rem rgb(0 0 0 / 0.5);
  --shadow-inner: inset 0 2px 6px rgb(0 0 0 / 0.3);

  --dur: 180ms;
  --dur-slow: 320ms;
  --ease-out: cubic-bezier(.2,.8,.3,1);
  --ease-spring: cubic-bezier(.34,1.56,.64,1);

  font-size: 16px;
}

* { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
  overflow: hidden;
  overscroll-behavior: none;
}

body {
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  color: var(--text);
  background:
    radial-gradient(120vmax 80vmax at 50% -10%, color-mix(in oklab, var(--accent) 14%, transparent), transparent 60%),
    radial-gradient(80vmax 60vmax at 80% 110%, color-mix(in oklab, var(--purple) 8%, transparent), transparent 55%),
    linear-gradient(160deg, var(--bg) 0%, var(--bg-2) 100%);
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;
}

/* Subtle floating particle field behind everything. Two layers at different
   speeds give a parallax drift without any JavaScript. */
body::before {
  content: '';
  position: fixed;
  inset: -50%;
  width: 200%;
  height: 200%;
  background-image:
    radial-gradient(1.5px 1.5px at 20% 30%, color-mix(in oklab, var(--accent-2) 55%, transparent), transparent),
    radial-gradient(1px 1px at 40% 70%, color-mix(in oklab, var(--accent) 40%, transparent), transparent),
    radial-gradient(2px 2px at 60% 20%, color-mix(in oklab, var(--info) 30%, transparent), transparent),
    radial-gradient(1px 1px at 80% 50%, color-mix(in oklab, var(--accent-2) 35%, transparent), transparent),
    radial-gradient(1.5px 1.5px at 10% 80%, color-mix(in oklab, var(--purple) 30%, transparent), transparent),
    radial-gradient(1px 1px at 90% 90%, color-mix(in oklab, var(--accent) 30%, transparent), transparent),
    radial-gradient(2px 2px at 50% 50%, color-mix(in oklab, var(--info) 20%, transparent), transparent),
    radial-gradient(1px 1px at 30% 10%, color-mix(in oklab, var(--accent-2) 25%, transparent), transparent);
  background-size: 50% 50%;
  opacity: 0.35;
  animation: drift 120s linear infinite;
  pointer-events: none;
  z-index: 0;
}

@keyframes drift {
  from { transform: translate(0, 0) rotate(0deg); }
  to   { transform: translate(-50%, -50%) rotate(3deg); }
}

/* Light falls from above and the corners fall away. Sits under `#stage`, so it
   shapes the room the game is in -- the margins on a wide screen, the space
   behind the cookie -- without ever touching the contrast of anything you read.
   Without it the scene is evenly lit and the whole thing reads as a flat
   backdrop rather than a photograph. */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  background: radial-gradient(
    ellipse 85% 70% at 50% 34%,
    transparent 38%,
    rgb(0 0 0 / 0.16) 74%,
    rgb(0 0 0 / 0.36) 100%
  );
  pointer-events: none;
  z-index: 0;
}

button, input, textarea { font: inherit; color: inherit; }
button { cursor: pointer; border: none; background: none; }
button:disabled { cursor: not-allowed; }
h1, h2, h3, p, dl, dd, dt { margin: 0; }

/* Drawn icons take the size from the same `font-size` that sized the emoji they
   replace, so every box that ever held a character now holds a drawing at
   exactly the size it held the character at.

   `inline-block` rather than `block`: most icons are flex or grid children and
   get blockified anyway, but a few sit mid-sentence ("12,000 ✨ for 3 levels"),
   where a block box would shove the drawing onto a line of its own. The small
   negative align pulls the drawing down to where the emoji's own baseline was. */
svg.art {
  display: inline-block;
  vertical-align: -0.15em;
  width: 1em;
  height: 1em;
  flex: none;
}

/* Emoji-led labels are split into drawing and words by `labelNode()`. The flex
   gap stands in for the space that used to sit between them in the one string
   they used to be. */
.label { display: inline-flex; align-items: center; gap: 0.3em; }

/* Focus ring that is visible but not jarring. */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

::selection {
  background: color-mix(in oklab, var(--accent) 45%, transparent);
  color: #fff;
}

/* Every panel and overlay below sets an explicit `display`, which outranks the
   `hidden` attribute's UA rule. Without this, `[hidden]` silently does nothing --
   a page hidden attribute on a `display: grid` panel stays visible forever. */
[hidden] { display: none !important; }

/* `reduce-motion` is set on the root by applyReduceMotion(), and it also matches
   the OS preference on first run via the media query below. */
.reduce-motion *,
.reduce-motion *::before,
.reduce-motion *::after {
  animation-duration: 1ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 1ms !important;
}

@media (prefers-reduced-motion: reduce) {
  :root:not(.motion-ok) * {
    animation-duration: 1ms !important;
    transition-duration: 1ms !important;
  }
}

/* ============================================================== SCROLLBAR === */

* {
  scrollbar-width: thin;
  scrollbar-color: color-mix(in oklab, var(--accent) 40%, transparent) transparent;
}
*::-webkit-scrollbar { width: 6px; height: 6px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: color-mix(in oklab, var(--accent) 35%, transparent);
  border-radius: 999px;
}
*::-webkit-scrollbar-thumb:hover {
  background: color-mix(in oklab, var(--accent) 60%, transparent);
}

/* ============================================================== BUTTONS === */

.btn {
  position: relative;
  padding: 0.5rem 0.9rem;
  border-radius: var(--radius-sm);
  border: 2px solid transparent;
  font-weight: 700;
  font-size: 0.8rem;
  line-height: 1.2;
  white-space: nowrap;
  transition: transform var(--dur) var(--ease-out), filter var(--dur),
              background var(--dur), box-shadow var(--dur), border-color var(--dur);
  overflow: hidden;
}
.btn:not(:disabled):active { transform: scale(0.96); }

/* A sheen that sweeps across on hover, cheap enough to be always mounted. */
.btn::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 40%, rgb(255 255 255 / 0.18) 50%, transparent 60%);
  translate: -100% 0;
  transition: translate 400ms var(--ease-out);
  pointer-events: none;
}
.btn:not(:disabled):hover::after { translate: 100% 0; }

/* Light from above, drawn as a permanent overlay rather than as a box-shadow on
   the button itself: a hairline of highlight along the top edge, a matching
   shade along the bottom, and a faint rim all the way round. Every button
   variant sets its own `box-shadow` for its own glow, and that would wipe a
   bevel out the moment you hovered -- this paints over the background instead,
   so it survives all of them. */
.btn::before,
.icon-btn::before,
.chip::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.17),
    inset 0 -1px 0 rgb(0 0 0 / 0.26),
    inset 0 0 0 1px rgb(255 255 255 / 0.05);
  pointer-events: none;
}

.btn--buy {
  background: linear-gradient(180deg, var(--accent-2), color-mix(in oklab, var(--accent-2) 75%, var(--accent)));
  border-color: var(--accent-2);
  color: #1a1a2e;
  box-shadow: 0 2px 8px color-mix(in oklab, var(--accent-2) 30%, transparent);
}
.btn--buy:not(:disabled):hover {
  filter: brightness(1.12);
  box-shadow: 0 4px 16px color-mix(in oklab, var(--accent-2) 45%, transparent);
}
.btn--buy:not(:disabled):active { box-shadow: 0 1px 4px color-mix(in oklab, var(--accent-2) 30%, transparent); }
.btn--buy:disabled {
  background: color-mix(in oklab, var(--text-mute) 35%, transparent);
  border-color: transparent;
  color: var(--text-mute);
  box-shadow: none;
}

.btn--ghost {
  background: color-mix(in oklab, var(--panel-hi) 80%, transparent);
  border-color: var(--border);
  color: var(--text-dim);
  backdrop-filter: blur(0.25rem);
}
.btn--ghost:not(:disabled):hover {
  color: var(--text);
  border-color: var(--accent);
  background: color-mix(in oklab, var(--panel-hi) 95%, transparent);
  box-shadow: 0 0 0.75rem color-mix(in oklab, var(--accent) 20%, transparent);
}

.btn--danger {
  width: 100%;
  margin-top: 0.5rem;
  background: color-mix(in oklab, var(--danger) 14%, transparent);
  border-color: color-mix(in oklab, var(--danger) 45%, transparent);
  color: var(--danger);
}
.btn--danger:hover {
  background: color-mix(in oklab, var(--danger) 26%, transparent);
  box-shadow: 0 0 1rem color-mix(in oklab, var(--danger) 25%, transparent);
}

.btn--ascend {
  padding: 0.65rem 1rem;
  font-size: 0.85rem;
  background: linear-gradient(180deg, var(--purple), color-mix(in oklab, var(--purple) 55%, black));
  border-color: var(--purple);
  color: #fff;
  box-shadow: 0 2px 12px color-mix(in oklab, var(--purple) 35%, transparent);
}
.btn--ascend:not(:disabled):hover {
  filter: brightness(1.15);
  box-shadow: 0 4px 20px color-mix(in oklab, var(--purple) 50%, transparent);
}
.btn--ascend:disabled {
  background: color-mix(in oklab, var(--text-mute) 30%, transparent);
  color: var(--text-mute);
  box-shadow: none;
}

.btn--stock { padding: 0.35rem 0.55rem; font-size: 0.7rem; }
.btn--stock:disabled { opacity: 0.35; }

.icon-btn {
  /* Anchors the bevel overlay; it would otherwise fall back to the nearest
     positioned ancestor. */
  position: relative;
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: color-mix(in oklab, var(--panel-hi) 85%, transparent);
  color: var(--text-dim);
  font-size: 0.85rem;
  flex: 0 0 auto;
  transition: color var(--dur), border-color var(--dur), background var(--dur),
              box-shadow var(--dur), transform var(--dur);
}
.icon-btn:hover {
  color: var(--text);
  border-color: var(--accent);
  box-shadow: 0 0 0.75rem color-mix(in oklab, var(--accent) 25%, transparent);
}
.icon-btn:active { transform: scale(0.92); }

.button-row { display: flex; gap: var(--gap); }
.button-row .btn { flex: 1; }

/* ================================================================ STAGE === */

#stage {
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr auto;
  height: 100dvh;
  max-width: 40rem;
  margin-inline: auto;
  z-index: 1;
}

/* ---- HUD ---- */

#hud {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  padding: 0.5rem 0.75rem;
  padding-top: max(0.5rem, env(safe-area-inset-top));
  background: color-mix(in oklab, var(--panel-deep) 80%, transparent);
  border-bottom: 1px solid color-mix(in oklab, var(--accent) 22%, transparent);
  backdrop-filter: blur(0.75rem) saturate(1.3);
  -webkit-backdrop-filter: blur(0.75rem) saturate(1.3);
  position: relative;
}
/* Thin gradient line under the HUD that shimmers subtly. */
#hud::after {
  content: '';
  position: absolute;
  inset: auto 0 -1px;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    color-mix(in oklab, var(--accent-2) 50%, transparent) 30%,
    color-mix(in oklab, var(--accent) 60%, transparent) 50%,
    color-mix(in oklab, var(--accent-2) 50%, transparent) 70%,
    transparent 100%);
  background-size: 200% 100%;
  animation: shimmer-line 6s linear infinite;
}
@keyframes shimmer-line {
  from { background-position: 200% 0; }
  to   { background-position: -200% 0; }
}

.hud-figures { display: flex; align-items: baseline; gap: 0.3rem; }
.hud-cookies {
  font-size: 1.45rem;
  font-weight: 800;
  color: var(--accent-2);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  background: linear-gradient(180deg, var(--accent-2), color-mix(in oklab, var(--accent-2) 70%, var(--accent)));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 1px 2px rgb(0 0 0 / 0.5));
}
.hud-unit { font-size: 0.7rem; color: var(--text-dim); opacity: 0.8; }

.hud-rates { display: flex; gap: 0.6rem; margin-left: auto; }
.hud-rate { display: flex; align-items: baseline; gap: 0.2rem; }
.hud-rate dt {
  font-size: 0.58rem;
  color: var(--text-mute);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.hud-rate dd {
  margin: 0;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--success);
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 0.5rem color-mix(in oklab, var(--success) 30%, transparent);
}

.hud-buffs { display: flex; gap: 0.25rem; flex-wrap: wrap; width: 100%; }
.hud-buffs:empty { display: none; }

.buff-chip {
  display: inline-flex;
  gap: 0.3rem;
  padding: 0.12rem 0.5rem;
  border-radius: 999px;
  font-size: 0.65rem;
  font-weight: 700;
  border: 1px solid var(--accent-2);
  background: linear-gradient(135deg,
    color-mix(in oklab, var(--accent-2) 18%, transparent),
    color-mix(in oklab, var(--accent-2) 8%, transparent));
  color: var(--accent-2);
  box-shadow: 0 0 0.5rem color-mix(in oklab, var(--accent-2) 20%, transparent);
  animation: chip-pop 300ms var(--ease-spring);
}
.buff-chip--click {
  border-color: var(--info);
  color: var(--info);
  background: linear-gradient(135deg,
    color-mix(in oklab, var(--info) 18%, transparent),
    color-mix(in oklab, var(--info) 8%, transparent));
  box-shadow: 0 0 0.5rem color-mix(in oklab, var(--info) 20%, transparent);
}
@keyframes chip-pop {
  from { transform: scale(0.7); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}
.buff-time { font-variant-numeric: tabular-nums; opacity: 0.8; }

/* ---- play area ---- */

#play-area {
  display: grid;
  grid-template-rows: 1fr auto auto;
  align-items: center;
  justify-items: center;
  gap: 0.75rem;
  padding: 1rem;
  min-height: 0;
  position: relative;
}

/* ---- the cookie ---- */

.cookie {
  position: relative;
  display: grid;
  place-items: center;
  width: min(46vw, 15rem, 42dvh);
  aspect-ratio: 1;
  /* A perfect circle reads as a graphic. Two pairs of radii, a few points off
     each other, read as something that spread while it baked -- and because the
     deviation is small it still scans as round. */
  border-radius: 47% 53% 49.5% 50.5% / 51% 48% 52% 49%;
  border: 0.35rem solid var(--cookie-edge);

  background:
    radial-gradient(ellipse 58% 50% at 27% 22%, rgb(255 255 255 / 0.34), transparent 64%),
    radial-gradient(ellipse 96% 86% at 66% 80%, rgb(58 28 6 / 0.45), transparent 72%),
    radial-gradient(circle at 34% 28%, var(--cookie-a), var(--cookie-b));

  /* Three drop shadows rather than one: the tight one is where the cookie meets
     the surface, the next is the object's own bulk, the widest is the room. One
     shadow at one blur reads as a sticker. */
  box-shadow:
    0 0 4rem color-mix(in oklab, var(--cookie-glow) 50%, transparent),
    0 0 8rem color-mix(in oklab, var(--cookie-glow) 20%, transparent),
    0 2px 3px rgb(0 0 0 / 0.4),
    0 14px 26px -8px rgb(0 0 0 / 0.55),
    0 40px 64px -24px rgb(0 0 0 / 0.6),
    inset 0 3px 6px rgb(255 255 255 / 0.25),
    inset 0 -6px 12px rgb(0 0 0 / 0.35),
    inset 0 0 2rem rgb(0 0 0 / 0.2);
  transition: transform 90ms var(--ease-out), box-shadow 300ms var(--ease-out);
  animation: bob 3.5s ease-in-out infinite, cookie-breathe 4s ease-in-out infinite;
  user-select: none;
  overflow: hidden;
  z-index: 1;
}

/* The dough's grain, laid over the art rather than into it: turbulence is
   frequency-bound, so a texture tuned for a 240px cookie rasterises as
   sub-pixel mush on a 16px badge -- but on the big one it is the difference
   between a gradient that looks moulded and one that looks baked. */
.cookie::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)' opacity='0.6'/%3E%3C/svg%3E") center / 4.5rem 4.5rem;
  mix-blend-mode: soft-light;
  pointer-events: none;
  z-index: 1;
}


.cookie:hover {
  transform: scale(1.04);
  box-shadow:
    0 0 5rem color-mix(in oklab, var(--cookie-glow) 65%, transparent),
    0 0 10rem color-mix(in oklab, var(--cookie-glow) 28%, transparent),
    0 3px 5px rgb(0 0 0 / 0.45),
    0 16px 30px -8px rgb(0 0 0 / 0.58),
    0 46px 70px -24px rgb(0 0 0 / 0.62),
    inset 0 3px 6px rgb(255 255 255 / 0.3),
    inset 0 -6px 12px rgb(0 0 0 / 0.35),
    inset 0 0 2rem rgb(0 0 0 / 0.18);
}
.cookie:active {
  /* Squash rather than scale: a real cookie gives under a thumb instead of
     shrinking uniformly, and the drop shadow tightens as it presses down. */
  transform: scale(0.95, 0.87);
  box-shadow:
    0 0 2.5rem color-mix(in oklab, var(--cookie-glow) 40%, transparent),
    0 1px 2px rgb(0 0 0 / 0.5),
    0 6px 14px -4px rgb(0 0 0 / 0.55),
    inset 0 4px 8px rgb(0 0 0 / 0.4),
    inset 0 -2px 4px rgb(255 255 255 / 0.1);
}

.cookie-face {
  /* Fills the button rather than sitting in it: an emoji is placed by its
     font-size, a drawing has to be placed in a box. Stacking under the grain
     is deliberate -- the texture belongs on top of the art, not under it. */
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: min(18vw, 5.5rem, 22dvh);
  line-height: 1;
  z-index: 0;
  filter: drop-shadow(0 2px 4px rgb(0 0 0 / 0.3));
}
.cookie-face > svg.art { width: 100%; height: 100%; }

@keyframes bob {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -0.4rem; }
}
@keyframes cookie-breathe {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.06); }
}
.is-paused .cookie { animation-play-state: paused; }

/* ---- ability bar ---- */

.ability-bar {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0.35rem;
  width: 100%;
  max-width: 28rem;
}

.ability {
  position: relative;
  display: grid;
  place-items: center;
  gap: 0.1rem;
  padding: 0.45rem 0.15rem 0.55rem;
  border-radius: var(--radius-sm);
  border: 2px solid var(--border);
  background: linear-gradient(180deg,
    color-mix(in oklab, var(--panel-hi) 90%, transparent),
    color-mix(in oklab, var(--panel) 90%, transparent));
  overflow: hidden;
  transition: border-color var(--dur), box-shadow var(--dur), transform var(--dur),
              opacity var(--dur), background var(--dur);
}
.ability:hover { transform: translateY(-2px); }
.ability:active { transform: translateY(0) scale(0.97); }

.ability-key {
  position: absolute;
  top: 0.1rem;
  right: 0.25rem;
  font-size: 0.55rem;
  color: var(--text-mute);
  opacity: 0.6;
}
.ability-icon {
  font-size: 1.3rem;
  line-height: 1;
  transition: filter var(--dur), transform var(--dur);
}
.ability:hover .ability-icon { transform: scale(1.15); }
.ability-name {
  font-size: 0.52rem;
  font-weight: 700;
  color: var(--text-dim);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ability-status {
  font-size: 0.6rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}
.ability .ability-bar {
  position: absolute;
  inset: auto 0 0 0;
  height: 3px;
  background: rgb(0 0 0 / 0.3);
}
.ability-bar-fill {
  display: block;
  height: 100%;
  background: var(--success);
  transform-origin: left;
  transform: scaleX(0);
  transition: transform 200ms linear;
}

.ability--ready {
  border-color: color-mix(in oklab, var(--success) 65%, var(--border));
  background: linear-gradient(180deg,
    color-mix(in oklab, var(--success) 8%, var(--panel-hi)),
    color-mix(in oklab, var(--success) 4%, var(--panel)));
  box-shadow: 0 0 0.75rem color-mix(in oklab, var(--success) 22%, transparent);
}
.ability--ready .ability-icon { filter: drop-shadow(0 0 0.5rem var(--success)); }
.ability--ready .ability-name { color: var(--text); }

.ability--active {
  border-color: var(--accent-2);
  background: linear-gradient(180deg,
    color-mix(in oklab, var(--accent-2) 12%, var(--panel-hi)),
    color-mix(in oklab, var(--accent-2) 6%, var(--panel)));
  box-shadow: 0 0 1rem color-mix(in oklab, var(--accent-2) 35%, transparent);
  animation: active-pulse 1.2s ease-in-out infinite alternate;
}
.ability--active .ability-bar-fill { background: var(--accent-2); }
.ability--active .ability-icon { filter: drop-shadow(0 0 0.6rem var(--accent-2)); }
@keyframes active-pulse {
  from { box-shadow: 0 0 0.75rem color-mix(in oklab, var(--accent-2) 30%, transparent); }
  to   { box-shadow: 0 0 1.5rem color-mix(in oklab, var(--accent-2) 55%, transparent); }
}

.ability--cooldown { opacity: 0.7; }
.ability--cooldown .ability-bar-fill { background: var(--danger); }
.ability--cooldown .ability-status { color: var(--text-dim); }
.ability--cooldown .ability-icon { filter: grayscale(0.5); }

.ability--locked { opacity: 0.55; }
.ability--locked .ability-status { color: var(--accent-2); }
.ability--locked.is-affordable {
  opacity: 1;
  border-color: var(--accent-2);
  animation: affordable-glow 2s ease-in-out infinite alternate;
}
@keyframes affordable-glow {
  from { box-shadow: 0 0 0.5rem color-mix(in oklab, var(--accent-2) 25%, transparent); }
  to   { box-shadow: 0 0 1.25rem color-mix(in oklab, var(--accent-2) 50%, transparent); }
}

.hint {
  font-size: 0.7rem;
  color: var(--text-mute);
  text-align: center;
  max-width: 22rem;
  line-height: 1.5;
  opacity: 0.7;
}

/* ---- nav ---- */

.nav {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0.15rem;
  padding: 0.3rem 0.35rem;
  padding-bottom: max(0.3rem, env(safe-area-inset-bottom));
  background: color-mix(in oklab, var(--panel-deep) 88%, transparent);
  border-top: 1px solid color-mix(in oklab, var(--accent) 22%, transparent);
  backdrop-filter: blur(0.75rem) saturate(1.3);
  -webkit-backdrop-filter: blur(0.75rem) saturate(1.3);
  position: relative;
}
/* Mirror of the HUD shimmer line, on top instead. */
.nav::before {
  content: '';
  position: absolute;
  inset: -1px 0 auto;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    color-mix(in oklab, var(--accent-2) 50%, transparent) 30%,
    color-mix(in oklab, var(--accent) 60%, transparent) 50%,
    color-mix(in oklab, var(--accent-2) 50%, transparent) 70%,
    transparent 100%);
  background-size: 200% 100%;
  animation: shimmer-line 6s linear infinite;
}

.nav-btn {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 0.1rem;
  padding: 0.4rem 0.1rem 0.3rem;
  border-radius: var(--radius-sm);
  color: var(--text-mute);
  transition: color var(--dur), background var(--dur), transform var(--dur);
}
.nav-btn:hover { color: var(--text-dim); background: color-mix(in oklab, var(--text-mute) 8%, transparent); }
.nav-btn:active { transform: scale(0.94); }
.nav-btn.is-active {
  color: var(--accent);
  background: linear-gradient(180deg,
    color-mix(in oklab, var(--accent) 16%, transparent),
    color-mix(in oklab, var(--accent) 6%, transparent));
  text-shadow: 0 0 0.5rem color-mix(in oklab, var(--accent) 40%, transparent);
}
/* Animated indicator bar under the active nav item. */
.nav-btn.is-active::after {
  content: '';
  position: absolute;
  bottom: -0.3rem;
  left: 20%;
  right: 20%;
  height: 2px;
  border-radius: 999px;
  background: var(--accent);
  box-shadow: 0 0 0.5rem color-mix(in oklab, var(--accent) 60%, transparent);
  animation: nav-indicator 250ms var(--ease-spring);
}
@keyframes nav-indicator {
  from { transform: scaleX(0); opacity: 0; }
  to   { transform: scaleX(1); opacity: 1; }
}
.nav-icon { font-size: 1.2rem; line-height: 1; transition: transform var(--dur) var(--ease-spring); }
.nav-btn:hover .nav-icon { transform: translateY(-2px) scale(1.1); }
.nav-btn.is-active .nav-icon { transform: scale(1.12); }
.nav-label { font-size: 0.58rem; font-weight: 700; letter-spacing: 0.02em; }

.nav-badge {
  position: absolute;
  top: 0.05rem;
  right: 0.5rem;
  min-width: 1.05rem;
  padding: 0 0.25rem;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--danger), color-mix(in oklab, var(--danger) 70%, black));
  color: #fff;
  font-size: 0.55rem;
  font-weight: 800;
  line-height: 1.05rem;
  text-align: center;
  box-shadow: 0 0 0.5rem color-mix(in oklab, var(--danger) 40%, transparent);
  animation: badge-pop 300ms var(--ease-spring);
}
@keyframes badge-pop {
  from { transform: scale(0); }
  to   { transform: scale(1); }
}
.nav-badge:not(.is-visible) { display: none; }

/* ---- goldens and floating numbers ---- */

.goldens {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* Fixed, not absolute: this layer spans the stage, and the stage is centred and
   capped at 40rem, so its origin is nowhere near the viewport's. Floaters are
   positioned from `clientX`/`clientY`, which are viewport coordinates, so the
   layer has to share the viewport's origin or every number lands a stage-width
   and a stage-height away from the click that produced it. */
.click-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}

.golden {
  position: absolute;
  translate: -50% -50%;
  font-size: 2.8rem;
  line-height: 1;
  pointer-events: auto;
  filter: drop-shadow(0 0 1.2rem var(--accent-2)) drop-shadow(0 0 2.5rem color-mix(in oklab, var(--accent-2) 40%, transparent));
  animation: sparkle 0.9s ease-in-out infinite alternate;
  cursor: pointer;
  transition: transform 120ms var(--ease-out);
  z-index: 5;
}
.golden:hover { transform: scale(1.2); }
.golden:active { transform: scale(0.9); }
@keyframes sparkle {
  from { scale: 1; rotate: -6deg; filter: drop-shadow(0 0 0.8rem var(--accent-2)); }
  to   { scale: 1.18; rotate: 6deg; filter: drop-shadow(0 0 2rem var(--accent-2)) drop-shadow(0 0 4rem color-mix(in oklab, var(--accent-2) 50%, transparent)); }
}

.float-gain {
  position: absolute;
  /* Centering is the animation's job, not a `translate` property here. Both
     would apply -- the individual property first, then `transform` -- and the
     number would sit a half-width up and left of the click that made it. The
     keyframes already start at -50% and rise from there. */
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--accent-2);
  text-shadow: 0 1px 4px rgb(0 0 0 / 0.8), 0 0 0.75rem color-mix(in oklab, var(--accent-2) 40%, transparent);
  white-space: nowrap;
  pointer-events: none;
}
.float-gain--purple { color: var(--purple); text-shadow: 0 1px 4px rgb(0 0 0 / 0.8), 0 0 0.75rem color-mix(in oklab, var(--purple) 40%, transparent); }
.float-gain--good { color: var(--success); text-shadow: 0 1px 4px rgb(0 0 0 / 0.8), 0 0 0.75rem color-mix(in oklab, var(--success) 40%, transparent); }

/* Crumbs. The size, position and dough colour arrive inline from `crumbs()`;
   only the shape and the grounding shadow live here. */
.crumb {
  position: absolute;
  border-radius: 54% 46% 52% 48% / 48% 54% 46% 52%;
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.5);
  pointer-events: none;
  will-change: transform, opacity;
}

/* =============================================================== PANELS === */

.page {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: none;
  grid-template-rows: auto 1fr;
  max-width: 40rem;
  margin-inline: auto;
  background: linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%);
}
.page.is-open {
  display: grid;
  animation: page-in 280ms var(--ease-out);
}
@keyframes page-in {
  from { transform: translateY(1.5rem); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}

.page-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  padding-top: max(0.5rem, env(safe-area-inset-top));
  background: color-mix(in oklab, var(--panel-deep) 88%, transparent);
  border-bottom: 1px solid color-mix(in oklab, var(--accent) 22%, transparent);
  backdrop-filter: blur(0.75rem) saturate(1.3);
  -webkit-backdrop-filter: blur(0.75rem) saturate(1.3);
  position: relative;
}
.page-head::after {
  content: '';
  position: absolute;
  inset: auto 0 -1px;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    color-mix(in oklab, var(--accent-2) 50%, transparent) 30%,
    color-mix(in oklab, var(--accent) 60%, transparent) 50%,
    color-mix(in oklab, var(--accent-2) 50%, transparent) 70%,
    transparent 100%);
  background-size: 200% 100%;
  animation: shimmer-line 6s linear infinite;
}
.page-title {
  flex: 1;
  text-align: center;
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--accent);
  background: linear-gradient(180deg, var(--accent), color-mix(in oklab, var(--accent) 75%, var(--accent-2)));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.page-body {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 0.75rem;
  padding-bottom: max(0.75rem, env(safe-area-inset-bottom));
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  animation: body-fade 300ms var(--ease-out) 60ms both;
}
@keyframes body-fade {
  from { opacity: 0; transform: translateY(0.5rem); }
  to   { opacity: 1; transform: translateY(0); }
}

.section-title {
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-top: 0.35rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
/* Accent line to the left of every section title. */
.section-title::before {
  content: '';
  width: 3px;
  height: 0.9rem;
  border-radius: 999px;
  background: var(--accent);
  box-shadow: 0 0 0.4rem color-mix(in oklab, var(--accent) 50%, transparent);
  flex-shrink: 0;
}

.panel-note, .panel-summary, .result-count, .hint {
  font-size: 0.7rem;
  color: var(--text-dim);
  line-height: 1.5;
}

.group-heading {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--info);
  padding-bottom: 0.3rem;
  margin-top: 0.5rem;
  border-bottom: 1px dashed color-mix(in oklab, var(--info) 30%, transparent);
}
.group-count { color: var(--text-mute); letter-spacing: 0; text-transform: none; }

/* ---- chips and strips ---- */

.strip { display: flex; gap: 0.3rem; flex-wrap: wrap; }
.strip--sub { margin-top: -0.2rem; }
.control-row { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }
.control-label { font-size: 0.7rem; color: var(--text-dim); }
.result-count { margin-left: auto; font-variant-numeric: tabular-nums; }

.chip {
  position: relative;
  padding: 0.35rem 0.7rem;
  border-radius: 999px;
  border: 2px solid var(--border);
  background: color-mix(in oklab, var(--panel) 80%, transparent);
  color: var(--text-dim);
  font-size: 0.75rem;
  font-weight: 700;
  white-space: nowrap;
  transition: background var(--dur), color var(--dur), border-color var(--dur),
              box-shadow var(--dur), transform var(--dur);
  overflow: hidden;
}
.chip:hover { border-color: color-mix(in oklab, var(--accent) 50%, var(--border)); transform: translateY(-1px); }
.chip:active { transform: translateY(0) scale(0.96); }
.chip--sm { padding: 0.25rem 0.55rem; font-size: 0.68rem; border-width: 1px; }
.chip.is-active {
  background: linear-gradient(135deg, var(--accent), color-mix(in oklab, var(--accent) 80%, var(--accent-2)));
  border-color: var(--accent-2);
  color: #1a1a2e;
  box-shadow: 0 2px 8px color-mix(in oklab, var(--accent) 40%, transparent);
  transform: translateY(0);
}

.shop-controls { display: flex; flex-direction: column; gap: 0.4rem; }

/* ---- search ---- */

.search {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0 0.35rem;
  border-radius: 999px;
  border: 2px solid var(--border);
  background: color-mix(in oklab, var(--panel-deep) 70%, transparent);
  transition: border-color var(--dur), box-shadow var(--dur);
}
.search:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0.75rem color-mix(in oklab, var(--accent) 25%, transparent);
}
.search-icon { color: var(--text-mute); font-size: 0.75rem; }
#shop-search {
  flex: 1;
  min-width: 0;
  padding: 0.45rem 0;
  border: none;
  background: none;
  outline: none;
  font-size: 0.8rem;
}
#shop-search::placeholder { color: var(--text-mute); }
#shop-search::-webkit-search-cancel-button { display: none; }

.search-clear {
  display: none;
  place-items: center;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  background: color-mix(in oklab, var(--danger) 20%, transparent);
  color: var(--danger);
  font-size: 0.6rem;
  transition: background var(--dur), transform var(--dur);
}
.search-clear:hover { background: color-mix(in oklab, var(--danger) 35%, transparent); transform: scale(1.15); }
.search-clear.is-visible { display: grid; }

/* ---- tiles ---- */

.tile-list { display: flex; flex-direction: column; gap: 0.4rem; }

.tile {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.6rem;
  padding: 0.6rem 0.7rem;
  border-radius: var(--radius);
  border: 2px solid var(--border);
  background: linear-gradient(180deg,
    color-mix(in oklab, var(--panel) 70%, transparent),
    color-mix(in oklab, var(--panel-deep) 70%, transparent));
  cursor: pointer;
  transition: border-color var(--dur), background var(--dur), transform var(--dur),
              box-shadow var(--dur);
  position: relative;
  overflow: hidden;
  /* A contact shadow: tight under the row, wider beyond it. Cards that sit
     flush with their container read as printed-on; this lifts them. */
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.3), 0 8px 16px -10px rgb(0 0 0 / 0.5);
}
/* Subtle diagonal sheen across every tile. */
.tile::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgb(255 255 255 / 0.03) 0%, transparent 50%);
  pointer-events: none;
}
.tile:hover { transform: translateY(-1px); }
.tile:active { transform: translateY(0) scale(0.995); }

.tile.is-affordable {
  border-color: var(--success);
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.3), 0 8px 16px -10px rgb(0 0 0 / 0.5),
              0 0 0.75rem color-mix(in oklab, var(--success) 18%, transparent),
              inset 0 0 1rem color-mix(in oklab, var(--success) 5%, transparent);
}
.tile.is-affordable:hover {
  background: linear-gradient(180deg,
    color-mix(in oklab, var(--panel-hi) 85%, transparent),
    color-mix(in oklab, var(--panel) 85%, transparent));
  box-shadow: 0 2px 4px rgb(0 0 0 / 0.34), 0 12px 22px -10px rgb(0 0 0 / 0.55),
              0 0 1.25rem color-mix(in oklab, var(--success) 28%, transparent),
              inset 0 0 1rem color-mix(in oklab, var(--success) 5%, transparent);
}
.tile.is-owned {
  opacity: 0.85;
  border-left-width: 4px;
  border-left-color: var(--accent-2);
}
.tile.is-maxed { border-left: 4px solid var(--accent-2); }

.tile--prestige { border-left: 4px solid var(--purple); }
.tile--prestige.is-affordable {
  border-color: var(--purple);
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.3), 0 8px 16px -10px rgb(0 0 0 / 0.5),
              0 0 0.75rem color-mix(in oklab, var(--purple) 20%, transparent);
}
.tile--upgrade { border-left: 4px solid var(--info); }
.tile--upgrade.is-affordable {
  border-color: var(--info);
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.3), 0 8px 16px -10px rgb(0 0 0 / 0.5),
              0 0 0.75rem color-mix(in oklab, var(--info) 20%, transparent);
}

.tile-icon {
  font-size: 1.6rem;
  line-height: 1;
  transition: transform var(--dur) var(--ease-spring);
  filter: drop-shadow(0 2px 3px rgb(0 0 0 / 0.3));
}
.tile:hover .tile-icon { transform: scale(1.15) rotate(-4deg); }
.tile-body { min-width: 0; }
.tile-name {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  font-size: 0.85rem;
  font-weight: 700;
}
.tile-owned {
  padding: 0 0.35rem;
  border-radius: 999px;
  background: color-mix(in oklab, var(--purple) 25%, transparent);
  color: var(--purple);
  font-size: 0.6rem;
  font-weight: 700;
}
.tile-desc { font-size: 0.7rem; color: var(--text-dim); margin-top: 0.05rem; }
.tile-stats {
  display: flex;
  gap: 0.5rem;
  font-size: 0.68rem;
  color: var(--success);
  margin-top: 0.15rem;
  font-variant-numeric: tabular-nums;
}
.tile-delta.is-up { color: var(--accent-2); font-weight: 700; }

.tile-buy { display: grid; justify-items: end; gap: 0.25rem; }
.tile-cost {
  font-size: 0.78rem;
  font-weight: 800;
  color: var(--accent-2);
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 0.5rem color-mix(in oklab, var(--accent-2) 30%, transparent);
}

.empty { padding: 2rem 1rem; text-align: center; color: var(--text-mute); font-style: italic; font-size: 0.8rem; }

.page-strip { display: flex; align-items: center; justify-content: center; gap: 0.75rem; }
.page-label { display: grid; justify-items: center; font-size: 0.72rem; font-weight: 700; }
.page-range { font-size: 0.6rem; color: var(--text-mute); font-weight: 400; }

/* ---- garden ---- */

.garden {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.4rem;
}

.plot {
  position: relative;
  display: grid;
  place-items: center;
  gap: 0.1rem;
  aspect-ratio: 1;
  padding: 0.35rem;
  border-radius: var(--radius);
  border: 2px dashed var(--border);
  background: color-mix(in oklab, var(--panel) 55%, transparent);
  transition: border-color var(--dur), background var(--dur), transform var(--dur),
              box-shadow var(--dur);
}
.plot:hover { transform: translateY(-2px); }
.plot-icon {
  font-size: 1.9rem;
  line-height: 1;
  transition: transform var(--dur) var(--ease-spring);
  filter: drop-shadow(0 2px 3px rgb(0 0 0 / 0.3));
}
.plot:hover .plot-icon { transform: scale(1.12); }
.plot-name { font-size: 0.6rem; font-weight: 700; color: var(--text-dim); }
.plot-timer { font-size: 0.6rem; color: var(--text-mute); font-variant-numeric: tabular-nums; }

.plot-progress {
  position: absolute;
  inset: auto 0.4rem 0.35rem;
  height: 4px;
  border-radius: 999px;
  background: rgb(0 0 0 / 0.45);
  overflow: hidden;
}
.plot-progress-fill {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--info), var(--success));
  transform-origin: left;
  transform: scaleX(0);
  border-radius: 999px;
  box-shadow: 0 0 0.4rem color-mix(in oklab, var(--success) 50%, transparent);
}

.plot--growing {
  border-style: solid;
  border-color: color-mix(in oklab, var(--info) 55%, var(--border));
  background: color-mix(in oklab, var(--info) 6%, transparent);
}
.plot--ready {
  border-style: solid;
  border-color: var(--success);
  background: linear-gradient(135deg,
    color-mix(in oklab, var(--success) 14%, transparent),
    color-mix(in oklab, var(--success) 6%, transparent));
  animation: ready-pulse 1.1s ease-in-out infinite alternate;
}
.plot--ready .plot-name, .plot--ready .plot-timer { color: var(--success); font-weight: 800; }
.plot--broken { border-style: solid; border-color: var(--danger); opacity: 0.8; }

@keyframes ready-pulse {
  from { box-shadow: 0 0 0 rgb(0 255 136 / 0); transform: translateY(0); }
  to   { box-shadow: 0 0 1rem color-mix(in oklab, var(--success) 50%, transparent); transform: translateY(-2px); }
}

.seed-picker {
  position: absolute;
  z-index: 5;
  inset: 100% 0 auto;
  display: grid;
  gap: 0.15rem;
  padding: 0.35rem;
  border-radius: var(--radius-sm);
  border: 2px solid var(--accent);
  background: var(--panel-hi);
  box-shadow: var(--shadow-lg);
  animation: picker-in 200ms var(--ease-spring);
}
@keyframes picker-in {
  from { transform: translateY(-0.5rem) scale(0.95); opacity: 0; }
  to   { transform: translateY(0) scale(1); opacity: 1; }
}
.seed-picker-title {
  font-size: 0.6rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--accent);
}

.seed {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem;
  border-radius: var(--radius-sm);
  text-align: left;
  transition: background var(--dur), transform var(--dur);
}
.seed:hover { background: color-mix(in oklab, var(--accent) 18%, transparent); transform: translateX(2px); }
.seed.is-locked { opacity: 0.45; }
.seed-icon { font-size: 1.1rem; }
.seed-body { display: grid; min-width: 0; }
.seed-name { font-size: 0.7rem; font-weight: 700; }
.seed-meta { font-size: 0.6rem; color: var(--text-mute); }
.seed-cost { font-size: 0.7rem; font-weight: 800; color: var(--accent-2); }

/* ---- market ---- */

.market { display: grid; gap: 0.4rem; }

.stock {
  display: grid;
  gap: 0.4rem;
  padding: 0.6rem 0.7rem;
  border-radius: var(--radius);
  border: 2px solid var(--border);
  background: linear-gradient(180deg,
    color-mix(in oklab, var(--panel) 65%, transparent),
    color-mix(in oklab, var(--panel-deep) 65%, transparent));
  transition: border-color var(--dur), box-shadow var(--dur), transform var(--dur);
}
.stock:hover { transform: translateY(-1px); }
.stock.is-up {
  border-left: 4px solid var(--success);
  box-shadow: inset 0 0 1rem color-mix(in oklab, var(--success) 4%, transparent);
}
.stock.is-down {
  border-left: 4px solid var(--danger);
  box-shadow: inset 0 0 1rem color-mix(in oklab, var(--danger) 4%, transparent);
}

.stock-head { display: flex; align-items: center; gap: 0.5rem; }
.stock-icon { font-size: 1.3rem; filter: drop-shadow(0 2px 3px rgb(0 0 0 / 0.3)); }
.stock-id { display: grid; }
.stock-symbol { font-size: 0.8rem; font-weight: 800; letter-spacing: 0.04em; }
.stock-name { font-size: 0.6rem; color: var(--text-mute); }
.stock-figures { display: flex; align-items: baseline; gap: 0.4rem; margin-left: auto; }
.stock-price {
  font-size: 1rem;
  font-weight: 800;
  color: var(--accent-2);
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 0.5rem color-mix(in oklab, var(--accent-2) 30%, transparent);
}
.stock-change { font-size: 0.7rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.stock-change.is-up { color: var(--success); text-shadow: 0 0 0.4rem color-mix(in oklab, var(--success) 40%, transparent); }
.stock-change.is-down { color: var(--danger); text-shadow: 0 0 0.4rem color-mix(in oklab, var(--danger) 40%, transparent); }

.stock-foot { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.stock-owned, .stock-value { font-size: 0.65rem; color: var(--text-dim); }
.stock-actions { display: flex; gap: 0.25rem; margin-left: auto; flex-wrap: wrap; }

/* ---- awards ---- */

.awards-summary {
  display: grid;
  gap: 0.4rem;
  padding: 0.85rem;
  border-radius: var(--radius);
  border: 2px solid var(--accent-2);
  background: linear-gradient(135deg,
    color-mix(in oklab, var(--accent-2) 16%, transparent),
    color-mix(in oklab, var(--purple) 12%, transparent));
  box-shadow: 0 0 1.5rem color-mix(in oklab, var(--accent-2) 12%, transparent);
  position: relative;
  overflow: hidden;
}
/* Subtle light sweep across the awards summary. */
.awards-summary::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 40%, rgb(255 255 255 / 0.06) 50%, transparent 60%);
  background-size: 250% 100%;
  animation: shimmer-line 8s linear infinite;
  pointer-events: none;
}
.awards-figure { display: flex; align-items: baseline; gap: 0.4rem; }
.awards-big {
  font-size: 1.7rem;
  font-weight: 800;
  color: var(--accent-2);
  line-height: 1;
  background: linear-gradient(180deg, var(--accent-2), color-mix(in oklab, var(--accent-2) 70%, var(--accent)));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.awards-of { font-size: 0.75rem; color: var(--text-dim); }
.awards-bar {
  height: 0.5rem;
  border-radius: 999px;
  background: rgb(0 0 0 / 0.45);
  overflow: hidden;
  box-shadow: inset 0 1px 3px rgb(0 0 0 / 0.3);
}
.awards-bar-fill {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  border-radius: 999px;
  box-shadow: 0 0 0.5rem color-mix(in oklab, var(--accent-2) 50%, transparent);
  transition: width 600ms var(--ease-out);
}
.awards-mult { font-size: 0.75rem; font-weight: 700; color: var(--success); }
.awards-milestones { display: flex; gap: 0.3rem; flex-wrap: wrap; }
.milestone {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  font-size: 0.62rem;
  color: var(--text-mute);
  transition: all var(--dur);
}
.milestone-icon { flex: none; }
.milestone.is-earned {
  border-color: var(--accent-2);
  color: var(--accent-2);
  background: color-mix(in oklab, var(--accent-2) 18%, transparent);
  box-shadow: 0 0 0.5rem color-mix(in oklab, var(--accent-2) 25%, transparent);
}
.milestone.is-next { border-color: var(--purple); color: var(--purple); }
.awards-legend { font-size: 0.65rem; color: var(--text-mute); }

.awards-list { display: grid; gap: 0.5rem; }
.awards-group { display: grid; gap: 0.25rem; }

.award {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.55rem;
  border-radius: var(--radius-sm);
  border-left: 4px solid var(--border);
  background: color-mix(in oklab, var(--panel) 50%, transparent);
  font-size: 0.75rem;
  transition: background var(--dur), border-color var(--dur), transform var(--dur);
}
.award:hover { transform: translateX(2px); }
.award.is-unlocked {
  border-left-color: var(--accent-2);
  background: linear-gradient(90deg,
    color-mix(in oklab, var(--accent-2) 8%, transparent),
    color-mix(in oklab, var(--panel) 50%, transparent));
}
.award:not(.is-unlocked) { opacity: 0.55; }
.award-icon { font-size: 1.05rem; }
.award-reward { font-size: 0.65rem; font-weight: 800; color: var(--accent-2); }

/* ---- look ---- */

.theme-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr)); gap: 0.4rem; }

.theme {
  display: grid;
  gap: 0.35rem;
  padding: 0.5rem;
  border-radius: var(--radius-sm);
  border: 2px solid var(--border);
  background: color-mix(in oklab, var(--panel) 60%, transparent);
  text-align: left;
  transition: border-color var(--dur), box-shadow var(--dur), transform var(--dur),
              background var(--dur);
  overflow: hidden;
  position: relative;
}
.theme:hover {
  transform: translateY(-2px);
  border-color: color-mix(in oklab, var(--accent) 50%, var(--border));
  box-shadow: 0 4px 12px rgb(0 0 0 / 0.3);
}
.theme.is-active {
  border-color: var(--accent-2);
  box-shadow: 0 0 1rem color-mix(in oklab, var(--accent-2) 30%, transparent);
}
/* Active checkmark overlay. */
.theme.is-active::after {
  content: '✓';
  position: absolute;
  top: 0.3rem;
  right: 0.4rem;
  font-size: 0.7rem;
  font-weight: 800;
  color: var(--accent-2);
  text-shadow: 0 0 0.4rem color-mix(in oklab, var(--accent-2) 60%, transparent);
}
.theme-name { font-size: 0.7rem; font-weight: 700; }
.theme-swatches { display: flex; gap: 0.15rem; height: 1.1rem; border-radius: 4px; overflow: hidden; }
.theme-swatch { flex: 1; transition: transform var(--dur); }
.theme:hover .theme-swatch { transform: scaleY(1.15); }

.skin-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(4rem, 1fr)); gap: 0.4rem; }

.skin {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 0.2rem;
  padding: 0.5rem 0.25rem;
  border-radius: var(--radius-sm);
  border: 2px solid var(--border);
  background: color-mix(in oklab, var(--panel) 60%, transparent);
  transition: border-color var(--dur), box-shadow var(--dur), transform var(--dur),
              background var(--dur);
}
.skin:hover { transform: translateY(-2px); border-color: color-mix(in oklab, var(--accent) 50%, var(--border)); }
.skin-face {
  display: grid;
  place-items: center;
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 50%;
  border: 0.2rem solid;
  font-size: 1.1rem;
  transition: transform var(--dur) var(--ease-spring), filter var(--dur);
}
.skin-face > svg.art { width: 100%; height: 100%; }
.skin:hover .skin-face { transform: scale(1.12); }
.skin-price { font-size: 0.6rem; font-weight: 800; color: var(--accent-2); }
.skin-tag { font-size: 0.55rem; color: var(--success); font-weight: 700; }
.skin.is-locked .skin-face { filter: grayscale(0.85) brightness(0.7); }
.skin.is-active {
  border-color: var(--accent-2);
  box-shadow: 0 0 1rem color-mix(in oklab, var(--accent-2) 35%, transparent);
}
.skin.is-active::after {
  content: '✓';
  position: absolute;
  top: 0.15rem;
  right: 0.3rem;
  font-size: 0.65rem;
  font-weight: 800;
  color: var(--accent-2);
}

.toggle { display: flex; align-items: center; gap: 0.5rem; width: 100%; }
.toggle-track {
  position: relative;
  width: 2.5rem;
  height: 1.4rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgb(0 0 0 / 0.4);
  transition: background var(--dur), border-color var(--dur), box-shadow var(--dur);
}
.toggle-thumb {
  position: absolute;
  top: 0.1rem;
  left: 0.1rem;
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 50%;
  background: var(--text-mute);
  transition: translate var(--dur) var(--ease-spring), background var(--dur),
              box-shadow var(--dur);
}
.toggle.is-on .toggle-track {
  background: var(--success);
  border-color: var(--success);
  box-shadow: 0 0 0.75rem color-mix(in oklab, var(--success) 35%, transparent);
}
.toggle.is-on .toggle-thumb {
  translate: 1.05rem 0;
  background: #fff;
  box-shadow: 0 1px 4px rgb(0 0 0 / 0.3);
}
.toggle-label { font-size: 0.75rem; color: var(--text-dim); }

/* ---- settings ---- */

.stats { display: grid; gap: 0.1rem; }
.stat {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.4rem 0;
  border-bottom: 1px solid color-mix(in oklab, var(--border) 60%, transparent);
  font-size: 0.75rem;
  transition: background var(--dur);
}
.stat:hover { background: color-mix(in oklab, var(--panel-hi) 30%, transparent); }
.stat-label { color: var(--text-dim); }
.stat-value { font-weight: 700; font-variant-numeric: tabular-nums; }

.ascend-bar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  padding: 0.85rem;
  border-radius: var(--radius);
  border: 2px solid var(--purple);
  background: linear-gradient(135deg,
    color-mix(in oklab, var(--purple) 20%, transparent),
    color-mix(in oklab, var(--accent-2) 12%, transparent));
  box-shadow: 0 0 1.5rem color-mix(in oklab, var(--purple) 15%, transparent);
  position: relative;
  overflow: hidden;
}
.ascend-bar::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 40%, rgb(255 255 255 / 0.05) 50%, transparent 60%);
  background-size: 250% 100%;
  animation: shimmer-line 8s linear infinite;
  pointer-events: none;
}
.ascend-info { flex: 1; min-width: 10rem; position: relative; }
.ascend-title { font-size: 0.85rem; font-weight: 800; color: var(--purple); }
.ascend-sub { font-size: 0.68rem; color: var(--text-dim); line-height: 1.4; margin-top: 0.1rem; }

/* ============================================================= OVERLAYS === */

.toasts {
  position: fixed;
  z-index: 80;
  right: max(0.6rem, env(safe-area-inset-right));
  bottom: max(4rem, calc(env(safe-area-inset-bottom) + 4rem));
  display: grid;
  gap: 0.35rem;
  justify-items: end;
  pointer-events: none;
  max-width: min(20rem, 88vw);
}

.toast {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 0.75rem;
  border-radius: var(--radius-sm);
  border: 2px solid var(--border);
  background: color-mix(in oklab, var(--panel-hi) 95%, transparent);
  backdrop-filter: blur(0.5rem);
  -webkit-backdrop-filter: blur(0.5rem);
  box-shadow: var(--shadow);
  font-size: 0.75rem;
  font-weight: 700;
  animation: toast-in 350ms var(--ease-spring);
  pointer-events: auto;
}
@keyframes toast-in {
  from { transform: translateX(2rem) scale(0.9); opacity: 0; }
  to   { transform: translateX(0) scale(1); opacity: 1; }
}
.toast--good {
  border-color: var(--success);
  color: var(--success);
  box-shadow: var(--shadow), 0 0 1rem color-mix(in oklab, var(--success) 15%, transparent);
}
.toast--bad {
  border-color: var(--danger);
  color: var(--danger);
  box-shadow: var(--shadow), 0 0 1rem color-mix(in oklab, var(--danger) 15%, transparent);
}
.toast--gold {
  border-color: var(--accent-2);
  color: var(--accent-2);
  box-shadow: var(--shadow), 0 0 1rem color-mix(in oklab, var(--accent-2) 15%, transparent);
}
.toast--purple {
  border-color: var(--purple);
  color: var(--purple);
  box-shadow: var(--shadow), 0 0 1rem color-mix(in oklab, var(--purple) 15%, transparent);
}
.toast--achievement {
  border-color: var(--accent-2);
  box-shadow: var(--shadow), 0 0 1.5rem color-mix(in oklab, var(--accent-2) 20%, transparent);
  background: linear-gradient(135deg,
    color-mix(in oklab, var(--accent-2) 10%, var(--panel-hi)),
    color-mix(in oklab, var(--purple) 6%, var(--panel-hi)));
}
.toast--offline {
  border-color: var(--info);
  box-shadow: var(--shadow), 0 0 1rem color-mix(in oklab, var(--info) 15%, transparent);
}
.toast-icon { font-size: 1.35rem; line-height: 1; }
.toast-body { display: grid; }
.toast-title { font-size: 0.75rem; font-weight: 800; }
.toast-sub { font-size: 0.62rem; font-weight: 400; color: var(--text-dim); }

/* ---- tooltip ---- */

.tooltip {
  position: fixed;
  z-index: 90;
  display: none;
  width: max-content;
  max-width: min(18rem, 92vw);
  padding: 0.65rem 0.75rem;
  border-radius: var(--radius-sm);
  border: 2px solid var(--accent);
  background: color-mix(in oklab, var(--panel-hi) 97%, transparent);
  backdrop-filter: blur(0.75rem);
  -webkit-backdrop-filter: blur(0.75rem);
  box-shadow: var(--shadow-lg);
  font-size: 0.72rem;
  pointer-events: none;
}
.tooltip.is-visible {
  display: block;
  animation: tip-in 180ms var(--ease-out);
}
@keyframes tip-in {
  from { transform: translateY(0.35rem) scale(0.97); opacity: 0; }
  to   { transform: translateY(0) scale(1); opacity: 1; }
}

.tip-head { display: flex; gap: 0.4rem; margin-bottom: 0.35rem; align-items: center; }
.tip-icon { font-size: 1.15rem; line-height: 1; }
.tip-title { font-weight: 800; color: var(--accent); font-size: 0.78rem; }
.tip-sub { font-size: 0.65rem; color: var(--text-mute); font-style: italic; line-height: 1.4; }
.tip-rows { display: grid; gap: 0.1rem; }
.tip-row {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.08rem 0;
  border-bottom: 1px dotted color-mix(in oklab, var(--border) 40%, transparent);
}
.tip-row:last-child { border-bottom: none; }
.tip-label { color: var(--text-dim); }
.tip-value { font-weight: 700; text-align: right; }
.tip-value--good { color: var(--success); }
.tip-value--bad { color: var(--danger); }
.tip-value--gold { color: var(--accent-2); }
.tip-value--purple { color: var(--purple); }
.tip-note { color: var(--text-mute); font-size: 0.65rem; font-style: italic; }
.tip-foot {
  margin-top: 0.35rem;
  padding-top: 0.35rem;
  border-top: 1px solid color-mix(in oklab, var(--accent) 25%, transparent);
  font-size: 0.65rem;
  color: var(--text-mute);
  font-style: italic;
}

/* ---- dialog ---- */

.dialog-layer {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: none;
  place-items: center;
  padding: 1rem;
  background: rgb(0 0 0 / 0.75);
  backdrop-filter: blur(0.3rem);
  -webkit-backdrop-filter: blur(0.3rem);
}
.dialog-layer.is-open { display: grid; }

.dialog {
  width: min(24rem, 100%);
  max-height: 85dvh;
  display: flex;
  flex-direction: column;
  border-radius: var(--radius);
  border: 2px solid var(--accent);
  background: linear-gradient(180deg, var(--panel-hi), var(--panel));
  box-shadow: var(--shadow-lg), 0 0 2rem color-mix(in oklab, var(--accent) 15%, transparent);
  animation: dialog-in 280ms var(--ease-spring);
}
@keyframes dialog-in {
  from { transform: translateY(1rem) scale(0.95); opacity: 0; }
  to   { transform: translateY(0) scale(1); opacity: 1; }
}
.dialog-head { display: flex; align-items: center; gap: 0.5rem; padding: 0.85rem 1rem 0.4rem; }
.dialog-icon { font-size: 1.3rem; }
.dialog-title { font-size: 1rem; color: var(--accent); font-weight: 800; }
.dialog-body {
  padding: 0 1rem 0.75rem;
  display: grid;
  gap: 0.5rem;
  font-size: 0.78rem;
  line-height: 1.5;
  overflow-y: auto;
}
.dialog-body .keep { color: var(--success); font-size: 0.72rem; }
.dialog-body .lose { color: var(--danger); font-size: 0.72rem; }
.prompt-body { display: grid; gap: 0.5rem; }
.dialog-actions { display: flex; gap: 0.4rem; justify-content: flex-end; padding: 0.5rem 1rem 0.85rem; }
.dialog-btn {
  padding: 0.45rem 0.9rem;
  border-radius: var(--radius-sm);
  font-size: 0.78rem;
  font-weight: 700;
  border: 2px solid transparent;
  transition: transform var(--dur), filter var(--dur), box-shadow var(--dur);
}
.dialog-btn:active { transform: scale(0.96); }
.dialog-btn.primary {
  background: linear-gradient(180deg, var(--accent-2), color-mix(in oklab, var(--accent-2) 75%, var(--accent)));
  color: #1a1a2e;
  box-shadow: 0 2px 8px color-mix(in oklab, var(--accent-2) 30%, transparent);
}
.dialog-btn.primary:hover { filter: brightness(1.1); box-shadow: 0 4px 16px color-mix(in oklab, var(--accent-2) 45%, transparent); }
.dialog-btn.danger {
  background: linear-gradient(180deg, var(--danger), color-mix(in oklab, var(--danger) 75%, black));
  color: #fff;
  box-shadow: 0 2px 8px color-mix(in oklab, var(--danger) 30%, transparent);
}
.dialog-btn.danger:hover { filter: brightness(1.12); }
.dialog-btn.ghost {
  background: color-mix(in oklab, var(--panel-deep) 70%, transparent);
  color: var(--text-dim);
}
.dialog-btn.ghost:hover { color: var(--text); background: color-mix(in oklab, var(--panel-deep) 90%, transparent); }

.input {
  width: 100%;
  padding: 0.45rem 0.5rem;
  border-radius: var(--radius-sm);
  border: 2px solid var(--border);
  background: color-mix(in oklab, var(--panel-deep) 70%, transparent);
  font-size: 0.75rem;
  resize: vertical;
  transition: border-color var(--dur), box-shadow var(--dur);
}
.input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0.75rem color-mix(in oklab, var(--accent) 25%, transparent);
}

/* ---- pause ---- */

.pause-screen {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: grid;
  place-items: center;
  background: rgb(0 0 0 / 0.8);
  backdrop-filter: blur(0.5rem);
  -webkit-backdrop-filter: blur(0.5rem);
}
.pause-card {
  display: grid;
  gap: 0.75rem;
  justify-items: center;
  padding: 1.75rem;
  border-radius: var(--radius);
  border: 2px solid var(--accent);
  background: linear-gradient(180deg, var(--panel-hi), var(--panel));
  box-shadow: var(--shadow-lg), 0 0 2rem color-mix(in oklab, var(--accent) 20%, transparent);
  text-align: center;
  font-size: 0.8rem;
  animation: dialog-in 300ms var(--ease-spring);
}

/* ============================================================== WIDE ==== */

@media (min-width: 48rem) {
  #stage { border-inline: 1px solid color-mix(in oklab, var(--border) 50%, transparent); }
  .cookie { width: min(20rem, 30dvh); }
}

@media (max-width: 22rem) {
  .hud-rate--wide { display: none; }
  .garden { grid-template-columns: repeat(2, 1fr); }
  .ability-name { display: none; }
}