/* =============================================================================
   onyx-chrome.css — Cosmic Gothic Noir HUD chrome (Studio drop-in).
   Visual only — no earn / scoring / money-path. Replaces flat CSS card edges
   with ornate gold+violet frame language site-wide where card classes apply.
   ========================================================================== */

:root {
  --onyx-chrome-frame: url('/assets/img/onyx/chrome/chrome-frame-square-512.png');
  --onyx-chrome-frame-sm: url('/assets/img/onyx/chrome/chrome-frame-square-256.png');
  --onyx-chrome-cards: url('/assets/img/onyx/chrome/chrome-card-frames.png');
  --onyx-chrome-hud: url('/assets/img/onyx/chrome/chrome-hud-panels.png');
}

/* Ornate square frame — 9-slice from Studio chrome-frame-square */
.onyx-chrome-frame {
  border-style: solid;
  border-width: 18px;
  border-color: transparent;
  border-image-source: var(--onyx-chrome-frame);
  border-image-slice: 18%;
  border-image-width: 18px;
  border-image-repeat: stretch;
  background-clip: padding-box;
}

/* Soft site-wide: svc / game / spotlight keep layout; ornate rim instead of bare 1px */
.svc-card,
.game-card,
.spotlight-card,
.stat-card,
.core-deep-card,
.tw-card,
.ab-card,
.card,
.sg-card,
.core-panel,
.nft-dest,
.hero.onyx-chrome-hero {
  border-style: solid;
  border-width: 12px;
  border-color: transparent;
  border-image-source: var(--onyx-chrome-frame-sm);
  border-image-slice: 16%;
  border-image-width: 12px;
  border-image-repeat: stretch;
  /* keep chase ring from onyx-cards.css (::after) above the rim */
}

@media (max-width: 420px) {
  .svc-card,
  .game-card,
  .spotlight-card,
  .stat-card,
  .core-deep-card,
  .tw-card,
  .ab-card,
  .card,
  .sg-card,
  .core-panel,
  .nft-dest,
  .hero.onyx-chrome-hero {
    border-width: 8px;
    border-image-width: 8px;
  }
}

/* Fable5 sheen uses gradient border — don't fight it with chrome slice */
.game-card.fable5-card {
  border-image-source: none;
  border-width: 1px;
}

/* Header / shell: thin Cosmic Gothic divider under sticky bar */
.onyx-hdr {
  position: relative;
  background-image:
    linear-gradient(180deg, rgba(10,7,16,.92), rgba(10,7,16,.88)),
    var(--onyx-chrome-hud);
  background-size: auto, 920px auto;
  background-position: 0 0, right -40px top -8px;
  background-repeat: no-repeat, no-repeat;
}
.onyx-hdr::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 3px;
  pointer-events: none;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(230,196,119,.15) 18%,
    rgba(124,58,237,.45) 50%,
    rgba(230,196,119,.15) 82%,
    transparent 100%);
}

/* Utility: panel plate from HUD sheet (opt-in) */
.onyx-chrome-panel {
  background-image: var(--onyx-chrome-hud);
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
}

/* ENTERPRISE-P0 2026-09-07 — showcase .card, SFT/marketplace .sg-card,
   profile .core-panel, nft hub .nft-dest + .hero.onyx-chrome-hero */