/* ============================================================
   GridFizz — a modern block puzzle built on the original
   riveted-steel, warm-wood and glossy-block art.
   ============================================================ */

:root {
  --bg-0: #0a0806;
  --bg-1: #14100b;
  --bg-2: #1f1811;

  --panel: rgba(22, 17, 12, 0.78);
  --panel-2: rgba(38, 28, 19, 0.82);
  --panel-3: rgba(56, 42, 28, 0.8);

  --line: rgba(255, 226, 178, 0.14);
  --line-strong: rgba(255, 226, 178, 0.26);

  --text: #fbf3e4;
  --muted: #c4b49a;
  --muted-2: #8f806a;

  --accent: #8bd94e;
  --accent-2: #ffc93c;
  --accent-3: #35e6ff;
  --gold: #ffc93c;
  --gold-2: #e8a51d;
  --danger: #ff5a5f;
  --ice: #6fd6ff;

  --wood-dark: #2a190d;
  --wood-mid: #5a3a1e;

  --radius: 18px;
  --radius-lg: 28px;
  --shadow: 0 30px 70px rgba(0, 0, 0, 0.6);

  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --font: "Avenir Next", ui-rounded, "SF Pro Rounded", "Nunito", "Segoe UI", system-ui, -apple-system, sans-serif;
}

* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
}

html,
body {
  height: 100%;
}

body {
  margin: 0;
  overflow: hidden;
  color: var(--text);
  font-family: var(--font);
  background-color: var(--bg-0);
  background-image:
    radial-gradient(1100px 760px at 50% -14%, rgba(255, 201, 60, 0.08), transparent 62%),
    radial-gradient(900px 700px at 100% 100%, rgba(0, 185, 252, 0.09), transparent 55%),
    linear-gradient(rgba(5, 16, 23, 0.52), rgba(5, 16, 23, 0.72)),
    url("../assets/backgrounds/steel.png");
  background-size: auto, auto, auto, cover;
  background-position: center, center, center, center;
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  user-select: none;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(circle at 50% 28%, transparent 28%, rgba(0, 0, 0, 0.32) 100%),
    linear-gradient(180deg, rgba(0, 185, 252, 0.035), transparent 22%);
}

button {
  font: inherit;
  color: inherit;
  border: 0;
  background: none;
  cursor: pointer;
}

button:disabled {
  cursor: not-allowed;
}

img {
  display: block;
  max-width: 100%;
}

[hidden] {
  display: none !important;
}

.app {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100dvh;
  overflow: hidden;
}

.screen {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
}

/* ------------------------------------------------------------
   Brand lockup
   ------------------------------------------------------------ */

.brand {
  display: flex;
  align-items: center;
  gap: 14px;
}

.brand__mark {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 4px;
  flex: 0 0 auto;
  width: 64px;
  aspect-ratio: 1;
  padding: 6px;
  border-radius: 20px;
  border: 2px solid rgba(255, 226, 178, 0.28);
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.18), rgba(0, 0, 0, 0.18));
  box-shadow:
    0 14px 28px rgba(0, 0, 0, 0.55),
    inset 0 2px 0 rgba(255, 255, 255, 0.28),
    inset 0 -4px 10px rgba(0, 0, 0, 0.35);
}

.brand__mark i {
  border-radius: 24%;
  background: linear-gradient(135deg, #d6ff7a, #8bd94e 48%, #3a9a1f);
  box-shadow:
    0 0 10px rgba(139, 217, 78, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.55);
}

.brand__mark i:nth-child(3n + 2) {
  background: linear-gradient(135deg, #bdf6ff, #6fd6ff 45%, #2f6bff);
  box-shadow:
    0 0 10px rgba(111, 214, 255, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.55);
}

.brand__mark i:nth-child(3n) {
  background: linear-gradient(135deg, #fff0b8, #ffc93c 48%, #e88a1d);
  box-shadow:
    0 0 10px rgba(255, 201, 60, 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.55);
}

.brand__mark i:nth-child(5) {
  transform: translateY(-1px) scale(1.04);
}

.brand__word {
  display: flex;
  align-items: baseline;
  font-size: 40px;
  font-weight: 900;
  letter-spacing: -0.055em;
  line-height: 0.9;
}

.brand__grid {
  color: #fff6e0;
  text-shadow:
    0 2px 0 #3a1f0c,
    0 4px 12px rgba(0, 0, 0, 0.45),
    0 0 28px rgba(255, 201, 60, 0.22);
}

.brand__fizz {
  background: linear-gradient(118deg, #e6ff9e 0%, #8bd94e 34%, #35e6ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter:
    drop-shadow(0 2px 0 #2a190d)
    drop-shadow(0 0 18px rgba(53, 230, 255, 0.3));
}

.brand--hero {
  position: relative;
  z-index: 2;
  flex-direction: column;
  gap: 16px;
  animation: brand-bob 7s ease-in-out infinite;
}

.brand--hero .brand__mark {
  width: clamp(58px, 16vw, 80px);
  border-radius: 23px;
}

.brand--hero .brand__word {
  font-size: clamp(54px, 17vw, 94px);
}

.brand--boot .brand__mark {
  width: 50px;
  border-radius: 16px;
}

.brand--boot .brand__word {
  font-size: 36px;
}

/* ------------------------------------------------------------
   Shared bits
   ------------------------------------------------------------ */

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 50px;
  padding: 0 18px;
  border-radius: 0;
  overflow: hidden;
  border: 2px solid #2a190d;
  background-color: transparent;
  background-image: none;
  color: #fff9eb;
  font-weight: 1000;
  letter-spacing: 0.01em;
  -webkit-text-stroke: 0.5px #67410e;
  text-shadow: 0 3px 2px #4e2b0a, 0 4px 5px #160b01;
  /* The plank itself lives on ::before so each button can flip its own copy;
     no glossy overlay or inset highlight, so there is no glass rim. The art
     has transparent rounded corners, so a box-shadow would show as dark
     squares behind them; a drop-shadow follows the plank's silhouette. */
  box-shadow: none;
  filter: drop-shadow(0 8px 10px rgba(0, 0, 0, 0.4));
  isolation: isolate;
  transition: transform 0.14s ease, box-shadow 0.14s ease, filter 0.14s ease;
  /* A slight, per-button lean keeps a column of planks feeling hand-made. */
  --tilt: -0.7deg;
  transform: rotate(var(--tilt));
}

.btn:nth-of-type(4n + 2) { --tilt: 0.9deg; }
.btn:nth-of-type(4n + 3) { --tilt: -0.4deg; }
.btn:nth-of-type(4n + 4) { --tilt: 1.2deg; }

.btn:hover {
  filter: brightness(1.08) saturate(1.04) drop-shadow(0 10px 12px rgba(0, 0, 0, 0.42));
  transform: rotate(var(--tilt)) translateY(-1px);
}

.btn:active {
  transform: rotate(var(--tilt)) translateY(1px) scale(0.99);
  box-shadow: none;
  filter: brightness(0.95) drop-shadow(0 3px 6px rgba(0, 0, 0, 0.35));
}

.btn--primary {
  border-color: #23360d;
  background-color: transparent;
  color: #fff9eb;
  text-shadow: 0 3px 2px #2f4a0c, 0 4px 5px #101a03;
  box-shadow: none;
}

.btn--primary:hover {
  filter: brightness(1.06) saturate(1.06) drop-shadow(0 10px 12px rgba(0, 0, 0, 0.42));
}

.btn--gold {
  border-color: #8a5a12;
  background-color: transparent;
  background-image: none;
  color: #2a1a02;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);
  box-shadow: none;
}

.btn--ghost {
  border: 1px solid rgba(189, 134, 67, 0.45);
  background-color: rgba(18, 15, 11, 0.62);
  background-image: none;
  color: #cfb896;
  -webkit-text-stroke: 0;
  text-shadow: none;
  box-shadow: none;
}

.btn--ghost:hover {
  border-color: #54402a;
  color: var(--text);
}

.btn--ghost:active {
  transform: translateY(1px);
}

.btn--xl {
  width: 100%;
  min-height: 66px;
  /* The plank art is 1219 x 287, so matching that ratio keeps its screws round
     instead of stretching them across a short button. */
  aspect-ratio: 796 / 205;
  border-radius: 0;
  font-size: 20px;
  letter-spacing: 0.02em;
}

.btn__icon {
  display: inline-flex;
  width: 20px;
  height: 20px;
}

.btn__icon svg {
  width: 100%;
  height: 100%;
}

.btn > svg {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
}

.icon-btn {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 10px;
  border-radius: 100%;
  border: 0;
  background: radial-gradient(circle at 36% 27%, #52301d 0%, #2c1b13 70%, #130e0b 100%);
  box-shadow:
    inset 0 0 0 2px rgba(238, 180, 88, 0.24),
    inset 0 1px 1px rgba(238, 180, 88, 0.31),
    0 3px 9px rgba(0, 0, 0, 0.6);
  color: var(--text);
  transition: transform 0.12s ease, filter 0.12s ease, box-shadow 0.12s ease;
}

.icon-btn:hover {
  filter: brightness(1.12);
  box-shadow:
    inset 0 0 0 2px rgba(255, 204, 120, 0.38),
    inset 0 1px 1px rgba(238, 180, 88, 0.31),
    0 4px 12px rgba(0, 0, 0, 0.6);
}

.icon-btn:active {
  transform: scale(0.94);
}

.icon-btn svg {
  width: 21px;
  height: 21px;
}

.icon-btn--small {
  width: 38px;
  height: 38px;
  border-radius: 12px;
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 54px;
  padding: 0 18px;
  border-radius: 999px;
  font-size: 19px;
  border: 1px solid #3a2a17;
  background: #1d150d;
  color: var(--text);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  transition: transform 0.12s ease, border-color 0.12s ease;
}

.pill:hover {
  border-color: var(--line-strong);
}

.pill:active {
  transform: scale(0.96);
}

.pill img {
  display: block;
  width: 24px;
  height: 24px;
  object-fit: contain;
}

.pill--icon {
  width: 54px;
  min-height: 54px;
  padding: 0;
  justify-content: center;
}

.pill--icon span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.pill--icon svg {
  width: 25px;
  height: 25px;
}

/* ------------------------------------------------------------
   Home
   ------------------------------------------------------------ */

/* The home stage reproduces the supplied reference: a riveted teal backdrop,
   five glossy blocks bleeding off the edges, one centred composition of
   logo, three planks and the HUD chips. */
.home-screen {
  display: grid;
  place-items: center;
  padding:
    max(12px, var(--safe-top))
    max(12px, env(safe-area-inset-right))
    max(12px, var(--safe-bottom))
    max(12px, env(safe-area-inset-left));
  background: #09131b url("../assets/home/background.webp") center / cover no-repeat;
}

.home-screen::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(180deg, rgba(3, 6, 8, 0.08) 0%, transparent 20%, rgba(0, 0, 0, 0.07) 48%, rgba(0, 0, 0, 0.31) 100%);
  pointer-events: none;
}

.home__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.block {
  position: absolute;
  z-index: 1;
  pointer-events: none;
  user-select: none;
  object-fit: contain;
  filter: drop-shadow(0 8px 13px rgba(0, 0, 0, 0.6));
}

.block-blue { top: 2.6%; left: -1.5%; width: 15%; transform: rotate(-13deg); }
.block-red { top: 3%; right: 0; width: 15%; transform: rotate(14deg); }
.block-purple { top: 41.5%; right: -9%; width: 16%; transform: rotate(18deg); }
.block-yellow { top: 72%; left: -7%; width: 19%; transform: rotate(-12deg); }
.block-cyan { top: 81%; right: -3%; width: 17%; transform: rotate(9deg); }

.home__content {
  position: relative;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: min(100%, 460px);
  gap: clamp(16px, 2.6dvh, 28px);
  transform: scale(var(--home-fit, 1));
  transform-origin: center center;
}

.logo-area {
  flex: none;
  width: 95%;
  max-width: 100%;
}

.logo-area img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  object-fit: contain;
  filter: drop-shadow(0 10px 12px rgba(0, 0, 0, 0.6));
}

.home__actions {
  display: flex;
  flex: none;
  flex-direction: column;
  gap: clamp(8px, 1.35dvh, 15px);
  width: 90%;
}

.menu-button {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 796 / 205;
  padding: 0 4%;
  border: none;
  border-radius: 0;
  background-color: transparent;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  color: #fff9eb;
  font-family: inherit;
  font-weight: 1000;
  font-size: clamp(17px, 3dvh, 33px);
  line-height: 1;
  -webkit-text-stroke: 0.5px #67410e;
  text-shadow: 0 3px 2px #4e2b0a, 0 4px 5px #160b01;
  cursor: pointer;
  transition: transform 0.12s, filter 0.12s;
}

.menu-button span {
  display: block;
  width: 100%;
  text-align: center;
  white-space: nowrap;
  letter-spacing: 0.015em;
}

.menu-button:focus-visible {
  outline: 3px solid #fff2ad;
  outline-offset: 1px;
}

.menu-button:active {
  transform: translateY(2px) scale(0.99);
  filter: brightness(0.89);
}

.menu-button.primary { background-image: url("../assets/home/button-green.webp"); }
.menu-button.primary:hover,
.menu-button.primary:focus-visible { background-image: url("../assets/home/button-green-hover.webp"); }
.menu-button.primary:active { background-image: url("../assets/home/button-green-active.webp"); }

.menu-button.secondary { background-image: url("../assets/home/button-brown.webp"); }
.menu-button.secondary:hover,
.menu-button.secondary:focus-visible { background-image: url("../assets/home/button-brown-hover.webp"); }
.menu-button.secondary:active { background-image: url("../assets/home/button-brown-active.webp"); }

.home__meta {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  gap: clamp(7px, 1.6vw, 13px);
  width: 81%;
}

.hud-stat {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  gap: 7%;
  height: clamp(45px, 6dvh, 70px);
  min-width: 0;
  padding: 0;
  border: 0;
  background: url("../assets/home/hud-chip.webp") center / 100% 100% no-repeat;
  color: #fff8e8;
  font-weight: 1000;
  font-size: clamp(15px, 2.5dvh, 25px);
  font-variant-numeric: tabular-nums;
  text-shadow: 0 2px 3px #271207;
  transition: transform 0.12s, filter 0.12s;
}

.hud-stat:hover { filter: brightness(1.1); }
.hud-stat:active { transform: scale(0.96); }

.hud-stat img {
  height: 64%;
  width: auto;
  max-width: 40%;
  object-fit: contain;
}

.settings-btn {
  display: grid;
  flex: none;
  place-items: center;
  width: clamp(45px, 6dvh, 70px);
  height: clamp(45px, 6dvh, 70px);
  padding: 9px;
  border: 0;
  border-radius: 100%;
  background: radial-gradient(circle at 36% 27%, #52301d 0%, #2c1b13 70%, #130e0b 100%);
  box-shadow: inset 0 1px 1px rgba(238, 180, 88, 0.31), 0 3px 9px rgba(0, 0, 0, 0.67);
  transition: transform 0.12s, filter 0.12s;
}

.settings-btn:hover { filter: brightness(1.12); }
.settings-btn:active { transform: scale(0.94); }

.settings-btn:focus-visible {
  outline: 3px solid #fff2ad;
  outline-offset: 1px;
}

.settings-btn img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* ------------------------------------------------------------
   Levels sheet
   ------------------------------------------------------------ */

.sheet-screen {
  background-color: #09131b;
  background-image:
    linear-gradient(180deg, rgba(4, 10, 14, 0.32), rgba(4, 10, 14, 0.72)),
    url("../assets/home/background.webp");
  background-size: auto, cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* The sheet header is a smaller cut of the home plaque: gold rim, warm wood,
   cream lettering. */
.sheet-header {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 12px;
  margin: calc(12px + var(--safe-top)) 12px 6px;
  padding: 8px 12px;
  border: 3px solid transparent;
  border-radius: 16px;
  background-color: #3a2412;
  background-image:
    linear-gradient(160deg, rgba(96, 64, 25, 0.92), rgba(40, 27, 18, 0.96) 62%, rgba(21, 26, 26, 0.96)),
    url("../assets/backgrounds/wood.png"),
    var(--gold-conic);
  background-size: auto, 280px 280px, auto;
  background-position: center, center, center;
  background-repeat: repeat, repeat, no-repeat;
  background-clip: padding-box, padding-box, border-box;
  background-origin: padding-box, padding-box, border-box;
  box-shadow:
    inset 0 2px 1px rgba(255, 243, 201, 0.22),
    0 10px 24px rgba(0, 0, 0, 0.45);
}

.sheet-header h1 {
  flex: 1;
  margin: 0;
  color: #fff4cd;
  font-size: 23px;
  font-weight: 900;
  letter-spacing: 0.01em;
  text-shadow: 0 3px 3px #160c05;
}

.sheet-header__spacer {
  width: 44px;
}

.sheet-body {
  position: relative;
  z-index: 2;
  flex: 1;
  overflow-y: auto;
  padding: 8px 16px calc(28px + var(--safe-bottom));
  -webkit-overflow-scrolling: touch;
}

.sheet-intro {
  margin: 0 auto 18px;
  max-width: 470px;
  color: #e9d7ae;
  font-size: 13px;
  line-height: 1.55;
  text-align: center;
  text-shadow: 0 2px 3px rgba(0, 0, 0, 0.55);
}

.level-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  width: min(100%, 660px);
  margin: 0 auto;
}

@media (min-width: 680px) {
  .level-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.level-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-height: 148px;
  padding: 15px;
  border-radius: 18px;
  border: 3px solid transparent;
  background-color: #3a2412;
  background-image:
    linear-gradient(160deg, rgba(96, 64, 25, 0.9), rgba(40, 27, 18, 0.95) 62%, rgba(21, 26, 26, 0.95)),
    url("../assets/backgrounds/wood.png"),
    var(--gold-conic);
  background-size: auto, 280px 280px, auto;
  background-position: center, center, center;
  background-repeat: repeat, repeat, no-repeat;
  background-clip: padding-box, padding-box, border-box;
  background-origin: padding-box, padding-box, border-box;
  text-align: left;
  overflow: hidden;
  box-shadow:
    0 16px 34px rgba(0, 0, 0, 0.45),
    inset 0 2px 0 rgba(255, 255, 255, 0.18),
    inset 0 -6px 14px rgba(0, 0, 0, 0.38);
  transition: transform 0.16s ease, border-color 0.16s ease, filter 0.16s ease;
}

.level-card::after {
  content: "";
  position: absolute;
  inset: auto -34% -62% -34%;
  height: 118px;
  background: radial-gradient(circle, var(--accent, var(--accent)) 0%, transparent 66%);
  opacity: 0.18;
  pointer-events: none;
}

.level-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--accent, var(--accent)), transparent);
  opacity: 0.9;
}

.level-card:not(.is-locked):hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--accent, var(--accent)) 55%, var(--wood-dark));
}

.level-card:not(.is-locked):active {
  transform: scale(0.98);
}

.level-card.is-locked {
  filter: grayscale(0.7) brightness(0.7);
  opacity: 0.52;
}

.level-card__top {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.level-card__num {
  color: #d9c39e;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.18em;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}

.level-card__stars {
  display: inline-flex;
  gap: 1px;
  color: rgba(255, 243, 223, 0.24);
  font-size: 13px;
  letter-spacing: 1px;
}

.level-card__stars span.is-on {
  color: var(--gold);
  text-shadow: 0 0 14px rgba(255, 201, 60, 0.55);
}

.level-card__icon {
  position: relative;
  z-index: 1;
  width: 42px;
  height: 42px;
  padding: 3px;
  border-radius: 12px;
  object-fit: contain;
  background: rgba(0, 0, 0, 0.28);
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.4);
  filter: drop-shadow(0 6px 8px rgba(0, 0, 0, 0.45));
}

.level-card strong {
  position: relative;
  z-index: 1;
  color: #fff6e0;
  font-size: 16px;
  font-weight: 900;
  line-height: 1.15;
  text-shadow: 0 2px 2px rgba(0, 0, 0, 0.55);
}

.level-card__sub {
  position: relative;
  z-index: 1;
  color: #d9c39e;
  font-size: 11px;
  line-height: 1.35;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.level-card__best {
  position: relative;
  z-index: 1;
  margin-top: auto;
  padding-top: 8px;
  color: #bda47c;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  text-transform: uppercase;
}

.level-card__lock {
  position: absolute;
  right: 12px;
  bottom: 12px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 9px;
  background: rgba(0, 0, 0, 0.35);
  color: #d9c39e;
}

.level-card__lock svg {
  width: 15px;
  height: 15px;
}

/* ------------------------------------------------------------
   Game screen
   ------------------------------------------------------------ */

.game-screen {
  touch-action: none;
  padding-bottom: var(--safe-bottom);
  background:
    radial-gradient(circle at 50% -18%, rgba(255, 201, 60, 0.1), transparent 46%),
    transparent;
}

.hud {
  /* Equal-width outer columns keep the score column on the true centre line;
     with a flex middle the wider coins + pause pair nudged it to the left. */
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  padding: calc(10px + var(--safe-top)) 12px 4px;
}

.hud__side {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  min-width: 0;
}

.hud > .stat--lives {
  justify-self: start;
}

.stat {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 38px;
  padding: 0 10px;
  border-radius: 13px;
  border: 1px solid #3a2a17;
  background: #1d150d;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  transition: transform 0.12s ease, border-color 0.12s ease;
}

.stat:hover {
  border-color: var(--line-strong);
}

.stat:active {
  transform: scale(0.95);
}

.stat img {
  width: 18px;
  height: 18px;
  object-fit: contain;
}

.stat--lives {
  color: #ffd9e1;
}

.stat--coins {
  color: #ffe9a8;
}

.hud__center {
  min-width: 0;
  text-align: center;
}

.hud__level {
  overflow: hidden;
  color: #e8d4b0;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.2em;
  text-overflow: ellipsis;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
  text-transform: uppercase;
  white-space: nowrap;
}

.hud__score {
  margin-top: 1px;
  background: linear-gradient(180deg, #fff6e0 0%, #ffd166 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-size: clamp(26px, 7.4vw, 38px);
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  letter-spacing: -0.03em;
  filter: drop-shadow(0 3px 10px rgba(255, 201, 60, 0.25));
}

.hud__progress {
  height: 6px;
  margin: 7px auto 0;
  width: min(190px, 48vw);
  overflow: hidden;
  border-radius: 99px;
  background: rgba(0, 0, 0, 0.4);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.6);
}

.hud__progress-bar {
  width: 0%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--accent), var(--gold));
  box-shadow: 0 0 14px rgba(255, 201, 60, 0.55);
  transition: width 0.35s ease;
}

.objective-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex: 0 0 auto;
  padding: 4px 12px 2px;
}

.objective,
.timer {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 78vw;
  padding: 5px 11px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(10, 8, 6, 0.4);
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.objective__icon,
.timer__icon {
  display: inline-flex;
  width: 14px;
  height: 14px;
  color: var(--gold);
}

.objective__icon svg,
.timer__icon svg {
  width: 100%;
  height: 100%;
}

.timer {
  color: var(--gold);
}

.timer__icon {
  color: var(--gold);
}

.timer.is-low {
  border-color: rgba(255, 93, 122, 0.55);
  color: #ffb1be;
  animation: pulse 0.8s ease-in-out infinite;
}

.timer.is-low .timer__icon {
  color: var(--danger);
}

.board-area {
  position: relative;
  flex: 1 1 0;
  min-height: 0;
  display: grid;
  /* Centered: a board limited by screen width leaves a tall band of unused
     height, and centering splits it evenly above and below the grid. */
  place-items: center;
  padding: 4px 10px 0;
  overflow: hidden;
}

.board-area::before {
  content: "";
  position: absolute;
  width: min(78%, 540px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 201, 60, 0.14), transparent 68%);
  filter: blur(36px);
  pointer-events: none;
}

.board-frame {
  position: relative;
  z-index: 1;
  padding: 12px;
  border-radius: 28px;
  border: 5px solid var(--wood-dark);
  background-color: #4a2f18;
  background-image:
    url("../assets/items/nail.png"),
    url("../assets/items/nail.png"),
    url("../assets/items/nail.png"),
    url("../assets/items/nail.png"),
    linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0) 38%, rgba(0, 0, 0, 0.26)),
    url("../assets/backgrounds/wood.png");
  background-size: 14px 14px, 14px 14px, 14px 14px, 14px 14px, auto, 380px 380px;
  background-position:
    5px 5px,
    calc(100% - 5px) 5px,
    5px calc(100% - 5px),
    calc(100% - 5px) calc(100% - 5px),
    center,
    center;
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, repeat, repeat;
  box-shadow:
    0 28px 64px rgba(0, 0, 0, 0.66),
    inset 0 2px 0 rgba(255, 255, 255, 0.22),
    inset 0 -10px 20px rgba(0, 0, 0, 0.46);
}

/* The tray already carries the band gap below it, so an equal margin above the
   frame makes the space above and below the grid read the same. */
.board-area > .board-frame {
  margin-top: calc(var(--band-gap, 14px) - 4px);
}

#boardCanvas {
  display: block;
  /* Square bottom corners: the canvas carries a transparent bleed strip below
     the grid so the bottom row can paint over the frame's lip. */
  border-radius: 14px 14px 0 0;
  touch-action: none;
}

.board-area.is-shaking .board-frame {
  animation: board-shake 0.24s linear;
}

/* Explosions and cloud bursts hit harder than an ordinary line clear. */
/* The blast jolts the whole view, not just the board. Direction, size and
   length are stamped on the element per blast (see Game.shockwave). */
#app.is-shocked {
  animation: view-shock var(--shock-dur, 0.36s) linear;
}

.combo {
  position: absolute;
  top: 6%;
  left: 50%;
  z-index: 5;
  padding: 6px 15px;
  border-radius: 999px;
  border: 1px solid rgba(255, 224, 138, 0.5);
  background: linear-gradient(180deg, rgba(255, 201, 60, 0.2), rgba(8, 8, 20, 0.5));
  color: var(--gold);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-shadow: 0 0 18px rgba(255, 201, 60, 0.55);
  transform: translateX(-50%);
  pointer-events: none;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  animation: combo-in 0.35s cubic-bezier(0.2, 1.5, 0.4, 1);
}

.armed-banner {
  position: absolute;
  left: 50%;
  bottom: 8px;
  z-index: 6;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 8px 7px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255, 224, 138, 0.48);
  background: rgba(10, 8, 6, 0.92);
  color: var(--gold);
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
  transform: translateX(-50%);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.armed-banner__cancel {
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.09);
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

/* ------------------------------------------------------------
   Tray
   ------------------------------------------------------------ */

.tray {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(8px, 3vw, 16px);
  flex: 0 0 auto;
  margin: 0 12px;
  padding: 16px;
  border-radius: 22px;
  background-color: #4a2f18;
  background-image:
    linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0) 42%, rgba(0, 0, 0, 0.22)),
    url("../assets/backgrounds/wood.png");
  background-size: auto, 340px 340px;
  background-position: center;
}

.tray.is-returning .tray-slot {
  opacity: 0.72;
}

.tray-slot {
  position: relative;
  /* Taller, wider bar so a 4-wide piece still gets a chunky cell. */
  width: clamp(92px, 29vw, 150px);
  aspect-ratio: 1;
  touch-action: none;
  transition: opacity 0.2s ease, transform 0.16s ease;
}

.tray-slot.is-dragging {
  opacity: 0.3;
  transform: scale(0.94);
}

.tray-slot.is-placed {
  visibility: hidden;
}

.tray-slot canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.tray-slot__rotate {
  position: absolute;
  right: 5px;
  bottom: 5px;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 8px;
  background: rgba(20, 14, 8, 0.92);
  color: var(--muted);
  opacity: 0.78;
  transition: opacity 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.tray-slot__rotate:hover {
  background: rgba(4, 4, 4, 0.64);
  color: var(--text);
  opacity: 1;
}

.tray-slot__rotate svg {
  width: 14px;
  height: 14px;
}

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

.reward-dock {
  flex: 0 0 auto;
  margin: var(--band-gap, 14px) auto 0;
  padding: 8px 10px calc(10px + var(--safe-bottom));
  border-radius: 18px 18px 0 0;
  border: 1px solid var(--line);
  border-bottom: 0;
  background:
    linear-gradient(180deg, rgba(38, 28, 19, 0.86), rgba(12, 9, 6, 0.94));
  box-shadow:
    0 -10px 30px rgba(0, 0, 0, 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.reward-dock__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 4px 6px;
  color: #e8d4b0;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.2em;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  text-transform: uppercase;
}

.reward-dock__hint {
  color: var(--muted-2);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: none;
}

.reward-dock {
  margin-bottom: max(6px, var(--safe-bottom));
  border-radius: 18px;
  border-bottom: 1px solid var(--line);
}

.reward-slots {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 7px;
}

.reward-slot {
  position: relative;
  min-height: 56px;
  border-radius: 14px;
  border: 1px dashed rgba(255, 226, 178, 0.18);
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.28), rgba(0, 0, 0, 0.16));
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.35);
  display: grid;
  place-items: center;
}

.reward-slot.is-filled {
  border-style: solid;
  border-color: rgba(255, 226, 178, 0.16);
  background: rgba(255, 255, 255, 0.04);
}

.reward-chip {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 4px;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--reward-color, var(--accent)) 45%, transparent);
  background:
    radial-gradient(circle at 50% 12%, color-mix(in srgb, var(--reward-color, var(--accent)) 26%, transparent), transparent 66%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(0, 0, 0, 0.2));
  color: var(--text);
  transition: transform 0.14s ease, filter 0.14s ease, box-shadow 0.14s ease;
}

.reward-chip:hover {
  filter: brightness(1.14);
  transform: translateY(-1px);
}

.reward-chip:active {
  transform: scale(0.95);
}

.reward-chip.is-armed {
  box-shadow:
    0 0 0 2px color-mix(in srgb, var(--reward-color, var(--accent)) 48%, transparent),
    0 0 22px color-mix(in srgb, var(--reward-color, var(--accent)) 38%, transparent);
}

.reward-chip.is-new {
  animation: reward-in 0.55s cubic-bezier(0.2, 1.6, 0.4, 1);
}

.reward-chip__icon {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
}

.reward-chip__icon img {
  width: 24px;
  height: 24px;
  object-fit: contain;
}

.reward-chip__icon svg {
  width: 21px;
  height: 21px;
}

.reward-chip__name {
  max-width: 100%;
  overflow: hidden;
  color: #d9c39e;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.reward-slot__plus {
  color: rgba(255, 226, 178, 0.22);
  font-size: 18px;
  font-weight: 300;
}

/* ------------------------------------------------------------
   Modal
   ------------------------------------------------------------ */

.modal-layer {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: calc(18px + var(--safe-top)) 18px calc(18px + var(--safe-bottom));
  background: rgba(2, 8, 11, 0.84);
  -webkit-backdrop-filter: blur(9px) saturate(0.9);
  backdrop-filter: blur(9px) saturate(0.9);
  animation: modal-backdrop 0.45s ease both;
}

.modal {
  width: min(94vw, 430px);
  max-height: min(86dvh, 740px);
  overflow-y: auto;
  padding: 24px 22px;
  border-radius: var(--radius-lg);
  border: 6px solid var(--wood-dark);
  background-color: #3a2412;
  background-image:
    linear-gradient(180deg, rgba(22, 14, 8, 0.9), rgba(10, 7, 5, 0.96)),
    url("../assets/backgrounds/wood.png");
  background-size: auto, 360px 360px;
  background-position: center;
  box-shadow:
    var(--shadow),
    inset 0 2px 0 rgba(255, 255, 255, 0.16),
    inset 0 -10px 20px rgba(0, 0, 0, 0.5);
  animation: modal-pop 0.32s cubic-bezier(0.2, 1.35, 0.4, 1);
  -webkit-overflow-scrolling: touch;
}

.modal__head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.modal__head h2,
.modal h2 {
  flex: 1;
  margin: 0;
  color: #fff4cd;
  font-size: 25px;
  font-weight: 900;
  letter-spacing: 0.005em;
  line-height: 1.1;
  text-shadow: 0 3px 3px #160c05;
}

.modal__sub {
  margin: 6px 0 0;
  color: #e9d7ae;
  font-size: 13px;
  line-height: 1.5;
}

.modal__actions {
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin-top: 18px;
}

.modal__actions .btn {
  width: 100%;
  /* Dialog action lists read as a tidy stack, so no per-button lean here. */
  --tilt: 0deg;
}

/* Dialog planks were inheriting the 16px body size, which read small against
   the taller plank artwork. */
.modal .btn {
  font-size: clamp(18px, 2.4dvh, 23px);
}

.modal__close {
  flex: 0 0 auto;
  margin: -6px -6px 0 0;
}

.stars {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin: 14px 0 4px;
  font-size: 38px;
  line-height: 1;
  color: rgba(255, 243, 223, 0.14);
}

.stars .is-on {
  color: var(--gold);
  text-shadow: 0 0 24px rgba(255, 201, 60, 0.65);
  animation: star-pop 0.45s cubic-bezier(0.2, 1.6, 0.4, 1) both;
}

.stars .is-on:nth-child(2) { animation-delay: 0.12s; }
.stars .is-on:nth-child(3) { animation-delay: 0.24s; }

.stat-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 16px;
}

.stat-grid > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(189, 134, 67, 0.34);
  background: rgba(18, 15, 11, 0.55);
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.35);
}

.stat-grid span {
  color: var(--muted-2);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.stat-grid strong {
  color: #fff6e0;
  font-size: 18px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}

.modal__note {
  margin-top: 14px;
  color: var(--muted-2);
  font-size: 11px;
  line-height: 1.5;
  text-align: center;
}

/* Settings */

.setting-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 0;
  border-bottom: 1px solid rgba(232, 187, 102, 0.22);
}

.setting-row:last-of-type {
  border-bottom: 0;
}

.setting-row__label {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.setting-row__label strong {
  color: #fff6e0;
  font-size: 14px;
  font-weight: 800;
}

.setting-row__label span {
  color: var(--muted-2);
  font-size: 11px;
}

.setting-row--slider {
  flex-direction: column;
  align-items: stretch;
  gap: 9px;
}

.setting-row__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.setting-row__value {
  color: #ffe08a;
  font-size: 12px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.setting-range {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 9px;
  border-radius: 999px;
  border: 1px solid rgba(0, 0, 0, 0.4);
  background: linear-gradient(90deg, #a8ed30, #35e6ff);
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.45);
  cursor: pointer;
}

.setting-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid #1a1208;
  background: #fff6e0;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.55);
}

.setting-range::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid #1a1208;
  background: #fff6e0;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.55);
}

.switch {
  position: relative;
  flex: 0 0 auto;
  width: 48px;
  height: 28px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: rgba(0, 0, 0, 0.36);
  transition: background 0.18s ease, border-color 0.18s ease;
}

.switch::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--muted);
  transition: transform 0.18s cubic-bezier(0.2, 1.2, 0.4, 1), background 0.18s ease;
}

.switch.is-on {
  background: linear-gradient(90deg, rgba(139, 217, 78, 0.32), rgba(255, 201, 60, 0.32));
  border-color: rgba(139, 217, 78, 0.6);
}

.switch.is-on::after {
  transform: translateX(20px);
  background: var(--accent);
  box-shadow: 0 0 12px rgba(139, 217, 78, 0.6);
}

/* Shop / wallet */

.wallet-amount {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 18px 0 4px;
  color: #fff6e0;
  font-size: 34px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 2px 2px rgba(0, 0, 0, 0.5);
}

.wallet-amount img {
  width: 40px;
  height: 40px;
  object-fit: contain;
  filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.45));
}

.shop-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 16px;
}

.shop-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 52px;
  padding: 0 14px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: rgba(0, 0, 0, 0.24);
  color: #fff6e0;
  font-size: 14px;
  font-weight: 800;
  text-align: left;
  transition: background 0.14s ease, border-color 0.14s ease;
}

.shop-item:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: var(--line-strong);
}

.shop-item strong {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
}

.shop-item strong img {
  width: 18px;
  height: 18px;
}

.shop-item:disabled {
  opacity: 0.4;
}

/* How to play */

.how-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}

.how-list li {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 10px;
  align-items: start;
}

.how-list__num {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 11px;
  border: 1px solid rgba(255, 226, 178, 0.2);
  background: linear-gradient(180deg, rgba(139, 217, 78, 0.18), rgba(255, 201, 60, 0.06));
  color: var(--accent);
  font-size: 13px;
  font-weight: 900;
}

.how-list strong {
  display: block;
  margin-bottom: 2px;
  color: #fff6e0;
  font-size: 14px;
  font-weight: 800;
}

.how-list p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

.how-list__obstacles {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}

.how-list__obstacle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 7px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.03);
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
}

.how-list__obstacle img {
  width: 16px;
  height: 16px;
  object-fit: contain;
}

/* ------------------------------------------------------------
   Toast
   ------------------------------------------------------------ */

.toast {
  position: fixed;
  left: 50%;
  bottom: calc(22px + var(--safe-bottom));
  z-index: 120;
  max-width: min(86vw, 390px);
  padding: 10px 17px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: rgba(12, 9, 6, 0.95);
  color: var(--text);
  font-size: 12px;
  font-weight: 800;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 18px);
  transition: opacity 0.22s ease, transform 0.22s ease;
  box-shadow: 0 16px 38px rgba(0, 0, 0, 0.55);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.toast.is-on {
  opacity: 1;
  transform: translate(-50%, 0);
}

.toast.is-gold {
  border-color: rgba(255, 201, 60, 0.5);
  color: var(--gold);
}

.toast.is-danger {
  border-color: rgba(255, 93, 122, 0.55);
  color: #ffb1be;
}

/* ------------------------------------------------------------
   FX canvas / boot
   ------------------------------------------------------------ */

.fx-canvas {
  position: fixed;
  inset: 0;
  z-index: 60;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.boot {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  background-color: var(--bg-0);
  background-image:
    radial-gradient(circle at 50% 40%, rgba(255, 201, 60, 0.12), transparent 48%),
    linear-gradient(rgba(10, 8, 6, 0.78), rgba(10, 8, 6, 0.92)),
    url("../assets/backgrounds/steel.png");
  background-size: auto, auto, 460px 460px;
  background-position: center;
  transition: opacity 0.45s ease, visibility 0.45s ease;
}

.boot.is-hidden {
  opacity: 0;
  visibility: hidden;
}

.boot__bar {
  width: 200px;
  height: 6px;
  overflow: hidden;
  border-radius: 99px;
  background: rgba(0, 0, 0, 0.45);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.6);
}

.boot__bar-fill {
  width: 0%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--accent), var(--gold), var(--ice));
  box-shadow: 0 0 16px rgba(255, 201, 60, 0.55);
  transition: width 0.2s ease;
}

.boot__text {
  margin: 0;
  color: var(--muted-2);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.boot__text.is-error {
  color: var(--danger);
  letter-spacing: 0.04em;
  text-transform: none;
}

.noscript {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: grid;
  place-items: center;
  padding: 24px;
  background: var(--bg-0);
  color: var(--text);
  text-align: center;
}

/* ------------------------------------------------------------
   Animations
   ------------------------------------------------------------ */

@keyframes floaty {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -14px; }
}

@keyframes orb-float {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(3%, -4%, 0) scale(1.08); }
}

@keyframes brand-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}

@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes modal-pop {
  0% { opacity: 0; transform: translateY(16px) scale(0.96); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes star-pop {
  0% { opacity: 0; transform: scale(0.3) rotate(-18deg); }
  70% { opacity: 1; transform: scale(1.18) rotate(4deg); }
  100% { opacity: 1; transform: scale(1) rotate(0); }
}

@keyframes reward-in {
  0% { opacity: 0; transform: scale(0.3) rotate(-8deg); }
  70% { opacity: 1; transform: scale(1.12) rotate(3deg); }
  100% { opacity: 1; transform: scale(1) rotate(0); }
}

@keyframes combo-in {
  0% { opacity: 0; transform: translateX(-50%) scale(0.7); }
  100% { opacity: 1; transform: translateX(-50%) scale(1); }
}

@keyframes board-shake {
  0%, 100% { transform: translate(0, 0); }
  20% { transform: translate(-3px, 2px); }
  40% { transform: translate(3px, -2px); }
  60% { transform: translate(-2px, -1px); }
  80% { transform: translate(2px, 1px); }
}

@keyframes view-shock {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  14% {
    transform: translate(var(--shock-x, -9px), var(--shock-y, 6px))
      rotate(var(--shock-rot, -0.35deg));
  }
  34% {
    transform: translate(calc(var(--shock-x, -9px) * -0.72), calc(var(--shock-y, 6px) * -0.72))
      rotate(calc(var(--shock-rot, -0.35deg) * -0.72));
  }
  54% {
    transform: translate(calc(var(--shock-x, -9px) * 0.42), calc(var(--shock-y, 6px) * 0.42))
      rotate(calc(var(--shock-rot, -0.35deg) * 0.42));
  }
  74% {
    transform: translate(calc(var(--shock-x, -9px) * -0.18), calc(var(--shock-y, 6px) * -0.18))
      rotate(calc(var(--shock-rot, -0.35deg) * -0.18));
  }
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.55; }
}

/* ------------------------------------------------------------
   Responsive / motion preferences
   ------------------------------------------------------------ */

@media (max-height: 700px) {
  .tray-slot { width: clamp(60px, 19vw, 86px); }
  .reward-slot { min-height: 48px; }
  .reward-chip__name { display: none; }
  .board-frame { padding: 9px; border-width: 4px; }
}

@media (max-width: 360px) {
  .home__actions {
    width: 92%;
  }
}

@media (min-width: 720px) {
  .game-screen {
    width: min(100%, 760px);
    margin: 0 auto;
    border-left: 1px solid rgba(255, 226, 178, 0.06);
    border-right: 1px solid rgba(255, 226, 178, 0.06);
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

body.reduce-motion *,
body.reduce-motion *::before,
body.reduce-motion *::after {
  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.01ms !important;
}


/* Inline SVGs sit on the text baseline, which nudges every button icon a
   couple of pixels high. Blocks centre them in their flex/grid parent. */
svg {
  display: block;
}

.mode-picker {
  display: grid;
  gap: 10px;
  margin: 16px 0 4px;
}

/* The mode list is the exception: all five planks line up straight. */
.mode-picker .btn {
  --tilt: 0deg;
}

/* Backdrop eases in: the board darkens and blurs as the dialog arrives. */
@keyframes modal-backdrop {
  from {
    background-color: rgba(4, 3, 2, 0);
    -webkit-backdrop-filter: blur(0) saturate(1);
    backdrop-filter: blur(0) saturate(1);
  }
  to {
    background-color: rgba(4, 3, 2, 0.66);
    -webkit-backdrop-filter: blur(8px) saturate(0.85);
    backdrop-filter: blur(8px) saturate(0.85);
  }
}

/* Every plank keeps the supplied button art's 796 x 205 proportions so the
   gold rim and screws are never stretched. */
.btn {
  aspect-ratio: 796 / 205;
}


/* Planks: every button paints its own wood via ::before, and neighbours flip
   their copy so a column of buttons never shows the same grain twice. */
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background-image: url("../assets/home/button-brown.webp");
  background-size: 100% 100%;
  background-position: center;
  pointer-events: none;
}

.btn:hover::before {
  background-image: url("../assets/home/button-brown-hover.webp");
}

.btn:active::before {
  background-image: url("../assets/home/button-brown-active.webp");
}

.btn--primary::before {
  background-image: url("../assets/home/button-green.webp");
}

.btn--primary:hover::before {
  background-image: url("../assets/home/button-green-hover.webp");
}

.btn--primary:active::before {
  background-image: url("../assets/home/button-green-active.webp");
}

.btn--gold::before {
  background-image: linear-gradient(135deg, #ffe9a8 0%, #ffd166 42%, #f0a92c 100%);
}

.btn--ghost::before {
  content: none;
}

/* Mirror sideways only: a vertical flip would turn the plank upside down and
   move its glass edge and shadow to the top. */
.btn:nth-of-type(4n + 2)::before,
.btn:nth-of-type(4n + 3)::before {
  transform: scaleX(-1);
}


/* ------------------------------------------------------------
   Sprite display font
   ------------------------------------------------------------ */

/* Each glyph is one cell of a 13 x 7 colour atlas; --bf-size is the cell
   height in CSS pixels, so the artwork scales without a webfont. */
.bf {
  --bf-size: 0.78em;
  display: inline-flex;
  align-items: center;
  line-height: 0;
  filter: drop-shadow(0 2px 1px rgba(0, 0, 0, 0.45));
}

.bf__g,
.bf__space {
  display: block;
  flex: 0 0 auto;
  height: var(--bf-size);
  background-image: var(--bf-src);
  background-repeat: no-repeat;
  background-size: calc(13 * var(--bf-size)) calc(7 * var(--bf-size));
  background-position: calc(var(--cx) * var(--bf-size) * -1) calc(var(--cy) * var(--bf-size) * -1);
}

.bf__g {
  width: calc(var(--w) * var(--bf-size) / 128);
}

.bf__space {
  width: calc(38 * var(--bf-size) / 128);
}

.bf--white { --bf-src: url("../assets/fonts/white.png"); }
.bf--green { --bf-src: url("../assets/fonts/green.png"); }
.bf--blue { --bf-src: url("../assets/fonts/blue.png"); }
.bf--gold { --bf-src: url("../assets/fonts/gold.png"); }
.bf--red { --bf-src: url("../assets/fonts/red.png"); }

.btn .bf { --bf-size: 0.78em; }
.btn--xl .bf { --bf-size: 0.8em; }
.hud__score .bf { --bf-size: 0.85em; }
.hud__level .bf { --bf-size: 0.8em; }
.modal__head h2 .bf { --bf-size: 0.8em; }


/* The sprite face reads small at the system font's size, so planks and HUD
   numbers get their own cell height. */
.btn .bf,
.btn--xl .bf,
.btn--ghost .bf { --bf-size: 28px; }
.stat .bf,
.pill .bf { --bf-size: 18px; }
.hud__score .bf { --bf-size: 34px; }
.hud__level .bf { --bf-size: 13px; }
.modal__head h2 .bf { --bf-size: 30px; }

/* Spaces must stay blank: without this the atlas inherited onto the spacer
   draws a corner of the 'A' cell, which reads as a slash between words. */
.bf__space { background-image: none; }

/* Menu planks and dialog headings use the rounded UI face from the home
   design. Labels painted by an older cached sprite-font build keep their
   original text through data-text, so the menus read the same either way. */
.btn .bf,
.modal__head h2 .bf,
.sheet-header h1 .bf,
.sheet-title .bf {
  display: inline-flex;
  line-height: inherit;
  filter: none;
}

.btn .bf::before,
.modal__head h2 .bf::before,
.sheet-header h1 .bf::before,
.sheet-title .bf::before {
  content: attr(data-text);
}

.btn .bf > i,
.modal__head h2 .bf > i,
.sheet-header h1 .bf > i,
.sheet-title .bf > i {
  display: none;
}
.btn .bf { --bf-size: 28px; }

/* Plank buttons are their artwork alone: no outline, no frame. The ghost
   variant is a plain panel, so it keeps its thin gold outline. */
.btn,
.btn--primary,
.btn--gold,
.icon-btn,
.pill,
.stat {
  border: 0;
}

.btn.btn--ghost {
  border: 1px solid rgba(189, 134, 67, 0.45);
  /* The plank art carries its own rounded corners; a plain panel needs a
     radius of its own. */
  border-radius: 16px;
}



/* ------------------------------------------------------------
   Full-width grid, final HUD
   Four stacked rows: gear / wooden banner / pause, then lives / score / coins,
   then the objective pill, then the progress trough. js/game.js gives the HUD
   the height left over by the grid and the tray.
   ------------------------------------------------------------ */

.board-area {
  /* Grows so the grid gets air above and below; the square inside is still
     width-driven (js/game.js sizes it), and this pushes the dock to the
     bottom edge. The bottom padding lifts the centred grid slightly above the
     exact middle so the board reads as part of the play area, not floating. */
  flex: 1 1 auto;
  padding: 4px 4px var(--board-lift, 0px);
  min-height: 0;
}

.hud {
  /* Chips and row rhythm follow whichever viewport axis is tighter, so the
     same rules read correctly on a short phone, a tall phone and a tablet. */
  --chip: clamp(32px, min(11.4vw, 6.4vh), 68px);
  --edge: rgba(214, 168, 92, 0.6);
  --bar-text: #f8e7c4;
  display: grid;
  /* One full-width column, or the rows' width:100% would size against a
     max-content track and collapse. */
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  align-content: start;
  gap: clamp(7px, min(2.4vw, 2vh), 20px);
  min-height: 0;
  padding:
    calc(clamp(10px, 2.1vh, 24px) + var(--safe-top))
    clamp(10px, 3vw, 18px)
    clamp(2px, 0.6vh, 8px);
}

.hud__row {
  display: grid;
  /* Sides equal, score column a touch wider so the panel reads as the middle
     feature rather than a sliver. */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.06fr) minmax(0, 1fr);
  align-items: center;
  width: 100%;
  gap: clamp(6px, 2vw, 12px);
}

.hud__row > :first-child {
  justify-self: start;
}

.hud__row > :last-child {
  justify-self: end;
}

/* Gold-rimmed chip: gear, pause, hearts and coins share it. */
.hud .stat,
.hud .icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--chip);
  min-height: 0;
  padding: 0 clamp(9px, calc(var(--chip) * 0.26), 16px);
  gap: clamp(5px, calc(var(--chip) * 0.16), 10px);
  border: 2px solid var(--edge);
  border-radius: calc(var(--chip) * 0.36);
  background: linear-gradient(180deg, rgba(98, 72, 38, 0.95), rgba(26, 18, 9, 0.97));
  box-shadow:
    inset 0 1px 0 rgba(255, 232, 186, 0.25),
    inset 0 -8px 14px rgba(0, 0, 0, 0.32),
    0 8px 16px rgba(0, 0, 0, 0.45);
  color: var(--bar-text);
}

.hud .icon-btn {
  width: var(--chip);
  padding: 0;
}

.hud .icon-btn svg {
  width: calc(var(--chip) * 0.46);
  height: calc(var(--chip) * 0.46);
}

/* Hearts and coins are a matched pair: they fill equal grid columns and are
   wide enough for a five-digit coin count. */
.hud .stat {
  width: 100%;
  padding: 0 clamp(6px, calc(var(--chip) * 0.17), 12px);
  gap: clamp(4px, calc(var(--chip) * 0.1), 7px);
}

.hud .stat img {
  width: calc(var(--chip) * 0.46);
  height: calc(var(--chip) * 0.46);
}

.hud .stat .bf {
  --bf-size: min(calc(var(--chip) * 0.5), 30px);
  transform: translateY(0.155em);
}

/* --- Wooden banner, leaves either side --- */

/* The sprigs hang off the plank's ends and must not add to the row height. */
.hud__banner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  justify-self: center;
  width: fit-content;
  min-width: 0;
}

.hud__plank {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: clamp(5px, 1.5vw, 9px) clamp(14px, 4.6vw, 28px);
  border-radius: 999px;
  border: 2px solid rgba(255, 214, 140, 0.5);
  background:
    linear-gradient(180deg, rgba(255, 226, 170, 0.3), rgba(0, 0, 0, 0.14) 50%, rgba(0, 0, 0, 0.36)),
    url("../assets/backgrounds/brownWood.png") center / cover;
  box-shadow:
    0 6px 14px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(255, 235, 190, 0.4);
}

.hud__level .bf {
  --bf-size: clamp(15px, 4.1vw, 26px);
  transform: translateY(0.1em);
}

.hud__leaf {
  position: absolute;
  z-index: 0;
  bottom: -14px;
  height: clamp(52px, 11vw, 72px);
  aspect-ratio: 138 / 199;
  background: center / contain no-repeat;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.55)) saturate(0.92) brightness(0.88);
  transform-origin: 50% 100%;
}

.hud__leaf--left {
  background-image: url("../assets/items/ivy-sprig.png");
  right: calc(100% - clamp(8px, 3vw, 26px));
  transform: rotate(-6deg);
}

.hud__leaf--right {
  background-image: url("../assets/items/ivy-sprig-right.png");
  left: calc(100% - clamp(8px, 3vw, 26px));
  transform: rotate(6deg);
}

/* --- Score panel --- */

.hud__score-panel {
  display: grid;
  place-items: center;
  /* The score's sprite height follows this panel's width, so six digits stay
     inside it on the narrowest phones instead of spilling over the rim. */
  container-type: inline-size;
  width: 100%;
  height: var(--chip);
  border: 2px solid var(--edge);
  border-radius: calc(var(--chip) * 0.36);
  background: linear-gradient(180deg, rgba(44, 32, 18, 0.96), rgba(12, 9, 5, 0.98));
  box-shadow:
    inset 0 2px 7px rgba(0, 0, 0, 0.65),
    0 8px 16px rgba(0, 0, 0, 0.45);
}

.hud__score {
  display: grid;
  place-items: center;
  line-height: 1;
}

.hud__score .bf {
  --bf-size: min(calc(var(--chip) * 0.8), 24cqw);
  filter:
    drop-shadow(0 0 12px rgba(255, 190, 60, 0.35))
    drop-shadow(0 3px 2px rgba(0, 0, 0, 0.5));
}

/* --- Objective pill and progress trough --- */

.objective-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(6px, 2vw, 12px);
  padding: 0;
}

.objective,
.timer {
  gap: clamp(5px, 1.6vw, 10px);
  max-width: calc(100% - 8px);
  padding: clamp(5px, 1.5vw, 9px) clamp(12px, 4vw, 22px);
  border: 2px solid var(--edge);
  background: linear-gradient(180deg, rgba(62, 45, 24, 0.8), rgba(14, 10, 5, 0.88));
  box-shadow:
    inset 0 1px 0 rgba(255, 232, 186, 0.2),
    0 8px 18px rgba(0, 0, 0, 0.4);
  color: var(--bar-text);
}

.objective .bf,
.timer .bf {
  --bf-size: clamp(14px, 3.9vw, 23px);
  transform: translateY(0.1em);
}

.objective__icon,
.timer__icon {
  width: clamp(15px, 4vw, 24px);
  height: clamp(15px, 4vw, 24px);
  color: var(--gold);
}

.hud__progress {
  width: min(56%, 360px);
  height: clamp(7px, min(3.1vw, 1.7vh), 18px);
  /* Even rhythm with the other HUD rows; the bar reads as the goal's base. */
  margin: 0;
  border: 2px solid var(--edge);
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(8, 6, 3, 0.95), rgba(28, 20, 11, 0.92));
  box-shadow:
    inset 0 3px 8px rgba(0, 0, 0, 0.75),
    0 1px 0 rgba(255, 232, 186, 0.12);
}

.hud__progress-bar {
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #ffd166, #ffab2e);
  box-shadow: 0 0 14px rgba(255, 201, 60, 0.6);
}

/* --- Tray: wooden frame with a felt well --- */

.tray {
  position: relative;
  isolation: isolate;
  aspect-ratio: 2.45 / 1;
  /* Width matches the grid's frame (set in js/game.js); auto margins keep it
     centred when the board is height-limited. */
  margin: var(--band-gap, 14px) auto 0;
  min-height: 0;
  align-items: center;
  justify-content: center;
  gap: clamp(8px, 3vw, 20px);
  padding: clamp(12px, 2.4vh, 22px) clamp(12px, 3vw, 20px);
  border-radius: 24px;
  border: 3px solid rgba(28, 18, 8, 0.9);
  background-color: #4a2f18;
  background-image:
    linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(0, 0, 0, 0.22)),
    url("../assets/backgrounds/wood.png");
  background-size: auto, 340px 340px;
  background-position: center;
  box-shadow:
    0 18px 40px rgba(0, 0, 0, 0.5),
    inset 0 2px 0 rgba(255, 235, 190, 0.2);
}

.tray::before {
  content: "";
  position: absolute;
  inset: clamp(7px, 1.8vw, 13px);
  z-index: -1;
  border-radius: 16px;
  background: radial-gradient(circle at 50% 40%, rgba(46, 33, 18, 0.92), rgba(9, 6, 3, 0.97));
  box-shadow:
    inset 0 4px 14px rgba(0, 0, 0, 0.8),
    inset 0 -3px 10px rgba(0, 0, 0, 0.65);
}

.tray-slot {
  flex: 1 1 0;
  width: auto;
  max-width: clamp(112px, min(30vw, 22vh), 190px);
  min-width: 0;
}

/* Small cross-head steel screw at each frame corner, sitting straight on the
   wood. Both slots turn together to the angle js/ui.js sets (--bolt-spin). */
.frame-corner {
  position: absolute;
  z-index: 4;
  width: clamp(11px, 2.7vw, 15px);
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle at 34% 26%, rgba(255, 255, 255, 0.34) 0 6%, rgba(255, 255, 255, 0) 40%),
    radial-gradient(circle at 50% 40%, #6f767f 0 30%, #575e67 54%, #3b4047 78%, #23272b 100%);
  box-shadow:
    0 2px 3px rgba(0, 0, 0, 0.65),
    inset 0 0 0 1px rgba(226, 236, 246, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    inset 0 -2px 3px rgba(0, 0, 0, 0.6),
    inset -2px -1px 2px rgba(0, 0, 0, 0.4);
  pointer-events: none;
}

/* Cross slots: one bar each way, cut into the head. */
.frame-corner::before,
.frame-corner::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 58%;
  height: 8%;
  min-height: 1.3px;
  border-radius: 1px;
  background: linear-gradient(
    180deg,
    rgba(4, 6, 9, 0.92) 0 38%,
    rgba(12, 15, 20, 0.62) 38% 68%,
    rgba(206, 218, 230, 0.42) 72% 100%
  );
  transform: rotate(var(--bolt-spin, 0deg));
}

.frame-corner::after {
  transform: rotate(calc(var(--bolt-spin, 0deg) + 90deg));
}

.frame-corner--tl { top: 3px; left: 3px; }
.frame-corner--tr { top: 3px; right: 3px; }
.frame-corner--bl { bottom: 3px; left: 3px; }
.frame-corner--br { bottom: 3px; right: 3px; }

/* --- Static metallic gold rim -------------------------------------------
   One conic gradient, masked to the border area, gives every gold edge the
   same metallic shimmer: dark reflected edges with narrow specular flashes.
   No images, keyframes, animation or extra DOM, and each element keeps its
   own fill, radius and shadow. Tune per element with --gold-width. */
:root {
  --gold-conic: conic-gradient(
    from 225deg at 50% 50%,
    #5b2908 0deg,
    #9e5a13 24deg,
    #f6c55a 47deg,
    #fff7bf 60deg,
    #bf7c22 75deg,
    #6b3209 109deg,
    #b56c15 138deg,
    #f9d97d 166deg,
    #fff8cf 175deg,
    #bb711c 192deg,
    #70380a 222deg,
    #e9a93a 257deg,
    #fff4b4 270deg,
    #ad6417 284deg,
    #683207 307deg,
    #d69c32 333deg,
    #5b2908 360deg
  );
}

.hud .stat,
.hud .icon-btn,
.hud__score-panel,
.objective,
.timer,
.hud__plank,
.hud__progress,
.reward-dock {
  --gold-width: 3px;
  position: relative;
  isolation: isolate;
}

.objective,
.timer,
.hud__plank,
.hud__progress { --gold-width: 2px; }

.hud .stat::after,
.hud .icon-btn::after,
.hud__score-panel::after,
.objective::after,
.timer::after,
.hud__plank::after,
.hud__progress::after,
.reward-dock::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  height: auto;
  opacity: 1;
  box-sizing: border-box;
  border-radius: inherit;
  padding: var(--gold-width);
  pointer-events: none;
  background: var(--gold-conic);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
}

/* The dialog is a scroll container, so its rim is painted as a border-box
   background layer instead of an ::after overlay (which would scroll away). */
.modal {
  border-width: 3px;
  border-color: transparent;
  background-image:
    linear-gradient(160deg, rgba(96, 64, 25, 0.93), rgba(40, 27, 18, 0.96) 62%, rgba(21, 26, 26, 0.97)),
    url("../assets/backgrounds/wood.png"),
    var(--gold-conic);
  background-size: auto, 360px 360px, auto;
  background-position: center, center, center;
  background-clip: padding-box, padding-box, border-box;
  background-origin: padding-box, padding-box, border-box;
}

/* A coin or heart lands in its chip: one quick pop with a gold halo. */
.hud .stat.is-gained {
  animation: chip-gain 0.45s cubic-bezier(0.2, 1.4, 0.4, 1);
}

@keyframes chip-gain {
  0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255, 214, 120, 0); }
  35% {
    transform: scale(1.09);
    box-shadow: 0 0 0 3px rgba(255, 214, 120, 0.45), 0 0 18px rgba(255, 196, 64, 0.45);
  }
  100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255, 214, 120, 0); }
}

/* Home reference layout: the whole logo/menu/HUD group is centred and scaled
   as one unit; on short landscape screens it becomes two columns instead of
   shrinking the stack until the labels are unreadable. */
@media (orientation: landscape) and (max-height: 660px) and (min-width: 540px) {
  .home__content {
    width: min(96%, 840px);
    display: grid;
    grid-template-columns: minmax(0, 0.93fr) minmax(0, 1.07fr);
    grid-template-rows: auto auto;
    column-gap: clamp(12px, 3.5vw, 54px);
    row-gap: clamp(8px, 2vh, 18px);
    align-items: center;
  }

  .logo-area {
    grid-area: 1 / 1 / 3 / 2;
    width: 100%;
  }

  .home__actions {
    grid-area: 1 / 2 / 2 / 3;
    width: 100%;
    gap: clamp(6px, 1.7vh, 12px);
  }

  .home__meta {
    grid-area: 2 / 2 / 3 / 3;
    width: min(100%, 340px);
    justify-self: center;
  }

  .menu-button { font-size: clamp(18px, 4.8vh, 29px); }
  .hud-stat { height: clamp(40px, 11vh, 58px); font-size: clamp(15px, 4vh, 23px); }
  .settings-btn { width: clamp(40px, 11vh, 58px); height: clamp(40px, 11vh, 58px); }
  .block-purple { top: 72%; right: 1%; width: 10%; }
}

/* ------------------------------------------------------------
   Device-progressive HUD
   Short landscape windows get a compact top bar so the grid keeps its
   height; tall, roomier screens get the full-size chips and rhythm.
   ------------------------------------------------------------ */

@media (max-height: 620px) {
  .hud {
    --chip: clamp(26px, min(8.6vw, 5.4vh), 44px);
    gap: clamp(4px, 1.3vh, 10px);
    padding:
      calc(clamp(4px, 1.2vh, 10px) + var(--safe-top))
      clamp(8px, 2.4vw, 16px)
      0;
  }

  .hud__leaf {
    height: clamp(30px, 9vh, 52px);
    bottom: -10px;
  }

  .hud__progress {
    height: clamp(6px, 1.5vh, 12px);
    margin-top: 0;
  }

  .objective .bf,
  .timer .bf {
    --bf-size: clamp(12px, 2.7vh, 18px);
  }

  .objective__icon,
  .timer__icon {
    width: clamp(13px, 2.8vh, 18px);
    height: clamp(13px, 2.8vh, 18px);
  }
}

@media (min-width: 720px) and (min-height: 760px) {
  .hud {
    --chip: clamp(48px, min(8.6vw, 6vh), 68px);
    gap: clamp(12px, 1.7vh, 22px);
  }
}

@media (max-width: 345px) {
  .home__actions { width: 91%; }
  .home__meta { width: 88%; }
  .menu-button { font-size: clamp(17px, 3dvh, 28px); }
}

@media (prefers-reduced-motion: reduce) {
  .menu-button { transition: none; }
}