/* ==========================================================================
   Bulls & Cows: Thematic Styling & Play Mat Customization
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Play Mat / Table Backgrounds
   -------------------------------------------------------------------------- */

/* Midnight Felt (Classic Casino) */
body.mat-felt {
  background-color: #f3f8ff;
  background-image: 
    radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.98) 0%, rgba(226, 240, 255, 0.96) 100%),
    repeating-linear-gradient(45deg, rgba(22, 119, 210, 0.025) 0px, rgba(22, 119, 210, 0.025) 2px, transparent 2px, transparent 8px);
}

/* Holo Cyber-Grid */
body.mat-cybergrid {
  background-color: #05050f;
  background-image: 
    linear-gradient(rgba(0, 255, 204, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 255, 204, 0.07) 1px, transparent 1px),
    radial-gradient(circle at 50% 0%, rgba(255, 0, 128, 0.15) 0%, transparent 70%);
  background-size: 36px 36px, 36px 36px, 100% 100%;
}

/* Oak Tavern Table */
body.mat-tavern {
  background-color: #1a0f0a;
  background-image: 
    radial-gradient(circle at 50% 30%, rgba(212, 163, 115, 0.18) 0%, transparent 60%),
    repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.25) 0px, rgba(0, 0, 0, 0.25) 30px, rgba(255, 255, 255, 0.02) 31px, rgba(255, 255, 255, 0.02) 32px);
}

/* Deep Space Nebula */
body.mat-nebula {
  background-color: #080314;
  background-image: 
    radial-gradient(circle at 20% 30%, rgba(138, 43, 226, 0.25) 0%, transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(0, 191, 255, 0.2) 0%, transparent 50%),
    radial-gradient(circle at 50% 50%, rgba(255, 20, 147, 0.15) 0%, transparent 60%);
}

/* --------------------------------------------------------------------------
   2. Card Themes
   -------------------------------------------------------------------------- */

/* Theme: Classic Minimalist */
.theme-classic .card-slot.card-filled {
  background: #ffffff;
  border: 1.5px solid rgba(22, 119, 210, 0.28);
  color: #145da0;
  box-shadow: 0 4px 12px rgba(28, 86, 140, 0.14);
}

/* Theme: Cyberpunk Neon */
.theme-cyberpunk {
  --border-accent: #00ffcc;
  --color-bull: #00ff88;
  --color-cow: #00e5ff;
}

.theme-cyberpunk .card-slot.card-filled {
  background: rgba(10, 20, 30, 0.95);
  border: 2px solid #00ffcc;
  color: #00ffcc;
  text-shadow: 0 0 10px rgba(0, 255, 204, 0.8), 0 0 20px rgba(0, 255, 204, 0.4);
  box-shadow: 0 0 16px rgba(0, 255, 204, 0.3), inset 0 0 12px rgba(0, 255, 204, 0.15);
  font-family: 'Courier New', monospace;
}

.theme-cyberpunk .keypad-btn:hover:not(:disabled) {
  border-color: #00ffcc;
  box-shadow: 0 0 10px rgba(0, 255, 204, 0.4);
}

.theme-cyberpunk .badge-bull {
  background: #00ff88;
  color: #000;
  box-shadow: 0 0 10px rgba(0, 255, 136, 0.6);
}

.theme-cyberpunk .badge-cow {
  background: #00e5ff;
  color: #000;
  box-shadow: 0 0 10px rgba(0, 229, 255, 0.6);
}

/* Theme: Medieval Parchment / Tavern */
.theme-medieval {
  --color-bull: #e65100;
  --color-cow: #d4a373;
}

.theme-medieval .card-slot.card-filled {
  background: #3e2723;
  background-image: radial-gradient(circle, #4e342e 0%, #2e1c14 100%);
  border: 2px solid #8d6e63;
  color: #ffcc80;
  text-shadow: 1px 1px 2px #000;
  box-shadow: inset 0 0 8px #1a0f0a, 0 4px 10px rgba(0, 0, 0, 0.5);
  font-family: 'Georgia', serif;
  border-radius: 6px;
}

.theme-medieval .badge-bull {
  background: #b71c1c;
  color: #fff;
}

.theme-medieval .badge-cow {
  background: #d4a373;
  color: #1a0f0a;
}

/* Theme: Retro 8-Bit Arcade */
.theme-retro {
  --color-bull: #f9c74f;
  --color-cow: #4cc9f0;
}

.theme-retro .card-slot.card-filled {
  background: #000000;
  border: 3px solid #f9c74f;
  color: #f9c74f;
  font-family: 'Courier New', monospace;
  font-weight: 900;
  border-radius: 0px;
  box-shadow: 4px 4px 0px #000;
  text-shadow: 2px 2px 0px #9a031e;
}

.theme-retro .keypad-btn {
  border-radius: 0px;
  border: 2px solid #555;
  box-shadow: 3px 3px 0px #000;
}

.theme-retro .badge-bull,
.theme-retro .badge-cow {
  border-radius: 0px;
  box-shadow: 2px 2px 0px #000;
}