/* Bloom Brigade UI. Every size comes from --u = 1% of the 16:9 stage height (set by src/render/view.js),
   never from the window width. HUD and dock are pinned to the real window corners (plus the safe area). */
@font-face {
  font-family: 'Fredoka';
  src: url(../assets/fonts/fredoka-latin-600.woff2) format('woff2');
  font-weight: 600;
  font-display: swap;
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215;
}
@font-face {
  font-family: 'Fredoka';
  src: url(../assets/fonts/fredoka-latin-ext-600.woff2) format('woff2');
  font-weight: 600;
  font-display: swap;
  unicode-range: U+0100-024F, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Fredoka';
  src: url(../assets/fonts/fredoka-latin-700.woff2) format('woff2');
  font-weight: 700;
  font-display: swap;
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215;
}
@font-face {
  font-family: 'Fredoka';
  src: url(../assets/fonts/fredoka-latin-ext-700.woff2) format('woff2');
  font-weight: 700;
  font-display: swap;
  unicode-range: U+0100-024F, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --u: 4.5px;
  --ink: #3a2416;
  --cream: #fff4dc;
  --sl: env(safe-area-inset-left, 0px);
  --sr: env(safe-area-inset-right, 0px);
  --st: env(safe-area-inset-top, 0px);
  --sb: env(safe-area-inset-bottom, 0px);
  --font: 'Fredoka', 'Baloo 2', 'Arial Rounded MT Bold', system-ui, sans-serif;
}
* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}
html,
body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: #7cc444;
  color: var(--ink);
  font-family: var(--font);
  font-weight: 700;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
  overscroll-behavior: none;
}
#game {
  position: fixed;
  left: 0;
  top: 0;
  display: block;
  touch-action: none;
}
#ui {
  position: fixed;
  inset: 0;
  pointer-events: none;
}
#ui .live {
  pointer-events: auto;
}
button {
  font-family: var(--font);
  font-weight: 700;
  color: var(--ink);
  border: 0;
  padding: 0;
  background: none;
  cursor: pointer;
  touch-action: manipulation;
}
button:disabled {
  cursor: default;
}
img {
  -webkit-user-drag: none;
  user-select: none;
}

/* outlined text like the design: white or cream letters with a thick brown outline */
.ol {
  --o: calc(var(--u) * 0.42);
  color: #fff;
  text-shadow:
    calc(var(--o) * 1) 0 0 var(--ink),
    calc(var(--o) * 0.924) calc(var(--o) * 0.383) 0 var(--ink),
    calc(var(--o) * 0.707) calc(var(--o) * 0.707) 0 var(--ink),
    calc(var(--o) * 0.383) calc(var(--o) * 0.924) 0 var(--ink),
    0 calc(var(--o) * 1) 0 var(--ink),
    calc(var(--o) * -0.383) calc(var(--o) * 0.924) 0 var(--ink),
    calc(var(--o) * -0.707) calc(var(--o) * 0.707) 0 var(--ink),
    calc(var(--o) * -0.924) calc(var(--o) * 0.383) 0 var(--ink),
    calc(var(--o) * -1) 0 0 var(--ink),
    calc(var(--o) * -0.924) calc(var(--o) * -0.383) 0 var(--ink),
    calc(var(--o) * -0.707) calc(var(--o) * -0.707) 0 var(--ink),
    calc(var(--o) * -0.383) calc(var(--o) * -0.924) 0 var(--ink),
    0 calc(var(--o) * -1) 0 var(--ink),
    calc(var(--o) * 0.383) calc(var(--o) * -0.924) 0 var(--ink),
    calc(var(--o) * 0.707) calc(var(--o) * -0.707) 0 var(--ink),
    calc(var(--o) * 0.924) calc(var(--o) * -0.383) 0 var(--ink),
    0 calc(var(--u) * 0.9) 0 rgba(58, 36, 22, 0.35);
}
.ink {
  color: var(--ink);
  font-weight: 700;
}

/* 9-slice art: caps and corners keep their shape, only the middle stretches (never deform the art) */
.nine {
  isolation: isolate;
  background: none !important;
}
.nine::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  border-style: solid;
  border-width: var(--bw);
  border-image-slice: var(--slice) fill;
  border-image-width: var(--bw);
  border-image-repeat: stretch;
}
/* art plates: the image is the background, the text sits on top */
.plate {
  position: absolute;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
}
/* HUD plates sit on the foliage with a small solid shadow */
#hud .plate {
  filter: drop-shadow(0 calc(var(--u) * 0.5) 0 rgba(90, 50, 20, 0.35));
}

/* ---------------------------------------------------------------- boot + rotate */
#boot {
  position: fixed;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 3vmin;
  background: #7cc444;
  z-index: 50;
}
#boot img {
  width: min(60vw, 80vh);
}
#boot .bar {
  width: min(40vw, 50vh);
  height: 2.2vmin;
  border: 0.5vmin solid var(--ink);
  border-radius: 99px;
  background: #fff4dc;
  overflow: hidden;
}
#boot .bar i {
  display: block;
  height: 100%;
  width: 0;
  background: #7fd84a;
  transition: width 0.2s;
}
/* rotate screen (portrait phones): logo, the rotating-phone illustration and the message on a cream pill */
#rotate {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 60;
  background:
    radial-gradient(
      110% 70% at 50% 42%,
      rgba(214, 248, 160, 0.9) 0%,
      rgba(150, 214, 96, 0.82) 50%,
      rgba(78, 150, 46, 0.9) 100%
    ),
    url(../assets/env/fol1.webp) center / 380px repeat;
  place-content: center;
  justify-items: center;
  gap: 5vmin;
  text-align: center;
}
#rotate .logo {
  width: min(72vw, 340px);
  filter: drop-shadow(0 4px 0 rgba(58, 36, 22, 0.25));
}
#rotate .ph {
  width: min(80vw, 400px);
  animation: phbob 2.8s ease-in-out infinite;
}
#rotate p {
  margin: 0 6vw;
  padding: 3.2vmin 7vmin;
  border-radius: 999px;
  background: #fff4dc;
  box-shadow:
    0 0 0 4px var(--ink),
    0 7px 0 4px rgba(58, 36, 22, 0.3);
  color: var(--ink);
  font: 700 clamp(22px, 6.6vw, 34px) / 1.2 var(--font);
}
@keyframes phbob {
  50% {
    transform: translateY(-3%) rotate(-3deg);
  }
}

@media (orientation: portrait) and (max-width: 1000px) {
  #rotate {
    display: grid;
  }
}

/* ---------------------------------------------------------------- top HUD */
#hud {
  position: absolute;
  inset: 0;
}
#hud[hidden],
#hud [hidden],
#ui [hidden] {
  display: none !important;
}
.hud-left {
  position: absolute;
  left: calc(var(--hx) + var(--sl) + var(--u) * 2.4);
  top: calc(var(--st) + var(--u) * 1.1);
}
.hud-right {
  position: absolute;
  right: calc(var(--hx) + var(--sr) + var(--u) * 1.8);
  top: calc(var(--st) + var(--u) * 0.5);
  display: flex;
  align-items: flex-start;
  gap: calc(var(--u) * 1.1);
}
#wave-chip {
  left: calc(var(--u) * 2.4);
  top: calc(var(--u) * 0.2);
  width: calc(var(--u) * 25);
  height: calc(var(--u) * 7);
  background-image: url(../assets/ui/wave-plate.webp);
  justify-content: center;
  font-size: max(12px, calc(var(--u) * 3.9));
  font-weight: 700;
}
#wave-chip span {
  margin-top: calc(var(--u) * -0.3);
}
#upnext {
  left: calc(var(--u) * 28.4);
  top: 0;
  width: auto;
  min-width: calc(var(--u) * 31);
  height: calc(var(--u) * 7);
  background-image: url(../assets/ui/upnext-pill.webp);
  padding: 0 calc(var(--u) * 2.2);
  gap: calc(var(--u) * 1);
  font-size: max(11px, calc(var(--u) * 3.2));
  white-space: nowrap;
}
#upnext .icons {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 0.8);
}
#upnext .icons img {
  height: calc(var(--u) * 5.4);
  width: auto;
}
#goal {
  left: 0;
  top: calc(var(--u) * 8.4);
  width: auto;
  min-width: calc(var(--u) * 39.3);
  max-width: calc(var(--u) * 80);
  height: calc(var(--u) * 6);
  background-image: url(../assets/ui/goal-pill.webp);
  padding: 0 calc(var(--u) * 1.5) 0 calc(var(--u) * 8.2);
  font-size: max(11px, calc(var(--u) * 3.1));
  white-space: nowrap;
}
#goal.pulse {
  animation: goalpop 0.5s;
}
@keyframes goalpop {
  40% {
    transform: scale(1.06);
  }
}
#goal {
  display: none !important;
} /* the goal pill is gone */
#coins {
  position: absolute;
  left: calc(50% + var(--u) * 7.3);
  top: calc(var(--st) + var(--u) * 1.4);
  width: auto;
  min-width: calc(var(--u) * 17.8);
  height: calc(var(--u) * 7);
  background-image: url(../assets/ui/coin-pill.webp);
  justify-content: center;
  padding-left: 40%;
  font-size: max(12px, calc(var(--u) * 4.1));
  letter-spacing: 0.1em;
}
#coins.bump {
  animation: coinbump 0.2s;
}
@keyframes coinbump {
  40% {
    transform: scale(1.06);
    filter: brightness(1.15);
  }
}
/* the last flying coin: bigger pop and a warm glint on the counter */
#coins.bigbump {
  animation: coinbig 0.45s cubic-bezier(0.2, 1.4, 0.4, 1);
}
@keyframes coinbig {
  30% {
    transform: scale(1.08);
    filter: brightness(1.3) drop-shadow(0 0 calc(var(--u) * 1.5) rgba(255, 214, 90, 0.9));
  }
}
.reduced #coins.bump,
.reduced #coins.bigbump {
  animation: none;
}
/* fence health: wooden capsule frame (image) with the fence badge on the left; the fill is a glossy, glowing bar */
#fence {
  position: relative;
  width: calc(var(--u) * 52);
  height: calc(var(--u) * 8.3);
}
#fence .track {
  position: absolute;
  left: calc(var(--u) * 7.85);
  right: calc(var(--u) * 1.55);
  top: calc(var(--u) * 2.4);
  bottom: calc(var(--u) * 2.3);
  border-radius: 99px;
  overflow: hidden;
}
#fence .fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 100%;
  border-radius: 99px;
  background: linear-gradient(#c8ff8a, #7fdc3e 45%, #49ad22 100%);
  box-shadow:
    0 0 calc(var(--u) * 1.2) rgba(150, 255, 90, 0.75),
    inset 0 calc(var(--u) * -0.5) 0 rgba(30, 90, 10, 0.35);
  transition: width 0.35s cubic-bezier(0.2, 0.8, 0.3, 1);
}
#fence .fill::before {
  content: '';
  position: absolute;
  left: calc(var(--u) * 1);
  right: calc(var(--u) * 1);
  top: 14%;
  height: 28%;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.5);
}
#fence .fill::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 99px;
  background: linear-gradient(100deg, transparent 0 40%, rgba(255, 255, 255, 0.45) 50%, transparent 60% 100%) no-repeat;
  background-size: 40% 100%;
  animation: fencesheen 3.2s ease-in-out infinite;
}
@keyframes fencesheen {
  0%,
  55% {
    background-position: -60% 0;
  }
  100% {
    background-position: 160% 0;
  }
}
#fence .vine {
  display: none;
}
#fence .num {
  position: absolute;
  left: calc(var(--u) * 7.85 + (100% - var(--u) * 9.4) / 2);
  top: 50%;
  transform: translate(-50%, -52%);
  text-align: center;
  font-size: max(12px, calc(var(--u) * 3.4));
  letter-spacing: 0.04em;
  font-weight: 700;
  white-space: nowrap;
}
#fence.low .fill {
  background: linear-gradient(#ffe39a, #ffb23e 45%, #f08a1e 100%);
  box-shadow:
    0 0 calc(var(--u) * 1.2) rgba(255, 190, 80, 0.8),
    inset 0 calc(var(--u) * -0.5) 0 rgba(140, 60, 0, 0.3);
}

#fence.hit {
  animation: fencehit 0.3s;
}
@keyframes fencehit {
  25% {
    transform: translateX(calc(var(--u) * -0.5));
  }
  60% {
    transform: translateX(calc(var(--u) * 0.4));
  }
}
#btn-pause {
  position: relative;
  width: calc(var(--u) * 7.3);
  height: calc(var(--u) * 7.3);
  margin-top: calc(var(--u) * 0.5);
  background: url(../assets/ui/pause.webp) center / contain no-repeat;
}

/* boss strip (35.3% x 9% of the stage, portrait 6% x 9.6% on its left end; the name never runs under the portrait) */
#boss-strip {
  left: calc(var(--u) * 1.2);
  top: calc(var(--u) * 8.4);
  width: calc(var(--u) * 62.8);
  height: calc(var(--u) * 10.4);
  padding: 0 calc(var(--u) * 4) 0 calc(var(--u) * 14);
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  gap: calc(var(--u) * 0.6);
}
#boss-strip[hidden] {
  display: none;
}
#boss-strip .bcrown {
  position: absolute;
  left: calc(var(--u) * 3.6);
  top: calc(var(--u) * -3.4);
  width: calc(var(--u) * 5.6);
  transform: rotate(-12deg);
  filter: drop-shadow(0 calc(var(--u) * 0.3) 0 rgba(58, 36, 22, 0.45));
}
#boss-strip .bb i::after {
  content: '';
  position: absolute;
  left: 6%;
  right: 6%;
  top: 16%;
  height: 22%;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.55);
}
#boss-strip .bp {
  position: absolute;
  left: calc(var(--u) * 0.2);
  top: calc(var(--u) * -1.2);
  width: calc(var(--u) * 12.6);
  height: calc(var(--u) * 11.6);
  filter: drop-shadow(0 calc(var(--u) * 0.3) 0 rgba(58, 36, 22, 0.5));
  object-fit: contain;
}
#boss-strip .bn {
  display: block;
  margin-right: calc(var(--u) * 8);
  font-size: calc(var(--u) * 3.4);
  line-height: 1;
  white-space: nowrap;
}
#boss-strip .bb {
  position: relative;
  height: calc(var(--u) * 3);
  margin-right: calc(var(--u) * 8);
  border: calc(var(--u) * 0.45) solid var(--ink);
  border-radius: 99px;
  background: #3a2a20;
  overflow: hidden;
}
#boss-strip .bb i {
  position: absolute;
  inset: 0 auto 0 0;
  background: linear-gradient(#ffe979, #f5a623);
  border-radius: 99px;
  transition: width 0.2s;
}
#boss-strip .bpct {
  position: absolute;
  right: calc(var(--u) * 3.4);
  bottom: calc(var(--u) * 1.5);
  font-size: calc(var(--u) * 4);
  line-height: 1;
}

/* ---------------------------------------------------------------- dock */

/* compost bin: appears over the dock while dragging */
#bin {
  position: absolute;
  left: 50%;
  bottom: calc(var(--sb) + var(--u) * 17);
  transform: translateX(-50%) scale(0.6);
  width: calc(var(--u) * 13);
  height: calc(var(--u) * 13);
  background: url(../assets/ui/ic-compost.webp) center / contain no-repeat;
  opacity: 0;
  transition:
    transform 0.15s,
    opacity 0.15s;
  pointer-events: none;
}
#bin.show {
  opacity: 1;
  transform: translateX(-50%) scale(1);
}
#bin.hot {
  transform: translateX(-50%) scale(1.18);
  filter: drop-shadow(0 0 calc(var(--u) * 1.5) #ffe066);
}

/* toasts and banners */
#toast {
  position: absolute;
  left: 50%;
  top: calc(var(--st) + var(--u) * 17);
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--u) * 1);
}
#toast div {
  padding: calc(var(--u) * 1) calc(var(--u) * 3);
  background: url(../assets/ui/btn-pill.webp) center / 100% 100%;
  font-size: calc(var(--u) * 3.2);
  font-weight: 700;
  white-space: nowrap;
  animation: toastin 0.25s;
}
@keyframes toastin {
  from {
    transform: translateY(calc(var(--u) * -2)) scale(0.85);
    opacity: 0;
  }
}
#banner {
  position: absolute;
  left: var(--stage-x);
  width: var(--stage-w);
  top: calc(var(--stage-y) + var(--stage-h) * 0.34);
  text-align: center;
  opacity: 0;
  transition: opacity 0.3s;
}
#banner.show {
  opacity: 1;
}
#banner .b1 {
  font-size: calc(var(--u) * 9);
  font-weight: 700;
}
#banner .b2 {
  font-size: calc(var(--u) * 3.6);
  font-weight: 700;
  margin-top: calc(var(--u) * 0.6);
}

/* ---------------------------------------------------------------- title */
#title {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
/* soft green vignette: title, Hazel and Play stay the brightest things; static, never a flash */
#title::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 70% 75% at 42% 48%, rgba(15, 58, 26, 0) 45%, rgba(15, 58, 26, 0.5) 100%);
}
#title[hidden] {
  display: none;
}
#title .blur {
  display: none;
}
#title .scene {
  position: absolute;
  left: var(--stage-x);
  top: var(--stage-y);
  width: var(--stage-w);
  height: var(--stage-h);
}
#title .logo {
  position: absolute;
  left: calc(var(--u) * 19.9);
  top: 1.6%;
  width: 37.4%;
}
#title .hazel {
  position: absolute;
  left: calc(var(--vw) / 2 + var(--u) * 6.2 - var(--stage-x));
  top: 21.3%;
  height: 59.5%;
  transform-origin: 50% 100%;
  animation: hazelidle 3s ease-in-out infinite;
}
@keyframes hazelidle {
  50% {
    transform: rotate(-1.2deg) scaleY(1.015);
  }
}
#title .play {
  position: absolute;
  left: calc(var(--u) * 28.6);
  top: 45.2%;
  width: 27.2%;
  height: 18.1%;
  background: url(../assets/ui/btn-play.webp) center / 100% 100%;
  display: grid;
  place-items: center;
  font-size: calc(var(--u) * 9.5);
  font-weight: 700;
  animation: playbreath 1.8s ease-in-out infinite;
}
@keyframes playbreath {
  50% {
    transform: scale(1.03);
  }
}
#title .play:active {
  transform: scale(0.95);
}
#title .cont {
  position: absolute;
  left: calc(var(--u) * 29.5);
  top: 65.6%;
  width: 26.6%;
  height: 7.7%;
  background: url(../assets/ui/btn-pill.webp) center / 100% 100%;
  display: grid;
  place-items: center;
  font-size: calc(var(--u) * 3.8);
  font-weight: 700;
}
#title .cont[hidden] {
  display: none;
}
#title .rb {
  position: absolute;
  top: 75.5%;
  width: 9.9%;
  height: 19.7%;
}
/* Continue reads as a real button: a play badge on the left and a warm rim glow */
#title .cont .art::before {
  content: '';
  position: absolute;
  left: calc(var(--u) * 1.4);
  top: 50%;
  width: calc(var(--u) * 3.8);
  height: calc(var(--u) * 3.8);
  transform: translateY(-50%);
  background: url(../assets/ui/ic2-play.webp) center / contain no-repeat;
}
#title .cont .art {
  padding-left: calc(var(--u) * 5.4);
  padding-right: calc(var(--u) * 1.5);
  white-space: nowrap;
  overflow: hidden;
  box-shadow:
    0 0 0 calc(var(--u) * 0.35) rgba(232, 163, 61, 0.9),
    0 0 calc(var(--u) * 2) rgba(255, 210, 110, 0.55);
  border-radius: 99px;
}
/* secondary buttons get weight: a soft ground shadow */
#title .cont,
#title .rb {
  filter: drop-shadow(0 calc(var(--u) * 0.7) calc(var(--u) * 0.5) rgba(30, 50, 15, 0.45));
}
#title .rb .sq {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  margin: 0 auto;
  height: 76%;
  aspect-ratio: 1;
  background: url(../assets/ui/btn-medal.webp) center / 100% 100%;
  display: grid;
  place-items: center;
}
#title .rb .sq img {
  width: 66%;
  margin-top: -12%;
}
#title .rb .tag {
  position: absolute;
  left: -2%;
  right: -2%;
  bottom: 0;
  height: 30%;
  background: url(../assets/ui/tag-cream.webp) center / 100% 100%;
  display: grid;
  place-items: center;
  font-size: calc(var(--u) * 3.5);
  font-weight: 700;
}
#title .rb.r1 {
  left: calc(var(--u) * 24);
}
#title .rb.r2 {
  left: calc(var(--u) * 43.6);
}
#title .rb.r3 {
  left: calc(var(--u) * 63.7);
}
#title .tcoins {
  position: absolute;
  right: calc(var(--hx) + var(--sr) + var(--u) * 29.9);
  top: calc(var(--st) + var(--u) * 5.8);
  width: calc(var(--u) * 27.7);
  height: calc(var(--u) * 8.5);
  background: url(../assets/ui/coin-pill.webp) center / 100% 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-left: 38%;
  font-size: calc(var(--u) * 5.2);
  font-weight: 700;
}
#title .gear {
  position: absolute;
  right: calc(var(--hx) + var(--sr) + var(--u) * 4.4);
  top: calc(var(--st) + var(--u) * 3);
  width: calc(var(--u) * 12.8);
  height: calc(var(--u) * 12.8);
  background: url(../assets/ui/btn-gear.webp) center / contain no-repeat;
}

/* less motion */
.reduced * {
  animation: none !important;
  transition: none !important;
}

/* ---------------------------------------------------------------- 9-slice settings per art piece
   --sl = slice in source px (top right bottom left), --bw = drawn cap width in box units (keeps the cap aspect) */
#wave-chip::before {
  border-image-source: url(../assets/ui/wave-plate.webp);
}
#wave-chip {
  --slice: 0 80;
  --bw: 0 calc(var(--u) * 3.7);
}
#upnext::before {
  border-image-source: url(../assets/ui/upnext-pill.webp);
}
#upnext {
  --slice: 0 62;
  --bw: 0 calc(var(--u) * 3.5);
}
#goal::before {
  border-image-source: url(../assets/ui/goal-pill.webp);
}
/* boss strip: plum wood + gold rim (painted art), so the boss moment stands apart from the cream HUD */
#boss-strip::before {
  border-image-source: url(../assets/ui/boss-strip.webp);
}
#goal,
#boss-strip {
  --slice: 0 62 0 125;
  --bw: 0 calc(var(--u) * 3) 0 calc(var(--u) * 6);
}
#boss-strip {
  --slice: 0 110;
  --bw: 0 calc(var(--u) * 7.3);
}
#coins::before {
  border-image-source: url(../assets/ui/coin-pill.webp);
}
#coins {
  --slice: 0 70 0 149;
  --bw: 0 calc(var(--u) * 3.2) 0 calc(var(--u) * 6.8);
  padding-left: calc(var(--u) * 6.8) !important;
  padding-right: calc(var(--u) * 2) !important;
}
#title .tcoins {
  border-style: solid;
  border-width: 0 calc(var(--u) * 4) 0 calc(var(--u) * 8.5);
  border-image: url(../assets/ui/coin-pill.webp) 0 70 0 149 fill / 0 calc(var(--u) * 4) 0 calc(var(--u) * 8.5);
  background: none;
  padding-left: 0;
  padding-right: 0;
  width: calc(var(--u) * 27.7);
  justify-content: center;
}
#fence::before {
  border-image-source: url(../assets/ui/hp-frame.webp);
}
#fence {
  --slice: 0 45 0 200;
  --bw: 0 calc(var(--u) * 1.85) 0 calc(var(--u) * 8.2);
}
#btn-plant::before {
  border-image-source: url(../assets/ui/btn-gold.webp);
}
#btn-plant {
  --slice: 70;
  --bw: calc(var(--u) * 4);
}
#btn-bees::before,
#btn-fert::before,
#btn-shed::before {
  border-image-source: url(../assets/ui/btn-cream.webp);
}
#btn-bees,
#btn-fert,
#btn-shed {
  --slice: 70;
  --bw: calc(var(--u) * 3.9);
}
#btn-call::before {
  border-image-source: url(../assets/ui/btn-orange.webp);
}
#btn-call {
  --slice: 70;
  --bw: calc(var(--u) * 3.9);
}
#btn-speed::before {
  border-image-source: url(../assets/ui/btn-square.webp);
}
#btn-speed {
  --slice: 60;
  --bw: calc(var(--u) * 3.3);
}
#toast div {
  border-style: solid;
  border-width: 0 calc(var(--u) * 2.6);
  border-image: url(../assets/ui/btn-pill.webp) 0 65 fill / 0 calc(var(--u) * 2.6);
  background: none;
}
/* Play: one stretched picture */
#title .cont {
  border-style: solid;
  border-width: 0 calc(var(--stage-h) * 0.039);
  border-image: url(../assets/ui/btn-pill.webp) 0 65 fill / 0 calc(var(--stage-h) * 0.039);
  background: none;
}
#title .rb .tag {
  border-style: solid;
  border-width: 0 calc(var(--stage-h) * 0.03);
  border-image: url(../assets/ui/tag-cream.webp) 0 64 fill / 0 calc(var(--stage-h) * 0.03);
  background: none;
}

/* bigger touch targets without changing the drawing */

/* ---------------------------------------------------------------- tutorial */
#tut {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
#tut[hidden] {
  display: none;
}
#tut .bubble {
  position: absolute;
  left: calc(50% - var(--u) * 43.6);
  top: calc(var(--stage-y) + var(--stage-h) * 0.351);
  width: calc(var(--u) * 64.9);
  height: calc(var(--u) * 26.4);
  background: url(../assets/ui/speech-bubble.webp) center / 100% 100% no-repeat;
  display: block;
  transition: top 0.3s;
}
#tut.low .bubble {
  top: calc(var(--stage-y) + var(--stage-h) * 0.52);
}
#tut .bust {
  position: absolute;
  left: calc(var(--u) * -1.5);
  top: calc(var(--u) * -1);
  height: calc(var(--u) * 24.5);
}
#tut .txt {
  position: absolute;
  left: calc(var(--u) * 26.4);
  right: calc(var(--u) * 3);
  top: calc(var(--u) * 3.6);
  margin: 0;
  font-size: calc(var(--u) * 3.6);
  line-height: 1.2;
  font-weight: 600;
}
#tut .txt b {
  font-weight: 700;
}
#tut .skip {
  position: absolute;
  left: calc(var(--u) * 34.5);
  top: calc(var(--u) * 17.6);
  font-size: calc(var(--u) * 3.35);
  text-decoration: underline;
  pointer-events: auto;
}
#tut .skip::before {
  content: '';
  position: absolute;
  inset: calc(var(--u) * -2) calc(var(--u) * -2);
}
#tut .hand {
  position: absolute;
  left: 0;
  top: 0;
  height: calc(var(--u) * 12.2);
  margin-left: calc(var(--u) * -2);
  margin-top: calc(var(--u) * -1);
  filter: drop-shadow(0 calc(var(--u) * 0.5) 0 rgba(58, 36, 22, 0.35));
}
#tut .arrow {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
#tut .arrow path {
  fill: none;
  stroke-linecap: round;
}
#tut .arrow .o {
  stroke: #3a2416;
  stroke-width: calc(var(--u) * 1.6);
  stroke-dasharray: calc(var(--u) * 2.4) calc(var(--u) * 1.6);
}
#tut .arrow .i {
  stroke: #fff4dc;
  stroke-width: calc(var(--u) * 0.8);
  stroke-dasharray: calc(var(--u) * 2.4) calc(var(--u) * 1.6);
}
#tut .arrow .ho {
  stroke: #3a2416;
  stroke-width: calc(var(--u) * 1.6);
  stroke-linejoin: round;
}
#tut .arrow .hi {
  stroke: #fff4dc;
  stroke-width: calc(var(--u) * 0.8);
  stroke-linejoin: round;
}
/* merge preview bubble: cream disc, golden glow ring, pointer towards the target, next-level plant and badge */
/* merge preview: the bubble art (assets/ui/prev-bubble.webp, pointer down); flipped when the bubble sits under the target */
#tut .prev {
  position: absolute;
  left: 0;
  top: 0;
  width: calc(var(--u) * 15.5);
  height: calc(var(--u) * 15.5);
  margin: calc(var(--u) * -7.75) 0 0 calc(var(--u) * -7.75);
  isolation: isolate;
  animation: prevbob 1.4s ease-in-out infinite;
}
#tut .prev::before {
  content: '';
  position: absolute;
  left: -5%;
  top: -6%;
  width: 110%;
  height: 124%;
  z-index: -1;
  background: url(../assets/ui/prev-bubble.webp) center / 100% 100% no-repeat;
}
#tut .prev:not(.up)::before {
  top: -18%;
  transform: scaleY(-1);
}
#tut .prev .pp {
  position: absolute;
  left: 4%;
  top: 0;
  width: 92%;
  height: 92%;
  object-fit: contain;
}
#tut .prev .pb {
  position: absolute;
  right: calc(var(--u) * -0.6);
  bottom: calc(var(--u) * -0.2);
  width: calc(var(--u) * 6);
  height: calc(var(--u) * 6);
  background: url(../assets/ui/ic-badge.webp) center / contain no-repeat;
  display: grid;
  place-items: center;
  font-size: calc(var(--u) * 3.2);
}
#tut .prev .ps {
  position: absolute;
  height: calc(var(--u) * 4);
}
#tut .prev .ps.l {
  left: calc(var(--u) * -4);
  top: calc(var(--u) * 3);
}
#tut .prev .ps.r {
  right: calc(var(--u) * -4);
  top: calc(var(--u) * -1);
}
@keyframes prevbob {
  50% {
    margin-top: calc(var(--u) * -8.4);
  }
}

/* touch: the button is a bigger transparent hit area, the art inside keeps the design size */
#btn-pause {
  width: calc(var(--u) * 10.5);
  height: calc(var(--u) * 10.5);
  margin: calc(var(--u) * -0.5) calc(var(--u) * -1.6) 0 0;
  background: none;
  display: grid;
  place-items: center;
}
#btn-pause .art {
  width: calc(var(--u) * 7.3);
  height: calc(var(--u) * 7.3);
  background: url(../assets/ui/pause.webp) center / contain no-repeat;
}
#title .cont {
  border: 0 !important;
  border-image: none !important;
  background: none !important;
  height: 11.5%;
  top: 63.7%;
}
#title .cont .art {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: calc(var(--stage-h) * 0.077);
  transform: translateY(-50%);
  border-style: solid;
  border-width: 0 calc(var(--stage-h) * 0.039);
  border-image: url(../assets/ui/btn-pill.webp) 0 65 fill / 0 calc(var(--stage-h) * 0.039);
  display: grid;
  place-items: center;
}
#tut .skip {
  padding: calc(var(--u) * 3.2) calc(var(--u) * 2);
  margin: calc(var(--u) * -3.2) calc(var(--u) * -2);
}

/* little yellow shine accents, twinkling softly */
.spk {
  position: absolute;
  pointer-events: none;
  animation: twinkle 1.6s ease-in-out infinite;
  transform-origin: 50% 100%;
}
@keyframes twinkle {
  50% {
    scale: 1.12;
    opacity: 0.85;
  }
}
#title .sp-play-l {
  left: calc(var(--u) * 22.9);
  top: 44.6%;
  height: 6.4%;
}
#title .sp-play-r {
  left: calc(var(--u) * 77.2);
  top: 45.2%;
  height: 6.4%;
}
#title .sp-hazel {
  left: calc(var(--vw) / 2 + var(--u) * 6.2 - var(--stage-x));
  top: 17%;
  height: 8.5%;
}
#title .sp-snail {
  left: 51.4%;
  top: 68.5%;
  height: 4.3%;
  animation-delay: 0.5s;
}
#title .sp-coin {
  right: calc(var(--hx) + var(--sr) + var(--u) * 54.4);
  top: calc(var(--st) + var(--u) * 1.1);
  height: calc(var(--u) * 4.8);
  animation-delay: 0.3s;
}
#tut .sp-tut {
  left: calc(var(--u) * -1);
  top: calc(var(--u) * -2.6);
  height: calc(var(--u) * 5.8);
}

/* ---------------------------------------------------------------- dock: one grid for every button
   Fixed icon box + a text column centred in the remaining space; same height and the same gap everywhere.
   The main group is one row pinned left; speed is pinned right. Labels shrink (fitText) before touching an edge. */
/* one row inside the HUD box (2.4x the height at most): the same gap between every button, speed last; on very wide
   windows the row stops growing (the gaps would turn into holes) and stays pinned left like the top bar */
#dock {
  position: absolute;
  left: calc(var(--hx) + var(--sl) + var(--u) * 2);
  bottom: calc(var(--sb) + var(--u) * 2.2);
  width: min(calc(var(--vw) - var(--hx) * 2 - var(--sl) - var(--sr) - var(--u) * 4), calc(var(--u) * 182));
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  column-gap: calc(var(--u) * 1.3);
}
.dbtn {
  position: relative;
  height: calc(var(--u) * 12.8);
  width: calc(var(--u) * 30);
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 0.8);
  padding: 0 calc(var(--u) * 1.6) 0 calc(var(--u) * 1.2);
  transition: transform 0.08s;
}
.dbtn:active:not(:disabled) {
  transform: scale(0.95);
}
.dbtn .dic {
  flex: 0 0 calc(var(--u) * 9.6);
  height: calc(var(--u) * 9.6);
  display: grid;
  place-items: center;
}
.dbtn .dic img {
  max-width: 100%;
  max-height: 100%;
}
.dbtn .dtx {
  flex: 1 1 0;
  min-width: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(var(--u) * 0.5);
  text-align: center;
}
.dbtn .lbl {
  display: block;
  max-width: 100%;
  font-size: max(11px, calc(var(--u) * 3.3));
  line-height: 1.04;
  font-weight: 700;
}
.dbtn .state {
  height: calc(var(--u) * 3.3);
  max-width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.dbtn .state:empty {
  display: none;
}
.dbtn .lock {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 0.4);
  font-size: max(10.5px, calc(var(--u) * 2.4));
  font-weight: 700;
  color: #6b4a2f;
  white-space: nowrap;
}
.dbtn .lock img {
  height: calc(var(--u) * 2.7);
}
.dbtn .ready {
  padding: 0 calc(var(--u) * 0.4);
  height: calc(var(--u) * 3.3);
  border-style: solid;
  border-width: 0 calc(var(--u) * 1.65);
  border-image: url(../assets/ui/pill-green.webp) 0 52 fill / 0 calc(var(--u) * 1.65);
  display: grid;
  place-items: center;
  font-size: max(10px, calc(var(--u) * 2.3));
  font-weight: 700;
  color: #fff;
}
.dbtn.locked .dic img {
  filter: grayscale(0.85) brightness(1.05);
  opacity: 0.6;
}
.dbtn.locked .lbl {
  opacity: 0.65;
}
#btn-plant {
  width: calc(var(--u) * 41.6);
  padding-left: calc(var(--u) * 1.6);
}
/* level tag sits on top of the button like a tab, so the icon and the text get the whole button */
#btn-plant .lvl {
  position: absolute;
  left: calc(var(--u) * 2.4);
  top: calc(var(--u) * -3.8);
  z-index: 2;
  height: calc(var(--u) * 5.5);
  padding: 0 calc(var(--u) * 0.4);
  border-style: solid;
  border-width: 0 calc(var(--u) * 2.4);
  border-image: url(../assets/ui/pill-cream.webp) 0 61 fill / 0 calc(var(--u) * 2.4);
  display: grid;
  place-items: center;
  font-size: calc(var(--u) * 3.3);
  font-weight: 700;
}
#btn-plant .dic {
  flex-basis: calc(var(--u) * 10.6);
  height: calc(var(--u) * 12);
}
#btn-plant .lbl {
  font-size: calc(var(--u) * 4);
}
#btn-plant .price {
  position: relative;
  height: calc(var(--u) * 4.8);
  min-width: calc(var(--u) * 11);
  padding: 0 calc(var(--u) * 0.4) 0 0;
  gap: calc(var(--u) * 0.7);
  border-style: solid;
  border-width: 0 calc(var(--u) * 2.4);
  border-image: url(../assets/ui/pill-cream.webp) 0 61 fill / 0 calc(var(--u) * 2.4);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: calc(var(--u) * 3.4);
  font-weight: 700;
}
#btn-plant .price img {
  flex: 0 0 auto;
  height: calc(var(--u) * 4.6);
  margin-left: calc(var(--u) * -1.8);
}
#btn-plant.poor .price {
  color: #b0543a;
}
#btn-plant.shake {
  animation: shake 0.3s;
}
@keyframes shake {
  25% {
    transform: translateX(calc(var(--u) * -0.8));
  }
  50% {
    transform: translateX(calc(var(--u) * 0.8));
  }
  75% {
    transform: translateX(calc(var(--u) * -0.4));
  }
}
#btn-fert .ring {
  flex: 0 0 calc(var(--u) * 9);
  height: calc(var(--u) * 9);
  position: relative;
  border-radius: 50%;
  background: conic-gradient(#3fa9f5 var(--p, 0%), #d8e8f0 0);
  display: grid;
  place-items: center;
}
#btn-fert .ring::before {
  content: '';
  position: absolute;
  inset: calc(var(--u) * 1.1);
  border-radius: 50%;
  background: #fff4dc;
  border: calc(var(--u) * 0.35) solid var(--ink);
}
#btn-fert .ring span {
  position: relative;
  font-size: calc(var(--u) * 2.9);
  font-weight: 700;
}
#btn-fert .ring[hidden] {
  display: none;
}
#btn-fert.active {
  animation: glowpulse 0.8s infinite alternate;
}
@keyframes glowpulse {
  to {
    filter: drop-shadow(0 0 calc(var(--u) * 1.2) #ffe066);
  }
}
#btn-call[hidden] {
  display: none;
}
#btn-call .t {
  font-size: calc(var(--u) * 4);
  font-weight: 700;
  line-height: 1;
}
#btn-call .lbl {
  font-size: calc(var(--u) * 3);
  white-space: nowrap;
}
#btn-call.start .t {
  display: none;
}
#btn-call.start .lbl {
  font-size: calc(var(--u) * 3.4);
}
#btn-speed {
  position: relative;
  flex: 0 0 auto;
  width: calc(var(--u) * 18.7);
  height: calc(var(--u) * 12.8);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--u) * 1);
  font-size: calc(var(--u) * 5);
  font-weight: 700;
}
#btn-speed img {
  height: calc(var(--u) * 4.4);
}
/* with the Call Wave button the row tightens so it never reaches the speed button */
#hud.calling #btn-plant {
  width: calc(var(--u) * 38);
}
#hud.calling .dbtn:not(#btn-plant) {
  width: calc(var(--u) * 26.5);
}
#hud.calling #btn-speed {
  width: calc(var(--u) * 17.3);
}
#hud.calling .dbtn .lbl {
  font-size: max(11px, calc(var(--u) * 3));
}
#hud.calling .dbtn .dic {
  flex-basis: calc(var(--u) * 8.4);
  height: calc(var(--u) * 8.4);
}
#hud.calling #btn-plant .dic {
  flex-basis: calc(var(--u) * 9.4);
  height: calc(var(--u) * 11);
}
/* 6-button dock (Call Wave showing): the cooldown ring sits on the sack icon as a badge, the label keeps its room (QA 08/11) */
#hud.calling #btn-fert .ring {
  position: absolute;
  left: calc(var(--u) * 1.4);
  bottom: calc(var(--u) * 0.4);
  width: calc(var(--u) * 5.8);
  height: calc(var(--u) * 5.8);
  z-index: 2;
}
#hud.calling #btn-fert .ring span {
  font-size: calc(var(--u) * 2);
}

/* small outlined labels: outline only, no drop shadow (it read as a ghost line) */
#btn-call .lbl,
#btn-call .t,
.dbtn .ready {
  --o: calc(var(--u) * 0.32);
  text-shadow:
    calc(var(--o) * 1) 0 0 var(--ink),
    calc(var(--o) * 0.924) calc(var(--o) * 0.383) 0 var(--ink),
    calc(var(--o) * 0.707) calc(var(--o) * 0.707) 0 var(--ink),
    calc(var(--o) * 0.383) calc(var(--o) * 0.924) 0 var(--ink),
    0 calc(var(--o) * 1) 0 var(--ink),
    calc(var(--o) * -0.383) calc(var(--o) * 0.924) 0 var(--ink),
    calc(var(--o) * -0.707) calc(var(--o) * 0.707) 0 var(--ink),
    calc(var(--o) * -0.924) calc(var(--o) * 0.383) 0 var(--ink),
    calc(var(--o) * -1) 0 0 var(--ink),
    calc(var(--o) * -0.924) calc(var(--o) * -0.383) 0 var(--ink),
    calc(var(--o) * -0.707) calc(var(--o) * -0.707) 0 var(--ink),
    calc(var(--o) * -0.383) calc(var(--o) * -0.924) 0 var(--ink),
    0 calc(var(--o) * -1) 0 var(--ink),
    calc(var(--o) * 0.383) calc(var(--o) * -0.924) 0 var(--ink),
    calc(var(--o) * 0.707) calc(var(--o) * -0.707) 0 var(--ink),
    calc(var(--o) * 0.924) calc(var(--o) * -0.383) 0 var(--ink);
}
#btn-fert {
  width: calc(var(--u) * 37);
}
#hud.calling #btn-fert {
  width: calc(var(--u) * 26.5);
}

/* phones lying down: taller dock buttons and bigger labels (touch >= 44 px); the dock only covers the bottom flower bed,
   so the field keeps its height */
@media (orientation: landscape) and (max-height: 500px) {
  #dock {
    width: calc(var(--vw) - var(--hx) * 2 - var(--sl) - var(--sr) - var(--u) * 4);
  }
  #dock .dbtn {
    flex: 1 1 auto;
  }
  .dbtn,
  #btn-speed {
    height: calc(var(--u) * 14);
  }
  .dbtn .lbl {
    font-size: max(12.5px, calc(var(--u) * 3.5));
  }
  #btn-plant .lbl,
  #btn-call .t {
    font-size: max(13.5px, calc(var(--u) * 4.2));
  }
  #hud.calling .dbtn .lbl {
    font-size: max(12px, calc(var(--u) * 3.2));
  }
  .dbtn .lock,
  .dbtn .ready {
    font-size: max(11px, calc(var(--u) * 2.6));
  }
  .dbtn .ready {
    height: calc(var(--u) * 3.8);
  }
  #btn-speed {
    font-size: calc(var(--u) * 5.4);
  }
}

/* new plant card (merge discovery): ribbon + portrait + name; pops in with a small overshoot, rises away */
#disc {
  position: fixed;
  left: 50%;
  top: 30%;
  transform: translate(-50%, -100%) scale(0.82);
  transform-origin: 50% 100%;
  z-index: 4;
  pointer-events: none;
}
#disc .card {
  position: relative;
}
#disc .in {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  animation: discin 0.18s cubic-bezier(0.2, 1.4, 0.4, 1) both;
}
#disc.out .in {
  animation: discout 0.15s ease-in forwards;
}
#disc .rb {
  position: relative;
  z-index: 1;
  height: calc(var(--u) * 7.6);
  min-width: calc(var(--u) * 34);
  padding: 0 calc(var(--u) * 7);
  display: grid;
  place-items: center;
}
#disc .rb::before {
  border-image-source: url(../assets/ui/ribbon-win.webp);
}
#disc .rb {
  --slice: 0 200;
  --bw: 0 calc(var(--u) * 5.6);
}
#disc .rb span {
  font-size: calc(var(--u) * 4.2);
  white-space: nowrap;
  margin-top: calc(var(--u) * -0.3);
}
#disc .card {
  margin-top: calc(var(--u) * -1.6);
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 1.4);
  padding: calc(var(--u) * 2.2) calc(var(--u) * 2.8) calc(var(--u) * 1.2) calc(var(--u) * 1.6);
  filter: drop-shadow(0 0 calc(var(--u) * 1.5) rgba(255, 220, 110, 0.8));
}
/* the card and the level pill are painted art (9-slice), not CSS boxes */
#disc .card::before {
  border-image-source: url(../assets/ui/btn-round.webp);
}
#disc .card {
  --slice: 80;
  --bw: calc(var(--u) * 3);
}
#disc .tx .lv::before {
  border-image-source: url(../assets/ui/pill-green.webp);
}
#disc .tx .lv {
  position: relative;
  --slice: 0 60;
  --bw: 0 calc(var(--u) * 1.8);
}
#disc .pl {
  height: calc(var(--u) * 11);
  filter: drop-shadow(0 calc(var(--u) * 0.4) 0 rgba(58, 36, 22, 0.25));
}
#disc .tx {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(var(--u) * 0.4);
}
#disc .tx b {
  font-size: max(13px, calc(var(--u) * 3.8));
  white-space: nowrap;
}
#disc .tx .lv {
  font-size: max(11px, calc(var(--u) * 2.8));
  padding: calc(var(--u) * 0.2) calc(var(--u) * 1.8);
}
#disc .sp {
  position: absolute;
  top: calc(var(--u) * -1.2);
  height: calc(var(--u) * 4);
  animation: discsp 0.5s ease-out both;
}
#disc .sp.l {
  left: calc(var(--u) * -4);
}
#disc .sp.r {
  right: calc(var(--u) * -4);
}
@keyframes discin {
  0% {
    transform: translateY(calc(var(--u) * 1.2)) scale(0.9);
    opacity: 0;
  }
  70% {
    transform: translateY(0) scale(1.03);
    opacity: 1;
  }
  100% {
    transform: none;
  }
}
@keyframes discout {
  to {
    transform: translateY(calc(var(--u) * -1.5)) scale(0.9);
    opacity: 0;
  }
}
@keyframes discsp {
  0% {
    transform: scale(0.3);
    opacity: 0;
  }
  40% {
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 0.9;
  }
}
.reduced #disc .in,
.reduced #disc.out .in,
.reduced #disc .sp {
  animation-name: fadein;
}
.reduced #disc.out .in {
  animation-name: fadeout;
}
@keyframes fadein {
  from {
    opacity: 0;
  }
}
@keyframes fadeout {
  to {
    opacity: 0;
  }
}

/* boss entrance: the strip drops in from above with a small bounce, the crown hops a beat later (scale only, ±8%) */
#boss-strip.enter {
  animation: bossin 0.55s cubic-bezier(0.2, 1.5, 0.4, 1) both;
}
#boss-strip.enter .bcrown {
  animation: crownhop 0.5s 0.35s ease-out both;
}
@keyframes bossin {
  from {
    transform: translateY(calc(var(--u) * -12)) scale(0.92);
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
}
@keyframes crownhop {
  40% {
    transform: translateY(calc(var(--u) * -2)) rotate(-18deg);
  }
  100% {
    transform: rotate(-12deg);
  }
}
.reduced #boss-strip.enter,
.reduced #boss-strip.enter .bcrown {
  animation: fadein 0.3s both;
}

/* reset progress: a small quiet pill under Continue; armed (second tap erases) it turns warm amber and wiggles once */
#title .reset {
  position: absolute;
  left: calc(var(--u) * 29.5);
  top: 77.2%;
  width: 26.6%;
  height: 6%;
  background: none;
  border: 0;
  padding: 0;
  display: grid;
  place-items: center;
}
#title .reset[hidden] {
  display: none;
}
#title .reset span {
  height: 100%;
  display: grid;
  place-items: center;
  padding: 0 calc(var(--u) * 3.2);
  border-style: solid;
  border-width: 0 calc(var(--u) * 2.4);
  border-image: url(../assets/ui/pill-cream.webp) 0 61 fill / 0 calc(var(--u) * 2.4);
  font-size: max(10px, calc(var(--u) * 2.8));
  white-space: nowrap;
  opacity: 0.9;
}
#title .reset.arm span {
  border-image-source: url(../assets/ui/btn-gold.webp);
  border-image-slice: 0 70 fill;
  opacity: 1;
  animation: armwiggle 0.35s ease-out;
}
@keyframes armwiggle {
  30% {
    transform: rotate(-2deg) scale(1.04);
  }
  65% {
    transform: rotate(2deg);
  }
}
.reduced #title .reset.arm span {
  animation: none;
}

/* tap to start (first touch unlocks sound on iPhone): same garden backdrop as the rotate screen, a pill that breathes */
#boot.ready {
  cursor: pointer;
  background:
    radial-gradient(
      110% 70% at 50% 42%,
      rgba(214, 248, 160, 0.9) 0%,
      rgba(150, 214, 96, 0.82) 50%,
      rgba(78, 150, 46, 0.9) 100%
    ),
    url(../assets/env/fol1.webp) center / 380px repeat;
}
#boot .tap {
  margin: 0;
  padding: 2.4vmin 6vmin;
  border-radius: 999px;
  background: #fff4dc;
  box-shadow:
    0 0 0 4px var(--ink),
    0 7px 0 4px rgba(58, 36, 22, 0.3);
  color: var(--ink);
  font: 700 clamp(20px, 4.2vmin, 34px) / 1.2 var(--font);
  animation: tapbreath 1.6s ease-in-out infinite;
}
@keyframes tapbreath {
  50% {
    transform: scale(1.05);
  }
}
#boot.out {
  opacity: 0;
  transition: opacity 0.3s;
}
.reduced #boot .tap {
  animation: none;
}

/* End of css/game.css */