/* 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;
}

.tray-item { display: flex; flex-direction: column; align-items: center; gap: 5px; min-height: 44px; }

/* 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; }

[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.2 owned: count badge, top-right corner. */
.tray-badge {
  position: absolute;
  top: -10px;
  right: -10px;
  min-width: 24px;
  height: 24px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--c-accent);
  border: 2px solid var(--c-text);
  color: var(--c-surface);
  font-family: 'Lilita One', sans-serif;
  font-size: 13px;
  line-height: 20px;
  text-align: center;
  display: none;
}
.tray-item[data-state="owned"] .tray-badge { display: block; }

/* R-008.2 owned: the power-up name under the button. */
.tray-label { display: none; font-weight: 700; font-size: 13px; color: var(--c-text); }
.tray-item[data-state="owned"] .tray-label { display: block; }

/* 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: greyed face using palette.muted/mutedLine. */
.tray-item[data-state="cantAfford"] .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/R-007.4 targeting: highlight ring, pressed-in, hint chip. */
.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;
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--c-text);
  color: var(--c-surface);
  font-weight: 700;
  font-size: 11px;
}
.tray-item[data-state="targeting"] .tray-hint { display: inline-block; }