@font-face {
  font-family: 'Chakra Petch';
  font-weight: 500;
  font-display: swap;
  src: url(./assets/fonts/chakra-petch-latin-500-normal.woff2) format('woff2');
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC,
    U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Chakra Petch';
  font-weight: 600;
  font-display: swap;
  src: url(./assets/fonts/chakra-petch-latin-600-normal.woff2) format('woff2');
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC,
    U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Chakra Petch';
  font-weight: 700;
  font-display: swap;
  src: url(./assets/fonts/chakra-petch-latin-700-normal.woff2) format('woff2');
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC,
    U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Chakra Petch';
  font-weight: 500;
  font-display: swap;
  src: url(./assets/fonts/chakra-petch-latin-ext-500-normal.woff2) format('woff2');
  unicode-range:
    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
    U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Chakra Petch';
  font-weight: 600;
  font-display: swap;
  src: url(./assets/fonts/chakra-petch-latin-ext-600-normal.woff2) format('woff2');
  unicode-range:
    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
    U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Chakra Petch';
  font-weight: 700;
  font-display: swap;
  src: url(./assets/fonts/chakra-petch-latin-ext-700-normal.woff2) format('woff2');
  unicode-range:
    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
    U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --ink: #382212;
  --deep: #28180c;
  --panel: rgba(68, 42, 23, 0.92);
  --panel-2: rgba(97, 62, 35, 0.9);
  --line: rgba(235, 211, 170, 0.28);
  --text: #fcf9f4;
  --soft: #d6c4a6;
  --cyan: #d7a857;
  --violet: #e5c58e;
  --coral: #ff6f61;
  --amber: #ffc14d;
  --mint: #2ff0a8;
  --rose: #ff5fae;
  --danger: #ff3d6e;
  --cut: 10px;
  --font:
    'Chakra Petch', 'Trebuchet MS', system-ui, 'Noto Sans', 'Hiragino Sans', 'Apple SD Gothic Neo', 'PingFang SC',
    'Microsoft YaHei', 'Malgun Gothic', 'Yu Gothic', sans-serif;
  --sat: env(safe-area-inset-top, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
  --sal: env(safe-area-inset-left, 0px);
  --sar: env(safe-area-inset-right, 0px);
}

* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}
html,
body {
  margin: 0;
  height: 100%;
  background: var(--ink);
  color: var(--text);
  font-family: var(--font);
  overflow: hidden;
}
body {
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  overscroll-behavior: none;
}
canvas#game {
  position: fixed;
  inset: 0;
  display: block;
  touch-action: none;
}
canvas#post {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}
body.post-on canvas#game {
  opacity: 0;
}
[hidden] {
  display: none !important;
}
button {
  font: inherit;
  color: inherit;
  border: 0;
  background: none;
  cursor: pointer;
  padding: 0;
}
svg {
  width: 1em;
  height: 1em;
  flex: none;
}
/* ---------- loading ---------- */
/* The loading screen is styled with castle.css (same panel and logo as the title screen). */
#loader {
  z-index: 60;
  transition: opacity 0.35s ease;
}
#loader.done {
  opacity: 0;
  pointer-events: none;
}

#safe-probe {
  position: fixed;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  visibility: hidden;
  padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px)
    env(safe-area-inset-left, 0px);
}

:focus-visible {
  outline: 3px solid var(--amber);
  outline-offset: 3px;
}

/* ---------- faceted shapes ---------- */
.facet {
  clip-path: polygon(
    var(--cut) 0,
    calc(100% - var(--cut)) 0,
    100% var(--cut),
    100% calc(100% - var(--cut)),
    calc(100% - var(--cut)) 100%,
    var(--cut) 100%,
    0 calc(100% - var(--cut)),
    0 var(--cut)
  );
}

/* ---------- buttons ---------- */
.btn {
  --c1: #956139;
  --c2: #6f4627;
  white-space: nowrap;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 18px;
  font-weight: 600;
  font-size: 16px;
  letter-spacing: 0.02em;
  background: linear-gradient(180deg, var(--c1), var(--c2));
  clip-path: polygon(
    var(--cut) 0,
    calc(100% - var(--cut)) 0,
    100% var(--cut),
    100% calc(100% - var(--cut)),
    calc(100% - var(--cut)) 100%,
    var(--cut) 100%,
    0 calc(100% - var(--cut)),
    0 var(--cut)
  );
  box-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, 0.3),
    inset 0 -5px 0 rgba(23, 14, 7, 0.38);
  transition:
    transform 0.08s ease,
    filter 0.15s ease,
    box-shadow 0.08s ease;
}
.btn svg {
  width: 20px;
  height: 20px;
}
.btn:hover {
  filter: brightness(1.12);
}
.btn:active {
  transform: translateY(3px) scale(0.985);
  filter: brightness(0.92);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    inset 0 -2px 0 rgba(23, 14, 7, 0.38),
    inset 0 3px 6px rgba(23, 14, 7, 0.25);
}
.btn.primary {
  --c1: #ffd36e;
  --c2: #ff8a4c;
  box-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, 0.55),
    inset 0 -5px 0 rgba(150, 50, 10, 0.45);
  color: #2a1205;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35);
  overflow: hidden;
}
.btn.shine::after,
.title-actions .btn.primary::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 40%;
  left: -60%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.55), transparent);
  transform: skewX(-18deg);
  animation: sweep 2.8s ease-in-out 0.6s infinite;
  pointer-events: none;
}
@keyframes sweep {
  0%,
  60% {
    left: -60%;
  }
  100% {
    left: 130%;
  }
}
@media (hover: hover) {
  .btn:hover {
    transform: scale(1.03);
  }
  .btn:hover:active {
    transform: translateY(3px) scale(0.985);
  }
}
.btn.primary:active {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    inset 0 -2px 0 rgba(150, 50, 10, 0.45),
    inset 0 3px 6px rgba(120, 40, 0, 0.25);
}
.btn.big {
  min-height: 58px;
  font-size: 21px;
  font-weight: 700;
  padding: 0 30px;
  --cut: 13px;
}
.btn.small {
  min-height: 42px;
  font-size: 14px;
  padding: 0 14px;
}
.btn[disabled] {
  opacity: 0.45;
  pointer-events: none;
}

.icon-btn {
  width: 46px;
  height: 46px;
  display: inline-grid;
  place-items: center;
  color: var(--text);
  background: rgba(93, 59, 33, 0.82);
  clip-path: polygon(
    10px 0,
    calc(100% - 10px) 0,
    100% 10px,
    100% calc(100% - 10px),
    calc(100% - 10px) 100%,
    10px 100%,
    0 calc(100% - 10px),
    0 10px
  );
  box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, 0.18);
  transition:
    transform 0.08s ease,
    background 0.15s;
}
.icon-btn svg {
  width: 22px;
  height: 22px;
}
.icon-btn:hover {
  background: rgba(126, 84, 52, 0.92);
}
.icon-btn:active {
  transform: translateY(2px) scale(0.95);
  filter: brightness(0.9);
}
/* Inside cards: darker background with an outline (so the button does not blend into the panel). */
.card .card-head .icon-btn {
  position: relative;
  background: rgba(235, 211, 170, 0.35);
  box-shadow: none;
}
.card .card-head .icon-btn::before {
  content: '';
  position: absolute;
  inset: 1.5px;
  background: #311d0e;
  clip-path: polygon(
    9px 0,
    calc(100% - 9px) 0,
    100% 9px,
    100% calc(100% - 9px),
    calc(100% - 9px) 100%,
    9px 100%,
    0 calc(100% - 9px),
    0 9px
  );
  transition: background 0.15s;
}
.card .card-head .icon-btn:hover::before {
  background: #52341d;
}
.card .card-head .icon-btn svg {
  position: relative;
}

/* ---------- HUD ---------- */
/* Chapter colors (every chapter theme): borders, level badge, glows and secondary text follow the scenery. */
:root,
body.th-geode {
  --acc: #e9cfa1;
  --acc-hi: #fbf5ec;
  --acc-lo: #aa6d3e;
  --acc-rgb: 169, 139, 255;
  --hud-soft: #e8d3b0;
  --hud-top: rgba(108, 69, 40, 0.95);
  --hud-bot: rgba(48, 29, 14, 0.97);
  --badge-1: #f5e8d2;
  --badge-2: #ddb56f;
  --badge-3: #814c24;
}
body.th-ice {
  --acc: #e2bf83;
  --acc-hi: #faf5eb;
  --acc-lo: #875026;
  --acc-rgb: 102, 214, 255;
  --hud-soft: #e4cda5;
  --hud-top: rgba(92, 55, 26, 0.95);
  --hud-bot: rgba(43, 25, 12, 0.97);
  --badge-1: #f4e7d1;
  --badge-2: #d39e42;
  --badge-3: #673d1d;
}
body.th-forge {
  --acc: #ffa552;
  --acc-hi: #fff0d6;
  --acc-lo: #8f3b1c;
  --acc-rgb: 255, 165, 82;
  --hud-soft: #e2bfa9;
  --hud-top: rgba(74, 30, 44, 0.95);
  --hud-bot: rgba(30, 11, 24, 0.97);
  --badge-1: #ffe0a8;
  --badge-2: #f07a2f;
  --badge-3: #7c2716;
}
body.th-emerald {
  --acc: #3fe0a5;
  --acc-hi: #e0fff2;
  --acc-lo: #12735a;
  --acc-rgb: 63, 224, 165;
  --hud-soft: #a6dcc8;
  --hud-top: rgba(16, 72, 62, 0.95);
  --hud-bot: rgba(27, 16, 8, 0.97);
  --badge-1: #c6ffe9;
  --badge-2: #22c48e;
  --badge-3: #0b5a45;
}
body.th-coral {
  --acc: #ff7f86;
  --acc-hi: #fff0f0;
  --acc-lo: #93323f;
  --acc-rgb: 255, 127, 134;
  --hud-soft: #e6b7c0;
  --hud-top: rgba(76, 45, 22, 0.95);
  --hud-bot: rgba(34, 20, 10, 0.97);
  --badge-1: #ffd1d4;
  --badge-2: #ff6577;
  --badge-3: #8a1f33;
}
body.th-amber {
  --acc: #ffc04d;
  --acc-hi: #fff5d6;
  --acc-lo: #8a5a12;
  --acc-rgb: 255, 192, 77;
  --hud-soft: #e5cfa0;
  --hud-top: rgba(70, 50, 18, 0.95);
  --hud-bot: rgba(30, 20, 6, 0.97);
  --badge-1: #ffe9b0;
  --badge-2: #f0a422;
  --badge-3: #6e4308;
}
body.th-obsidian {
  --acc: #ff4f6a;
  --acc-hi: #ffe3e8;
  --acc-lo: #851427;
  --acc-rgb: 255, 79, 106;
  --hud-soft: #e0aab4;
  --hud-top: rgba(52, 16, 30, 0.95);
  --hud-bot: rgba(20, 5, 12, 0.97);
  --badge-1: #ffc2cc;
  --badge-2: #e8304f;
  --badge-3: #6a0a1c;
}
body.th-neon {
  --acc: #ff5fd7;
  --acc-hi: #ffe6f8;
  --acc-lo: #7d1a6b;
  --acc-rgb: 255, 95, 215;
  --hud-soft: #dcb0d6;
  --hud-top: rgba(69, 42, 21, 0.95);
  --hud-bot: rgba(30, 18, 8, 0.97);
  --badge-1: #ffc9f0;
  --badge-2: #e23cbf;
  --badge-3: #5e0e54;
}
body.th-storm {
  --acc: #d4ff4f;
  --acc-hi: #f8ffe0;
  --acc-lo: #5f7a12;
  --acc-rgb: 212, 255, 79;
  --hud-soft: #c8d6a6;
  --hud-top: rgba(51, 40, 31, 0.95);
  --hud-bot: rgba(20, 14, 10, 0.97);
  --badge-1: #f0ffc0;
  --badge-2: #b6e02a;
  --badge-3: #4a5e0c;
}
body.th-prism {
  --acc: #ffd36e;
  --acc-hi: #fff8e0;
  --acc-lo: #7a5410;
  --acc-rgb: 255, 211, 110;
  --hud-soft: #d9cfa8;
  --hud-top: rgba(83, 54, 31, 0.95);
  --hud-bot: rgba(35, 21, 10, 0.97);
  --badge-1: #fff0c0;
  --badge-2: #f5b630;
  --badge-3: #6a4a0a;
}

.hud {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 5;
}
/* The panel swallows taps: tapping the score or the gaps between buttons never fires a shot. */
.hud-panel {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 10px;
  pointer-events: auto;
}
.hud-stat b,
.volley-info,
.res-score > span,
.res-stats b {
  font-variant-numeric: tabular-nums;
}

/* Faceted panel: gradient border in the chapter color + dark glass inside (two clipped layers). */
.gp {
  --c: 12px;
  --bw: 1.5px;
  position: relative;
  isolation: isolate;
}
.gp::before,
.gp::after {
  content: '';
  position: absolute;
  pointer-events: none;
}
.gp::before {
  inset: 0;
  z-index: -2;
  background: linear-gradient(180deg, var(--acc-hi), var(--acc) 22%, rgba(var(--acc-rgb), 0.45) 70%, var(--acc-lo));
  clip-path: polygon(
    var(--c) 0,
    calc(100% - var(--c)) 0,
    100% var(--c),
    100% calc(100% - var(--c)),
    calc(100% - var(--c)) 100%,
    var(--c) 100%,
    0 calc(100% - var(--c)),
    0 var(--c)
  );
}
.gp::after {
  inset: var(--bw);
  z-index: -1;
  --ci: calc(var(--c) - 0.6px);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0) 34%),
    radial-gradient(120% 90% at 50% -10%, rgba(var(--acc-rgb), 0.16), transparent 60%),
    linear-gradient(180deg, var(--hud-top), var(--hud-bot));
  clip-path: polygon(
    var(--ci) 0,
    calc(100% - var(--ci)) 0,
    100% var(--ci),
    100% calc(100% - var(--ci)),
    calc(100% - var(--ci)) 100%,
    var(--ci) 100%,
    0 calc(100% - var(--ci)),
    0 var(--ci)
  );
}
.hud .gp {
  filter: drop-shadow(0 6px 14px rgba(9, 6, 3, 0.5));
}
.hud .hud-panel {
  position: absolute;
} /* .gp is position: relative; the panels stay pinned at the computed position. */

/* HUD buttons: plate always visible (sinks when pressed). */
.hud-btn {
  position: relative;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  color: var(--text);
  transition:
    transform 0.08s ease,
    color 0.15s;
}
.hud-btn svg {
  width: 20px;
  height: 20px;
  position: relative;
  filter: drop-shadow(0 1px 0 rgba(16, 9, 4, 0.6));
}
.hud-btn::before {
  content: '';
  position: absolute;
  inset: 4px;
  transition: filter 0.15s;
  background: linear-gradient(180deg, rgba(var(--acc-rgb), 0.24), rgba(var(--acc-rgb), 0.07));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16);
  clip-path: polygon(
    8px 0,
    calc(100% - 8px) 0,
    100% 8px,
    100% calc(100% - 8px),
    calc(100% - 8px) 100%,
    8px 100%,
    0 calc(100% - 8px),
    0 8px
  );
}
.hud-btn:hover::before,
.hud-btn:focus-visible::before {
  filter: brightness(1.5);
}
.hud-btn:active {
  transform: translateY(1px) scale(0.93);
}
.hud-btn:active::before {
  filter: brightness(1.8);
}

/* Level badge: faceted octagon with the number. */
.lvl-badge {
  position: relative;
  flex: none;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  background: linear-gradient(160deg, var(--badge-1), var(--badge-2) 45%, var(--badge-3));
  clip-path: polygon(29% 0, 71% 0, 100% 29%, 100% 71%, 71% 100%, 29% 100%, 0 71%, 0 29%);
}
.lvl-badge::before {
  content: '';
  position: absolute;
  inset: 3px;
  background:
    radial-gradient(circle at 35% 25%, rgba(255, 255, 255, 0.35), transparent 45%),
    linear-gradient(180deg, var(--badge-2), var(--badge-3));
  clip-path: polygon(29% 0, 71% 0, 100% 29%, 100% 71%, 71% 100%, 29% 100%, 0 71%, 0 29%);
}
.lvl-badge b {
  position: relative;
  font-weight: 700;
  font-size: 19px;
  color: #fff;
  text-shadow:
    0 2px 0 rgba(23, 14, 7, 0.55),
    0 0 10px rgba(var(--acc-rgb), 0.6);
}
.hud-level {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  flex: 1;
}
.lvl-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.1;
}
.lvl-cap {
  font-size: 11px;
  font-weight: 600;
  color: rgba(var(--acc-rgb), 0.95);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hud-name {
  font-weight: 700;
  font-size: 14px;
  color: var(--text);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* Blocks remaining and clear progress. */
.hud-stat {
  position: relative;
  display: flex;
  align-items: center;
  gap: 7px;
  font-weight: 700;
}
.hud-stat .lbl {
  font-size: 11px;
  font-weight: 700;
  color: var(--hud-soft);
  white-space: nowrap;
}
.gem-ring {
  position: relative;
  flex: none;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
}
.gem-ring > svg {
  grid-area: 1 / 1;
}
.gem-ring .ring {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}
.gem-ring .track {
  fill: none;
  stroke: rgba(var(--acc-rgb), 0.22);
  stroke-width: 3.2;
}
.gem-ring .fill {
  fill: none;
  stroke: var(--acc);
  stroke-width: 3.2;
  stroke-linecap: round;
  stroke-dasharray: 106.8;
  stroke-dashoffset: 106.8;
  transition: stroke-dashoffset 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
  filter: drop-shadow(0 0 3px rgba(var(--acc-rgb), 0.8));
}
.gem-ring .gem {
  width: 17px;
  height: 17px;
  color: var(--acc-hi);
  filter: drop-shadow(0 0 5px rgba(var(--acc-rgb), 0.9));
}
.gem-ring .done {
  width: 19px;
  height: 19px;
  color: #fff;
  opacity: 0;
  transform: scale(0.4);
}
.hud-stat.alive.cleared .gem {
  opacity: 0;
  transform: scale(0.4);
  transition: 0.18s;
}
.hud-stat.alive.cleared .done {
  opacity: 1;
  transform: none;
  transition: 0.3s cubic-bezier(0.2, 1.8, 0.4, 1) 0.08s;
  filter: drop-shadow(0 0 6px rgba(var(--acc-rgb), 1));
}
.hud-stat.alive.cleared .gem-ring {
  animation: gemClear 0.6s ease;
}
@keyframes gemClear {
  30% {
    transform: scale(1.35);
    filter: brightness(1.8);
  }
}
.hud-stat.alive .txt {
  display: flex;
  flex-direction: column;
  line-height: 1;
}
.hud-stat.alive b {
  font-size: 19px;
  color: var(--text);
}
.hud-stat.alive .bar {
  display: none;
}
/* Reinforcements incoming: down arrow + how many rows still enter from the top. */
.hud-stat.alive .waves {
  display: flex;
  align-items: center;
  gap: 3px;
  font-style: normal;
  color: var(--acc-hi);
}
.hud-stat.alive .waves[hidden] {
  display: none;
}
.hud-stat.alive .waves svg {
  width: 16px;
  height: 16px;
  color: var(--acc);
  filter: drop-shadow(0 0 4px rgba(var(--acc-rgb), 0.7));
}
.hud-stat.alive .waves b {
  font-size: 15px;
  min-width: 0;
  color: var(--acc-hi);
}
.hud-stat.alive .waves.bump svg {
  animation: waveDrop 0.5s cubic-bezier(0.3, 1.6, 0.5, 1);
}
@keyframes waveDrop {
  from {
    transform: translateY(-6px);
    opacity: 0.3;
  }
}
.hud.landscape .hud-stat.alive .waves {
  grid-column: 3;
  grid-row: 1;
  align-self: end;
  margin-bottom: 2px;
}
.hud.landscape .hud-stat.alive .waves svg {
  width: 20px;
  height: 20px;
}
.hud.landscape .hud-stat.alive .waves b {
  font-size: 20px;
}
.hud-stat.score {
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  line-height: 1;
}
.hud-stat.score b {
  font-size: 22px;
  letter-spacing: 0.01em;
  background: linear-gradient(180deg, #fffbe8 10%, #ffd36e 55%, #ff9f2e);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 2px 0 rgba(60, 20, 0, 0.6)) drop-shadow(0 0 8px rgba(255, 170, 60, 0.35));
}
.hud-stat.score.long b {
  font-size: 18px;
}
.hud-stat.best {
  display: none;
}
.hud-hint {
  display: none;
}
.hud-stat.bump {
  animation: bump 0.25s ease;
}
@keyframes bump {
  40% {
    transform: scale(1.14);
  }
}
.hud-stat.alive.bump .gem-ring {
  animation: gemHit 0.35s ease;
}
@keyframes gemHit {
  35% {
    transform: scale(1.25) rotate(-8deg);
    filter: brightness(1.6);
  }
}

/* HUD entrance on each level: bars slide in from the edge (top/bottom on phone, sides on desktop). */
.hud.enter:not(.landscape) .hud-panel.a {
  animation: hudInTop 0.5s cubic-bezier(0.2, 0.9, 0.25, 1.15) both;
}
.hud.enter:not(.landscape) .hud-panel.b > .slot {
  animation: hudInBottom 0.5s cubic-bezier(0.2, 0.9, 0.25, 1.15) both;
}
.hud.enter:not(.landscape) .hud-panel.b > .slot-c {
  animation-delay: 0.06s;
}
.hud.enter:not(.landscape) .hud-panel.b > .slot-r {
  animation-delay: 0.12s;
}
.hud.enter.landscape .hud-panel.a {
  animation: hudInLeft 0.55s cubic-bezier(0.2, 0.9, 0.25, 1.1) both;
}
.hud.enter.landscape .hud-panel.b {
  animation: hudInRight 0.55s cubic-bezier(0.2, 0.9, 0.25, 1.1) 0.05s both;
}
@keyframes hudInTop {
  from {
    translate: 0 -120%;
    opacity: 0;
  }
}
@keyframes hudInBottom {
  from {
    translate: 0 120%;
    opacity: 0;
  }
}
@keyframes hudInLeft {
  from {
    translate: -40px 0;
    opacity: 0;
  }
}
@keyframes hudInRight {
  from {
    translate: 40px 0;
    opacity: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .hud.enter .hud-panel,
  .hud.enter .slot {
    animation: none !important;
  }
}

/* ---- phone (portrait): top bar in two rows ----
   [pause][settings] | [badge] level name ............ score
   | ◆ 13 ▓▓▓▓▓▓▓░░░░░░░░░░░░░░░░ (how much of the level is already cleared) */
.hud:not(.landscape) .hud-panel.a {
  --c: 12px;
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr) auto;
  grid-template-rows: minmax(0, 1fr) 22px;
  column-gap: 0;
  row-gap: 0;
  align-items: center;
  padding: 5px 12px 7px 4px;
}
.hud:not(.landscape) .hud-btns {
  grid-column: 1;
  grid-row: 1 / 3;
  display: flex;
  align-self: stretch;
  align-items: center;
  gap: 0;
  padding-right: 6px;
  margin-right: 8px;
  position: relative;
}
.hud:not(.landscape) .hud-btns::after {
  content: '';
  position: absolute;
  right: 0;
  top: 6px;
  bottom: 6px;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(var(--acc-rgb), 0.55), transparent);
}
.hud:not(.landscape) .hud-btn {
  width: 44px;
  height: 52px;
} /* Touch area 44 x 52 (the visible plate is smaller). */
.hud:not(.landscape) .hud-btn::before {
  inset: 8px 5px;
}
.hud:not(.landscape) .hud-level {
  display: contents;
}
.hud:not(.landscape) .lvl-badge {
  grid-column: 2;
  grid-row: 1 / 3;
  width: 44px;
  height: 44px;
  margin-right: 10px;
}
.hud:not(.landscape) .lvl-badge b {
  font-size: 20px;
}
.hud:not(.landscape) .lvl-text {
  grid-column: 3;
  grid-row: 1;
  align-self: center;
  padding-right: 6px;
}
.hud:not(.landscape) .lvl-cap {
  display: none;
}
/* Level name on a single line on every level (the font shrinks until it fits, see fitName). */
.hud:not(.landscape) .hud-name {
  display: block;
  font-size: 14px;
  line-height: 1.2;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.hud:not(.landscape) .hud-stats,
.hud:not(.landscape) .hud-foot {
  display: contents;
}
.hud:not(.landscape) .hud-stat.score {
  grid-column: 4;
  grid-row: 1;
  width: 76px;
  align-self: center;
}
.hud:not(.landscape) .hud-stat.score .lbl {
  font-size: 11.5px;
}
.hud:not(.landscape) .hud-stat.alive {
  grid-column: 3 / 5;
  grid-row: 2;
  display: grid;
  grid-template-columns: auto auto 1fr auto;
  align-items: center;
  gap: 6px;
}
.hud:not(.landscape) .hud-stat.alive .gem-ring {
  width: 18px;
  height: 18px;
}
.hud:not(.landscape) .hud-stat.alive .ring {
  display: none;
}
.hud:not(.landscape) .hud-stat.alive .gem {
  width: 16px;
  height: 16px;
}
.hud:not(.landscape) .hud-stat.alive .done {
  width: 16px;
  height: 16px;
}
.hud:not(.landscape) .hud-stat.alive .lbl {
  display: none;
}
.hud:not(.landscape) .hud-stat.alive b {
  font-size: 16px;
  min-width: 20px;
}
.hud:not(.landscape) .hud-stat.alive .bar {
  display: block;
  height: 7px;
  background: rgba(var(--acc-rgb), 0.28);
  box-shadow: inset 0 0 0 1px rgba(var(--acc-rgb), 0.45);
  clip-path: polygon(3px 0, 100% 0, calc(100% - 3px) 100%, 0 100%);
}
/* Level cleared: the number is removed (a "0" with a check mark contradicts itself); the badge shows a check mark
   and the full bar glows. */
.hud:not(.landscape) .hud-stat.alive.cleared b {
  display: none;
}
.hud:not(.landscape) .hud-stat.alive.cleared .gem-ring {
  width: 22px;
  height: 22px;
  margin: -2px 0;
}
.hud:not(.landscape) .hud-stat.alive.cleared .done {
  width: 14px;
  height: 14px;
}
.hud-stat.alive .bar i {
  position: relative;
  display: block;
  height: 100%;
  width: 0;
  overflow: hidden;
  background: linear-gradient(90deg, var(--acc-lo), var(--acc), var(--acc-hi));
  box-shadow: 0 0 8px rgba(var(--acc-rgb), 0.8);
  transition: width 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.hud-stat.alive.cleared .bar {
  filter: drop-shadow(0 0 5px rgba(var(--acc-rgb), 0.9));
}
.hud-stat.alive.cleared .bar i::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 40%;
  left: -40%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.95), transparent);
  animation: barSweep 0.7s ease-out 0.15s 2;
}
@keyframes barSweep {
  to {
    left: 110%;
  }
}
/* Level-cleared badge: disc in the chapter color with a dark check mark, grows in. */
.hud-stat.alive.cleared .gem-ring::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--acc-hi), var(--acc) 60%);
  box-shadow: 0 0 10px rgba(var(--acc-rgb), 0.9);
  animation: sealIn 0.4s cubic-bezier(0.2, 1.6, 0.4, 1);
}
@keyframes sealIn {
  from {
    transform: scale(0.3);
  }
  60% {
    transform: scale(1.3);
  }
}
.hud-stat.alive.cleared .done {
  color: #29180b;
  filter: none !important;
  z-index: 1;
}

/* Bottom bar: Bomb | volley and stars | speed (fixed widths: nothing jumps around). */
/* The 60 px cards touch the top of the strip (12 px from the arena, same as the top bar); the Bomb label sits
   below the orb. */
.hud-panel.b {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: start;
  gap: 8px;
}
.hud-panel.b .slot-l {
  grid-column: 1;
  justify-self: start;
  display: flex;
}
.hud-panel.b .slot-c {
  grid-column: 2;
  justify-self: center;
  display: grid;
}
.hud-panel.b .slot-c > * {
  grid-area: 1 / 1;
}
.hud-panel.b .slot-r {
  grid-column: 3;
  justify-self: end;
}
.foot-well {
  display: none;
}
/* Dark strip behind the bottom bar (scenery effects never show through behind the Bomb label). */
.hud:not(.landscape)::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: var(--scrim-top, 100%);
  background: linear-gradient(180deg, rgba(14, 8, 4, 0), rgba(14, 8, 4, 0.62) 22%, rgba(14, 8, 4, 0.72));
  pointer-events: none;
}
.hud-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}
.hud:not(.landscape) .hud-panel.b::before,
.hud:not(.landscape) .hud-panel.b::after {
  display: none;
}
.hud:not(.landscape) .hud-panel.b {
  filter: none;
}

.volley-info {
  --c: 11px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 186px;
  height: 60px;
  padding: 4px 14px 5px;
  text-align: center;
}
.vi-main {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.05;
}
#hud-volley {
  font-weight: 700;
  font-size: 15px;
  color: var(--text);
}
.star-meter {
  display: inline-flex;
  gap: 4px;
  margin: 3px 0 2px;
}
.star-meter .sm {
  width: 19px;
  height: 19px;
  --sf-l: rgba(255, 255, 255, 0.1);
  --sf-d: rgba(255, 255, 255, 0.05);
  --sf-o: rgba(255, 214, 110, 0.32);
}
.star-meter .sm.on {
  --sf-l: #fff1b0;
  --sf-d: #f5a623;
  --sf-o: #6b3a00;
  filter: drop-shadow(0 0 4px rgba(255, 190, 70, 0.6));
}
.star-meter .sm.lose {
  animation: starLose 0.7s cubic-bezier(0.5, 0, 0.8, 0.6);
}
/* Star landing: white-gold flash that settles into gold (never darkens). */
.star-meter .sm.land {
  animation: starLand 0.26s cubic-bezier(0.2, 0.9, 0.3, 1);
}
.star-meter {
  position: relative;
}
.star-meter.bump {
  animation: meterBump 0.3s ease;
}
@keyframes meterBump {
  40% {
    transform: scale(1.15);
  }
}
@keyframes starLose {
  0% {
    transform: scale(1.5);
    color: #ff9a8a;
  }
  25% {
    transform: scale(1.3) rotate(-12deg);
    color: #ffd36e;
  }
  100% {
    transform: translateY(14px) rotate(40deg) scale(0.6);
    opacity: 0;
  }
}
@keyframes starLand {
  0% {
    transform: scale(1.45);
    --sf-l: #ffffff;
    --sf-d: #fff6c9;
    --sf-o: #ffe7a0;
    filter: drop-shadow(0 0 12px #ffd36e) drop-shadow(0 0 4px #fff6c9);
  }
  100% {
    transform: scale(1);
    filter: drop-shadow(0 0 4px rgba(255, 190, 70, 0.6));
  }
}
/* Victory: empty slots until the star arrives. */
.star-meter.collect .sm:not(.got) {
  --sf-of: rgba(0, 0, 0, 0.35);
  --sf-o: rgba(255, 211, 110, 0.6);
  --sf-l: transparent;
  --sf-d: transparent;
  --sf-h: transparent;
  filter: none;
} /* Recessed slot, not a lost star. */
.star-burst.mini i {
  left: -3px;
  top: -3px;
  width: 6px;
  height: 6px;
  background: #fff6c9;
  transform: rotate(var(--a)) translateY(-10px) rotate(45deg);
  animation: starSparkMini 0.42s ease-out forwards;
}
@keyframes starSparkMini {
  to {
    transform: rotate(var(--a)) translateY(-30px) rotate(45deg) scale(0.2);
    opacity: 0;
  }
}
#hud-par {
  font-size: 12px;
  color: var(--hud-soft);
  font-weight: 700;
}
.vi-hint {
  display: none;
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.22;
  color: var(--acc-hi);
  overflow: hidden;
  display: none;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}
.volley-info.hinting .vi-main {
  display: none;
}
.volley-info.hinting .vi-hint {
  display: -webkit-box;
  animation: fadeIn 0.3s ease;
}
.star-legend {
  display: none;
}
/* Danger: the next descent loses the level; the volley card turns red. */
.hud.danger .volley-info::before {
  background: linear-gradient(180deg, #ffd0da, #ff3d6e 30%, rgba(255, 61, 110, 0.5) 70%, #7a1030);
  animation: dangerRim 0.9s ease-in-out infinite;
}
@keyframes dangerRim {
  50% {
    filter: brightness(1.6);
  }
}

/* Speed: at 1x the back chevron is dimmed; at 2x both are lit and running, and the button is lit. */
.speed-btn {
  --c: 10px;
  --chev1: 0.3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  width: 62px;
  height: 60px;
  color: var(--text);
  transition: transform 0.08s ease;
}
.speed-btn svg {
  width: 22px;
  height: 22px;
  color: var(--acc-hi);
}
.speed-btn b {
  font-size: 15px;
  line-height: 1;
}
.speed-btn:active {
  transform: translateY(1px) scale(0.94);
}
.speed-btn .auto-tag {
  display: none;
  position: absolute;
  top: 3px;
  right: 3px;
  padding: 1px 5px 2px;
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1.1;
  color: #27170b;
  background: var(--acc-hi);
  clip-path: polygon(4px 0, 100% 0, 100% calc(100% - 4px), calc(100% - 4px) 100%, 0 100%, 0 4px);
}
.speed-btn.auto .auto-tag {
  display: block;
}
.speed-btn.auto {
  padding-top: 6px;
}
.speed-btn[aria-pressed='true'] {
  --chev1: 1;
  color: #fff;
}
.speed-btn[aria-pressed='true']::after {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0) 45%),
    linear-gradient(180deg, rgba(var(--acc-rgb), 0.55), rgba(var(--acc-rgb), 0.22)),
    linear-gradient(180deg, var(--hud-top), var(--hud-bot));
}
.speed-btn[aria-pressed='true'] svg {
  color: #fff;
  animation: chevrons 0.5s linear infinite;
  filter: drop-shadow(0 0 5px rgba(var(--acc-rgb), 1));
}
@keyframes chevrons {
  50% {
    transform: translateX(2px);
    opacity: 0.75;
  }
}

/* Recall balls: the "now" action is orange, like Play and Next; it takes the place of the volley card. */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.pill.end {
  position: relative;
  width: 186px;
  height: 60px;
  justify-content: center;
  padding: 0 12px;
  color: #2a1205;
  font-weight: 700;
  background: linear-gradient(180deg, #ffe08a, #ffb24a 55%, #ff8a3d);
  clip-path: polygon(
    11px 0,
    calc(100% - 11px) 0,
    100% 11px,
    100% calc(100% - 11px),
    calc(100% - 11px) 100%,
    11px 100%,
    0 calc(100% - 11px),
    0 11px
  );
  box-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, 0.7),
    inset 0 -4px 0 rgba(150, 50, 10, 0.45);
  animation:
    slideUp 0.16s ease-out,
    endGlow 1.6s ease-in-out 0.2s infinite;
}
.pill.end svg {
  width: 22px;
  height: 22px;
  flex: none;
}
.pill.end span {
  display: flex;
  flex-direction: column;
  line-height: 1.05;
  text-align: left;
}
.pill.end b {
  font-size: 15px;
}
.pill.end small {
  font-size: 11.5px;
  font-weight: 700;
  color: #6b2a08;
}
.pill.end:active {
  transform: translateY(2px) scale(0.97);
}
@keyframes endGlow {
  50% {
    filter: brightness(1.1) drop-shadow(0 0 10px rgba(255, 170, 70, 0.7));
  }
}
@keyframes slideUp {
  from {
    transform: translateY(12px);
    opacity: 0;
  }
}
@keyframes popIn {
  from {
    transform: scale(0.6);
    opacity: 0;
  }
}

/* Bomb: glass orb; the six charge segments ARE the ring. Empty: dimmed. Charged: lit and pulsing.
   Armed: cyan core with a white bolt. Label below, outside the orb. */
.pulse-btn {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  color: #e7ca97;
  transition: transform 0.1s ease;
}
.pulse-btn .orb {
  position: relative;
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 40% 28%, rgba(255, 255, 255, 0.16), transparent 40%),
    radial-gradient(circle at 50% 58%, #183a7a, #3a2210 72%);
  box-shadow:
    0 5px 12px rgba(9, 6, 3, 0.55),
    inset 0 0 0 1px rgba(231, 202, 151, 0.18);
}
.pulse-btn .orb > svg {
  grid-area: 1 / 1;
}
.pulse-ring {
  width: 100%;
  height: 100%;
}
.pulse-ring .trk {
  fill: none;
  stroke: rgba(34, 20, 10, 0.9);
  stroke-width: 5;
}
.pulse-icon {
  position: relative;
  width: 24px;
  height: 24px;
  opacity: 0.45;
}
.pulse-label {
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  color: var(--hud-soft);
  white-space: nowrap;
  text-shadow: 0 1px 2px rgba(12, 7, 4, 0.9);
}
.pulse-lock {
  display: none;
  width: 14px;
  height: 14px;
  margin: 24px 0 0 24px;
  color: #efe0c6;
}
/* Phone: orb + label vertically centered on the 60 px cards. */
.hud:not(.landscape) .pulse-btn {
  margin-top: -3px;
}
.pulse-btn:active {
  transform: scale(0.94);
}
.pulse-btn.locked .orb {
  filter: saturate(0.2) brightness(0.7);
}
.pulse-btn.locked .pulse-icon {
  opacity: 0.4;
}
.pulse-btn.locked .pulse-lock {
  display: block;
}
.pulse-btn.charged {
  animation: chargedBreath 1.4s ease-in-out infinite;
}
.pulse-btn.charged .orb {
  background:
    radial-gradient(circle at 40% 28%, rgba(255, 255, 255, 0.4), transparent 40%),
    radial-gradient(circle at 50% 60%, #3aa8f2, #7c4a23 74%);
  box-shadow:
    0 0 16px 2px rgba(231, 202, 151, 0.55),
    inset 0 0 0 1px rgba(255, 255, 255, 0.4);
}
.pulse-btn.charged .pulse-icon {
  opacity: 1;
  color: #fff;
  filter: drop-shadow(0 0 6px rgba(231, 202, 151, 1));
}
.pulse-btn.charged .pulse-label {
  color: #f5e8d3;
}
@keyframes chargedBreath {
  50% {
    transform: scale(1.06);
  }
}
.pulse-btn.armed {
  animation: none;
}
.pulse-btn.armed .orb {
  background:
    radial-gradient(circle at 40% 28%, rgba(255, 255, 255, 0.85), transparent 42%),
    radial-gradient(circle at 50% 60%, #a8f2ff, #d19939 78%);
  box-shadow:
    0 0 0 3px #e9fdff,
    0 0 22px 6px rgba(231, 202, 151, 0.75);
}
.pulse-btn.armed .pulse-icon {
  opacity: 1;
  color: #fff;
  filter: drop-shadow(0 0 1.5px #402612) drop-shadow(0 0 1px #402612);
}
.pulse-btn.armed .pulse-label {
  color: #fbf6ed;
}
.pulse-btn.ready-pop {
  animation: readyPop 0.6s ease;
}
.pulse-btn.orb-hit .orb {
  animation: orbHit 0.18s ease;
}
@keyframes orbHit {
  50% {
    transform: scale(1.1);
    filter: brightness(1.5);
  }
}
@keyframes readyPop {
  30% {
    transform: scale(1.25);
  }
  60% {
    transform: scale(0.95);
  }
}

/* ---- desktop (landscape): two cards as tall as the arena ----
   left: buttons, level, hint, blocks ........ well with the score
   right: volley + stars, goal ladder ... (recall) well with Bomb and speed
   Both wells have the same height, so their top lines align across the cards. */
.hud.landscape {
  --foot-h: 138px;
}
.hud.landscape .hud-panel {
  --c: 16px;
  flex-direction: column;
  align-items: stretch;
  gap: 14px;
  padding: 18px 18px 20px;
}
.hud.landscape .hud-btns {
  display: flex;
  gap: 8px;
}
.hud.landscape .hud-btn {
  --c: 8px;
  width: 46px;
  height: 46px;
}
.hud.landscape .hud-btn::before {
  inset: 0;
  background: linear-gradient(180deg, var(--acc-hi), var(--acc) 30%, var(--acc-lo));
  box-shadow: none;
}
.hud.landscape .hud-btn::after {
  content: '';
  position: absolute;
  inset: 1.5px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.1), transparent 45%),
    linear-gradient(180deg, var(--hud-top), var(--hud-bot));
  clip-path: polygon(
    7.4px 0,
    calc(100% - 7.4px) 0,
    100% 7.4px,
    100% calc(100% - 7.4px),
    calc(100% - 7.4px) 100%,
    7.4px 100%,
    0 calc(100% - 7.4px),
    0 7.4px
  );
}
.hud.landscape .hud-btn svg {
  z-index: 1;
}
.hud.landscape .hud-level {
  flex: none;
  gap: 12px;
  padding-top: 2px;
  min-height: 60px;
}
.hud.landscape .lvl-badge {
  width: 60px;
  height: 60px;
}
.hud.landscape .lvl-badge b {
  font-size: 27px;
}
.hud.landscape .lvl-cap {
  font-size: 12.5px;
}
.hud.landscape .hud-name {
  font-size: 20px;
  line-height: 1.12;
  -webkit-line-clamp: 2;
}
.hud.landscape .hud-hint {
  display: flex;
  gap: 8px;
  margin: 0;
  padding: 10px 12px;
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.38;
  color: #f9f2e6;
  background: linear-gradient(90deg, rgba(var(--acc-rgb), 0.16), rgba(var(--acc-rgb), 0.04));
  border-left: 2px solid var(--acc);
}
.hud.landscape .hud-hint svg {
  flex: none;
  width: 14px;
  height: 14px;
  margin-top: 3px;
  color: var(--acc);
}
.hud.landscape .hud-hint.empty {
  display: none;
}
.hud.landscape .hud-stats {
  display: contents;
}
/* Blocks right after the hint (24 px); the only gap is between them and the score well. */
.hud.landscape .hud-stat.alive {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-rows: auto auto;
  column-gap: 12px;
  row-gap: 10px;
  margin-top: 10px;
}
.hud.landscape .gem-ring {
  width: 42px;
  height: 42px;
}
.hud.landscape .gem-ring .gem {
  width: 19px;
  height: 19px;
}
.hud.landscape .hud-stat .lbl {
  font-size: 12.5px;
}
.hud.landscape .hud-stat.alive b {
  font-size: 26px;
  margin-top: 3px;
}
.hud.landscape .hud-stat.alive .bar {
  display: block;
  grid-column: 1 / -1;
  height: 8px;
  background: rgba(var(--acc-rgb), 0.28);
  box-shadow: inset 0 0 0 1px rgba(var(--acc-rgb), 0.45);
  clip-path: polygon(3px 0, 100% 0, calc(100% - 3px) 100%, 0 100%);
}
.hud.landscape .hud-stat.alive.cleared .done {
  width: 22px;
  height: 22px;
}
.hud.landscape .hud-stat.alive.cleared b {
  color: var(--acc-hi);
  text-shadow: 0 0 10px rgba(var(--acc-rgb), 0.8);
}
/* Chapter strip: its five levels with the best stars; the current one lit. */
.hud-chapter {
  display: none;
}
.hud.landscape .hud-chapter {
  display: block;
  margin-top: 10px;
}
.hud.landscape .hud-panel.a.no-ch .hud-chapter {
  display: none;
}
/* With the chapter strip visible, the chapter name appears only there (not repeated above the level name). */
.hud.landscape:not(.tight) .hud-panel.a:not(.no-ch) .lvl-cap {
  display: none;
}
.hud.landscape .ch-head small {
  font-size: 13px;
  color: rgba(var(--acc-rgb), 0.95);
}
.hud.landscape .ch-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--hud-soft);
}
.hud.landscape .ch-head span {
  display: inline-flex;
  align-items: center;
  gap: 0;
  color: #ffe7a0;
}
.hud.landscape .ch-head span svg {
  margin-right: 4px;
}
.hud.landscape .ch-head svg {
  width: 14px;
  height: 14px;
}
.hud.landscape .ch-head b {
  display: inline-block;
}
.hud.landscape .ch-head b.bump {
  animation: chBump 0.35s cubic-bezier(0.2, 1.6, 0.4, 1);
}
@keyframes chBump {
  40% {
    transform: scale(1.2);
    color: #fff;
  }
}
.hud.landscape .pips {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 4px;
} /* Width comes from the column, never from the content. */
.hud.landscape .pip {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 6px 0 7px;
  min-width: 0;
  background: rgba(var(--acc-rgb), 0.09);
  clip-path: polygon(
    4px 0,
    calc(100% - 4px) 0,
    100% 4px,
    100% calc(100% - 4px),
    calc(100% - 4px) 100%,
    4px 100%,
    0 calc(100% - 4px),
    0 4px
  );
}
.hud.landscape .pip b {
  font-size: 15px;
  line-height: 1;
  color: var(--text);
}
.hud.landscape .pip i {
  display: flex;
  gap: 1px;
}
.hud.landscape .pip i svg {
  width: 9.5px;
  height: 9.5px;
  --sf-l: rgba(255, 255, 255, 0.16);
  --sf-d: rgba(255, 255, 255, 0.08);
  --sf-o: rgba(255, 214, 110, 0.3);
}
.hud.landscape .pip i svg.on {
  --sf-l: #fff1b0;
  --sf-d: #f5a623;
  --sf-o: #6b3a00;
}
.hud.landscape .pip.now {
  background: linear-gradient(180deg, rgba(var(--acc-rgb), 0.5), rgba(var(--acc-rgb), 0.2));
  box-shadow: inset 0 -2px 0 var(--acc);
}
.hud.landscape .pip.locked {
  opacity: 0.4;
}

/* Well: 10 px chamfer, very light chapter-color background and a 1 px outline (two clipped layers). */
.hud.landscape .well {
  position: relative;
  isolation: isolate;
}
.hud.landscape .well::before,
.hud.landscape .well::after {
  content: '';
  position: absolute;
  pointer-events: none;
}
.hud.landscape .well::before {
  inset: 0;
  z-index: -2;
  background: rgba(var(--acc-rgb), 0.3);
  clip-path: polygon(
    10px 0,
    calc(100% - 10px) 0,
    100% 10px,
    100% calc(100% - 10px),
    calc(100% - 10px) 100%,
    10px 100%,
    0 calc(100% - 10px),
    0 10px
  );
}
.hud.landscape .well::after {
  inset: 1px;
  z-index: -1;
  background: linear-gradient(180deg, rgba(var(--acc-rgb), 0.1), rgba(var(--acc-rgb), 0.05)), rgba(22, 13, 6, 0.55);
  clip-path: polygon(
    9.6px 0,
    calc(100% - 9.6px) 0,
    100% 9.6px,
    100% calc(100% - 9.6px),
    calc(100% - 9.6px) 100%,
    9.6px 100%,
    0 calc(100% - 9.6px),
    0 9.6px
  );
}
.hud.landscape .hud-foot {
  margin-top: auto;
  height: var(--foot-h);
  flex: none;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  padding: 12px 16px;
}
.hud.landscape .hud-stat.score {
  align-items: flex-start;
  gap: 4px;
}
.hud.landscape .hud-stat.score b {
  font-size: 38px;
}
.hud.landscape .hud-stat.score.long b {
  font-size: 32px;
}
.hud.landscape .hud-stat.best {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 28px;
  font-size: 14px;
  color: #f7eede;
}
.hud.landscape .hud-stat.best svg {
  width: 15px;
  height: 15px;
  color: #ffd36e;
}
.hud.landscape .hud-stat.best b {
  margin-left: auto;
  font-size: 15px;
  color: #fff3c4;
}
.hud-stat.best .nb {
  display: none;
  font-style: normal;
}
/* Beat the best score during the level: the line becomes an amber badge with the old best (the new one is the
   score itself). */
.hud.landscape .hud-stat.best.beaten {
  isolation: isolate;
  align-self: flex-start;
  height: 28px;
  padding: 0 12px 0 10px;
  color: #ffd36e;
  filter: drop-shadow(0 0 6px rgba(255, 190, 70, 0.45));
  animation: popIn 0.3s cubic-bezier(0.2, 1.6, 0.4, 1);
}
/* Same gold-outline badge as the result card. */
.hud.landscape .hud-stat.best.beaten::before,
.hud.landscape .hud-stat.best.beaten::after {
  content: '';
  position: absolute;
  pointer-events: none;
}
.hud.landscape .hud-stat.best.beaten::before {
  inset: 0;
  z-index: -2;
  background: linear-gradient(180deg, #ffe08a, #e89a3c);
  clip-path: polygon(
    6px 0,
    calc(100% - 6px) 0,
    100% 6px,
    100% calc(100% - 6px),
    calc(100% - 6px) 100%,
    6px 100%,
    0 calc(100% - 6px),
    0 6px
  );
}
.hud.landscape .hud-stat.best.beaten::after {
  inset: 1.5px;
  z-index: -1;
  background: var(--hud-bot);
  clip-path: polygon(
    5.4px 0,
    calc(100% - 5.4px) 0,
    100% 5.4px,
    100% calc(100% - 5.4px),
    calc(100% - 5.4px) 100%,
    5.4px 100%,
    0 calc(100% - 5.4px),
    0 5.4px
  );
}
.hud.landscape .hud-stat.best.beaten .lbl {
  display: none;
}
.hud.landscape .hud-stat.best.beaten .nb {
  display: inline;
  font-size: 13px;
  font-weight: 700;
}
.hud.landscape .hud-stat.best.beaten svg {
  color: #ffd36e;
}
.hud.landscape .hud-stat.best.beaten b {
  display: none;
}
.hud.landscape .hud-stat.best .nb,
.hud.landscape .hud-stat.best .lbl {
  white-space: nowrap;
}

/* Right card: 4-column grid (the Bomb + speed pair stays centered in the well). */
.hud.landscape .hud-panel.b {
  display: grid;
  grid-template-columns: 1fr auto auto 1fr;
  grid-template-rows: auto auto 1fr var(--foot-h);
  column-gap: 0;
  row-gap: 16px;
  align-items: center;
}
.hud.landscape .hud-panel.b .slot {
  justify-self: auto;
}
.hud.landscape .hud-panel.b .slot-c {
  display: contents;
}
.hud.landscape .volley-info {
  display: contents;
}
.hud.landscape .vi-main {
  grid-area: 1 / 1 / 2 / -1;
}
.hud.landscape .star-legend {
  grid-area: 2 / 1 / 3 / -1;
}
.hud.landscape .volley-info::before,
.hud.landscape .volley-info::after {
  display: none;
}
.hud.landscape .vi-hint,
.hud.landscape .volley-info.hinting .vi-hint {
  display: none !important;
}
.hud.landscape .volley-info.hinting .vi-main {
  display: flex;
}
.hud.landscape #hud-volley {
  font-size: 24px;
}
.hud.landscape .star-meter {
  gap: 10px;
  margin: 10px 0 2px;
}
.hud.landscape .star-meter .sm {
  width: 44px;
  height: 44px;
}
.hud.landscape #hud-par {
  display: none;
}
/* Goal ladder: three 44 px steps with the same faceted stars; the current step lit. */
.hud.landscape .star-legend {
  display: grid;
  gap: 10px;
  width: 100%;
}
.hud.landscape .star-legend .lg {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  height: 52px;
  padding: 0 16px;
  font-size: 15px;
  color: var(--hud-soft);
  background: rgba(var(--acc-rgb), 0.06);
  clip-path: polygon(
    6px 0,
    calc(100% - 6px) 0,
    100% 6px,
    100% calc(100% - 6px),
    calc(100% - 6px) 100%,
    6px 100%,
    0 calc(100% - 6px),
    0 6px
  );
  transition:
    background 0.3s,
    opacity 0.3s;
}
.hud.landscape .star-legend i {
  display: flex;
  gap: 3px;
}
.hud.landscape .star-legend .ls {
  width: 18px;
  height: 18px;
}
.hud.landscape .star-legend b {
  font-weight: 700;
  text-align: right;
}
.hud.landscape .star-legend .lg.now {
  background: linear-gradient(90deg, rgba(var(--acc-rgb), 0.38), rgba(var(--acc-rgb), 0.14));
  color: var(--text);
  box-shadow: inset 2px 0 0 var(--acc);
}
.hud.landscape .star-legend .lg.gone {
  opacity: 0.4;
}
.hud.landscape .star-legend .lg.gone .ls {
  --sf-l: rgba(255, 255, 255, 0.16);
  --sf-d: rgba(255, 255, 255, 0.08);
  --sf-o: rgba(255, 214, 110, 0.35);
}
.hud.landscape .star-legend .lg.gone b {
  text-decoration: line-through;
}
.hud.danger.landscape .star-legend .lg.now {
  background: linear-gradient(90deg, rgba(255, 61, 110, 0.4), rgba(255, 61, 110, 0.12));
  box-shadow: inset 2px 0 0 #ff3d6e;
}
/* Recall: appears in the gap just above the well (space always reserved, nothing moves). */
.hud.landscape #btn-end {
  grid-area: 3 / 1 / 4 / -1;
  align-self: end;
  width: 100%;
  height: 58px;
}
.hud.landscape #btn-end.idle {
  visibility: hidden;
  animation: none;
}
/* Bottom well: Bomb and speed centered, 24 px apart. */
.hud.landscape .foot-well {
  display: block;
  grid-area: 4 / 1 / 5 / -1;
  align-self: stretch;
}
.hud.landscape .hud-panel.b .slot-l,
.hud.landscape .hud-panel.b .slot-r {
  grid-row: 4;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hud.landscape .hud-panel.b .slot-l {
  grid-column: 2;
}
.hud.landscape .hud-panel.b .slot-r {
  grid-column: 3;
  margin-left: 24px;
}
.hud.landscape .pulse-btn .orb {
  width: 84px;
  height: 84px;
}
.hud.landscape .pulse-icon {
  width: 34px;
  height: 34px;
}
.hud.landscape .pulse-lock {
  width: 17px;
  height: 17px;
  margin: 38px 0 0 38px;
}
.hud.landscape .pulse-btn.armed .orb {
  box-shadow:
    0 0 0 3px #e9fdff,
    0 0 14px 3px rgba(231, 202, 151, 0.75);
}
.hud.landscape .pulse-btn.charged .orb {
  box-shadow:
    0 0 12px 1px rgba(231, 202, 151, 0.55),
    inset 0 0 0 1px rgba(255, 255, 255, 0.4);
}
.hud.landscape .pulse-label {
  font-size: 13px;
}
.hud.landscape .speed-btn {
  width: 68px;
  height: 62px;
}
.hud.landscape .speed-btn b {
  font-size: 16px;
}

/* Short screen (phone in landscape): no hint and no ladder, smaller controls, shorter wells. */
.hud.landscape.tight {
  --foot-h: 104px;
}
.hud.landscape.tight .hud-panel {
  gap: 10px;
  padding: 12px 12px 14px;
}
.hud.landscape.tight .hud-btn {
  width: 40px;
  height: 40px;
}
.hud.landscape.tight .hud-level {
  min-height: 44px;
}
.hud.landscape.tight .lvl-badge {
  width: 44px;
  height: 44px;
}
.hud.landscape.tight .lvl-badge b {
  font-size: 20px;
}
.hud.landscape.tight .hud-name {
  font-size: 15px;
}
.hud.landscape.tight .hud-hint,
.hud.landscape.tight .hud-chapter {
  display: none;
}
/* Compact ladder (26 px steps); hidden if the card is not tall enough. */
.hud.landscape.tight .star-legend {
  gap: 4px;
}
.hud.landscape.tight .star-legend .lg {
  height: 26px;
  padding: 0 10px;
  font-size: 13px;
}
.hud.landscape.tight .star-legend .ls {
  width: 13px;
  height: 13px;
}
.hud.landscape .hud-panel.b.no-lg .star-legend {
  display: none;
}
.hud.landscape.tight .hud-stat.alive {
  margin-top: 0;
  row-gap: 6px;
}
.hud.landscape.tight .gem-ring {
  width: 34px;
  height: 34px;
}
.hud.landscape.tight .hud-stat.alive b {
  font-size: 20px;
}
.hud.landscape.tight .hud-foot {
  padding: 8px 12px;
  gap: 4px;
}
.hud.landscape.tight .hud-stat.score b {
  font-size: 28px;
}
.hud.landscape.tight .hud-panel.b {
  row-gap: 10px;
}
.hud.landscape.tight #hud-volley {
  font-size: 18px;
}
.hud.landscape.tight .star-meter .sm {
  width: 30px;
  height: 30px;
}
.hud.landscape.tight #btn-end {
  height: 48px;
}
.hud.landscape.tight .pulse-btn .orb {
  width: 64px;
  height: 64px;
}
.hud.landscape.tight .pulse-icon {
  width: 26px;
  height: 26px;
}
.hud.landscape.tight .pulse-lock {
  margin: 28px 0 0 28px;
}
.hud.landscape.tight .hud-panel.b .slot-r {
  margin-left: 14px;
}
.hud.landscape.tight .speed-btn {
  width: 58px;
  height: 54px;
}

/* End of style.css */