/* Overlay screens: 05 Garden Shed, 06 wave held, 07 fence fell, 08 pause, settings, victory.
   .stg is a box the size of the 16:9 stage; each direct child sits at the design box
   (--x --y --w --h in % of the stage). Text and caps are sized in --u (1% of the stage height). */
#over {
  position: absolute;
  inset: 0;
  z-index: 5;
}
#over[hidden] {
  display: none;
}
#over.dim {
  background: rgba(31, 40, 22, 0.55);
}
#over.soft {
  background: rgba(40, 24, 12, 0.12);
  pointer-events: none;
} /* the reward card never swallows taps on Pause / Shed (QA 08/11) */
#over.soft .stg button {
  pointer-events: auto;
}
.stg {
  position: absolute;
  left: var(--stage-x);
  top: var(--stage-y);
  width: var(--stage-w);
  height: var(--stage-h);
  animation: dlgin 0.28s cubic-bezier(0.2, 1.4, 0.4, 1);
}
.stg > * {
  position: absolute;
  left: calc(var(--x) * 1%);
  top: calc(var(--y) * 1%);
  width: calc(var(--w) * 1%);
  height: calc(var(--h) * 1%);
  margin: 0;
  box-sizing: border-box;
}
@keyframes dlgin {
  from {
    transform: scale(0.88);
    opacity: 0;
  }
}
.stg.again {
  animation: none;
}
.stg img.hz,
.stg .star,
.stg .spk,
.stg .slug,
.stg .bf,
.stg .vn,
.stg .dv {
  object-fit: contain;
  pointer-events: none;
}

/* shared plates */
.pnl::before {
  border-image-source: url(../assets/ui/panel.webp);
}
.pnl {
  --slice: 150;
  --bw: calc(var(--u) * 12);
  pointer-events: none;
}
/* ribbons from the design crops, sliced only across: the flowered ends keep their shape, the band stretches */
.rib {
  display: grid;
  place-items: center;
  pointer-events: none;
}
.rib span {
  display: block;
  max-width: 66%;
  font-size: calc(var(--u) * 6.5);
  line-height: 1.1;
  font-weight: 700;
  white-space: nowrap;
}
.rib.win::before {
  border-image-source: url(../assets/ui/ribbon-win.webp);
}
.rib.win {
  --slice: 0 200;
  --bw: 0 calc(var(--u) * 9);
}
.rib.win span {
  margin-top: calc(var(--u) * -0.4);
}
.rib.lose::before {
  border-image-source: url(../assets/ui/ribbon-lose.webp);
}
.rib.lose {
  --slice: 0 210;
  --bw: 0 calc(var(--u) * 8.7);
}
.rib.lose span {
  margin-top: calc(var(--u) * -0.9);
}
.rib.pause::before {
  border-image-source: url(../assets/ui/ribbon-pause.webp);
}
.rib.pause {
  --slice: 0 240;
  --bw: 0 calc(var(--u) * 9);
}
.rib.pause span {
  max-width: 60%;
  margin-top: calc(var(--u) * -1.6);
}
.pb {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--u) * 1.2);
  padding: 0 calc(var(--u) * 3);
  font-size: calc(var(--u) * 3.9);
  font-weight: 700;
  transition: transform 0.08s;
}
.pb::before {
  border-image-source: url(../assets/ui/btn-pill.webp);
}
.pb {
  --slice: 0 65;
  --bw: 0 calc(var(--u) * 3.9);
}
.pb.green::before {
  border-image-source: url(../assets/ui/btn-green.webp);
}
.pb.green {
  --slice: 0 125;
  --bw: 0 calc(var(--u) * 5);
}
.pb.orange::before {
  border-image-source: url(../assets/ui/btn-play.webp);
}
.pb.orange {
  --slice: 0 125;
  --bw: 0 calc(var(--u) * 5.8);
}
.pb img {
  flex: 0 0 auto;
  height: 70%;
}
.pb span {
  display: block;
  min-width: 0;
  white-space: nowrap;
}
.pb:active {
  transform: scale(0.96);
}

/* 06 wave held + campaign victory */
.stg .glow {
  --x: 15.8;
  --y: 24.4;
  --w: 46.1;
  --h: 54.2;
  background: radial-gradient(closest-side, rgba(255, 228, 120, 0.6), rgba(255, 228, 120, 0));
  pointer-events: none;
}
/* a slow spinning starburst behind the reward card; still with less motion */
.win .glow,
.vic .glow {
  --x: 8.85;
  --y: 0;
  --w: 60;
  --h: 103;
  background: url(../assets/ui/starburst.webp) center / contain no-repeat;
  filter: saturate(1.4) brightness(1.08);
  animation:
    burstspin 18s linear infinite,
    burstin 0.5s ease-out both;
}
@keyframes burstspin {
  to {
    transform: rotate(360deg);
  }
}
@keyframes burstin {
  from {
    opacity: 0;
  }
}
.reduced .win .glow,
.reduced .vic .glow {
  animation: burstin 0.5s ease-out both;
}
.win.r2 .total {
  --y: 55.5;
}
.win.r3 .total {
  --y: 62;
}
.resbox {
  --x: 17;
  --y: 26.6;
  --w: 43.4;
  --h: 49.9;
}
.stg .star.s1 {
  --x: 30.2;
  --y: 17;
  --w: 6.6;
  --h: 10.6;
}
.stg .star.s2 {
  --x: 35.9;
  --y: 13.3;
  --w: 7.8;
  --h: 13.3;
}
.stg .star.s3 {
  --x: 42.5;
  --y: 17;
  --w: 6.6;
  --h: 10.6;
}
.stg .star {
  filter: drop-shadow(0 calc(var(--u) * 0.4) 0 rgba(58, 36, 22, 0.4));
  animation: starpop 0.45s backwards;
}
.stg .star.s2 {
  animation-delay: 0.12s;
}
.stg .star.s3 {
  animation-delay: 0.24s;
}
@keyframes starpop {
  from {
    transform: scale(0) rotate(-40deg);
  }
  70% {
    transform: scale(1.12);
  }
}
.win .spk.l,
.vic .spk.l {
  --x: 26.3;
  --y: 15.5;
  --w: 3.6;
  --h: 7;
}
.win .spk.r,
.vic .spk.r {
  --x: 49.5;
  --y: 15.5;
  --w: 3.6;
  --h: 7;
}
.win .rib,
.vic .rib {
  --x: 21.1;
  --y: 25;
  --w: 36.8;
  --h: 12.2;
}
.win .hz,
.vic .hz {
  --x: 19.1;
  --y: 37.2;
  --w: 14.4;
  --h: 31.9;
}
.win .rows,
.vic .rows {
  --x: 33.8;
  --y: 39.3;
  --w: 24.2;
  --h: 22.3;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 0.1);
}
.rows .r {
  position: relative;
  flex: 0 0 calc(var(--u) * 7.4);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(var(--u) * 1);
  padding: 0 calc(var(--u) * 1.6) 0 calc(var(--u) * 2.6);
  font-size: calc(var(--u) * 3.8);
  font-weight: 700;
}
.rows .r::before {
  border-image-source: url(../assets/ui/btn-pill.webp);
}
.win .rows .r::before {
  filter: sepia(0.45) saturate(1.4) brightness(0.93);
} /* warm tan rows, the orange total stays the one loud thing */
.rows .r {
  --slice: 0 65;
  --bw: 0 calc(var(--u) * 3.7);
}
.rows .r span {
  display: block;
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
} /* shrinks (fit) before touching the value */
.rows .r b {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 0.5);
}
.rows .r img {
  height: calc(var(--u) * 4.6);
}
.win .total {
  --x: 32.6;
  --y: 63;
  --w: 17.9;
  --h: 13.3;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--u) * 1);
  font-size: calc(var(--u) * 5.8);
  font-weight: 700;
}
.win .total::before {
  border-image-source: url(../assets/ui/btn-play.webp);
}
.win .total {
  --slice: 0 125;
  --bw: 0 calc(var(--u) * 6.6);
}
.win .total img {
  height: calc(var(--u) * 9);
  margin-left: calc(var(--u) * -1);
}
.vic .rows {
  --x: 32.2;
  --w: 23.4;
  --h: 34;
  gap: calc(var(--u) * 1.6);
  justify-content: flex-start;
} /* a bit left, off the right rim */
.vic .hz {
  --x: 16.4;
} /* Hazel leans out over the left rim */
.vic .rows .sub {
  margin: 0 0 calc(var(--u) * 1);
}
.vic .rows .pb {
  position: relative;
  flex: 0 0 calc(var(--u) * 8.4);
}
.sub {
  margin: 0;
  text-align: center;
  font-size: calc(var(--u) * 3.4);
  font-weight: 600;
  line-height: 1.2;
}

/* 07 the fence fell */
.defbox {
  --x: 17.3;
  --y: 27.1;
  --w: 64;
  --h: 65.4;
}
.lose .bf.l {
  --x: 31.4;
  --y: 13.2;
  --w: 19.5;
  --h: 17.1;
}
.lose .bf.r {
  --x: 55;
  --y: 13.2;
  --w: 19.5;
  --h: 17.1;
  transform: scaleX(-1);
}
.lose .slug {
  --x: 44.7;
  --y: 12.2;
  --w: 14.1;
  --h: 15.9;
}
.lose .spk.l {
  --x: 40.6;
  --y: 8;
  --w: 3.6;
  --h: 7;
}
.lose .spk.r {
  --x: 62.4;
  --y: 8;
  --w: 3.6;
  --h: 7;
}
.lose .rib {
  --x: 29.7;
  --y: 28.2;
  --w: 38.9;
  --h: 10.1;
}
.lose .rib span {
  font-size: calc(var(--u) * 6.2);
}
.lose .hz {
  --x: 17.6;
  --y: 38.3;
  --w: 17.9;
  --h: 41.4;
} /* a bit left: never touches the retry button */
.lose .col {
  --x: 34.7;
  --y: 40.2;
  --w: 39.5; /* same column as the retry button, so the text centres on it */
  --h: 27.4;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}
.lose .sub {
  display: block;
  max-width: 100%;
  text-wrap: balance;
}
.lose .close {
  position: relative;
  width: 94%;
  height: calc(var(--u) * 10.6);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(var(--u) * 1.2);
  padding: 0 calc(var(--u) * 3);
  border-radius: calc(var(--u) * 2.2);
  background: #fff3d9;
  box-shadow:
    inset 0 0 0 calc(var(--u) * 0.45) #e2b56a,
    0 calc(var(--u) * 0.3) 0 rgba(58, 36, 22, 0.15);
  font-size: calc(var(--u) * 3.1);
  font-weight: 600;
}
.lose .close > span:first-child {
  display: block;
  max-width: 100%;
  text-align: center;
  text-wrap: balance;
  line-height: 1.15;
}
.lose .close .bar {
  width: 76%;
  height: max(10px, calc(var(--u) * 4.2));
  border: calc(var(--u) * 0.45) solid var(--ink);
  border-radius: 99px;
  background: #3a2a20;
  overflow: hidden;
  box-sizing: border-box;
}
.lose .close .bar i {
  display: block;
  height: 100%;
  border-radius: 99px;
  background: linear-gradient(#ffd27a 0 35%, #f2a23a 36%, #e8791f);
} /* amber, not red */
.lose .mercy {
  position: relative;
  width: 73%;
  height: calc(var(--u) * 6.6);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--u) * 0.9);
  padding: 0 calc(var(--u) * 3.4);
  font-size: calc(var(--u) * 3.1);
  font-weight: 700;
}
.lose .mercy::before {
  border-image-source: url(../assets/ui/btn-pill.webp);
}
.lose .mercy {
  --slice: 0 65;
  --bw: 0 calc(var(--u) * 3.3);
}
.lose .mercy img {
  flex: 0 0 auto;
  height: calc(var(--u) * 4.6);
}
.lose .mercy span {
  display: block;
  min-width: 0;
  white-space: nowrap;
}
.lose .b-retry {
  --x: 34.7;
  --y: 68.9;
  --w: 39.5;
  --h: 11.7;
  font-size: calc(var(--u) * 5);
  padding: 0 calc(var(--u) * 5);
}
.lose .b-retry {
  animation: playbreath 1.8s ease-in-out 0.8s infinite;
} /* the one clear action breathes like Play */
.reduced .lose .b-retry {
  animation: none;
}
.lose .b-shed {
  --x: 28.9;
  --y: 82.4;
  --w: 21.4;
  --h: 8;
}
.lose .b-menu {
  --x: 52.6;
  --y: 82.4;
  --w: 16.3;
  --h: 8;
}
.lose .b-shed,
.lose .b-menu {
  --bw: 0 calc(var(--u) * 4);
}

/* 08 pause */
.pausebox {
  --x: 31.1;
  --y: 35.1;
  --w: 37.4;
  --h: 62.7;
}
.pau .hz {
  --x: 40.7;
  --y: 3.6;
  --w: 17.3;
  --h: 30.3;
}
.pau .rib {
  --x: 33.8;
  --y: 28.7;
  --w: 34.1;
  --h: 13.8;
}
.pau .b-resume {
  --x: 37.8;
  --y: 43;
  --w: 23.6;
  --h: 10.1;
  font-size: calc(var(--u) * 5);
}
.pau .b-restart {
  --x: 36.6;
  --y: 54.7;
  --w: 25.7;
  --h: 7.7;
}
.pau .b-settings {
  --x: 36.6;
  --y: 64;
  --w: 25.7;
  --h: 7.7;
}
.pau .b-menu {
  --x: 36.6;
  --y: 73.3;
  --w: 25.7;
  --h: 7.7;
}

/* pause = settings menu: one more button (language) below the design's four */
.pau .b-lang {
  --x: 36.6;
  --y: 73.1;
  --w: 25.7;
  --h: 7.7;
}
.pau .b-menu {
  --y: 82.2;
}
.pau .b-lang img,
.set .b-s2 img {
  height: 74%;
}

/* settings (title gear), sound and language menus: the same family as the pause card */
.setbox {
  --x: 31.1;
  --y: 30;
  --w: 37.4;
  --h: 50;
}
.set .rib {
  --x: 33.8;
  --y: 23.6;
  --w: 34.1;
  --h: 13.8;
}
.set .b-s1 {
  --x: 36.6;
  --y: 40;
  --w: 25.7;
  --h: 8.4;
}
.set .b-s2 {
  --x: 36.6;
  --y: 51;
  --w: 25.7;
  --h: 8.4;
}
.set .b-back {
  --x: 40;
  --y: 63.5;
  --w: 20;
  --h: 8.4;
}
.sndbox {
  --x: 26;
  --y: 24;
  --w: 48;
  --h: 58;
}
.lngbox {
  --x: 31.1;
  --y: 24;
  --w: 37.4;
  --h: 58;
}
.snd .rib {
  --x: 31;
  --y: 17.6;
  --w: 38;
  --h: 13.8;
}
.lng .rib {
  --x: 33.8;
  --y: 17.6;
  --w: 34.1;
  --h: 13.8;
}
.snd .b-back,
.lng .b-back {
  --x: 40;
  --y: 69.5;
  --w: 20;
  --h: 8.4;
}
.pb .bk {
  height: 64%;
}
.vrow {
  --x: 30;
  --w: 40;
  --h: 10.5;
  display: grid;
  grid-template-columns: calc(var(--u) * 7.5) calc(var(--u) * 18) 1fr calc(var(--u) * 8.5);
  align-items: center;
  column-gap: calc(var(--u) * 1.6);
}
.vrow.v1 {
  --y: 32;
}
.vrow.v2 {
  --y: 44.5;
}
.vrow.v3 {
  --y: 57;
}
.vrow .vi {
  width: 100%;
  height: calc(var(--u) * 6.5);
  object-fit: contain;
}
.vrow .vl {
  font-size: calc(var(--u) * 3.6);
  white-space: nowrap;
}
.vrow .vn {
  font-size: max(12px, calc(var(--u) * 3.4));
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.vrow .vl {
  font-size: max(12px, calc(var(--u) * 3.6)) !important;
}
/* custom slider: deep track, glossy green fill up to the value, cream knob with the ink outline */
.vs {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: max(44px, calc(var(--u) * 9));
  margin: 0;
  background: transparent;
  cursor: pointer;
  touch-action: none;
}
.vs::-webkit-slider-runnable-track {
  height: max(14px, calc(var(--u) * 3.6));
  border-radius: 99px;
  border: calc(var(--u) * 0.45) solid var(--ink);
  background:
    linear-gradient(#b6f070, #5fc02c) 0 0 / var(--p, 100%) 100% no-repeat,
    #5a3a2a;
  box-shadow: inset 0 calc(var(--u) * 0.5) 0 rgba(0, 0, 0, 0.25);
}
.vs::-moz-range-track {
  height: calc(var(--u) * 2.1);
  border-radius: 99px;
  border: calc(var(--u) * 0.45) solid var(--ink);
  background: #5a3a2a;
}
.vs::-moz-range-progress {
  height: calc(var(--u) * 2.1);
  border-radius: 99px;
  background: linear-gradient(#b6f070, #5fc02c);
}
.vs::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: max(28px, calc(var(--u) * 7));
  height: max(28px, calc(var(--u) * 7));
  margin-top: calc(max(14px, calc(var(--u) * 3.6)) / 2 - max(28px, calc(var(--u) * 7)) / 2 - calc(var(--u) * 0.45));
  border-radius: 50%;
  background:
    url(../assets/fx/leaf.webp) 52% 50% / 62% no-repeat,
    radial-gradient(circle at 40% 35%, #fffaf0, #ffe2a8 70%);
  border: calc(var(--u) * 0.5) solid var(--ink);
  box-shadow: 0 calc(var(--u) * 0.4) 0 rgba(58, 36, 22, 0.35);
} /* a leaf on the knob */
.vs::-moz-range-thumb {
  width: calc(var(--u) * 4.6);
  height: calc(var(--u) * 4.6);
  border-radius: 50%;
  background:
    url(../assets/fx/leaf.webp) 52% 50% / 62% no-repeat,
    #fff4dc;
  border: calc(var(--u) * 0.5) solid var(--ink);
}
.lng .langs {
  --x: 37.5;
  --y: 32;
  --w: 25;
  --h: 34;
  display: grid;
  grid-template-columns: 1fr;
  gap: calc(var(--u) * 1.8);
  align-content: start;
}
.lang {
  position: relative;
  height: max(36px, calc(var(--u) * 8.2));
  font-size: max(13px, calc(var(--u) * 3.6));
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--u) * 1);
}
.lang .lc {
  position: absolute;
  right: calc(var(--u) * 1.4);
  height: 62%;
}
.lang::before {
  border-image-source: url(../assets/ui/btn-pill.webp);
}
.lang {
  --slice: 0 65;
  --bw: 0 calc(var(--u) * 3.7);
}
.lang.on::after {
  content: '';
  position: absolute;
  inset: calc(var(--u) * -0.5);
  border-radius: 99px;
  box-shadow:
    0 0 0 calc(var(--u) * 0.55) #6cc23a,
    0 0 calc(var(--u) * 1.6) rgba(120, 220, 70, 0.7);
  pointer-events: none;
}

/* 05 garden shed */
.shedart {
  --x: 10.5;
  --y: 1.6;
  --w: 79.2;
  --h: 91.9;
  border-style: solid;
  border-width: calc(var(--u) * 30.2) calc(var(--u) * 11.5) calc(var(--u) * 4.8);
  border-image: url(../assets/ui/shed-panel.webp) 300 125 88 fill / calc(var(--u) * 30.2) calc(var(--u) * 11.5)
    calc(var(--u) * 4.8);
  pointer-events: none;
}
.shedbox {
  --x: 12.9;
  --y: 20.2;
  --w: 74.2;
  --h: 73.3;
  pointer-events: none;
}
.plank {
  --x: 36.6;
  --y: 5.8;
  --w: 26.6;
  --h: 13.8;
  display: grid;
  place-items: center;
}
.plank::before {
  border-image-source: url(../assets/ui/plank.webp);
}
.plank {
  --slice: 0 175;
  --bw: 0 calc(var(--u) * 6.5);
}
.plank span {
  display: block;
  max-width: 78%;
  font-size: calc(var(--u) * 6.4);
  line-height: 1.1;
  white-space: nowrap;
  margin-top: calc(var(--u) * -0.6);
}
.shedcoins {
  --x: 68.8;
  --y: 11.9;
  --w: 10.8;
  --h: 6.6;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 calc(var(--u) * 2.2) 0 calc(var(--u) * 3.6);
  font-size: calc(var(--u) * 4);
  font-weight: 700;
}
.shedcoins::before {
  left: calc(var(--u) * -3.6);
  border-image-source: url(../assets/ui/coin-pill.webp);
}
.shedcoins {
  --slice: 0 70 0 149;
  --bw: 0 calc(var(--u) * 3) 0 calc(var(--u) * 6.6);
}
.shd .x {
  --x: 81.5;
  --y: 10.6;
  --w: 4.8;
  --h: 8.5;
  background: url(../assets/ui/btn-x.webp) center / contain no-repeat;
}
.shd .x:active {
  transform: scale(0.92);
}
.rsm {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--u) * 0.8);
  padding: 0 calc(var(--u) * 3);
}
.rsm::before {
  border-image-source: url(../assets/ui/plaque-orange.webp);
}
.rsm {
  --slice: 0 100;
  --bw: 0 calc(var(--u) * 3.2);
  justify-content: flex-start;
  padding-left: calc(var(--u) * 1);
}
.rsm img {
  flex: 0 0 auto;
  height: calc(var(--u) * 6.4);
  margin: calc(var(--u) * -1) 0;
}
.rsm span {
  display: block;
  min-width: 0;
  font-size: calc(var(--u) * 3.6);
  white-space: nowrap;
}
.shd .band {
  --x: 15.6;
  --y: 54.7;
  --w: 68.8;
  --h: 4.3;
  opacity: 0.75;
  pointer-events: none;
}
.shd .band::before {
  border-image-source: url(../assets/ui/plaque-orange.webp);
}
.shd .band {
  --slice: 0 100;
  --bw: 0 calc(var(--u) * 2.2);
}
.r-pl {
  --x: 25.4;
  --y: 20.7;
  --w: 17.6;
  --h: 6.4;
}
.r-up {
  --x: 40.2;
  --y: 53.1;
  --w: 19.1;
  --h: 6.4;
}
.hint {
  --x: 43.1;
  --y: 21;
  --w: 31.7;
  --h: 5.5;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 calc(var(--u) * 2.6);
}
.hint::before {
  border-image-source: url(../assets/ui/btn-pill.webp);
}
.hint {
  --slice: 0 65;
  --bw: 0 calc(var(--u) * 2.75);
}
.hint span {
  display: block;
  min-width: 0;
  font-size: max(10px, calc(var(--u) * 2.6));
  font-weight: 600;
  white-space: nowrap;
}
.lvrow {
  --x: 17.3;
  --y: 28.2;
  --w: 65.7;
  --h: 23.9;
  display: flex;
  gap: calc(var(--u) * 0.25);
}
.lvcard {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  border-radius: calc(var(--u) * 1.8);
  border: calc(var(--u) * 0.45) solid #d7a868;
  background: #fff4dc;
  box-shadow: inset 0 calc(var(--u) * -0.7) 0 rgba(215, 168, 104, 0.35);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: calc(var(--u) * 0.9);
  box-sizing: border-box;
}
.lvcard.sel {
  border-color: #7fd84a;
  background: #f2ffd8;
  box-shadow:
    0 0 0 calc(var(--u) * 0.5) #c8f08a,
    inset 0 calc(var(--u) * -0.7) 0 rgba(127, 216, 74, 0.3);
}
.lvcard .lvt {
  font-size: calc(var(--u) * 2.7);
  line-height: calc(var(--u) * 3);
}
.lvcard .pl {
  width: 92%;
  height: calc(var(--u) * 13.4);
  object-fit: contain;
  margin-top: calc(var(--u) * 0.3);
}
.lvcard.locked .pl {
  height: calc(var(--u) * 15.9);
}
.lvcard .pl.shadow {
  filter: brightness(0.55) saturate(0.45) sepia(0.35);
  opacity: 0.8;
} /* a dim peek at the real plant, not a flat blob */
.lvcard .pn {
  display: block;
  max-width: 98%;
  overflow: hidden;
  padding-bottom: 0.22em;
  margin-bottom: -0.1em;
  letter-spacing: -0.035em;
  font-size: max(9px, calc(var(--u) * 2));
  line-height: calc(var(--u) * 2.8);
  font-weight: 600;
  white-space: nowrap;
}
.lvcard .pp {
  position: relative;
  width: 76%;
  height: calc(var(--u) * 4.3);
  margin-top: calc(var(--u) * 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--u) * 0.4);
  font-size: calc(var(--u) * 2.2);
} /* a size smaller */
.lvcard .pp::before {
  border-image-source: url(../assets/ui/pill-cream.webp);
}
.lvcard .pp {
  --slice: 0 61;
  --bw: 0 calc(var(--u) * 2.1);
}
.lvcard .pp img {
  height: calc(var(--u) * 3.3);
}
.lvcard .lk {
  position: absolute;
  right: calc(var(--u) * 0.8);
  bottom: calc(var(--u) * 1);
  height: calc(var(--u) * 4.6);
} /* lock in the corner, the plant stays readable */
.lvcard .ck {
  position: absolute;
  right: calc(var(--u) * -0.9);
  top: calc(var(--u) * -0.6);
  height: calc(var(--u) * 5.1);
}
.upgrid {
  --x: 16.6;
  --y: 60.6;
  --w: 66.8;
  --h: 29.2;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  column-gap: calc(var(--u) * 1.4);
  row-gap: calc(var(--u) * 1.6);
}
.upcard {
  position: relative;
  display: grid;
  grid-template-columns: calc(var(--u) * 10.4) minmax(0, 1fr) calc(var(--u) * 15);
  align-items: center;
  column-gap: calc(var(--u) * 1.8);
  padding: 0 calc(var(--u) * 1.6) 0 calc(var(--u) * 1.8);
  border-radius: calc(var(--u) * 1.8);
  border: calc(var(--u) * 0.45) solid #d7a868;
  background: #fff4dc;
  box-shadow: inset 0 calc(var(--u) * -0.7) 0 rgba(215, 168, 104, 0.35);
  box-sizing: border-box;
}
.upcard .ui {
  width: 100%;
  height: calc(var(--u) * 10.6);
  object-fit: contain;
}
.upcard .ut {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 0.6);
  min-width: 0;
}
.upcard .ut b {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 0.5);
  font-size: calc(var(--u) * 3.1);
  line-height: 1;
  white-space: nowrap;
}
.upcard .ut b span {
  display: block;
  min-width: 0;
  overflow: hidden;
}
.upcard .chip {
  flex: 0 0 auto;
  font-size: max(9px, calc(var(--u) * 2));
  padding: calc(var(--u) * 0.25) calc(var(--u) * 0.9);
  border-radius: 99px;
  border: calc(var(--u) * 0.25) solid var(--ink);
  background: #fff;
}
.upcard .d {
  font-size: max(9.5px, calc(var(--u) * 2.15));
  line-height: 1.18;
  font-weight: 600;
}
.upcard .pv {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 1);
  min-width: 0;
}
.pbar {
  position: relative;
  flex: 0 0 calc(var(--u) * 10.5);
  height: max(7px, calc(var(--u) * 2));
  border-radius: 99px;
  border: max(1.5px, calc(var(--u) * 0.3)) solid var(--ink);
  background: #f3e3c2;
  overflow: hidden;
  box-sizing: border-box;
}
.pbar i {
  position: absolute;
  inset: 0 auto 0 0;
  border-radius: 99px;
  background: linear-gradient(#a8ec62, #55b52a);
}
.upcard .pv em {
  position: relative;
  flex: 0 0 auto;
  height: calc(var(--u) * 3.6);
  padding: 0 calc(var(--u) * 0.6);
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 0.6);
  font-style: normal;
  font-size: max(9px, calc(var(--u) * 2));
  font-weight: 700;
  white-space: nowrap;
}
.upcard .pv em::before {
  border-image-source: url(../assets/ui/pill-cream.webp);
}
.upcard .pv em {
  --slice: 0 61;
  --bw: 0 calc(var(--u) * 1.8);
}
.arr {
  display: block;
  width: 0;
  height: 0;
  border-left: calc(var(--u) * 1) solid #4caf2a;
  border-top: calc(var(--u) * 0.65) solid transparent;
  border-bottom: calc(var(--u) * 0.65) solid transparent;
}
.upcard .buy {
  position: relative;
  height: calc(var(--u) * 7.7);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--u) * 0.8);
  font-size: max(13px, calc(var(--u) * 3.5));
  font-weight: 700;
}
.upcard .buy.can {
  animation: buyglow 1.8s ease-in-out infinite;
}
@keyframes buyglow {
  50% {
    filter: drop-shadow(0 0 calc(var(--u) * 1) rgba(255, 214, 80, 0.95));
  }
}
.upcard .buy::before {
  border-image-source: url(../assets/ui/btn-gold.webp);
}
.upcard .buy {
  --slice: 70;
  --bw: calc(var(--u) * 2.3);
}
.upcard .buy img {
  height: calc(var(--u) * 4.4);
}
.upcard .buy .lkb {
  height: calc(var(--u) * 4.4);
}
.upcard .buy:disabled {
  filter: grayscale(0.55);
  opacity: 0.8;
}
.upcard .buy:active:not(:disabled) {
  transform: scale(0.94);
}

/* phones: a transparent margin around the small buttons makes the tap area ~42px without changing the drawing */
@media (pointer: coarse) {
  .stg button::after {
    content: '';
    position: absolute;
    inset: calc(var(--u) * -0.75) calc(var(--u) * -0.5);
  }
  .stg .upcard .buy::after,
  .stg .x::after {
    inset: calc(var(--u) * -1.6);
  }
  .stg .tg::after {
    inset: calc(var(--u) * -1.2) calc(var(--u) * -0.4);
  }
}

/* decorations from the design (flowers and vines; images, behind the buttons) */
.pau .dv.fl {
  --x: 36.8;
  --y: 19.1;
  --w: 5.7;
  --h: 9.6;
}
.pau .dv.fr {
  --x: 58.3;
  --y: 19.1;
  --w: 6;
  --h: 9.6;
}
.pau .dv.vl1 {
  --x: 32;
  --y: 42;
  --w: 3;
  --h: 11.7;
}
.pau .dv.vr1 {
  --x: 64;
  --y: 42;
  --w: 3.6;
  --h: 11.7;
  transform: scaleX(-1);
}
.pau .dv.vl2 {
  --x: 29.9;
  --y: 80.2;
  --w: 3.6;
  --h: 8.5;
}
.pau .dv.vr2 {
  --x: 65.2;
  --y: 80.2;
  --w: 3.3;
  --h: 8.5;
  transform: scaleX(-1);
}
.pau .dv.fb {
  --x: 45.2;
  --y: 92.5;
  --w: 8.1;
  --h: 5.8;
}
.lose .dv.fl {
  --x: 25.1;
  --y: 21.3;
  --w: 10.2;
  --h: 10.6;
}
.lose .dv.fr {
  --x: 65.8;
  --y: 20.2;
  --w: 9;
  --h: 10.6;
}
.lose .dv.sl {
  --x: 40.4;
  --y: 61.6;
  --w: 4.2;
  --h: 6.4;
}
.lose .dv.sr {
  --x: 72.7;
  --y: 62.2;
  --w: 4.2;
  --h: 6.4;
}

/* wave reward: numbers count up, the total gives its coins away, coins fly to the counter (hud.flyCoins) */
.rows .r b i,
.win .total i {
  font-style: normal;
  display: inline-block;
  font-variant-numeric: tabular-nums;
}
.rows .r b i.done,
.win .total i.done {
  animation: numpop 0.22s cubic-bezier(0.2, 1.6, 0.4, 1);
}
@keyframes numpop {
  50% {
    transform: scale(1.18);
  }
}
.win .total.give {
  animation: give 0.3s cubic-bezier(0.2, 1.5, 0.4, 1);
}
.win .total.give img {
  animation: givecoin 0.35s ease-out;
}
@keyframes give {
  40% {
    transform: scale(1.07);
  }
}
@keyframes givecoin {
  30% {
    transform: translateY(calc(var(--u) * -1.2)) scale(1.12);
  }
}
#fly {
  position: fixed;
  inset: 0;
  z-index: 30;
  pointer-events: none;
  overflow: hidden;
}
.flycoin {
  position: absolute;
  left: 0;
  top: 0;
  will-change: transform;
  filter: drop-shadow(0 2px 0 rgba(58, 36, 22, 0.35));
}
.reduced .rows .r b i.done,
.reduced .win .total i.done,
.reduced .win .total.give,
.reduced .win .total.give img {
  animation: none;
}

/* defeat with only the message (no "so close", no emergency seeds): the line is bigger and centred higher, the retry
   comes up, and Shed / Menu sit lower on the wooden rim, smaller icons */
.lose.plain .col {
  --y: 40;
  --h: 18;
  justify-content: center;
}
.lose.plain .sub {
  font-size: calc(var(--u) * 4.6);
  line-height: 1.25;
  text-align: center;
}
.lose.plain .b-retry {
  --y: 58.5;
}
.lose.plain .defbox {
  --h: 59;
}
.lose.plain .b-shed,
.lose.plain .b-menu {
  --y: 79.4;
}
.lose .b-shed,
.lose .b-menu {
  --y: 85.2;
  --h: 7.4;
}
.lose .b-shed img,
.lose .b-menu img {
  height: 56%;
}

/* green ribbons: the title sits a little higher, on the ribbon's arch */
.rib.pause span {
  margin-top: calc(var(--u) * -6.2);
} /* centred in the green band (its tails hang below) */

/* language: one dropdown in the cream pill (globe left, arrow right); the native list opens on tap */
.lng .langs {
  --y: 36;
  --h: 12;
  display: block;
}
.lng .langs .lang {
  width: 100%;
  height: max(44px, calc(var(--u) * 10));
  padding: 0 calc(var(--u) * 6) 0 calc(var(--u) * 6.4);
  cursor: pointer;
}
.lng .lsel {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  height: 100%;
  border: 0;
  background: transparent;
  font: inherit;
  font-weight: 700;
  font-size: max(14px, calc(var(--u) * 4));
  text-align: center;
  text-align-last: center;
  color: var(--ink);
  cursor: pointer;
  outline: none;
}
.lng .lsel option {
  font-size: 16px;
  color: #3a2416;
  background: #fff7e6;
}
.lng .lg {
  position: absolute;
  left: calc(var(--u) * 1.6);
  height: 62%;
  pointer-events: none;
}
.lng .ld {
  position: absolute;
  right: calc(var(--u) * 1.8);
  height: 46%;
  transform: rotate(180deg);
  pointer-events: none;
}
/* a single dropdown needs a short panel: the panel, the ribbon and Back move in around it */
.lngbox {
  --y: 31;
  --h: 42;
}
.lng .rib {
  --y: 24.6;
}
.lng .langs {
  --y: 43;
}
.lng .b-back {
  --y: 59.5;
}

/* shed price: big numbers (17,748...) shrink to stay inside the gold button */
.upcard .buy .pr {
  display: block;
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
}
.upcard .buy {
  padding: 0 calc(var(--u) * 1.6);
  min-width: 0;
}
.upcard .buy img {
  height: calc(var(--u) * 3.6);
}
.upcard .buy {
  --bw: calc(var(--u) * 1.8);
  gap: calc(var(--u) * 0.5);
}
.lvcard .pp .pr {
  display: block;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
}
.lvcard .pp img {
  height: calc(var(--u) * 2.9);
}
/* green ribbon titles a touch smaller; Japanese, Chinese and Korean glyphs are taller, so a bit more */
.rib.pause span {
  font-size: calc(var(--u) * 6.5 - 3px);
}
html:lang(ja) .rib.pause span,
html:lang(zh) .rib.pause span,
html:lang(ko) .rib.pause span {
  font-size: calc(var(--u) * 5);
  margin-top: calc(var(--u) * -4.4);
}

/* End of css/screens.css */