/* ===========================================================================
   THE HOMEPAGE ARCADE PROMOS (BUILD-391) — resources/views/partials/arcade-promos.blade.php

   One column at a phone's width, two side by side from 960px. The art keeps
   its own aspect ratio at every width (set inline from the art's pixels), so
   the live-text SVG laid over Clover's plates, drawn in the same pixel space,
   lands on its plates at every size. Served from the cached asset path.
   =========================================================================== */
.ap { max-width: 1200px; margin: 0 auto; padding: 32px 16px; }
.ap-heading {
  margin: 0 0 16px;
  font-family: 'Archivo', sans-serif; font-weight: 900;
  font-size: 22px; letter-spacing: .02em;
  color: #f4f6f2;
}
.ap-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 960px) { .ap-grid { grid-template-columns: 1fr 1fr; gap: 24px; } }

.ap-card {
  display: block;
  border-radius: 14px;
  overflow: hidden;
  background: #0b0f0c;
  border: 1px solid rgba(255, 255, 255, .1);
  text-decoration: none;
  color: inherit;
  transition: transform 200ms ease, border-color 200ms ease;
}
.ap-card:hover { transform: translateY(-2px); border-color: rgba(255, 255, 255, .28); }
.ap-card:focus-visible { outline: 3px solid #d7ff4f; outline-offset: 3px; }

.ap-art { position: relative; display: block; width: 100%; background: #111; }
.ap-art picture, .ap-art img { display: block; width: 100%; height: 100%; }
.ap-art img { object-fit: cover; }

/* Each card's live text, in a 1024x586 frame of its art. */
.ap-live { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.ap-lettering { font-family: 'Archivo', sans-serif; font-weight: 900; letter-spacing: .02em; }
/* THE SCRIM (30 Sep 2026): a soft backdrop under each plate's own text, so
   the ink's contrast is measured against a ground the card controls rather
   than the photo's own variegated colour at whatever point a letter falls.
   Both are warm and pale, reading as an inset panel rather than a sticker;
   bronze's is stronger because that plate has no dark-to-light range of its
   own to lean on the way gold's dark banner and bright ribbon already do. */
.ap-scrim { fill: #faf4e0; }
.ap-live--gold .ap-scrim { opacity: .2; }
.ap-live--bronze .ap-scrim { opacity: .5; }
/* Clover: dark green engraved into the pale scrim - a near-black rim below,
   a soft highlight above, the face a deep leaf-to-forest green. Measured
   against the sampled plate + scrim (closing report): every sampled point
   clears WCAG AA 4.5:1 with margin. */
.ap-live--bronze .ap-t-shade { fill: #081c0d; opacity: .9; transform: translate(0, 1px); }
.ap-live--bronze .ap-t-light { fill: #eafbe6; opacity: .55; }
.ap-live--bronze .ap-t-face { stroke: #06170a; stroke-width: 1.6px; paint-order: stroke fill; }
/* Golden Triumph: raised gold lettering - a deep brown rim and drop so it
   reads on the dark banner and on the gold plate alike. Unchanged ink; the
   scrim above is this card's only new safety margin. */
.ap-live--gold .ap-t-shade { fill: #1c0f00; opacity: .9; transform: translate(0, 2px); }
.ap-live--gold .ap-t-light { fill: #fff9e0; opacity: .35; }
.ap-live--gold .ap-t-face { stroke: #3a2200; stroke-width: 2.2px; paint-order: stroke fill; }

.ap-foot {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px;
  padding: 12px 14px;
}
.ap-demo {
  font-family: 'Space Mono', monospace; font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
  color: #c9d2c4;
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) { .ap-card, .ap-card:hover { transition: none; transform: none; } }

/* A listed machine without promo art (BUILD-404): a plain card in the same
   grid, the same height rhythm, its name and live jackpot as text. */
.ap-card--plain { display: flex; flex-direction: column; justify-content: space-between; min-height: 180px; }
.ap-plain { display: flex; flex-direction: column; gap: 8px; padding: 20px 16px 8px; }
.ap-plain-name { font-family: 'Archivo', sans-serif; font-weight: 900; font-size: 22px; color: #f4f6f2; }
.ap-plain-jackpot { font-family: 'Archivo', sans-serif; font-weight: 800; font-size: 16px; color: #ffd24a; }