/* ═══════════════════════════════════════════════════════════════════
   Math Hero — hero-shop, collections and chest-cinematic styles.
   Loaded after economy.css, so anything here wins where the two meet.
   Ports ShopView.swift and Celebrations.swift. Rules:
   • logical properties only (the app runs dir="rtl" in Hebrew)
   • animation is transform/opacity only (this runs in a WebView)
   • every colour goes through the theme custom properties
   ═══════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────────
   1. Item cards — the whole card is the button (ShopView.swift:457-531)
   ───────────────────────────────────────────────────────────────── */

.itemCard {
  position: relative;
  appearance: none; -webkit-appearance: none;
  width: 100%; padding: 22px 6px 10px;
  font: inherit; color: inherit; text-align: center;
  cursor: pointer;
  transition: transform .18s var(--m-bouncy),
              border-color .25s, box-shadow .25s, opacity .25s;
}
.itemCard:active { transform: scale(.93); }
.itemCard.dim { opacity: .65; }
.itemCard.locked { opacity: .6; }
.itemCard.on .itemEmoji { filter: drop-shadow(0 0 8px rgba(255, 217, 61, .6)); }

/* Rarity capsule, top-leading corner. --rar is the per-tier tint. */
.rarBadge {
  position: absolute; top: 5px; inset-inline-start: 5px;
  padding: 2px 6px; border-radius: 999px;
  font-size: 8px; font-weight: 900; line-height: 1.35; letter-spacing: .2px;
  color: var(--rar);
  background: color-mix(in srgb, var(--rar) 15%, transparent);
  border: 1px solid color-mix(in srgb, var(--rar) 45%, transparent);
  pointer-events: none;
}

.itemCard .itemEmoji { position: relative; display: inline-block; }
.itemLock {
  position: absolute; top: -6px; inset-inline-end: -10px;
  font-size: 14px; font-style: normal; line-height: 1;
}

.itemState {
  font-size: 11px; font-weight: 900; color: var(--text-faint);
}
.itemState.eq { color: var(--green); }
.itemPrice {
  font-size: 12px; font-weight: 900; color: var(--yellow);
  font-variant-numeric: tabular-nums;
}
.itemPrice.poor { color: var(--red); }

/* Denied purchase: the same shake economy.css gives .buyBtn. */
.itemCard.deny, .puCard.deny, .freezeRow.deny { animation: denyShake .35s linear; }

/* ─────────────────────────────────────────────────────────────────
   2. Themed collection containers (space / Pro / coin packs)
   ───────────────────────────────────────────────────────────────── */

.collSec { position: relative; }
.spaceSec {
  background: color-mix(in srgb, var(--purple) 6%, var(--card-fill));
  border-color: color-mix(in srgb, var(--purple) 45%, transparent);
  box-shadow: 0 5px 12px color-mix(in srgb, var(--purple) 20%, transparent);
}

.proSec {
  background: color-mix(in srgb, var(--yellow) 4%, var(--card-fill));
  border-color: color-mix(in srgb, var(--yellow) 35%, transparent);
}
.proSec.on {
  background: color-mix(in srgb, var(--yellow) 8%, var(--card-fill));
  border-color: color-mix(in srgb, var(--yellow) 80%, transparent);
  box-shadow: 0 6px 18px color-mix(in srgb, var(--yellow) 30%, transparent);
}
.lockGlyph { font-size: 13px; margin-inline-start: 2px; }
.proBadge {
  margin-inline-start: auto; padding: 3px 9px; border-radius: 999px;
  font-size: 10px; font-weight: 900; color: #1a1a4e;
  background: linear-gradient(135deg, var(--yellow), var(--orange));
}
.proHint {
  text-align: center; font-size: 12px; font-weight: 800; color: var(--yellow);
  animation: proHintIn .28s var(--m-snappy) both;
}
.proHint[hidden] { display: none; }
@keyframes proHintIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}
.proCTA {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  width: 100%; min-height: 40px; padding: 6px 12px; border-radius: 14px;
  font-size: 12px; font-weight: 900; line-height: 1.35; color: #fff;
  background: linear-gradient(180deg, var(--yellow-deep), var(--orange));
  border: 1px solid rgba(255, 255, 255, .4);
  box-shadow: 0 3px 8px color-mix(in srgb, var(--orange) 45%, transparent);
  transition: transform .15s ease;
}
.proCTA:active { transform: scale(.96); }

/* ─────────────────────────────────────────────────────────────────
   3. Power-up cards (2-column grid, ShopView.swift:732-816)
   ───────────────────────────────────────────────────────────────── */

.puGrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.puCard {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  padding: 12px 8px; border-radius: 16px;
  background: var(--track-fill); border: 1.5px solid var(--card-stroke);
  font: inherit; color: inherit; text-align: center; cursor: pointer;
  transition: transform .18s var(--m-bouncy), box-shadow .25s;
}
.puCard:active { transform: scale(.94); }
.puCard .puEmoji { font-size: 34px; line-height: 1; }
.puCard b { font-size: 12px; font-weight: 900; }
.puCard small {
  font-size: 10px; font-weight: 700; color: var(--text-secondary);
  line-height: 1.3;
  /* Two lines max, so every card in a row lines its price pill up. */
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  overflow: hidden;
}
.puCard .pricePill { margin-top: auto; }
.puCard .puCount {
  position: absolute; top: 6px; inset-inline-end: 6px;
  padding: 3px 8px; border-radius: 999px;
  font-style: normal; font-size: 11px; font-weight: 900; color: #fff;
  background: linear-gradient(135deg, var(--purple), var(--teal));
  box-shadow: 0 1px 4px color-mix(in srgb, var(--purple) 40%, transparent);
  animation: puCountPop .3s cubic-bezier(.3, 1.8, .5, 1);
}
@keyframes puCountPop {
  0% { transform: scale(1); } 45% { transform: scale(1.35); } 100% { transform: scale(1); }
}

/* Shared coin-price capsule (power-up card + streak-freeze row). */
.pricePill {
  margin-top: 2px; padding: 5px 12px; border-radius: 999px;
  font-size: 13px; font-weight: 900; color: var(--yellow);
  font-variant-numeric: tabular-nums;
  background: var(--card-fill);
  border: 1.5px solid color-mix(in srgb, var(--yellow) 50%, transparent);
}
.pricePill.poor {
  color: var(--red);
  border-color: color-mix(in srgb, var(--red) 50%, transparent);
}
.pricePill.capped {
  color: var(--text-faint);
  border-color: color-mix(in srgb, var(--text-faint) 50%, transparent);
}

/* ─────────────────────────────────────────────────────────────────
   4. Streak-freeze row (ShopView.swift:615-701)
   ───────────────────────────────────────────────────────────────── */

.freezeRow {
  display: flex; align-items: center; gap: 10px;
  width: 100%; padding: 12px; border-radius: 16px;
  background: var(--card-fill);
  border: 1px solid color-mix(in srgb, var(--teal) 35%, transparent);
  box-shadow: 0 4px 10px color-mix(in srgb, var(--teal) 15%, transparent);
  font: inherit; color: inherit; cursor: pointer;
  transition: transform .18s var(--m-bouncy), opacity .25s;
}
.freezeRow:active { transform: scale(.97); }
.freezeRow.dim { opacity: .75; }
/* At the cap of 2 the row is inert — the same rule as the weekly Pro grant. */
.freezeRow.capped { opacity: .55; cursor: default; }
.freezeRow.capped:active { transform: none; }
.freezeEmoji {
  font-size: 32px; line-height: 1; flex: none;
  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--teal) 40%, transparent));
}
.freezeInfo {
  flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px;
  text-align: start;
}
.freezeInfo b { font-size: 13px; font-weight: 900; }
.freezeInfo small { font-size: 10px; font-weight: 700; color: var(--text-secondary); line-height: 1.35; }
.freezeCount {
  flex: none; padding: 3px 8px; border-radius: 999px;
  font-size: 11px; font-weight: 900; color: #fff;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(135deg, var(--teal), var(--purple));
}
.freezeRow .pricePill { margin-top: 0; flex: none; }

/* ─────────────────────────────────────────────────────────────────
   5. Coin packs (ShopView.swift:872-1074)
   ───────────────────────────────────────────────────────────────── */

.packSec {
  background: color-mix(in srgb, var(--teal) 6%, var(--card-fill));
  border-color: color-mix(in srgb, var(--teal) 45%, transparent);
  transition: transform .35s var(--m-bouncy),
              border-color .35s, box-shadow .35s;
}
/* The out-of-coins nudge: 1.8 s of extra presence, then back to normal. */
.packSec.pulse {
  transform: scale(1.03);
  border-color: var(--teal);
  box-shadow: 0 8px 22px color-mix(in srgb, var(--teal) 55%, transparent);
}
.outOfCoins {
  margin-inline-start: auto; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-size: 10px; font-weight: 900; color: var(--teal);
  opacity: 0; transform: translateX(-6px);
  transition: opacity .3s ease, transform .3s ease;
  pointer-events: none;
}
[dir="rtl"] .outOfCoins { transform: translateX(6px); }
.outOfCoins.show { opacity: 1; transform: none; }

.packRow {
  display: flex; align-items: stretch; gap: 10px; padding: 12px 2px 4px;
  overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none;
}
.packRow::-webkit-scrollbar { display: none; }
.packCard {
  position: relative; flex: none; width: 120px;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 14px 8px; border-radius: 18px;
  background: var(--card-fill); border: 1px solid var(--card-stroke);
  font: inherit; color: inherit; cursor: pointer;
  transition: transform .18s var(--m-bouncy);
}
.packCard:active { transform: scale(.94); }
.packCard.feat {
  border: 1.5px solid var(--yellow);
  box-shadow: 0 4px 12px color-mix(in srgb, var(--yellow) 28%, transparent);
}
.packRibbon {
  position: absolute; top: -9px; inset-inline-start: 50%;
  transform: translateX(-50%);
  padding: 3px 8px; border-radius: 999px; white-space: nowrap;
  font-size: 9px; font-weight: 900; color: #1a1a4e;
  background: linear-gradient(135deg, var(--yellow), var(--orange));
  box-shadow: 0 1px 4px color-mix(in srgb, var(--yellow) 40%, transparent);
}
[dir="rtl"] .packRibbon { transform: translateX(50%); }
.packAmt {
  font-size: 20px; font-weight: 900; color: var(--yellow);
  font-variant-numeric: tabular-nums;
}
.packBonus {
  padding: 2px 7px; border-radius: 999px;
  font-size: 10px; font-weight: 900; color: var(--green);
  background: color-mix(in srgb, var(--green) 15%, transparent);
}
/* Keeps every card in the row the same height when a pack has no bonus. */
.packBonus.ghost { visibility: hidden; }
.packPrice {
  min-width: 64px; padding: 6px 12px; border-radius: 999px;
  font-size: 13px; font-weight: 900; color: #fff; text-align: center;
  background: linear-gradient(135deg, var(--teal), var(--purple));
  box-shadow: 0 2px 5px color-mix(in srgb, var(--teal) 35%, transparent);
}
.packsLoading {
  padding: 14px; border-radius: 16px; text-align: center;
  font-size: 12px; font-weight: 700; color: var(--text-secondary);
  background: var(--card-fill); border: 1px solid var(--card-stroke);
}
.packFine {
  text-align: center; font-size: 10px; font-weight: 700;
  line-height: 1.5; color: var(--text-faint);
}
/* The App-Store fallback lives inside the packs section now. */
.packSec .iosLockTitle, .packSec .iosLockBody { text-align: center; }
.packSec .iosLockBody { margin-inline: auto; }
.packSec .iosLockBtn { align-self: center; }

/* ─────────────────────────────────────────────────────────────────
   6. In-round power-up bar — zero-count kinds dim, never vanish
   ───────────────────────────────────────────────────────────────── */

.puBtn:disabled { cursor: default; }
.puBtn.off { opacity: .35; }
.puBtn.off i { filter: grayscale(1); }

/* ─────────────────────────────────────────────────────────────────
   7. Home chest card — dot sizing and the 2.4 rad/s wobble
   ───────────────────────────────────────────────────────────────── */

/* iOS draws the current dot at 16 pt, not a scaled-up 11 pt one. */
.cDot.cur { width: 16px; height: 16px; transform: none; font-size: 9px; }
/* sin(t · 2.4) · 6° — one period is 2π/2.4 ≈ 2.62 s. */
@keyframes chestWobble {
  0%   { transform: rotate(0deg); }
  25%  { transform: rotate(6deg); }
  50%  { transform: rotate(0deg); }
  75%  { transform: rotate(-6deg); }
  100% { transform: rotate(0deg); }
}
.chestRow.openable .chestEmoji { animation: chestWobble 2.62s ease-in-out infinite; }

/* Mission rows: progress under the bar, reward on the trailing edge. */
.mInfo .mProg { font-size: 10.5px; line-height: 1; }
.mReward {
  flex: none; font-size: 12px; font-weight: 900; color: var(--yellow);
  font-variant-numeric: tabular-nums;
}

/* ─────────────────────────────────────────────────────────────────
   8. Chest cinematic (Celebrations.swift:15-580)
   ───────────────────────────────────────────────────────────────── */

#chestStage { gap: 0; }

/* (c) 14 rotating god rays, 0.5 rad/s ≈ 12.6 s a turn. */
.chRays {
  position: absolute; width: 340px; height: 340px; border-radius: 50%;
  top: 50%; left: 50%; margin: -220px 0 0 -170px;
  background: repeating-conic-gradient(
    rgba(255, 217, 61, .35) 0deg 10.8deg, transparent 10.8deg 25.714deg);
  -webkit-mask: radial-gradient(circle, rgba(0, 0, 0, .95) 8%, transparent 72%);
  mask: radial-gradient(circle, rgba(0, 0, 0, .95) 8%, transparent 72%);
  opacity: 0; transform: scale(.4);
  transition: opacity .25s ease, transform .45s var(--m-bouncy);
  pointer-events: none;
}
.chRays.show { opacity: 1; transform: scale(1); animation: chRaySpin 12.57s linear infinite; }
@keyframes chRaySpin { to { transform: scale(1) rotate(360deg); } }

/* (c) White flash at the burst instant, 0.38 s. */
.chFlash {
  position: fixed; inset: 0; pointer-events: none; opacity: 0;
  background: radial-gradient(circle at 50% 45%,
    rgba(255, 255, 255, .85) 0%, rgba(255, 255, 255, 0) 62%);
}
.chFlash.on { animation: chFlashOut .38s linear forwards; }
@keyframes chFlashOut { from { opacity: 1; } to { opacity: 0; } }

/* Ticking coin counter above the chest. */
.chCounter {
  position: relative; z-index: 4;
  display: flex; align-items: center; gap: 8px; direction: ltr;
  opacity: 0; transform: scale(.7);
  transition: opacity .25s ease, transform .35s var(--m-bouncy);
}
.chCounter.show { opacity: 1; transform: none; }
.chCounter .chCoinIcon { font-size: 30px; }
.chCounter .chNum {
  font-size: 40px; font-weight: 900; color: var(--yellow);
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 12px rgba(255, 217, 61, .6);
}
/* Each of the 14 steps gets its own small spring. */
.chNum.tick { animation: chTick .25s var(--m-bouncy); }
@keyframes chTick { 0% { transform: scale(1); } 40% { transform: scale(1.12); } 100% { transform: scale(1); } }

/* (a)(b) The chest: 132×86 body under a lid hinged at its top edge. */
.chChestWrap {
  position: relative; z-index: 2;
  width: 152px; height: 142px; margin: 10px 0 6px;
}
.chChest {
  position: absolute; inset: 0;
  perspective: 260px;
  filter: drop-shadow(0 8px 12px rgba(0, 0, 0, .35));
}
.chChest .chBody { position: absolute; left: 10px; top: 56px; }
.chChest .chLid {
  position: absolute; left: 5px; top: 16px;
  transform-origin: 50% 0%;
  transform: rotateX(0deg);
  /* 1 − (1 − p)³ over 0.3 s: the lid flies open, then eases. */
  transition: transform .3s cubic-bezier(.215, .61, .355, 1);
}
.chChest.open .chLid { transform: rotateX(-118deg); }
/* Warm light leaking out of an open chest. */
.chGlow {
  position: absolute; left: 50%; top: 10px;
  width: 220px; height: 220px; margin-inline-start: -110px;
  background: radial-gradient(circle,
    rgba(255, 217, 61, .55) 0%, rgba(255, 217, 61, 0) 52%);
  opacity: 0; transition: opacity .3s ease; pointer-events: none;
}
.chChest.open .chGlow { opacity: 1; }

.chChest.drop { animation: chDropIn .5s cubic-bezier(.25, 1.3, .45, 1) both; }
@keyframes chDropIn {
  0%   { transform: translateY(-58vh) scale(.7); opacity: 0; }
  70%  { transform: translateY(6px) scale(1.06); opacity: 1; }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}
/* One 0.16 s rattle per anticipation beat. */
.chChest.shake { animation: chRattle .16s ease-in-out; }
@keyframes chRattle {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(6.5deg); }
  50% { transform: rotate(0deg); }
  75% { transform: rotate(-5deg); }
}

.chParticles { position: absolute; inset: 0; pointer-events: none; overflow: visible; }
.chSpark {
  position: absolute; top: 40%; left: 50%; margin: -9px;
  font-size: 17px; line-height: 1;
  animation: chFling 1.2s cubic-bezier(.215, .61, .355, 1) forwards;
}
@keyframes chFling {
  0%   { transform: translate(0, 0) scale(.4); opacity: 1; }
  70%  { opacity: 1; }
  100% { transform: translate(var(--dx), calc(var(--dy) + 26px)) scale(1.1); opacity: 0; }
}
/* Vector coins — positioned by JS on a real ballistic arc. */
.chCoin {
  position: absolute; top: 62%; left: 50%;
  margin: -7px 0 0 -7px; opacity: 0; will-change: transform;
}
.chCoin svg { display: block; }

/* (e) Power-up pop at 1.85 s, offset (92, −78) from the chest centre. */
.chPuPop {
  --px: 92px;                       /* mirrored under RTL, like the iOS offset */
  position: absolute; top: 50%; left: 50%;
  width: 0; height: 0;
  display: flex; align-items: center; justify-content: center;
  transform: translate(var(--px), -78px) scale(.1);
  opacity: 0; pointer-events: none;
}
[dir="rtl"] .chPuPop { --px: -92px; }
.chPuPop.show { animation: chPuPop .5s cubic-bezier(.2, 1.7, .4, 1) forwards; }
@keyframes chPuPop {
  0%   { opacity: 0; transform: translate(var(--px), -78px) scale(.1); }
  55%  { opacity: 1; transform: translate(var(--px), -78px) scale(1.4); }
  100% { opacity: 1; transform: translate(var(--px), -78px) scale(1); }
}
.chPuEmoji { font-size: 40px; line-height: 1; filter: drop-shadow(0 0 10px rgba(78, 205, 196, .7)); }
.chPuX {
  position: absolute; top: -14px; inset-inline-end: -14px;
  padding: 2px 6px; border-radius: 999px;
  font-style: normal; font-size: 12px; font-weight: 900; color: #1a1a4e;
  background: var(--yellow);
}
.chPuSpark {
  position: absolute; top: 50%; left: 50%; margin: -8px;
  font-size: 14px; line-height: 1;
  animation: chFling .6s cubic-bezier(.215, .61, .355, 1) forwards;
}

/* (f) Settled summary card. */
.chReward {
  position: relative; z-index: 4; margin-top: 18px;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 22px; border-radius: 24px; max-width: 300px;
  background: linear-gradient(135deg, var(--overlay-a), var(--overlay-b));
  border: 2px solid transparent;
  box-shadow: 0 10px 26px rgba(132, 94, 194, .5);
  opacity: 0; transform: scale(.85);
  transition: opacity .3s ease, transform .4s cubic-bezier(.3, 1.45, .5, 1);
  pointer-events: none;
}
.chReward.show {
  opacity: 1; transform: none; pointer-events: auto;
  border-color: color-mix(in srgb, var(--yellow) 80%, transparent);
}
.chSettleTitle {
  font-size: 24px; font-weight: 900; color: var(--yellow);
  text-shadow: 0 0 10px rgba(255, 217, 61, .55);
}
.chSummary {
  display: flex; gap: 16px; align-items: center;
  font-size: 19px; font-weight: 900; color: #fff;
  font-variant-numeric: tabular-nums;
}

/* ─────────────────────────────────────────────────────────────────
   9. Level-up title shimmer (Overlays.swift ShimmerSweep)
   ───────────────────────────────────────────────────────────────── */

/* A light band sweeping across the title, period 2.4 s — transform-only, so
   it costs nothing on a WebView. */
#luTitle {
  position: relative; overflow: hidden;
  padding-block: 5px; margin-block: -5px;
}
#luTitle::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(100deg,
    transparent 35%, rgba(255, 255, 255, .5) 50%, transparent 65%);
  transform: translateX(-130%);
  animation: luShimmer 2.4s linear infinite;
}
@keyframes luShimmer { to { transform: translateX(130%); } }

/* ─────────────────────────────────────────────────────────────────
   10. Achievement banner — flipping medal and a pulsing ring
   ───────────────────────────────────────────────────────────────── */

#achBanner { transform-origin: top; perspective: 500px; }
#achBanner.show .abIcon {
  animation: abMedalFlip .6s cubic-bezier(.25, 1.4, .5, 1) .12s both;
}
@keyframes abMedalFlip {
  from { transform: rotateY(-420deg) scale(.6); }
  to   { transform: rotateY(0deg) scale(1); }
}
#achBanner .abIcon { position: relative; }
#achBanner.show .abIcon::after {
  content: ""; position: absolute; inset: -6px; border-radius: 50%;
  border: 2px solid var(--yellow); pointer-events: none;
  animation: abRing 1.1s ease-out infinite;
}
@keyframes abRing {
  from { transform: scale(.9); opacity: .8; }
  to   { transform: scale(1.55); opacity: 0; }
}

/* ─────────────────────────────────────────────────────────────────
   11. Reduced motion — settle everything on the first frame
   ───────────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .chChest .chLid { transition: none; }
  .chRays.show, .chChest.drop, .chChest.shake, .chFlash.on,
  .chSpark, .chPuSpark, .chPuPop.show, .chNum.tick,
  .chestRow.openable .chestEmoji, #luTitle::after,
  #achBanner.show .abIcon, #achBanner.show .abIcon::after {
    animation: none !important;
  }
  .chPuPop.show { opacity: 1; transform: translate(var(--px), -78px) scale(1); }
  #luTitle::after { display: none; }
  #achBanner.show .abIcon::after { display: none; }
  .packSec.pulse { transform: none; }
}

/* Narrow / short phones. */
@media (max-height: 640px) {
  .chChestWrap { transform: scale(.85); margin: 0; }
  .chCounter .chNum { font-size: 32px; }
  .puCard .puEmoji { font-size: 28px; }
}