/* ==========================================================================
   Guard the Tower 2D — upgrades.css
   --------------------------------------------------------------------------
   Everything the new systems put on screen, plus the polish pass over the
   existing interface. Nothing here changes the established layout: the menu,
   HUD and modals keep their structure, and this file adds depth, motion,
   consistent interaction states and the surfaces the new features need.

   Sections
     1. Depth & interaction polish (applies to the EXISTING interface)
     2. War Ledger tab — level, orders, perks, contracts
     3. Play tab additions — resume, weekly, doctrines, siege codes
     4. Between-wave draft
     5. In-battle surfaces — forecast, flanks, chatter, ghost, doctrine badge
     6. Result-screen meta blocks
     7. Prompts, loading dossier and reward choreography
   ========================================================================== */

/* ==========================================================================
   1. DEPTH & INTERACTION POLISH
   --------------------------------------------------------------------------
   Three things separate a hobby build from a published one: surfaces that
   sit in space, controls that answer every state, and focus that is always
   visible. All three are applied here to the interface that already exists.
   ========================================================================== */

/* ---- Real depth: a wide ambient layer plus a rim light on top ---- */
.menu-shell,
.modal-box,
.result-shell > .stats-grid,
#armory-panel {
  box-shadow: var(--shadow-float), var(--shadow-ao), var(--rim-light);
}

.mode-card,
.diff-card,
.location-card,
.chip-card,
.shop-item,
.achievement,
.stat-box,
.order-row,
.contract-row,
.perk-card {
  box-shadow: var(--shadow-card), var(--rim-light-soft);
}

/* ---- One hover/press language for every control ----
   Green while hovered, amber while held: a press can never be mistaken for
   a hover, and every card in the game answers the pointer the same way. */
.mode-card,
.diff-card,
.location-card,
.chip-card,
.mission-chip,
.menu-tab,
.doctrine-card,
.weekly-card,
.draft-card {
  transition:
    transform var(--t-fast) var(--ease-out),
    border-color var(--t-fast),
    box-shadow var(--t-fast),
    background var(--t-fast);
}

.mode-card:hover:not(:disabled),
.diff-card:hover:not(:disabled),
.location-card:hover:not(:disabled),
.chip-card:hover:not(:disabled),
.doctrine-card:hover:not(:disabled),
.weekly-card:hover:not(:disabled) {
  transform: translateY(-2px);
  border-color: var(--c-hover);
  box-shadow: var(--shadow-card), var(--glow-hover), var(--rim-light);
}

.mode-card:active:not(:disabled),
.diff-card:active:not(:disabled),
.location-card:active:not(:disabled),
.chip-card:active:not(:disabled),
.doctrine-card:active:not(:disabled),
.weekly-card:active:not(:disabled) {
  transform: translateY(1px) scale(0.995);
  border-color: var(--c-press);
  box-shadow: var(--shadow-sm), var(--glow-press);
}

/* Selection reads in the LOCATION's colour, so the choice tints the chrome. */
.mode-card.selected,
.diff-card.selected,
.chip-card.selected,
.doctrine-card.selected {
  border-color: var(--c-accent);
  box-shadow: var(--shadow-card), 0 0 16px var(--c-accent-soft), var(--rim-light);
}

.menu-tab.active {
  color: var(--c-accent);
  border-color: var(--c-accent);
}

.panel-heading { color: var(--c-accent); }
.start-btn { border-color: var(--c-accent); }

/* ---- Focus that is always visible (keyboard + gamepad users) ---- */
button:focus-visible,
input:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--c-hover);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* ---- Honest cursors ---- */
button:not(:disabled),
.mode-card, .diff-card, .location-card, .chip-card,
.account-chip, .weekly-card, .doctrine-card, .draft-card { cursor: pointer; }
button:disabled, .mission-chip:disabled { cursor: not-allowed; }
#game-canvas { cursor: crosshair; }

/* ---- Consistent button scale ramp ----
   Three sizes, one rhythm: chips, actions, and the single primary call. */
.shop-buy       { font-size: var(--fs-xs); padding: 6px 10px; }
.menu-btn       { font-size: var(--fs-md); padding: 12px 22px; }
.start-btn      { font-size: var(--fs-lg); }

/* ---- Staggered entrance for every grid, not just a few ---- */
.chip-grid > *,
.order-list > *,
.contract-list > *,
.perk-grid > *,
.settings-section .setting-row,
.armory-tabs > *,
#armory-panel .shop-item {
  animation: rise-in 0.4s var(--ease-out) both;
}
.chip-grid > *:nth-child(1),  .order-list > *:nth-child(1),
.contract-list > *:nth-child(1), .perk-grid > *:nth-child(1) { animation-delay: 0.03s; }
.chip-grid > *:nth-child(2),  .order-list > *:nth-child(2),
.contract-list > *:nth-child(2), .perk-grid > *:nth-child(2) { animation-delay: 0.06s; }
.chip-grid > *:nth-child(3),  .order-list > *:nth-child(3),
.contract-list > *:nth-child(3), .perk-grid > *:nth-child(3) { animation-delay: 0.09s; }
.chip-grid > *:nth-child(4),  .contract-list > *:nth-child(4),
.perk-grid > *:nth-child(4) { animation-delay: 0.12s; }
.chip-grid > *:nth-child(5),  .contract-list > *:nth-child(5),
.perk-grid > *:nth-child(5) { animation-delay: 0.15s; }
.chip-grid > *:nth-child(n+6), .contract-list > *:nth-child(n+6),
.perk-grid > *:nth-child(n+6) { animation-delay: 0.18s; }

/* ---- Tab badges: an unresolved count is an open loop ---- */
.menu-tab { position: relative; }
.tab-badge {
  position: absolute;
  top: -3px;
  right: -3px;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--c-danger);
  color: #fff;
  font-size: 0.62rem;
  font-weight: 800;
  line-height: 17px;
  text-align: center;
  box-shadow: var(--glow-danger);
  animation: pulse-soft 2s ease-in-out infinite;
}

/* ==========================================================================
   2. WAR LEDGER TAB
   ========================================================================== */

.ledger-head {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 16px;
  padding: 14px 18px;
  margin-bottom: 12px;
  border: 1px solid var(--c-panel-border);
  border-radius: var(--radius-lg);
  background: linear-gradient(115deg, rgba(255, 255, 255, 0.05), rgba(0, 0, 0, 0.28));
  box-shadow: var(--shadow-card), var(--rim-light);
}

.ledger-rank { text-align: center; }
.ledger-level {
  display: block;
  font-family: var(--font-display);
  font-size: 2.5rem;
  line-height: 1;
  color: var(--c-accent);
  text-shadow: var(--glow-text-gold);
}
.ledger-rank small,
.ledger-medals small {
  display: block;
  margin-top: 3px;
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  color: var(--c-text-faint);
}

.ledger-bar-wrap { min-width: 0; }
.ledger-bar {
  height: 12px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.55);
  box-shadow: var(--shadow-inset);
  overflow: hidden;
}
.ledger-bar.small { height: 8px; margin-top: 8px; }
.ledger-bar i {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--c-accent), var(--c-gold-bright));
  box-shadow: 0 0 12px var(--c-accent-soft);
  transition: width var(--t-slow) var(--ease-out);
}
.ledger-bar-wrap small {
  display: block;
  margin-top: 5px;
  font-size: var(--fs-xs);
  color: var(--c-text-faint);
}

.ledger-medals { text-align: center; }
.medal-count {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  color: var(--c-gold-bright);
  text-shadow: var(--shadow-text);
}

/* ---- Daily orders & contracts share one row shape ---- */
.order-list,
.contract-list {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin-bottom: 6px;
}

.order-row,
.contract-row {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-md);
  background: var(--c-panel-inner);
}

.order-row.ready,
.contract-row.ready {
  border-color: var(--c-success);
  background: linear-gradient(100deg, rgba(76, 201, 100, 0.14), var(--c-panel-inner));
  box-shadow: var(--glow-success), var(--rim-light-soft);
}
.order-row.claimed,
.contract-row.claimed { opacity: 0.5; }

.order-icon { font-size: 22px; width: 30px; text-align: center; flex-shrink: 0; }
.order-info { flex: 1; min-width: 0; }
.order-text { font-size: var(--fs-sm); font-weight: 700; color: var(--c-text); }
.contract-desc { font-size: var(--fs-xs); color: var(--c-text-dim); margin-bottom: 3px; }

.order-bar {
  height: 5px;
  margin: 5px 0 3px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.5);
  overflow: hidden;
}
.order-bar i {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--c-accent), var(--c-gold-bright));
  transition: width var(--t-slow) var(--ease-out);
}
.order-prog {
  font-size: 0.66rem;
  color: var(--c-text-faint);
  font-variant-numeric: tabular-nums;
}

.order-reward { font-size: var(--fs-xs); color: var(--c-text-faint); flex-shrink: 0; }
.order-done { font-size: var(--fs-xs); color: var(--c-success); flex-shrink: 0; }
.order-claim { animation: glow-throb 1.6s ease-in-out infinite; }

/* ---- Permanent perks ---- */
.perk-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 8px;
}

.perk-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-md);
  background: var(--c-panel-inner);
}
.perk-card.owned { border-color: rgba(76, 201, 100, 0.35); }
.perk-card.maxed { border-color: var(--c-gold-dim); }

.perk-icon { font-size: 24px; width: 32px; text-align: center; flex-shrink: 0; }
.perk-info { flex: 1; min-width: 0; }
.perk-name { font-size: var(--fs-sm); font-weight: 700; color: var(--c-text); }
.perk-name small { color: var(--c-accent); margin-left: 4px; }
.perk-desc { font-size: var(--fs-xs); color: var(--c-text-dim); }
.perk-active { font-size: var(--fs-xs); color: var(--c-success); margin-top: 2px; }

/* ==========================================================================
   3. PLAY TAB ADDITIONS
   ========================================================================== */

/* ---- Resume an unfinished run ---- */
.resume-card {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 12px 16px;
  margin-bottom: 12px;
  border: 1px solid var(--c-warning);
  border-radius: var(--radius-lg);
  background: linear-gradient(105deg, rgba(240, 160, 48, 0.16), rgba(0, 0, 0, 0.34));
  box-shadow: var(--shadow-card), 0 0 20px rgba(240, 160, 48, 0.18), var(--rim-light);
  animation: rise-in 0.5s var(--ease-out) both;
}
.resume-info { flex: 1; min-width: 180px; }
.resume-title { font-family: var(--font-display); font-size: var(--fs-lg); color: var(--c-warning); }
.resume-sub { font-size: var(--fs-xs); color: var(--c-text-dim); }
.resume-btn { margin: 0; width: auto; flex-shrink: 0; }
.resume-drop {
  flex-shrink: 0;
  padding: 8px 12px;
  font-size: var(--fs-xs);
  color: var(--c-text-faint);
  background: none;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-sm);
}
.resume-drop:hover { color: var(--c-danger); border-color: var(--c-danger); }

/* ---- Weekly siege ---- */
.weekly-card {
  display: flex;
  flex-direction: column;
  gap: 3px;
  width: 100%;
  padding: 12px 16px;
  margin-bottom: 12px;
  text-align: left;
  border: 1px solid rgba(143, 214, 255, 0.4);
  border-radius: var(--radius-lg);
  background: linear-gradient(105deg, rgba(95, 214, 255, 0.12), rgba(0, 0, 0, 0.32));
  box-shadow: var(--shadow-card), var(--rim-light);
}
.weekly-badge {
  font-size: 0.6rem;
  letter-spacing: 0.18em;
  font-weight: 800;
  color: var(--c-frost);
}
.weekly-title { font-family: var(--font-display); font-size: var(--fs-lg); color: var(--c-text); }
.weekly-sub { font-size: var(--fs-xs); color: var(--c-text-dim); }
.weekly-score { font-size: var(--fs-xs); color: var(--c-text-faint); }

/* ---- Doctrines ---- */
.doctrine-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 9px;
}

.doctrine-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 13px 14px;
  text-align: left;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-md);
  background:
    linear-gradient(150deg, rgba(255, 255, 255, 0.045), rgba(0, 0, 0, 0.3));
}
.doctrine-card.selected {
  border-color: var(--doc-accent, var(--c-accent));
  box-shadow: 0 0 18px -2px var(--doc-accent, var(--c-accent)), var(--rim-light);
}
.doc-icon { font-size: 26px; line-height: 1; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.7)); }
.doc-name {
  font-family: var(--font-display);
  font-size: var(--fs-md);
  color: var(--doc-accent, var(--c-text));
  letter-spacing: 0.04em;
}
.doc-tag { font-size: var(--fs-xs); color: var(--c-text-dim); font-style: italic; }
.doc-perks { display: flex; flex-direction: column; gap: 2px; margin-top: 4px; }
.doc-perks i {
  font-style: normal;
  font-size: 0.66rem;
  color: var(--c-text-faint);
  padding-left: 11px;
  position: relative;
}
.doc-perks i::before {
  content: "▪";
  position: absolute;
  left: 0;
  color: var(--doc-accent, var(--c-accent));
}

.nightmare-card.selected { border-color: var(--c-danger); box-shadow: var(--glow-danger); }

/* ---- Same Siege code entry ---- */
.siege-code-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 12px;
}
.siege-code-row label { font-size: var(--fs-xs); color: var(--c-text-dim); }
.siege-input {
  flex: 1;
  min-width: 180px;
  padding: 8px 11px;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--c-text);
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-inset);
}
.siege-input:focus { border-color: var(--c-hover); outline: none; }

/* ==========================================================================
   4. BETWEEN-WAVE DRAFT
   ========================================================================== */

.draft-box {
  max-width: min(820px, 96vw);
  text-align: center;
}

.draft-title {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  color: var(--c-accent);
  letter-spacing: 0.06em;
  text-shadow: var(--glow-text-gold);
}
.draft-sub { font-size: var(--fs-sm); color: var(--c-text-dim); margin: 4px 0 14px; }

.draft-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.draft-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 16px 12px 14px;
  border: 1px solid var(--rar, var(--c-common));
  border-radius: var(--radius-md);
  background: linear-gradient(170deg, rgba(255, 255, 255, 0.05), rgba(0, 0, 0, 0.42));
  box-shadow: var(--shadow-card), var(--rim-light-soft);
  animation: draft-deal 0.42s var(--ease-bounce) both;
}

.draft-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 0 26px -4px var(--rar), var(--shadow-float), var(--rim-light);
}
.draft-card:active { transform: translateY(-1px) scale(0.99); }
.draft-card.chosen {
  animation: draft-pick 0.26s var(--ease-out) both;
  border-color: var(--c-hover);
  box-shadow: var(--glow-hover);
}

.draft-rarity {
  font-size: 0.56rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 800;
  color: var(--rar);
}
.draft-icon {
  font-size: 34px;
  line-height: 1;
  filter: drop-shadow(0 3px 10px rgba(0, 0, 0, 0.8));
}
.draft-name {
  font-family: var(--font-display);
  font-size: var(--fs-md);
  color: var(--c-text);
}
.draft-desc { font-size: var(--fs-xs); color: var(--c-text-dim); line-height: 1.5; }
.draft-stack { font-size: 0.62rem; color: var(--c-text-faint); }

.draft-taken {
  margin-top: 12px;
  font-size: var(--fs-xs);
  color: var(--c-text-faint);
  letter-spacing: 0.04em;
}
.draft-taken span { font-size: 15px; margin: 0 1px; }

@keyframes draft-deal {
  0%   { opacity: 0; transform: translateY(28px) rotate(-4deg) scale(0.9); }
  100% { opacity: 1; transform: translateY(0) rotate(0) scale(1); }
}
@keyframes draft-pick {
  0%   { transform: translateY(-5px) scale(1); }
  100% { transform: translateY(-14px) scale(1.06); opacity: 0.15; }
}

/* ==========================================================================
   5. IN-BATTLE SURFACES
   ========================================================================== */

/* ---- Threat forecast ---- */
#forecast-panel {
  width: 260px;
  /* Clears the flank gauge, which hangs below the minimap's own box. */
  margin-top: 8px;
  padding: 8px 10px;
  border: 1px solid var(--c-panel-border);
  border-radius: var(--radius-md);
  background: var(--c-glass);
  box-shadow: var(--shadow-card), var(--rim-light-soft);
  pointer-events: auto;
  animation: slide-in-right 0.3s var(--ease-out) both;
}
#forecast-panel h4 {
  font-size: 0.64rem;
  letter-spacing: 0.14em;
  color: var(--c-accent);
  margin-bottom: 5px;
}
.fc-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 2px 0;
  font-size: 0.68rem;
  color: var(--c-text-dim);
}
.fc-n { width: 22px; text-align: right; color: var(--c-text); font-variant-numeric: tabular-nums; }
.fc-icon { font-size: 13px; }
.fc-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fc-hp { color: var(--c-health); font-variant-numeric: tabular-nums; }
.fc-gold { color: var(--c-gold-bright); font-variant-numeric: tabular-nums; }
.fc-row.fc-boss  { color: var(--c-boss); font-weight: 700; }
.fc-row.fc-heavy { color: var(--c-warning); }
.fc-row.fc-elite { color: var(--c-elite); }
.fc-warn {
  font-size: 0.68rem;
  color: var(--c-danger);
  margin-bottom: 4px;
  animation: pulse-soft 1.6s ease-in-out infinite;
}
.fc-more { font-size: 0.62rem; color: var(--c-text-faint); margin-top: 3px; }

/* ---- Flank pressure gauge (sits under the minimap) ---- */
#flank-gauge {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -9px;
  display: flex;
  gap: 4px;
  padding: 0 2px;
}
#flank-gauge .flank {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 3px;
  height: 6px;
}
#flank-gauge .flank span {
  font-size: 0.5rem;
  font-weight: 800;
  color: var(--c-text-faint);
  line-height: 1;
}
#flank-gauge .flank i {
  flex: 1;
  height: 4px;
  border-radius: 999px;
  background: var(--c-health);
  box-shadow: 0 0 6px rgba(76, 201, 100, 0.5);
  transition: width var(--t-med) linear, background var(--t-med);
}
#flank-gauge .flank-l { flex-direction: row-reverse; }
#flank-gauge .flank.hot i {
  background: var(--c-danger);
  box-shadow: var(--glow-danger);
  animation: pulse-soft 0.8s ease-in-out infinite;
}

/* ---- Voice of the Keep ---- */
.chatter-strip {
  position: absolute;
  left: 50%;
  bottom: calc(150px + var(--safe-b) / var(--hud-scale, 1));
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: min(560px, 80vw);
  padding: 6px 14px 6px 8px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-left: 3px solid var(--c-accent);
  border-radius: var(--radius-sm);
  background: rgba(4, 6, 9, 0.86);
  box-shadow: var(--shadow-card);
  pointer-events: none;
  animation: chat-in 0.24s var(--ease-out) both;
}
.chatter-strip.urgent {
  border-left-color: var(--c-danger);
  box-shadow: var(--shadow-card), var(--glow-danger);
}
.chat-tag {
  font-size: 0.54rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  color: var(--c-accent);
  padding: 2px 5px;
  border: 1px solid currentColor;
  border-radius: 3px;
  flex-shrink: 0;
}
.chatter-strip.urgent .chat-tag { color: var(--c-danger); }
.chat-text {
  font-size: var(--fs-sm);
  color: var(--c-parchment);
  font-style: italic;
  letter-spacing: 0.01em;
}

@keyframes chat-in {
  0%   { opacity: 0; transform: translateX(-50%) translateY(8px); }
  100% { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* ---- Golden Path coaching line ---- */
.coach-strip {
  position: absolute;
  left: 50%;
  top: calc(34% + var(--safe-t) / var(--hud-scale, 1));
  transform: translateX(-50%);
  max-width: min(520px, 84vw);
  padding: 10px 18px;
  text-align: center;
  font-size: var(--fs-md);
  color: var(--c-parchment);
  border: 1px solid var(--c-accent);
  border-radius: var(--radius-md);
  background: rgba(6, 8, 12, 0.92);
  box-shadow: var(--shadow-float), 0 0 22px var(--c-accent-soft);
  pointer-events: none;
  animation: drop-in 0.4s var(--ease-bounce) both;
}
.coach-strip.danger { border-color: var(--c-danger); box-shadow: var(--shadow-float), var(--glow-danger); }
.coach-strip.gold { border-color: var(--c-gold-bright); }

/* ---- Rival ghost pace ---- */
#ghost-pace {
  margin-top: 4px;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--c-success);
  text-shadow: var(--shadow-text);
  font-variant-numeric: tabular-nums;
}
#ghost-pace.behind { color: var(--c-warning); }

/* ---- Top-left column now holds the doctrine badge above the powers ----
   `#power-panel` used to BE the corner; it is now nested inside one, so it
   has to carry the column layout itself. The wrapper sizes to its content
   so the two-column short-viewport reflow still fits. */
#hud-left {
  width: auto;
  align-items: flex-start;
}
#power-panel {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 200px;
}

/* ---- Doctrine + boons badge (top-left, above the powers) ---- */
#run-doctrine {
  align-self: flex-start;
  display: flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 6px;
  padding: 4px 9px;
  border: 1px solid var(--doc-accent, var(--c-panel-border));
  border-radius: 999px;
  background: rgba(4, 6, 9, 0.72);
  box-shadow: var(--shadow-inset);
  pointer-events: auto;
}
.rd-icon { font-size: 15px; }
.rd-nm {
  font-size: 0.6rem;
  font-weight: 800;
  color: var(--c-danger);
  padding: 1px 4px;
  border: 1px solid currentColor;
  border-radius: 3px;
}
.rd-boons { display: flex; gap: 1px; }
.rd-boons i { font-style: normal; font-size: 12px; }

/* ---- HUD focus dimming: idle panels step back, changes snap forward ---- */
#hud.hud-dim #power-panel,
#hud.hud-dim #ordnance-bar,
#hud.hud-dim #hud-counters,
#hud.hud-dim #minimap-wrap,
#hud.hud-dim #mission-tracker,
#hud.hud-dim #run-doctrine {
  opacity: 0.55;
}
#hud #power-panel,
#hud #ordnance-bar,
#hud #hud-counters,
#hud #minimap-wrap,
#hud #mission-tracker,
#hud #run-doctrine {
  transition: opacity var(--t-slow) var(--ease-out);
}

/* ---- Counter gain flash: the climb, punctuated ---- */
.counter.counter-gain {
  color: var(--c-gold-bright);
  text-shadow: var(--glow-text-gold);
  transform: scale(1.07);
}
.counter { transition: transform var(--t-fast) var(--ease-out), color var(--t-med), text-shadow var(--t-med); }

/* ---- Threat temperature bleeds into the alert surfaces ---- */
#tower-health-wrap { border-color: var(--c-threat); }
body[data-threat="3"] #hud::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  box-shadow: inset 0 0 130px var(--c-threat-soft);
  animation: pulse-soft 1.4s ease-in-out infinite;
}

/* ==========================================================================
   6. RESULT-SCREEN META BLOCKS
   ========================================================================== */

.payout-box {
  width: min(420px, 92vw);
  margin: 4px auto 12px;
  padding: 12px 16px;
  border: 1px solid var(--c-accent);
  border-radius: var(--radius-md);
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.05), rgba(0, 0, 0, 0.4));
  box-shadow: var(--shadow-card), 0 0 20px var(--c-accent-soft), var(--rim-light);
  animation: rise-in 0.5s 0.5s var(--ease-out) both;
}
.payout-head {
  font-family: var(--font-display);
  font-size: var(--fs-md);
  letter-spacing: 0.1em;
  color: var(--c-accent);
  text-align: center;
  margin-bottom: 8px;
}
.payout-rows { display: flex; flex-direction: column; gap: 4px; }
.payout-row {
  display: flex;
  justify-content: space-between;
  font-size: var(--fs-sm);
  color: var(--c-text-dim);
}
.payout-row b { font-variant-numeric: tabular-nums; }
.payout-row.levelled {
  margin-top: 4px;
  padding-top: 6px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--c-success);
  font-weight: 800;
  letter-spacing: 0.08em;
  animation: glow-throb 1.4s ease-in-out infinite;
}
.payout-box small { display: block; text-align: center; margin-top: 5px; font-size: var(--fs-xs); }

.run-summary {
  width: min(420px, 92vw);
  margin: 0 auto 12px;
  font-size: var(--fs-sm);
  color: var(--c-text-dim);
  text-align: center;
  animation: fade-in 0.6s 0.7s both;
}
.rs-line { padding: 2px 0; }
.rs-line span { font-size: 15px; margin: 0 1px; }
.rs-line.best { color: var(--c-success); font-weight: 700; }

.share-row {
  display: flex;
  flex-direction: column;
  gap: 7px;
  width: min(360px, 88vw);
  margin: 10px auto 0;
  animation: fade-in 0.6s 0.9s both;
}
.share-btn { font-size: var(--fs-sm); padding: 9px 14px; }
.share-code {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  color: var(--c-text-faint);
  text-align: center;
  word-break: break-all;
}

/* ==========================================================================
   7. PROMPTS, DOSSIER & REWARD CHOREOGRAPHY
   ========================================================================== */

.golden-box { text-align: center; }
.golden-crest {
  font-size: 46px;
  line-height: 1;
  margin-bottom: 6px;
  filter: drop-shadow(0 0 20px rgba(196, 204, 216, 0.55));
  animation: crest-hover 4.5s ease-in-out infinite;
}
.golden-box h2 {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  color: var(--c-parchment);
  margin-bottom: 8px;
}
.golden-skip {
  display: block;
  width: 100%;
  margin-top: 10px;
  padding: 8px;
  font-size: var(--fs-xs);
  color: var(--c-text-faint);
  background: none;
  border: none;
  text-decoration: underline;
}
.golden-skip:hover { color: var(--c-text); }
.challenge-line {
  margin-top: 8px;
  padding: 8px;
  font-size: var(--fs-sm);
  color: var(--c-text);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-sm);
  background: rgba(0, 0, 0, 0.35);
}

/* ==========================================================================
   8. ONBOARDING — the four-screen commander's briefing
   --------------------------------------------------------------------------
   Sits above the main menu, never instead of it. Scaled as one piece like
   every other panel so landscape mobile gets the same briefing as desktop.
   ========================================================================== */

#onboarding {
  position: absolute;
  inset: 0;
  z-index: calc(var(--z-modal) + 2);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  background:
    radial-gradient(ellipse at 50% 30%, rgba(20, 26, 38, 0.86), rgba(2, 3, 5, 0.97) 70%);
  pointer-events: auto;
  animation: fade-in var(--t-med) ease both;
}

.ob-shell {
  display: flex;
  flex-direction: column;
  width: min(880px, calc(96vw / var(--menu-scale, 1)));
  max-height: calc(94vh / var(--menu-scale, 1));
  flex-shrink: 0;
  transform: scale(var(--menu-scale, 1));
  transform-origin: center center;
  padding: 16px 22px 14px;
  border-radius: var(--radius-xl);
  background:
    linear-gradient(160deg, rgba(15, 16, 19, 0.96), rgba(5, 6, 7, 0.98) 60%) padding-box,
    linear-gradient(115deg, var(--c-accent), rgba(120, 128, 142, 0.5) 40%,
      rgba(150, 160, 176, 0.7) 70%, var(--c-accent)) border-box;
  border: 1px solid transparent;
  box-shadow: var(--shadow-float), var(--shadow-ao), var(--rim-light);
  animation: shell-in 0.6s var(--ease-out) both;
  overflow: hidden;
}

/* ---- header ---- */
.ob-head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.ob-crest { font-size: 22px; filter: drop-shadow(0 0 12px rgba(196, 204, 216, 0.5)); }
.ob-brand {
  flex: 1;
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  letter-spacing: 0.2em;
  color: var(--c-text-dim);
}
.ob-brand b { color: var(--c-accent); }
.ob-skip {
  padding: 6px 12px;
  font-size: var(--fs-xs);
  color: var(--c-text-faint);
  background: none;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  transition: color var(--t-fast), border-color var(--t-fast);
}
.ob-skip:hover { color: var(--c-text); border-color: var(--c-hover); }

/* ---- body ---- */
.ob-body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }

.ob-panel { padding: 14px 2px 4px; }
.ob-panel.from-right { animation: ob-slide-r 0.34s var(--ease-out) both; }
.ob-panel.from-left  { animation: ob-slide-l 0.34s var(--ease-out) both; }

@keyframes ob-slide-r {
  0%   { opacity: 0; transform: translateX(38px); }
  100% { opacity: 1; transform: translateX(0); }
}
@keyframes ob-slide-l {
  0%   { opacity: 0; transform: translateX(-38px); }
  100% { opacity: 1; transform: translateX(0); }
}

.ob-chip {
  display: inline-block;
  padding: 3px 10px;
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.2em;
  color: var(--c-accent);
  border: 1px solid currentColor;
  border-radius: 999px;
}
.ob-title {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3.4vw, 2.2rem);
  line-height: 1.1;
  letter-spacing: 0.04em;
  color: var(--c-parchment);
  margin: 8px 0 4px;
  text-shadow: var(--shadow-text-deep);
}
.ob-lede {
  font-size: var(--fs-md);
  color: var(--c-text-dim);
  line-height: 1.55;
  margin-bottom: 12px;
  max-width: 60ch;
}

/* ---- diagrams: built from the game's own icons ---- */
.ob-scene {
  position: relative;
  height: 108px;
  margin-bottom: 14px;
  border-radius: var(--radius-md);
  background: linear-gradient(180deg, rgba(60, 80, 110, 0.28), rgba(10, 12, 16, 0.6));
  border: 1px solid rgba(255, 255, 255, 0.07);
  overflow: hidden;
}
.ob-ground {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 26px;
  background: linear-gradient(180deg, rgba(120, 108, 80, 0.5), rgba(40, 36, 28, 0.7));
}
.ob-keep {
  position: absolute;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  font-size: 44px;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.8));
  animation: float-y 3.4s ease-in-out infinite;
}
.ob-keep.small { font-size: 32px; left: 12%; }
.ob-foe {
  position: absolute;
  bottom: 20px;
  font-size: 21px;
  filter: drop-shadow(0 3px 7px rgba(0, 0, 0, 0.75));
}
.ob-foe-l  { left: 6%;  animation: ob-march-r 3.2s ease-in-out infinite; }
.ob-foe-l2 { left: 17%; animation: ob-march-r 3.2s ease-in-out infinite 0.5s; }
.ob-foe-r  { right: 6%;  animation: ob-march-l 3.2s ease-in-out infinite 0.25s; }
.ob-foe-r2 { right: 17%; animation: ob-march-l 3.2s ease-in-out infinite 0.75s; }

@keyframes ob-march-r {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(18px); }
}
@keyframes ob-march-l {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(-18px); }
}

.ob-scene-aim .ob-arc {
  position: absolute;
  left: 8%;
  bottom: 22px;
  width: 84%;
  height: 78px;
  overflow: visible;
}
.ob-scene-aim .ob-arc path {
  fill: none;
  stroke: var(--c-accent);
  stroke-width: 2;
  stroke-dasharray: 5 7;
  stroke-linecap: round;
  opacity: 0.9;
  animation: ob-dash 1.6s linear infinite;
}
@keyframes ob-dash { to { stroke-dashoffset: -24; } }

.ob-target {
  position: absolute;
  right: 9%;
  bottom: 22px;
  font-size: 25px;
  animation: pulse-soft 1.6s ease-in-out infinite;
}
.ob-wind {
  position: absolute;
  top: 8px;
  right: 12px;
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  color: var(--c-frost);
}

.ob-keys,
.ob-reward-row {
  display: grid;
  gap: 8px;
  margin-bottom: 14px;
}
.ob-keys { grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); }
.ob-reward-row { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }

.ob-key,
.ob-reward {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 9px 6px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-md);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(0, 0, 0, 0.3));
  box-shadow: var(--rim-light-soft), var(--shadow-sm);
}
.ob-key b {
  font-family: var(--font-mono);
  font-size: var(--fs-md);
  color: var(--c-accent);
}
.ob-reward b { font-size: 24px; line-height: 1; }
.ob-key small,
.ob-reward small {
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-text-faint);
}

/* ---- teaching points ---- */
.ob-points {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 8px;
}
.ob-point {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 9px 11px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-left: 2px solid var(--c-accent);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.03);
  animation: rise-in 0.4s var(--ease-out) both;
}
.ob-point-icon { font-size: 19px; line-height: 1.3; flex-shrink: 0; }
.ob-point-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ob-point-text b { font-size: var(--fs-sm); color: var(--c-text); font-weight: 700; }
.ob-point-text small { font-size: var(--fs-xs); color: var(--c-text-dim); line-height: 1.5; }
.ob-point-text kbd,
.ob-lede kbd {
  font-family: var(--font-mono);
  font-size: 0.9em;
  padding: 0 4px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 3px;
  background: rgba(0, 0, 0, 0.4);
}

/* ---- footer: dots + navigation ---- */
.ob-foot {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-shrink: 0;
  padding-top: 12px;
  margin-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.ob-dots { display: flex; gap: 7px; flex: 1; }
.ob-dot {
  width: 26px;
  height: 5px;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
  transition: background var(--t-med), width var(--t-med), box-shadow var(--t-med);
}
.ob-dot.done { background: rgba(255, 255, 255, 0.4); }
.ob-dot.active {
  width: 42px;
  background: var(--c-accent);
  box-shadow: 0 0 10px var(--c-accent-soft);
}
.ob-dot:hover { background: var(--c-hover); }

.ob-nav { display: flex; align-items: center; gap: 9px; flex-shrink: 0; }
.ob-back {
  padding: 10px 16px;
  font-size: var(--fs-sm);
  color: var(--c-text-dim);
  background: none;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius-sm);
  transition: color var(--t-fast), border-color var(--t-fast);
}
.ob-back:hover:not(:disabled) { color: var(--c-hover); border-color: var(--c-hover); }
.ob-back:disabled { opacity: 0.3; }
.ob-next { margin: 0; width: auto; min-width: 150px; padding: 12px 22px; font-size: var(--fs-md); }

/* The menu behind the briefing should not be reachable. */
body.onboarding-open #overlay { pointer-events: none; }

/* ---- "start here" card for a player who has read the briefing ---- */
.first-battle-card {
  display: flex;
  flex-direction: column;
  gap: 3px;
  width: 100%;
  padding: 13px 16px;
  margin-bottom: 12px;
  text-align: left;
  border: 1px solid var(--c-success);
  border-radius: var(--radius-lg);
  background: linear-gradient(105deg, rgba(76, 201, 100, 0.15), rgba(0, 0, 0, 0.32));
  box-shadow: var(--shadow-card), var(--glow-success), var(--rim-light);
  animation: rise-in 0.5s var(--ease-out) both;
}
.fb-badge {
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  color: var(--c-success);
}
.fb-title { font-family: var(--font-display); font-size: var(--fs-lg); color: var(--c-text); }
.fb-sub { font-size: var(--fs-xs); color: var(--c-text-dim); }

.replay-briefing { width: 100%; margin-bottom: 12px; }

@media (max-height: 560px) {
  .ob-scene, .ob-scene-aim { height: 78px; }
  .ob-keep { font-size: 34px; }
  .ob-title { margin: 4px 0 2px; }
  .ob-lede { margin-bottom: 8px; font-size: var(--fs-sm); }
  .ob-shell { padding: 12px 16px 10px; }
}

@media (max-width: 720px) {
  .ob-points { grid-template-columns: 1fr; }
  .ob-next { min-width: 0; }
}

body.reduced-motion .ob-keep,
body.reduced-motion .ob-foe,
body.reduced-motion .ob-arc path,
body.reduced-motion .ob-target { animation: none !important; }

/* ---- Loading: shimmer sweep + mission dossier ---- */
#loading-bar { position: relative; overflow: hidden; }
#loading-bar::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg,
    transparent 20%, rgba(255, 255, 255, 0.5) 50%, transparent 80%);
  animation: shine-sweep 1.5s linear infinite;
}

#loading-dossier {
  margin: 12px auto 0;
  max-width: 420px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.dossier-line {
  padding: 5px 12px;
  font-size: var(--fs-xs);
  color: var(--c-text-dim);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-left: 2px solid var(--c-accent);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.03);
  animation: slide-in-left 0.45s var(--ease-out) both;
}
.dossier-line:nth-child(2) { animation-delay: 0.08s; }
.dossier-line:nth-child(3) { animation-delay: 0.16s; }
.dossier-line:nth-child(4) { animation-delay: 0.24s; }
.dossier-line b { color: var(--c-gold-bright); }

/* ---- Reward reveal: rows tick in, total counts up ---- */
.reward-row {
  transition: opacity var(--t-med) var(--ease-out), transform var(--t-med) var(--ease-out);
}
.reward-row.pending { opacity: 0; transform: translateX(-14px); }
.reward-row.revealed { animation: reward-tick 0.32s var(--ease-bounce) both; }
.reward-total.counted b { animation: total-pop 0.5s var(--ease-bounce) both; }

@keyframes reward-tick {
  0%   { opacity: 0; transform: translateX(-14px); }
  60%  { opacity: 1; transform: translateX(3px); }
  100% { opacity: 1; transform: translateX(0); }
}
@keyframes total-pop {
  0%   { transform: scale(0.8); filter: brightness(1); }
  55%  { transform: scale(1.16); filter: brightness(1.7); }
  100% { transform: scale(1); filter: brightness(1); }
}

/* ==========================================================================
   Responsive & accessibility trims
   ========================================================================== */

@media (max-width: 900px) {
  .ledger-head { grid-template-columns: auto 1fr; row-gap: 10px; }
  .ledger-medals { grid-column: 1 / -1; }
  .draft-cards { grid-template-columns: 1fr; }
  .draft-card { flex-direction: row; text-align: left; align-items: center; gap: 10px; }
  .draft-icon { font-size: 26px; }
}

@media (max-height: 520px) {
  #forecast-panel { width: 220px; }
  .fc-row:nth-child(n+7) { display: none; }
  #loading-dossier { display: none; }
}

/* Touch targets stay at or above ~44 real pixels after the HUD scale. */
@media (pointer: coarse) {
  .order-claim, .perk-card .shop-buy { padding: 10px 14px; }
  .draft-card { padding: 18px 14px; }
  .resume-drop { padding: 11px 14px; }
}

body.reduced-motion .draft-card,
body.reduced-motion .tab-badge,
body.reduced-motion #loading-bar::after,
body.reduced-motion .order-claim,
body.reduced-motion .payout-row.levelled {
  animation: none !important;
}