* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
  font-family: system-ui, -apple-system, sans-serif;
  background: #1b4965;
}

#game-canvas {
  display: block;
  width: 100vw;
  height: 100vh;
  touch-action: none; /* one-finger drags pan the map instead of scrolling the page */
}

#zoom-controls {
  position: fixed;
  right: 12px;
  bottom: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

#zoom-controls button {
  width: 40px;
  height: 40px;
  background: rgba(16, 38, 58, 0.9);
  color: #f4ead2;
  border: none;
  border-radius: 8px;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

/* Fixed wrapper for the resource bar and the next-unlock banner below it, so the two stack in
   normal flow -- if the resource bar wraps to more rows (see below), next-unlock naturally moves
   down with it instead of needing its own hardcoded top offset.
   `left`+`right` (not `left:50%`+`transform`) define this box: with no explicit width, a fixed
   element with both set sizes itself to fill exactly the gap between them, so it can *never*
   reach under the upgrades/prestige/menu button cluster pinned to the top-right (that cluster's
   outer edge sits 148px from the right edge of the screen) -- centering happens *inside* this
   already-safe box via `align-items`, instead of trying to derive a max-width that keeps a
   50%-centered box clear of a right-side-only obstacle (which either overshoots on the right at
   some widths or wastes space on the left at others). The box itself is wider than its visible
   content, so it needs pointer-events:none with the children opting back in, or it would block
   clicks to the canvas in the empty space on either side of the centered bar. */
#hud-top {
  position: fixed;
  top: 12px;
  left: 12px;
  right: 160px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  z-index: 3;
  pointer-events: none;
}

#hud-top > * {
  pointer-events: auto;
}

#resource-bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(6px, 2.5vw, 18px);
  max-width: 100%; /* never wider than #hud-top's already-safe box -- wrap instead */
  background: rgba(16, 38, 58, 0.9);
  color: #f4ead2;
  padding: clamp(5px, 1.5vw, 8px) clamp(8px, 3vw, 18px);
  border-radius: 8px;
  font-size: clamp(10px, 2.2vw, 16px);
  line-height: 1;
}

#resource-bar .resource {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  cursor: help;
}

#resource-bar .resource.hidden {
  display: none;
}

#resource-bar .resource-main {
  display: flex;
  align-items: center;
  gap: 6px;
}

#resource-bar .count {
  font-variant-numeric: tabular-nums;
  transition: color 0.35s;
}

#resource-bar .count.gain {
  color: #8fe0a0;
  transition: none;
}

#resource-bar .count.spend {
  color: #ff9a86;
  transition: none;
}

.resource-rate {
  font-size: 11px;
  opacity: 0.8;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.resource-rate small {
  color: #d9b545;
  margin-left: 3px;
}

#rate-tip {
  position: fixed;
  z-index: 5;
  pointer-events: none;
  max-width: 250px;
  background: rgba(16, 38, 58, 0.95);
  color: #f4ead2;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 12.5px;
  line-height: 1.45;
}

#rate-tip.hidden {
  display: none;
}

#rate-tip .dim {
  opacity: 0.75;
}

#next-unlock {
  /* No min-width: min-width always wins over max-width when they conflict, which would force
     this back under the button cluster on a narrow screen. Sizing is fit-content, capped to
     #hud-top's already button-safe width (see there) and to a sane upper bound on big screens. */
  width: fit-content;
  max-width: min(400px, 100%);
  padding: 6px 14px;
  background: rgba(16, 38, 58, 0.9);
  color: #f4ead2;
  border-radius: 8px;
  font-size: clamp(10.5px, 2.6vw, 12.5px);
  text-align: center;
  cursor: pointer;
}

#next-unlock.hidden {
  display: none;
}

#next-unlock b {
  color: #d9b545;
}

#next-unlock-bar {
  height: 4px;
  border-radius: 2px;
  margin-top: 5px;
  background: rgba(244, 234, 210, 0.18);
  overflow: hidden;
}

#next-unlock-hint {
  display: block;
  margin-top: 4px;
  font-size: 11.5px;
  opacity: 0.8;
}

#next-unlock-hint.hidden {
  display: none;
}

#next-unlock-bar i {
  display: block;
  height: 100%;
  width: 0;
  background: #d9b545;
}

#board-pills {
  position: fixed;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.board-pill {
  position: absolute;
  transform: translate(-50%, -50%);
  padding: 1px 6px;
  border-radius: 9px;
  font-size: 10.5px;
  font-weight: 650;
  white-space: nowrap;
}

.board-pill.ready {
  background: #d9b545;
  color: #10263a;
}

.board-pill.wait {
  background: rgba(16, 38, 58, 0.88);
  color: #a9c9d6;
  border: 1px solid rgba(169, 201, 214, 0.45);
}

.board-pill.next {
  padding: 3px 9px;
  font-size: 12px;
  box-shadow: 0 0 0 2px rgba(217, 181, 69, 0.55);
}

.setting-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  text-align: left;
  margin-bottom: 14px;
  font-size: 14px;
  cursor: pointer;
}

.setting-row input {
  margin-top: 3px;
}

.setting-row small {
  display: block;
  margin-top: 3px;
  font-size: 12px;
  opacity: 0.8;
}

#menu-panel #menu-shop-btn,
#menu-panel #menu-shop-back-btn,
#menu-panel #menu-settings-btn,
#menu-panel #menu-settings-back-btn {
  background: transparent;
  color: #f4ead2;
  border: 1px solid rgba(244, 234, 210, 0.4);
}

#menu-panel #menu-settings-back-btn,
#menu-panel #menu-shop-back-btn {
  margin-bottom: 0;
}

#shop-gold {
  margin: 0 0 10px;
  font-size: 15px;
  font-weight: bold;
  color: #d9b545;
}

#shop-list {
  max-height: 340px;
  overflow-y: auto;
  margin-bottom: 14px;
}

.shop-section {
  margin: 14px 0 6px;
  text-align: left;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.65;
}

.shop-section:first-child {
  margin-top: 0;
}

.shop-item {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
  text-align: left;
}

.shop-item .shop-info {
  flex: 1;
  font-size: 13px;
  line-height: 1.3;
}

.shop-item .shop-info small {
  display: block;
  margin-top: 1px;
  font-size: 11.5px;
  opacity: 0.75;
}

#menu-panel .shop-item button {
  width: auto;
  margin: 0;
  padding: 6px 11px;
  font-size: 13px;
  background: #d9b545;
  color: #10263a;
  white-space: nowrap;
}

#menu-panel .shop-item button:disabled {
  background: #6b6b6b;
  color: #ccc;
  cursor: not-allowed;
}

#menu-panel .shop-item button.own {
  background: transparent;
  color: #f4ead2;
  border: 1px solid rgba(244, 234, 210, 0.4);
}

.shop-swatch {
  display: inline-block;
  width: 11px;
  height: 11px;
  margin-right: 6px;
  border-radius: 50%;
  vertical-align: -1px;
}

#tile-panel {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(16, 38, 58, 0.92);
  color: #f4ead2;
  padding: 16px 28px;
  border-radius: 8px;
  min-width: 260px;
  max-width: 360px;
  text-align: center;
}

#tile-panel.hidden {
  display: none;
}

#tile-panel-hint {
  margin: 8px 0 0;
  font-size: 12px;
  opacity: 0.8;
}

#tile-panel-hint.hidden {
  display: none;
}

.tile-panel-icon {
  display: block;
  font-size: 24px;
  margin-bottom: 2px;
}

#tile-panel h2 {
  margin: 4px 0 8px;
  font-size: 18px;
}

#tile-panel p {
  margin: 0 0 8px;
  font-size: 14px;
}

#tile-panel-progress {
  font-size: 13px;
  opacity: 0.85;
  margin-bottom: 8px;
}

#tile-panel button {
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

#tile-panel-unlock-btn {
  padding: 6px 16px;
  background: #d9b545;
  color: #10263a;
  font-weight: bold;
  font-size: 14px;
}

#tile-panel-unlock-btn:disabled {
  background: #6b6b6b;
  color: #ccc;
  cursor: not-allowed;
}

#tile-panel-unlock-btn.hidden {
  display: none;
}

#tile-panel-toggle-btn {
  margin-top: 6px;
  padding: 5px 14px;
  background: transparent;
  color: #d9b545;
  border: 1px solid #d9b545;
  font-size: 13px;
}

#tile-panel-toggle-btn.off {
  color: #9be6a8;
  border-color: #9be6a8;
}

#tile-panel-toggle-btn.hidden {
  display: none;
}

#tile-panel-close-btn {
  position: absolute;
  top: 6px;
  right: 10px;
  background: transparent;
  color: #f4ead2;
  font-size: 16px;
}

#menu-btn {
  position: fixed;
  top: 12px;
  right: 12px;
  width: 40px;
  height: 40px;
  background: rgba(16, 38, 58, 0.9);
  color: #f4ead2;
  border: none;
  border-radius: 8px;
  font-size: 18px;
  cursor: pointer;
}

#prestige-btn {
  position: fixed;
  top: 12px;
  right: 60px;
  width: 40px;
  height: 40px;
  background: rgba(16, 38, 58, 0.9);
  color: #f4ead2;
  border: none;
  border-radius: 8px;
  font-size: 18px;
  cursor: pointer;
}

#upgrades-btn {
  position: fixed;
  top: 12px;
  right: 108px;
  width: 40px;
  height: 40px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(16, 38, 58, 0.9);
  color: #f4ead2;
  border: none;
  border-radius: 8px;
  cursor: pointer;
}

#upgrades-btn.open {
  box-shadow: 0 0 0 2px #d9b545;
}

#upgrades-btn svg {
  width: 20px;
  height: 20px;
}

#upgrades-badge {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  box-sizing: border-box;
  border-radius: 9px;
  background: #d9b545;
  color: #10263a;
  font-size: 11px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
}

#upgrades-badge.hidden,
#upgrades-panel.hidden {
  display: none;
}

#upgrades-panel {
  position: fixed;
  top: 60px;
  right: 12px;
  width: 340px;
  max-height: calc(100vh - 80px);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  background: rgba(16, 38, 58, 0.95);
  color: #f4ead2;
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

@media (max-width: 600px) {
  #upgrades-panel {
    left: 12px;
    width: auto;
  }
}

.upg-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 14px 16px 8px;
}

.upg-head h2 {
  margin: 0;
  font-size: 18px;
}

#upgrades-ready {
  flex: 1;
  font-size: 12px;
  font-weight: 600;
  color: #d9b545;
}

#upgrades-close-btn {
  padding: 0 2px;
  background: none;
  border: none;
  color: #f4ead2;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}

#upgrades-list {
  overflow-y: auto;
  padding: 0 8px 10px;
}

.upg-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
}

.upg-row + .upg-row {
  border-top: 1px solid rgba(244, 234, 210, 0.08);
}

.upg-icon {
  flex: none;
  width: 30px;
  text-align: center;
  font-size: 20px;
}

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

.upg-name {
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.upg-meta {
  margin-top: 2px;
  font-size: 12px;
  opacity: 0.8;
}

.upg-bar {
  height: 3px;
  margin-top: 5px;
  background: rgba(244, 234, 210, 0.15);
  border-radius: 2px;
  overflow: hidden;
}

.upg-bar i {
  display: block;
  height: 100%;
  background: #7fa8c4;
}

.upg-buy {
  flex: none;
  padding: 6px 12px;
  background: #d9b545;
  color: #10263a;
  border: none;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.upg-wait {
  flex: none;
  min-width: 46px;
  padding: 4px 8px;
  text-align: center;
  border-radius: 9px;
  border: 1px solid rgba(169, 201, 214, 0.45);
  background: rgba(16, 38, 58, 0.88);
  color: #a9c9d6;
  font-size: 12px;
  font-weight: 650;
}

.zone-chip {
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 8px;
  background: rgba(169, 201, 214, 0.2);
  color: #a9c9d6;
  font-size: 10px;
  font-weight: 650;
  vertical-align: 1px;
}

.upg-empty {
  margin: 0;
  padding: 10px 16px 14px;
  text-align: center;
  font-size: 13px;
  opacity: 0.85;
  line-height: 1.45;
}

#menu-overlay {
  position: fixed;
  inset: 0;
  background: rgba(9, 20, 31, 0.75);
}

#menu-overlay.hidden {
  display: none;
}

#menu-panel {
  position: absolute;
  top: 60px;
  right: 12px;
  background: rgba(16, 38, 58, 0.95);
  color: #f4ead2;
  padding: 28px 36px;
  border-radius: 10px;
  min-width: 280px;
  max-width: 340px;
  text-align: center;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

#menu-panel h2 {
  margin: 0 0 18px;
  font-size: 22px;
  letter-spacing: 0.5px;
}

#menu-panel button {
  display: block;
  width: 100%;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-weight: bold;
  font-size: 14px;
  padding: 10px 16px;
  margin-bottom: 10px;
}

#menu-resume-btn {
  background: #d9b545;
  color: #10263a;
}

#menu-restart-btn {
  background: rgba(217, 88, 66, 0.85);
  color: #f4ead2;
}

#menu-credits {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(244, 234, 210, 0.2);
  font-size: 12px;
  opacity: 0.85;
}

#menu-credits p {
  margin: 4px 0;
}

#menu-credits a {
  color: #d9b545;
  text-decoration: none;
}

#menu-credits a:hover {
  text-decoration: underline;
}

#menu-main.hidden,
#menu-confirm.hidden,
#menu-achievements.hidden,
#menu-save.hidden,
#menu-settings.hidden,
#menu-shop.hidden {
  display: none;
}

#menu-confirm p {
  margin: 0 0 14px;
  font-size: 14px;
}

#menu-confirm button {
  display: block;
  width: 100%;
  border-radius: 4px;
  cursor: pointer;
  font-weight: bold;
  font-size: 14px;
  padding: 10px 16px;
  margin-bottom: 10px;
}

#menu-confirm-yes-btn {
  background: rgba(217, 88, 66, 0.85);
  color: #f4ead2;
  border: none;
}

#menu-panel #menu-confirm-no-btn {
  background: transparent;
  color: #f4ead2;
  border: 1px solid rgba(244, 234, 210, 0.4);
  margin-bottom: 0;
}

/* Written as ID + ID rather than a bare `#menu-achievements-btn`, because the
   generic `#menu-panel button` rule above is more specific than a lone id and
   would otherwise win on `border`. Same reason as #menu-confirm-no-btn. */
#menu-panel #menu-achievements-btn {
  background: transparent;
  color: #f4ead2;
  border: 1px solid rgba(244, 234, 210, 0.4);
}

#menu-panel #menu-save-btn,
#menu-panel #menu-save-copy-btn,
#menu-panel #menu-save-back-btn {
  background: transparent;
  color: #f4ead2;
  border: 1px solid rgba(244, 234, 210, 0.4);
}

#menu-panel #menu-save-back-btn {
  margin-bottom: 0;
}

#menu-panel #menu-save-load-btn {
  background: #d9b545;
  color: #10263a;
}

#menu-save textarea {
  display: block;
  width: 100%;
  box-sizing: border-box;
  resize: none;
  margin-bottom: 10px;
  padding: 8px;
  background: rgba(9, 20, 31, 0.6);
  color: #f4ead2;
  border: 1px solid rgba(244, 234, 210, 0.3);
  border-radius: 4px;
  font: 11px/1.3 monospace;
  word-break: break-all;
}

.menu-save-note {
  margin: 0 0 8px;
  font-size: 12px;
  opacity: 0.85;
}

#menu-save-status {
  min-height: 16px;
  margin: 0 0 10px;
  font-size: 12px;
  color: #d9b545;
}

#menu-achievements-list {
  text-align: left;
  max-height: 320px;
  overflow-y: auto;
  padding-right: 8px;
  margin-bottom: 14px;
}

.achievements-gold {
  margin: 0 0 12px;
  text-align: center;
  font-size: 15px;
  font-weight: bold;
  color: #d9b545;
}

.achievement-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-top: 1px solid rgba(244, 234, 210, 0.15);
}

.achievement-row.achieved {
  opacity: 1;
}

.achievement-row.locked {
  opacity: 0.45;
}

.achievement-status {
  width: 18px;
  flex: none;
  text-align: center;
  font-size: 14px;
}

.achievement-row.achieved .achievement-status {
  color: #d9b545;
  font-weight: bold;
}

.achievement-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}

.achievement-name {
  font-size: 13px;
  font-weight: bold;
}

.achievement-desc {
  font-size: 11px;
  opacity: 0.8;
}

.achievement-reward {
  flex: none;
  font-size: 12px;
  font-weight: bold;
  color: #d9b545;
}

#menu-panel #menu-achievements-back-btn {
  background: transparent;
  color: #f4ead2;
  border: 1px solid rgba(244, 234, 210, 0.4);
  margin-bottom: 0;
}

/* Above #prestige-overlay (10), which it can pop up over, and below #feedback-layer (20). */
#offline-overlay {
  position: fixed;
  inset: 0;
  z-index: 15;
  background: rgba(9, 20, 31, 0.75);
  display: flex;
  align-items: center;
  justify-content: center;
}

#offline-overlay.hidden {
  display: none;
}

#offline-panel {
  background: rgba(16, 38, 58, 0.95);
  color: #f4ead2;
  padding: 28px 36px;
  border-radius: 10px;
  min-width: 280px;
  max-width: 340px;
  text-align: center;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

#offline-panel h2 {
  margin: 0 0 14px;
  font-size: 22px;
  letter-spacing: 0.5px;
}

#offline-away {
  margin: 0 0 12px;
  font-size: 12px;
  line-height: 1.4;
  opacity: 0.8;
}

#offline-next {
  margin: 0 0 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(244, 234, 210, 0.2);
  font-size: 14px;
}

#offline-next.hidden {
  display: none;
}

#offline-next b {
  color: #d9b545;
}

#offline-go-btn {
  width: 100%;
  margin-top: 10px;
  border-radius: 4px;
  cursor: pointer;
  font-weight: bold;
  font-size: 14px;
  padding: 10px 16px;
  background: transparent;
  color: #f4ead2;
  border: 1px solid rgba(244, 234, 210, 0.4);
}

#offline-go-btn.hidden {
  display: none;
}

#offline-gains {
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
  font-size: 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

#offline-collect-btn {
  width: 100%;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-weight: bold;
  font-size: 14px;
  padding: 10px 16px;
  background: #d9b545;
  color: #10263a;
}

/* Centered and tall enough to reach the HUD (z-index 3), so it sits above it -- but below
   #feedback-layer (20), whose token popups must stay visible over the tree. */
#prestige-overlay {
  position: fixed;
  inset: 0;
  z-index: 10;
  background: rgba(9, 20, 31, 0.75);
  display: flex;
  align-items: center;
  justify-content: center;
}

#prestige-overlay.hidden {
  display: none;
}

#prestige-panel {
  background: rgba(16, 38, 58, 0.95);
  color: #f4ead2;
  padding: 28px 36px;
  border-radius: 10px;
  min-width: 280px;
  max-width: 340px;
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  text-align: center;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

/* The main and confirm views stay compact; the panel only widens while it shows the tree. */
#prestige-panel:has(#prestige-store:not(.hidden)) {
  width: min(680px, calc(100vw - 32px));
  max-width: none;
}

@media (max-width: 600px) {
  #prestige-panel {
    padding: 20px 16px;
  }
}

#prestige-panel h2 {
  margin: 0 0 18px;
  font-size: 22px;
  letter-spacing: 0.5px;
}

#prestige-panel button {
  display: block;
  width: 100%;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-weight: bold;
  font-size: 14px;
  padding: 10px 16px;
  margin-bottom: 10px;
}

#prestige-action-btn,
#node-detail-tier-btn {
  background: #d9b545;
  color: #10263a;
}

#prestige-action-btn:disabled,
#node-detail-tier-btn:disabled {
  background: #6b6b6b;
  color: #ccc;
  cursor: not-allowed;
}

#prestige-panel #prestige-store-btn {
  background: transparent;
  color: #f4ead2;
  border: 1px solid rgba(244, 234, 210, 0.4);
}

#prestige-main.hidden,
#prestige-confirm.hidden,
#prestige-store.hidden {
  display: none;
}

#prestige-confirm p {
  margin: 0 0 14px;
  font-size: 14px;
}

#prestige-confirm-yes-btn {
  background: #d9b545;
  color: #10263a;
  border: none;
}

#prestige-panel #prestige-confirm-no-btn {
  background: transparent;
  color: #f4ead2;
  border: 1px solid rgba(244, 234, 210, 0.4);
  margin-bottom: 0;
}

#prestige-store-tokens {
  margin: 0 0 14px;
  font-size: 16px;
  font-weight: bold;
}

/* The tree: an SVG of connector lines under absolutely placed nodes. js/ui.js places every node
   (x as a % of the width, y in px), and draws the lines in a 100-wide, 300-tall viewBox that is
   stretched across the tree, so this height must stay 300px. */
#prestige-tree {
  position: relative;
  height: 300px;
  margin-bottom: 8px;
}

#prestige-tree svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

#prestige-tree path {
  fill: none;
  stroke: #3d5568;
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
}

.tree-root,
.tree-hub,
#prestige-tree .tree-node {
  position: absolute;
  transform: translate(-50%, -50%);
}

.tree-root {
  width: 28px;
  height: 28px;
  line-height: 24px;
  border-radius: 50%;
  border: 2px solid #d9b545;
  background: #24455e;
  font-size: 13px;
}

.tree-hub {
  padding: 4px 10px;
  border-radius: 12px;
  border: 1px solid #3d5568;
  background: #1a3348;
  font-size: 10px;
  font-weight: bold;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

#prestige-tree .tree-node {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 84px;
  margin: 0;
  padding: 5px 2px;
  border: 2px solid #d9b545;
  border-radius: 8px;
  background: #24455e;
  color: #f4ead2;
  font-size: 12px;
  line-height: 1.2;
}

#prestige-tree .tree-node.lane {
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: 50%;
  font-size: 10px;
}

#prestige-tree .tree-node .tree-icon {
  font-size: 17px;
  font-weight: normal;
}

#prestige-tree .tree-node.lane .tree-icon {
  font-size: 15px;
}

#prestige-tree .tree-node small {
  font-size: 10px;
  opacity: 0.85;
}

#prestige-tree .tree-node.maxed,
#prestige-legend .maxed {
  background: #1f4a38;
  border-color: #8fe0a0;
}

#prestige-legend .buy {
  background: #24455e;
  border-color: #d9b545;
}

#prestige-tree .tree-node.poor,
#prestige-tree .tree-node.locked,
#prestige-legend .poor {
  background: #2a3f52;
  border-color: #52697c;
  color: #7fa0b3;
}

#prestige-tree .tree-node[aria-current="true"] {
  box-shadow: 0 0 0 3px rgba(244, 234, 210, 0.55);
}

#prestige-legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 14px;
  margin-bottom: 12px;
  font-size: 11px;
  opacity: 0.8;
}

#prestige-legend i {
  display: inline-block;
  width: 11px;
  height: 11px;
  margin-right: 5px;
  border: 2px solid;
  border-radius: 3px;
  vertical-align: -1px;
}

#prestige-node-detail {
  margin-bottom: 12px;
  padding: 12px 14px;
  border-radius: 8px;
  background: rgba(244, 234, 210, 0.06);
  text-align: left;
}

#prestige-node-detail.hidden,
#prestige-panel #node-detail-tier-btn.hidden,
#node-detail-qty.hidden {
  display: none;
}

#prestige-node-detail p {
  margin: 0 0 6px;
  font-size: 13px;
}

#prestige-node-detail #node-detail-title {
  margin-bottom: 2px;
  font-size: 16px;
  font-weight: bold;
}

#prestige-node-detail #node-detail-meta {
  font-size: 12px;
  opacity: 0.75;
}

#prestige-node-detail #node-detail-cost {
  margin-bottom: 10px;
  font-weight: bold;
}

#prestige-panel #node-detail-tier-btn,
#node-detail-qty {
  margin-bottom: 0;
}

#node-detail-qty button {
  flex: 1;
}

.store-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  font-size: 14px;
}

#prestige-panel .store-row button {
  width: auto;
  display: inline-block;
  margin-bottom: 0;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-weight: bold;
  font-size: 12px;
  padding: 6px 8px;
  background: #d9b545;
  color: #10263a;
}

#prestige-panel .store-row button:disabled {
  background: #6b6b6b;
  color: #ccc;
  cursor: not-allowed;
}

#prestige-panel #prestige-store-back-btn {
  display: block;
  width: 100%;
  border: 1px solid rgba(244, 234, 210, 0.4);
  border-radius: 4px;
  cursor: pointer;
  font-weight: bold;
  font-size: 14px;
  padding: 10px 16px;
  background: transparent;
  color: #f4ead2;
  margin-top: 4px;
}

/* A zero-size anchor point just below #resource-bar (which is 12px from the top
   and ~47px tall, counting the rate line). Popups are absolutely positioned against
   it and centre themselves on it with their own translateX(-50%). The z-index
   deliberately lifts it above the menu/prestige/offline overlays, so the token
   popups fired from inside the prestige tree stay visible. */
#feedback-layer {
  position: fixed;
  top: 62px;
  left: 50%;
  width: 0;
  height: 0;
  pointer-events: none;
  z-index: 20;
}

.feedback-popup {
  position: absolute;
  left: 0;
  display: flex;
  gap: 8px;
  white-space: nowrap;
  font-size: 18px;
  font-weight: bold;
  text-shadow: 0 2px 4px rgba(9, 20, 31, 0.7);
  transform: translateX(-50%);
  animation: float-up 1.2s ease-out forwards;
}

.feedback-popup .gain {
  color: #d9b545;
}

.feedback-popup .loss {
  color: rgba(217, 88, 66, 0.85);
}

@keyframes float-up {
  from {
    opacity: 1;
    transform: translate(-50%, 0);
  }
  to {
    opacity: 0;
    transform: translate(-50%, -50px);
  }
}