/* Full-screen scrims (popups + the game-over overlay) and the landscape
   rotate overlay — split out of style.css so each stylesheet stays <=300
   lines (CLAUDE.md §3). Card/button/stat-tile styling for both popups and
   the game-over card lives in cards.css (round-3 ribbon-card redesign);
   HUD, tier strip and tray styles live in hud.css/tray.css. R-008.10:
   colour only via the --c-* custom properties main.js sets on :root from
   theme.palette, plus rgba(0, 0, 0, a) scrims (A-008.9). */

/* ---- popups (R-007.3, R-008.4, R-008.8) ---- */
.popup-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  /* R-014.6: above the game-over overlay (z-index 30) so a popup opened
     from it sits on top, but below the landscape rotate overlay (R-008.7,
     z-index 40), which must stay above every popup. */
  z-index: 35;
  padding: 16px;
}

/* ---- game-over overlay (R-008.5) ---- */
.overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 30;
  padding: 16px;
}

/* R-008.9/R-007.8: danger-coloured "-N" float from the coins pill on
   'coinsSpent' — reuses hud.css's `.coin-float`/`.rise` (position, pooling,
   font), overriding only colour and duration (600ms vs. the +N float's
   700ms); loaded after hud.css so this wins at equal selector specificity. */
.coin-float--spend { color: var(--c-danger); }
.coin-float--spend.rise { animation: coin-float-rise 600ms ease-out forwards; }

/* ---- R-008.7: landscape "rotate your phone" overlay, CSS-only trigger ---- */
#rotate-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 40;
  align-items: center;
  justify-content: center;
  background: var(--c-background);
  color: var(--c-text);
  font-size: 18px;
  text-align: center;
  padding: 16px;
}

@media (orientation: landscape) and (max-height: 500px) {
  #rotate-overlay { display: flex; }
}

/* ---- R-020.3/R-008.2: power-up tray "used up" state ----
   Tray states otherwise live in tray.css (R-008.12/R-008.13), but this
   spec's delegation keeps every file it touches to the list it names, so the
   used-up face/hint/shake rules live here instead. Colour only via the
   --c-<key> custom properties (R-008.10) — same muted/mutedLine treatment as
   the existing can't-afford state — so no hex literal is added (A-008.9). */
.tray-item[data-state="usedUp"] .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;
}
.tray-item[data-state="usedUp"] .tray-hint {
  display: inline-flex;
  background: var(--c-muted);
  color: var(--c-text);
}
/* R-020.4: the used-up chip is just powerUpLimitHint text, no coin icon or
   price (the same .tray-hint element shows the targeting chip otherwise). */
.tray-item[data-state="usedUp"] .tray-hint [data-icon],
.tray-item[data-state="usedUp"] .tray-hint-price { display: none; }

/* R-020.3: a tap on a used-up button does nothing but this short shake. */
@keyframes tray-btn-shake {
  10%, 90% { transform: translateX(-1px); }
  20%, 80% { transform: translateX(2px); }
  30%, 50%, 70% { transform: translateX(-4px); }
  40%, 60% { transform: translateX(4px); }
}
.tray-btn.shake { animation: tray-btn-shake 400ms; }