/* collectables — bazooka parts and energy bars on the Storage tab. Layout and game art only
   (docs/DESIGN.md). The store's packs of bars and parts are in store.css. */
@layer pages {
  .collectables, .energy-bars { display: flex; flex-direction: column; }

  /* The finished bazooka on the left, an arrow, then the five parts it is assembled from. The bazooka
     flashes when new ones are assembled (alternating classes replay it). */
  .collectables .forge { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 5fr); align-items: center; gap: var(--sp-2); }
  .collectables .forge .parts { grid-column: 3; }
  .collectables .forge-arrow { display: grid; place-items: center; color: var(--text-3); }
  .collectables .bazooka-tile { display: flex; flex-direction: column; align-items: center; gap: var(--sp-2); min-width: 0; padding: var(--sp-4) var(--sp-2) var(--sp-3); text-align: center;
    border-radius: var(--r-md); border: 1px solid color-mix(in srgb, #a855f7 35%, var(--border));
    background: radial-gradient(circle at 50% 35%, color-mix(in srgb, #a855f7 22%, transparent), color-mix(in srgb, #a855f7 8%, var(--surface-2)) 75%); box-shadow: var(--highlight); }
  .collectables .bazooka-tile.forged-a { animation: forged-a .6s var(--ease); }
  .collectables .bazooka-tile.forged-b { animation: forged-b .6s var(--ease); }
  @keyframes forged-a { from { border-color: var(--brand-border); box-shadow: 0 0 0 2px var(--brand-border), 0 0 32px var(--brand-glow); transform: scale(1.04); } }
  @keyframes forged-b { from { border-color: var(--brand-border); box-shadow: 0 0 0 2px var(--brand-border), 0 0 32px var(--brand-glow); transform: scale(1.04); } }

  /* The five parts: art on a tinted tile, the name, then the count or "Missing". */
  .collectables .parts { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--sp-2); }
  .collectables .part { display: flex; flex-direction: column; align-items: center; gap: var(--sp-2); min-width: 0; padding: var(--sp-4) var(--sp-2) var(--sp-3); text-align: center;
    border-radius: var(--r-md); background: var(--surface-2); border: 1px solid var(--border-subtle); box-shadow: var(--highlight); }
  .collectables .part-art { display: grid; place-items: center; width: 100%; height: 56px; }
  .collectables .part-art img { width: 56px; height: 56px; object-fit: contain; filter: var(--art-shadow); }
  /* Parts and the bazooka share one tile size; tight padding so the names fit a half-width card. */
  .collectables .part, .collectables .bazooka-tile { padding: var(--sp-3) 2px var(--sp-2); gap: 6px; }
  .collectables .part-art { height: 44px; }
  .collectables .part-art img { width: 44px; height: 44px; }
  .collectables .t-overline { letter-spacing: .02em; }
  .collectables .part .pill { padding-inline: 6px; font-size: var(--fs-xs); }
  .collectables .part .t-overline { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .collectables .part-qty { font: var(--fw-semibold) var(--fs-h3) / 1.3 var(--font-display); letter-spacing: .01em; font-variant-numeric: tabular-nums; }
  .collectables .part.empty { background: transparent; border-style: dashed; border-color: var(--border); box-shadow: none; }
  .collectables .part.empty .part-art img { opacity: .4; filter: grayscale(1); }
  .collectables .tip-host:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
  .collectables .part-skeleton { height: 146px; border-radius: var(--r-md); }
  .collectables .collect-foot { flex-wrap: wrap; align-items: center; }
  .collectables .collect-foot .hint { margin-right: auto; }

  /* Energy bars: the art and the stock, the actions at the foot of the card. */
  .energy-bars .bars-body { flex: 1; display: flex; align-items: center; gap: var(--sp-5); margin-bottom: var(--sp-5); }
  .energy-bars .bars-art { display: grid; place-items: center; flex: none; width: 96px; height: 80px; border-radius: var(--r-md); background: var(--surface-2); border: 1px solid var(--border-subtle); box-shadow: var(--highlight); }
  .energy-bars .bars-art img { width: 68px; height: 68px; object-fit: contain; filter: var(--art-shadow); }
  .energy-bars .bars-stock { display: flex; flex-direction: column; gap: var(--sp-1); }
  .energy-bars .bars-stock b { font: var(--fw-semibold) var(--fs-stat) / 1 var(--font-display); letter-spacing: .01em; font-variant-numeric: tabular-nums; }
  .energy-bars .card-foot { margin-top: auto; flex-wrap: wrap; }

  @media (max-width: 720px) {
    .collectables .card-head { flex-wrap: wrap; }
    .collectables .parts { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-2); }
    .collectables .forge { grid-template-columns: 1fr; }
    .collectables .forge .parts { grid-column: auto; }
    .collectables .bazooka-tile { width: calc((100% - 2 * var(--sp-2)) / 3); }
    .collectables .forge-arrow { rotate: 90deg; justify-self: start; margin-left: calc((100% - 2 * var(--sp-2)) / 6 - 11px); }
    .collectables .collect-foot .btn, .energy-bars .card-foot .btn { flex: 1; }
  }
}