/* One look per game, on top of the deck.cheap brand (gold stays the brand colour: logo, highlight, main buttons).
   The game adds a secondary pair of colours (--g1 / --g2), a colour stripe, the game button and two cards beside the title. */
:root { --g1: #92580a; --g2: #f2b134; }
[data-game='fab'] { --g1: #8f1d17; --g2: #f2b134; }
[data-game='mtg'] { --g1: #1d5c52; --g2: #e3c565; }
[data-game='pokemon'] { --g1: #2457b5; --g2: #f7d21a; }
[data-game='ygo'] { --g1: #4b2a7b; --g2: #d9b24a; }
[data-game='lorcana'] { --g1: #2b3a8f; --g2: #e58bbd; }
[data-game='onepiece'] { --g1: #0b3d5c; --g2: #e63946; }

body::before { content: ''; position: fixed; inset: 0 0 auto 0; height: 4px; background: linear-gradient(90deg, var(--g1), var(--g2)); z-index: 50; }
.wrap { position: relative; }

/* The game button wears the game's colours */
.game-btn { border-color: color-mix(in srgb, var(--g1) 45%, var(--line-strong)); }
.game-btn .stack i:nth-child(2) { background: linear-gradient(160deg, var(--g1), var(--g2)); border-color: var(--g1); }

/* Two cards of the game beside the title (large screens only; decoration, so hidden from assistive technology) */
.hero-art { position: absolute; top: 72px; right: 14px; width: 250px; height: 200px; pointer-events: none; }
.hero-art img { position: absolute; width: 118px; height: auto; border-radius: 4.8% / 3.4%; filter: drop-shadow(0 12px 20px rgba(0, 0, 0, .4)); background: linear-gradient(160deg, var(--g1), var(--g2)); }
.hero-art img:nth-child(1) { left: 0; top: 26px; transform: rotate(-8deg); }
.hero-art img:nth-child(2) { right: 0; top: 0; transform: rotate(7deg); }
@media (max-width: 1060px) { .hero-art { display: none; } }
@media (prefers-reduced-motion: no-preference) {
  .hero-art img { animation: heroIn .6s ease backwards; }
  .hero-art img:nth-child(2) { animation-delay: .12s; }
  @keyframes heroIn { from { opacity: 0; transform: translateY(24px) rotate(0); } }
}