/* ─── Illustrated Card Themes (Ported from Old Project) ───
   9 card styles ported from the v1 project.
   Scoped by class: .game-card.arcade, .game-card.journal, .game-card.space, etc.
   Each overrides .game-card base visual styling only (not sizing).

   NOTE: .game-card::after (glossy shine overlay) is defined in home.css
   and applies to ALL cards. Card styles here use ::before for overlays. */


/* ================================================================
   KEYFRAME ANIMATIONS
   ================================================================ */

@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

@keyframes clickPulse {
  0% { transform: scale(1); }
  50% { transform: scale(0.85); }
  100% { transform: scale(1); }
}

@keyframes journalWobble {
  0%, 100% { transform: rotate(-15deg) scale(1); }
  25% { transform: rotate(-12deg) scale(1.05); }
  50% { transform: rotate(-18deg) scale(1); }
  75% { transform: rotate(-13deg) scale(1.03); }
}

@keyframes journalWobble2 {
  0%, 100% { transform: rotate(10deg) scale(1); }
  25% { transform: rotate(13deg) scale(1.04); }
  50% { transform: rotate(7deg) scale(1); }
  75% { transform: rotate(12deg) scale(1.03); }
}

@keyframes journalWobble3 {
  0%, 100% { transform: rotate(20deg) scale(1); }
  25% { transform: rotate(23deg) scale(1.03); }
  50% { transform: rotate(17deg) scale(1); }
  75% { transform: rotate(22deg) scale(1.02); }
}

@keyframes spaceFloat {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  25% { transform: translateY(-6px) rotate(5deg); }
  50% { transform: translateY(-10px) rotate(-3deg); }
  75% { transform: translateY(-4px) rotate(2deg); }
}

@keyframes spaceBob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

@keyframes diceJiggle1 {
  0%, 100% { transform: rotate(-20deg) scale(1); }
  25% { transform: rotate(-16deg) scale(1.06); }
  50% { transform: rotate(-22deg) scale(1); }
  75% { transform: rotate(-17deg) scale(1.04); }
}

@keyframes diceJiggle2 {
  0%, 100% { transform: rotate(15deg) scale(1); }
  25% { transform: rotate(18deg) scale(1.05); }
  50% { transform: rotate(12deg) scale(1); }
  75% { transform: rotate(17deg) scale(1.03); }
}

@keyframes chaosFloat {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-8px) scale(1.05); }
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

@keyframes rofCardFloat {
  0%, 100% { transform: translateY(0) scale(1) rotate(0deg); }
  33% { transform: translateY(-6px) scale(1.05) rotate(3deg); }
  66% { transform: translateY(-3px) scale(1.02) rotate(-2deg); }
}

@keyframes auCardFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

@keyframes auSparkle {
  0%, 100% { opacity: 0; transform: scale(0.5); }
  50% { opacity: 1; transform: scale(1); }
}


/* ================================================================
   1. ARCADE
   ================================================================ */
.game-card.arcade {
  background: #e63228;
  border: 3px solid #1a1a1a;
}

/* Scanline overlay */
.game-card.arcade::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    90deg,
    transparent,
    transparent 2px,
    rgba(0, 0, 0, 0.08) 2px,
    rgba(0, 0, 0, 0.08) 4px
  );
  z-index: 1;
  pointer-events: none;
}

.game-card.arcade .card-title {
  font-family: 'Bangers', cursive;
  font-size: 48px;
  color: #fff;
  text-shadow:
    3px 3px 0 #1a1a1a,
    -1px -1px 0 #1a1a1a,
    1px -1px 0 #1a1a1a,
    -1px 1px 0 #1a1a1a;
  transform: rotate(-3deg);
  letter-spacing: 3px;
  z-index: 2;
}

.game-card.arcade .deco {
  position: absolute;
  top: 12px;
  right: 14px;
  font-size: 14px;
  color: #ffeb3b;
  font-family: 'Press Start 2P', monospace;
  animation: blink 1s step-end infinite;
  z-index: 2;
}

.game-card.arcade .deco-2 {
  position: absolute;
  bottom: 12px;
  left: 14px;
  font-size: 32px;
  transform: rotate(-20deg);
  animation: clickPulse 2s ease-in-out infinite;
  z-index: 2;
}

.game-card.arcade .deco-3 {
  position: absolute;
  top: 12px;
  left: 14px;
  font-size: 18px;
  transform: rotate(30deg);
  z-index: 2;
}


/* ================================================================
   2. JOURNAL
   ================================================================ */
.game-card.journal {
  background: #faf6f0;
  background-image: repeating-linear-gradient(
    180deg,
    transparent,
    transparent 27px,
    #d4c5a9 27px,
    #d4c5a9 28px
  );
  border: 2px solid #d4c5a9;
}

.game-card.journal .card-title {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-size: 38px;
  color: #3a3225;
  z-index: 2;
}

.game-card.journal .deco {
  position: absolute;
  top: 10px;
  left: 14px;
  font-size: 42px;
  transform: rotate(-15deg);
  animation: journalWobble 4s ease-in-out infinite;
  z-index: 2;
}

.game-card.journal .deco-2 {
  position: absolute;
  bottom: 10px;
  right: 14px;
  font-size: 28px;
  transform: rotate(10deg);
  animation: journalWobble2 4.5s ease-in-out infinite;
  z-index: 2;
}

.game-card.journal .deco-3 {
  position: absolute;
  top: 10px;
  right: 14px;
  font-size: 22px;
  transform: rotate(20deg);
  opacity: 0.7;
  animation: journalWobble3 5s ease-in-out infinite;
  z-index: 2;
}


/* ================================================================
   3. SPACE
   ================================================================ */
.game-card.space {
  background: radial-gradient(ellipse at 30% 40%, #1a1a2e, #0d0d1a);
  border: 2px solid #333;
}

/* Stars */
.game-card.space::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(1px 1px at 10% 20%, rgba(255, 255, 255, 0.8), transparent),
    radial-gradient(1px 1px at 30% 70%, rgba(255, 255, 255, 0.6), transparent),
    radial-gradient(1px 1px at 50% 15%, rgba(255, 255, 255, 0.7), transparent),
    radial-gradient(1px 1px at 70% 45%, rgba(255, 255, 255, 0.5), transparent),
    radial-gradient(1px 1px at 85% 80%, rgba(255, 255, 255, 0.6), transparent),
    radial-gradient(1px 1px at 20% 55%, rgba(255, 255, 255, 0.4), transparent),
    radial-gradient(1px 1px at 60% 85%, rgba(255, 255, 255, 0.7), transparent),
    radial-gradient(1px 1px at 90% 25%, rgba(255, 255, 255, 0.5), transparent),
    radial-gradient(1.5px 1.5px at 40% 40%, rgba(255, 255, 255, 0.9), transparent),
    radial-gradient(1.5px 1.5px at 75% 60%, rgba(255, 255, 255, 0.8), transparent),
    radial-gradient(1px 1px at 15% 90%, rgba(255, 255, 255, 0.5), transparent),
    radial-gradient(1px 1px at 55% 50%, rgba(255, 255, 255, 0.6), transparent);
  z-index: 1;
  pointer-events: none;
}

.game-card.space .card-title {
  font-family: 'Libre Baskerville', serif;
  font-weight: 700;
  font-size: 34px;
  color: #f0e6d0;
  z-index: 2;
}

.game-card.space .deco {
  position: absolute;
  top: 12px;
  right: 14px;
  font-size: 26px;
  animation: spaceFloat 6s ease-in-out infinite;
  z-index: 2;
}

.game-card.space .deco-2 {
  position: absolute;
  bottom: 12px;
  left: 14px;
  font-size: 28px;
  opacity: 0.85;
  animation: spaceBob 5s ease-in-out infinite;
  z-index: 2;
}


/* ================================================================
   4. DICE
   ================================================================ */
.game-card.dice {
  background: #fffdf5;
  border: 3px solid #1a1a1a;
}

.game-card.dice .card-title {
  font-family: 'DM Serif Display', serif;
  font-size: 40px;
  color: #1a1a1a;
  z-index: 2;
}

.game-card.dice .deco {
  position: absolute;
  top: 10px;
  left: 14px;
  font-size: 40px;
  transform: rotate(-20deg);
  animation: diceJiggle1 3s ease-in-out infinite;
  z-index: 2;
}

.game-card.dice .deco-2 {
  position: absolute;
  bottom: 10px;
  right: 14px;
  font-size: 40px;
  transform: rotate(15deg);
  animation: diceJiggle2 3.5s ease-in-out infinite;
  z-index: 2;
}


/* ================================================================
   4b. HOTSEAT (Spit It Out)
   ================================================================ */
.game-card.hotseat {
  background: linear-gradient(135deg, #FF6B35, #FF4136, #D62828);
  border: 3px solid #a01a0a;
  overflow: hidden;
}

/* Starburst rays */
.game-card.hotseat .hs-starburst {
  position: absolute;
  inset: -50%;
  background: repeating-conic-gradient(
    from 0deg at 50% 50%,
    rgba(255,255,255,0.07) 0deg,
    rgba(255,255,255,0.07) 5deg,
    transparent 5deg,
    transparent 22.5deg
  );
  z-index: 1;
  pointer-events: none;
}

/* Warm spotlight glow */
.game-card.hotseat .hs-spotlight {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 30%, rgba(255,255,200,0.25) 0%, transparent 70%);
  z-index: 1;
  pointer-events: none;
}

.game-card.hotseat .card-title {
  font-family: 'Bungee', system-ui, -apple-system, sans-serif;
  font-weight: 400;
  font-size: 42px;
  color: #fff;
  letter-spacing: -1px;
  text-shadow: 0 2px 8px rgba(0,0,0,0.3);
  z-index: 2;
}

.game-card.hotseat .card-tagline {
  font-family: Georgia, serif;
  font-style: italic;
  color: rgba(255,220,200,0.7);
  z-index: 2;
}

/* Star bursts */
.game-card.hotseat .hs-star {
  position: absolute;
  z-index: 2;
  pointer-events: none;
}

.game-card.hotseat .hs-star-1 {
  top: 10px;
  left: 14px;
  width: 28px;
  height: 28px;
  opacity: 0.5;
  animation: hsStarSpin 8s linear infinite;
}

.game-card.hotseat .hs-star-2 {
  bottom: 14px;
  right: 16px;
  width: 22px;
  height: 22px;
  opacity: 0.35;
  animation: hsStarSpin 10s linear infinite reverse;
}

/* Lightning bolt */
.game-card.hotseat .hs-bolt {
  position: absolute;
  top: 12px;
  right: 16px;
  width: 20px;
  height: 34px;
  opacity: 0.65;
  z-index: 2;
  pointer-events: none;
  animation: hsBoltPulse 2s ease-in-out infinite;
}

/* Action word bubbles */
.game-card.hotseat .hs-bubble {
  position: absolute;
  font-family: system-ui, -apple-system, sans-serif;
  font-weight: 900;
  color: #D43D1A;
  background: rgba(255,255,255,0.9);
  padding: 3px 8px;
  border-radius: 6px;
  z-index: 2;
  pointer-events: none;
  transform: rotate(-6deg);
}

.game-card.hotseat .hs-bubble-1 {
  bottom: 14px;
  left: 14px;
  font-size: 13px;
  opacity: 0.8;
}

.game-card.hotseat .hs-bubble-2 {
  top: 14px;
  left: 50%;
  transform: translateX(-50%) rotate(4deg);
  font-size: 11px;
  opacity: 0.6;
  background: rgba(255,224,102,0.9);
}

@keyframes hsStarSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes hsBoltPulse {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 0.85; }
}


/* ================================================================
   4c. COSMIC (Superpower Rankings)
   ================================================================ */
.game-card.cosmic {
  background: linear-gradient(180deg, #1A0A3E 0%, #2D1B69 45%, #4A1FA0 100%);
  border: 2px solid rgba(168, 85, 247, 0.4);
  overflow: hidden;
}

/* Stars background */
.game-card.cosmic .cos-stars {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(1.5px 1.5px at 8% 15%, rgba(255,255,255,0.35), transparent),
    radial-gradient(1px 1px at 18% 72%, rgba(255,255,255,0.25), transparent),
    radial-gradient(2px 2px at 28% 35%, rgba(255,255,255,0.3), transparent),
    radial-gradient(1px 1px at 42% 88%, rgba(255,255,255,0.2), transparent),
    radial-gradient(1.5px 1.5px at 55% 12%, rgba(255,255,255,0.3), transparent),
    radial-gradient(1px 1px at 65% 55%, rgba(255,255,255,0.15), transparent),
    radial-gradient(2px 2px at 78% 25%, rgba(255,255,255,0.35), transparent),
    radial-gradient(1px 1px at 85% 68%, rgba(255,255,255,0.2), transparent),
    radial-gradient(1.5px 1.5px at 92% 82%, rgba(255,255,255,0.25), transparent),
    radial-gradient(1px 1px at 35% 50%, rgba(255,255,255,0.15), transparent),
    radial-gradient(1px 1px at 72% 42%, rgba(255,255,255,0.2), transparent),
    radial-gradient(2.5px 2.5px at 50% 30%, rgba(255,255,255,0.3), transparent);
}

/* Energy glow */
.game-card.cosmic .cos-glow {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 45%, rgba(168,85,247,0.3) 0%, transparent 70%);
}

/* Diagonal energy streaks */
.game-card.cosmic .cos-streak {
  position: absolute;
  z-index: 1;
  pointer-events: none;
}
.game-card.cosmic .cos-streak-1 {
  top: -20%;
  left: -10%;
  width: 60%;
  height: 140%;
  background: linear-gradient(135deg, transparent 40%, rgba(168,85,247,0.1) 50%, transparent 60%);
}
.game-card.cosmic .cos-streak-2 {
  top: -10%;
  right: -15%;
  width: 50%;
  height: 130%;
  background: linear-gradient(135deg, transparent 35%, rgba(236,72,153,0.06) 48%, transparent 58%);
}

/* Lightning bolt — glow layer behind */
.game-card.cosmic .cos-bolt-glow {
  position: absolute;
  top: 10px;
  right: 30px;
  width: 40px;
  height: 65px;
  z-index: 1;
  pointer-events: none;
  filter: blur(6px);
  opacity: 0.5;
}

/* Lightning bolt — main */
.game-card.cosmic .cos-bolt {
  position: absolute;
  top: 10px;
  right: 30px;
  width: 35px;
  height: 58px;
  z-index: 2;
  pointer-events: none;
  opacity: 0.6;
}

/* Power orbs */
.game-card.cosmic .cos-orb {
  position: absolute;
  z-index: 2;
  pointer-events: none;
}
.game-card.cosmic .cos-orb-1 {
  bottom: 12px;
  left: 12px;
  width: 26px;
  height: 26px;
  animation: cosOrbPulse 3s ease-in-out infinite;
}
.game-card.cosmic .cos-orb-2 {
  top: 12px;
  left: 14px;
  width: 22px;
  height: 22px;
  animation: cosOrbPulse 3.5s ease-in-out infinite 0.5s;
}
.game-card.cosmic .cos-orb-3 {
  bottom: 14px;
  right: 14px;
  width: 24px;
  height: 24px;
  animation: cosOrbPulse 4s ease-in-out infinite 1s;
}

/* Spinning diamond */
.game-card.cosmic .cos-diamond {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 22px;
  height: 22px;
  z-index: 2;
  pointer-events: none;
  animation: cosDiamondSpin 8s linear infinite;
}

/* Crown */
.game-card.cosmic .cos-crown {
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 32px;
  height: 22px;
  z-index: 2;
  pointer-events: none;
  opacity: 0.5;
}

/* Title */
.game-card.cosmic .card-title {
  font-family: 'Orbitron', system-ui, -apple-system, sans-serif;
  font-weight: 900;
  font-size: 34px;
  color: #fff;
  letter-spacing: -1px;
  text-shadow: 0 2px 12px rgba(168,85,247,0.5);
  z-index: 3;
  position: relative;
}

/* Tagline */
.game-card.cosmic .card-tagline {
  font-family: Georgia, serif;
  font-style: italic;
  color: rgba(200,180,255,0.6);
  z-index: 3;
  position: relative;
}

/* Hover states */
.game-card.cosmic:hover .cos-bolt {
  animation: cosBoltVibrate 0.15s ease-in-out infinite;
  filter: drop-shadow(0 0 12px rgba(255,229,102,0.6));
}
.game-card.cosmic:hover .cos-crown {
  opacity: 0.9;
}
.game-card.cosmic:hover .cos-diamond {
  animation-duration: 4s;
}

@keyframes cosOrbPulse {
  0%, 100% { transform: scale(1); opacity: 0.7; }
  50% { transform: scale(1.1); opacity: 1; }
}

@keyframes cosDiamondSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes cosBoltVibrate {
  0% { transform: translate(0, 0); }
  25% { transform: translate(2px, -3px); }
  50% { transform: translate(-1px, 2px); }
  75% { transform: translate(-2px, -1px); }
  100% { transform: translate(0, 0); }
}


/* ================================================================
   4d. FIREWORKS (Cheers to That)
   ================================================================ */
.game-card.fireworks {
  background: linear-gradient(180deg, #0A0A2A 0%, #0F1538 60%, #1A1040 100%);
  border: 2px solid rgba(255, 229, 102, 0.15);
  overflow: hidden;
}

/* Stars background */
.game-card.fireworks .fw-stars {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(1px 1px at 5% 8%, rgba(255,255,255,0.35), transparent),
    radial-gradient(1.5px 1.5px at 12% 45%, rgba(255,255,255,0.2), transparent),
    radial-gradient(1px 1px at 22% 18%, rgba(255,255,255,0.3), transparent),
    radial-gradient(1px 1px at 35% 72%, rgba(255,255,255,0.25), transparent),
    radial-gradient(1.5px 1.5px at 48% 5%, rgba(255,255,255,0.35), transparent),
    radial-gradient(1px 1px at 58% 62%, rgba(255,255,255,0.2), transparent),
    radial-gradient(1px 1px at 68% 15%, rgba(255,255,255,0.3), transparent),
    radial-gradient(1.5px 1.5px at 78% 48%, rgba(255,255,255,0.25), transparent),
    radial-gradient(1px 1px at 88% 8%, rgba(255,255,255,0.3), transparent),
    radial-gradient(1px 1px at 92% 35%, rgba(255,255,255,0.2), transparent),
    radial-gradient(2px 2px at 42% 30%, rgba(255,255,255,0.4), transparent),
    radial-gradient(1px 1px at 75% 80%, rgba(255,255,255,0.15), transparent);
}

/* Decoration images — scattered fireworks */
.game-card.fireworks .fw-deco {
  position: absolute;
  z-index: 2;
  pointer-events: none;
  opacity: 0.45;
  transition: opacity 0.4s, filter 0.4s;
}

/* Top-left — large */
.game-card.fireworks .fw-deco-1 {
  top: -5%;
  left: -10%;
  width: 55%;
  height: 65%;
}

/* Top-right — medium */
.game-card.fireworks .fw-deco-2 {
  top: -8%;
  right: -5%;
  width: 45%;
  height: 55%;
  transform: rotate(25deg);
  opacity: 0.35;
}

/* Bottom-right — small */
.game-card.fireworks .fw-deco-4 {
  bottom: -8%;
  right: -5%;
  width: 35%;
  height: 42%;
  transform: rotate(40deg);
  opacity: 0.35;
}

/* Title */
.game-card.fireworks .card-title {
  font-family: 'Abril Fatface', Georgia, serif;
  font-weight: 400;
  font-size: 40px;
  color: #fff;
  letter-spacing: -1px;
  text-shadow: 0 2px 10px rgba(0,0,0,0.6);
  z-index: 3;
  position: relative;
}

/* Tagline */
.game-card.fireworks .card-tagline {
  font-family: Georgia, serif;
  font-style: italic;
  color: rgba(200,210,230,0.45);
  z-index: 3;
  position: relative;
}

/* Hover: decoration brightens */
.game-card.fireworks:hover .fw-deco {
  opacity: 0.85;
  filter: drop-shadow(0 0 8px rgba(198,155,36,0.5));
}


/* ================================================================
   5. CHAOS
   ================================================================ */
.game-card.chaos {
  background: linear-gradient(135deg, #2c3e7a, #4a69bd, #3b5998);
  border: 3px solid #1e2d5e;
}

/* Grid overlay */
.game-card.chaos::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(
      90deg,
      transparent,
      transparent 19px,
      rgba(255, 255, 255, 0.04) 19px,
      rgba(255, 255, 255, 0.04) 20px
    ),
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 19px,
      rgba(255, 255, 255, 0.04) 19px,
      rgba(255, 255, 255, 0.04) 20px
    );
  z-index: 1;
  pointer-events: none;
}

.game-card.chaos .card-title {
  font-family: 'Bangers', cursive;
  font-size: 48px;
  color: #ffb88c;
  text-shadow:
    0 0 10px rgba(255, 184, 140, 0.6),
    0 0 20px rgba(255, 184, 140, 0.4),
    0 0 40px rgba(255, 184, 140, 0.2),
    2px 2px 0 rgba(0, 0, 0, 0.3);
  letter-spacing: 3px;
  z-index: 2;
}

/* SVG heart */
.game-card.chaos .rof-card-graf:nth-child(1) {
  position: absolute;
  top: 10px;
  left: 14px;
  width: 24px;
  height: 24px;
  animation: rofCardFloat 4s ease-in-out infinite;
  filter: drop-shadow(0 0 4px rgba(255, 100, 100, 0.6));
  z-index: 2;
}

/* SVG star */
.game-card.chaos .rof-card-graf:nth-child(2) {
  position: absolute;
  top: 12px;
  right: 14px;
  width: 22px;
  height: 22px;
  animation: rofCardFloat 4.5s ease-in-out infinite 0.5s;
  filter: drop-shadow(0 0 4px rgba(255, 215, 0, 0.6));
  z-index: 2;
}

/* SVG lightning */
.game-card.chaos .rof-card-graf:nth-child(3) {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  width: 20px;
  height: 20px;
  animation: rofCardFloat 5s ease-in-out infinite 1s;
  filter: drop-shadow(0 0 4px rgba(100, 200, 255, 0.6));
  z-index: 2;
}

/* Rain child element (::after is taken by shine) */
.game-card.chaos .chs-rain {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    180deg,
    transparent,
    transparent 8px,
    rgba(255, 255, 255, 0.02) 8px,
    rgba(255, 255, 255, 0.02) 10px
  );
  z-index: 1;
  pointer-events: none;
}


/* ================================================================
   6. MUSIC
   ================================================================ */
.game-card.music {
  background: linear-gradient(135deg, #4a148c, #7b1fa2, #ce93d8);
  border: 2px solid #6a1b9a;
}

/* Conic gradient overlay */
.game-card.music::before {
  content: '';
  position: absolute;
  inset: 0;
  background: conic-gradient(
    from 0deg at 50% 50%,
    rgba(255, 255, 255, 0.03) 0deg,
    transparent 60deg,
    rgba(255, 255, 255, 0.02) 120deg,
    transparent 180deg,
    rgba(255, 255, 255, 0.03) 240deg,
    transparent 300deg,
    rgba(255, 255, 255, 0.02) 360deg
  );
  z-index: 1;
  pointer-events: none;
}

.game-card.music .card-title {
  font-family: 'Lora', serif;
  font-style: italic;
  font-weight: 700;
  font-size: 36px;
  color: #fff;
  text-shadow:
    0 2px 8px rgba(0, 0, 0, 0.4),
    0 0 20px rgba(206, 147, 216, 0.3);
  z-index: 2;
}

.game-card.music .deco {
  position: absolute;
  top: 10px;
  left: 14px;
  font-size: 32px;
  transform: rotate(-15deg);
  animation: chaosFloat 4s ease-in-out infinite;
  z-index: 2;
}

.game-card.music .deco-2 {
  position: absolute;
  bottom: 10px;
  right: 14px;
  font-size: 32px;
  transform: rotate(20deg);
  animation: chaosFloat 4s ease-in-out infinite 1s;
  z-index: 2;
}

.game-card.music .deco-3 {
  position: absolute;
  bottom: 10px;
  left: 14px;
  font-size: 28px;
  z-index: 2;
}

/* SVG wave at bottom */
.game-card.music .msc-wave {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 30px;
  z-index: 1;
  pointer-events: none;
  opacity: 0.3;
}


/* ================================================================
   7. BLUEPRINT
   ================================================================ */
.game-card.blueprint {
  background: #e8f4fc;
  border: 2px solid #1a1a1a;
}

/* Grid overlay */
.game-card.blueprint::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(
      90deg,
      transparent,
      transparent 19px,
      rgba(21, 101, 192, 0.08) 19px,
      rgba(21, 101, 192, 0.08) 20px
    ),
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 19px,
      rgba(21, 101, 192, 0.08) 19px,
      rgba(21, 101, 192, 0.08) 20px
    );
  z-index: 1;
  pointer-events: none;
}

.game-card.blueprint .card-title {
  font-family: 'Permanent Marker', cursive;
  font-size: 38px;
  color: #1565C0;
  transform: rotate(-2deg);
  z-index: 2;
}

/* SVG stickman */
.game-card.blueprint .bpt-stickman {
  position: absolute;
  bottom: 10px;
  left: 14px;
  width: 40px;
  height: 50px;
  z-index: 2;
}

.game-card.blueprint .deco-2 {
  position: absolute;
  top: 10px;
  right: 14px;
  font-family: 'Courier Prime', monospace;
  font-size: 12px;
  color: #90a4ae;
  text-align: right;
  z-index: 2;
}


/* ================================================================
   8. AU-CASINO
   ================================================================ */
.game-card.au-casino {
  background: linear-gradient(180deg, #4a1520, #5a1a28, #6a2030, #5a1a28, #3a0e16);
  border: 2px solid #d4a844;
}

/* Star dots */
.game-card.au-casino::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(1px 1px at 15% 25%, rgba(212, 168, 68, 0.4), transparent),
    radial-gradient(1px 1px at 35% 75%, rgba(212, 168, 68, 0.3), transparent),
    radial-gradient(1px 1px at 55% 20%, rgba(212, 168, 68, 0.35), transparent),
    radial-gradient(1px 1px at 75% 60%, rgba(212, 168, 68, 0.3), transparent),
    radial-gradient(1px 1px at 85% 35%, rgba(212, 168, 68, 0.4), transparent),
    radial-gradient(1px 1px at 25% 50%, rgba(212, 168, 68, 0.25), transparent),
    radial-gradient(1px 1px at 65% 85%, rgba(212, 168, 68, 0.3), transparent),
    radial-gradient(1px 1px at 45% 45%, rgba(212, 168, 68, 0.35), transparent);
  z-index: 1;
  pointer-events: none;
}

.game-card.au-casino .card-title {
  font-family: 'DM Serif Display', serif;
  font-size: 38px;
  background: linear-gradient(180deg, #f5e6a3, #d4a844, #c49a3c, #f5e6a3);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
  z-index: 2;
}

.game-card.au-casino .deco {
  position: absolute;
  top: 10px;
  left: 14px;
  font-size: 28px;
  animation: auCardFloat 3s ease-in-out infinite;
  z-index: 2;
}

.game-card.au-casino .deco-2 {
  position: absolute;
  bottom: 10px;
  right: 14px;
  font-size: 26px;
  animation: auCardFloat 3s ease-in-out infinite 0.5s;
  z-index: 2;
}

.game-card.au-casino .deco-3 {
  position: absolute;
  top: 10px;
  right: 14px;
  font-size: 24px;
  animation: auCardFloat 3s ease-in-out infinite 1s;
  z-index: 2;
}

/* Inner border child element */
.game-card.au-casino .au-inner-border {
  position: absolute;
  inset: 6px;
  border: 1px solid rgba(212, 168, 68, 0.3);
  border-radius: 10px;
  z-index: 1;
  pointer-events: none;
}

/* Sparkle dots */
.game-card.au-casino .au-card-sparkle {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(245, 230, 163, 0.8);
  animation: auSparkle 2s ease-in-out infinite;
  z-index: 2;
  pointer-events: none;
}

.game-card.au-casino .au-card-sparkle:nth-child(1) {
  top: 20%;
  left: 30%;
  animation-delay: 0s;
}

.game-card.au-casino .au-card-sparkle:nth-child(2) {
  top: 40%;
  right: 25%;
  animation-delay: 0.7s;
}

.game-card.au-casino .au-card-sparkle:nth-child(3) {
  bottom: 25%;
  left: 45%;
  animation-delay: 1.4s;
}


/* ================================================================
   9. SKY
   ================================================================ */
.game-card.sky {
  background: linear-gradient(180deg, #4a9bc8, #6ab4dc 35%, #92cce8 70%, #bce0f4);
  border: 2.5px solid #3a8bbf;
}

/* Cloud shapes */
.game-card.sky::before {
  content: '';
  position: absolute;
  width: 50px;
  height: 20px;
  background: rgba(255, 255, 255, 0.35);
  border-radius: 20px;
  top: 18%;
  right: 10%;
  box-shadow:
    -15px 5px 0 5px rgba(255, 255, 255, 0.3),
    10px 3px 0 3px rgba(255, 255, 255, 0.25),
    -80px 30px 0 8px rgba(255, 255, 255, 0.25),
    -95px 28px 0 4px rgba(255, 255, 255, 0.2),
    -70px 35px 0 6px rgba(255, 255, 255, 0.2);
  z-index: 1;
  pointer-events: none;
}

.game-card.sky .card-title {
  font-family: 'Fredoka', sans-serif;
  font-weight: 600;
  font-size: 40px;
  color: #fff;
  text-shadow:
    0 2px 6px rgba(0, 0, 0, 0.15),
    0 0 12px rgba(255, 255, 255, 0.3);
  z-index: 2;
}

.game-card.sky .deco {
  position: absolute;
  top: 10px;
  left: 14px;
  font-size: 36px;
  animation: float 4s ease-in-out infinite;
  z-index: 2;
}

.game-card.sky .deco-2 {
  position: absolute;
  bottom: 10px;
  left: 35%;
  font-size: 24px;
  animation: float 4s ease-in-out infinite 1s;
  z-index: 2;
}

.game-card.sky .deco-3 {
  position: absolute;
  top: 12px;
  right: 14px;
  font-size: 30px;
  animation: float 4s ease-in-out infinite 0.5s;
  z-index: 2;
}


/* ================================================================
   PLAIN CARD — Default style for games without an illustrated theme
   ================================================================ */
.game-card.plain-card {
  background: #fafafa;
  border-color: #e0e0e0;
}
.game-card.plain-card .card-title {
  font-family: 'DM Serif Display', serif;
  color: #333;
}