/* ============================================================================
 * Alpha Archers 2D — ui.css
 * All interface chrome: HUD (bars, combo, boss bar, arrow selector,
 * abilities), buttons, panels, menus, level select, shop, skill tree,
 * records, settings, dialogs, toasts and touch controls.
 * ========================================================================== */

/* ------------------------------------------------------------- primitives */
.btn {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: calc(11px * var(--ui-scale)) calc(22px * var(--ui-scale));
  font-size: calc(15px * var(--ui-scale));
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--c-text);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.02));
  border: 1px solid var(--c-panel-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-btn), inset 0 1px 0 rgba(255, 255, 255, 0.09);
  backdrop-filter: blur(8px);
  transition: transform var(--t-fast) var(--ease-out), box-shadow var(--t-fast),
    border-color var(--t-fast), background var(--t-fast);
}

/* Light sheen sweeps across buttons on hover */
.btn::after {
  content: '';
  position: absolute;
  top: 0;
  left: -80%;
  width: 55%;
  height: 100%;
  background: linear-gradient(105deg, transparent, rgba(255, 255, 255, 0.16), transparent);
  transform: skewX(-18deg);
  pointer-events: none;
  opacity: 0;
}

.btn:hover::after {
  animation: sheenSweep 0.7s var(--ease-out);
}

.btn:hover {
  transform: translateY(-2px);
  border-color: var(--c-accent);
  box-shadow: var(--shadow-btn), var(--shadow-glow-accent);
}

.btn:active {
  transform: translateY(0) scale(0.97);
}

.btn-primary {
  background: linear-gradient(180deg, rgba(62, 198, 168, 0.32), rgba(62, 198, 168, 0.12));
  border-color: rgba(62, 198, 168, 0.6);
}

.btn-big {
  font-size: calc(18px * var(--ui-scale));
  padding: calc(14px * var(--ui-scale)) calc(30px * var(--ui-scale));
}

.btn-sm {
  padding: 7px 14px;
  font-size: calc(13px * var(--ui-scale));
}

.btn-ghost {
  background: transparent;
  box-shadow: none;
}

.btn-danger {
  border-color: rgba(230, 94, 106, 0.55);
  background: linear-gradient(180deg, rgba(230, 94, 106, 0.22), rgba(230, 94, 106, 0.08));
}

.btn-danger:hover {
  border-color: var(--c-danger);
  box-shadow: var(--shadow-btn), 0 0 18px rgba(230, 94, 106, 0.4);
}

.btn-buy {
  border-color: rgba(230, 179, 94, 0.6);
  background: linear-gradient(180deg, rgba(230, 179, 94, 0.26), rgba(230, 179, 94, 0.1));
}

.btn-buy::before {
  content: 'Y8';
  position: absolute;
  top: 2px;
  right: 6px;
  font-size: 8px;
  letter-spacing: 0.08em;
  color: var(--c-gold);
  opacity: 0.75;
}

.btn-disabled {
  opacity: 0.45;
  filter: grayscale(0.6);
}

/* ---------------------------------------------------------------- screens */
/* Screens are fixed rectangles. Nothing in this game scrolls: content that
   does not fit is paged by `paginate()` in ui.js. */
.screen {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: clamp(12px, calc(3 * var(--sh)), 40px);
  overflow: hidden;
  animation: fadeIn var(--t-med) ease both;
  background: radial-gradient(ellipse at 50% 20%, rgba(20, 16, 40, 0.55), rgba(8, 6, 16, 0.82));
  backdrop-filter: blur(3px);
}

.overlay-screen {
  background: radial-gradient(ellipse at 50% 40%, rgba(12, 10, 24, 0.55), rgba(6, 5, 12, 0.86));
}

.panel {
  position: relative;
  width: min(920px, calc(94 * var(--sw)));
  max-height: calc(92 * var(--sh));
  overflow: hidden;
  padding: clamp(18px, calc(3 * var(--sw)), 34px);
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0) 38%),
    var(--c-panel);
  border: 1px solid var(--c-panel-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-panel), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(18px) saturate(1.25);
  -webkit-backdrop-filter: blur(18px) saturate(1.25);
  animation: slideUp var(--t-med) var(--ease-out) both;
}

.panel-title {
  font-family: var(--font-display);
  font-size: calc(clamp(22px, calc(4 * var(--sw)), 32px) * var(--ui-scale));
  letter-spacing: 0.1em;
  text-align: center;
  margin-bottom: 18px;
  text-shadow: var(--shadow-text);
}

.back-row {
  display: flex;
  gap: 12px;
  justify-content: center;
  margin-top: 20px;
}

/* Actions a screen offers, as opposed to ways out of it. The menu strips
   `.back-row` inside a tab — the rail is the way back there — so anything the
   player is meant to be able to press goes in here instead. */
.panel-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-top: 16px;
}

/* -------------------------------------------------------------- main menu */
.menu-screen {
  background: linear-gradient(180deg, rgba(8, 6, 16, 0.25) 0%, rgba(8, 6, 16, 0.66) 100%);
  backdrop-filter: none;
}

.menu-title-wrap {
  text-align: center;
  margin-bottom: clamp(18px, calc(4 * var(--sh)), 44px);
  animation: fadeInUp 0.7s var(--ease-out) both;
}

.game-title {
  font-family: var(--font-display);
  font-size: clamp(40px, calc(9 * var(--sw)), 88px);
  letter-spacing: 0.16em;
  line-height: 1.05;
  text-shadow: 0 4px 30px rgba(0, 0, 0, 0.8), var(--shadow-text);
  animation: titleGlow 3.4s ease-in-out infinite;
}

.title-accent {
  color: var(--c-accent);
}

.game-subtitle {
  margin-top: 10px;
  color: var(--c-text-dim);
  font-size: clamp(13px, calc(2 * var(--sw)), 17px);
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

/* Side by side on result screens: two stacked full-width buttons cost 100px of
   a panel that also has to show the run summary and a rewarded-ad offer. */
.menu-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  width: min(560px, calc(90 * var(--sw)));
  margin: 0 auto;
}

/* A basis small enough that two fit side by side in the narrow result panel;
   they grow to fill the row, so the pair still reads as full-width buttons. */
.menu-buttons .btn {
  flex: 1 1 150px;
}

.menu-buttons .btn {
  animation: fadeInUp 0.6s var(--ease-out) both;
}

.menu-buttons .btn:nth-child(1) { animation-delay: 0.08s; }
.menu-buttons .btn:nth-child(2) { animation-delay: 0.14s; }
.menu-buttons .btn:nth-child(3) { animation-delay: 0.2s; }
.menu-buttons .btn:nth-child(4) { animation-delay: 0.26s; }
.menu-buttons .btn:nth-child(5) { animation-delay: 0.32s; }

.menu-meta {
  display: flex;
  gap: 22px;
  margin-top: clamp(16px, calc(3.5 * var(--sh)), 36px);
  color: var(--c-text-dim);
  font-size: 14px;
}

.menu-version {
  color: var(--c-text-faint);
}

/* ------------------------------------------------------------ level select */
/* Six across rather than five, and shorter cards: two rows of realms then fit
   under the mode and difficulty rows on the first page of the Play tab. */
.level-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(126px, 1fr));
  gap: 10px;
}

.level-card {
  position: relative;
  padding: 10px 10px 9px;
  text-align: center;
  background: var(--c-panel-inner);
  border: 1px solid var(--c-panel-border);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: transform var(--t-fast) var(--ease-out), border-color var(--t-fast), box-shadow var(--t-fast);
}

.level-card:hover:not(.locked) {
  transform: translateY(-4px) scale(1.03);
  border-color: var(--c-accent);
  box-shadow: var(--shadow-glow-accent);
}

.level-card.locked {
  opacity: 0.45;
  cursor: not-allowed;
  filter: grayscale(0.7);
}

.level-icon {
  font-size: 26px;
  margin-bottom: 3px;
}

.level-num {
  position: absolute;
  top: 8px;
  left: 10px;
  font-size: 12px;
  font-weight: 800;
  color: var(--c-text-faint);
}

.level-name {
  font-weight: 700;
  font-size: calc(12px * var(--ui-scale));
  margin-bottom: 3px;
}

.level-stars .star {
  color: #4a4462;
  font-size: 15px;
}

.level-stars .star.on {
  color: var(--c-gold);
  text-shadow: 0 0 8px rgba(230, 179, 94, 0.7);
}

.level-score {
  margin-top: 5px;
  font-size: 11px;
  color: var(--c-text-dim);
}

.level-boss-tag {
  margin-top: 6px;
  display: inline-block;
  padding: 2px 8px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: #ffb1c0;
  background: var(--c-danger-soft);
  border: 1px solid rgba(230, 94, 106, 0.4);
  border-radius: 99px;
}

/* ------------------------------------------------------------------- shop */
.shop-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 6px;
}

.shop-header .panel-title {
  margin-bottom: 0;
}

.coin-display {
  font-size: calc(17px * var(--ui-scale));
  font-weight: 800;
  color: var(--c-gold);
  text-shadow: 0 0 12px rgba(230, 179, 94, 0.4);
  white-space: nowrap;
}

.tabs {
  display: flex;
  gap: 6px;
  margin: 14px 0 16px;
  border-bottom: 1px solid var(--c-panel-border);
  padding-bottom: 10px;
  flex-wrap: wrap;
}

.tab {
  padding: 6px 12px;
  font-size: calc(13px * var(--ui-scale));
  font-weight: 600;
  color: var(--c-text-dim);
  border-radius: var(--radius-sm);
  transition: background var(--t-fast), color var(--t-fast);
}

.tab:hover {
  color: var(--c-text);
  background: rgba(255, 255, 255, 0.06);
}

.tab.active {
  color: var(--c-accent);
  background: var(--c-accent-soft);
}

.shop-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 12px;
}

.shop-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px;
  background: var(--c-panel-inner);
  border: 1px solid var(--c-panel-border);
  border-radius: var(--radius-md);
  transition: border-color var(--t-fast), transform var(--t-fast);
}

.shop-card:hover {
  border-color: rgba(255, 255, 255, 0.3);
  transform: translateY(-2px);
}

.shop-card.equipped {
  border-color: var(--c-accent);
  box-shadow: inset 0 0 24px rgba(62, 198, 168, 0.08);
}

.shop-card-head {
  display: flex;
  align-items: center;
  gap: 10px;
}

.shop-icon {
  font-size: 24px;
}

.shop-name {
  font-weight: 700;
  font-size: calc(14.5px * var(--ui-scale));
}

.shop-desc {
  font-size: calc(12.5px * var(--ui-scale));
  color: var(--c-text-dim);
  flex: 1;
  line-height: 1.45;
}

.shop-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.shop-stats span {
  font-size: 11px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.07);
  color: var(--c-text-dim);
}

.shop-owned {
  text-align: center;
  font-weight: 800;
  font-size: 13px;
  color: var(--c-accent);
  padding: 7px;
}

.upgrade-pips {
  display: flex;
  gap: 5px;
}

.pip {
  width: 16px;
  height: 8px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.1);
}

.pip.on {
  background: var(--c-gold);
  box-shadow: 0 0 8px rgba(230, 179, 94, 0.5);
}

/* ------------------------------------------------------------- skill tree */
.skill-hint {
  text-align: center;
  color: var(--c-text-dim);
  font-size: 13px;
  margin-bottom: 14px;
}

.skill-columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}

.skill-branch {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.branch-title {
  font-family: var(--font-display);
  text-align: center;
  letter-spacing: 0.12em;
  font-size: calc(17px * var(--ui-scale));
  padding-bottom: 6px;
  border-bottom: 1px solid var(--c-panel-border);
}

.skill-node {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--c-panel-inner);
  border: 1px solid var(--c-panel-border);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: border-color var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast);
}

.skill-node.available:hover {
  transform: translateX(4px);
  border-color: var(--c-accent);
  box-shadow: var(--shadow-glow-accent);
}

.skill-node.maxed {
  border-color: rgba(230, 179, 94, 0.55);
  background: var(--c-gold-soft);
  cursor: default;
}

.skill-node.locked {
  opacity: 0.42;
  cursor: not-allowed;
}

.skill-node.unaffordable {
  opacity: 0.7;
  cursor: not-allowed;
}

.skill-icon {
  font-size: 22px;
  flex-shrink: 0;
}

.skill-info {
  flex: 1;
  min-width: 0;
}

.skill-name {
  font-weight: 700;
  font-size: calc(13.5px * var(--ui-scale));
}

.skill-desc {
  font-size: calc(11.5px * var(--ui-scale));
  color: var(--c-text-dim);
  line-height: 1.4;
}

.skill-req {
  font-size: 11px;
  color: var(--c-danger);
  margin-top: 2px;
}

.skill-cost {
  font-size: 12px;
  font-weight: 800;
  color: var(--c-arcane);
  white-space: nowrap;
}

/* ---------------------------------------------------------------- records */
.ach-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 10px;
}

.ach-card {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 12px 14px;
  background: var(--c-panel-inner);
  border: 1px solid var(--c-panel-border);
  border-radius: var(--radius-md);
  opacity: 0.55;
}

.ach-card.unlocked {
  opacity: 1;
  border-color: rgba(230, 179, 94, 0.45);
  background: var(--c-gold-soft);
}

.ach-icon {
  font-size: 26px;
}

.ach-name {
  font-weight: 700;
  font-size: calc(13.5px * var(--ui-scale));
}

.ach-desc {
  font-size: calc(11.5px * var(--ui-scale));
  color: var(--c-text-dim);
}

.stats-table {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 4px 22px;
}

.stats-row {
  display: flex;
  justify-content: space-between;
  padding: 8px 10px;
  font-size: calc(13.5px * var(--ui-scale));
  border-bottom: 1px dashed rgba(255, 255, 255, 0.08);
  color: var(--c-text-dim);
}

.stats-val {
  font-weight: 700;
  color: var(--c-text);
}

/* --------------------------------------------------------------- settings */
.settings-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.setting-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 6px;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.07);
}

.setting-row label {
  font-size: calc(14px * var(--ui-scale));
  display: flex;
  flex-direction: column;
}

.setting-hint {
  font-size: 11.5px;
  color: var(--c-text-faint);
}

.keybind-hint {
  padding: 8px 4px 12px;
  border: none;
}

.setting-row input[type='range'] {
  width: min(220px, calc(40 * var(--sw)));
  accent-color: var(--c-accent);
  cursor: pointer;
}

.setting-row select {
  padding: 7px 12px;
  background: var(--c-bg-raised);
  border: 1px solid var(--c-panel-border);
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.toggle {
  min-width: 64px;
  padding: 7px 14px;
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--c-text-faint);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--c-panel-border);
  border-radius: 99px;
  transition: all var(--t-fast);
}

.toggle.on {
  color: #06231c;
  background: var(--c-accent);
  border-color: var(--c-accent);
  box-shadow: var(--shadow-glow-accent);
}

.keybind-btn {
  min-width: 96px;
  padding: 7px 14px;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  background: var(--c-bg-raised);
  border: 1px solid var(--c-panel-border);
  border-radius: var(--radius-sm);
  transition: border-color var(--t-fast);
}

.keybind-btn:hover {
  border-color: var(--c-accent);
}

.keybind-btn.listening {
  border-color: var(--c-gold);
  color: var(--c-gold);
  animation: pulseSoft 0.9s ease-in-out infinite;
}

/* ------------------------------------------------------- pause / results */
.pause-panel {
  width: min(420px, calc(92 * var(--sw)));
  text-align: center;
}

.pause-info {
  color: var(--c-text-dim);
  margin-bottom: 18px;
  font-size: 14px;
}

.pause-panel .menu-buttons {
  width: 100%;
}

.gameover-title {
  color: var(--c-danger);
  text-shadow: 0 0 26px rgba(230, 94, 106, 0.5);
}

.victory-title {
  color: var(--c-gold);
  text-shadow: 0 0 30px rgba(230, 179, 94, 0.6);
}

.gameover-screen .panel,
.victory-screen .panel {
  width: min(760px, calc(94 * var(--sw)));
  max-height: calc(96 * var(--sh));
  overflow: hidden;
  text-align: center;
}

.victory-stars {
  display: flex;
  justify-content: center;
  gap: 14px;
  margin: 6px 0 16px;
  font-size: 46px;
}

.big-star {
  color: #3c3752;
  transform: scale(0);
  animation: starPop 0.6s var(--ease-bounce) both;
}

.big-star.earned {
  color: var(--c-gold);
  text-shadow: 0 0 26px rgba(230, 179, 94, 0.8);
}

/* A row of stat chips rather than a stacked list. The run summary is a glance,
   and at a fifth of the height it leaves room for the rewarded-ad offer on the
   same page instead of pushing it behind the pager. */
.result-rows {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  margin: 10px 0 12px;
}

.result-row {
  min-width: 0;
}

.result-row > span:first-child {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.result-row {
  display: flex;
  flex-direction: column-reverse;   /* value above its label */
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 8px 4px;
  font-size: calc(11px * var(--ui-scale));
  text-align: center;
  color: var(--c-text-faint);
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: var(--radius-sm);
}

.result-val {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: calc(17px * var(--ui-scale));
  font-weight: 800;
  color: var(--c-text);
  white-space: nowrap;
}

.gameover-screen .menu-buttons,
.victory-screen .menu-buttons {
  width: 100%;
}

/* -------------------------------------------------------------------- HUD */
.hud-corner {
  position: absolute;
  display: flex;
  gap: 10px;
  pointer-events: none;
}

.hud-top-left {
  top: var(--hud-pad);
  left: var(--hud-pad);
}

.hud-top-right {
  top: var(--hud-pad);
  right: var(--hud-pad);
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}

.hud-bottom-left {
  bottom: var(--hud-pad);
  left: var(--hud-pad);
  pointer-events: auto;
}

.hud-bottom-right {
  bottom: var(--hud-pad);
  right: var(--hud-pad);
}

.hud-top-center {
  position: absolute;
  top: var(--hud-pad);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  pointer-events: none;
}

/* Vitals */
.vitals {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0) 45%),
    rgba(10, 8, 20, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-md);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 6px 20px rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(10px) saturate(1.2);
  -webkit-backdrop-filter: blur(10px) saturate(1.2);
}

.level-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(40px * var(--ui-scale));
  height: calc(40px * var(--ui-scale));
  font-weight: 900;
  font-size: calc(16px * var(--ui-scale));
  color: var(--c-accent);
  background: rgba(62, 198, 168, 0.1);
  border: 2px solid var(--c-accent);
  border-radius: 50%;
  box-shadow: var(--shadow-glow-accent);
}

.bars {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.bar {
  position: relative;
  width: var(--bar-w);
  height: calc(11px * var(--ui-scale));
  background: rgba(0, 0, 0, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 99px;
  overflow: hidden;
}

.stamina-bar { width: calc(var(--bar-w) * 0.78); height: calc(8px * var(--ui-scale)); }
.mana-bar { width: calc(var(--bar-w) * 0.78); height: calc(8px * var(--ui-scale)); }
.xp-bar { width: calc(var(--bar-w) * 0.6); height: calc(5px * var(--ui-scale)); }

.bar-fill,
.bar-ghost {
  position: absolute;
  inset: 0;
  border-radius: 99px;
  transform-origin: left center;
  transform: scaleX(1);
  transition: transform 0.16s var(--ease-out);
}

.bar-ghost {
  background: rgba(255, 120, 120, 0.55);
  transition: transform 0.6s ease 0.15s;
}

.bar-fill.hp { background: linear-gradient(90deg, #3aa848, var(--c-hp)); }
.bar-fill.hp.low { background: linear-gradient(90deg, #b23a42, var(--c-hp-low)); animation: pulseSoft 0.8s infinite; }
.bar-fill.stamina { background: linear-gradient(90deg, #b89a3a, var(--c-stamina)); }
.bar-fill.mana { background: linear-gradient(90deg, #3a6ab8, var(--c-mana)); }
.bar-fill.xp { background: linear-gradient(90deg, #8a5ed8, var(--c-xp)); }

/* Wave / boss */
.wave-label {
  font-family: var(--font-display);
  font-size: calc(17px * var(--ui-scale));
  letter-spacing: 0.14em;
  text-shadow: var(--shadow-text);
}

.enemies-label {
  font-size: calc(12px * var(--ui-scale));
  color: var(--c-text-dim);
  text-shadow: var(--shadow-text);
}

.wind-indicator {
  font-size: 11px;
  color: var(--c-text-faint);
  letter-spacing: 0.1em;
  text-shadow: var(--shadow-text);
}

.boss-bar {
  margin-top: 6px;
  width: min(440px, calc(60 * var(--sw)));
  text-align: center;
}

.boss-name {
  font-family: var(--font-display);
  font-size: calc(14px * var(--ui-scale));
  letter-spacing: 0.18em;
  color: #ffb1c0;
  text-shadow: var(--shadow-text);
}

.boss-track {
  margin-top: 4px;
  height: 12px;
  background: rgba(0, 0, 0, 0.6);
  border: 1px solid rgba(255, 140, 160, 0.4);
  border-radius: 99px;
  overflow: hidden;
}

.boss-fill {
  height: 100%;
  border-radius: 99px;
  transform-origin: left center;
  background: linear-gradient(90deg, #8a2038, var(--c-boss), #ff7a94);
  box-shadow: 0 0 14px rgba(230, 94, 130, 0.7);
  transition: transform 0.25s var(--ease-out);
}

/* Score — the headline figure, centred at the very top of the screen. */
.score-plate {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: calc(132px * var(--ui-scale));
  padding: calc(3px * var(--ui-scale)) calc(20px * var(--ui-scale));
  margin-bottom: 3px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--radius-sm);
  background:
    linear-gradient(180deg, rgba(30, 26, 54, 0.78), rgba(12, 10, 26, 0.72));
  box-shadow:
    0 6px 22px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.09);
  backdrop-filter: blur(6px);
}

.score-label {
  font-size: calc(30px * var(--ui-scale));
  font-weight: 900;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
  color: #fff;
  text-shadow: 0 0 18px rgba(158, 240, 220, 0.45), var(--shadow-text);
}

.coins-label {
  font-size: calc(14px * var(--ui-scale));
  font-weight: 700;
  color: var(--c-gold);
  text-shadow: var(--shadow-text);
}

.combo-label {
  font-size: calc(16px * var(--ui-scale));
  font-weight: 900;
  letter-spacing: 0.08em;
  color: var(--c-accent);
  text-shadow: 0 0 14px rgba(62, 198, 168, 0.7), var(--shadow-text);
}

/* Arrow selector */
/* The full quiver is available from the start, so this holds twenty chips.
   Capped at the width of the free space to the left of the power bar, and the
   chips are sized so they wrap into tidy rows instead of running under it. */
.arrow-selector {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  max-width: 340px;
}

.arrow-chip {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: calc(33px * var(--ui-scale));
  height: calc(33px * var(--ui-scale));
  background: rgba(10, 8, 20, 0.6);
  border: 1.5px solid rgba(255, 255, 255, 0.15);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: transform var(--t-fast) var(--ease-out), border-color var(--t-fast), box-shadow var(--t-fast);
  backdrop-filter: blur(3px);
}

.arrow-chip:hover {
  transform: translateY(-3px);
}

.arrow-chip.active {
  border-color: var(--chip-color, var(--c-accent));
  box-shadow: 0 0 14px color-mix(in srgb, var(--chip-color, var(--c-accent)) 60%, transparent);
  transform: translateY(-4px);
}

.chip-icon {
  font-size: calc(15px * var(--ui-scale));
  color: var(--chip-color, #fff);
}

.chip-key {
  position: absolute;
  top: 2px;
  left: 5px;
  font-size: 9px;
  font-weight: 800;
  color: var(--c-text-faint);
}

.chip-mana {
  position: absolute;
  bottom: 2px;
  right: 5px;
  font-size: 9px;
  font-weight: 800;
  color: var(--c-mana);
}

/* Abilities */
.ability {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(52px * var(--ui-scale));
  height: calc(52px * var(--ui-scale));
  background: rgba(10, 8, 20, 0.6);
  border: 1.5px solid rgba(255, 255, 255, 0.16);
  border-radius: 50%;
  overflow: hidden;
  backdrop-filter: blur(3px);
}

.ability-icon {
  font-size: calc(22px * var(--ui-scale));
  z-index: 2;
}

.ability-cd {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.68);
  transform-origin: bottom center;
  transform: scaleY(0);
  z-index: 3;
}

/* Straddles the bottom edge of the circle, centred, free to be wider than it —
   the circle clips its own children, this one is a sibling so it never loses a
   letter. */
.ability-key {
  position: absolute;
  bottom: calc(13px * var(--ui-scale));
  left: 50%;
  transform: translateX(-50%);
  z-index: 4;
  padding: 0 4px;
  border-radius: 5px;
  background: rgba(10, 8, 20, 0.72);
  white-space: nowrap;
  font-size: 9px;
  font-weight: 800;
  color: var(--c-text-dim);
  text-shadow: var(--shadow-text);
  pointer-events: none;
}

.ability-item {
  position: relative;   /* the multi-jump badge anchors to this */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}

.ability-label {
  font-size: calc(9px * var(--ui-scale));
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-text-dim);
  text-shadow: var(--shadow-text);
}

.ability-item.unusable .ability {
  opacity: 0.55;
}

.ability-item.active .ability {
  border-color: var(--c-accent);
  box-shadow: var(--shadow-glow-accent);
}

/* Bottom-right column: camera switcher above the ability row */
.hud-col-end {
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
}

.abilities-row {
  display: flex;
  gap: 10px;
}

.camera-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  pointer-events: auto;
}

.camera-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(50px * var(--ui-scale));
  height: calc(50px * var(--ui-scale));
  border: 2px solid rgba(158, 240, 220, 0.55);
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 26%, rgba(255, 255, 255, 0.16), transparent 55%),
    rgba(10, 8, 20, 0.6);
  cursor: pointer;
  backdrop-filter: blur(4px);
  animation: cameraPulse 2.4s ease-in-out infinite;
  transition: transform var(--t-fast);
}

.camera-btn:hover {
  transform: scale(1.08);
}

.camera-btn.switched {
  animation: cameraSwitch 0.6s var(--ease-out), cameraPulse 2.4s ease-in-out 0.6s infinite;
}

.camera-c {
  font-size: calc(19px * var(--ui-scale));
  font-weight: 900;
  color: var(--c-accent);
  text-shadow: 0 0 10px rgba(62, 198, 168, 0.8);
}

.camera-cam {
  position: absolute;
  bottom: 3px;
  right: 4px;
  font-size: 11px;
}

.camera-label {
  font-size: calc(9px * var(--ui-scale));
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-accent);
  text-shadow: var(--shadow-text);
}

/* ---------------------------------------------------------- crest chooser */
.crest-box {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 0 auto 12px;
  padding: 10px 16px;
  max-width: 640px;
  background: var(--c-panel-inner);
  border: 1px solid var(--c-panel-border);
  border-radius: var(--radius-md);
  flex-wrap: wrap;
  justify-content: center;
}

.crest-preview {
  display: flex;
  align-items: center;
  gap: 12px;
}

.crest-big {
  filter: drop-shadow(0 0 12px rgba(255, 255, 255, 0.18));
  animation: floatBob 3s ease-in-out infinite;
}

.crest-big.is-random {
  animation: floatBob 3s ease-in-out infinite, pulseSoft 1.6s infinite;
}

.crest-caption {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: calc(12px * var(--ui-scale));
  color: var(--c-text-dim);
  text-transform: capitalize;
}

.crest-caption b {
  color: var(--c-text);
  text-transform: none;
}

.crest-rows {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.crest-shapes,
.crest-colors {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  align-items: center;
}

.crest-tile {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 1.5px solid var(--c-panel-border);
  border-radius: var(--radius-sm);
  background: rgba(0, 0, 0, 0.25);
  cursor: pointer;
  transition: transform var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast);
}

.crest-tile:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 255, 255, 0.4);
}

.crest-tile.active {
  border-color: var(--c-accent);
  box-shadow: var(--shadow-glow-accent);
}

.crest-random {
  font-size: 17px;
}

.crest-swatch {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.18);
  background: var(--swatch);
  cursor: pointer;
  transition: transform var(--t-fast), box-shadow var(--t-fast), border-color var(--t-fast);
}

.crest-swatch:hover {
  transform: scale(1.15);
}

.crest-swatch.active {
  border-color: #fff;
  box-shadow: 0 0 12px var(--swatch);
  transform: scale(1.12);
}

/* Wave banner */
.wave-banner {
  position: absolute;
  top: 26%;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  pointer-events: none;
}

.banner-title {
  font-family: var(--font-display);
  font-size: clamp(30px, calc(6 * var(--sw)), 58px);
  letter-spacing: 0.2em;
  text-shadow: 0 4px 26px rgba(0, 0, 0, 0.9), var(--shadow-text);
}

.banner-sub {
  margin-top: 6px;
  font-size: clamp(12px, calc(2 * var(--sw)), 17px);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--c-text-dim);
  text-shadow: var(--shadow-text);
}

/* ------------------------------------------------------- special powers */
.hud-col {
  flex-direction: column;
  align-items: flex-start;
}

/* One long horizontal strip along the bottom edge. `nowrap` is the whole
   point: nine powers stay on a single line you scan left to right, instead of
   wrapping into a block that changes height as powers unlock. */
.hud-bottom-center {
  position: absolute;
  bottom: var(--hud-pad);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  justify-content: center;
  pointer-events: none;
}

.powers-box {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
  gap: calc(5px * var(--ui-scale));
  padding: calc(5px * var(--ui-scale)) calc(12px * var(--ui-scale));
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0) 55%),
    rgba(10, 8, 20, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: var(--radius-md);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  pointer-events: auto;
}

.powers-title {
  /* Readability floor: nothing on screen below 9px */
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.18em;
  color: var(--c-text-faint);
  padding-right: calc(6px * var(--ui-scale));
  margin-right: calc(2px * var(--ui-scale));
  border-right: 1px solid rgba(255, 255, 255, 0.12);
  white-space: nowrap;
}

/* Beautiful circular power items with labels + refill tanks */
.power-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  cursor: pointer;
  transition: transform var(--t-fast);
}

.power-item:hover {
  transform: translateY(-2px);
}

.power-circle {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(34px * var(--ui-scale));
  height: calc(34px * var(--ui-scale));
  border: 2px solid color-mix(in srgb, var(--power-color, var(--c-accent)) 55%, rgba(255, 255, 255, 0.14));
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 26%, rgba(255, 255, 255, 0.14), transparent 55%),
    rgba(0, 0, 0, 0.4);
  overflow: hidden;
  box-shadow: 0 0 10px color-mix(in srgb, var(--power-color, var(--c-accent)) 28%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}

.power-item:hover .power-circle {
  border-color: var(--power-color, var(--c-accent));
  box-shadow: 0 0 16px color-mix(in srgb, var(--power-color, var(--c-accent)) 60%, transparent);
}

.power-item.armed .power-circle {
  border-color: var(--power-color, var(--c-accent));
  box-shadow: 0 0 18px color-mix(in srgb, var(--power-color, var(--c-accent)) 80%, transparent);
  animation: pulseSoft 0.8s infinite;
}

.power-item.empty {
  opacity: 0.4;
  filter: grayscale(0.8);
}

.power-icon {
  font-size: calc(14px * var(--ui-scale));
  z-index: 2;
}

/* Cooldown sweep: a conic ring driven by --cd (0 = just fired, 1 = ready).
   Compositor-friendly — no layout, no per-frame DOM writes beyond one var. */
.power-circle::after {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  background: conic-gradient(
    from -90deg,
    transparent 0 calc(var(--cd, 1) * 360deg),
    rgba(4, 3, 10, 0.78) calc(var(--cd, 1) * 360deg) 360deg);
  pointer-events: none;
  z-index: 3;
}

.power-item.ready .power-circle {
  border-color: var(--power-color, var(--c-accent));
  box-shadow: 0 0 14px color-mix(in srgb, var(--power-color, var(--c-accent)) 65%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

.power-item.ready .power-label {
  color: var(--power-color, var(--c-accent));
}

/* On cooldown or out of charges: unmistakably greyed out */
.power-item.cooling .power-icon,
.power-item.empty .power-icon {
  filter: grayscale(0.85) brightness(0.7);
}

.power-item.locked {
  opacity: 0.45;
  filter: grayscale(0.9);
  cursor: not-allowed;
}

.power-lock {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: calc(15px * var(--ui-scale));
  background: rgba(4, 3, 10, 0.6);
  z-index: 5;
}

.power-key {
  position: absolute;
  top: 2px;
  left: 7px;
  z-index: 4;
  font-size: 9px;
  font-weight: 800;
  color: var(--c-text-dim);
}

/* Small, but never below the 9px readability floor — so this one is a fixed
   9px rather than a scaled value that a low UI-scale could push under it. */
.power-label {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--c-text-dim);
  text-shadow: var(--shadow-text);
  max-width: calc(46px * var(--ui-scale));
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Refill tanks: one pip per remaining charge */
.power-pips {
  display: flex;
  gap: 2px;
  width: calc(30px * var(--ui-scale));
}

.ppip {
  flex: 1;
  height: 3px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.14);
}

.ppip.on {
  background: var(--power-color, var(--c-accent));
  box-shadow: 0 0 4px color-mix(in srgb, var(--power-color, var(--c-accent)) 80%, transparent);
}

/* --------------------------------------------------- enemy power feed */
.enemy-feed {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 5px;
  margin-top: 6px;
  max-width: min(300px, calc(40 * var(--sw)));
}

.feed-item {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 5px 10px;
  font-size: calc(11.5px * var(--ui-scale));
  color: var(--c-text-dim);
  background: rgba(10, 8, 20, 0.62);
  border: 1px solid color-mix(in srgb, var(--feed-color, #fff) 45%, transparent);
  border-radius: 99px;
  backdrop-filter: blur(6px);
  animation: toastIn 0.3s var(--ease-out) both;
  white-space: nowrap;
}

.feed-item b {
  color: var(--feed-color, var(--c-text));
}

.feed-item.leaving {
  animation: toastOut 0.45s ease both;
}

.feed-icon {
  font-size: 14px;
}

/* ------------------------------------------- mode conditions & timers */
.condition-line {
  margin-top: 3px;
  font-size: calc(11px * var(--ui-scale));
  letter-spacing: 0.06em;
  color: var(--c-text-faint);
  text-shadow: var(--shadow-text);
}

.mode-timer {
  margin-top: 2px;
  font-size: calc(16px * var(--ui-scale));
  font-weight: 800;
  letter-spacing: 0.06em;
  color: var(--c-text);
  text-shadow: var(--shadow-text);
}

.mode-timer.warn {
  color: var(--c-danger);
  animation: pulseSoft 0.6s infinite;
}

/* ----------------------------------------- mode & difficulty selection */
.mode-tabs {
  justify-content: center;
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: 6px;
}

.diff-chips {
  display: flex;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.diff-chip {
  padding: 6px 14px;
  font-size: calc(12.5px * var(--ui-scale));
  font-weight: 700;
  color: var(--c-text-dim);
  border: 1px solid var(--c-panel-border);
  border-radius: 99px;
  transition: all var(--t-fast);
}

.diff-chip:hover {
  color: var(--c-text);
  border-color: rgba(255, 255, 255, 0.4);
}

.diff-chip.active {
  color: var(--c-text);
  border-color: var(--c-accent);
  background: var(--c-accent-soft);
  box-shadow: var(--shadow-glow-accent);
}

.diff-chip.diff-hard.active {
  border-color: #ff8c42;
  background: rgba(255, 140, 66, 0.14);
  box-shadow: 0 0 14px rgba(255, 140, 66, 0.4);
}

.diff-chip.diff-nightmare.active {
  border-color: var(--c-danger);
  background: var(--c-danger-soft);
  box-shadow: 0 0 14px rgba(230, 94, 106, 0.45);
}

.conditions-box {
  margin: 0 auto 14px;
  padding: 10px 16px;
  max-width: 560px;
  background: var(--c-panel-inner);
  border: 1px dashed var(--c-panel-border);
  border-radius: var(--radius-md);
}

.conditions-title {
  font-weight: 800;
  font-size: calc(13px * var(--ui-scale));
  margin-bottom: 2px;
}

.conditions-desc {
  font-size: calc(12px * var(--ui-scale));
  color: var(--c-text-dim);
  margin-bottom: 6px;
}

.conditions-list li {
  position: relative;
  padding-left: 14px;
  font-size: calc(11.5px * var(--ui-scale));
  color: var(--c-text-dim);
  line-height: 1.55;
}

.conditions-list li::before {
  content: '›';
  position: absolute;
  left: 2px;
  color: var(--c-accent);
}

.random-arena {
  display: flex;
  align-items: center;
  gap: 18px;
  margin: 8px auto;
  padding: 22px 26px;
  max-width: 640px;
  background: var(--c-panel-inner);
  border: 1px dashed var(--c-accent);
  border-radius: var(--radius-lg);
  flex-wrap: wrap;
  justify-content: center;
}

.random-arena-icon {
  font-size: 52px;
  animation: floatBob 2.6s ease-in-out infinite;
}

.random-arena-info {
  display: flex;
  flex-direction: column;
  gap: 5px;
  max-width: 300px;
  font-size: calc(12.5px * var(--ui-scale));
  color: var(--c-text-dim);
}

.random-arena-info b {
  font-size: calc(16px * var(--ui-scale));
  color: var(--c-text);
}

.random-best {
  color: var(--c-gold);
  font-weight: 700;
}

.gameover-reason {
  text-align: center;
  font-size: calc(14.5px * var(--ui-scale));
  color: #ffb1c0;
  margin-bottom: 4px;
}

.gameover-mode {
  text-align: center;
  font-size: calc(11.5px * var(--ui-scale));
  color: var(--c-text-faint);
  margin-bottom: 10px;
}

.chip-hint {
  display: flex;
  align-items: center;
  padding: 0 8px;
  font-size: 10px;
  font-weight: 800;
  color: var(--c-text-faint);
}

/* Quiet status line under a reward section (e.g. "claimed, come back tomorrow"). */
.reward-note {
  margin-top: 5px;
  font-size: calc(11.5px * var(--ui-scale));
  color: var(--c-text-faint);
  text-align: center;
}

/* ---------------------------------------------------- first-run onboarding --
 * Four screens shown once, before a new player has fired an arrow: the
 * objective, how to shoot, how to survive, and how they get stronger. It is a
 * modal on purpose — it is the only thing on screen and it is over in twenty
 * seconds — every screen carries a Skip, and it is never shown twice.
 * ------------------------------------------------------------------------- */
.tour-scrim {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  pointer-events: auto;
  background: radial-gradient(ellipse at 50% 45%, rgba(10, 8, 22, 0.72), rgba(6, 5, 14, 0.92));
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
  animation: fadeIn 0.35s var(--ease-out) both;
}

.tour-scrim.leaving {
  animation: fadeIn 0.3s ease reverse both;
}

.tour {
  display: flex;
  flex-direction: column;
  width: min(660px, 100%);
  max-height: 100%;
  padding: 14px 26px 16px;
  text-align: center;
  background:
    linear-gradient(163deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0) 42%),
    rgba(13, 11, 24, 0.96);
  border: 1px solid var(--c-panel-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-panel);
  animation: fadeInUp 0.42s var(--ease-out) both;
}

.tour-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.tour-brand {
  font-family: var(--font-display);
  font-size: calc(13px * var(--ui-scale));
  letter-spacing: 0.22em;
  color: var(--c-text-faint);
}

.tour-brand b {
  color: var(--c-accent);
  font-weight: inherit;
}

.tour-skip {
  padding: 4px 10px;
  font-size: calc(11px * var(--ui-scale));
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--c-text-faint);
  background: none;
  border: 1px solid transparent;
  border-radius: 99px;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}

.tour-skip:hover {
  color: var(--c-text);
  border-color: var(--c-panel-border);
}

/* The scrolling middle. Only this scrolls, so Skip and Next never move. */
.tour-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 12px 2px 4px;
  scrollbar-width: none;
}

.tour-body::-webkit-scrollbar {
  display: none;
}

.tour-body.turn {
  animation: tourTurn 0.34s var(--ease-out) both;
}

@keyframes tourTurn {
  from { opacity: 0; transform: translateX(14px); }
  to { opacity: 1; transform: none; }
}

.tour-art {
  font-size: calc(46px * var(--ui-scale));
  line-height: 1;
  filter: drop-shadow(0 5px 16px rgba(0, 0, 0, 0.6));
  animation: floatBob 3.6s ease-in-out infinite;
}

.tour-tag {
  margin-top: 8px;
  font-size: calc(10.5px * var(--ui-scale));
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-accent);
}

.tour-title {
  margin: 4px 0 0;
  font-family: var(--font-display);
  font-size: calc(25px * var(--ui-scale));
  letter-spacing: 0.06em;
}

.tour-lede {
  max-width: 46ch;
  margin: 7px auto 0;
  font-size: calc(13px * var(--ui-scale));
  line-height: 1.5;
  color: var(--c-text-dim);
}

.tour .ob-grid {
  margin: 14px auto 0;
  max-width: 540px;
}

.tour-foot {
  margin-top: 13px;
  font-size: calc(11.5px * var(--ui-scale));
  font-style: italic;
  color: var(--c-text-faint);
}

/* Pinned footer: back on the left, position in the middle, forward on the
   right. Never scrolls away — the way out is always in the same place. */
.tour-nav {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.tour-back {
  justify-self: start;
  min-width: 108px;
}

/* Keeps its grid column so the dots stay centred and Next never shifts. */
.tour-back.off {
  visibility: hidden;
}

.tour-next {
  justify-self: end;
  min-width: 148px;
}

.tour-dots {
  display: flex;
  gap: 8px;
}

.tour-dot {
  width: 9px;
  height: 9px;
  padding: 0;
  background: rgba(255, 255, 255, 0.18);
  border: none;
  border-radius: 99px;
  cursor: pointer;
  transition: width 0.25s var(--ease-out), background 0.2s;
}

.tour-dot.seen {
  background: rgba(62, 198, 168, 0.5);
}

.tour-dot.on {
  width: 26px;
  background: var(--c-accent);
}

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

/* Two columns, not a flex row: a fixed lead cell is what makes the labels
   line up instead of stepping in and out with the width of each key group. */
.ob-row {
  display: grid;
  grid-template-columns: 152px 1fr;
  align-items: center;
  gap: 10px;
  font-size: calc(12.5px * var(--ui-scale));
  color: var(--c-text-dim);
  text-align: left;
}

/* Everything in the gutter hugs the text it belongs to, so a lone icon and a
   three-key combo both end at the same edge. */
.ob-row > :first-child {
  justify-self: end;
}

.ob-bullet {
  font-size: calc(15px * var(--ui-scale));
}

.ob-keys {
  display: inline-flex;
  gap: 3px;
  flex-shrink: 0;
}

.ob-keys kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  padding: 2px 6px;
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 800;
  color: var(--c-text);
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-bottom-width: 2px;
  border-radius: 5px;
}

.kbd-mouse {
  font-size: 13px;
}

/* --------------------------------------------------------- HUD menu button
 * Touch-only. A desktop player opens the menu with [P] or [Esc], so the button
 * would just be chrome sitting over the map; a touch player has no keyboard
 * and needs it. 44px is the accessibility floor for a tap target.
 * ------------------------------------------------------------------------ */
.hud-menu-btn {
  display: none;
  align-items: center;
  justify-content: center;
  width: calc(44px * var(--ui-scale));
  height: calc(44px * var(--ui-scale));
  font-size: calc(20px * var(--ui-scale));
  color: var(--c-text);
  background: rgba(10, 8, 20, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--radius-sm);
  pointer-events: auto;
  backdrop-filter: blur(6px);
  transition: border-color var(--t-fast), transform var(--t-fast);
}

body.touch-device .hud-menu-btn {
  display: flex;
}

.hud-menu-btn:hover {
  transform: translateY(-2px);
  border-color: var(--c-accent);
}

/* ----------------------------------------------------------------- toasts */
.toast {
  position: relative;
  display: flex;
  gap: 12px;
  align-items: center;
  width: 320px;
  margin: 10px auto 0 0;
  padding: 12px 16px;
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0) 40%),
    var(--c-panel);
  border: 1px solid rgba(230, 179, 94, 0.4);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-panel), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  animation: toastIn 0.4s var(--ease-bounce) both;
  pointer-events: none;
}

#modal-root {
  display: flex;
  flex-direction: column;
  /* In gameplay: left flank, under the vitals. The right side carries the
     minimap and the enemy feed — a toast there would cover both. */
  align-items: flex-start;
  padding-top: calc(var(--hud-pad) + 96px);
  padding-left: var(--hud-pad);
}

/* Over a menu the left column is the navigation, so toasts move to the bottom
   of the content rectangle instead — never over the rail, and never over the
   banner, which must stay fully visible. */
body:not([data-screen='none']) #modal-root {
  align-items: flex-end;
  justify-content: flex-end;
  padding: 0 var(--hud-pad) calc(var(--hud-pad) + 34px) 0;
}

/* The toast's own auto-margin decides its side; align-items alone cannot
   override it. Left in gameplay, right over a menu. */
body:not([data-screen='none']) .toast {
  margin-left: auto;
  margin-right: 0;
}

.toast.leaving {
  animation: toastOut 0.45s ease both;
}

.toast-icon {
  font-size: 24px;
}

.toast-title {
  font-weight: 800;
  font-size: 13.5px;
  color: var(--c-gold);
}

.toast-desc {
  font-size: 12px;
  color: var(--c-text-dim);
}

/* --------------------------------------------------------- touch controls */
.touch-left {
  position: absolute;
  left: calc(4 * var(--sw));
  bottom: calc(12 * var(--sh));
  pointer-events: auto;
}

.joystick {
  position: relative;
  width: calc(110px * var(--touch-scale, 1));
  height: calc(110px * var(--touch-scale, 1));
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  border: 2px solid rgba(255, 255, 255, 0.18);
  touch-action: none;
}

.joy-knob {
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(48px * var(--touch-scale, 1));
  height: calc(48px * var(--touch-scale, 1));
  margin: calc(-24px * var(--touch-scale, 1)) 0 0 calc(-24px * var(--touch-scale, 1));
  border-radius: 50%;
  background: rgba(62, 198, 168, 0.35);
  border: 2px solid var(--c-accent);
  transition: transform 0.05s;
}

.aim-pad {
  position: absolute;
  right: 0;
  top: 0;
  width: calc(52 * var(--sw));
  height: 100%;
  pointer-events: auto;
  touch-action: none;
}

.touch-right {
  position: absolute;
  right: calc(3 * var(--sw));
  bottom: calc(10 * var(--sh));
  display: grid;
  grid-template-columns: repeat(2, calc(56px * var(--touch-scale, 1)));
  gap: calc(10px * var(--touch-scale, 1));
  pointer-events: auto;
}

.touch-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(56px * var(--touch-scale, 1));
  height: calc(56px * var(--touch-scale, 1));
  font-size: calc(22px * var(--touch-scale, 1));
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  border: 2px solid rgba(255, 255, 255, 0.2);
  touch-action: none;
}

.touch-btn:active {
  background: rgba(62, 198, 168, 0.3);
  border-color: var(--c-accent);
}

body:not(.touch-device) #touch-controls {
  display: none;
}

/* ------------------------------------------------------- boss encounters --
 * Entrance card and reward chest. Both sit inside the HUD so they inherit its
 * safe-area padding and never collide with the frame edge.
 * ------------------------------------------------------------------------ */
.boss-intro {
  position: absolute;
  left: 0;
  right: 0;
  margin-inline: auto;
  top: 18%;
  width: min(520px, calc(88 * var(--sw)));
  padding: 20px 24px;
  text-align: center;
  pointer-events: none;
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0) 45%),
    rgba(10, 6, 20, 0.86);
  border: 1px solid rgba(255, 90, 130, 0.4);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-panel), 0 0 44px rgba(255, 60, 110, 0.24);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  animation: fadeInUp 0.55s var(--ease-out) both;
}

.boss-intro.leaving,
.boss-chest.leaving {
  animation: fadeIn 0.5s ease reverse both;
}

.boss-intro-icon {
  font-size: calc(40px * var(--ui-scale));
  filter: drop-shadow(0 4px 16px rgba(255, 80, 120, 0.6));
}

.boss-intro-name {
  margin-top: 6px;
  font-family: var(--font-display);
  font-size: calc(26px * var(--ui-scale));
  letter-spacing: 0.12em;
  text-shadow: var(--shadow-text);
}

.boss-intro-title {
  margin-top: 3px;
  font-size: calc(12.5px * var(--ui-scale));
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #ff8fae;
}

.boss-intro-line {
  margin-top: 10px;
  font-size: calc(13.5px * var(--ui-scale));
  font-style: italic;
  color: var(--c-text-dim);
}

.boss-chest {
  position: absolute;
  left: 0;
  right: 0;
  margin-inline: auto;
  top: 26%;
  width: min(300px, calc(78 * var(--sw)));
  padding: 16px 20px;
  text-align: center;
  pointer-events: none;
  background: rgba(10, 8, 18, 0.88);
  border: 1px solid rgba(230, 179, 94, 0.5);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-panel), 0 0 36px rgba(230, 179, 94, 0.3);
  animation: fadeInUp 0.5s var(--ease-out) both;
}

.chest-icon {
  font-size: calc(34px * var(--ui-scale));
  animation: floatBob 2s ease-in-out infinite;
}

.chest-title {
  margin: 4px 0 8px;
  font-family: var(--font-display);
  font-size: calc(17px * var(--ui-scale));
  letter-spacing: 0.14em;
  color: var(--c-gold);
}

.chest-row {
  font-size: calc(13px * var(--ui-scale));
  color: var(--c-text-dim);
  line-height: 1.7;
}

/* --------------------------------------------------------- mode groups --
 * Eighteen modes need structure: three labelled groups, with locked entries
 * left visible so the player can see what they are working toward.
 * ------------------------------------------------------------------------ */
/* Eighteen modes in three groups. The label sits on the same line as its
   chips so the block stays short enough to share page 1 with the realms. */
.mode-groups {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 10px;
}

.mode-group {
  display: flex;
  align-items: baseline;
  gap: 12px;
}

.mode-group-title {
  flex: 0 0 84px;
  text-align: right;
  margin-bottom: 0;
  font-size: calc(10.5px * var(--ui-scale));
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--c-text-faint);
}

.mode-tabs {
  flex: 1;
  flex-wrap: wrap;
  justify-content: flex-start;
  row-gap: 4px;
}

.tab.locked {
  opacity: 0.42;
  cursor: not-allowed;
  filter: grayscale(0.7);
}

.tab.locked:hover {
  transform: none;
  border-color: var(--c-panel-border);
}

/* ------------------------------------------------- themes & power shop --
 * Theme cards preview their own palette rather than describing it, and the
 * powers tab carries the nine-slot loadout editor.
 * ------------------------------------------------------------------------ */
.theme-swatch {
  display: flex;
  gap: 5px;
  margin: 8px 0 10px;
}

.theme-swatch span {
  flex: 1;
  height: 16px;
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.16);
}

.theme-card.equipped,
.power-card.equipped {
  border-color: var(--theme-accent, var(--c-accent));
  box-shadow: 0 0 16px color-mix(in srgb, var(--theme-accent, var(--c-accent)) 45%, transparent);
}

.shop-locked {
  padding: 7px 12px;
  font-size: calc(12.5px * var(--ui-scale));
  color: var(--c-text-faint);
  text-align: center;
}

.shop-card.locked {
  opacity: 0.72;
}

/* ------------------------------------------------------------ power shop */
.power-tier {
  margin-bottom: 16px;
}

.power-tier-title {
  margin-bottom: 8px;
  font-size: calc(11.5px * var(--ui-scale));
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-text-faint);
}

.power-card {
  border-left: 3px solid var(--power-color, var(--c-accent));
}

.power-stats {
  margin: 6px 0 9px;
  font-size: calc(11.5px * var(--ui-scale));
  color: var(--c-text-dim);
  font-family: var(--font-mono);
}

.power-card-actions {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
}

/* ---------------------------------------------------------- loadout row */
.loadout-row {
  margin-bottom: 16px;
  padding: 12px 14px;
  background: var(--c-panel-inner);
  border: 1px solid var(--c-panel-border);
  border-radius: var(--radius-md);
}

.loadout-title {
  margin-bottom: 9px;
  font-size: calc(11.5px * var(--ui-scale));
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-text-faint);
}

.loadout-slots {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.loadout-slot {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(46px * var(--ui-scale));
  height: calc(46px * var(--ui-scale));
  border: 2px solid color-mix(in srgb, var(--power-color, var(--c-accent)) 55%, rgba(255, 255, 255, 0.12));
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.4);
  cursor: pointer;
  transition: transform var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast);
}

.loadout-slot:hover {
  transform: translateY(-2px);
  border-color: var(--power-color, var(--c-accent));
}

.loadout-slot.picking {
  border-color: var(--c-accent);
  box-shadow: 0 0 16px var(--c-accent);
  animation: pulseSoft 0.8s infinite;
}

.slot-key {
  position: absolute;
  top: 2px;
  left: 8px;
  font-size: 9.5px;
  font-weight: 800;
  color: var(--c-text-dim);
}

.slot-icon {
  font-size: calc(18px * var(--ui-scale));
}

/* ----------------------------------------------------------- rewards --
 * Daily calendar, weekly goals, vault and milestones.
 * ---------------------------------------------------------------------- */
.section-title {
  margin: 18px 0 9px;
  font-size: calc(12px * var(--ui-scale));
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-text-faint);
}

.daily-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(88px, 1fr));
  gap: 8px;
}

.daily-cell {
  padding: 10px 6px;
  text-align: center;
  background: var(--c-panel-inner);
  border: 1px solid var(--c-panel-border);
  border-radius: var(--radius-md);
}

.daily-cell.today {
  border-color: var(--c-accent);
  box-shadow: var(--shadow-glow-accent);
}

.daily-cell.claimed {
  opacity: 0.45;
}

.daily-day {
  font-size: calc(10px * var(--ui-scale));
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-text-faint);
}

.daily-icon {
  font-size: calc(24px * var(--ui-scale));
  margin: 3px 0;
}

.daily-label {
  font-size: calc(10.5px * var(--ui-scale));
  color: var(--c-text-dim);
  line-height: 1.3;
}

/* ------------------------------------------------------------ goal rows */
.goal-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.goal-row {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 13px;
  background: var(--c-panel-inner);
  border: 1px solid var(--c-panel-border);
  border-radius: var(--radius-md);
}

.goal-row.done {
  border-color: color-mix(in srgb, var(--c-accent) 55%, transparent);
}

.goal-icon {
  font-size: calc(20px * var(--ui-scale));
  flex-shrink: 0;
}

.goal-body {
  flex: 1;
  min-width: 0;
}

.goal-label {
  font-size: calc(13px * var(--ui-scale));
  font-weight: 600;
}

.goal-bar {
  height: 6px;
  margin: 5px 0 4px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.09);
  overflow: hidden;
}

.goal-fill {
  height: 100%;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--c-accent), color-mix(in srgb, var(--c-accent) 55%, #fff));
  transition: width var(--t-med) var(--ease-out);
}

.goal-meta {
  font-size: calc(11px * var(--ui-scale));
  color: var(--c-text-faint);
  font-family: var(--font-mono);
}

.goal-done {
  font-size: calc(18px * var(--ui-scale));
  color: var(--c-accent);
}

/* ---------------------------------------------------------------- vault */
.vault-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
}

.vault-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 14px 10px;
  text-align: center;
  background: var(--c-panel-inner);
  border: 1px solid var(--c-panel-border);
  border-radius: var(--radius-md);
}

.vault-icon {
  font-size: calc(30px * var(--ui-scale));
}

.vault-name {
  font-size: calc(12.5px * var(--ui-scale));
  font-weight: 700;
}

.vault-hint {
  font-size: calc(10.5px * var(--ui-scale));
  color: var(--c-text-faint);
}

.loot-strip {
  margin-top: 10px;
  padding: 10px 14px;
  text-align: center;
  font-size: calc(13px * var(--ui-scale));
  background: var(--c-accent-soft);
  border: 1px solid var(--c-accent);
  border-radius: var(--radius-md);
  animation: fadeInUp 0.4s var(--ease-out) both;
}

/* ------------------------------------------------------ mobile additions --
 * Ability wheel, hold-to-charge ring and tablet sizing. All driven by
 * --touch-scale so one setting resizes the whole control surface.
 * ------------------------------------------------------------------------ */

/* Tablets get roomier controls without a second layout */
body.tablet {
  --touch-scale: 1.25;
}

/* Hold-to-charge: a ring on the aim pad that fills as the bow is drawn */
.charge-ring {
  position: absolute;
  right: calc(16 * var(--sw));
  bottom: calc(26 * var(--sh));
  width: calc(74px * var(--touch-scale, 1));
  height: calc(74px * var(--touch-scale, 1));
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  background: conic-gradient(
    from -90deg,
    var(--c-accent) 0 calc(var(--charge, 0) * 360deg),
    rgba(255, 255, 255, 0.1) calc(var(--charge, 0) * 360deg) 360deg);
  mask: radial-gradient(circle, transparent 58%, #000 60%);
  -webkit-mask: radial-gradient(circle, transparent 58%, #000 60%);
  transition: opacity 0.12s;
}

.charge-ring.drawing { opacity: 1; }

.charge-ring.full {
  box-shadow: 0 0 22px var(--c-accent);
  animation: pulseSoft 0.5s infinite;
}

/* ---------------------------------------------------------- ability wheel */
.ability-wheel {
  position: absolute;
  inset: 0;
  pointer-events: auto;
  background: rgba(6, 5, 14, 0.62);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  animation: fadeIn 0.18s ease both;
  z-index: 5;
}

.wheel-item {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: calc(60px * var(--touch-scale, 1));
  height: calc(60px * var(--touch-scale, 1));
  margin: calc(-30px * var(--touch-scale, 1)) 0 0 calc(-30px * var(--touch-scale, 1));
  border-radius: 50%;
  background: rgba(10, 8, 20, 0.9);
  border: 2px solid color-mix(in srgb, var(--power-color, var(--c-accent)) 55%, rgba(255, 255, 255, 0.16));
  touch-action: none;
  animation: fadeInUp 0.22s var(--ease-out) both;
}

.wheel-item.ready {
  border-color: var(--power-color, var(--c-accent));
  box-shadow: 0 0 16px color-mix(in srgb, var(--power-color, var(--c-accent)) 70%, transparent);
}

.wheel-item:not(.ready) {
  opacity: 0.45;
  filter: grayscale(0.8);
}

.wheel-icon {
  font-size: calc(22px * var(--touch-scale, 1));
}

.wheel-key {
  font-size: calc(9.5px * var(--touch-scale, 1));
  font-weight: 800;
  color: var(--c-text-dim);
}

.wheel-close {
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(52px * var(--touch-scale, 1));
  height: calc(52px * var(--touch-scale, 1));
  margin: calc(-26px * var(--touch-scale, 1)) 0 0 calc(-26px * var(--touch-scale, 1));
  border-radius: 50%;
  font-size: calc(20px * var(--touch-scale, 1));
  color: var(--c-text-dim);
  background: rgba(10, 8, 20, 0.92);
  border: 2px solid var(--c-panel-border);
}

.wheel-btn {
  border-color: var(--c-accent);
  color: var(--c-accent);
}

/* Players who turn the wheel off lose the button too */
#touch-controls.no-wheel .wheel-btn,
#touch-controls.no-wheel .ability-wheel {
  display: none;
}

/* ============================================================================
 * THE MAIN MENU
 *
 * One screen holds everything: an animated geometric backdrop, a hero header
 * with live currencies, a straight-to-play button, and a tab rail whose body
 * hosts what used to be six separate screens.
 * ==========================================================================*/
.menu-screen {
  position: absolute;
  inset: 0;
  display: block;
  padding: 0;
  overflow: hidden;
  background: none;
  backdrop-filter: none;
}

/* A fixed rectangle, never a scroller: a compact title bar over two columns,
   the left one holding navigation and the right the current tab's content. */
.menu-shell {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 12px;
  height: 100%;
  padding: 16px clamp(12px, calc(2 * var(--sw)), 28px) 14px;
  overflow: hidden;
}

.menu-body {
  display: flex;
  align-items: stretch;
  gap: 16px;
  flex: 1;
  min-height: 0;          /* so the columns clip instead of stretching the shell */
}

.menu-side {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  width: 336px;
  flex: 0 0 336px;
  min-height: 0;
}

.menu-side-foot {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  margin-top: auto;       /* unlock + event trackers sit against the bottom edge */
  min-width: 0;
  overflow: hidden;
}

/* Nothing in the side column may spill into the content rectangle. */
.menu-side > *,
.menu-side-foot > * {
  max-width: 100%;
}

.menu-play {
  width: 100%;
  min-width: 0;
}

/* ------------------------------------------------------------------ hero
 * A title bar, not a splash: the whole menu has to fit above the fold, so the
 * title, tagline and currencies share one 52px row across the top.
 * ------------------------------------------------------------------------ */
.menu-hero {
  display: flex;
  align-items: center;
  gap: 18px;
  flex: 0 0 auto;
  animation: menuHeroIn 0.8s var(--ease-out) both;
}

.game-title {
  display: flex;
  align-items: baseline;
  gap: 0.32em;
  font-family: var(--font-display);
  font-size: clamp(22px, calc(3.2 * var(--sw)), 40px);
  letter-spacing: 0.14em;
  line-height: 1.02;
  white-space: nowrap;
}

.menu-hero .game-subtitle {
  flex: 1;
  margin: 0;
  text-align: left;
}

.menu-hero .menu-currency {
  margin: 0;
  flex: 0 0 auto;
}

/* Each word arrives on its own beat, then breathes */
.title-word {
  display: inline-block;
  text-shadow:
    0 2px 0 rgba(0, 0, 0, 0.5),
    0 6px 16px rgba(0, 0, 0, 0.8),
    0 14px 44px rgba(0, 0, 0, 0.7);
  animation: titleDrop 0.9s var(--ease-bounce) both, titleFloat 5.5s ease-in-out 1s infinite;
}

.title-word:nth-child(2) {
  animation-delay: 0.14s, 1.3s;
}

.title-accent {
  color: var(--c-accent);
  text-shadow:
    0 2px 0 rgba(0, 0, 0, 0.5),
    0 0 18px color-mix(in srgb, var(--c-accent) 75%, transparent),
    0 0 52px color-mix(in srgb, var(--c-accent) 45%, transparent),
    0 12px 40px rgba(0, 0, 0, 0.75);
  animation: titleDrop 0.9s var(--ease-bounce) 0.14s both,
    titleFloat 5.5s ease-in-out 1.3s infinite,
    accentPulse 3.6s ease-in-out infinite;
}

.game-subtitle {
  margin-top: 8px;
  color: var(--c-text-dim);
  font-size: clamp(11px, calc(1.6 * var(--sw)), 15px);
  letter-spacing: 0.26em;
  text-transform: uppercase;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.9);
  animation: fadeInUp 0.9s var(--ease-out) 0.3s both;
}

/* ------------------------------------------------------------ currencies */
.menu-currency {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
  animation: fadeInUp 0.9s var(--ease-out) 0.42s both;
}

.cur-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 13px;
  font-size: calc(13px * var(--ui-scale));
  border-radius: 99px;
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0) 60%),
    rgba(10, 8, 20, 0.62);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow:
    0 4px 14px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.cur-chip b { font-weight: 800; letter-spacing: 0.03em; }
.cur-coins { border-color: rgba(230, 179, 94, 0.42); box-shadow: 0 4px 14px rgba(0,0,0,0.5), 0 0 16px rgba(230, 179, 94, 0.22); }
.cur-gems { border-color: rgba(120, 200, 255, 0.42); box-shadow: 0 4px 14px rgba(0,0,0,0.5), 0 0 16px rgba(120, 200, 255, 0.22); }
.cur-level { border-color: rgba(185, 142, 255, 0.42); }
.cur-stars { border-color: rgba(255, 214, 110, 0.42); }

/* ------------------------------------------------------------ play button */
.menu-play {
  position: relative;
  min-width: min(360px, calc(82 * var(--sw)));
  letter-spacing: 0.22em;
  font-weight: 800;
  box-shadow:
    0 10px 30px rgba(0, 0, 0, 0.6),
    0 0 26px color-mix(in srgb, var(--c-accent) 55%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
  animation: fadeInUp 0.8s var(--ease-out) 0.5s both, playPulse 2.8s ease-in-out 1.4s infinite;
}

.menu-play:hover {
  box-shadow:
    0 14px 38px rgba(0, 0, 0, 0.65),
    0 0 44px color-mix(in srgb, var(--c-accent) 85%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.24);
}

/* -------------------------------------------------------------- tab rail */
/* A vertical rail down the left column: one tab per row, full width, so the
   labels read as a list rather than a wrapping ribbon. */
.menu-rail {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  animation: fadeInUp 0.8s var(--ease-out) 0.58s both;
}

.rail-btn {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 16px;
  font-size: calc(13.5px * var(--ui-scale));
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--c-text-dim);
  border-radius: var(--radius-md);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02));
  border: 1px solid var(--c-panel-border);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  cursor: pointer;
  transition: transform var(--t-fast) var(--ease-out), color var(--t-fast),
    border-color var(--t-fast), box-shadow var(--t-fast);
  animation: railIn 0.5s var(--ease-out) both;
  animation-delay: calc(0.62s + var(--i) * 0.055s);
}

.rail-btn:hover {
  transform: translateY(-3px);
  color: var(--c-text);
  border-color: color-mix(in srgb, var(--c-accent) 60%, transparent);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.55), 0 0 20px color-mix(in srgb, var(--c-accent) 40%, transparent);
}

.rail-btn.active {
  color: var(--c-text);
  border-color: var(--c-accent);
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--c-accent) 26%, transparent),
    color-mix(in srgb, var(--c-accent) 8%, transparent));
  box-shadow:
    0 8px 24px rgba(0, 0, 0, 0.55),
    0 0 26px color-mix(in srgb, var(--c-accent) 55%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.16);
}

/* Underline that slides in on the active tab */
.rail-btn.active::after {
  content: '';
  position: absolute;
  left: 14%;
  right: 14%;
  bottom: -1px;
  height: 2px;
  border-radius: 2px;
  background: var(--c-accent);
  box-shadow: 0 0 10px var(--c-accent);
  animation: railUnderline 0.35s var(--ease-out) both;
}

.rail-icon { font-size: calc(16px * var(--ui-scale)); }

.rail-badge {
  min-width: 18px;
  padding: 1px 6px;
  font-size: 10.5px;
  font-weight: 800;
  color: #100a04;
  background: var(--c-gold);
  border-radius: 99px;
  box-shadow: 0 0 12px color-mix(in srgb, var(--c-gold) 75%, transparent);
  animation: badgePop 0.4s var(--ease-bounce) both, badgeGlow 2s ease-in-out infinite;
}

/* --------------------------------------------------------------- tab body
 * Embedded screens shed their standalone panel chrome and back rows — inside
 * the menu the rail IS the navigation.
 * ---------------------------------------------------------------------- */
/* The content rectangle. It never scrolls — `paginate()` in ui.js cuts what
   does not fit into pages and adds the pager bar at the bottom. */
.menu-tab-body {
  position: relative;
  flex: 1;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  animation: tabBodyIn 0.4s var(--ease-out) both;
}

/* The pager bar's own strip, reserved as padding so the content box shrinks by
   exactly the space the bar occupies. */
.menu-tab-body.paged,
.panel.paged {
  padding-bottom: 40px;
}

/* The bar is a strip across the foot of the panel, so it must not swallow
   clicks meant for whatever sits above it — only its two arrows are live. */
.pager {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  pointer-events: none;
}

.pager-btn {
  pointer-events: auto;
}

.pager-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 26px;
  font-size: 18px;
  font-weight: 800;
  line-height: 1;
  color: var(--c-text);
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background var(--t-fast), border-color var(--t-fast);
}

.pager-btn:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.14);
  border-color: var(--c-accent);
}

.pager-btn:disabled {
  opacity: 0.3;
  cursor: default;
}

.pager-count {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--c-text-dim);
  font-variant-numeric: tabular-nums;
}

.menu-embedded {
  position: static;
  inset: auto;
  display: block;
  /* Full height, so the panel inside can resolve its own `height: 100%`
     against the fixed tab-body rectangle instead of growing to its content. */
  height: 100%;
  padding: 0;
  overflow: visible;
  background: none;
  backdrop-filter: none;
  animation: none;
}

/* Sizes to its content and lets the tab body scroll it, rather than being
   clipped to the rectangle the way the pager era needed. */
.menu-tab-body .panel {
  width: 100%;
  height: auto;
  min-height: 100%;
  max-height: none;
  overflow: visible;
  animation: none;
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0) 38%),
    rgba(12, 10, 24, 0.72);
  box-shadow:
    0 18px 50px rgba(0, 0, 0, 0.62),
    0 0 0 1px rgba(255, 255, 255, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

/* The rail replaces per-screen back buttons */
.menu-tab-body .back-row {
  display: none;
}

.menu-tab-body .panel-title {
  display: none;
}

/* The Play tab's own title is worth keeping */
.menu-tab-body.tab-play .panel-title {
  display: block;
}

/* ============================================================================
 * MENU BACKDROP — animated geometry
 *
 * Three drifting colour glows, a slow parallax grid, a sweeping scanline, and
 * a field of rotating hexagons, triangles, rings, diamonds and squares. Every
 * element uses transform/opacity only, so the whole backdrop is composited on
 * the GPU and costs nothing measurable.
 * ==========================================================================*/
.menu-backdrop {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(20, 16, 44, 0.55), transparent 60%),
    linear-gradient(180deg, rgba(8, 6, 16, 0.35) 0%, rgba(8, 6, 16, 0.82) 100%);
}

/* ------------------------------------------------------------- soft glows */
.mb-glow {
  position: absolute;
  width: 62vmax;
  height: 62vmax;
  border-radius: 50%;
  filter: blur(70px);
  opacity: 0.5;
  mix-blend-mode: screen;
}

.mb-glow-a {
  left: -16vmax;
  top: -18vmax;
  background: radial-gradient(circle, color-mix(in srgb, var(--c-accent) 62%, transparent), transparent 66%);
  animation: glowDrift 26s ease-in-out infinite;
}

.mb-glow-b {
  right: -20vmax;
  top: 8vmax;
  background: radial-gradient(circle, color-mix(in srgb, var(--c-arcane) 58%, transparent), transparent 66%);
  animation: glowDrift 34s ease-in-out -9s infinite reverse;
}

.mb-glow-c {
  left: 26vmax;
  bottom: -30vmax;
  background: radial-gradient(circle, color-mix(in srgb, var(--c-gold) 44%, transparent), transparent 66%);
  animation: glowDrift 40s ease-in-out -20s infinite;
}

/* -------------------------------------------------------- parallax grid */
.mb-grid {
  position: absolute;
  inset: -20%;
  opacity: 0.16;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.35) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.35) 1px, transparent 1px);
  background-size: 74px 74px;
  mask-image: radial-gradient(ellipse at 50% 40%, #000 10%, transparent 72%);
  -webkit-mask-image: radial-gradient(ellipse at 50% 40%, #000 10%, transparent 72%);
  animation: gridPan 44s linear infinite;
}

/* ------------------------------------------------------------- scanline */
.mb-scan {
  position: absolute;
  left: 0;
  right: 0;
  height: calc(34 * var(--sh));
  background: linear-gradient(180deg,
    transparent,
    color-mix(in srgb, var(--c-accent) 9%, transparent) 45%,
    transparent);
  animation: scanSweep 11s linear infinite;
}

/* ------------------------------------------------ drifting geometry field */
.mb-shapes {
  position: absolute;
  inset: 0;
}

.mb-shape {
  position: absolute;
  left: var(--x);
  bottom: calc(-18 * var(--sh));
  width: var(--size);
  height: var(--size);
  opacity: 0;
  animation:
    shapeRise var(--dur) linear var(--delay) infinite,
    shapeSpin var(--spin) linear var(--delay) infinite;
}

/* Each geometry drawn with borders/clip-paths — no images, nothing to load */
.mb-hex {
  background: linear-gradient(150deg,
    color-mix(in srgb, var(--c-accent) 30%, transparent),
    color-mix(in srgb, var(--c-arcane) 16%, transparent));
  clip-path: polygon(25% 5%, 75% 5%, 100% 50%, 75% 95%, 25% 95%, 0% 50%);
  box-shadow: 0 0 26px color-mix(in srgb, var(--c-accent) 30%, transparent);
}

.mb-tri {
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--c-gold) 28%, transparent), transparent);
  clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
  box-shadow: 0 0 22px color-mix(in srgb, var(--c-gold) 24%, transparent);
}

.mb-ring {
  border: 2px solid color-mix(in srgb, var(--c-accent) 42%, transparent);
  border-radius: 50%;
  box-shadow:
    0 0 20px color-mix(in srgb, var(--c-accent) 30%, transparent),
    inset 0 0 18px color-mix(in srgb, var(--c-accent) 18%, transparent);
}

.mb-dia {
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--c-arcane) 32%, transparent), transparent 70%);
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  box-shadow: 0 0 24px color-mix(in srgb, var(--c-arcane) 28%, transparent);
}

.mb-sq {
  border: 2px solid color-mix(in srgb, var(--c-gold) 30%, transparent);
  border-radius: 6px;
  box-shadow: 0 0 18px color-mix(in srgb, var(--c-gold) 22%, transparent);
}

/* --------------------------------------------------------------- vignette */
.mb-vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 45%, transparent 42%, rgba(4, 3, 10, 0.72) 100%);
}

/* Players who asked for reduced motion get the look without the movement */
body.reduced-motion .mb-shape,
body.reduced-motion .mb-glow,
body.reduced-motion .mb-grid,
body.reduced-motion .mb-scan,
body.reduced-motion .title-word,
body.reduced-motion .menu-play,
body.reduced-motion .rail-badge {
  animation: none;
}

body.reduced-motion .mb-shape {
  opacity: 0.3;
  bottom: 40%;
}

/* --------------------------------------------------- reward breakdowns --
 * Itemised bonuses on the results screens, so the player can see exactly what
 * each piece of good play was worth.
 * ------------------------------------------------------------------------ */
.bonus-list {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin: 10px 0 14px;
  padding: 10px 12px;
  background: var(--c-panel-inner);
  border: 1px solid var(--c-panel-border);
  border-radius: var(--radius-md);
}

.bonus-row {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: calc(12.5px * var(--ui-scale));
  animation: fadeInUp 0.4s var(--ease-out) both;
}

.bonus-row:nth-child(2) { animation-delay: 0.06s; }
.bonus-row:nth-child(3) { animation-delay: 0.12s; }
.bonus-row:nth-child(4) { animation-delay: 0.18s; }
.bonus-row:nth-child(5) { animation-delay: 0.24s; }

.bonus-icon { font-size: calc(15px * var(--ui-scale)); }
.bonus-name { flex: 1; color: var(--c-text-dim); }

.bonus-pay {
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--c-gold);
}

/* ------------------------------------------------------- kill rewards --
 * The in-world bonuses, listed so a player knows what to aim for.
 * ------------------------------------------------------------------------ */
.kill-reward-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 8px;
}

.kill-reward {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 11px;
  background: var(--c-panel-inner);
  border: 1px solid var(--c-panel-border);
  border-left: 3px solid var(--kr, var(--c-accent));
  border-radius: var(--radius-md);
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.35);
}

.kr-icon { font-size: calc(17px * var(--ui-scale)); }

.kr-label {
  flex: 1;
  font-size: calc(11px * var(--ui-scale));
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--kr, var(--c-accent));
}

.kr-pay {
  font-size: calc(10.5px * var(--ui-scale));
  font-family: var(--font-mono);
  color: var(--c-text-faint);
  white-space: nowrap;
}

/* --------------------------------------------------- realm palettes -----
 * Colour choices for the battlefield, previewed with their real sky gradient
 * rather than described.
 * ------------------------------------------------------------------------ */
.palette-picker {
  margin: 12px 0;
}

.picker-title {
  margin-bottom: 7px;
  font-size: calc(11px * var(--ui-scale));
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-text-faint);
}

.palette-row {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.palette-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 6px 8px 5px;
  border-radius: var(--radius-md);
  border: 1px solid var(--c-panel-border);
  background: var(--c-panel-inner);
  cursor: pointer;
  transition: transform var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast);
}

.palette-chip:hover {
  transform: translateY(-2px);
  border-color: var(--c-accent);
}

.palette-chip.active {
  border-color: var(--c-accent);
  box-shadow: 0 0 16px color-mix(in srgb, var(--c-accent) 55%, transparent);
}

.palette-swatch {
  width: calc(42px * var(--ui-scale));
  height: calc(24px * var(--ui-scale));
  border-radius: 5px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: inset 0 -6px 10px rgba(0, 0, 0, 0.35);
}

.palette-name {
  font-size: calc(10px * var(--ui-scale));
  letter-spacing: 0.04em;
  color: var(--c-text-dim);
  white-space: nowrap;
}

/* ----------------------------------------------------- random location -- */
.random-location {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 12px 0;
  padding: 14px 16px;
  background:
    linear-gradient(120deg, color-mix(in srgb, var(--c-arcane) 16%, transparent), transparent 60%),
    var(--c-panel-inner);
  border: 1px solid color-mix(in srgb, var(--c-arcane) 45%, transparent);
  border-radius: var(--radius-md);
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.45), 0 0 20px color-mix(in srgb, var(--c-arcane) 22%, transparent);
  cursor: pointer;
  transition: transform var(--t-fast), box-shadow var(--t-fast);
}

.random-location:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), 0 0 30px color-mix(in srgb, var(--c-arcane) 42%, transparent);
}

.rl-icon {
  font-size: calc(32px * var(--ui-scale));
  animation: floatBob 3s ease-in-out infinite;
}

.rl-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.rl-body b { font-size: calc(15px * var(--ui-scale)); }

.rl-body span {
  font-size: calc(12px * var(--ui-scale));
  color: var(--c-text-dim);
}

/* ============================================================================
 * LATEST UPGRADES
 * Everything below is additive: the existing menu, tabs, stage and pager keep
 * their layout and their rules. This adds the surfaces the new systems need,
 * plus the depth, motion and rarity language they are read through.
 * ==========================================================================*/

/* ------------------------------------------------------------ elevation --
 * Applied to the shapes that were already there, so the whole interface gains
 * altitude without a single box moving.
 * ---------------------------------------------------------------------- */
.panel {
  box-shadow: var(--elev-3), var(--sheen-top);
}

.shop-card,
.level-card,
.ach-card,
.vault-card,
.goal-row,
.skill-node {
  box-shadow: var(--elev-1), var(--sheen-top);
}

.shop-card:hover,
.level-card:hover:not(.locked) {
  box-shadow: var(--elev-2), var(--sheen-top);
}

/* --------------------------------------------------- micro-interactions --
 * The sheen sweep on .btn was excellent and stopped at buttons. Cards, rail
 * tabs and power circles now answer the pointer with the same spring.
 * ---------------------------------------------------------------------- */
.level-card,
.shop-card,
.vault-card,
.rail-btn,
.trick-card,
.arrow-chip {
  transition:
    transform var(--t-fast) var(--ease-spring),
    box-shadow var(--t-fast),
    border-color var(--t-fast),
    background var(--t-fast);
}

.level-card:hover:not(.locked),
.shop-card:hover,
.vault-card:hover,
.trick-card.found:hover {
  transform: translateY(-3px) scale(1.014);
}

.level-card:active:not(.locked),
.shop-card:active,
.rail-btn:active {
  transform: translateY(0) scale(0.985);
}

.arrow-chip:hover {
  transform: translateY(-2px) scale(1.06);
}

.rail-btn:hover {
  transform: translateX(3px);
}

/* A forged shaft is visibly not one of the twenty base types. */
.arrow-chip.fused {
  border-style: dashed;
  box-shadow: 0 0 12px var(--chip-color);
}

/* ----------------------------------------------------------- claimable --
 * One badge language everywhere: if it pulses, you can collect it now.
 * ---------------------------------------------------------------------- */
.rail-badge.pulse {
  animation: badgePop 0.4s var(--ease-bounce) both, badgePulse 2.4s ease-out 0.4s infinite;
}

/* ==================================================== BETWEEN-WAVE DRAFT */
.draft-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: radial-gradient(ellipse at center, rgba(6, 4, 14, 0.72), rgba(3, 2, 8, 0.9));
  backdrop-filter: blur(3px);
  animation: fadeIn var(--t-med) var(--ease-out) both;
}

.draft-panel {
  width: min(880px, 100%);
  padding: 18px 20px 14px;
  text-align: center;
  background: var(--c-panel);
  border: 1px solid var(--c-panel-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--elev-3), var(--sheen-top);
  animation: draftIn 0.34s var(--ease-out) both;
}

.draft-title {
  font-family: var(--font-display);
  font-size: calc(24px * var(--ui-scale));
  letter-spacing: 0.06em;
  color: var(--c-text);
  text-shadow: var(--shadow-text);
}

.draft-sub {
  margin-top: 2px;
  font-size: calc(11.5px * var(--ui-scale));
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-text-dim);
}

.boon-row {
  display: flex;
  gap: 12px;
  justify-content: center;
  margin-top: 14px;
}

.boon-card {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  max-width: 210px;
  padding: 14px 12px 12px;
  text-align: center;
  font-family: inherit;
  color: var(--c-text);
  background: linear-gradient(165deg,
    color-mix(in srgb, var(--rarity) 12%, transparent), rgba(12, 10, 22, 0.9));
  border: 1px solid color-mix(in srgb, var(--rarity) 55%, transparent);
  border-radius: var(--radius-md);
  cursor: pointer;
  box-shadow: var(--elev-2);
  animation: boonCardIn 0.36s var(--ease-out) both;
  animation-delay: calc(var(--i) * 0.07s);
  transition: transform var(--t-fast) var(--ease-spring), box-shadow var(--t-fast);
}

.boon-card:hover {
  transform: translateY(-6px) scale(1.03);
  animation: boonGlow 1.6s ease-in-out infinite;
}

.boon-card:active {
  transform: translateY(-2px) scale(0.99);
}

.boon-rarity {
  font-size: calc(9.5px * var(--ui-scale));
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--rarity);
}

.boon-icon {
  margin: 4px 0 2px;
  font-size: calc(30px * var(--ui-scale));
  filter: drop-shadow(0 3px 8px rgba(0, 0, 0, 0.6));
}

.boon-name {
  font-weight: 700;
  font-size: calc(14px * var(--ui-scale));
}

.boon-desc {
  margin-top: 4px;
  font-size: calc(11.5px * var(--ui-scale));
  line-height: 1.35;
  color: var(--c-text-dim);
}

.boon-held {
  margin-top: 6px;
  font-size: calc(10px * var(--ui-scale));
  color: var(--c-gold);
}

.boon-held-row {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 12px;
}

.boon-held-title {
  font-size: calc(10.5px * var(--ui-scale));
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-text-faint);
}

.boon-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  font-size: 13px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--c-panel-border);
  border-radius: 50%;
}

.boon-chip.rarity-rare { border-color: var(--r-rare); }
.boon-chip.rarity-epic { border-color: var(--r-epic); }

.draft-skip {
  margin-top: 10px;
}

/* ======================================================== MID-RUN VENDOR */
.vendor-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(5, 4, 12, 0.78);
  backdrop-filter: blur(3px);
  animation: fadeIn var(--t-med) var(--ease-out) both;
}

.vendor-panel {
  width: min(520px, 100%);
  padding: 16px 18px 14px;
  background: var(--c-panel);
  border: 1px solid var(--c-panel-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--elev-3), var(--sheen-top);
  animation: draftIn 0.3s var(--ease-out) both;
}

.vendor-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.vendor-title {
  font-family: var(--font-display);
  font-size: calc(19px * var(--ui-scale));
}

.vendor-coins {
  font-weight: 700;
  color: var(--c-gold);
}

.vendor-sub {
  margin-top: 2px;
  font-size: calc(11px * var(--ui-scale));
  color: var(--c-text-dim);
}

.vendor-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 12px 0;
}

.vendor-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  background: var(--c-panel-inner);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  transition: border-color var(--t-fast), transform var(--t-fast) var(--ease-spring);
}

.vendor-row:hover {
  border-color: var(--c-panel-border);
  transform: translateX(2px);
}

.vendor-row.poor {
  opacity: 0.55;
}

.vendor-icon {
  font-size: 20px;
}

.vendor-body {
  flex: 1;
  min-width: 0;
}

.vendor-name {
  font-weight: 600;
  font-size: calc(13px * var(--ui-scale));
}

.vendor-desc {
  font-size: calc(11px * var(--ui-scale));
  color: var(--c-text-dim);
}

/* ============================================================ HUD EXTRAS */
.hud-mid-left {
  position: absolute;
  top: calc(var(--hud-pad) + 108px);
  left: var(--hud-pad);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}

.hud-boons {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  max-width: 220px;
}

.hud-boon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  font-size: 12px;
  background: rgba(8, 6, 16, 0.62);
  border: 1px solid var(--r-common);
  border-radius: 50%;
  text-shadow: var(--shadow-text);
}

.hud-boon.rarity-rare { border-color: var(--r-rare); }
.hud-boon.rarity-epic { border-color: var(--r-epic); box-shadow: 0 0 8px rgba(185, 142, 255, 0.4); }

.hud-pace,
.hud-wind-tier {
  padding: 3px 9px;
  font-size: calc(11px * var(--ui-scale));
  color: var(--c-text-dim);
  background: rgba(8, 6, 16, 0.55);
  border-radius: 99px;
  text-shadow: var(--shadow-text);
}

.hud-pace.ahead {
  color: var(--c-accent);
  box-shadow: 0 0 14px var(--c-accent-soft);
}

.hud-vendor-btn {
  padding: 6px 12px;
  font-family: inherit;
  font-size: calc(12px * var(--ui-scale));
  color: var(--c-gold);
  background: rgba(20, 14, 6, 0.8);
  border: 1px solid var(--c-gold);
  border-radius: 99px;
  cursor: pointer;
  pointer-events: auto;
  animation: pulseSoft 2.2s ease-in-out infinite;
}

.hud-vendor-btn:hover {
  background: var(--c-gold-soft);
}

/* ==================================================== NEXT UNLOCK TRACKER */
.unlock-track {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 11px;
  background: rgba(10, 8, 20, 0.5);
  border: 1px solid var(--c-panel-border);
  border-radius: var(--radius-sm);
  box-shadow: var(--elev-1);
}

.unlock-icon {
  font-size: 18px;
}

.unlock-body {
  flex: 1;
  min-width: 0;
}

.unlock-name {
  font-size: calc(12px * var(--ui-scale));
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.unlock-bar {
  height: 4px;
  margin: 4px 0 3px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 99px;
  overflow: hidden;
}

.unlock-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--c-accent), var(--c-arcane));
  border-radius: 99px;
  transition: width var(--t-slow) var(--ease-out);
}

.unlock-note {
  font-size: calc(10px * var(--ui-scale));
  color: var(--c-text-dim);
}

/* ======================================================== WORLD EVENT BAR */
.event-bar {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 11px;
  background: linear-gradient(100deg,
    color-mix(in srgb, var(--ev) 20%, transparent), rgba(10, 8, 20, 0.55));
  border: 1px solid color-mix(in srgb, var(--ev) 45%, transparent);
  border-radius: var(--radius-sm);
  box-shadow: var(--elev-1);
}

.event-icon {
  font-size: 18px;
}

.event-body {
  flex: 1;
  min-width: 0;
}

.event-name {
  font-size: calc(12px * var(--ui-scale));
  font-weight: 700;
  color: var(--ev);
}

.event-desc {
  font-size: calc(10px * var(--ui-scale));
  color: var(--c-text-dim);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.event-clock {
  font-family: var(--font-mono);
  font-size: calc(10.5px * var(--ui-scale));
  color: var(--c-text-faint);
}

/* ============================================================ QUEST BOARD */
.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-top: 12px;
  font-family: var(--font-display);
  font-size: calc(15px * var(--ui-scale));
}

.section-note {
  font-family: var(--font-ui);
  font-size: calc(10.5px * var(--ui-scale));
  color: var(--c-text-faint);
}

.quest-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 6px;
}

.quest-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  background: var(--c-panel-inner);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  box-shadow: var(--elev-1);
}

.quest-row.done {
  border-color: var(--c-accent);
  box-shadow: 0 0 14px var(--c-accent-soft), var(--elev-1);
}

.quest-row.claimed {
  opacity: 0.55;
  box-shadow: none;
}

.quest-icon { font-size: 18px; }

.quest-body { flex: 1; min-width: 0; }

.quest-label {
  font-size: calc(12.5px * var(--ui-scale));
  font-weight: 600;
}

.quest-bar {
  height: 5px;
  margin: 4px 0 3px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 99px;
  overflow: hidden;
}

.quest-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--c-accent), var(--c-gold));
  border-radius: 99px;
  transition: width var(--t-slow) var(--ease-out);
}

.quest-meta {
  font-size: calc(10px * var(--ui-scale));
  color: var(--c-text-dim);
}

.quest-done {
  color: var(--c-accent);
  font-size: 16px;
}

.quest-reroll {
  min-width: 34px;
}

/* ============================================================ CHEST FORGE */
.forge-row {
  display: flex;
  gap: 8px;
  margin-top: 6px;
}

.forge-slot {
  flex: 1;
  padding: 10px;
  text-align: center;
  background: var(--c-panel-inner);
  border: 1px dashed var(--c-panel-border);
  border-radius: var(--radius-sm);
  box-shadow: var(--elev-1);
}

.forge-slot.ready {
  border-style: solid;
  animation: forgeReady 1.8s ease-in-out infinite;
}

.forge-slot.empty {
  opacity: 0.5;
}

.forge-icon { font-size: 24px; }

.forge-name {
  margin: 2px 0 6px;
  font-size: calc(11.5px * var(--ui-scale));
  font-weight: 600;
}

.forge-timer {
  font-family: var(--font-mono);
  font-size: calc(12px * var(--ui-scale));
  color: var(--c-gold);
}

.forge-note {
  font-size: calc(10.5px * var(--ui-scale));
  color: var(--c-text-faint);
}

/* ============================================================ REALM FORGE */
.seed-forge {
  margin-top: 10px;
  padding: 10px 12px;
  background: var(--c-panel-inner);
  border: 1px solid var(--c-panel-border);
  border-radius: var(--radius-md);
  box-shadow: var(--elev-1);
}

.seed-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  font-weight: 600;
  font-size: calc(13px * var(--ui-scale));
}

.seed-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  flex-wrap: wrap;
}

.seed-input {
  width: 108px;
  padding: 7px 10px;
  font-family: var(--font-mono);
  font-size: calc(14px * var(--ui-scale));
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-text);
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid var(--c-panel-border);
  border-radius: var(--radius-sm);
}

.seed-input.bad {
  border-color: var(--c-danger);
  animation: seedBad 0.32s ease-out;
}

.seed-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.seed-chip {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--c-panel-border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.seed-code {
  padding: 4px 9px;
  font-family: var(--font-mono);
  font-size: calc(12px * var(--ui-scale));
  letter-spacing: 0.12em;
  color: var(--c-accent);
  background: rgba(0, 0, 0, 0.3);
  border: 0;
  cursor: pointer;
}

.seed-code:hover { color: var(--c-text); background: var(--c-accent-soft); }

.seed-drop {
  padding: 4px 7px;
  color: var(--c-text-faint);
  background: transparent;
  border: 0;
  border-left: 1px solid var(--c-panel-border);
  cursor: pointer;
}

.seed-drop:hover { color: var(--c-danger); }

.seed-hint {
  margin-top: 6px;
  font-size: calc(10.5px * var(--ui-scale));
  color: var(--c-text-faint);
}

/* ============================================================ REALM MASTERY */
.level-mastery {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  margin-top: 3px;
  font-size: calc(9.5px * var(--ui-scale));
  color: var(--c-gold);
}

.mastery-pip {
  padding: 0 5px;
  background: var(--c-gold-soft);
  border-radius: 99px;
}

.mastery-bar {
  height: 3px;
  margin-top: 4px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 99px;
  overflow: hidden;
}

.mastery-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--c-gold), var(--c-accent));
  border-radius: 99px;
  transition: width var(--t-slow) var(--ease-out);
}

.mastery-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.mastery-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  background: var(--c-panel-inner);
  border-radius: var(--radius-sm);
  box-shadow: var(--elev-1);
}

.mastery-row.locked { opacity: 0.42; }

.mastery-icon { font-size: 18px; }

.mastery-body { flex: 1; min-width: 0; }

.mastery-name {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  font-size: calc(12.5px * var(--ui-scale));
  font-weight: 600;
}

.mastery-lv {
  font-size: calc(10.5px * var(--ui-scale));
  color: var(--c-gold);
}

.mastery-note {
  font-size: calc(10px * var(--ui-scale));
  color: var(--c-text-dim);
}

/* ======================================================= TRICKSHOT LEDGER */
.ledger-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.ledger-count,
.ledger-score {
  font-size: calc(11.5px * var(--ui-scale));
  color: var(--c-text-dim);
  white-space: nowrap;
}

.ledger-bar {
  flex: 1;
  height: 6px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 99px;
  overflow: hidden;
}

.ledger-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--r-common), var(--r-rare), var(--r-epic), var(--r-legendary));
  border-radius: 99px;
  transition: width var(--t-slow) var(--ease-out);
}

.trick-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 6px;
}

.trick-card {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 9px;
  background: var(--c-panel-inner);
  border: 1px solid transparent;
  border-left: 3px solid var(--rarity);
  border-radius: var(--radius-sm);
  box-shadow: var(--elev-1);
}

.trick-card.unfound {
  opacity: 0.42;
  border-left-style: dashed;
}

.trick-card.found {
  border-color: color-mix(in srgb, var(--rarity) 40%, transparent);
  border-left-color: var(--rarity);
}

.trick-icon { font-size: 17px; }

.trick-body { flex: 1; min-width: 0; }

.trick-name {
  font-size: calc(12px * var(--ui-scale));
  font-weight: 600;
  color: var(--rarity);
}

.trick-desc {
  font-size: calc(10px * var(--ui-scale));
  color: var(--c-text-dim);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.trick-count {
  font-size: calc(10.5px * var(--ui-scale));
  color: var(--c-text-faint);
}

/* ============================================================ ARROW FUSION */
.fusion-recipe {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  margin: 6px 0;
  min-height: 24px;
  font-size: calc(10.5px * var(--ui-scale));
}

.fusion-part {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  padding: 3px 7px;
  color: var(--part);
  background: color-mix(in srgb, var(--part) 14%, transparent);
  border-radius: 99px;
  white-space: nowrap;
}

.fusion-plus { color: var(--c-text-faint); }

.fusion-card {
  border-left: 3px solid var(--theme-accent);
}

.fusion-card .shop-desc {
  min-height: 2.7em;
  line-height: 1.35;
}

.victory-screen .result-panel {
  padding: 16px 20px 14px;
}

.victory-screen .menu-buttons {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 12px;
}

.victory-screen .menu-buttons .btn {
  min-width: 0;
  white-space: normal;
  line-height: 1.15;
}

.fusion-disarm { text-align: center; }

/* ============================================================ STAT DELTAS */
.stat-delta {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
}

.stat-delta b {
  color: var(--c-text-faint);
  font-weight: 600;
}

.stat-delta.up { color: var(--c-hp); }
.stat-delta.down { color: var(--c-danger); }

/* =========================================================== LOOT REVEAL */
.reveal-overlay {
  position: absolute;
  inset: 0;
  z-index: 70;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
  background: rgba(4, 3, 10, 0.8);
  backdrop-filter: blur(4px);
  animation: fadeIn 0.2s var(--ease-out) both;
}

.reveal-overlay.leaving { animation: fadeIn 0.24s var(--ease-out) reverse both; }

.reveal-card {
  width: min(360px, 86%);
  padding: 22px 20px 18px;
  text-align: center;
  background: var(--c-panel);
  border: 1px solid var(--r-common);
  border-radius: var(--radius-lg);
  box-shadow: var(--elev-3), var(--sheen-top);
  animation: draftIn 0.28s var(--ease-out) both;
}

.reveal-card.rarity-rare { border-color: var(--r-rare); box-shadow: 0 0 40px rgba(127, 180, 255, 0.22), var(--elev-3); }
.reveal-card.rarity-epic { border-color: var(--r-epic); box-shadow: 0 0 52px rgba(201, 164, 255, 0.28), var(--elev-3); }
.reveal-card.rarity-legendary { border-color: var(--r-legendary); box-shadow: 0 0 64px rgba(255, 207, 74, 0.34), var(--elev-3); }

.reveal-box {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 92px;
  height: 92px;
  font-size: 46px;
  border-radius: var(--radius-md);
  animation: revealShake 0.62s ease-in-out;
}

.reveal-box.burst { animation: revealBurst 0.5s var(--ease-bounce) forwards; }

.reveal-box.burst::after {
  content: '';
  position: absolute;
  inset: -10px;
  border: 3px solid currentColor;
  border-radius: 50%;
  color: var(--r-common);
  animation: revealRing 0.6s var(--ease-out) forwards;
}

.rarity-rare .reveal-box.burst::after { color: var(--r-rare); }
.rarity-epic .reveal-box.burst::after { color: var(--r-epic); }
.rarity-legendary .reveal-box.burst::after { color: var(--r-legendary); }

.reveal-name {
  margin-top: 6px;
  font-family: var(--font-display);
  font-size: calc(20px * var(--ui-scale));
}

.reveal-sub {
  font-size: calc(10.5px * var(--ui-scale));
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-text-dim);
}

.reveal-items {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-top: 12px;
}

.reveal-item {
  padding: 6px 10px;
  font-size: calc(13px * var(--ui-scale));
  font-weight: 600;
  background: var(--c-panel-inner);
  border-radius: var(--radius-sm);
  animation: revealItemIn 0.34s var(--ease-bounce) both;
}

.reveal-hint {
  margin-top: 12px;
  font-size: calc(10.5px * var(--ui-scale));
  color: var(--c-text-faint);
  animation: pulseSoft 1.8s ease-in-out infinite;
}

/* ======================================================== RARITY TOASTS */
.toast-body { min-width: 0; }

.toast-rare { border-color: var(--r-rare); box-shadow: 0 0 18px rgba(127, 180, 255, 0.2), var(--elev-2); }
.toast-epic { border-color: var(--r-epic); box-shadow: 0 0 22px rgba(201, 164, 255, 0.26), var(--elev-2); }
.toast-legendary {
  border-color: var(--r-legendary);
  box-shadow: 0 0 30px rgba(255, 207, 74, 0.32), var(--elev-2);
}

/* ================================================== CINEMATIC RESULTS */
.result-rows.staged .result-row {
  animation: resultRowIn 0.34s var(--ease-out) both;
}

.result-rows.staged .result-row:nth-child(1) { animation-delay: 0.06s; }
.result-rows.staged .result-row:nth-child(2) { animation-delay: 0.12s; }
.result-rows.staged .result-row:nth-child(3) { animation-delay: 0.18s; }
.result-rows.staged .result-row:nth-child(4) { animation-delay: 0.24s; }
.result-rows.staged .result-row:nth-child(5) { animation-delay: 0.30s; }
.result-rows.staged .result-row:nth-child(6) { animation-delay: 0.36s; }
.result-rows.staged .result-row:nth-child(7) { animation-delay: 0.42s; }

.victory-mastery {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  padding: 9px 11px;
  background: var(--c-gold-soft);
  border: 1px solid rgba(230, 179, 94, 0.35);
  border-radius: var(--radius-sm);
  animation: fadeInUp 0.4s var(--ease-out) 0.4s both;
}

.vm-icon { font-size: 20px; }
.vm-body { flex: 1; min-width: 0; }

.vm-title {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: calc(13px * var(--ui-scale));
  font-weight: 700;
}

.vm-up {
  padding: 1px 6px;
  font-size: calc(9.5px * var(--ui-scale));
  letter-spacing: 0.12em;
  color: var(--c-bg);
  background: var(--c-gold);
  border-radius: 99px;
}

.vm-note {
  margin-top: 3px;
  font-size: calc(10.5px * var(--ui-scale));
  color: var(--c-text-dim);
}

.result-boons {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 10px;
}

.rb-label {
  font-size: calc(10.5px * var(--ui-scale));
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-text-faint);
}

.result-seed {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  font-size: calc(11px * var(--ui-scale));
  color: var(--c-text-dim);
}

.near-miss {
  margin-top: 10px;
  padding: 7px 11px;
  text-align: center;
  font-size: calc(12.5px * var(--ui-scale));
  font-weight: 600;
  color: var(--c-gold);
  background: var(--c-gold-soft);
  border-radius: var(--radius-sm);
  animation: pulseSoft 2s ease-in-out infinite;
}

.nemesis-card {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  padding: 9px 11px;
  background: var(--c-danger-soft);
  border: 1px solid rgba(230, 94, 106, 0.4);
  border-radius: var(--radius-sm);
  animation: nemesisIn 0.4s var(--ease-out) 0.3s both;
}

.nem-icon { font-size: 20px; }
.nem-body { flex: 1; min-width: 0; }

.nem-name {
  font-family: var(--font-display);
  font-size: calc(15px * var(--ui-scale));
  color: var(--c-danger);
}

.nem-note {
  font-size: calc(10.5px * var(--ui-scale));
  color: var(--c-text-dim);
}

/* =============================================================== PAGER */
.pager-dots {
  display: flex;
  align-items: center;
  gap: 5px;
}

.pager-dot {
  width: 7px;
  height: 7px;
  padding: 0;
  background: rgba(255, 255, 255, 0.2);
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  transition: background var(--t-fast), transform var(--t-fast) var(--ease-spring);
}

.pager-dot:hover { transform: scale(1.35); }

.pager-dot.on {
  background: var(--c-accent);
  box-shadow: 0 0 8px var(--c-accent-soft);
  transform: scale(1.25);
}

.paged > .panel.page-in,
.menu-tab-body.paged .panel.page-in {
  animation: pageIn 0.24s var(--ease-out);
}

/* ======================================================== LOADING TIPS */
.loading-tip {
  max-width: 520px;
  margin: 12px auto 0;
  min-height: 2.6em;
  font-size: 13px;
  line-height: 1.45;
  color: var(--c-text-dim);
  opacity: 0;
}

.loading-tip.tip-in { animation: tipIn 0.45s var(--ease-out) forwards; }

/* ============================================================================
 * HUD RELAYOUT
 * The quiver moves under the vitals in the top-left; the powers rail moves
 * under the minimap in the top-right and sheds every word it was carrying.
 * ==========================================================================*/

/* The clearance under the minimap already exists in game.css as a padding on
   this column (380px * 0.13 + 30px); adding a `top` offset here as well would
   push the rail a second minimap's height down the screen. */

.powers-box {
  gap: calc(4px * var(--ui-scale));
  padding: calc(4px * var(--ui-scale)) calc(7px * var(--ui-scale));
  margin-bottom: 4px;
}

.power-item {
  gap: 2px;
}

.power-circle {
  width: calc(26px * var(--ui-scale));
  height: calc(26px * var(--ui-scale));
  border-width: 1.5px;
}

.power-icon {
  font-size: calc(11px * var(--ui-scale));
}

.power-key {
  font-size: calc(8px * var(--ui-scale));
}

.power-lock {
  font-size: calc(11px * var(--ui-scale));
}

/* Charge pips shrink with the circles rather than dominating them. */
.power-pips {
  gap: 2px;
}

.power-pips .ppip {
  width: 3px;
  height: 3px;
}

/* ---------------------------------------------------------- quiver strip */
.hud-top-left.hud-col {
  gap: 6px;
}

.arrow-selector {
  gap: 3px;
  flex-wrap: nowrap;
  max-width: none;
  pointer-events: auto;
}

.arrow-chip {
  width: calc(24px * var(--ui-scale));
  height: calc(24px * var(--ui-scale));
  border-width: 1px;
  border-radius: var(--radius-sm);
}

.arrow-chip:hover {
  transform: translateY(-2px);
}

.arrow-chip.active {
  transform: translateY(-2px);
}

.chip-icon {
  font-size: calc(11px * var(--ui-scale));
}

.chip-mana {
  font-size: 8px;
}

/* The rest of the quiver, so a ten-chip cap never reads as a loss. */
.arrow-more {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: calc(22px * var(--ui-scale));
  height: calc(24px * var(--ui-scale));
  padding: 0 4px;
  font-size: 9px;
  font-weight: 700;
  color: var(--c-text-faint);
  background: rgba(10, 8, 20, 0.5);
  border: 1px dashed rgba(255, 255, 255, 0.14);
  border-radius: var(--radius-sm);
}

/* ============================================================================
 * SCROLLING MENUS
 * Pagination is gone. Panels are full height and scroll behind a bar styled
 * to match them — a track cut into the panel, a gradient thumb in the accent
 * colour, and a glow on hover. Nothing here is the operating system's bar.
 * ==========================================================================*/

.panel {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.panel-head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
}

.panel-head .panel-title {
  flex: 1;
  margin: 0;
}

.panel-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  /* Room for the bar so content never sits under it. */
  padding-right: 10px;
  /* The panel fades its content into the edges rather than cutting it. */
  mask-image: linear-gradient(to bottom, transparent 0, #000 10px,
    #000 calc(100% - 12px), transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 10px,
    #000 calc(100% - 12px), transparent 100%);
}

/* ------------------------------------------------------- the scrollbar ---
 * The native bar is hidden, never removed: the wheel, trackpad, keyboard and
 * touch all keep scrolling the element exactly as the browser does it. What
 * the player sees is drawn by attachScrollbar() in js/ui.js, so it looks the
 * same in every browser instead of being at the mercy of overlay-scrollbar
 * builds and Chrome's scrollbar-width/::-webkit-scrollbar conflict.
 * ---------------------------------------------------------------------- */
.scroll-styled {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.scroll-styled::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.sv-rail {
  position: absolute;
  top: 10px;
  right: 4px;
  bottom: 10px;
  width: 10px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.07)),
    rgba(4, 3, 10, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 99px;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.5);
  cursor: pointer;
  z-index: 5;
  opacity: 0.9;
  transition: opacity var(--t-med);
}

/* Nothing to scroll — the rail gets out of the way rather than sitting there
   as a permanent empty groove. */
.sv-rail.idle {
  opacity: 0;
  pointer-events: none;
}

.sv-thumb {
  position: absolute;
  left: 1px;
  right: 1px;
  top: 0;
  min-height: 28px;
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--c-accent) 92%, white),
      var(--c-accent) 42%,
      color-mix(in srgb, var(--c-arcane) 65%, var(--c-accent)));
  border-radius: 99px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    inset 0 -1px 0 rgba(0, 0, 0, 0.3),
    0 0 10px color-mix(in srgb, var(--c-accent) 45%, transparent);
  cursor: grab;
  transition: box-shadow var(--t-fast), filter var(--t-fast);
}

.sv-thumb:hover {
  filter: brightness(1.14);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    0 0 18px color-mix(in srgb, var(--c-accent) 85%, transparent);
}

.sv-rail.dragging .sv-thumb {
  cursor: grabbing;
  background: linear-gradient(180deg, var(--c-gold), var(--c-accent));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    0 0 22px color-mix(in srgb, var(--c-gold) 70%, transparent);
}

/* A grip, so the thumb reads as a handle rather than a bar. */
.sv-thumb::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 4px;
  height: 10px;
  transform: translate(-50%, -50%);
  background:
    linear-gradient(180deg,
      rgba(4, 3, 10, 0.4) 0 1.5px, transparent 1.5px 4px,
      rgba(4, 3, 10, 0.4) 4px 5.5px, transparent 5.5px 8px,
      rgba(4, 3, 10, 0.4) 8px 9.5px);
  border-radius: 2px;
  pointer-events: none;
}

/* Menus that must never scroll say so, and mean it. */
.no-scroll,
.no-scroll .panel-scroll {
  overflow: visible !important;
  mask-image: none;
  -webkit-mask-image: none;
  padding-right: 0;
}

/* ------------------------------------------------------------ back arrow */
.back-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  padding: 0 0 3px;
  font-family: var(--font-display);
  font-size: 24px;
  line-height: 1;
  color: var(--c-text-dim);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0)),
    rgba(10, 8, 20, 0.55);
  border: 1px solid var(--c-panel-border);
  border-radius: 50%;
  cursor: pointer;
  box-shadow: var(--elev-1);
  transition:
    transform var(--t-fast) var(--ease-spring),
    color var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast);
}

.back-arrow:hover {
  color: var(--c-accent);
  border-color: var(--c-accent);
  transform: translateX(-3px);
  box-shadow: var(--elev-2), 0 0 14px var(--c-accent-soft);
}

.back-arrow:active {
  transform: translateX(-1px) scale(0.94);
}

.menu-hero .back-arrow {
  margin-right: 2px;
}

/* The menu tab body scrolls on the same bar. */
.menu-tab-body {
  overflow-y: auto;
  overflow-x: hidden;
}

/* Inside the one menu the tab body owns the scrolling, so the embedded panel
   must not open a second scroller inside the first — and the hero already
   carries the back arrow, so the panel's own is redundant there. */
.menu-embedded .panel {
  display: block;
}

.menu-embedded .panel-scroll {
  overflow: visible;
  min-height: 0;
  padding-right: 0;
  mask-image: none;
  -webkit-mask-image: none;
}

.menu-embedded .panel-head .back-arrow {
  display: none;
}

.menu-embedded .panel-head {
  gap: 0;
}

/* ============================================================================
 * RESULT SCREENS
 * Defeat and Victory are one wide rectangle laid out in columns, never a
 * scroller: everything a player might press after a run — retry, revive,
 * respawn, next battlefield, the menu — has to be reachable without hunting.
 * ==========================================================================*/
.result-screen .panel.result-panel {
  width: min(1120px, calc(96 * var(--sw)));
  max-height: calc(96 * var(--sh));
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  grid-auto-rows: min-content;
  align-content: start;
  column-gap: 22px;
  row-gap: 8px;
  overflow: hidden;
}

/* Title and stars span the full width; everything else flows into columns. */
.result-panel > .panel-title,
.result-panel > .victory-stars,
.result-panel > .gameover-reason,
.result-panel > .gameover-mode,
.result-panel > .menu-buttons {
  grid-column: 1 / -1;
}

.result-panel > .panel-title {
  margin-bottom: 4px;
  font-size: calc(clamp(20px, calc(3.2 * var(--sw)), 28px) * var(--ui-scale));
}

.result-panel .result-rows {
  margin: 0;
}

.result-panel .result-row {
  padding: 5px 10px;
  font-size: calc(12.5px * var(--ui-scale));
}

.result-panel .bonus-list {
  max-height: 132px;
  overflow: hidden;
}

.result-panel .menu-buttons {
  margin-top: 6px;
}

.result-panel .victory-stars {
  margin: 0;
}

.result-panel .nemesis-card,
.result-panel .near-miss,
.result-panel .victory-mastery,
.result-panel .result-boons,
.result-panel .result-seed {
  margin-top: 4px;
}

/* ---------------------------------------------- Choose Your Battlefield --
 * The densest screen in the game. Everything here is a size reduction: the
 * title, the mode rows, the difficulty chips and the realm cards, so the whole
 * board reads at a glance instead of filling the rectangle twice over.
 * ---------------------------------------------------------------------- */
.menu-tab-body.tab-play .panel-title {
  margin-bottom: 10px;
  font-size: calc(clamp(16px, calc(2.1 * var(--sw)), 22px) * var(--ui-scale));
  letter-spacing: 0.08em;
}

.tab-play .mode-group-title {
  font-size: calc(9.5px * var(--ui-scale));
}

.tab-play .mode-tabs .tab,
.tab-play .diff-chip {
  padding: calc(4px * var(--ui-scale)) calc(9px * var(--ui-scale));
  font-size: calc(11px * var(--ui-scale));
}

.tab-play .mode-groups {
  gap: 6px;
}

.tab-play .level-grid {
  grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
  gap: 7px;
}

.tab-play .level-card {
  padding: 8px 6px;
}

.tab-play .level-icon {
  font-size: calc(19px * var(--ui-scale));
}

.tab-play .level-name {
  font-size: calc(10.5px * var(--ui-scale));
}

.tab-play .level-score,
.tab-play .level-boss-tag {
  font-size: calc(8.5px * var(--ui-scale));
}

/* -------------------------------------------------------- Team Mode picker */
.team-picker {
  margin-top: 10px;
  padding: 10px 12px;
  background: var(--c-panel-inner);
  border: 1px solid var(--c-panel-border);
  border-radius: var(--radius-md);
  box-shadow: var(--elev-1);
}

.team-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
}

.team-label {
  min-width: 62px;
  font-size: calc(12px * var(--ui-scale));
  font-weight: 700;
  color: var(--team);
}

.team-range {
  flex: 1;
  accent-color: var(--c-accent);
}

.team-count {
  min-width: 22px;
  text-align: center;
  font-size: calc(15px * var(--ui-scale));
  color: var(--team);
}

.team-range-note {
  font-size: calc(10px * var(--ui-scale));
  color: var(--c-text-faint);
}

/* The multi-jump icon shows how many air jumps are still banked. */
.ability-item[data-left]::after {
  content: attr(data-left);
  position: absolute;
  right: -2px;
  top: -2px;
  min-width: 13px;
  padding: 0 3px;
  font-size: 9px;
  font-weight: 700;
  line-height: 13px;
  text-align: center;
  color: var(--c-bg);
  background: var(--c-accent);
  border-radius: 99px;
}

.ability-item[data-left='0']::after {
  background: var(--c-text-faint);
}

/* The Victory rectangle has more to say than Defeat: mastery, boons, the seed
   code and itemised bonuses. These trims are what keep all of it inside one
   screen without a scrollbar. */
.victory-screen .panel.result-panel {
  row-gap: 6px;
  padding: 16px 20px 14px;
}

.victory-screen .panel.result-panel .victory-stars {
  font-size: 26px;
}

.victory-screen .panel.result-panel .bonus-list {
  max-height: none;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.victory-screen .panel.result-panel .bonus-row {
  padding: 3px 8px;
  font-size: calc(11px * var(--ui-scale));
}

.victory-screen .panel.result-panel .victory-mastery,
.victory-screen .panel.result-panel .result-seed,
.victory-screen .panel.result-panel .result-boons {
  margin-top: 2px;
  padding-block: 6px;
}

.bonus-more {
  opacity: 0.75;
  font-style: italic;
}

/* The bonus list spans both columns so the run summary reads as one block —
   that single change is what brings the Victory rectangle inside the screen
   without a scrollbar. */
.victory-screen .panel.result-panel .bonus-list {
  grid-column: 1 / -1;
}

.victory-screen .panel.result-panel .victory-mastery {
  padding: 6px 9px;
}

.victory-screen .panel.result-panel .victory-mastery .vm-note {
  display: none;
}

.victory-screen .panel.result-panel .result-row {
  padding: 3px 9px;
  font-size: calc(11.5px * var(--ui-scale));
}

.victory-screen .panel.result-panel > .panel-title {
  margin-bottom: 0;
  font-size: calc(clamp(18px, calc(2.6 * var(--sw)), 24px) * var(--ui-scale));
}

/* Victory carries a third more than Defeat, so it gets a third column: the
   stats, the mastery award and the itemised bonuses share one row, and the
   whole rectangle fits the screen with room to spare — no scrollbar, nothing
   clipped. */
.victory-screen .panel.result-panel {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.victory-screen .panel.result-panel .bonus-list {
  grid-column: auto;
}

/* Grid children default to min-width:auto, so a long stat row (the stage-bonus
   line carries coins, gems and a multiplier) refused to shrink and spilled
   across the neighbouring column. */
.result-screen .panel.result-panel > * {
  min-width: 0;
  overflow: hidden;
}

.result-screen .panel.result-panel .result-row {
  min-width: 0;
}

.result-screen .panel.result-panel .result-row > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}