/* R-008.3/R-008.12/R-008.13: tier strip + bottom power-up tray + the hill
   decoration behind it. Colour only via the --c-<key> custom properties
   (R-008.10) — surface/muted/mutedLine cover every white/disabled-grey face
   here, so no hex literal is left in this file (A-008.9). Split from
   hud.css/components.css so every file stays <=300 lines (CLAUDE.md §4).
   Icon colour classes (.icon-*) are defined once in hud.css and reused here.
   The `--pw-face`/`--pw-lip` mapping (R-008.2/R-008.8) is generic on
   `[data-powerup]`, not scoped to `.tray-btn`, so ui/popups.js's buy-popup
   icon face (cards.css) can reuse the very same rule. */

/* ---- R-008.3: tier strip. `.chain-bar` is reused by the game-over card's
   seen-tiers strip (R-008.5/R-008.8, ui/screens.js) via the same
   ui/chainBar.js rendering; #chain-bar (the play-screen footer) only adds
   its own outer margin. ---- */
.chain-bar {
  flex: 0 0 auto;
  padding: 0 10px;
  height: 46px;
  border-radius: 999px;
  background: var(--c-panel);
  border: 3px solid var(--c-text);
  display: flex;
  align-items: center;
}
#chain-bar { margin: 8px 12px 0; }

.chain-bar-tiers {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  /* R-008.3: sprites are now sized to fit (ui/chainBar.js's fitTierSize), so
     nothing needs to scroll/clip — no overflow-x here. */
  min-width: 0;
}

.chain-bar-tier { display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }

/* R-008.3/R-008.15: unseen tiers are greyscale at 45% opacity. */
.chain-bar-tier.unseen canvas { filter: grayscale(1) brightness(0.7); opacity: 0.45; }

/* ---- R-008.12/R-008.13: bottom tray ---- */
#tray {
  position: relative;
  overflow: hidden; /* R-008.13: clips the hill decoration, never the board */
  flex: 0 0 auto;
  margin-top: 8px;
  padding: 14px 14px 12px;
  background: var(--c-background);
}

/* R-008.13: hill (outlined in text) + inner hillLight ellipse, pure CSS. */
.hill-decor { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.hill {
  position: absolute;
  left: 50%;
  bottom: -70%;
  transform: translateX(-50%);
  width: 160%;
  height: 220%;
  border-radius: 50%;
  background: var(--c-hill);
  border: 3px solid var(--c-text);
}
.hill-light {
  position: absolute;
  left: 50%;
  bottom: -70%;
  transform: translateX(-50%);
  width: 126%;
  height: 188%;
  border-radius: 50%;
  background: var(--c-hillLight);
}

.tray-row {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

/* R-008.18: padding-top leaves clearance above .tray-btn-wrap for the info
   button, which pokes out 21px above/left of the tray button. */
.tray-item { display: flex; flex-direction: column; align-items: center; gap: 5px; min-height: 44px; padding-top: 22px; }

/* R-008.18: the tray button plus its info-button corner share this
   position:relative box (66x66, matching .tray-btn) so the info button's
   -21px offsets are relative to the tray button itself, not the whole item
   column (whose price/need/hint chips sit below at a fixed gap). */
.tray-btn-wrap { position: relative; width: 66px; height: 66px; }

/* R-008.12: chunky button, >=64x64, ink border/lip/drop (R-008.14); face and
   lip colour per power-up id via --pw-face/--pw-lip. */
.tray-btn {
  position: relative;
  width: 66px;
  height: 66px;
  padding: 0;
  border-radius: 20px;
  border: 3px solid var(--c-text);
  background: var(--pw-face);
  box-shadow: inset 0 -6px 0 var(--pw-lip), 0 4px 0 var(--c-text);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.tray-btn:active { transform: translateY(4px); box-shadow: inset 0 -3px 0 var(--pw-lip), 0 2px 0 var(--c-text); }
.tray-btn[disabled] { cursor: default; }

/* R-008.2: "just bought" bounce on 'coinsSpent' (scale 1 -> 1.12 -> 1). */
.tray-btn.bounce { animation: tray-bounce 250ms ease; }
@keyframes tray-bounce {
  0% { transform: scale(1); }
  50% { transform: scale(1.12); }
  100% { transform: scale(1); }
}

[data-powerup="shake"] { --pw-face: var(--c-pwShake); --pw-lip: var(--c-pwShakeLip); }
[data-powerup="removeSmallest"] { --pw-face: var(--c-pwRemoveSmallest); --pw-lip: var(--c-pwRemoveSmallestLip); }
[data-powerup="upgrade"] { --pw-face: var(--c-pwUpgrade); --pw-lip: var(--c-pwUpgradeLip); }
[data-powerup="bomb"] { --pw-face: var(--c-pwBomb); --pw-lip: var(--c-pwBombLip); }

/* R-008.18: 24px surface dot with a text border/drop and a display-font "i",
   centred in a transparent 44x44 button whose centre sits 9px outside the
   tray button's top-left corner (design Tray.dc.html: box top/left -21px,
   box size 44px -> centre at -21+22 = 1px inside the corner on each axis,
   i.e. 9px outside the 66px button's own -10/-10 corner reference point). */
.tray-info {
  position: absolute;
  top: -21px;
  left: -21px;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.tray-info[disabled] { cursor: default; }
.tray-info-dot {
  width: 24px;
  height: 24px;
  box-sizing: border-box;
  border-radius: 999px;
  background: var(--c-surface);
  border: 2.5px solid var(--c-text);
  box-shadow: 0 2px 0 var(--c-text);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Lilita One', sans-serif;
  font-size: 15px;
  line-height: 1;
  color: var(--c-text);
}

/* R-008.2 for-sale/can't-afford: price chip. */
.tray-price {
  display: none;
  align-items: center;
  gap: 3px;
  padding: 1px 7px 1px 2px;
  border-radius: 999px;
  background: var(--c-surface);
  border: 2px solid var(--c-text);
  color: var(--c-text);
  font-weight: 700;
  font-size: 12px;
}
.tray-item[data-state="forSale"] .tray-price,
.tray-item[data-state="cantAfford"] .tray-price { display: flex; }
.tray-item[data-state="cantAfford"] .tray-price { border-color: var(--c-danger); color: var(--c-danger); }

/* R-008.2/R-008.10 can't afford (and its nudge): greyed face using
   palette.muted/mutedLine. */
.tray-item[data-state="cantAfford"] .tray-btn,
.tray-item[data-state="nudge"] .tray-btn {
  --pw-face: var(--c-muted);
  --pw-lip: var(--c-muted);
  border-color: var(--c-mutedLine);
  box-shadow: 0 4px 0 var(--c-mutedLine);
  opacity: 0.9;
}

/* R-008.2 nudge: "Need N more" danger chip replaces the price chip for
   POWERUP_NUDGE_MS, and the button wiggles (~+-5px, +-4deg, 300ms). */
.tray-need {
  display: none;
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--c-danger);
  border: 2px solid var(--c-text);
  color: var(--c-surface);
  font-weight: 700;
  font-size: 12px;
  white-space: nowrap;
}
.tray-item[data-state="nudge"] .tray-need { display: inline-block; }

.nudge-wiggle { animation: tray-nudge 300ms ease; }
@keyframes tray-nudge {
  0% { transform: translateX(0) rotate(0deg); }
  20% { transform: translateX(-5px) rotate(-4deg); }
  40% { transform: translateX(5px) rotate(4deg); }
  60% { transform: translateX(-4px) rotate(-3deg); }
  80% { transform: translateX(4px) rotate(3deg); }
  100% { transform: translateX(0) rotate(0deg); }
}

/* R-008.2/R-007.4 targeting: highlight ring, pressed-in, hint chip
   ("targetHint · [coin] price"). */
.tray-item[data-state="targeting"] .tray-btn {
  box-shadow: 0 0 0 4px var(--c-surface), 0 0 0 7px var(--c-text);
  transform: translateY(2px);
}
.tray-hint {
  display: none;
  align-items: center;
  gap: 3px;
  padding: 1px 8px 1px 7px;
  border-radius: 999px;
  background: var(--c-text);
  color: var(--c-surface);
  font-weight: 700;
  font-size: 11px;
  white-space: nowrap;
}
.tray-item[data-state="targeting"] .tray-hint { display: inline-flex; }