/* ===== PREMIUM BLACKJACK SKIN COLLECTION ===== */
/* Inspired by CS:GO and LoL premium skins */
/* Focus: High-contrast readability, unique designs, professional quality */

/* ===== DEFAULT MODERN CARD STYLE ===== */
.card {
  background: #ffffff !important;
  border: 2px solid #e0e0e0 !important;
  border-radius: 8px !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.12) !important;
  position: relative !important;
  overflow: hidden !important;
}

.card-back {
  background: #2a2a2a !important;
  border: 2px solid #404040 !important;
  border-radius: 8px !important;
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.3) !important;
  position: relative !important;
  overflow: hidden !important;
}

/* Card structure styling - Complete structure with corner numbers */
.card .suit {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  font-size: 2.5rem !important;
  font-weight: 700 !important;
  font-family: "Georgia", serif !important;
  line-height: 1 !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.1) !important;
}

/* Corner numbers (::before = top-left, ::after = bottom-right) */
.card::before,
.card::after {
  font-size: 1.2rem !important;
  font-weight: bold !important;
  font-family: Arial, sans-serif !important;
}

/* CRITICAL: Ensure ALL skins show corner numbers properly */
body[data-card-skin] .card::before,
.skin-theme[data-skin] .card::before {
  content: attr(data-value) !important;
  position: absolute !important;
  top: 5px !important;
  left: 5px !important;
  font-size: 1.2rem !important;
  font-weight: bold !important;
  /* Prevent any skin from overriding these critical positioning properties */
  background: none !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  transform: none !important;
  width: auto !important;
  height: auto !important;
  right: auto !important;
  bottom: auto !important;
  margin: 0 !important;
  padding: 0 !important;
}

body[data-card-skin] .card::after,
.skin-theme[data-skin] .card::after {
  content: attr(data-value) !important;
  position: absolute !important;
  bottom: 5px !important;
  right: 5px !important;
  font-size: 1.2rem !important;
  font-weight: bold !important;
  transform: rotate(180deg) !important;
  /* Prevent any skin from overriding these critical positioning properties */
  background: none !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  width: auto !important;
  height: auto !important;
  top: auto !important;
  left: auto !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Standard suit colors - These MUST work for all skins */
.card.black .suit,
.card.black::before,
.card.black::after {
  color: #151515 !important;
}

.card.red .suit,
.card.red::before,
.card.red::after {
  color: #dc1f2b !important;
}

/* Dark background skins - High contrast text colors */
body[data-card-skin="obsidian"] .card .suit,
body[data-card-skin="obsidian"] .card::before,
body[data-card-skin="obsidian"] .card::after,
.skin-theme[data-skin="obsidian"] .card .suit,
.skin-theme[data-skin="obsidian"] .card::before,
.skin-theme[data-skin="obsidian"] .card::after {
  color: #d4af37 !important;
  text-shadow: 0 1px 3px rgba(0,0,0,0.8) !important;
}

body[data-card-skin="neon"] .card .suit,
body[data-card-skin="neon"] .card::before,
body[data-card-skin="neon"] .card::after,
.skin-theme[data-skin="neon"] .card .suit,
.skin-theme[data-skin="neon"] .card::before,
.skin-theme[data-skin="neon"] .card::after {
  color: #ffffff !important;
  text-shadow: 0 1px 3px rgba(0,0,0,0.8) !important;
}

body[data-card-skin="shadow"] .card .suit,
body[data-card-skin="shadow"] .card::before,
body[data-card-skin="shadow"] .card::after,
.skin-theme[data-skin="shadow"] .card .suit,
.skin-theme[data-skin="shadow"] .card::before,
.skin-theme[data-skin="shadow"] .card::after {
  color: #e0e0e0 !important;
  text-shadow: 0 1px 3px rgba(0,0,0,0.8) !important;
}

body[data-card-skin="lightning"] .card .suit,
body[data-card-skin="lightning"] .card::before,
body[data-card-skin="lightning"] .card::after,
.skin-theme[data-skin="lightning"] .card .suit,
.skin-theme[data-skin="lightning"] .card::before,
.skin-theme[data-skin="lightning"] .card::after {
  color: #ffd700 !important;
  text-shadow: 0 1px 3px rgba(0,0,0,0.8) !important;
}

body[data-card-skin="earth"] .card .suit,
body[data-card-skin="earth"] .card::before,
body[data-card-skin="earth"] .card::after,
.skin-theme[data-skin="earth"] .card .suit,
.skin-theme[data-skin="earth"] .card::before,
.skin-theme[data-skin="earth"] .card::after {
  color: #f5f5f5 !important;
  text-shadow: 0 1px 3px rgba(0,0,0,0.8) !important;
}

body[data-card-skin="steel"] .card .suit,
body[data-card-skin="steel"] .card::before,
body[data-card-skin="steel"] .card::after,
.skin-theme[data-skin="steel"] .card .suit,
.skin-theme[data-skin="steel"] .card::before,
.skin-theme[data-skin="steel"] .card::after {
  color: #e0e0e0 !important;
  text-shadow: 0 1px 3px rgba(0,0,0,0.8) !important;
}

body[data-card-skin="ocean"] .card .suit,
body[data-card-skin="ocean"] .card::before,
body[data-card-skin="ocean"] .card::after,
.skin-theme[data-skin="ocean"] .card .suit,
.skin-theme[data-skin="ocean"] .card::before,
.skin-theme[data-skin="ocean"] .card::after {
  color: #ffffff !important;
  text-shadow: 0 1px 3px rgba(0,0,0,0.8) !important;
}

body[data-card-skin="fire"] .card .suit,
body[data-card-skin="fire"] .card::before,
body[data-card-skin="fire"] .card::after,
.skin-theme[data-skin="fire"] .card .suit,
.skin-theme[data-skin="fire"] .card::before,
.skin-theme[data-skin="fire"] .card::after {
  color: #ffffff !important;
  text-shadow: 0 1px 3px rgba(0,0,0,0.8) !important;
}

body[data-card-skin="cyber"] .card .suit,
body[data-card-skin="cyber"] .card::before,
body[data-card-skin="cyber"] .card::after,
.skin-theme[data-skin="cyber"] .card .suit,
.skin-theme[data-skin="cyber"] .card::before,
.skin-theme[data-skin="cyber"] .card::after {
  color: #000000 !important;
  text-shadow: 0 1px 2px rgba(255,255,255,0.5) !important;
}

/* ===== SKIN 1: NATURE (Legendary - 500 chips) ===== */
/* Inspired by LoL Nature skins - Enchanted forest aesthetics */

body[data-card-skin="nature"] .card,
.skin-theme[data-skin="nature"] .card {
  background: linear-gradient(135deg, #f1f8e9 0%, #c8e6c9 50%, #a5d6a7 100%) !important;
  border: 3px solid #4caf50 !important;
  border-radius: 10px !important;
  box-shadow: 0 4px 16px rgba(76,175,80,0.3) !important;
  position: relative !important;
}

/* Nature decorative overlay - using a different selector to avoid conflicts */
body[data-card-skin="nature"] .card .nature-overlay,
.skin-theme[data-skin="nature"] .card .nature-overlay {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background:
    radial-gradient(circle at 25% 75%, rgba(76,175,80,0.2) 0%, transparent 60%);
  pointer-events: none;
}

body[data-card-skin="nature"] .card-back,
.skin-theme[data-skin="nature"] .card-back {
  background: linear-gradient(135deg, #2e7d32 0%, #388e3c 50%, #4caf50 100%) !important;
  border: 3px solid #66bb6a !important;
  border-radius: 10px !important;
  box-shadow: inset 0 3px 8px rgba(0,0,0,0.3) !important;
}

/* ===== SKIN 2: POLSKA GÓRĄ (Legendary - 500 chips) ===== */
/* Inspired by Polish patriotic theme - Red and white elegance */

body[data-card-skin="polska_gora"] .card,
.skin-theme[data-skin="polska_gora"] .card {
  background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%) !important;
  border: 3px solid #dc1f2b !important;
  border-radius: 10px !important;
  box-shadow: 0 4px 20px rgba(220,31,43,0.2) !important;
  position: relative !important;
}

/* Polska Górą decorative overlay - using a different selector to avoid conflicts */
body[data-card-skin="polska_gora"] .card .polska-overlay,
.skin-theme[data-skin="polska_gora"] .card .polska-overlay {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle at 20% 80%, rgba(220,31,43,0.03) 0%, transparent 50%);
  pointer-events: none;
}

body[data-card-skin="polska_gora"] .card-back,
.skin-theme[data-skin="polska_gora"] .card-back {
  background: linear-gradient(135deg, #ffffff 0%, #ffffff 40%, #dc1f2b 40%, #dc1f2b 100%) !important;
  border: 3px solid #dc1f2b !important;
  border-radius: 10px !important;
  box-shadow: inset 0 3px 8px rgba(0,0,0,0.15) !important;
  position: relative !important;
}

body[data-card-skin="polska_gora"] .card-back::before,
.skin-theme[data-skin="polska_gora"] .card-back::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(45deg, transparent 30%, rgba(255,255,255,0.1) 30%, rgba(255,255,255,0.1) 70%, transparent 70%);
  pointer-events: none;
}

/* ===== SKIN 3: OBSIDIAN (Legendary - 450 chips) ===== */
/* Premium dark theme with gold accents */

body[data-card-skin="obsidian"] .card,
.skin-theme[data-skin="obsidian"] .card {
  background: #000000 !important;
  border: 3px solid #d4af37 !important;
  border-radius: 8px !important;
  box-shadow: 0 6px 20px rgba(212,175,55,0.3) !important;
  position: relative !important;
}

/* Obsidian decorative overlay - using a different selector to avoid conflicts */
body[data-card-skin="obsidian"] .card .obsidian-overlay,
.skin-theme[data-skin="obsidian"] .card .obsidian-overlay {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: 
    radial-gradient(circle at 30% 30%, rgba(212,175,55,0.1) 0%, transparent 50%);
  pointer-events: none;
}

body[data-card-skin="obsidian"] .card-back,
.skin-theme[data-skin="obsidian"] .card-back {
  background: #000000 !important;
  border: 4px solid #d4af37 !important;
  border-radius: 8px !important;
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.3) !important;
  position: relative !important;
}

/* Obsidian pattern on card back */
body[data-card-skin="obsidian"] .card-back::before,
.skin-theme[data-skin="obsidian"] .card-back::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: 
    radial-gradient(100% 100% at 100% 0, transparent 24%, #000000 26% 34%, #d4af37 36% 44%, #000000 46% 54%, #d4af37 56% 64%, #000000 66% 74%, transparent 76%),
    radial-gradient(100% 100% at 0 100%, transparent 24%, #000000 26% 34%, #d4af37 36% 44%, #000000 46% 54%, #d4af37 56% 64%, #000000 66% 74%, transparent 76%),
    radial-gradient(#000000 14%, #d4af37 16%) calc(12.5px) calc(12.5px);
  background-size: 25px 25px;
  pointer-events: none;
}

/* Override the default pattern class for Obsidian skin */
body[data-card-skin="obsidian"] .card-back .pattern,
.skin-theme[data-skin="obsidian"] .card-back .pattern {
  background: 
    radial-gradient(100% 100% at 100% 0, transparent 24%, #000000 26% 34%, #d4af37 36% 44%, #000000 46% 54%, #d4af37 56% 64%, #000000 66% 74%, transparent 76%),
    radial-gradient(100% 100% at 0 100%, transparent 24%, #000000 26% 34%, #d4af37 36% 44%, #000000 46% 54%, #d4af37 56% 64%, #000000 66% 74%, transparent 76%),
    radial-gradient(#000000 14%, #d4af37 16%) calc(12.5px) calc(12.5px) !important;
  background-size: 25px 25px !important;
  border-radius: 4px !important;
}

/* Obsidian - Distinct colors for red vs black suits */
/* Red suits (Hearts ♥, Diamonds ♦) - Bright gold text */
body[data-card-skin="obsidian"] .card.red .suit,
body[data-card-skin="obsidian"] .card.red::before,
body[data-card-skin="obsidian"] .card.red::after,
body[data-card-skin="obsidian"] .card.red .value,
.skin-theme[data-skin="obsidian"] .card.red .suit,
.skin-theme[data-skin="obsidian"] .card.red::before,
.skin-theme[data-skin="obsidian"] .card.red::after,
.skin-theme[data-skin="obsidian"] .card.red .value {
  color: #ffd700 !important;
  text-shadow: 0 1px 3px rgba(0,0,0,0.8) !important;
}

/* Black suits (Spades ♠, Clubs ♣) - Darker gold text */
body[data-card-skin="obsidian"] .card.black .suit,
body[data-card-skin="obsidian"] .card.black::before,
body[data-card-skin="obsidian"] .card.black::after,
body[data-card-skin="obsidian"] .card.black .value,
.skin-theme[data-skin="obsidian"] .card.black .suit,
.skin-theme[data-skin="obsidian"] .card.black::before,
.skin-theme[data-skin="obsidian"] .card.black::after,
.skin-theme[data-skin="obsidian"] .card.black .value {
  color: #b8860b !important;
  text-shadow: none !important;
}

/* Additional Obsidian text color overrides for maximum specificity */
body[data-card-skin="obsidian"] .card.red *,
.skin-theme[data-skin="obsidian"] .card.red * {
  color: #ffd700 !important;
  text-shadow: 0 1px 3px rgba(0,0,0,0.8) !important;
}

body[data-card-skin="obsidian"] .card.black *,
.skin-theme[data-skin="obsidian"] .card.black * {
  color: #b8860b !important;
  text-shadow: none !important;
}

/* ===== SKIN 4: NEON (Epic - 260 chips) ===== */
/* Bright glow theme - Digital neon aesthetics */

body[data-card-skin="neon"] .card,
.skin-theme[data-skin="neon"] .card {
  background: #000000 !important;
  border: 3px solid #ff00ff !important;
  border-radius: 8px !important;
  box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
  position: relative !important;
}

/* Neon decorative overlay - using a different selector to avoid conflicts */
body[data-card-skin="neon"] .card .neon-overlay,
.skin-theme[data-skin="neon"] .card .neon-overlay {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: 
    linear-gradient(90deg, transparent 0%, rgba(255,0,255,0.1) 50%, transparent 100%);
  pointer-events: none;
}

body[data-card-skin="neon"] .card-back,
.skin-theme[data-skin="neon"] .card-back {
  background: #1a0033 !important;
  border: 3px solid #ff00ff !important;
  border-radius: 8px !important;
  box-shadow: inset 0 3px 6px rgba(0,0,0,0.4) !important;
}

/* Neon - High contrast text for suit */
body[data-card-skin="neon"] .card .suit,
.skin-theme[data-skin="neon"] .card .suit {
  color: #ffffff !important;
  text-shadow: 0 1px 3px rgba(0,0,0,0.8) !important;
}

/* ===== SKIN 5: VINTAGE (Epic - 260 chips) ===== */
/* Aged sepia theme - Vintage aesthetics */

body[data-card-skin="vintage"] .card,
.skin-theme[data-skin="vintage"] .card {
  background: linear-gradient(135deg, #f4f1de 0%, #e1bee7 50%, #ce93d8 100%) !important;
  border: 3px solid #bc6c25 !important;
  border-radius: 8px !important;
  box-shadow: 0 3px 10px rgba(0,0,0,0.2) !important;
  position: relative !important;
}

body[data-card-skin="vintage"] .card::before,
.skin-theme[data-skin="vintage"] .card::before {
  content: attr(data-value) !important;
  position: absolute !important;
  top: 5px !important;
  left: 5px !important;
  font-size: 1.2rem !important;
  font-weight: bold !important;
  color: inherit !important;
}

body[data-card-skin="vintage"] .card::after,
.skin-theme[data-skin="vintage"] .card::after {
  content: attr(data-value) !important;
  position: absolute !important;
  bottom: 5px !important;
  right: 5px !important;
  font-size: 1.2rem !important;
  font-weight: bold !important;
  color: inherit !important;
  transform: rotate(180deg) !important;
}

/* Vintage decorative overlay */
body[data-card-skin="vintage"] .card .vintage-overlay,
.skin-theme[data-skin="vintage"] .card .vintage-overlay {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: 
    radial-gradient(circle at 80% 20%, rgba(156,39,176,0.2) 0%, transparent 50%);
  pointer-events: none;
}

body[data-card-skin="vintage"] .card-back,
.skin-theme[data-skin="vintage"] .card-back {
  background: linear-gradient(135deg, #8b4513 0%, #a0522d 50%, #bc6c25 100%) !important;
  border: 3px solid #d2691e !important;
  border-radius: 8px !important;
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.3) !important;
}

/* ===== SKIN 6: CYBER (Epic - 280 chips) ===== */
/* Digital future theme - Cyber aesthetics */

body[data-card-skin="cyber"] .card,
.skin-theme[data-skin="cyber"] .card {
  background: #00ff00 !important;
  border: 3px solid #00ff00 !important;
  border-radius: 8px !important;
  box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
  position: relative !important;
}

body[data-card-skin="cyber"] .card::before,
.skin-theme[data-skin="cyber"] .card::before {
  content: attr(data-value) !important;
  position: absolute !important;
  top: 5px !important;
  left: 5px !important;
  font-size: 1.2rem !important;
  font-weight: bold !important;
  color: #000000 !important;
}

body[data-card-skin="cyber"] .card::after,
.skin-theme[data-skin="cyber"] .card::after {
  content: attr(data-value) !important;
  position: absolute !important;
  bottom: 5px !important;
  right: 5px !important;
  font-size: 1.2rem !important;
  font-weight: bold !important;
  color: #000000 !important;
  transform: rotate(180deg) !important;
}

/* Cyber decorative overlay */
body[data-card-skin="cyber"] .card .cyber-overlay,
.skin-theme[data-skin="cyber"] .card .cyber-overlay {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: 
    radial-gradient(circle at 50% 50%, rgba(0,255,0,0.2) 0%, transparent 60%);
  pointer-events: none;
}

body[data-card-skin="cyber"] .card-back,
.skin-theme[data-skin="cyber"] .card-back {
  background: #003300 !important;
  border: 3px solid #00ff00 !important;
  border-radius: 8px !important;
  box-shadow: inset 0 3px 6px rgba(0,0,0,0.4) !important;
}

/* Cyber - High contrast text for suit */
body[data-card-skin="cyber"] .card .suit,
.skin-theme[data-skin="cyber"] .card .suit {
  color: #000000 !important;
  text-shadow: 0 1px 2px rgba(255,255,255,0.5) !important;
}

/* ===== SKIN 7: ROYAL (Epic - 260 chips) ===== */
/* Regal purple theme - Royal aesthetics */

body[data-card-skin="royal"] .card,
.skin-theme[data-skin="royal"] .card {
  background: linear-gradient(135deg, #f3e5f5 0%, #e1bee7 50%, #ce93d8 100%) !important;
  border: 3px solid #9c27b0 !important;
  border-radius: 8px !important;
  box-shadow: 0 3px 10px rgba(0,0,0,0.2) !important;
  position: relative !important;
}

body[data-card-skin="royal"] .card::before,
.skin-theme[data-skin="royal"] .card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: 
    radial-gradient(circle at 80% 20%, rgba(156,39,176,0.2) 0%, transparent 50%);
  pointer-events: none;
}

body[data-card-skin="royal"] .card-back,
.skin-theme[data-skin="royal"] .card-back {
  background: linear-gradient(135deg, #4a148c 0%, #6a1b9a 50%, #8e24aa 100%) !important;
  border: 3px solid #ba68c8 !important;
  border-radius: 8px !important;
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.3) !important;
}

/* ===== SKIN 8: SHADOW (Epic - 260 chips) ===== */
/* Dark mysterious theme - Shadow aesthetics */

body[data-card-skin="shadow"] .card,
.skin-theme[data-skin="shadow"] .card {
  background: #1a1a1a !important;
  border: 3px solid #8a2be2 !important;
  border-radius: 8px !important;
  box-shadow: 0 6px 20px rgba(138,43,226,0.3) !important;
  position: relative !important;
}

body[data-card-skin="shadow"] .card::before,
.skin-theme[data-skin="shadow"] .card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: 
    radial-gradient(circle at 70% 30%, rgba(138,43,226,0.2) 0%, transparent 50%);
  pointer-events: none;
}

body[data-card-skin="shadow"] .card-back,
.skin-theme[data-skin="shadow"] .card-back {
  background: #000000 !important;
  border: 4px solid #8a2be2 !important;
  border-radius: 8px !important;
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.3) !important;
}

/* Shadow - High contrast text for ALL elements */
body[data-card-skin="shadow"] .card .suit,
body[data-card-skin="shadow"] .card::before,
body[data-card-skin="shadow"] .card::after,
.skin-theme[data-skin="shadow"] .card .suit,
.skin-theme[data-skin="shadow"] .card::before,
.skin-theme[data-skin="shadow"] .card::after {
  color: #e0e0e0 !important;
  text-shadow: 0 1px 3px rgba(0,0,0,0.8) !important;
}

/* ===== SKIN 9: SUNSET (Epic - 260 chips) ===== */
/* Warm gradient theme - Sunset aesthetics */

body[data-card-skin="sunset"] .card,
.skin-theme[data-skin="sunset"] .card {
  background: linear-gradient(135deg, #ffcdd2 0%, #ffab91 50%, #ffcc02 100%) !important;
  border: 3px solid #ff7043 !important;
  border-radius: 8px !important;
  box-shadow: 0 3px 10px rgba(0,0,0,0.2) !important;
  position: relative !important;
}

body[data-card-skin="sunset"] .card::before,
.skin-theme[data-skin="sunset"] .card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: 
    radial-gradient(circle at 70% 30%, rgba(255,193,7,0.3) 0%, transparent 60%);
  pointer-events: none;
}

body[data-card-skin="sunset"] .card-back,
.skin-theme[data-skin="sunset"] .card-back {
  background: linear-gradient(135deg, #d84315 0%, #e64a19 50%, #f4511e 100%) !important;
  border: 3px solid #ff8a65 !important;
  border-radius: 8px !important;
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.3) !important;
}

/* ===== SKIN 10: GOLD (Rare - 150 chips) ===== */
/* Luxury premium theme - Gold aesthetics */

body[data-card-skin="gold"] .card,
.skin-theme[data-skin="gold"] .card {
  background: linear-gradient(135deg, #fff8e1 0%, #ffecb3 50%, #ffe082 100%) !important;
  border: 3px solid #ffb300 !important;
  border-radius: 8px !important;
  box-shadow: 0 3px 10px rgba(0,0,0,0.15) !important;
  position: relative !important;
}

body[data-card-skin="gold"] .card::before,
.skin-theme[data-skin="gold"] .card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: 
    radial-gradient(circle at 40% 60%, rgba(255,193,7,0.2) 0%, transparent 50%);
  pointer-events: none;
}

body[data-card-skin="gold"] .card-back,
.skin-theme[data-skin="gold"] .card-back {
  background: linear-gradient(135deg, #f57f17 0%, #ff8f00 50%, #ffb300 100%) !important;
  border: 3px solid #ffd700 !important;
  border-radius: 8px !important;
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.2) !important;
}

/* ===== SKIN 11: CRYSTAL (Rare - 180 chips) ===== */
/* Transparent gem theme - Crystal aesthetics */

body[data-card-skin="crystal"] .card,
.skin-theme[data-skin="crystal"] .card {
  background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 50%, #90caf9 100%) !important;
  border: 3px solid #2196f3 !important;
  border-radius: 8px !important;
  box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
  position: relative !important;
}

body[data-card-skin="crystal"] .card::before,
.skin-theme[data-skin="crystal"] .card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: 
    radial-gradient(circle at 30% 20%, rgba(255,255,255,0.4) 0%, transparent 50%),
    radial-gradient(circle at 70% 80%, rgba(0,188,212,0.2) 0%, transparent 50%);
  pointer-events: none;
}

body[data-card-skin="crystal"] .card-back,
.skin-theme[data-skin="crystal"] .card-back {
  background: linear-gradient(135deg, #006064 0%, #00838f 50%, #0097a7 100%) !important;
  border: 3px solid #00bcd4 !important;
  border-radius: 8px !important;
  box-shadow: inset 0 3px 6px rgba(0,0,0,0.4) !important;
}

/* ===== SKIN 12: LEATHER (Rare - 150 chips) ===== */
/* Vintage texture theme - Leather aesthetics */

body[data-card-skin="leather"] .card,
.skin-theme[data-skin="leather"] .card {
  background: linear-gradient(135deg, #d2b48c 0%, #bcaaa4 50%, #a1887f 100%) !important;
  border: 3px solid #8b4513 !important;
  border-radius: 8px !important;
  box-shadow: 0 3px 10px rgba(0,0,0,0.2) !important;
  position: relative !important;
}

body[data-card-skin="leather"] .card::before,
.skin-theme[data-skin="leather"] .card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: 
    radial-gradient(circle at 40% 60%, rgba(139,110,99,0.2) 0%, transparent 50%);
  pointer-events: none;
}

body[data-card-skin="leather"] .card-back,
.skin-theme[data-skin="leather"] .card-back {
  background: linear-gradient(135deg, #5d4037 0%, #6d4c41 50%, #8d6e63 100%) !important;
  border: 3px solid #a1887f !important;
  border-radius: 8px !important;
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.3) !important;
}

/* ===== SKIN 13: DESERT (Rare - 180 chips) ===== */
/* Sandy dune theme - Desert aesthetics */

body[data-card-skin="desert"] .card,
.skin-theme[data-skin="desert"] .card {
  background: linear-gradient(135deg, #fafafa 0%, #f5f5f5 50%, #eeeeee 100%) !important;
  border: 3px solid #d7ccc8 !important;
  border-radius: 8px !important;
  box-shadow: 0 3px 12px rgba(0,0,0,0.15) !important;
  position: relative !important;
}

body[data-card-skin="desert"] .card::before,
.skin-theme[data-skin="desert"] .card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: 
    radial-gradient(circle at 60% 40%, rgba(215,204,200,0.3) 0%, transparent 50%);
  pointer-events: none;
}

body[data-card-skin="desert"] .card-back,
.skin-theme[data-skin="desert"] .card-back {
  background: linear-gradient(135deg, #8d6e63 0%, #a1887f 50%, #bcaaa4 100%) !important;
  border: 3px solid #d7ccc8 !important;
  border-radius: 8px !important;
  box-shadow: inset 0 2px 6px rgba(0,0,0,0.3) !important;
}

/* ===== SKIN 14: MOUNTAIN (Rare - 180 chips) ===== */
/* Peak stone theme - Mountain aesthetics */

body[data-card-skin="mountain"] .card,
.skin-theme[data-skin="mountain"] .card {
  background: linear-gradient(135deg, #fafafa 0%, #eeeeee 50%, #e0e0e0 100%) !important;
  border: 3px solid #9e9e9e !important;
  border-radius: 8px !important;
  box-shadow: 0 3px 12px rgba(0,0,0,0.15) !important;
  position: relative !important;
}

body[data-card-skin="mountain"] .card::before,
.skin-theme[data-skin="mountain"] .card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background:
    radial-gradient(circle at 30% 70%, rgba(158,158,158,0.2) 0%, transparent 50%);
  pointer-events: none;
}

body[data-card-skin="mountain"] .card-back,
.skin-theme[data-skin="mountain"] .card-back {
  background: linear-gradient(135deg, #424242 0%, #616161 50%, #757575 100%) !important;
  border: 3px solid #9e9e9e !important;
  border-radius: 8px !important;
  box-shadow: inset 0 2px 6px rgba(0,0,0,0.4) !important;
}

/* ===== SKIN 15: ICE (Uncommon - 100 chips) ===== */
/* Crystal frost theme - Ice aesthetics */

body[data-card-skin="ice"] .card,
.skin-theme[data-skin="ice"] .card {
  background: linear-gradient(135deg, #e0f7fa 0%, #b2ebf2 50%, #80deea 100%) !important;
  border: 3px solid #00bcd4 !important;
  border-radius: 8px !important;
  box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
  position: relative !important;
}

/* Ice decorative overlay - using a different selector to avoid conflicts */
body[data-card-skin="ice"] .card .ice-overlay,
.skin-theme[data-skin="ice"] .card .ice-overlay {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: 
    radial-gradient(circle at 30% 20%, rgba(255,255,255,0.4) 0%, transparent 50%),
    radial-gradient(circle at 70% 80%, rgba(0,188,212,0.2) 0%, transparent 50%);
  pointer-events: none;
}

body[data-card-skin="ice"] .card-back,
.skin-theme[data-skin="ice"] .card-back {
  background: linear-gradient(135deg, #006064 0%, #00838f 50%, #0097a7 100%) !important;
  border: 3px solid #00bcd4 !important;
  border-radius: 8px !important;
  box-shadow: inset 0 3px 6px rgba(0,0,0,0.4) !important;
}

/* ===== SKIN 16: LIGHTNING (Uncommon - 120 chips) ===== */
/* Electric storm theme - Lightning aesthetics */

body[data-card-skin="lightning"] .card,
.skin-theme[data-skin="lightning"] .card {
  background: #1a1a2e !important;
  border: 3px solid #ffd700 !important;
  border-radius: 8px !important;
  box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
  position: relative !important;
}

/* Lightning decorative overlay - using a different selector to avoid conflicts */
body[data-card-skin="lightning"] .card .lightning-overlay,
.skin-theme[data-skin="lightning"] .card .lightning-overlay {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: 
    radial-gradient(circle at 50% 50%, rgba(255,215,0,0.2) 0%, transparent 60%);
  pointer-events: none;
}

body[data-card-skin="lightning"] .card-back,
.skin-theme[data-skin="lightning"] .card-back {
  background: #0f0f23 !important;
  border: 3px solid #ffd700 !important;
  border-radius: 8px !important;
  box-shadow: inset 0 3px 6px rgba(0,0,0,0.4) !important;
}

/* Lightning - High contrast text for ALL elements */
body[data-card-skin="lightning"] .card .suit,
body[data-card-skin="lightning"] .card::before,
body[data-card-skin="lightning"] .card::after,
.skin-theme[data-skin="lightning"] .card .suit,
.skin-theme[data-skin="lightning"] .card::before,
.skin-theme[data-skin="lightning"] .card::after {
  color: #ffd700 !important;
  text-shadow: 0 1px 3px rgba(0,0,0,0.8) !important;
}

/* ===== SKIN 17: EARTH (Uncommon - 120 chips) ===== */
/* Stone & copper theme - Earth aesthetics */

body[data-card-skin="earth"] .card,
.skin-theme[data-skin="earth"] .card {
  background: #8d6e63 !important;
  border: 3px solid #6d4c41 !important;
  border-radius: 8px !important;
  box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
  position: relative !important;
}

/* Earth decorative overlay - using a different selector to avoid conflicts */
body[data-card-skin="earth"] .card .earth-overlay,
.skin-theme[data-skin="earth"] .card .earth-overlay {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: 
    radial-gradient(circle at 40% 60%, rgba(109,76,65,0.2) 0%, transparent 50%);
  pointer-events: none;
}

body[data-card-skin="earth"] .card-back,
.skin-theme[data-skin="earth"] .card-back {
  background: #5d4037 !important;
  border: 3px solid #8d6e63 !important;
  border-radius: 8px !important;
  box-shadow: inset 0 3px 6px rgba(0,0,0,0.4) !important;
}

/* Earth - High contrast text for ALL elements */
body[data-card-skin="earth"] .card .suit,
body[data-card-skin="earth"] .card::before,
body[data-card-skin="earth"] .card::after,
.skin-theme[data-skin="earth"] .card .suit,
.skin-theme[data-skin="earth"] .card::before,
.skin-theme[data-skin="earth"] .card::after {
  color: #f5f5f5 !important;
  text-shadow: 0 1px 3px rgba(0,0,0,0.8) !important;
}

/* ===== SKIN 18: STEEL (Uncommon - 100 chips) ===== */
/* Industrial metal theme - Steel aesthetics */

body[data-card-skin="steel"] .card,
.skin-theme[data-skin="steel"] .card {
  background: linear-gradient(135deg, #37474f 0%, #455a64 50%, #546e7a 100%) !important;
  border: 3px solid #607d8b !important;
  border-radius: 8px !important;
  box-shadow: 0 3px 10px rgba(0,0,0,0.2) !important;
  position: relative !important;
}

body[data-card-skin="steel"] .card::before,
.skin-theme[data-skin="steel"] .card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: 
    linear-gradient(45deg, transparent 30%, rgba(255,255,255,0.05) 30%, rgba(255,255,255,0.05) 70%, transparent 70%);
  pointer-events: none;
}

body[data-card-skin="steel"] .card-back,
.skin-theme[data-skin="steel"] .card-back {
  background: linear-gradient(135deg, #263238 0%, #37474f 50%, #455a64 100%) !important;
  border: 3px solid #78909c !important;
  border-radius: 8px !important;
  box-shadow: inset 0 2px 6px rgba(0,0,0,0.4) !important;
}

/* Steel - High contrast text for ALL elements */
body[data-card-skin="steel"] .card .suit,
body[data-card-skin="steel"] .card::before,
body[data-card-skin="steel"] .card::after,
.skin-theme[data-skin="steel"] .card .suit,
.skin-theme[data-skin="steel"] .card::before,
.skin-theme[data-skin="steel"] .card::after {
  color: #e0e0e0 !important;
  text-shadow: 0 1px 3px rgba(0,0,0,0.8) !important;
}

/* ===== SKIN 19: OCEAN (Common - 250 chips) ===== */
/* Tropical ocean theme - Calm waves with Japanese art inspiration */

body[data-card-skin="ocean"] .card,
.skin-theme[data-skin="ocean"] .card {
  background: linear-gradient(135deg, #e0f7fa 0%, #b3e5fc 50%, #81d4fa 100%) !important;
  border: 3px solid #0288d1 !important;
  border-radius: 12px !important;
  box-shadow: 0 6px 20px rgba(2,136,209,0.25) !important;
  position: relative !important;
}

/* Ocean wave overlay - Realistic flowing waves using multiple gradients */
body[data-card-skin="ocean"] .card::before,
.skin-theme[data-skin="ocean"] .card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: 
    /* Primary wave flow - horizontal flowing waves */
    linear-gradient(90deg, 
      transparent 0%, 
      rgba(255,255,255,0.4) 15%, 
      transparent 30%, 
      rgba(255,255,255,0.3) 45%, 
      transparent 60%, 
      rgba(255,255,255,0.5) 75%, 
      transparent 90%
    ),
    /* Secondary wave layer - offset for depth */
    linear-gradient(90deg, 
      transparent 10%, 
      rgba(255,255,255,0.25) 25%, 
      transparent 40%, 
      rgba(255,255,255,0.35) 55%, 
      transparent 70%, 
      rgba(255,255,255,0.2) 85%, 
      transparent 100%
    ),
    /* Wave crests - multiple horizontal wave lines */
    repeating-linear-gradient(
      0deg,
      transparent 0px,
      transparent 20px,
      rgba(255,255,255,0.5) 20px,
      rgba(255,255,255,0.5) 23px,
      transparent 23px,
      transparent 35px
    ),
    /* Additional wave details - smaller waves */
    repeating-linear-gradient(
      0deg,
      transparent 0px,
      transparent 12px,
      rgba(255,255,255,0.3) 12px,
      rgba(255,255,255,0.3) 14px,
      transparent 14px,
      transparent 22px
    ),
    /* Bubble effect - scattered ocean bubbles */
    radial-gradient(circle 8px at 20% 30%, rgba(255,255,255,0.8) 0%, transparent 70%),
    radial-gradient(circle 6px at 80% 70%, rgba(255,255,255,0.7) 0%, transparent 70%),
    radial-gradient(circle 5px at 45% 65%, rgba(255,255,255,0.6) 0%, transparent 70%),
    radial-gradient(circle 4px at 75% 25%, rgba(255,255,255,0.7) 0%, transparent 70%);
  pointer-events: none;
}

body[data-card-skin="ocean"] .card-back,
.skin-theme[data-skin="ocean"] .card-back {
  background: linear-gradient(135deg, #01579b 0%, #0277bd 50%, #0288d1 100%) !important;
  border: 0.5px solid #014377 !important;
  border-radius: 12px !important;
  box-shadow: inset 0 4px 12px rgba(0,0,0,0.3) !important;
  position: relative !important;
}

/* Ocean wave pattern on card back - Complex wave circles */
body[data-card-skin="ocean"] .card-back::before,
.skin-theme[data-skin="ocean"] .card-back::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: 
    radial-gradient(circle at 100% 150%, #0288d1 24%, #e0f7fa 24%, #e0f7fa 28%, #0288d1 28%, #0288d1 36%, #e0f7fa 36%, #e0f7fa 40%, transparent 40%, transparent),
    radial-gradient(circle at 0 150%, #0288d1 24%, #e0f7fa 24%, #e0f7fa 28%, #0288d1 28%, #0288d1 36%, #e0f7fa 36%, #e0f7fa 40%, transparent 40%, transparent),
    radial-gradient(circle at 50% 100%, #e0f7fa 10%, #0288d1 10%, #0288d1 23%, #e0f7fa 23%, #e0f7fa 30%, #0288d1 30%, #0288d1 43%, #e0f7fa 43%, #e0f7fa 50%, #0288d1 50%, #0288d1 63%, #e0f7fa 63%, #e0f7fa 71%, transparent 71%, transparent),
    radial-gradient(circle at 100% 50%, #e0f7fa 5%, #0288d1 5%, #0288d1 15%, #e0f7fa 15%, #e0f7fa 20%, #0288d1 20%, #0288d1 29%, #e0f7fa 29%, #e0f7fa 34%, #0288d1 34%, #0288d1 44%, #e0f7fa 44%, #e0f7fa 49%, transparent 49%, transparent),
    radial-gradient(circle at 0 50%, #e0f7fa 5%, #0288d1 5%, #0288d1 15%, #e0f7fa 15%, #e0f7fa 20%, #0288d1 20%, #0288d1 29%, #e0f7fa 29%, #e0f7fa 34%, #0288d1 34%, #0288d1 44%, #e0f7fa 44%, #e0f7fa 49%, transparent 49%, transparent);
  background-size: 45px 22px;
  pointer-events: none;
}

/* Override the default pattern class for Ocean skin */
body[data-card-skin="ocean"] .card-back .pattern,
.skin-theme[data-skin="ocean"] .card-back .pattern {
  background: 
    radial-gradient(circle at 100% 150%, #0288d1 24%, #e0f7fa 24%, #e0f7fa 28%, #0288d1 28%, #0288d1 36%, #e0f7fa 36%, #e0f7fa 40%, transparent 40%, transparent),
    radial-gradient(circle at 0 150%, #0288d1 24%, #e0f7fa 24%, #e0f7fa 28%, #0288d1 28%, #0288d1 36%, #e0f7fa 36%, #e0f7fa 40%, transparent 40%, transparent),
    radial-gradient(circle at 50% 100%, #e0f7fa 10%, #0288d1 10%, #0288d1 23%, #e0f7fa 23%, #e0f7fa 30%, #0288d1 30%, #0288d1 43%, #e0f7fa 43%, #e0f7fa 50%, #0288d1 50%, #0288d1 63%, #e0f7fa 63%, #e0f7fa 71%, transparent 71%, transparent),
    radial-gradient(circle at 100% 50%, #e0f7fa 5%, #0288d1 5%, #0288d1 15%, #e0f7fa 15%, #e0f7fa 20%, #0288d1 20%, #0288d1 29%, #e0f7fa 29%, #e0f7fa 34%, #0288d1 34%, #0288d1 44%, #e0f7fa 44%, #e0f7fa 49%, transparent 49%, transparent),
    radial-gradient(circle at 0 50%, #e0f7fa 5%, #0288d1 5%, #0288d1 15%, #e0f7fa 15%, #e0f7fa 20%, #0288d1 20%, #0288d1 29%, #e0f7fa 29%, #e0f7fa 34%, #0288d1 34%, #0288d1 44%, #e0f7fa 44%, #e0f7fa 49%, transparent 49%, transparent) !important;
  background-size: 45px 22px !important;
  border-radius: 9px !important;
}

/* Ocean - Distinct colors for red vs black suits */
/* Red suits (Hearts ♥, Diamonds ♦) - Ocean blue text */
body[data-card-skin="ocean"] .card.red .suit,
body[data-card-skin="ocean"] .card.red::before,
body[data-card-skin="ocean"] .card.red::after,
body[data-card-skin="ocean"] .card.red .value,
.skin-theme[data-skin="ocean"] .card.red .suit,
.skin-theme[data-skin="ocean"] .card.red::before,
.skin-theme[data-skin="ocean"] .card.red::after,
.skin-theme[data-skin="ocean"] .card.red .value {
  color: #0288d1 !important;
  text-shadow: none !important;
}

/* Black suits (Spades ♠, Clubs ♣) - Ocean white text */
body[data-card-skin="ocean"] .card.black .suit,
body[data-card-skin="ocean"] .card.black::before,
body[data-card-skin="ocean"] .card.black::after,
body[data-card-skin="ocean"] .card.black .value,
.skin-theme[data-skin="ocean"] .card.black .suit,
.skin-theme[data-skin="ocean"] .card.black::before,
.skin-theme[data-skin="ocean"] .card.black::after,
.skin-theme[data-skin="ocean"] .card.black .value {
  color: #ffffff !important;
  text-shadow: none !important;
}

/* Additional Ocean text color overrides for maximum specificity */
body[data-card-skin="ocean"] .card.red *,
.skin-theme[data-skin="ocean"] .card.red * {
  color: #0288d1 !important;
  text-shadow: none !important;
}

body[data-card-skin="ocean"] .card.black *,
.skin-theme[data-skin="ocean"] .card.black * {
  color: #ffffff !important;
  text-shadow: none !important;
}

/* ===== SKIN 20: FIRE (Common - 50 chips) ===== */
/* Dangerous ember/coal theme - Fierce fire aesthetics */

body[data-card-skin="fire"] .card,
.skin-theme[data-skin="fire"] .card {
  background: #dc2626 !important;
  border: 3px solid #991b1b !important;
  border-radius: 8px !important;
  box-shadow: 0 4px 15px rgba(220,38,38,0.4), inset 0 2px 8px rgba(0,0,0,0.3) !important;
  position: relative !important;
}

/* Ember particle overlay */
body[data-card-skin="fire"] .card::before,
.skin-theme[data-skin="fire"] .card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: 
    radial-gradient(circle at 15% 25%, rgba(255,255,255,0.9) 3px, transparent 4px),
    radial-gradient(circle at 85% 15%, rgba(255,193,7,1) 2px, transparent 3px),
    radial-gradient(circle at 35% 65%, rgba(255,255,255,0.8) 2.5px, transparent 3.5px),
    radial-gradient(circle at 95% 75%, rgba(255,193,7,0.9) 2px, transparent 3px),
    radial-gradient(circle at 5% 45%, rgba(255,255,255,0.7) 2px, transparent 3px),
    radial-gradient(circle at 75% 55%, rgba(255,193,7,0.8) 2.5px, transparent 3.5px),
    radial-gradient(circle at 50% 35%, rgba(255,255,255,0.6) 1.5px, transparent 2.5px),
    radial-gradient(circle at 25% 80%, rgba(255,193,7,0.7) 1px, transparent 2px),
    radial-gradient(circle at 65% 85%, rgba(255,255,255,0.8) 2px, transparent 3px);
  pointer-events: none;
}

body[data-card-skin="fire"] .card-back,
.skin-theme[data-skin="fire"] .card-back {
  background: linear-gradient(135deg, #1f2937 0%, #374151 50%, #4b5563 100%) !important;
  border: 3px solid #dc2626 !important;
  border-radius: 8px !important;
  box-shadow: inset 0 3px 6px rgba(0,0,0,0.6) !important;
  position: relative !important;
}

/* Fire silhouette pattern on card back */
body[data-card-skin="fire"] .card-back::before,
.skin-theme[data-skin="fire"] .card-back::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: 
    radial-gradient(100% 100% at 100% 0, #dc2626 4%, #fbbf24 6% 14%, #dc2626 16% 24%, #fbbf24 26% 34%, #dc2626 36% 44%, #fbbf24 46% 54%, #dc2626 56% 64%, #fbbf24 66% 74%, #dc2626 76% 84%, #fbbf24 86% 94%, rgba(0,0,0,0.5) 96%, transparent),
    radial-gradient(100% 100% at 0 100%, transparent, rgba(0,0,0,0.5) 4%, #fbbf24 6% 14%, #dc2626 16% 24%, #fbbf24 26% 34%, #dc2626 36% 44%, #fbbf24 46% 54%, #dc2626 56% 64%, #fbbf24 66% 74%, #dc2626 76% 84%, #fbbf24 86% 94%, #dc2626 96%);
  background-size: 60px 60px;
  pointer-events: none;
}

/* Override the default pattern class for Fire skin */
body[data-card-skin="fire"] .card-back .pattern,
.skin-theme[data-skin="fire"] .card-back .pattern {
  background: 
    radial-gradient(100% 100% at 100% 0, #dc2626 4%, #fbbf24 6% 14%, #dc2626 16% 24%, #fbbf24 26% 34%, #dc2626 36% 44%, #fbbf24 46% 54%, #dc2626 56% 64%, #fbbf24 66% 74%, #dc2626 76% 84%, #fbbf24 86% 94%, rgba(0,0,0,0.5) 96%, transparent),
    radial-gradient(100% 100% at 0 100%, transparent, rgba(0,0,0,0.5) 4%, #fbbf24 6% 14%, #dc2626 16% 24%, #fbbf24 26% 34%, #dc2626 36% 44%, #fbbf24 46% 54%, #dc2626 56% 64%, #fbbf24 66% 74%, #dc2626 76% 84%, #fbbf24 86% 94%, #dc2626 96%) !important;
  background-size: 60px 60px !important;
  border-radius: 5px !important;
}

/* Fire - Distinct colors for red vs black suits */
/* Red suits (Hearts ♥, Diamonds ♦) - Fiery orange text */
body[data-card-skin="fire"] .card.red .suit,
body[data-card-skin="fire"] .card.red::before,
body[data-card-skin="fire"] .card.red::after,
body[data-card-skin="fire"] .card.red .value,
.skin-theme[data-skin="fire"] .card.red .suit,
.skin-theme[data-skin="fire"] .card.red::before,
.skin-theme[data-skin="fire"] .card.red::after,
.skin-theme[data-skin="fire"] .card.red .value {
  color: #f59e0b !important;
  text-shadow: 0 0 3px rgba(0,0,0,0.8) !important;
}

/* Black suits (Spades ♠, Clubs ♣) - Fiery red text */
body[data-card-skin="fire"] .card.black .suit,
body[data-card-skin="fire"] .card.black::before,
body[data-card-skin="fire"] .card.black::after,
body[data-card-skin="fire"] .card.black .value,
.skin-theme[data-skin="fire"] .card.black .suit,
.skin-theme[data-skin="fire"] .card.black::before,
.skin-theme[data-skin="fire"] .card.black::after,
.skin-theme[data-skin="fire"] .card.black .value {
  color: #dc2626 !important;
  text-shadow: 0 0 3px rgba(0,0,0,0.8) !important;
}

/* Additional Fire text color overrides for maximum specificity */
body[data-card-skin="fire"] .card.red *,
.skin-theme[data-skin="fire"] .card.red * {
  color: #f59e0b !important;
  text-shadow: 0 0 3px rgba(0,0,0,0.8) !important;
}

body[data-card-skin="fire"] .card.black *,
.skin-theme[data-skin="fire"] .card.black * {
  color: #dc2626 !important;
  text-shadow: 0 0 3px rgba(0,0,0,0.8) !important;
}

/* ===== SKIN 21: CLASSIC (Common - 0 chips) ===== */
/* Traditional casino theme - Free default skin with zioło.eu branding */

body[data-card-skin="classic"] .card,
.skin-theme[data-skin="classic"] .card {
  background: #ffffff !important;
  border: 3px solid #dc1f2b !important;
  border-radius: 10px !important;
  box-shadow: 0 4px 16px rgba(220,31,43,0.15) !important;
  position: relative !important;
}

/* Classic card subtle texture overlay */
body[data-card-skin="classic"] .card::before,
.skin-theme[data-skin="classic"] .card::before {
  content: attr(data-value) !important;
  position: absolute !important;
  top: 5px !important;
  left: 5px !important;
  font-size: 1.2rem !important;
  font-weight: bold !important;
  color: inherit !important;
  /* Prevent any skin from overriding these critical positioning properties */
  background: none !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  transform: none !important;
  width: auto !important;
  height: auto !important;
  right: auto !important;
  bottom: auto !important;
  margin: 0 !important;
  padding: 0 !important;
}

body[data-card-skin="classic"] .card::after,
.skin-theme[data-skin="classic"] .card::after {
  content: attr(data-value) !important;
  position: absolute !important;
  bottom: 5px !important;
  right: 5px !important;
  font-size: 1.2rem !important;
  font-weight: bold !important;
  color: inherit !important;
  transform: rotate(180deg) !important;
  /* Prevent any skin from overriding these critical positioning properties */
  background: none !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  width: auto !important;
  height: auto !important;
  top: auto !important;
  left: auto !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Classic card back - Casino red with zioło.eu branding */
body[data-card-skin="classic"] .card-back,
.skin-theme[data-skin="classic"] .card-back {
  background: linear-gradient(135deg, #dc1f2b 0%, #b91c1c 50%, #991b1b 100%) !important;
  border: 3px solid #dc1f2b !important;
  border-radius: 10px !important;
  box-shadow: inset 0 3px 8px rgba(0,0,0,0.3) !important;
  position: relative !important;
}

/* Casino pattern overlay on card back */
body[data-card-skin="classic"] .card-back::before,
.skin-theme[data-skin="classic"] .card-back::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: 
    repeating-linear-gradient(
      45deg,
      transparent,
      transparent 8px,
      rgba(255,255,255,0.1) 8px,
      rgba(255,255,255,0.1) 16px
    ),
    repeating-linear-gradient(
      -45deg,
      transparent,
      transparent 8px,
      rgba(255,255,255,0.05) 8px,
      rgba(255,255,255,0.05) 16px
    );
  pointer-events: none;
}



/* Enhanced casino pattern overlay on card back */
body[data-card-skin="classic"] .card-back::after,
.skin-theme[data-skin="classic"] .card-back::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: 
    radial-gradient(circle at 25% 25%, rgba(255,255,255,0.15) 0%, transparent 50%),
    radial-gradient(circle at 75% 75%, rgba(255,255,255,0.1) 0%, transparent 50%),
    repeating-linear-gradient(
      45deg,
      transparent,
      transparent 6px,
      rgba(255,255,255,0.08) 6px,
      rgba(255,255,255,0.08) 12px
    );
  pointer-events: none;
  z-index: 1;
}

/* Override the default pattern class for Classic skin */
body[data-card-skin="classic"] .card-back .pattern,
.skin-theme[data-skin="classic"] .card-back .pattern {
  background: 
    repeating-linear-gradient(
      45deg,
      transparent,
      transparent 8px,
      rgba(255,255,255,0.1) 8px,
      rgba(255,255,255,0.1) 16px
    ),
    repeating-linear-gradient(
      -45deg,
      transparent,
      transparent 8px,
      rgba(255,255,255,0.05) 8px,
      rgba(255,255,255,0.05) 16px
    ) !important;
  background-size: 100% 100% !important;
  border-radius: 7px !important;
}

/* ===== COLLECTION SUMMARY ===== */
/* 
  Total Skins: 21 (Matching the actual SKIN_CATALOG from cosmetics.js)
  
  Rarity Distribution:
  - Legendary: 3 skins (450-500 chips) - Nature, Polska Górą, Obsidian
  - Epic: 6 skins (260-280 chips) - Neon, Vintage, Cyber, Royal, Shadow, Sunset
  - Rare: 5 skins (150-180 chips) - Gold, Crystal, Leather, Desert, Mountain
  - Uncommon: 4 skins (100-120 chips) - Ice, Lightning, Earth, Steel
  - Common: 3 skins (0-50 chips) - Ocean, Fire, Classic
  
  Design Philosophy:
  - Inspired by CS:GO and LoL premium skins
  - High-contrast readability on all backgrounds
  - Dark skins use light text, light skins use dark text
  - Rarer skins have more intricate designs and textures
  - Subtle gradients and patterns without looking cheap
  - Unique and distinguishable for casual players
  
  Card Structure:
  - Simple structure with just .suit element
  - Positioned in center of card
  - Proper suit colors maintained
  
  CSS Selectors:
  - In-game cards: body[data-card-skin="skin_id"] .card
  - Shop previews: .skin-theme[data-skin="skin_id"] .card
  - Both selectors are included for each skin to ensure compatibility
  
  All skins feature:
  - Professional casino-quality appearance
  - Unique color schemes and textures
  - Consistent border radius and shadows
  - Both in-game and shop preview support
  - Perfect readability across all backgrounds
  - Maintained traditional suit color logic
  - !important declarations to override conflicting CSS
*/

/* ===== SKIN 22: CUSTOM REQUEST (Special - 0.1% drop chance) ===== */
/* Special blank skin for custom requests - extremely rare drop */

body[data-card-skin="custom_request"] .card,
.skin-theme[data-skin="custom_request"] .card {
  background: transparent !important;
  border: 3px solid #ffd700 !important;
  border-radius: 8px !important;
  box-shadow: 0 4px 15px rgba(255,215,0,0.3) !important;
  position: relative !important;
}

/* Custom Request decorative overlay - subtle custom indicator */
body[data-card-skin="custom_request"] .card::before,
.skin-theme[data-skin="custom_request"] .card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: 
    radial-gradient(circle at 50% 50%, rgba(255,215,0,0.1) 0%, transparent 60%);
  pointer-events: none;
}

body[data-card-skin="custom_request"] .card-back,
.skin-theme[data-skin="custom_request"] .card-back {
  background: transparent !important;
  border: 3px solid #ffd700 !important;
  border-radius: 8px !important;
  box-shadow: inset 0 2px 4px rgba(255,215,0,0.2) !important;
  position: relative !important;
}

/* Custom Request pattern on card back - blank with subtle custom indicator */
body[data-card-skin="custom_request"] .card-back::before,
.skin-theme[data-skin="custom_request"] .card-back::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: 
    radial-gradient(circle at 50% 50%, rgba(255,215,0,0.05) 0%, transparent 40%);
  pointer-events: none;
}

/* Override the default pattern class for Custom Request skin */
body[data-card-skin="custom_request"] .card-back .pattern,
.skin-theme[data-skin="custom_request"] .card-back .pattern {
  background: transparent !important;
  border-radius: 5px !important;
}

/* Custom Request - Distinct colors for red vs black suits */
/* Red suits (Hearts ♥, Diamonds ♦) - Gold text */
body[data-card-skin="custom_request"] .card.red .suit,
body[data-card-skin="custom_request"] .card.red::before,
body[data-card-skin="custom_request"] .card.red::after,
body[data-card-skin="custom_request"] .card.red .value,
.skin-theme[data-skin="custom_request"] .card.red .suit,
.skin-theme[data-skin="custom_request"] .card.red::before,
.skin-theme[data-skin="custom_request"] .card.red::after,
.skin-theme[data-skin="custom_request"] .card.red .value {
  color: #ffd700 !important;
  text-shadow: 0 1px 3px rgba(0,0,0,0.8) !important;
}

/* Black suits (Spades ♠, Clubs ♣) - Gold text */
body[data-card-skin="custom_request"] .card.black .suit,
body[data-card-skin="custom_request"] .card.black::before,
body[data-card-skin="custom_request"] .card.black::after,
body[data-card-skin="custom_request"] .card.black .value,
.skin-theme[data-skin="custom_request"] .card.black .suit,
.skin-theme[data-skin="custom_request"] .card.black::before,
.skin-theme[data-skin="custom_request"] .card.black::after,
.skin-theme[data-skin="custom_request"] .card.black .value {
  color: #ffd700 !important;
  text-shadow: none !important;
}

/* Additional Custom Request text color overrides for maximum specificity */
body[data-card-skin="custom_request"] .card.red *,
.skin-theme[data-skin="custom_request"] .card.red * {
  color: #ffd700 !important;
  text-shadow: 0 1px 3px rgba(0,0,0,0.8) !important;
}

body[data-card-skin="custom_request"] .card.black *,
.skin-theme[data-skin="custom_request"] .card.black * {
  color: #ffd700 !important;
  text-shadow: none !important;
}