/* Dynamite Gulch: theme skin on top of style.css (which holds the game's layout and states).
   Sizes in px on the reference phone (390 wide); the whole HUD scales by --hud-z.
   Conversion: px of the design (853 wide) x 0.4572. */

@font-face {
  font-family: 'Fraunces';
  font-weight: 100 900;
  font-display: swap;
  src: url(./assets/fonts/fraunces-latin-variable.woff2) format('woff2');
}

:root {
  --font:
    'Fraunces', 'Chakra Petch', 'Trebuchet MS', system-ui, 'Noto Sans', 'Hiragino Sans', 'Apple SD Gothic Neo',
    'PingFang SC', 'Microsoft YaHei', 'Malgun Gothic', 'Yu Gothic', serif;
  --cream: #fff3d6;
  --brown: #3a1a08;
  --gold: #ffc928;
}

/* text style: cream with a brown outline behind it */
.hud-name,
.lvl-badge b,
.hud-stat .lbl,
.hud-stat.alive b,
.pulse-label,
.speed-btn b {
  color: var(--cream);
  -webkit-text-stroke: 3px var(--brown);
  paint-order: stroke fill;
  text-shadow: 0 1.5px 0 rgba(40, 16, 4, 0.55);
}

/* ---------- portrait HUD: wooden bar ---------- */
.hud .gp {
  filter: drop-shadow(0 5px 7px rgba(20, 8, 0, 0.5));
}
.hud:not(.landscape) .hud-panel.a {
  grid-template-columns: auto auto minmax(0, 1fr) auto;
  grid-template-rows: 35px minmax(0, 1fr);
  align-items: start;
  padding: 0 24px 0 16px;
}
.hud:not(.landscape) .hud-panel.a::before {
  display: none;
}
.hud:not(.landscape) .hud-panel.a::after {
  inset: 0;
  clip-path: none;
  background: url(./assets/art/hud-panel.webp) center / 100% 100% no-repeat;
}

/* pause and settings: wooden plates with rivets */
.hud:not(.landscape) .hud-btns {
  gap: 8px;
  padding-right: 0;
  margin-right: -3px;
  align-self: start;
  padding-top: 15px;
}
.hud:not(.landscape) .hud-btns::after {
  display: none;
}
.hud:not(.landscape) .hud-btn {
  width: 41px;
  height: 40px;
  color: var(--cream);
} /* 40 px: minimum touch target */
.hud:not(.landscape) .hud-btn::before {
  inset: 0;
  clip-path: none;
  box-shadow: none;
  background: url(./assets/art/hud-btn.webp) center / 100% 100% no-repeat;
}
.hud-btn svg {
  width: 21px;
  height: 21px;
  filter: drop-shadow(0 1.5px 0 var(--brown)) drop-shadow(0 0 1px var(--brown));
}

/* level badge: golden wheel with the number */
.hud:not(.landscape) .lvl-badge {
  width: 61px;
  height: 63px;
  margin: 4px 7px 0 0;
  clip-path: none;
  background: url(./assets/art/wheel.webp) center / contain no-repeat;
}
.lvl-badge::before {
  display: none;
}
.hud:not(.landscape) .lvl-badge b {
  font-size: 24px;
  font-weight: 900;
}

.hud:not(.landscape) .lvl-text {
  align-self: start;
  padding: 9px 4px 0 0;
}
.hud:not(.landscape) .hud-name {
  font-size: 15.5px;
  font-weight: 800;
  -webkit-text-stroke-width: 2.6px;
  letter-spacing: 0.005em;
}

/* score */
.hud:not(.landscape) .hud-stat.score {
  width: auto;
  min-width: 54px;
  align-self: start;
  padding-top: 4px;
  gap: 0;
}
.hud:not(.landscape) .hud-stat.score .lbl {
  font-size: 13px;
  font-weight: 800;
  -webkit-text-stroke-width: 2.4px;
}
.hud-stat.score b {
  font-size: 21px;
  line-height: 1;
  font-weight: 900;
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  color: var(--gold);
  -webkit-text-stroke: 3px var(--brown);
  paint-order: stroke fill;
  filter: drop-shadow(0 2px 0 rgba(40, 16, 4, 0.6));
}

/* blocks left: crate, number and gold bar in a dark groove */
.hud:not(.landscape) .hud-stat.alive {
  align-self: start;
  margin-top: -2px;
  gap: 7px;
  grid-template-columns: auto auto 1fr auto;
}
.hud:not(.landscape) .hud-stat.alive .gem-ring {
  width: 18px;
  height: 18px;
  background: url(./assets/art/icon-crate.webp) center / contain no-repeat;
}
.hud:not(.landscape) .hud-stat.alive .gem {
  display: none;
}
.hud:not(.landscape) .hud-stat.alive b {
  font-size: 16.5px;
  font-weight: 900;
  min-width: 18px;
  -webkit-text-stroke-width: 2.6px;
}
.hud:not(.landscape) .hud-stat.alive .bar {
  height: 15px;
  clip-path: none;
  border-radius: 8px;
  background: #5a2c10;
  box-shadow:
    inset 0 2px 3px rgba(0, 0, 0, 0.7),
    inset 0 0 0 1.5px #1b0b03,
    0 1px 0 rgba(255, 210, 150, 0.28);
}
.hud-stat.alive .bar i {
  margin: 2.5px;
  height: calc(100% - 5px);
  border-radius: 6px;
  background: linear-gradient(180deg, #fff0a0, #ffc62e 45%, #f0900f);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    0 0 6px rgba(255, 190, 60, 0.55);
}

/* ---------- logo strip ---------- */
.hud-brand {
  position: absolute;
  pointer-events: none;
}
.hud-brand .brand-logo {
  position: absolute;
  left: 50%;
  top: 1px;
  height: 100%;
  width: auto;
  transform: translateX(-50%);
  filter: drop-shadow(0 3px 4px rgba(20, 8, 0, 0.45));
}
.hud:not(.landscape) .hud-brand {
  z-index: 3;
}

/* ---------- portrait HUD: bottom buttons ---------- */
/* from here down is the hull: dark wood */
.hud:not(.landscape)::before {
  background:
    linear-gradient(180deg, rgba(24, 10, 3, 0.2), rgba(24, 10, 3, 0.62)),
    url(./assets/art/wood.webp) 0 0 / 230px auto;
  box-shadow:
    inset 0 3px 0 rgba(255, 200, 140, 0.16),
    inset 0 8px 10px rgba(0, 0, 0, 0.35);
}
.hud:not(.landscape) .hud-panel.b {
  grid-template-columns: 78px 210px 78px;
  justify-content: space-between;
  align-items: start;
  gap: 0;
  padding: 0 2px;
}

/* Bomb power: bronze porthole; the label is a hanging wooden sign */
.pulse-btn {
  gap: 0;
  color: var(--cream);
}
.hud:not(.landscape) .pulse-btn .orb {
  width: 76px;
  height: 76px;
}
.pulse-btn .orb,
.pulse-btn.charged .orb,
.pulse-btn.armed .orb {
  border-radius: 50%;
  box-shadow: none;
  background: url(./assets/art/pulse-idle.webp) center / contain no-repeat;
}
.pulse-btn .orb {
  filter: saturate(0.5) brightness(0.78);
  transition: filter 0.2s;
}
.pulse-btn.charged .orb {
  filter: drop-shadow(0 0 7px rgba(120, 200, 255, 0.85));
}
.pulse-btn.armed .orb {
  background-image: url(./assets/art/pulse-armed.webp);
  filter: drop-shadow(0 0 9px rgba(255, 150, 40, 0.95));
}
.pulse-btn.locked .orb {
  filter: grayscale(0.85) brightness(0.6);
}
.pulse-btn .pulse-icon {
  display: none;
}
.pulse-btn .pulse-lock {
  width: 26px;
  height: 26px;
  color: var(--cream);
  filter: drop-shadow(0 1.5px 0 var(--brown));
}
/* charge: the segments light up in gold around the porthole */
.pulse-btn .pulse-ring {
  width: 100%;
  height: 100%;
  opacity: 0.95;
}
.pulse-btn.charged .pulse-ring,
.pulse-btn.armed .pulse-ring,
.pulse-btn.locked .pulse-ring {
  opacity: 0;
}
.pulse-label {
  display: grid;
  place-items: center;
  min-width: 71px;
  height: 25px;
  padding-inline: 10px;
  margin-top: -9px;
  position: relative;
  z-index: 1;
  padding-bottom: 1px;
  background: url(./assets/art/label.webp) center / 100% 100% no-repeat;
  font-size: 13px;
  font-weight: 900;
  -webkit-text-stroke-width: 2.4px;
}
.pulse-btn.charged .pulse-label,
.pulse-btn.armed .pulse-label {
  color: var(--cream);
}

/* middle gold plate: volley, stars and goal (or the level hint) */
.hud:not(.landscape) .volley-info,
.hud:not(.landscape) #btn-end {
  width: 210px;
  height: 66px;
  margin-top: 7px;
  padding: 5px 24px 8px;
  clip-path: none;
  box-shadow: none;
  border: 0;
  color: #4a2408;
  background: url(./assets/art/plaque-gold.webp) center / 100% 100% no-repeat; /* whole image at its own aspect ratio: no seams */
}
.hud:not(.landscape) .volley-info::before,
.hud:not(.landscape) .volley-info::after {
  display: none;
}
.hud:not(.landscape) #hud-volley {
  font-size: 16px;
  font-weight: 900;
  color: #4a2408;
}
.hud:not(.landscape) #hud-par {
  font-size: 12.5px;
  font-weight: 800;
  color: #7a430f;
}
.vi-hint {
  font-size: 14.5px;
  font-weight: 800;
  line-height: 1.16;
  color: #4a2408;
}
.hud:not(.landscape) .star-meter .sm {
  width: 20px;
  height: 20px;
}
.star-meter .sm {
  --sf-l: rgba(90, 44, 8, 0.22);
  --sf-d: rgba(90, 44, 8, 0.14);
  --sf-o: rgba(90, 44, 8, 0.45);
}
.star-meter .sm.on {
  --sf-l: #fff6c2;
  --sf-d: #ffb11e;
  --sf-o: #6b3a00;
  filter: drop-shadow(0 1px 0 rgba(90, 44, 8, 0.7));
}
.hud.danger .volley-info {
  animation: plaqueDanger 0.9s ease-in-out infinite;
}
@keyframes plaqueDanger {
  50% {
    filter: drop-shadow(0 0 8px #ff3d2e) brightness(1.06);
  }
}
.pill.end {
  animation: slideUp 0.16s ease-out;
}
.pill.end b {
  font-size: 17px;
  font-weight: 900;
}
.pill.end small {
  font-size: 12.5px;
  font-weight: 800;
  color: #7a430f;
}
.pill.end svg {
  width: 26px;
  height: 26px;
  color: #4a2408;
}

/* speed: purple button with a steel frame */
.hud:not(.landscape) .speed-btn {
  width: 78px;
  height: 71px;
  margin-top: 5px;
  gap: 0;
  background: url(./assets/art/btn-speed.webp) center / 100% 100% no-repeat;
}
.hud:not(.landscape) .speed-btn::before,
.hud:not(.landscape) .speed-btn::after {
  display: none;
}
.speed-btn {
  --chev1: 1;
} /* both arrows filled; at 2x the button lights up */
.speed-btn svg {
  width: 30px;
  height: 30px;
  color: var(--cream);
  filter: drop-shadow(0 1.5px 0 var(--brown));
}
.hud:not(.landscape) .speed-btn b {
  font-size: 23px;
  line-height: 0.9;
  font-weight: 900;
  margin-top: -1px;
}
.speed-btn[aria-pressed='true'] {
  filter: brightness(1.18) drop-shadow(0 0 6px rgba(255, 214, 120, 0.7));
}

/* ---------- menu ---------- */
/* --u = 1 px of the menu design (390 x 843, portrait). Everything in the menu is measured in --u, so the screen
   scales evenly.
   The screen is a container: cqw/cqh measure the real visible area (vh is wrong on phones with the browser bar). */
.screen.title {
  container-type: size;
  --u: min(calc(100cqw / 390), calc(100cqh / 843));
  padding: 0;
  justify-content: flex-start;
  background:
    url(./assets/art/menu-plate.webp) center / auto 100% no-repeat,
    #16283a url(./assets/art/bg.webp) center / cover no-repeat;
}
@media (max-aspect-ratio: 853/1844) {
  .screen.title {
    background: url(./assets/art/menu-plate.webp) center / cover no-repeat;
  }
}
.screen.title > * {
  zoom: 1;
} /* the menu already scales as a whole via --u; the global screen zoom (--ui-z) would apply it twice */
body.menu canvas#game,
body.menu canvas#post {
  filter: none;
  visibility: hidden;
} /* the menu plate covers everything: the background demo is hidden */
.logo-scrim {
  display: none;
}
.title-wrap {
  width: calc(var(--u) * 390);
  gap: 0;
  padding-top: calc(var(--u) * 91);
}
.logo {
  width: calc(var(--u) * 382);
  height: auto;
  margin: 0;
  filter: drop-shadow(0 calc(var(--u) * 5) calc(var(--u) * 6) rgba(20, 8, 0, 0.45));
  -webkit-user-drag: none;
}
.logo.pop {
  animation: logoPop 0.55s cubic-bezier(0.2, 1.4, 0.4, 1) both;
}
.logo.tap {
  animation: logoTap 0.32s cubic-bezier(0.3, 1.6, 0.5, 1);
}
@keyframes logoPop {
  from {
    transform: translateY(calc(var(--u) * -18)) scale(0.86);
    opacity: 0;
  }
}
@keyframes logoTap {
  35% {
    transform: scale(1.05, 0.95);
  }
  70% {
    transform: scale(0.98, 1.03);
  }
}

.tagline {
  margin: calc(var(--u) * -8) 0 0;
  font-size: calc(var(--u) * 21);
  font-weight: 800;
  letter-spacing: 0.01em;
  line-height: 1.1;
  color: var(--cream);
  -webkit-text-stroke: calc(var(--u) * 3.4) var(--brown);
  paint-order: stroke fill;
  text-shadow: 0 calc(var(--u) * 2) 0 rgba(40, 16, 4, 0.55);
}
.title-actions {
  gap: 0;
  margin-top: calc(var(--u) * 17);
}

/* Play: gold plate with rivets */
.title-actions .btn.big {
  width: calc(var(--u) * 319);
  min-width: 0;
  height: calc(var(--u) * 78);
  min-height: 0;
  padding: 0 0 calc(var(--u) * 4);
  gap: calc(var(--u) * 10);
  clip-path: none;
  box-shadow: none;
  overflow: visible;
  background: url(./assets/art/btn-play.webp) center / 100% 100% no-repeat;
  font-size: calc(var(--u) * 42);
  font-weight: 900;
  letter-spacing: 0;
  text-shadow: none;
  color: var(--cream);
  -webkit-text-stroke: calc(var(--u) * 5) var(--brown);
  paint-order: stroke fill;
  filter: drop-shadow(0 calc(var(--u) * 4) calc(var(--u) * 4) rgba(20, 8, 0, 0.5));
}
.title-actions .btn.big svg {
  width: calc(var(--u) * 30);
  height: calc(var(--u) * 32);
  color: var(--cream);
  fill: var(--cream);
  stroke: var(--brown);
  stroke-width: 3.6;
  paint-order: stroke fill;
  stroke-linejoin: round;
  overflow: visible;
}
.title-actions .btn.primary::after {
  display: none;
}
.title-actions .btn.big:active {
  transform: translateY(calc(var(--u) * 3)) scale(0.985);
  filter: brightness(0.94);
  box-shadow: none;
}

/* Levels, Skins, Ranking: wooden plates with the icon on top and the name below */
.title-row {
  width: calc(var(--u) * 343);
  gap: calc(var(--u) * 6.5);
  margin-top: calc(var(--u) * 14);
}
.title-row .btn {
  height: calc(var(--u) * 83);
  min-height: 0;
  padding: calc(var(--u) * 4) 0 calc(var(--u) * 9);
  gap: 0;
  justify-content: flex-end;
  clip-path: none;
  box-shadow: none;
  background: url(./assets/art/btn-wood.webp) center / 100% 100% no-repeat;
  font-size: calc(var(--u) * 19.5);
  font-weight: 900;
  letter-spacing: 0;
  line-height: 1.05;
  color: var(--cream);
  -webkit-text-stroke: calc(var(--u) * 4.4) var(--brown);
  paint-order: stroke fill;
  filter: drop-shadow(0 calc(var(--u) * 3) calc(var(--u) * 3) rgba(20, 8, 0, 0.5));
}
.title-row .btn svg {
  display: none;
}
.title-row .btn::before {
  content: '';
  flex: 1;
  width: 56%;
  min-height: 0;
  margin-bottom: calc(var(--u) * 2);
  background: center / contain no-repeat;
}
#btn-rank::before {
  width: 48%;
}
#btn-skins::before {
  width: 60%;
}
#btn-levels::before {
  background-image: url(./assets/art/icon-map.webp);
}
#btn-skins::before {
  background-image: url(./assets/art/icon-ball.webp);
}
#btn-rank::before {
  background-image: url(./assets/art/icon-trophy.webp);
}
.title-row .btn:active {
  transform: translateY(calc(var(--u) * 2)) scale(0.97);
  filter: brightness(0.92);
  box-shadow: none;
}

/* stars and best score */
.title-meta {
  margin-top: calc(var(--u) * 15);
  gap: calc(var(--u) * 7);
  font-size: calc(var(--u) * 20);
  font-weight: 900;
  line-height: 1.1;
  color: var(--cream);
  -webkit-text-stroke: calc(var(--u) * 3.4) var(--brown);
  paint-order: stroke fill;
}
.title-meta svg {
  width: calc(var(--u) * 22);
  height: calc(var(--u) * 22);
  background: url(./assets/art/icon-star.webp) center / contain no-repeat;
  filter: drop-shadow(0 calc(var(--u) * 1.5) 0 rgba(40, 16, 4, 0.7));
}
.title-meta svg.tr {
  background-image: url(./assets/art/icon-trophy.webp);
  width: calc(var(--u) * 26);
  height: calc(var(--u) * 24);
}
.title-meta svg use {
  display: none;
}
.title-meta .sep {
  width: calc(var(--u) * 5);
  height: calc(var(--u) * 5);
  background: var(--cream);
  opacity: 1;
  box-shadow: 0 0 0 calc(var(--u) * 1.6) var(--brown);
  margin: 0 calc(var(--u) * 3);
}

/* tap to start */
.screen.title.splash .tap-start {
  margin-top: calc(var(--u) * 40);
  font-size: calc(var(--u) * 26);
  font-weight: 900;
  color: var(--cream);
  -webkit-text-stroke: calc(var(--u) * 4) var(--brown);
  paint-order: stroke fill;
}
.screen.title.splash .tap-start svg {
  width: calc(var(--u) * 34);
  height: calc(var(--u) * 34);
  color: var(--gold);
  filter: drop-shadow(0 calc(var(--u) * 2) 0 var(--brown));
}

/* settings, fullscreen and language: small gold plates on the bottom panel */
.screen.title .corner-tools {
  left: 0;
  right: 0;
  justify-content: center;
  gap: calc(var(--u) * 10);
  bottom: calc(var(--u) * 22 + var(--sab));
}
.screen.title .icon-btn,
.screen.title .lang-pick {
  height: calc(var(--u) * 46);
  clip-path: none;
  box-shadow: none;
  background: none;
  color: var(--cream);
  border-style: solid;
  border-color: transparent;
  border-width: calc(var(--u) * 15) calc(var(--u) * 17);
  border-image: url(./assets/art/btn-gold.webp) 58 66 fill / calc(var(--u) * 16) calc(var(--u) * 18) stretch;
  filter: drop-shadow(0 calc(var(--u) * 3) calc(var(--u) * 3) rgba(20, 8, 0, 0.5));
}
.screen.title .icon-btn {
  width: calc(var(--u) * 54);
}
.screen.title .icon-btn svg {
  width: calc(var(--u) * 30);
  height: calc(var(--u) * 30);
  margin: calc(var(--u) * -8);
  filter: drop-shadow(0 calc(var(--u) * 1.5) 0 var(--brown)) drop-shadow(0 0 calc(var(--u) * 1) var(--brown));
}
/* language: the plate grows with the name (the native <select> sizes to the longest name in the list;
   field-sizing, where supported, sizes to the selected one) */
.screen.title .lang-pick {
  padding: 0;
  gap: calc(var(--u) * 6);
  width: auto;
  min-width: calc(var(--u) * 174);
  max-width: calc(var(--u) * 236);
  justify-content: flex-start;
}
.screen.title .lang-pick svg {
  width: calc(var(--u) * 27);
  height: calc(var(--u) * 27);
  margin: calc(var(--u) * -7) 0;
  stroke: currentColor;
  stroke-width: 0.9;
  filter: drop-shadow(0 calc(var(--u) * 1.5) 0 var(--brown));
}
.screen.title .lang-pick select {
  flex: 1 1 auto;
  min-width: 0;
  field-sizing: content;
  text-overflow: ellipsis;
  margin: calc(var(--u) * -8) 0;
  padding: 0 calc(var(--u) * 22) 0 0;
  font-size: calc(var(--u) * 20);
  font-weight: 900;
  color: var(--cream);
  -webkit-text-stroke: calc(var(--u) * 3) var(--brown);
  paint-order: stroke fill;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='11' viewBox='0 0 16 11'%3E%3Cpath d='M2 2l6 6 6-6' fill='none' stroke='%233a1a08' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M2 2l6 6 6-6' fill='none' stroke='%23fff3d6' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size: calc(var(--u) * 16) auto;
}

/* ---------- desktop and phone in landscape: wooden side cards ---------- */
.hud.landscape .hud-panel::before {
  display: none;
}
.hud.landscape .hud-panel::after {
  inset: 0;
  clip-path: none;
  background: none;
  border-style: solid;
  border-color: transparent;
  border-width: 30px 28px;
  border-image: url(./assets/art/panel-tall.webp) 74 68 fill / 30px 28px stretch;
}
.hud.landscape .hud-panel {
  padding: 24px 22px 26px;
}
.hud.landscape .hud-btn {
  color: var(--cream);
}
.hud.landscape .hud-btn::before {
  clip-path: none;
  box-shadow: none;
  background: url(./assets/art/hud-btn.webp) center / 100% 100% no-repeat;
}
.hud.landscape .hud-btn::after {
  display: none;
}
.hud.landscape .lvl-badge {
  width: 66px;
  height: 68px;
  clip-path: none;
  background: url(./assets/art/wheel.webp) center / contain no-repeat;
}
.hud.landscape .lvl-badge b {
  font-size: 26px;
  font-weight: 900;
}
.hud.landscape .hud-name {
  font-size: 20px;
  font-weight: 800;
}
/* hint: parchment note */
.hud.landscape .hud-hint {
  padding: 12px 16px;
  border-left: 0;
  background: url(./assets/art/hint-plaque.webp) center / 100% 100% no-repeat;
  color: #4a2408;
  font-weight: 700;
  font-size: 14px;
  line-height: 1.3;
}
.hud.landscape .hud-hint svg {
  color: #7a430f;
}
/* blocks left */
.hud.landscape .gem-ring {
  background: url(./assets/art/icon-crate.webp) center / 76% no-repeat;
}
.hud.landscape .gem-ring .gem {
  display: none;
}
.hud.landscape .gem-ring .track {
  stroke: rgba(40, 16, 4, 0.55);
}
.hud.landscape .gem-ring .fill {
  stroke: var(--gold);
  filter: none;
}
.hud.landscape .hud-stat.alive b {
  font-weight: 900;
}
.hud.landscape .hud-stat.alive .bar {
  height: 14px;
  clip-path: none;
  border-radius: 8px;
  background: #2b1408;
  box-shadow:
    inset 0 2px 3px rgba(0, 0, 0, 0.7),
    inset 0 0 0 1.5px #1b0b03,
    0 1px 0 rgba(255, 210, 150, 0.28);
}
.hud.landscape .ch-head small,
.hud.landscape .ch-head {
  color: var(--cream);
  font-weight: 800;
}
/* score and bottom buttons: wooden box with a gold frame */
.hud.landscape .well::before {
  display: none;
}
.hud.landscape .well::after {
  inset: 0;
  clip-path: none;
  background: url(./assets/art/score-box.webp) center / 100% 100% no-repeat;
}
.hud.landscape .hud-foot {
  padding: 14px 22px;
}
.hud.landscape .hud-stat.score .lbl {
  font-size: 15px;
  font-weight: 800;
}
.hud.landscape .hud-stat.score b {
  font-size: 40px;
}
.hud.landscape .hud-stat.best {
  color: var(--cream);
  font-weight: 800;
}
/* volley, stars and the goal ladder */
.hud.landscape #hud-volley {
  font-size: 26px;
  font-weight: 900;
  color: var(--cream);
  -webkit-text-stroke: 3.4px var(--brown);
  paint-order: stroke fill;
}
.hud.landscape #hud-par {
  color: var(--cream);
}
.hud.landscape .star-meter .sm {
  --sf-l: rgba(40, 16, 4, 0.35);
  --sf-d: rgba(40, 16, 4, 0.25);
  --sf-o: rgba(255, 214, 110, 0.35);
}
.hud.landscape .star-legend .lg {
  height: 54px;
  padding: 0 20px;
  clip-path: none;
  background: url(./assets/art/row-plaque.webp) center / 100% 100% no-repeat;
  box-shadow: none;
  color: var(--cream);
  font-weight: 800;
}
.hud.landscape .star-legend .lg.now {
  background: url(./assets/art/row-plaque.webp) center / 100% 100% no-repeat;
  box-shadow: none;
  filter: brightness(1.22) drop-shadow(0 0 5px rgba(255, 214, 120, 0.65));
}
.hud.danger.landscape .star-legend .lg.now {
  background: url(./assets/art/row-plaque.webp) center / 100% 100% no-repeat;
  box-shadow: none;
  filter: drop-shadow(0 0 6px #ff3d2e);
}
.hud.landscape .speed-btn {
  width: 78px;
  height: 71px;
  background: url(./assets/art/btn-speed.webp) center / 100% 100% no-repeat;
}
.hud.landscape .speed-btn::before,
.hud.landscape .speed-btn::after {
  display: none;
}
.hud.landscape .speed-btn b {
  font-size: 20px;
  font-weight: 900;
}
.hud.landscape #btn-end {
  clip-path: none;
  box-shadow: none;
  background: url(./assets/art/plaque-gold.webp) center / 100% 100% no-repeat;
  color: #4a2408;
}

/* ---------- menu on desktop ---------- */
@media (min-aspect-ratio: 1/1) {
  .screen.title {
    --u: min(calc(100cqh / 540), calc(100cqw / 780));
    background: url(./assets/art/menu-plate-desktop.webp) center / cover no-repeat;
  }
  .title-wrap {
    padding-top: calc(var(--u) * 10);
  }
  .logo {
    width: calc(var(--u) * 372);
  }
  .title-actions {
    margin-top: calc(var(--u) * 12);
  }
  .title-actions .btn.big {
    height: calc(var(--u) * 58);
    font-size: calc(var(--u) * 35);
    -webkit-text-stroke-width: calc(var(--u) * 4.4);
  }
  .title-row {
    margin-top: calc(var(--u) * 10);
  }
  .title-row .btn {
    height: calc(var(--u) * 68);
    font-size: calc(var(--u) * 19);
    padding-bottom: calc(var(--u) * 7);
  }
  .title-meta {
    margin-top: calc(var(--u) * 9);
  }
  .screen.title .corner-tools {
    bottom: calc(var(--u) * 13 + var(--sab));
  }
}

/* =====================================================================================================
   Other screens (win, lose, levels, skins, pause, ranking, settings): same art as the design.
   9-slice plates (border-image): corners and rivets never stretch; only the middle grows with the content.
   ===================================================================================================== */

/* ---------- buttons: wood (regular) and gold (main action) ---------- */
.btn {
  min-height: 50px;
  padding: 0 6px;
  clip-path: none;
  box-shadow: none;
  background: none;
  border-style: solid;
  border-color: transparent;
  border-width: 12px 16px 14px;
  border-image: url(./assets/art/btn-wood.webp) 70 84 fill / 14px 17px stretch;
  font-weight: 900;
  font-size: 17px;
  letter-spacing: 0;
  text-shadow: none;
  color: var(--cream);
  -webkit-text-stroke: 3.2px var(--brown);
  paint-order: stroke fill;
  filter: drop-shadow(0 3px 3px rgba(20, 8, 0, 0.45));
}
.btn svg {
  color: var(--cream);
  filter: drop-shadow(0 1.5px 0 var(--brown)) drop-shadow(0 0 1px var(--brown));
}
.btn:hover {
  filter: brightness(1.08) drop-shadow(0 3px 3px rgba(20, 8, 0, 0.45));
}
.btn:active {
  transform: translateY(2px) scale(0.985);
  filter: brightness(0.93);
  box-shadow: none;
}
.btn.primary {
  border-width: 12px 30px 14px;
  border-image: url(./assets/art/btn-play.webp) 72 150 fill / 15px 32px stretch;
  box-shadow: none;
  color: var(--cream);
  text-shadow: none;
  overflow: visible;
}
.btn.primary::after,
.btn.shine::after {
  display: none;
}
.btn.primary:active {
  box-shadow: none;
}
.btn.big {
  min-height: 64px;
  padding: 0 8px;
  font-size: 26px;
  -webkit-text-stroke-width: 4.2px;
}
.btn.big.primary {
  border-width: 14px 36px 16px;
  border-image-width: 19px 40px;
}
.btn.small {
  min-height: 42px;
  font-size: 14px;
  border-width: 9px 13px 11px;
  border-image-width: 12px 14px;
  -webkit-text-stroke-width: 2.6px;
}
.btn.small.primary {
  border-image: url(./assets/art/btn-gold.webp) 58 66 fill / 13px 15px stretch;
}
/* the menu has its own plates, sized exactly to the design */
.title-actions .btn.big,
.title-row .btn {
  border: 0;
  border-image: none;
}
/* ad badge */
.btn.continue .chip,
.skin .btn.ad .chip {
  padding: 2px 7px 3px;
  font-size: 12px;
  font-weight: 900;
  color: var(--cream);
  -webkit-text-stroke: 0;
  text-shadow: none;
  background: #c8321f;
  border-radius: 5px;
  box-shadow:
    0 0 0 1.5px #5a0d08,
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
.btn .chip svg {
  filter: none;
}

/* icon buttons: small gold plate; close is the plate with a painted X */
.icon-btn {
  width: 52px;
  height: 44px;
  clip-path: none;
  box-shadow: none;
  color: var(--cream);
  background: url(./assets/art/btn-gold.webp) center / 100% 100% no-repeat;
}
.icon-btn:hover {
  background: url(./assets/art/btn-gold.webp) center / 100% 100% no-repeat;
  filter: brightness(1.1);
}
.icon-btn svg {
  filter: drop-shadow(0 1.5px 0 var(--brown)) drop-shadow(0 0 1px var(--brown));
}
.card .card-head .icon-btn,
.sheet-head .icon-btn {
  flex: none;
  width: 48px;
  height: 45px;
  background: url(./assets/art/btn-x.webp) center / contain no-repeat;
}
.card .card-head .icon-btn::before {
  display: none;
}
.card .card-head .icon-btn svg,
.sheet-head .icon-btn svg {
  opacity: 0;
}

/* ---------- cards ---------- */
.screen.modal {
  background: rgba(14, 7, 2, 0.6);
}
.card {
  padding: 28px 26px 30px;
  filter: drop-shadow(0 16px 24px rgba(10, 4, 0, 0.6));
}
.card::before {
  display: none;
}
.card::after {
  inset: 0;
  clip-path: none;
  background: none;
  border-style: solid;
  border-color: transparent;
  border-width: 30px 28px;
  border-image: url(./assets/art/panel-tall.webp) 74 68 fill / 30px 28px stretch;
}
.card h2 {
  font-weight: 900;
  color: var(--cream);
  -webkit-text-stroke: 4.4px var(--brown);
  paint-order: stroke fill;
}
.card .sub {
  color: #f3dcb4;
  font-weight: 700;
}
/* title on the red ribbon (settings, ranking, win) */
.card-head h2,
.results:not(.lost) > h2 {
  flex: 0 1 auto;
  min-width: 0;
  padding: 2px 0 9px;
  font-size: 23px;
  line-height: 1.15;
  text-align: center;
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  filter: none;
  border-style: solid;
  border-color: transparent;
  border-width: 5px 42px 7px;
  border-image: url(./assets/art/ribbon-red.webp) 0 190 fill / 0 42px stretch;
  -webkit-text-stroke: 3.8px #5a0d08;
}
.card-head {
  margin: -6px -10px 4px;
}
.card-head h2 {
  margin-left: -6px;
}

/* ---------- win and lose ---------- */
#scr-results {
  padding-top: calc(var(--sat) + 104px * var(--ui-z, 1));
}
.results {
  padding: 34px 32px 34px;
}
.card.results::after {
  border-width: 46px 40px;
  border-image: url(./assets/art/card-parchment.webp) 112 98 fill / 46px 40px stretch;
}
.card.results.lost::after {
  border-width: 40px 36px;
  border-image: url(./assets/art/card-dark.webp) 100 92 fill / 40px 36px stretch;
}
.res-rico {
  display: none;
}
.res-parrot {
  position: absolute !important;
  left: 50%;
  z-index: 3 !important;
  pointer-events: none;
  filter: drop-shadow(0 4px 4px rgba(20, 8, 0, 0.45));
}
.res-parrot.win {
  top: -92px;
  width: 216px;
  margin-left: -108px;
  animation: parrotUp 0.5s cubic-bezier(0.2, 1.5, 0.4, 1) 0.15s both;
}
.res-parrot.lose {
  top: -96px;
  width: 188px;
  margin-left: -94px;
  display: none;
  animation: parrotUp 0.5s ease 0.15s both;
}
.results.lost .res-parrot.win {
  display: none;
}
.results.lost .res-parrot.lose {
  display: block;
}
@keyframes parrotUp {
  from {
    transform: translateY(46px);
    opacity: 0;
  }
}
.results:not(.lost) > h2 {
  align-self: center;
  max-width: 100%;
  margin: 4px -14px 0;
  font-size: 22px;
}
.results.lost h2 {
  font-size: 32px;
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  color: var(--cream);
  filter: none;
}
#scr-results .results .sub {
  color: #5c3414;
  font-weight: 800;
  font-size: 16px;
}
#scr-results .results.lost .sub {
  color: #f3dcb4;
}
/* stars: the earned one is the faceted star; the missing one is a slot carved into the wood */
.res-stars {
  margin: 10px 0 26px;
}
.res-stars::before {
  content: '';
  position: absolute;
  left: -26px;
  right: -26px;
  top: 12%;
  bottom: -8px;
  z-index: 0;
  pointer-events: none;
  background: url(./assets/art/stars-decor.webp) center bottom / contain no-repeat;
}
.res-stars .star {
  background: url(./assets/art/star-big.webp) center / contain no-repeat;
}
.res-stars .bg {
  transform: scale(0.92);
  background: url(./assets/art/star-empty.webp) center / contain no-repeat;
  filter: drop-shadow(0 2px 2px rgba(60, 24, 4, 0.35));
}
.res-stars .star use,
.res-stars .bg use {
  display: none;
}
/* the small stars (volley plate, level cards, goal ladder) use the same art */
.star-meter .sm,
.lvl .stars svg,
.star-legend .ls {
  background: url(./assets/art/star-empty.webp) center / contain no-repeat;
}
.star-meter .sm.on,
.lvl .stars svg.on,
.star-legend .ls {
  background-image: url(./assets/art/star-big.webp);
}
.star-legend .lg.gone .ls {
  background-image: url(./assets/art/star-empty.webp);
}
.star-meter .sm use,
.lvl .stars svg use,
.star-legend .ls use {
  display: none;
}
.star-meter.collect .sm:not(.got) {
  background-image: url(./assets/art/star-empty.webp);
}
.lvl .stars {
  background: none;
  padding: 0;
  gap: 1px;
}
.lvl .stars svg {
  width: clamp(12px, 3.3vw, 18px);
  height: clamp(12px, 3.3vw, 18px);
  filter: drop-shadow(0 1px 1px rgba(40, 16, 4, 0.6));
}
.res-stars .star.on {
  filter: drop-shadow(0 3px 2px rgba(60, 24, 4, 0.5)) drop-shadow(0 0 10px rgba(255, 200, 80, 0.55));
}
.res-stars > .perfect-stamp {
  width: 250px;
  margin-left: -125px;
  bottom: -26px;
  padding: 8px 0 15px;
  clip-path: none;
  box-shadow: none;
  background: url(./assets/art/ribbon-red.webp) center / 100% 100% no-repeat;
  font-size: 19px;
  font-weight: 900;
  letter-spacing: 0.02em;
  color: var(--cream);
  -webkit-text-stroke: 3.4px #5a0d08;
  paint-order: stroke fill;
}
.res-stars > .perfect-stamp::before,
.res-stars > .perfect-stamp::after {
  display: none;
}
.res-stars > .perfect-stamp svg {
  color: var(--gold);
  filter: none;
}
.res-score > span {
  font-weight: 900;
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  color: var(--gold);
  -webkit-text-stroke: 5.4px var(--brown);
  paint-order: stroke fill;
  filter: drop-shadow(0 3px 0 rgba(40, 16, 4, 0.55));
}
.res-score small {
  color: #6b3d16;
  font-weight: 800;
}
.results.lost .res-score small {
  color: #f3dcb4;
}
.res-stats div {
  padding: 0;
  clip-path: none;
  box-shadow: none;
  background: none;
  border-style: solid;
  border-color: transparent;
  border-width: 9px 8px 11px;
  border-image: url(./assets/art/btn-wood.webp) 70 84 fill / 12px 14px stretch;
}
.res-stats small {
  color: #f3dcb4;
  font-weight: 800;
}
.res-stats b {
  font-weight: 900;
  color: var(--cream);
  -webkit-text-stroke: 3px var(--brown);
  paint-order: stroke fill;
}
.res-skin,
.unlock-note {
  padding: 10px 18px 12px;
  clip-path: none;
  box-shadow: none;
  color: var(--cream);
  font-weight: 800;
  background: url(./assets/art/row-plaque.webp) center / 100% 100% no-repeat;
}
.unlock-note::before,
.unlock-note::after {
  display: none;
}
.res-skin .nm {
  color: var(--cream);
}
.res-skin .bar {
  height: 10px;
  border-radius: 6px;
  background: #2b1408;
  box-shadow: inset 0 0 0 1.5px #1b0b03;
}
.res-note {
  color: #6b3d16;
  font-weight: 700;
}
.results.lost .res-note {
  color: #e9d3ad;
}
.rank-chip {
  height: 28px;
  padding: 0 16px 2px;
  color: var(--cream);
  font-weight: 800;
  background: url(./assets/art/label.webp) center / 100% 100% no-repeat;
}
.rank-chip::before,
.rank-chip::after {
  display: none;
}
.rank-chip.muted {
  background: url(./assets/art/label.webp) center / 100% 100% no-repeat;
  color: #f3dcb4;
}

/* ---------- pause: hanging sign with the indestructible block ---------- */
#scr-pause .card {
  overflow: visible;
  padding-top: 46px;
}
#scr-pause .card::before {
  display: block;
  inset: auto;
  left: 50%;
  top: -40px;
  width: 76px;
  height: 78px;
  margin-left: -38px;
  z-index: 2;
  clip-path: none;
  background: url(./assets/art/anchor.webp) center / contain no-repeat;
  filter: drop-shadow(0 4px 4px rgba(20, 8, 0, 0.5));
}
#scr-pause .card h2 {
  font-size: 38px;
}

/* ---------- levels: level map ---------- */
/* tiled parchment (keeps resolution on large screens) with the burnt edge on top */
.screen.sheet {
  overflow-x: hidden;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  background:
    radial-gradient(ellipse at 50% 45%, rgba(120, 60, 10, 0) 55%, rgba(96, 44, 8, 0.5) 100%),
    #d9b06a url(./assets/art/parchment-tile.webp) 0 0 / 420px 420px;
}
/* header: HUD wooden bar, no gradient */
.sheet-head {
  position: relative;
  z-index: 3;
  padding: 9px 22px 11px 16px;
  background: url(./assets/art/hud-panel.webp) center / 100% 100% no-repeat;
  filter: drop-shadow(0 5px 6px rgba(40, 16, 4, 0.45));
}
#scr-levels .sheet-head {
  position: sticky;
  top: calc(-1 * var(--sheet-pad) + 6px);
  margin: calc(-1 * var(--sheet-pad) + 6px) 0 10px;
  padding: 9px 22px 11px 16px;
  background: url(./assets/art/hud-panel.webp) center / 100% 100% no-repeat;
}
.sheet-head h2 {
  font-weight: 900;
  font-size: 28px;
  color: var(--cream);
  -webkit-text-stroke: 4.4px var(--brown);
  paint-order: stroke fill;
}
.sheet-stars {
  padding: 6px 16px 8px;
  font-weight: 900;
  color: var(--cream);
  -webkit-text-stroke: 3px var(--brown);
  paint-order: stroke fill;
  background: url(./assets/art/label.webp) center / 100% 100% no-repeat;
}
.sheet-stars svg,
.ch-title em svg {
  color: transparent;
  background: url(./assets/art/icon-star.webp) center / contain no-repeat;
}
.sheet-stars svg use,
.ch-title em svg use {
  display: none;
}
.ch-title {
  min-height: 58px;
  padding: 10px 20px 12px 22px;
  clip-path: none;
  box-shadow: none;
  background: url(./assets/art/sign-chapter.webp) center / 100% 100% no-repeat;
  font-weight: 900;
  font-size: 19px;
  color: var(--cream);
  -webkit-text-stroke: 3.4px var(--brown);
  paint-order: stroke fill;
  filter: drop-shadow(0 3px 3px rgba(40, 16, 4, 0.4));
}
.ch-title small {
  color: #ffe2a8;
  font-weight: 800;
  -webkit-text-stroke: 2.4px var(--brown);
}
.ch-title em {
  color: var(--gold);
  font-weight: 900;
}
.ch-title .lock {
  color: var(--cream);
  filter: drop-shadow(0 1.5px 0 var(--brown));
}
.ch-title.locked {
  color: #e9d3ad;
  filter: grayscale(0.5) brightness(0.82) drop-shadow(0 3px 3px rgba(40, 16, 4, 0.4));
}
.lvl b {
  font-weight: 900;
  color: var(--cream);
  -webkit-text-stroke: 4.4px var(--brown);
}
/* locked level: the same chapter block, dimmed, with a small golden padlock */
.lvl.locked {
  opacity: 1;
}
.lvl.locked canvas {
  filter: grayscale(0.7) brightness(0.62) contrast(0.95);
}
.lvl.locked b {
  color: #d9ccb6;
  -webkit-text-stroke-color: #241208;
}
.lvl.locked svg.lock {
  bottom: 4%;
  width: clamp(15px, 4vw, 22px);
  height: clamp(15px, 4vw, 22px);
  color: var(--gold);
  filter: drop-shadow(0 1.5px 0 var(--brown)) drop-shadow(0 0 1px var(--brown));
}
/* current level: large golden badge with the arrow, bouncing */
.lvl .play-badge {
  top: -9%;
  right: -9%;
  width: clamp(26px, 7.4vw, 38px);
  height: clamp(26px, 7.4vw, 38px);
  clip-path: none;
  border-radius: 50%;
  color: var(--brown);
  background: radial-gradient(circle at 36% 30%, #fff3a8, #ffc928 58%, #d98a12);
  box-shadow:
    0 0 0 2.5px var(--brown),
    0 3px 5px rgba(40, 16, 4, 0.55);
  animation: playBadge 0.9s ease-in-out infinite;
}
.lvl .play-badge svg {
  width: 58%;
  height: 58%;
  margin-left: 8%;
}
@keyframes playBadge {
  50% {
    transform: translateY(-4px) scale(1.08);
  }
}
html.reduced .lvl .play-badge {
  animation: none;
}

/* ---------- skins: wooden plates with the ball window ---------- */
#scr-skins.screen.sheet {
  background:
    linear-gradient(180deg, rgba(8, 20, 30, 0.3), rgba(8, 20, 30, 0.55)),
    #16283a url(./assets/art/bg.webp) center bottom / cover no-repeat;
}
.skin {
  padding: 2px 0 0;
  clip-path: none;
  box-shadow: none;
  background: none;
  border-style: solid;
  border-color: transparent;
  border-width: 16px 15px 18px;
  border-image: url(./assets/art/btn-wood.webp) 70 84 fill / 18px 21px stretch;
  filter: drop-shadow(0 4px 4px rgba(10, 4, 0, 0.5));
}
.skin.on {
  background: none;
  filter: brightness(1.1) drop-shadow(0 0 7px rgba(255, 214, 120, 0.95)) drop-shadow(0 4px 4px rgba(10, 4, 0, 0.5));
}
.skin.on::before {
  display: none;
}
.skin canvas {
  height: 96px;
  border-radius: 8px;
  background: radial-gradient(circle at 50% 42%, #1f5c6e, #0b2733);
  box-shadow:
    inset 0 0 0 2px #2a1408,
    inset 0 4px 9px rgba(0, 0, 0, 0.6);
}
.skin b {
  font-weight: 900;
  font-size: 19px;
  color: var(--cream);
  -webkit-text-stroke: 3.2px var(--brown);
  paint-order: stroke fill;
}
.skin small {
  color: #f3dcb4;
  font-weight: 700;
}
.skin .in-use {
  clip-path: none;
  box-shadow: none;
  background: none;
  border-style: solid;
  border-color: transparent;
  border-width: 9px 13px 11px;
  border-image: url(./assets/art/btn-gold.webp) 58 66 fill / 13px 15px stretch;
  color: var(--cream);
  font-weight: 900;
  -webkit-text-stroke: 2.6px var(--brown);
  paint-order: stroke fill;
}
.skin .bar-row span {
  color: var(--gold);
  font-weight: 900;
  -webkit-text-stroke: 2.4px var(--brown);
  paint-order: stroke fill;
}

/* ---------- settings ---------- */
.slider label,
.check span,
.select > span {
  color: var(--cream);
  font-weight: 800;
}
.slider output {
  color: var(--cream);
  font-weight: 800;
}
.slider .mute {
  clip-path: none;
  box-shadow: none;
  color: var(--cream);
  background: url(./assets/art/hud-btn.webp) center / 100% 100% no-repeat;
}
.select select {
  color: var(--cream);
  font-weight: 800;
  background-color: #3a1d0c;
  border: 2px solid #c98a2e;
  border-radius: 8px;
}
.privacy summary,
.privacy p {
  color: #f3dcb4;
}

/* ---------- ranking (local) ---------- */
.nick-form label {
  color: #f3dcb4;
  font-weight: 800;
}
.nick-row input {
  color: var(--cream);
  font-weight: 800;
  background: rgba(26, 12, 4, 0.75);
  border: 2px solid #8a5a22;
}
.nick-row input::placeholder {
  color: rgba(243, 220, 180, 0.55);
}
.nick-status {
  color: #ffe08a;
  font-weight: 700;
}
.tab {
  height: 44px;
  clip-path: none;
  background: none;
  border-style: solid;
  border-color: transparent;
  border-width: 8px 10px 10px;
  border-image: url(./assets/art/btn-wood.webp) 70 84 fill / 11px 13px stretch;
  font-weight: 900;
  color: var(--cream);
  -webkit-text-stroke: 2.6px var(--brown);
  paint-order: stroke fill;
}
.tab.on {
  background: none;
  border-image: url(./assets/art/btn-gold.webp) 58 66 fill / 12px 14px stretch;
  color: var(--cream);
}
.rank-row {
  border-radius: 6px;
  background: rgba(26, 12, 4, 0.45);
  color: var(--cream);
  font-weight: 800;
}
.rank-row .pos {
  color: #f3dcb4;
  font-weight: 900;
}
.rank-row.me {
  background: linear-gradient(90deg, rgba(255, 201, 40, 0.42), rgba(255, 201, 40, 0.12));
  box-shadow: inset 3px 0 0 var(--gold);
}
.rank-you {
  color: var(--gold);
  font-weight: 900;
}
.rank-note,
.rank-empty {
  color: #f3dcb4;
  font-weight: 700;
}
.final-sub,
.final-stats .fs {
  color: var(--cream);
}

/* short notice at the top */
.toast {
  clip-path: none;
  padding: 9px 22px 11px;
  font-weight: 800;
  color: var(--cream);
  background: url(./assets/art/label.webp) center / 100% 100% no-repeat;
}

/* shower of coins instead of colored confetti */
.confetti i,
.star-confetti i {
  width: 13px;
  height: 13px;
  clip-path: none;
  border-radius: 50%;
  background: radial-gradient(circle at 36% 30%, #fff3a8, #ffc928 55%, #c9780f) !important;
  box-shadow:
    inset 0 0 0 1.5px #8a4f0a,
    inset 0 -2px 0 rgba(120, 60, 0, 0.45);
}
.btn.big.continue {
  font-size: 20px;
  -webkit-text-stroke-width: 3.6px;
  gap: 8px;
}

/* =====================================================================================================
   Painted padlock, clearer locked skin, "My score", chapter strip on desktop, mascot on the left card
   and themed screen transitions (wooden doors).
   ===================================================================================================== */

/* ---------- painted padlock (skins, levels, chapters, Bomb before level 7) ---------- */
.skin .lock-badge,
.lvl.locked svg.lock,
.ch-title .lock,
.pulse-btn .pulse-lock {
  color: transparent;
  background: url(./assets/art/icon-lock.webp) center / contain no-repeat;
  filter: drop-shadow(0 2px 2px rgba(20, 8, 0, 0.6));
}
.lvl.locked svg.lock use,
.ch-title .lock use,
.pulse-btn .pulse-lock use {
  display: none;
}
.lvl.locked svg.lock {
  bottom: 2%;
  width: clamp(18px, 4.8vw, 26px);
  height: clamp(18px, 4.8vw, 26px);
}
.ch-title .lock {
  width: 24px;
  height: 24px;
}
.pulse-btn .pulse-lock {
  width: 30px;
  height: 30px;
}

/* ---------- skins: locked card ---------- */
.skin {
  position: relative;
}
/* the padlock sits in the card corner, outside the ball window */
.skin .lock-badge {
  top: -12px;
  right: -10px;
  z-index: 3;
  width: 34px;
  height: 40px;
}
.skin.locked small {
  color: #ffe2a8;
  font-weight: 800;
}
/* star bar: how many are still needed to unlock (stars come from levels) */
.skin .need {
  position: relative;
  width: 100%;
  height: 30px;
  margin-top: auto;
  border-radius: 9px;
  overflow: hidden;
  background: #2b1408;
  box-shadow:
    inset 0 2px 3px rgba(0, 0, 0, 0.7),
    inset 0 0 0 1.5px #1b0b03,
    0 1px 0 rgba(255, 210, 150, 0.3);
}
.skin .need i {
  position: absolute;
  left: 2.5px;
  top: 2.5px;
  bottom: 2.5px;
  max-width: calc(100% - 5px);
  min-width: 8px;
  border-radius: 7px;
  background: linear-gradient(180deg, #fff0a0, #ffc62e 45%, #f0900f);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55);
}
.skin .need span {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  height: 100%;
  font-size: 15px;
  font-weight: 900;
  color: var(--cream);
  -webkit-text-stroke: 2.8px var(--brown);
  paint-order: stroke fill;
}
.skin .need .st {
  width: 17px;
  height: 17px;
  background: url(./assets/art/star-big.webp) center / contain no-repeat;
  filter: drop-shadow(0 1px 1px rgba(40, 16, 4, 0.7));
}
.skin.locked canvas {
  filter: none;
}

/* ---------- my score ---------- */
#scr-rank .card {
  width: min(400px, 100%);
}
#scr-rank .final-block {
  gap: 12px;
}
#scr-rank .final-sub {
  clip-path: none;
  box-shadow: none;
  padding: 9px 16px 11px;
  color: var(--cream);
  font-weight: 900;
  background: url(./assets/art/row-plaque.webp) center / 100% 100% no-repeat;
}
#scr-rank .final-stats .fs {
  clip-path: none;
  box-shadow: none;
  padding: 12px 8px 14px;
  background: url(./assets/art/score-box.webp) center / 100% 100% no-repeat;
}
#scr-rank .final-stats small {
  color: #f3dcb4;
  font-weight: 800;
  opacity: 1;
}
#scr-rank .final-stats b {
  font-weight: 900;
  color: var(--gold);
  text-shadow: none;
  -webkit-text-stroke: 4.4px var(--brown);
  paint-order: stroke fill;
}
#scr-rank .final-stats b svg {
  background: url(./assets/art/star-big.webp) center / contain no-repeat;
}
#scr-rank .final-stats b svg use {
  display: none;
}
#scr-rank .rank-list {
  max-height: min(38vh, 300px);
}

/* ---------- desktop: chapter strip and mascot on the left card ---------- */
.hud.landscape .pips {
  gap: 5px;
}
.hud.landscape .pip {
  gap: 2px;
  padding: 7px 0 8px;
  clip-path: none;
  background: url(./assets/art/hud-btn.webp) center / 100% 100% no-repeat;
}
.hud.landscape .pip b {
  font-size: 16px;
  font-weight: 900;
  color: var(--cream);
  -webkit-text-stroke: 2.6px var(--brown);
  paint-order: stroke fill;
}
.hud.landscape .pip i {
  gap: 0;
}
.hud.landscape .pip i svg {
  width: 11px;
  height: 11px;
  background: url(./assets/art/star-empty.webp) center / contain no-repeat;
}
.hud.landscape .pip i svg.on {
  background-image: url(./assets/art/star-big.webp);
}
.hud.landscape .pip i svg use {
  display: none;
}
.hud.landscape .pip.now {
  background: url(./assets/art/btn-gold.webp) center / 100% 100% no-repeat;
  box-shadow: none;
  filter: drop-shadow(0 0 5px rgba(255, 214, 120, 0.8));
}
.hud.landscape .pip.locked {
  opacity: 1;
  filter: grayscale(0.75) brightness(0.62);
}
/* the mascot perched on the corner of the card */
.hud.landscape .hud-panel.a::before {
  display: block;
  inset: auto;
  right: 6px;
  top: -30px;
  width: 86px;
  height: 86px;
  z-index: 2;
  clip-path: none;
  background: url(./assets/art/parrot-perch.webp) center / contain no-repeat;
  filter: drop-shadow(0 3px 3px rgba(20, 8, 0, 0.45));
}
.hud.landscape.tight .hud-panel.a::before {
  display: none;
}

/* ---------- transitions ---------- */
/* entering a level: two wooden doors with a bronze trim swing open */
#wipe::before,
#wipe::after {
  width: 50.5%;
  clip-path: none;
  background:
    linear-gradient(180deg, rgba(30, 12, 3, 0.2), rgba(30, 12, 3, 0.5)),
    #6b3a17 url(./assets/art/wood.webp) 0 0 / 280px auto;
}
#wipe::before {
  left: 0;
  box-shadow:
    inset -7px 0 0 #d99a36,
    inset -10px 0 0 #5a2c10,
    inset -40px 0 40px -20px rgba(0, 0, 0, 0.45);
  animation: shutL 0.55s cubic-bezier(0.7, 0, 0.3, 1) 0.08s forwards;
}
#wipe::after {
  right: 0;
  box-shadow:
    inset 7px 0 0 #d99a36,
    inset 10px 0 0 #5a2c10,
    inset 40px 0 40px -20px rgba(0, 0, 0, 0.45);
  animation: shutR 0.55s cubic-bezier(0.7, 0, 0.3, 1) 0.08s forwards;
}
/* sheets (levels, skins): slide up and fade in */
.screen.sheet {
  animation: sheetIn 0.28s cubic-bezier(0.2, 0.9, 0.3, 1) both;
}
@keyframes sheetIn {
  from {
    opacity: 0;
    transform: translateY(22px);
  }
}
/* cards: drop from above with a short bounce, like a hanging sign */
.card {
  animation: cardDrop 0.38s cubic-bezier(0.2, 1.35, 0.4, 1) both;
}
@keyframes cardDrop {
  from {
    transform: translateY(-26px) rotate(-1.2deg);
    opacity: 0;
  }
}
html.reduced .screen.sheet,
html.reduced .card {
  animation: none;
}

/* =====================================================================================================
   Coins, missions, extra modes (Daily challenge, Endless mode, boss) and the mascot that reacts to the game.
   ===================================================================================================== */

/* ---------- coin ---------- */
.coin {
  display: inline-block;
  flex: none;
  width: 1.1em;
  height: 1.1em;
  vertical-align: -0.18em;
  background: url(./assets/art/coin.webp) center / contain no-repeat;
  filter: drop-shadow(0 1px 1px rgba(40, 16, 4, 0.6));
}
.title-meta .coin {
  width: calc(var(--u) * 23);
  height: calc(var(--u) * 23);
}
.sheet-stars.coins {
  margin-right: -4px;
}
.sheet-stars .coin {
  width: 20px;
  height: 20px;
}

/* result: coins earned in the run */
.res-coins {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 21px;
  font-weight: 900;
  color: var(--gold);
  -webkit-text-stroke: 3.4px var(--brown);
  paint-order: stroke fill;
  animation: popIn 0.35s cubic-bezier(0.2, 1.6, 0.4, 1) 0.7s both;
}
.res-coins .coin {
  width: 25px;
  height: 25px;
}

/* one more chance: price in coins */
.btn.continue .chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 10px 3px 7px;
  font-size: 17px;
  font-weight: 900;
  color: var(--gold);
  -webkit-text-stroke: 0;
  text-shadow: none;
  background: rgba(58, 26, 8, 0.88);
  border-radius: 13px;
  box-shadow: none;
}
.btn.continue .chip .coin {
  width: 19px;
  height: 19px;
}
.btn.continue.poor {
  filter: grayscale(0.65) brightness(0.82);
}

/* skins: buy with coins */
.skin .btn.buy {
  width: 100%;
  gap: 6px;
  font-size: 17px;
  border-image: url(./assets/art/btn-gold.webp) 58 66 fill / 13px 15px stretch;
}
.skin .btn.buy .coin {
  width: 20px;
  height: 20px;
}
.skin .btn.buy.poor {
  filter: grayscale(0.7) brightness(0.8);
}

/* ---------- my score: coins and missions ---------- */
#scr-rank .final-stats {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

/* End of gulch.css */