/* ==========================================================================
   Bomb VR - site skin
   The store layout lives in shared/css/base.css. Only this game's palette
   and its own pieces belong here.
   ========================================================================== */

:root {
  /* Values from the live playbombvr.com page, not invented. */
  --ink:        #0a0a0a;
  --ink-2:      #0c0c0f;
  --panel:      #111119;
  --panel-2:    #18181f;
  --line:       #22222a;

  --text:       #ffffff;
  --text-dim:   #bfbfbf;
  --text-faint: #8a8a8a;

  --accent:      #ef4444;   /* --brand */
  --accent-2:    #f59e0b;   /* --brand-2 */
  --accent-deep: #c93434;
  --accent-warm: #f59e0b;
  --accent-ink:  #1a0603;

  --radius: 16px;           /* the live page's shape */
}

/* --- store header --------------------------------------------------------
   Layout is shared; only the backdrop is specific to Bomb VR. */

.store { position: relative; isolation: isolate; }
.store::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(900px 520px at 82% -15%, color-mix(in srgb, var(--accent-2) 12%, transparent), transparent 62%),
    radial-gradient(900px 520px at -8% 4%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 62%);
}

/* --- full-bleed key art band ---------------------------------------------
   The key art is 2400x776. Left to itself that collapses to a sliver on a
   phone, so this is one of the few places we override the `img { height: auto }`
   in base.css - deliberately, and only because object-fit is set with it. */

.keyart { border-block: 1px solid var(--line); background: var(--ink); }
.keyart img {
  width: 100%;
  height: clamp(180px, 26vw, 420px);
  object-fit: cover;
}

.prose .lede + .lede { margin-top: 1.1rem; }
.ticks--inline {
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  margin-top: 2rem;
  gap: .6rem 1.6rem;
}