/* Shared enamel, honey-gold and paper finishes. Neighbouring hue stops keep
   highlights colourful; only transform animates, never a gold-to-blue blend. */
:root {
  --blue-top: #508fbe;
  --blue: #3c76b7;
  --blue-deep: #465ba1;
  --blue-edge: #315b91;
  --blue-base: #2c4a7e;
  --finish-paper: linear-gradient(
    145deg,
    #fffef9 0%,
    #fffaf0 58%,
    #fff0da 100%
  );
  --finish-honey: linear-gradient(
    155deg,
    #fff3b2 0%,
    #ffe289 42%,
    #f5c363 76%,
    #eeb37a 100%
  );
  --finish-gold-edge: #c99745;
}
.home-action .primary {
  --blue-top: #1799b3;
  --blue: #147ea9;
  --blue-deep: #3063a2;
  --blue-edge: #196185;
  --blue-base: #224d76;
}
.primary,
.secondary,
.small-btn {
  transition: transform 150ms ease;
}
.primary {
  background: linear-gradient(
    160deg,
    var(--blue-top) 0%,
    var(--blue) 48%,
    var(--blue-deep) 100%
  );
  box-shadow:
    inset 0 0 0 3px #bfebff55,
    inset 0 2px 0 #ffffff99,
    inset 0 -2px 0 #26477a44,
    0 5px 0 var(--blue-base),
    0 9px 14px #23517d24;
}
.secondary {
  background: linear-gradient(150deg, #fffef9 0%, #fff5df 60%, #f8dfbd 100%);
  border-color: #d7b98a;
  box-shadow:
    inset 0 0 0 3px #fffefa,
    inset 0 2px 0 #fff,
    0 5px 0 #c9ab7e,
    0 8px 12px #9a6e3020;
}
.inventory-summary,
.icon-btn {
  background: var(--finish-paper);
  border-color: #dcc8a6;
  box-shadow:
    inset 0 2px 0 #ffffff,
    inset 0 -1px 0 #ebcca655,
    0 2px 0 #ccb59066;
}
.coin-pill {
  background: var(--finish-honey);
  border-color: #d2a348;
  color: #594222;
  box-shadow:
    inset 0 0 0 2px #fff8cc99,
    inset 0 2px 0 #fffce8,
    0 2px 0 #c2954966;
}
.theme-card,
.level-card,
.award,
.tool-card {
  background: var(--finish-paper);
  border-color: #ddc9aa;
  box-shadow:
    inset 0 2px 0 #fff,
    inset 0 -1px 0 #edc99466,
    0 3px 0 #e4cdaa77,
    0 8px 16px #a16b2b0a;
}
.theme-card,
.level-card.final {
  background:
    radial-gradient(ellipse at 100% 0%, var(--tint) 0%, transparent 65%),
    var(--finish-paper);
}
.theme-card .theme-symbol {
  background: linear-gradient(
    145deg,
    #fffdf4 0%,
    var(--tint) 48%,
    var(--tint) 100%
  );
  box-shadow:
    inset 0 2px 0 #ffffffcc,
    inset 0 -2px 0 #c7ae7a22,
    0 2px 0 #c7ae7a33;
}
.progress > span {
  background: linear-gradient(
    100deg,
    var(--theme, var(--blue-top)),
    var(--theme, var(--blue)),
    var(--theme, var(--blue-deep))
  );
  box-shadow: inset 0 1px 0 #ffffff66;
}
.award.unlocked .award-symbol {
  background: var(--finish-honey);
  box-shadow:
    inset 0 2px 0 #fffbe0,
    0 3px 0 #ce9d4666;
}
.upgrade-card {
  background: linear-gradient(120deg, #fff3ce 0%, #ffe2cb 48%, #f3dcf0 100%);
}
/* Hues blend in a perceptual colour space where supported. The explicit
   cream/gold/cool-blue stops above remain the fallback for older browsers. */
@supports (color: color-mix(in oklch, white, blue)) {
  .theme-card .theme-symbol {
    background: linear-gradient(
      145deg,
      #fffdf4 0%,
      var(--tint) 48%,
      color-mix(in oklch, var(--tint) 88%, var(--theme)) 100%
    );
  }
  .progress > span {
    background: linear-gradient(
      100deg,
      color-mix(in oklch, var(--theme, var(--blue)) 80%, #85d7d7),
      var(--theme, var(--blue)) 55%,
      color-mix(in oklch, var(--theme, var(--blue)) 88%, #5a63b5)
    );
  }
}
body:not(.playing) .bottom-nav {
  isolation: isolate;
  background: var(--finish-honey);
  border-color: #efd09a;
  box-shadow:
    inset 0 2px 0 #fffbe0,
    inset 0 -2px 0 #dda45166,
    0 3px 0 var(--finish-gold-edge),
    0 8px 22px #87502026;
}
body:not(.playing) .bottom-nav::before {
  content: "";
  position: absolute;
  inset: 4px 18px auto;
  height: 2px;
  border-radius: 50%;
  background: linear-gradient(
    90deg,
    #fff8da00,
    #fffbe8 28%,
    #fff3c4 72%,
    #fff8da00
  );
  pointer-events: none;
}
body:not(.playing) .bottom-nav button {
  position: relative;
  background: linear-gradient(155deg, #fff8d9 0%, #ffe9a2 48%, #f7ca79 100%);
  border: 1px solid #dcb46d;
  color: #53432d;
  box-shadow:
    inset 0 2px 0 #fffce8,
    inset 0 0 0 1px #fff5d299,
    0 2px 0 #c2944966;
  transition: transform 130ms ease;
}
body:not(.playing) .bottom-nav button::after {
  content: "";
  position: absolute;
  inset: 3px 12px auto;
  height: 1px;
  background: linear-gradient(90deg, #ffffff00, #ffffffaa, #ffffff00);
  pointer-events: none;
}
body:not(.playing) .bottom-nav button.active {
  background: linear-gradient(155deg, #117a9e 0%, #1473ad 48%, #3657a3 100%);
  border-color: #286193;
  color: #fff;
  box-shadow:
    inset 0 2px 0 #a0edee99,
    inset 0 0 0 2px #76c5e055,
    0 3px 0 #2c4b7a,
    0 4px 8px #4662a133;
}
@media (hover: hover) and (pointer: fine) {
  :where(html:not(.touch-preview)) body:not(.playing) .bottom-nav button:hover {
    transform: translateY(-2px);
  }
  :where(html:not(.touch-preview)) .theme-card:hover {
    box-shadow:
      inset 0 2px 0 #fff,
      0 5px 0 #dfbf9277,
      0 10px 22px #a16b2b18;
  }
}
body:not(.playing) .bottom-nav button:active {
  transform: translateY(2px);
  box-shadow:
    inset 0 1px 0 #fff8d288,
    0 1px 0 #a87d45;
}
@media (max-width: 760px) {
  body:not(.playing) .bottom-nav {
    border-top-color: #fff5c4;
    box-shadow:
      inset 0 2px 0 #fffbe0,
      inset 0 -3px 0 #ddaa4b55,
      0 -3px 0 #b88943,
      0 -7px 18px #92612422;
  }
  body:not(.playing) .bottom-nav button {
    border-width: 2px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .primary,
  .secondary,
  .small-btn,
  body:not(.playing) .bottom-nav button {
    transition: none;
  }
}