/* ============================================================
   HypeCity Tycoon — "Editorial Arcade" FX overlay
   Games redesign 2026-05-21 (branch agent/games-redesign)

   Game-grade polish for the Tycoon GAME screens ONLY. Linked from
   the in-scope screens (index, play, market, portfolio, property,
   achievements, tycoon/leaderboard, roadmap, tutorial) — deliberately
   NOT from the shared payment pages (pro/billing, pro/upgrade, …),
   so restyling the shared .btn / .card here never ripples into
   Stripe/checkout surfaces. Because the rules only exist where this
   file is loaded, scoping is automatic.

   Pairs with games-fx.css (motion atoms) + games-fx.js (confetti,
   count-up, haptics). Fully reduced-motion safe.
   ============================================================ */

/* ── Tactile primary / gold buttons ─────────────────────── */
.btn--primary,
.btn--gold {
  border: 1.5px solid var(--ink-primary, #1F1D1A);
  box-shadow: 0 4px 0 0 var(--brass-deep, #5E4D2A);
  transition: transform .12s cubic-bezier(.4,0,.2,1), box-shadow .12s cubic-bezier(.4,0,.2,1), background .15s ease;
  position: relative;
  overflow: hidden;
}
.btn--primary:hover:not(:disabled),
.btn--gold:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 6px 0 0 var(--brass-deep, #5E4D2A);
}
.btn--primary:active:not(:disabled),
.btn--gold:active:not(:disabled) {
  transform: translateY(3px);
  box-shadow: 0 1px 0 0 var(--brass-deep, #5E4D2A);
}
.btn--gold { box-shadow: 0 4px 0 0 var(--gold-deep, #9A7C28); }
.btn--gold:hover:not(:disabled) { box-shadow: 0 6px 0 0 var(--gold-deep, #9A7C28); }
.btn--gold:active:not(:disabled) { box-shadow: 0 1px 0 0 var(--gold-deep, #9A7C28); }
.btn:focus-visible { outline: 3px solid var(--brass, #8B6F3D); outline-offset: 3px; }

/* ── Interactive cards lift with a hard editorial shadow ── */
.card--interactive {
  transition: border-color .18s ease, transform .22s cubic-bezier(.34,1.56,.64,1), box-shadow .22s ease;
}
.card--interactive:hover {
  transform: translateY(-5px);
  box-shadow: 0 18px 38px -18px rgba(31,29,26,.32), 0 5px 0 0 var(--ink-primary, #1F1D1A);
}
.card--interactive:active { transform: translateY(-1px); }

/* ── Big money figures: tabular + settle animation hook ─── */
.tycoon-num,
[data-tycoon-num] {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* ── Net-worth / hero value flourish ────────────────────── */
@keyframes tycoonValuePop {
  0% { transform: scale(.96); opacity: .6; }
  60% { transform: scale(1.015); opacity: 1; }
  100% { transform: scale(1); }
}
.tycoon-value-pop { animation: tycoonValuePop .5s cubic-bezier(.34,1.56,.64,1); }

/* ── Positive / negative deltas get a quick flash ───────── */
@keyframes deltaFlashUp   { 0%{ background: var(--gold-soft, rgba(201,169,97,.15)); } 100%{ background: transparent; } }
@keyframes deltaFlashDown { 0%{ background: var(--neg-soft, rgba(139,68,68,.12)); } 100%{ background: transparent; } }
.delta-up   { animation: deltaFlashUp .9s ease-out; border-radius: 6px; }
.delta-down { animation: deltaFlashDown .9s ease-out; border-radius: 6px; }

@media (prefers-reduced-motion: reduce) {
  .btn--primary, .btn--gold,
  .btn--primary:hover:not(:disabled), .btn--gold:hover:not(:disabled),
  .btn--primary:active:not(:disabled), .btn--gold:active:not(:disabled) { transform: none; transition: background .15s ease; }
  .card--interactive { transition: border-color .18s ease; }
  .card--interactive:hover { transform: none; box-shadow: 0 4px 0 0 var(--ink-primary, #1F1D1A); }
  .tycoon-value-pop, .delta-up, .delta-down { animation: none; }
}