/* store — gold packs, supplies (energy bars), the prestige garage and bazooka part packs.
   Layout and pack art only; cards, buttons, pills and stats are shared components (docs/DESIGN.md). */
@layer pages {
  .store-prestige { min-width: 200px; }
  .store-section { display: flex; flex-direction: column; gap: var(--sp-4); }
  .store-legal { max-width: 72ch; }

  /* Packs: one card each, art on a tinted tile, the amount, a note, then the price. */
  .pack-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: var(--sp-4); }
  .pack-skeleton { height: 300px; border-radius: var(--r-lg); }
  .pack { display: flex; flex-direction: column; align-items: center; gap: var(--sp-2); text-align: center; }
  .pack-tag { position: absolute; top: var(--sp-2); right: var(--sp-2); z-index: 1; }
  .pack-art { position: relative; display: grid; place-items: center; width: 100%; height: 116px; margin-bottom: var(--sp-2); border-radius: var(--r-md);
    background: radial-gradient(circle at 50% 55%, color-mix(in srgb, var(--text) 6%, transparent), transparent 70%), var(--surface-2); border: 1px solid var(--border-subtle); }
  .pack-art img { width: 84px; height: 84px; object-fit: contain; filter: var(--art-shadow); }
  .pack-amount { display: flex; align-items: baseline; justify-content: center; gap: 6px; }
  .pack-amount b { font: var(--fw-bold) var(--fs-h1) / 1 var(--font-display); letter-spacing: .01em; font-variant-numeric: tabular-nums; }
  .pack-amount small { font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--text-3); }
  .pack-note { min-height: 1.5em; margin-bottom: var(--sp-3); }
  .pack-buy, .dual-price { margin-top: auto; }

  /* Card or prestige: one pack, two ways to pay. */
  .dual-price { width: 100%; display: flex; flex-direction: column; }
  .dual-price .or { display: flex; align-items: center; gap: var(--sp-3); margin: var(--sp-2) 0;
    font: var(--fw-semibold) var(--fs-xs) / 1 var(--font-ui); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--text-3); }
  .dual-price .or::before, .dual-price .or::after { content: ""; flex: 1; height: 1px; background: var(--border-subtle); }
  .prestige-btn b { font-variant-numeric: tabular-nums; }
  .prestige-word { font-weight: var(--fw-medium); }
  .pack-short { display: block; min-height: 1.4em; margin-top: var(--sp-2); font-size: var(--fs-xs); line-height: 1.4; color: var(--text-2); }

  /* Energy bars: the pack's bars stacked (up to three drawn). */
  .pack.bars .bar-art img { position: relative; z-index: 1; }
  .pack.bars .bar-art { --bar: 84px; }
  .pack.bars .bar-art::before, .pack.bars .bar-art::after { content: ""; position: absolute; left: 50%; top: 50%; width: var(--bar); height: var(--bar); margin: calc(var(--bar) / -2) 0 0 calc(var(--bar) / -2); opacity: 0;
    background: url("../../assets/ui/collectables/energy_bar.svg") center / contain no-repeat; filter: var(--art-shadow) brightness(.82); }
  .pack.bars .bar-art[style*="--stack:2"]::before, .pack.bars .bar-art[style*="--stack:3"]::before, .pack.bars .bar-art[style*="--stack:4"]::before { opacity: 1; transform: translate(-12px, -10px) rotate(-8deg); }
  .pack.bars .bar-art[style*="--stack:3"]::after, .pack.bars .bar-art[style*="--stack:4"]::after { opacity: 1; transform: translate(12px, -16px) rotate(9deg); }

  /* Bazooka parts: the five parts fanned out, with the number of complete sets. */
  .pack.part-pack .parts-art { display: flex; justify-content: center; align-items: center; }
  .pack.part-pack .parts-art img { width: 46px; height: 46px; margin: 0 calc(var(--sp-1) * -1); }
  .pack.part-pack .parts-art img:nth-child(odd) { transform: translateY(-8px) rotate(-6deg); }
  .pack.part-pack .parts-art img:nth-child(even) { transform: translateY(6px) rotate(7deg); }
  .pack.part-pack .parts-art .sets { position: absolute; top: var(--sp-2); right: var(--sp-2); }

  /* Prestige garage: legendary vehicles on a lit display bay. */
  .garage-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--sp-4); }
  .garage-card { display: flex; flex-direction: column; overflow: hidden; }
  .garage-card.owned { border-color: color-mix(in srgb, var(--green) 35%, transparent); }
  .garage-bay { position: relative; display: grid; place-items: center; height: 184px; overflow: hidden; border-bottom: 1px solid var(--border-subtle);
    background: radial-gradient(ellipse at 50% 62%, var(--brand-soft), transparent 62%),
      repeating-linear-gradient(90deg, color-mix(in srgb, var(--text) 4%, transparent) 0 1px, transparent 1px 44px), var(--surface-sunken); }
  .garage-bay .bay-ring { position: absolute; width: 74%; aspect-ratio: 2.4; border-radius: 50%; border: 2px solid var(--brand-border);
    box-shadow: 0 0 28px var(--brand-soft), inset 0 0 24px color-mix(in srgb, var(--ink) 25%, transparent); }
  .garage-veh { position: relative; width: 62%; aspect-ratio: 200 / 120; transform: rotate(-10deg); transition: transform .5s var(--ease); }
  .garage-veh img { position: absolute; inset: 0; width: 100%; height: 100%; }
  .garage-veh img:first-child { filter: var(--art-shadow); }
  .garage-veh .turret { transform-origin: 46% 50%; animation: garage-sweep 7s ease-in-out infinite; }
  .garage-card:hover .garage-veh { transform: rotate(-4deg) scale(1.04); }
  @keyframes garage-sweep { 0%, 100% { transform: rotate(-14deg); } 50% { transform: rotate(10deg); } }
  .garage-tag { position: absolute; top: var(--sp-3); left: var(--sp-3); }
  .garage-info { flex: 1; display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-5) var(--sp-5) var(--sp-4); }
  .garage-info p { margin-bottom: var(--sp-2); color: var(--text-2); font-size: var(--fs-sm); line-height: 1.5; }
  .garage-info .btn { margin-top: auto; }
  .garage-info .pack-short { margin-top: 0; }

  @media (min-width: 900px) {
    .garage-info { padding: var(--sp-6) var(--sp-6) var(--sp-5); }
  }
  @media (max-width: 720px) {
    .store-prestige { width: 100%; }
    .pack-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); }
    .pack-amount b { font-size: var(--fs-h2); }
    .pack-art { height: 96px; }
    .pack-art img { width: 68px; height: 68px; }
    .pack.bars .bar-art { --bar: 68px; }
    /* Notes on two lines and room for a two-line reason, so the buttons of a row line up. */
    .pack-note .sep { display: none; }
    .pack-note > span { display: block; }
    .pack-short { min-height: 2.8em; }
    /* Narrow cards: the diamond says "prestige". */
    .dual-price .prestige-word { display: none; }
    .garage-grid { grid-template-columns: 1fr; }
  }
}