/* Overlay screens: Royal Aerie (shed), wave held, wall fell (fence), 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(40, 20, 34, 0.58);
}
#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);
}
.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;
}
/* ---- cards arrive with weight (JUICE 22): the panel drops and settles, the title ribbon falls a beat later, medals hit
   one by one (--md, the middle one last), rows slide in and count (--rd). Every entry lives under :not(.skip): one touch
   adds .skip (Screens.skip) and everything is in its final place at once. Entries fill "backwards" only, so a button
   that arrived still sinks when pressed. Less motion: no entries at all (.reduced), same final state. */
.stg:not(.skip):not(.again) {
  animation: carddrop 0.34s backwards;
}
@keyframes carddrop {
  0% {
    transform: translateY(calc(var(--u) * -9));
    opacity: 0;
    animation-timing-function: cubic-bezier(0.5, 0, 0.9, 0.6);
  }
  28% {
    opacity: 1;
  }
  55% {
    transform: translateY(calc(var(--u) * 0.9)) scale(1.012, 0.985);
    opacity: 1;
    animation-timing-function: ease-out;
  }
  80% {
    transform: translateY(calc(var(--u) * -0.25)) scale(0.997, 1.004);
  }
  100% {
    transform: none;
  }
}
.stg:not(.skip):not(.again) :is(.rib, .plank) {
  animation: ribdrop 0.42s 0.14s backwards;
}
@keyframes ribdrop {
  0% {
    transform: translateY(calc(var(--u) * -10)) rotate(-2.5deg);
    opacity: 0;
    animation-timing-function: cubic-bezier(0.5, 0, 0.9, 0.6);
  }
  25% {
    opacity: 1;
  }
  50% {
    transform: translateY(calc(var(--u) * 0.8)) rotate(0.6deg) scale(1.015, 0.96);
    opacity: 1;
    animation-timing-function: ease-out;
  }
  74% {
    transform: translateY(calc(var(--u) * -0.3)) rotate(-0.2deg);
  }
  100% {
    transform: none;
  }
}
/* rows, totals and the buttons of the victory card slide in one after another */
.stg:not(.skip) :is(.rows .r, .total, .vic .rows > *) {
  animation: rowin 0.26s var(--rd, 0s) backwards;
}
@keyframes rowin {
  0% {
    transform: translateX(calc(var(--u) * 4));
    opacity: 0;
  }
  70% {
    transform: translateX(calc(var(--u) * -0.4));
    opacity: 1;
  }
  100% {
    transform: none;
  }
}
/* defeat is gentle: the card rises softly, the ribbon is lowered, nothing bounces, nothing turns red */
.stg.lose:not(.skip) {
  animation: cardsoft 0.45s ease-out backwards;
}
.stg.lose:not(.skip) .rib {
  animation: ribsoft 0.55s 0.12s ease-out backwards;
}
.stg.lose:not(.skip) :is(.hz, .col > *, .pb) {
  animation: risein 0.4s var(--rd, 0.2s) ease-out backwards;
}
.stg.lose:not(.skip) .col > :nth-child(2) {
  --rd: 0.32s;
}
.stg.lose:not(.skip) .col > :nth-child(3) {
  --rd: 0.42s;
}
.stg.lose:not(.skip) .pb {
  --rd: 0.5s;
}
.stg.lose:not(.skip) .close .bar i {
  animation: barfill 0.7s 0.55s cubic-bezier(0.2, 0.8, 0.3, 1) backwards;
}
@keyframes cardsoft {
  from {
    transform: translateY(calc(var(--u) * 3));
    opacity: 0;
  }
}
@keyframes ribsoft {
  from {
    transform: translateY(calc(var(--u) * -5));
    opacity: 0;
  }
}
@keyframes risein {
  from {
    translate: 0 calc(var(--u) * 1.6);
    opacity: 0;
  }
}
@keyframes barfill {
  from {
    width: 0;
  }
}
.stg img.hz,
.stg .star,
.stg .spk,
.stg .slug,
.stg .bf,
.stg .vn,
.stg .dv {
  object-fit: contain;
  pointer-events: none;
}

/* shared plates */
/* every piece placed on the stage knows its own height (the stretchable art of css/game.css needs it) */
.stg > * {
  --H: calc(var(--h) * var(--u));
}
/* panel: the gold frame picture at its real proportion four times, one pinned to each corner, cross-fading in the plain
   middle of the sides (no slices, nothing stretched) */
.pnl {
  pointer-events: none;
}
.pnl i {
  position: absolute;
  inset: 0;
  background: url(../assets/ui/panel.webp) left top / calc(var(--u) * 72) auto no-repeat;
  --keep-x: linear-gradient(90deg, #000 54%, transparent 58%);
  --keep-y: linear-gradient(#000 54%, transparent 58%);
  --in-x: linear-gradient(90deg, transparent 48%, #000 52%);
  --in-y: linear-gradient(transparent 48%, #000 52%);
  -webkit-mask-image: var(--mx), var(--my);
  mask-image: var(--mx), var(--my);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}
/* each later corner fades IN over the earlier ones, which stay solid under the fade (two fades meeting would let the background show through) */
.pnl i:nth-child(1) {
  --mx: var(--keep-x);
  --my: var(--keep-y);
}
.pnl i:nth-child(2) {
  background-position: right top;
  --mx: var(--in-x);
  --my: var(--keep-y);
}
.pnl i:nth-child(3) {
  background-position: left bottom;
  --mx: var(--keep-x);
  --my: var(--in-y);
}
.pnl i:nth-child(4) {
  background-position: right bottom;
  --mx: var(--in-x);
  --my: var(--in-y);
}
/* title ribbons: crimson cloth with dragon wings on both ends (.wing in css/game.css) */
.rib {
  display: grid;
  place-items: center;
  pointer-events: none;
}
.rib span {
  display: block;
  max-width: 92%;
  font-size: calc(var(--u) * 6.5);
  line-height: 1.1;
  font-weight: 700;
  white-space: nowrap;
}
.rib.win {
  --img: url(../assets/ui/ribbon-win.webp);
}
.rib.lose {
  --img: url(../assets/ui/ribbon-lose.webp);
}
.rib.pause {
  --img: url(../assets/ui/ribbon-pause.webp);
}
.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;
}
.pb.green {
  --img: url(../assets/ui/btn-green.webp);
  --ka: 2.211;
}
.pb.orange,
.win .total {
  --img: url(../assets/ui/btn-orange.webp);
  --ka: 2.658;
}
.pb img {
  flex: 0 0 auto;
  height: 70%;
}
.pb span {
  display: block;
  min-width: 0;
  white-space: nowrap;
}

/* 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));
}
.stg .star.unawarded {
  filter: grayscale(1) brightness(0.62) drop-shadow(0 calc(var(--u) * 0.4) 0 rgba(58, 36, 22, 0.4));
  opacity: 0.65;
}
/* an earned medal comes down big and hits (a flash on the medal only), then keeps a slow warm glow; the big middle one
   hits harder. A medal that was not earned just fades in, grey and still. */
.stg:not(.skip) .star {
  animation:
    medal 0.42s var(--md, 0s) backwards,
    medalglow 2.6s calc(var(--md, 0s) + 0.6s) ease-in-out infinite;
}
.stg:not(.skip) .star.s2 {
  animation-name: medaltop, medalglow;
  animation-duration: 0.46s, 2.6s;
}
.stg.skip .star {
  animation: medalglow 2.6s ease-in-out infinite;
}
.stg .star.unawarded,
.stg.skip .star.unawarded {
  animation: none;
}
.stg:not(.skip) .star.unawarded {
  animation: fadeto 0.3s var(--md, 0s) backwards;
}
@keyframes medal {
  0% {
    transform: translateY(calc(var(--u) * -6)) scale(1.9) rotate(-14deg);
    opacity: 0;
    animation-timing-function: cubic-bezier(0.6, 0, 0.9, 0.5);
  }
  30% {
    opacity: 1;
  }
  55% {
    transform: scale(0.93, 0.9) rotate(2deg);
    opacity: 1;
    filter: brightness(1.7) drop-shadow(0 0 calc(var(--u) * 1.2) rgba(255, 226, 120, 0.95));
    animation-timing-function: ease-out;
  }
  78% {
    transform: scale(1.05) rotate(-1deg);
  }
  100% {
    transform: none;
  }
}
@keyframes medaltop {
  0% {
    transform: translateY(calc(var(--u) * -9)) scale(2.4) rotate(12deg);
    opacity: 0;
    animation-timing-function: cubic-bezier(0.6, 0, 0.9, 0.5);
  }
  30% {
    opacity: 1;
  }
  55% {
    transform: scale(0.92, 0.88) rotate(-2deg);
    opacity: 1;
    filter: brightness(1.9) drop-shadow(0 0 calc(var(--u) * 2) rgba(255, 226, 120, 1));
    animation-timing-function: ease-out;
  }
  78% {
    transform: scale(1.07) rotate(1deg);
  }
  100% {
    transform: none;
  }
}
@keyframes medalglow {
  50% {
    filter: brightness(1.12) drop-shadow(0 calc(var(--u) * 0.4) 0 rgba(58, 36, 22, 0.4))
      drop-shadow(0 0 calc(var(--u) * 1.1) rgba(255, 214, 90, 0.85));
  }
}
@keyframes fadeto {
  from {
    opacity: 0;
  }
}
/* the little shine marks beside the outer medals only show once their medal has landed */
.stg:not(.skip) :is(.win, .vic) .spk,
.stg:not(.skip):is(.win, .vic) .spk {
  animation:
    twinkle 1.6s ease-in-out infinite,
    fadeto 0.25s calc(var(--md, 0s) + 0.25s) backwards;
}
.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 .hz,
.vic .hz {
  animation: sea-cheer 1.3s ease-in-out infinite;
  transform-origin: 50% 85%;
}
.stg:not(.skip):is(.win, .vic) .hz {
  animation:
    sea-cheer 1.3s ease-in-out infinite,
    hzin 0.4s 0.2s backwards;
}
@keyframes hzin {
  0% {
    scale: 0.7;
    opacity: 0;
  }
  60% {
    scale: 1.06;
    opacity: 1;
  }
}
@keyframes sea-cheer {
  0%,
  100% {
    transform: rotate(-2deg) translateY(0);
  }
  50% {
    transform: rotate(2deg) translateY(calc(var(--u) * -0.7));
  }
}
.stg .celebration-bubble {
  object-fit: contain;
  pointer-events: none;
  opacity: 0;
  animation: celebration-rise 1.8s ease-out infinite;
}
.stg .celebration-bubble.b0 {
  --x: 20;
  --y: 52;
  --w: 2.3;
  --h: 4;
  animation-delay: 0s;
}
.stg .celebration-bubble.b1 {
  --x: 29;
  --y: 55;
  --w: 1.6;
  --h: 3;
  animation-delay: 0.45s;
}
.stg .celebration-bubble.b2 {
  --x: 23;
  --y: 62;
  --w: 1.7;
  --h: 3;
  animation-delay: 0.9s;
}
.stg .celebration-bubble.b3 {
  --x: 31;
  --y: 48;
  --w: 1.2;
  --h: 2.2;
  animation-delay: 1.2s;
}
@keyframes celebration-rise {
  0% {
    opacity: 0;
    transform: translateY(0) scale(0.6);
  }
  25% {
    opacity: 0.75;
  }
  100% {
    opacity: 0;
    transform: translateY(calc(var(--u) * -7)) scale(1);
  }
}
.boss-reward .hz {
  animation-duration: 0.85s;
}
.reduced .win .hz,
.reduced .vic .hz {
  animation: none;
}
.reduced .celebration-bubble {
  display: none;
}
.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 {
  --H: calc(var(--u) * 7.4);
}
.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 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;
} /* the mascot leans out over the left rim */
.vic .rows .sub {
  margin: 0 0 calc(var(--u) * 1);
}
.vic .rows .pb {
  position: relative;
  --H: calc(var(--u) * 8.4);
  flex: 0 0 var(--H);
}
.sub {
  margin: 0;
  text-align: center;
  font-size: calc(var(--u) * 3.4);
  font-weight: 600;
  line-height: 1.2;
}

/* 07 the fence fell */
.stg.lose {
  top: calc(var(--stage-y) - var(--stage-h) * 0.09);
}
.defbox {
  --x: 17.3;
  --y: 27.1;
  --w: 64;
  --h: 65.4;
}
.lose .bf.l {
  --x: 31.4;
  --y: 13.2;
  --w: 43.1;
  --h: 17.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 {
  --H: calc(var(--u) * 6.6);
}
.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 span {
  position: relative;
  z-index: 1;
} /* the one clear action: a light passes over it like on Play (it never changes size) */
.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;
}

/* 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/ui/ic-coin.webp) center / 108% no-repeat;
  border: 0;
  filter: drop-shadow(0 calc(var(--u) * 0.4) 0 rgba(58, 36, 22, 0.35));
} /* the gold dragon coin is the knob */
.vs::-moz-range-thumb {
  width: calc(var(--u) * 4.6);
  height: calc(var(--u) * 4.6);
  border-radius: 50%;
  background: url(../assets/ui/ic-coin.webp) center / 108% no-repeat;
  border: 0;
}
.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%;
}

/* 05 Royal Aerie (shed) */
/* castle frame: the whole picture, once (the box has its proportion, 1400 x 876: nothing sliced, nothing squashed) */
.shedart {
  --x: 7.55;
  --y: 2.25;
  --w: 84.9;
  --h: 94.5;
  background: url(../assets/ui/shed-panel.webp) center / 100% 100% no-repeat;
  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 {
  --img: url(../assets/ui/plank.webp);
}
.plank span {
  display: block;
  max-width: 90%;
  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);
}
.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;
}
.rsm {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--u) * 0.8);
  padding: 0 calc(var(--u) * 3);
}
.rsm,
.shd .band {
  --img: url(../assets/ui/plaque-orange.webp);
  --ka: 5;
  --kr: 0.54;
}
/* the long band is much wider than its picture and the plaque has a paper grain: its ends fade into the stretched middle (.wing) */
.rsm {
  justify-content: flex-start;
  padding-left: calc(var(--u) * 1);
  padding-right: calc(var(--u) * 3.8);
} /* the text stops before the rivet of the right end */
.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;
}
.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 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.8);
  transform: scale(0.94);
  transform-origin: center top;
}
.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,
.upcard .pv em {
  --img: url(../assets/ui/pill-cream.webp);
  --ka: 1.886;
}
.lvcard .pp {
  --H: calc(var(--u) * 4.3);
}
.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);
  transform: scale(0.94);
  transform-origin: center top;
}
.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: #fffaec;
}
.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) * 1.1);
  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 {
  --H: calc(var(--u) * 3.6);
}
.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 {
  --img: url(../assets/ui/btn-gold.webp);
  --ka: 2.648;
  --H: calc(var(--u) * 7.7);
}
.upcard .buy img {
  height: calc(var(--u) * 4.4);
}
.upcard .buy .lkb {
  height: calc(var(--u) * 4.4);
}
.upcard .buy:disabled,
.upcard .buy.poor {
  filter: grayscale(0.55);
  opacity: 0.8;
}
/* not enough coins: the button says a short "no" by itself (no red, no loud sound) */
.upcard .buy.no {
  animation: shake 0.3s;
}
/* a purchase is answered on its card (JUICE 23): a check stamp hits the corner, the card gives a small pop, the level
   bar fills past the mark and settles, the new price rolls in (coins leaving the purse: Screens.bought) */
.upcard.stamped {
  animation: cardpop 0.3s cubic-bezier(0.2, 1.5, 0.4, 1);
}
@keyframes cardpop {
  35% {
    transform: scale(1.035);
  }
}
.upcard .stamp {
  position: absolute;
  right: calc(var(--u) * -1.4);
  top: calc(var(--u) * -2.2);
  height: calc(var(--u) * 6.4);
  z-index: 2;
  pointer-events: none;
  animation: stamp 0.9s both;
}
@keyframes stamp {
  0% {
    transform: scale(2.6) rotate(-24deg);
    opacity: 0;
    animation-timing-function: cubic-bezier(0.6, 0, 0.9, 0.5);
  }
  16% {
    transform: scale(0.9) rotate(-10deg);
    opacity: 1;
    animation-timing-function: ease-out;
  }
  26% {
    transform: scale(1.06) rotate(-12deg);
  }
  34%,
  72% {
    transform: rotate(-12deg);
    opacity: 1;
  }
  100% {
    transform: translateY(calc(var(--u) * -1.5)) rotate(-12deg);
    opacity: 0;
  }
}
.upcard.stamped .pbar i {
  transition: width 0.55s cubic-bezier(0.3, 1.9, 0.5, 1);
}
.upcard.stamped .buy .pr {
  animation: priceroll 0.34s 0.1s cubic-bezier(0.2, 1.4, 0.4, 1) backwards;
}
@keyframes priceroll {
  from {
    transform: translateY(90%);
    opacity: 0;
  }
}
.reduced .upcard .stamp {
  display: none;
}

/* phones: a transparent margin around the small buttons makes the tap area ~42px without changing the drawing */
@media (pointer: coarse) {
  .stg button:not(.nine)::after {
    content: '';
    position: absolute;
    inset: calc(var(--u) * -0.75) calc(var(--u) * -0.5);
  }
  .stg .x:not(.nine)::after {
    inset: calc(var(--u) * -1.6);
  }
  /* buttons with stretchable art: the art's own ::before grows a transparent rim that takes the touch */
  .stg button.nine {
    --hitx: calc(var(--u) * 0.5);
    --hity: calc(var(--u) * 0.75);
  }
  .stg .upcard .buy {
    --hitx: calc(var(--u) * 1.6);
    --hity: calc(var(--u) * 1.6);
  }
  .stg button.nine::before {
    pointer-events: auto;
  }
}

/* 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);
  }
}
/* the total locks: a short warm highlight on the pill (light, the size barely moves) */
.win .total.lock {
  animation: totallock 0.4s ease-out;
}
@keyframes totallock {
  30% {
    transform: scale(1.05);
    filter: brightness(1.25) drop-shadow(0 0 calc(var(--u) * 1.6) rgba(255, 214, 90, 0.95));
  }
}
.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%;
  --H: max(44px, calc(var(--u) * 10));
  height: var(--H);
  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 {
  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);
}

/* Pause: the mascot and corals sit behind the ribbon instead of floating beside it. */
.pau .hz {
  --y: 6.6;
  transform: rotate(-6deg);
  transform-origin: 50% 90%;
}
.pau .dv.fl {
  --x: 37.8;
  --y: 25.1;
  transform: rotate(-18deg);
  transform-origin: 50% 90%;
}
.pau .dv.fr {
  --x: 57.3;
  --y: 25.1;
  transform: rotate(18deg);
  transform-origin: 50% 90%;
}
.pau .rib.pause span {
  margin-top: calc(var(--u) * -6.2 + 5px);
}
html:lang(ja) .pau .rib.pause span,
html:lang(zh) .pau .rib.pause span,
html:lang(ko) .pau .rib.pause span {
  margin-top: calc(var(--u) * -4.4 + 5px);
}

/* The ribbon has a full-height face; centre all settings and pause titles in it. */
.rib.pause span,
.pau .rib.pause span,
html:lang(ja) .rib.pause span,
html:lang(zh) .rib.pause span,
html:lang(ko) .rib.pause span,
html:lang(ja) .pau .rib.pause span,
html:lang(zh) .pau .rib.pause span,
html:lang(ko) .pau .rib.pause span {
  margin-top: 0;
}

/* ================================================================ Dragon Roost: sizes of the themed pieces
   Title ribbons: straight crimson cloth with dragon wings at the ends (the wings sit on the caps and go past the
   panel); the face spans 41% to 87% of the height, so the title moves down 13.6% and does not curve. */
.rib span.arced i {
  transform: none !important;
}
.rib span,
.rib.pause span,
.pau .rib.pause span,
.plank span {
  position: relative;
  margin-top: 0 !important;
}
.rib.pause span {
  top: calc(var(--u) * 2.1);
  max-width: 90%;
  font-size: calc(var(--u) * 5.8);
}
html:lang(ja) .rib.pause span,
html:lang(zh) .rib.pause span,
html:lang(ko) .rib.pause span {
  font-size: calc(var(--u) * 5);
}
.pau .rib {
  --x: 27;
  --y: 25.7;
  --w: 46;
  --h: 15.5;
}
.set .rib {
  --x: 27;
  --y: 20.6;
  --w: 46;
  --h: 15.5;
}
.snd .rib {
  --x: 25;
  --y: 14.6;
  --w: 50;
  --h: 15.5;
}
.lng .rib {
  --x: 27;
  --y: 21.6;
  --w: 46;
  --h: 15.5;
}
.rib.win span {
  top: calc(var(--u) * 1.9);
  max-width: 92%;
  font-size: calc(var(--u) * 5.2);
}
.win .rib,
.vic .rib {
  --x: 15;
  --y: 21.5;
  --w: 47.4;
  --h: 14;
}
.lose .rib {
  --x: 26;
  --y: 24.2;
  --w: 46.4;
  --h: 13.5;
}
.lose .rib span {
  top: calc(var(--u) * 1.84);
  max-width: 92%;
  font-size: calc(var(--u) * 5.2);
}
/* Royal Aerie: the same ribbon over the panel crest; castle frame without squashing */
.plank {
  --x: 30;
  --y: 3.2;
  --w: 40;
  --h: 15;
}
.plank span {
  top: calc(var(--u) * 2.04);
  max-width: 90%;
  font-size: calc(var(--u) * 5.6);
}
.shedcoins {
  --x: 66;
}
.shd .x {
  --x: 77.4;
}
/* pause: towers in the bottom corners of the panel; nothing hangs from the frame */
.pau .dv.vl1,
.pau .dv.vr1 {
  display: none;
}
.pau .dv.vl2 {
  --x: 32.4;
  --y: 86.4;
  --w: 4.6;
  --h: 9.4;
}
.pau .dv.vr2 {
  --x: 63;
  --y: 86.4;
  --w: 4.6;
  --h: 9.4;
}
/* defeat: the broken wall shows behind the ribbon, above the panel */
.stg.lose::before {
  content: '';
  position: absolute;
  left: 29.2%;
  top: 11.3%;
  width: 40%;
  height: 19.5%;
  background: url(../assets/ui/broken-fence.webp) center bottom / contain no-repeat;
  pointer-events: none;
}
.lose .dv {
  display: none;
}
.rows .r {
  padding-left: calc(var(--u) * 2.2);
  gap: calc(var(--u) * 0.6);
}
.win .rows {
  --x: 32.2;
  --w: 24.6;
} /* the lines end before the golden frame of the panel; long text shrinks on its own */
.win .total {
  --x: 32.2;
}
.rows .r {
  padding: 0 calc(var(--u) * 1.2) 0 calc(var(--u) * 1.9);
}

/* End of css/screens.css */