/* ============================================================
   📖 4. SÄÄNTÖKIRJA - MAHONGINTUMMA PUBI-PLAKAATI JA TYYLIT
   ============================================================ */

.rules-text { line-height: 1.7; font-size: 15px; text-align: left; }

.app-container .rules-header-card,
.app-container[data-theme="general"] .rules-header-card,
.app-container[data-theme="kimble"] .rules-header-card,
.app-container[data-theme="yatzy"] .rules-header-card,
.app-container[data-theme="alias"] .rules-header-card,
.app-container[data-theme="afrikan_tahti"] .rules-header-card {
 padding: 24px 18px 18px 18px !important;
 margin: 10px 10px 15px 10px !important;
  
  /* Brändin mukainen tumma #2B2B2B -pääteema ilman taustahohtoa */
  background-color: #2B2B2B !important;
  background-image: 
    repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.12) 0px, rgba(0, 0, 0, 0.12) 1px, transparent 1px, transparent 4px),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.03) 0px, rgba(255, 255, 255, 0.03) 2px, transparent 2px, transparent 8px),
    linear-gradient(180deg, #3A3A3A 0%, #2B2B2B 50%, #171717 100%) !important;
  
  border: 3px solid #F5F1E8 !important;
  border-radius: 14px !important;
  
  box-shadow: 
    0 12px 30px rgba(0, 0, 0, 0.8),
    inset 0 0 0 1px #F5F1E8,
    inset 0 0 0 3px #121212,
    inset 0 -8px 18px rgba(0, 0, 0, 0.95) !important;
  
  position: relative !important;
  box-sizing: border-box !important;
  text-align: center !important;
}

.rules-header-card::before {
  content: '';
  position: absolute;
  top: 8px; left: 8px; right: 8px; bottom: 8px;
  border: 1px dashed rgba(245, 158, 11, 0.35) !important;
  border-radius: 8px !important;
  pointer-events: none !important;
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.7) !important;
}

.rules-title-box {
  text-align: center;
}

.rules-header-card h2,
.app-container .rules-header-card h2,
.app-container[data-theme="kimble"] .rules-header-card h2,
.app-container[data-theme="yatzy"] .rules-header-card h2,
.app-container[data-theme="alias"] .rules-header-card h2,
.app-container[data-theme="afrikan_tahti"] .rules-header-card h2 {
  font-family: 'Oswald', sans-serif !important;
  font-size: 26px !important;
  letter-spacing: 2.5px !important;
  text-transform: uppercase !important;
  margin: 0 !important;
  color: #F5F1E8 !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9) !important;
}

.rules-subtitle {
  display: block !important;
  font-family: 'Oswald', sans-serif !important;
  font-size: 9.5px !important;
  font-weight: 700 !important;
  letter-spacing: 2px !important;
  color: #e5d6c3 !important;
  text-transform: uppercase !important;
  margin-top: 2px !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9) !important;
}

/* 📜 SISÄLLYSLUETTELO (TOC) - BRÄNDIVÄRIT (#2B2B2B & #F5F1E8) */
.toc,
.app-container[data-theme="kimble"] .toc,
.app-container[data-theme="yatzy"] .toc,
.app-container[data-theme="alias"] .toc,
.app-container[data-theme="afrikan_tahti"] .toc {
  background: #F5F1E8 !important;
  border: 3px solid #2B2B2B !important;
  border-radius: 14px !important;
  padding: 16px 18px !important;
  margin-bottom: 20px !important;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35) !important;
  position: relative !important;
  box-sizing: border-box !important;
}

.toc::before {
  content: '';
  position: absolute;
  top: 6px; left: 6px; right: 6px; bottom: 6px;
  border: 1px dashed #2B2B2B !important;
  border-radius: 10px !important;
  pointer-events: none !important;
  opacity: 0.3 !important;
}

.toc-title {
  font-family: 'Oswald', sans-serif !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  color: #2B2B2B !important;
  letter-spacing: 1.2px !important;
  margin-bottom: 10px !important;
  padding-bottom: 5px !important;
  border-bottom: 1.5px solid #2B2B2B !important;
  text-transform: uppercase !important;
}

.toc ul { list-style: none; padding: 0; margin: 0; }
.toc li { margin-bottom: 4px; font-size: 11.5px; line-height: 1.35; color: #2B2B2B !important; }
.toc ul ul { padding-left: 14px; margin-top: 4px; margin-bottom: 6px; }

/* SÄÄNTÖTIIVISTELMÄN EROTTELU MUIEN KOHTIEN YLÄPUOLELLE */
.toc-summary-item {
  margin-bottom: 14px !important;
  padding-bottom: 8px !important;
  border-bottom: 1px dashed rgba(43, 43, 43, 0.25) !important;
}

.toc a,
.app-container[data-theme="kimble"] .toc a,
.app-container[data-theme="yatzy"] .toc a,
.app-container[data-theme="alias"] .toc a,
.app-container[data-theme="afrikan_tahti"] .toc a {
  font-family: 'Oswald', sans-serif !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  color: #2B2B2B !important;
  border: none !important;
  letter-spacing: 0.4px !important;
  font-size: 11.5px !important;
  transition: color 0.2s ease !important;
}

.toc a:hover,
.app-container[data-theme="kimble"] .toc a:hover,
.app-container[data-theme="yatzy"] .toc a:hover,
.app-container[data-theme="alias"] .toc a:hover,
.app-container[data-theme="afrikan_tahti"] .toc a:hover {
  text-decoration: underline !important;
  color: #37467b !important;
}

/* 📜 SÄÄNTÖKORTIT - MAHONGINTUMMAT OTSIKOT JA ELEGANTTI PARGAMENTTI #F5F1E8 */
.app-container .rules-header-card,
.app-container .ranking-header-card,
.app-container .report-header-card,
.app-container .profile-header-card,
.app-container .feed-header-card,
.rules-header-card,
.ranking-header-card,
.report-header-card,
.profile-header-card,
.feed-header-card {
 padding: 24px 18px 18px 18px !important;
 margin: 10px 10px 15px 10px !important;
 
 background-color: #2B2B2B !important;
 background-image: 
    repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.12) 0px, rgba(0, 0, 0, 0.12) 1px, transparent 1px, transparent 4px),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.03) 0px, rgba(255, 255, 255, 0.03) 2px, transparent 2px, transparent 8px),
    linear-gradient(180deg, #3A3A3A 0%, #2B2B2B 50%, #171717 100%) !important;
 
 border: 3px solid #F5F1E8 !important;
 border-radius: 14px !important;
 
 box-shadow: 
    0 12px 30px rgba(0, 0, 0, 0.8),
    inset 0 0 0 1px #F5F1E8,
    inset 0 0 0 3px #121212,
    inset 0 -8px 18px rgba(0, 0, 0, 0.95) !important;
 
 position: relative !important;
 box-sizing: border-box !important;
}

.rules-header-card::before,
.ranking-header-card::before,
.report-header-card::before,
.profile-header-card::before,
.feed-header-card::before {
  content: '';
  position: absolute;
  top: 8px; left: 8px; right: 8px; bottom: 8px;
  border: 1px dashed #F5F1E8 !important;
  border-radius: 8px !important;
  pointer-events: none !important;
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.7) !important;
}

#tab-saannot .plaque-rivet,
.landing-header-card .plaque-rivet,
.rules-header-card .plaque-rivet,
.ranking-header-card .plaque-rivet,
.report-header-card .plaque-rivet,
.profile-header-card .plaque-rivet,
.feed-header-card .plaque-rivet {
  background: radial-gradient(circle at 35% 35%, #525252 0%, #2B2B2B 65%, #171717 100%) !important;
  border: 1px solid #171717 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.9), inset 0 1px 1px rgba(255, 255, 255, 0.25) !important;
}

.rules-card-header h3,
.rules-text h3 {
  color: #F5F1E8 !important;
  margin: 0 !important;
  padding: 0 !important;
  border-bottom: none !important;
  font-family: 'Oswald', sans-serif !important;
  /* Ohennettu 18 -> 14px (kirjainväli 1.2 -> 0.7px) 18.8.2026. Otsikot ovat
     osioiden nimiä, eivät sivun pääotsikoita - 18px kilpaili sisällön kanssa
     huomiosta ja pakotti palkin korkeaksi. */
  font-size: 14px !important;
  letter-spacing: 0.7px !important;
  text-transform: uppercase !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9) !important;
}

.rules-card-body {
  padding: 18px !important;
  position: relative !important;
  z-index: 2 !important;
}

.rules-card h4,
.rules-text h4 {
  color: #2B2B2B !important;
  font-family: 'Oswald', sans-serif !important;
  font-size: 15.5px !important;
  margin-top: 18px !important;
  margin-bottom: 8px !important;
  border-bottom: 1.5px dashed #2B2B2B !important;
  padding-bottom: 4px !important;
  letter-spacing: 0.5px !important;
}

.rules-text p,
.app-container[data-theme="kimble"] .rules-text p,
.app-container[data-theme="yatzy"] .rules-text p,
.app-container[data-theme="alias"] .rules-text p,
.app-container[data-theme="afrikan_tahti"] .rules-text p {
  color: #2B2B2B !important;
  line-height: 1.6 !important;
  font-size: 13.5px !important;
}

/* ⚡ SÄÄNTÖTIIVISTELMÄ-KORTTI (BRÄNDIVÄRIT #2B2B2B & #F5F1E8) */
.summary-card,
.app-container[data-theme="kimble"] .summary-card,
.app-container[data-theme="yatzy"] .summary-card,
.app-container[data-theme="alias"] .summary-card,
.app-container[data-theme="afrikan_tahti"] .summary-card {
  border: 3px solid #2B2B2B !important;
  background: #F5F1E8 !important;
}

.summary-card .rules-card-header {
  background: #2B2B2B !important;
  border-bottom: 2px solid #2B2B2B !important;
}

.summary-card ul {
  list-style-type: disc;
}

.summary-card li {
  margin-bottom: 4px;
  font-size: 12.5px;
  color: #2B2B2B;
}

.callout-box,
.app-container[data-theme="kimble"] .callout-box,
.app-container[data-theme="yatzy"] .callout-box,
.app-container[data-theme="alias"] .callout-box,
.app-container[data-theme="afrikan_tahti"] .callout-box {
  background: #F5F1E8 !important;
  border-left: 4px solid #b45309 !important;
  border-radius: 0 8px 8px 0 !important;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.05) !important;
  color: #2B2B2B !important;
  padding: 10px 12px !important;
  margin: 12px 0 16px 0 !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
  display: flex !important;
  gap: 10px !important;
  align-items: flex-start !important;
}

.callout-box strong {
  color: #2B2B2B !important;
}

.callout-box.warning,
.app-container[data-theme="kimble"] .callout-box.warning,
.app-container[data-theme="yatzy"] .callout-box.warning,
.app-container[data-theme="alias"] .callout-box.warning,
.app-container[data-theme="afrikan_tahti"] .callout-box.warning {
  background: #fef2f2 !important;
  border-left-color: #dc2626 !important;
  color: #7f1d1d !important;
}

.callout-box.warning strong {
  color: #991b1b !important;
}

.callout-icon { font-size: 16px; line-height: 1.2; flex-shrink: 0; }
.callout-content { flex-grow: 1; }

/* KÄYTÖSTÄ POISTETTU TOISTAISEKSI: menee mobiilissa uusien alapalkkien alle.
   display:none säilyttää elementin/JS:n koskemattomana, jotta nappi on
   helppo ottaa takaisin käyttöön kun sijoittelu on korjattu kunnolla. */
.fab-scroll-top { display: none !important; position: fixed; bottom: calc(var(--bottom-nav-height, 64px) + 15px + env(safe-area-inset-bottom, 0px)); right: 25px; background: #2c705f; color: #F5F1E8 !important; padding: 10px 16px; border-radius: 30px; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; text-decoration: none !important; border: none !important; box-shadow: 0 4px 12px rgba(43, 43, 43, 0.3); transition: background 0.2s, transform 0.2s; z-index: 999; cursor: pointer; }
.fab-scroll-top:hover { background: #25595C; transform: translateY(-3px); }

.control-panel { background: #F5F1E8; padding: 12px 16px; border-bottom: 1px solid #2B2B2B; display: flex; flex-direction: column; gap: 8px; }
.control-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.control-row label { font-family: 'Oswald', sans-serif; font-size: 12px; font-weight: 700; color: #2B2B2B; text-transform: uppercase; }
.control-row input, .control-row select { width: 100%; padding: 8px 10px; border-radius: 8px; font-size: 13px; border: 1px solid #2B2B2B; background: #ffffff; outline: none; }

/* 5. TAULUKOT & RANKING */
table { width: 100%; border-collapse: collapse; text-align: left; }
th { background-color: #2B2B2B; color: #F5F1E8; padding: 10px 14px; font-size: 13px; text-transform: uppercase; transition: background-color 0.3s; }
td { padding: 10px 14px; font-size: 14px; }

.player-row { cursor: pointer; transition: background 0.1s, transform 0.1s; border-bottom: 1px solid rgba(0,0,0,0.05); } 
.player-row:hover { filter: brightness(0.95); }
.player-row.active-user { border-left: 4px solid #2B2B2B; box-shadow: inset 0 0 10px rgba(0,0,0,0.05); font-weight: 600; filter: brightness(0.95); }

.sub-pronssi td { background-color: #e6b89c; color: #6a2a0a; border-bottom: 1px solid #d49a7a; }
.sub-hopea td { background-color: #cbd5e1; color: #334155; border-bottom: 1px solid #94a3b8; }
.sub-kulta td { background-color: #fde68a; color: #92400e; border-bottom: 1px solid #fcd34d; }
.sub-timantti td { background-color: #bae6fd; color: #0369a1; border-bottom: 1px solid #7dd3fc; }

.bg-pronssi { background: linear-gradient(135deg, #d97706, #9a3412) !important; }
.bg-hopea { background: linear-gradient(135deg, #94a3b8, #475569) !important; }
.bg-kulta { background: linear-gradient(135deg, #fcd34d, #d97706) !important; }
.bg-timantti { background: linear-gradient(135deg, #38bdf8, #0284c7) !important; }
.bg-pronssi .avatar-fallback, .bg-hopea .avatar-fallback, .bg-kulta .avatar-fallback, .bg-timantti .avatar-fallback { color: #ffffff !important; }

.rank-col { width: 25px; text-align: right; padding-right: 6px; padding-left: 10px; font-weight: 700; color: #2B2B2B; }
.player-col { padding-left: 4px; }

.you-tag { font-size: 10px; font-weight: 700; color: #F5F1E8; background: #2B2B2B; padding: 2px 5px; border-radius: 4px; margin-left: 4px; text-transform: uppercase; letter-spacing: 0.5px; }
.avatar-container { width: 32px; height: 32px; border-radius: 50%; overflow: hidden; background: #F5F1E8; display: flex; align-items: center; justify-content: center; flex-shrink: 0; box-shadow: 0 2px 5px rgba(0,0,0,0.1); }
.avatar-img { width: 100%; height: 100%; object-fit: cover; }
.avatar-fallback { font-size: 14px; font-weight: 700; color: #2B2B2B; }

.div-main-header td { font-family: 'Oswald', sans-serif; font-size: 15px; font-weight: 700; text-transform: uppercase; text-align: center; letter-spacing: 2px; padding: 10px; border-bottom: none; text-shadow: 0 1px 2px rgba(0,0,0,0.2); }
.div-sub-header td { font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 700; text-transform: uppercase; text-align: center; letter-spacing: 1px; padding: 4px 10px; border-bottom: none; }

.timantti { background: linear-gradient(90deg, #0284c7, #38bdf8); color: white; }
.kulta { background: linear-gradient(90deg, #d97706, #fcd34d); color: white; }
.hopea { background: linear-gradient(90deg, #475569, #94a3b8); color: white; }
.pronssi { background: linear-gradient(90deg, #9a3412, #d97706); color: white; }

/* 6. KERÄILYKORTIT JA PROFIILIT - BRÄNDI TUMMA/VAALEA #F5F1E8 (oletusulkoasu ennen kustomointiteeman valintaa) */
.card {
  background: #F5F1E8 linear-gradient(180deg, #FFFFFF 0%, #F5F1E8 100%);
  width: 100%;
  max-width: 380px;
  border-radius: 16px;
  box-shadow:
    0 15px 35px rgba(0, 0, 0, 0.65),
    inset 0 0 0 1px #46A28B,
    inset 0 0 0 3px #2B2B2B;
  border: 3px solid #2B2B2B;
  margin: 0 auto 15px auto;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

/* 🃏 3D KORTIN KÄÄNTÖ (CARD FLIP) */
.card.flippable-card {
  perspective: 1200px;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  overflow: visible !important;
}

.card.flippable-card .card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.7s cubic-bezier(0.4, 0.2, 0.2, 1);
}

.card.flippable-card.is-flipped .card-inner {
  transform: rotateY(180deg);
}

.card-front, .card-back {
  width: 100%;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: 16px;
  box-sizing: border-box;
}

.card-front *, .card-back * {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.card-front {
  position: relative;
  z-index: 2;
  overflow: hidden;
  background: #F5F1E8 linear-gradient(180deg, #FFFFFF 0%, #F5F1E8 100%);
  border: 3px solid #2B2B2B;
  box-shadow:
    0 15px 35px rgba(0, 0, 0, 0.65),
    inset 0 0 0 1px #46A28B,
    inset 0 0 0 3px #2B2B2B;
  transition: opacity 0.25s ease 0.15s, visibility 0.25s ease 0.15s;
}

.card.flippable-card.is-flipped .card-front {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transition: opacity 0.2s ease, visibility 0.2s ease;
}

.card.flippable-card:not(.is-flipped) .card-back {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transition: opacity 0.2s ease, visibility 0.2s ease;
}

.card-back {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform: rotateY(180deg);
  z-index: 10;
  overflow-y: auto;
  padding: 8px 10px;
  background: #F5F1E8 linear-gradient(180deg, #FFFFFF 0%, #F5F1E8 100%);
  border: 3px solid #2B2B2B;
  border-radius: 16px;
  box-shadow:
    0 15px 35px rgba(0, 0, 0, 0.65),
    inset 0 0 0 1px #46A28B,
    inset 0 0 0 3px #2B2B2B;
  scrollbar-width: thin;
  scrollbar-color: #2B2B2B #F5F1E8;
  transition: opacity 0.25s ease 0.15s, visibility 0.25s ease 0.15s, background 0.3s ease, border-color 0.3s ease;
  box-sizing: border-box;
}

.card.flippable-card.is-flipped .card-back {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

.card-back::-webkit-scrollbar {
  width: 5px;
}
.card-back::-webkit-scrollbar-thumb {
  background: #2B2B2B;
  border-radius: 4px;
}

.card-flip-back-btn {
  position: absolute;
  top: 8px;
  left: 8px;
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(254, 240, 138, 0.4);
  color: #fef08a;
  border-radius: 50%;
  width: 26px;
  height: 26px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  transition: all 0.2s ease;
  z-index: 10;
}

.card-flip-back-btn:hover {
  background: rgba(255, 255, 255, 0.3);
  transform: scale(1.1);
  color: #ffffff;
}

/* Polttokuvioitu / stanssattu kattoviiva kortin sisäreunassa */
.card::before {
  content: '';
  position: absolute;
  top: 6px; left: 6px; right: 6px; bottom: 6px;
  border: 1px dashed rgba(180, 83, 9, 0.28);
  border-radius: 11px;
  pointer-events: none;
  z-index: 1;
}

.card-header { 
  padding: 36px 18px 16px 18px; 
  text-align: center; 
  border-bottom: none !important; 
  position: relative; 
  border-radius: 13px 13px 0 0; 
  background: transparent;
}

/* Nostetaan kortin sisältöelementit vesileiman (z-index: 2) YLÄPUOLELLE */
.card-avatar-lg,
.card-header h2,
.card-gear-btn,
.player-title-tag,
.global-stats-row,
.level-box,
.game-ranks-container,
.card-content {
  position: relative !important;
  z-index: 3 !important;
}

/* 🏅 KORTIN ALAOSAN PLAKAATI (oletusulkoasu, sama tumma brändigradientti kuin muualla, esim. .ranking-header-card) */
.card-content {
  position: relative !important;
  z-index: 3 !important;
  margin: 10px 10px 12px 10px !important;
  padding: 10px 0 !important;
  border-radius: 10px !important;
  min-height: 52px;
  background: linear-gradient(180deg, #3A3A3A 0%, #2B2B2B 50%, #171717 100%) !important;
  border: 2px solid #2B2B2B !important;
  box-shadow:
    0 6px 14px rgba(0, 0, 0, 0.5),
    inset 0 1px 1px rgba(255, 255, 255, 0.3),
    inset 0 -2px 5px rgba(0, 0, 0, 0.85) !important;
  transition: all 0.3s ease !important;
  box-sizing: border-box !important;
}

/* Plakaatin kulmaniitit */
.card-content .plaque-rivet {
  position: absolute !important;
  width: 7px !important;
  height: 7px !important;
  border-radius: 50% !important;
  z-index: 5 !important;
  pointer-events: none !important;
}

.card-content .rivet-tl { top: 6px !important; left: 6px !important; }
.card-content .rivet-tr { top: 6px !important; right: 6px !important; }
.card-content .rivet-bl { bottom: 6px !important; left: 6px !important; }
.card-content .rivet-br { bottom: 6px !important; right: 6px !important; }

.card-gear-btn {
  position: absolute !important;
  top: 12px !important;
  right: 12px !important;
  left: auto !important;
  background: rgba(43, 43, 43, 0.08);
  border: 1px solid #2B2B2B;
  border-radius: 50% !important;
  width: 32px;
  height: 32px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  color: #2B2B2B;
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.8), 0 2px 4px rgba(0,0,0,0.15) !important;
  transition: transform 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275), color 0.2s ease, background 0.2s ease, border-color 0.2s ease !important;
  z-index: 25 !important; 
  pointer-events: auto !important;
}

.card-gear-btn svg {
  width: 18px;
  height: 18px;
  transition: transform 0.3s ease;
}

.card-gear-btn:hover {
  transform: scale(1.12) !important;
}

.card-gear-btn:hover svg {
  transform: rotate(60deg);
}

/* 🎨 TEEMAKOHTAISET KUSTOMOINTINAPIN (GEAR-BTN) TYYLIT */
.theme-bronze .card-gear-btn {
  background: rgba(110, 55, 25, 0.12) !important;
  border-color: #8c5226 !important;
  color: #4a2107 !important;
}
.theme-bronze .card-gear-btn:hover {
  background: #6e3719 !important;
  color: #fef08a !important;
  border-color: #d97706 !important;
}

.theme-silver .card-gear-btn {
  background: rgba(51, 65, 85, 0.12) !important;
  border-color: #64748b !important;
  color: #1e293b !important;
}
.theme-silver .card-gear-btn:hover {
  background: #334155 !important;
  color: #ffffff !important;
  border-color: #cbd5e1 !important;
}

.theme-gold .card-gear-btn {
  background: rgba(180, 83, 9, 0.14) !important;
  border-color: #d97706 !important;
  color: #451a03 !important;
}
.theme-gold .card-gear-btn:hover {
  background: #b45309 !important;
  color: #ffffff !important;
  border-color: #fef08a !important;
}

.theme-diamond .card-gear-btn {
  background: rgba(3, 105, 161, 0.12) !important;
  border-color: #0284c7 !important;
  color: #0c4a6e !important;
}
.theme-diamond .card-gear-btn:hover {
  background: #0369a1 !important;
  color: #ffffff !important;
  border-color: #38bdf8 !important;
}

.theme-black .card-gear-btn {
  background: rgba(23, 23, 23, 0.14) !important;
  border-color: #525252 !important;
  color: #0a0a0a !important;
}
.theme-black .card-gear-btn:hover {
  background: #171717 !important;
  color: #ffffff !important;
  border-color: #a3a3a3 !important;
}

.theme-wine .card-gear-btn {
  background: rgba(112, 28, 40, 0.14) !important;
  border-color: #701C28 !important;
  color: #420B15 !important;
}
.theme-wine .card-gear-btn:hover {
  background: #701C28 !important;
  color: #ffffff !important;
  border-color: #f472b6 !important;
}
.theme-omppupomppu .card-gear-btn {
  background: rgba(113, 120, 33, 0.14) !important;
  border-color: #717821 !important;
  color: #20210d !important;
}
.theme-omppupomppu .card-gear-btn:hover {
  background: #717821 !important;
  color: #ffffff !important;
  border-color: #dde675 !important;
}
.theme-mallasmestari .card-gear-btn {
  background: rgba(134, 88, 19, 0.14) !important;
  border-color: #865813 !important;
  color: #251a09 !important;
}
.theme-mallasmestari .card-gear-btn:hover {
  background: #865813 !important;
  color: #ffffff !important;
  border-color: #f7bc63 !important;
}
.theme-riesling .card-gear-btn {
  background: rgba(137, 104, 16, 0.14) !important;
  border-color: #896810 !important;
  color: #251e09 !important;
}
.theme-riesling .card-gear-btn:hover {
  background: #896810 !important;
  color: #ffffff !important;
  border-color: #fcd15f !important;
}
.theme-muistatko52 .card-gear-btn {
  background: rgba(29, 89, 124, 0.14) !important;
  border-color: #1d597c !important;
  color: #0c1a22 !important;
}
.theme-muistatko52 .card-gear-btn:hover {
  background: #1d597c !important;
  color: #ffffff !important;
  border-color: #70beeb !important;
}
.theme-miksologi .card-gear-btn {
  background: rgba(129, 49, 24, 0.14) !important;
  border-color: #813118 !important;
  color: #23100b !important;
}
.theme-miksologi .card-gear-btn:hover {
  background: #813118 !important;
  color: #ffffff !important;
  border-color: #f18a6a !important;
}
.theme-alkumaljalla .card-gear-btn {
  background: rgba(143, 108, 10, 0.14) !important;
  border-color: #8f6c0a !important;
  color: #271e07 !important;
}
.theme-alkumaljalla .card-gear-btn:hover {
  background: #8f6c0a !important;
  color: #ffffff !important;
  border-color: #ffd45c !important;
}
.theme-mehukestit .card-gear-btn {
  background: rgba(140, 89, 13, 0.14) !important;
  border-color: #8c590d !important;
  color: #261a08 !important;
}
.theme-mehukestit .card-gear-btn:hover {
  background: #8c590d !important;
  color: #ffffff !important;
  border-color: #ffbe5c !important;
}
.theme-vesipoika .card-gear-btn {
  background: rgba(34, 98, 119, 0.14) !important;
  border-color: #226277 !important;
  color: #0d1c21 !important;
}
.theme-vesipoika .card-gear-btn:hover {
  background: #226277 !important;
  color: #ffffff !important;
  border-color: #77c9e4 !important;
}

.theme-blue .card-gear-btn {
  background: rgba(30, 64, 175, 0.12) !important;
  border-color: #2563eb !important;
  color: #1e3a8a !important;
}
.theme-blue .card-gear-btn:hover {
  background: #1e40af !important;
  color: #ffffff !important;
  border-color: #60a5fa !important;
}

.theme-green .card-gear-btn {
  background: rgba(46, 94, 78, 0.14) !important;
  border-color: #2E5E4E !important;
  color: #1F4035 !important;
}
.theme-green .card-gear-btn:hover {
  background: #2E5E4E !important;
  color: #ffffff !important;
  border-color: #86efac !important;
}

.theme-yellow .card-gear-btn {
  background: rgba(133, 77, 14, 0.14) !important;
  border-color: #ca8a04 !important;
  color: #713f12 !important;
}
.theme-yellow .card-gear-btn:hover {
  background: #854d0e !important;
  color: #ffffff !important;
  border-color: #fde047 !important;
}

.theme-red .card-gear-btn {
  background: rgba(122, 46, 58, 0.14) !important;
  border-color: #7A2E3A !important;
  color: #541F28 !important;
}
.theme-red .card-gear-btn:hover {
  background: #7A2E3A !important;
  color: #ffffff !important;
  border-color: #fca5a5 !important;
}

.card-close-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  background: transparent;
  border: none;
  border-radius: 0;
  width: auto;
  height: auto;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 700;
  color: #2B2B2B;
  box-shadow: none;
  transition: transform 0.2s ease, opacity 0.2s ease, color 0.2s ease;
  z-index: 25;
  padding: 4px;
  line-height: 1;
}

.card-close-btn:hover {
  background: transparent;
  transform: scale(1.2);
  opacity: 0.7;
}

/* 🎨 TEEMAKOHTAISET X-RASTIN VÄRIT */
.theme-bronze .card-close-btn { color: #4a2107; }
.theme-silver .card-close-btn { color: #1e293b; }
.theme-gold .card-close-btn { color: #451a03; }
.theme-diamond .card-close-btn { color: #0c4a6e; }
.theme-black .card-close-btn { color: #171717; }
.theme-wine .card-close-btn { color: #420B15; }
.theme-omppupomppu .card-close-btn { color: #20210d; }
.theme-mallasmestari .card-close-btn { color: #251a09; }
.theme-riesling .card-close-btn { color: #251e09; }
.theme-muistatko52 .card-close-btn { color: #0c1a22; }
.theme-miksologi .card-close-btn { color: #23100b; }
.theme-alkumaljalla .card-close-btn { color: #271e07; }
.theme-mehukestit .card-close-btn { color: #261a08; }
.theme-vesipoika .card-close-btn { color: #0d1c21; }
.theme-blue .card-close-btn { color: #1e3a8a; }
.theme-green .card-close-btn { color: #1F4035; }
.theme-yellow .card-close-btn { color: #713f12; }
.theme-red .card-close-btn { color: #541F28; }

.card-avatar-lg {
  width: 78px;
  height: 78px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #2B2B2B;
  margin: 0 auto 8px auto;
  box-shadow:
    0 0 0 3px #46A28B,
    0 0 0 4px #25595C,
    0 6px 16px rgba(0, 0, 0, 0.35);
  background: #F5F1E8;
}

.card-header h2 { 
  margin: 0; 
  font-size: 23px; 
  text-transform: uppercase; 
  font-family: 'Oswald', sans-serif;
  color: #2b1408;
  letter-spacing: 1px;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
}

.player-title-tag { 
  font-size: 11.5px; 
  font-weight: 700; 
  color: #8c5226; 
  font-style: italic; 
  margin-bottom: 4px; 
  letter-spacing: 0.5px;
}

.division-tag { 
  font-weight: 700; 
  color: #574614; 
  font-size: 12px; 
  text-transform: uppercase; 
  letter-spacing: 1px; 
}

/* ⚡ KUSTOMOITU VIHREÄ XP-BOOST MERKKI & XPSPARKS VEKTORIANIMAATIO */
.xp-boost-badge {
  display: inline-flex; /* EI !important: JS:n asettama inline-tyylin display:none pitää voittaa tämän kun boosteja ei ole */
  align-items: center !important;
  gap: 4px !important;
  padding: 3px 8px !important;
  border-radius: 12px !important;
  font-size: 8.5px !important;
  font-weight: 700 !important;
  margin-top: 6px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.4px !important;
  color: #122820 !important;
  background: transparent !important; /* Taustaväri siirretään erilliseen ::before-kerrokseen */
  border: none !important; /* Reuna siirretään erilliseen ::before-kerrokseen */
  position: relative !important;
  overflow: visible !important;
  z-index: 1 !important;
}

/* UUSI: Luodaan oma läpinäkymätön taustakerros, joka peittää kipinät alleen nappulan sisällä */
.xp-boost-badge::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: #dcfce7 !important;
  border: 1px solid #2E5E4E !important;
  border-radius: 12px !important;
  box-shadow: 0 1px 3px rgba(46, 94, 78, 0.2) !important;
  z-index: 1 !important;
}

.xp-boost-badge > span,
.xp-boost-badge > .xp-boost-icon {
  position: relative !important;
  z-index: 2 !important; /* Varmistetaan, että teksti ja ikoni ovat kaikkein ylimpänä */
}

.xp-boost-icon {
  width: 11px !important;
  height: 11px !important;
  stroke: #2E5E4E !important;
  flex-shrink: 0 !important;
}

/* ⚡ XPSPARKS - VEKTORIANIMAATIO NAPIN TAUSTALLE */
.xp-sparks-anim {
  position: absolute !important;
  top: -2px !important;
  left: -12px !important;
  width: calc(100% + 24px) !important;
  height: calc(100% + 12px) !important;
  pointer-events: none !important;
  z-index: 0 !important; /* Safari-turvallinen 0-taso: jää varmasti ylemmän ::before-taustakerroksen alle */
  overflow: visible !important;
}

.xp-sparks-anim .spark {
  transform-origin: center;
  will-change: transform, opacity;
}

.xp-sparks-anim .spark-1 {
  animation: xpSparkPulse1 2.2s ease-in-out infinite;
}

.xp-sparks-anim .spark-2 {
  animation: xpSparkPulse2 1.8s ease-in-out infinite 0.4s;
}

.xp-sparks-anim .spark-3 {
  animation: xpSparkPulse1 2.5s ease-in-out infinite 0.9s;
}

.xp-sparks-anim .spark-4 {
  animation: xpSparkPulse2 2.0s ease-in-out infinite 1.3s;
}

.xp-sparks-anim .spark-5 {
  animation: xpParticleFloat 1.9s ease-in-out infinite 0.2s;
}

.xp-sparks-anim .spark-6 {
  animation: xpParticleFloat 2.3s ease-in-out infinite 1.1s;
}

@keyframes xpSparkPulse1 {
  0%, 100% {
    transform: scale(0.25) rotate(0deg);
    opacity: 0.2;
  }
  50% {
    transform: scale(0.85) rotate(45deg);
    opacity: 0.95;
    filter: drop-shadow(0 0 3px #4ade80);
  }
}

@keyframes xpSparkPulse2 {
  0%, 100% {
    transform: scale(0.3) rotate(0deg);
    opacity: 0.15;
  }
  50% {
    transform: scale(0.9) rotate(-30deg);
    opacity: 0.9;
    filter: drop-shadow(0 0 3px #22c55e);
  }
}

@keyframes xpParticleFloat {
  0%, 100% {
    transform: translateY(0) scale(0.4);
    opacity: 0.25;
  }
  50% {
    transform: translateY(-2px) scale(0.95);
    opacity: 0.9;
    filter: drop-shadow(0 0 2px #86efac);
  }
}
/* PUUIKKOISET TEEMAKOROSTUKSET KORTELLE */
/* KOKO KORTIN VAALENNETUT, PIDEÄT TEEMALIUKUVÄRIT (Aina kirkas yläosa, pehmeä teemasävy alhaalla) */
.theme-blue, .theme-blue .card-front { 
  --card-accent: #60a5fa !important;
  --card-edge: #1e40af !important;
  background: linear-gradient(180deg, #ffffff 0%, #f0f7ff 35%, #dbeafe 70%, #bfdbfe 100%) !important; 
  border-color: #1e40af !important; 
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.65), 0 0 20px rgba(37, 99, 235, 0.3) !important; 
} 
.theme-blue .card-header { background: transparent !important; }
.theme-blue .card-avatar-lg { border-color: #1e3a8a !important; box-shadow: 0 0 0 3px #60a5fa, 0 0 0 4.5px #1e40af, 0 6px 16px rgba(0,0,0,0.3) !important; }

.theme-green, .theme-green .card-front { 
  --card-accent: #86efac !important;
  --card-edge: #2E5E4E !important;
  background: linear-gradient(180deg, #ffffff 0%, #F8FBF9 35%, #E1EBE7 70%, #A8C7BB 100%) !important; 
  border-color: #2E5E4E !important; 
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.65), 0 0 20px rgba(46, 94, 78, 0.3) !important; 
} 
.theme-green .card-header { background: transparent !important; }
.theme-green .card-avatar-lg { border-color: #1F4035 !important; box-shadow: 0 0 0 3px #A8C7BB, 0 0 0 4.5px #2E5E4E, 0 6px 16px rgba(0,0,0,0.3) !important; }

.theme-yellow, .theme-yellow .card-front { 
  --card-accent: #fde047 !important;
  --card-edge: #854d0e !important;
  background: linear-gradient(180deg, #ffffff 0%, #fefce8 35%, #fef08a 70%, #fde047 100%) !important; 
  border-color: #854d0e !important; 
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.65), 0 0 20px rgba(234, 179, 8, 0.35) !important; 
} 
.theme-yellow .card-header { background: transparent !important; }
.theme-yellow .card-avatar-lg { border-color: #713f12 !important; box-shadow: 0 0 0 3px #facc15, 0 0 0 4.5px #854d0e, 0 6px 16px rgba(0,0,0,0.3) !important; }

.theme-red, .theme-red .card-front { 
  --card-accent: #fca5a5 !important;
  --card-edge: #7A2E3A !important;
  background: linear-gradient(180deg, #ffffff 0%, #FBF4F5 35%, #EBD6D9 70%, #CFA4AB 100%) !important; 
  border-color: #7A2E3A !important; 
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.65), 0 0 20px rgba(122, 46, 58, 0.3) !important; 
} 
.theme-red .card-header { background: transparent !important; }
.theme-red .card-avatar-lg { border-color: #541F28 !important; box-shadow: 0 0 0 3px #CFA4AB, 0 0 0 4.5px #7A2E3A, 0 6px 16px rgba(0,0,0,0.3) !important; }

.theme-bronze, .theme-bronze .card-front { 
  --card-accent: #d97706 !important;
  --card-edge: #6e3719 !important;
  background: linear-gradient(180deg, #ffffff 0%, #f6ece2 35%, #e5c5b1 70%, #c99c82 100%) !important; 
  border-color: #6e3719 !important; 
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.7), inset 0 0 0 1px #a85e34, inset 0 0 0 3px #261208 !important; 
} 
.theme-bronze .card-header { background: transparent !important; }
.theme-bronze .card-avatar-lg { border-color: #4a2107 !important; box-shadow: 0 0 0 3px #a85e34, 0 0 0 4.5px #6e3112, 0 6px 16px rgba(0,0,0,0.3) !important; }

.theme-silver, .theme-silver .card-front { 
  --card-accent: #cbd5e1 !important;
  --card-edge: #334155 !important;
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 35%, #f1f5f9 70%, #e2e8f0 100%) !important; 
  border-color: #334155 !important; 
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.65), 0 0 20px rgba(100, 116, 139, 0.3) !important; 
} 
.theme-silver .card-header { background: transparent !important; }
.theme-silver .card-avatar-lg { border-color: #1e293b !important; box-shadow: 0 0 0 3px #cbd5e1, 0 0 0 4.5px #475569, 0 6px 16px rgba(0,0,0,0.3) !important; }

.theme-gold, .theme-gold .card-front { 
  --card-accent: #fef08a !important;
  --card-edge: #78350f !important;
  background: linear-gradient(180deg, #ffffff 0%, #fffbeb 35%, #fef08a 70%, #fde047 100%) !important; 
  border-color: #78350f !important; 
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.7), 0 0 22px rgba(245, 158, 11, 0.4) !important; 
} 
.theme-gold .card-header { background: transparent !important; }
.theme-gold .card-avatar-lg { border-color: #451a03 !important; box-shadow: 0 0 0 3px #fef08a, 0 0 0 4.5px #d97706, 0 6px 16px rgba(0,0,0,0.35) !important; }

.theme-diamond, .theme-diamond .card-front { 
  --card-accent: #38bdf8 !important;
  --card-edge: #0369a1 !important;
  background: linear-gradient(180deg, #ffffff 0%, #f0f9ff 35%, #e0f2fe 70%, #bae6fd 100%) !important; 
  border-color: #0369a1 !important; 
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.7), 0 0 22px rgba(56, 189, 248, 0.4) !important; 
} 
.theme-diamond .card-header { background: transparent !important; }
.theme-diamond .card-avatar-lg { border-color: #0c4a6e !important; box-shadow: 0 0 0 3px #38bdf8, 0 0 0 4.5px #0284c7, 0 6px 16px rgba(0,0,0,0.35) !important; }

.theme-black, .theme-black .card-front { 
  --card-accent: #a3a3a3 !important;
  --card-edge: #171717 !important;
  background: linear-gradient(180deg, #ffffff 0%, #f5f5f5 35%, #e5e5e5 70%, #d4d4d4 100%) !important; 
  border-color: #171717 !important; 
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.85), inset 0 0 0 1px #525252 !important; 
} 
.theme-black .card-header { background: transparent !important; }
.theme-black .card-avatar-lg { border-color: #0a0a0a !important; box-shadow: 0 0 0 3px #d4d4d4, 0 0 0 4.5px #262626, 0 6px 16px rgba(0,0,0,0.5) !important; }

.theme-wine, .theme-wine .card-front { 
  --card-accent: #f472b6 !important;
  --card-edge: #701C28 !important;
  background: linear-gradient(180deg, #ffffff 0%, #fdf2f4 35%, #f4d3d8 70%, #d89ba4 100%) !important; 
  border-color: #701C28 !important; 
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.7), 0 0 20px rgba(112, 28, 40, 0.3) !important; 
} 
.theme-wine .card-header { background: transparent !important; }
.theme-wine .card-avatar-lg { border-color: #420B15 !important; box-shadow: 0 0 0 3px #f4d3d8, 0 0 0 4.5px #701C28, 0 6px 16px rgba(0,0,0,0.35) !important; }

.theme-omppupomppu, .theme-omppupomppu .card-front {
  --card-accent: #dde675 !important;
  --card-edge: #717821 !important;
  background: linear-gradient(180deg, #ffffff 0%, #f6f6f3 35%, #e7e9d3 70%, #c9cf8c 100%) !important;
  border-color: #717821 !important;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.7), 0 0 20px rgba(113, 120, 33, 0.3) !important;
}
.theme-omppupomppu .card-header { background: transparent !important; }
.theme-omppupomppu .card-avatar-lg { border-color: #20210d !important; box-shadow: 0 0 0 3px #e7e9d3, 0 0 0 4.5px #717821, 0 6px 16px rgba(0,0,0,0.35) !important; }

.theme-mallasmestari, .theme-mallasmestari .card-front {
  --card-accent: #f7bc63 !important;
  --card-edge: #865813 !important;
  background: linear-gradient(180deg, #ffffff 0%, #f7f5f3 35%, #ece1cf 70%, #d9b682 100%) !important;
  border-color: #865813 !important;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.7), 0 0 20px rgba(134, 88, 19, 0.3) !important;
}
.theme-mallasmestari .card-header { background: transparent !important; }
.theme-mallasmestari .card-avatar-lg { border-color: #251a09 !important; box-shadow: 0 0 0 3px #ece1cf, 0 0 0 4.5px #865813, 0 6px 16px rgba(0,0,0,0.35) !important; }

.theme-riesling, .theme-riesling .card-front {
  --card-accent: #fcd15f !important;
  --card-edge: #896810 !important;
  background: linear-gradient(180deg, #ffffff 0%, #f7f6f3 35%, #ede5cf 70%, #dcc37f 100%) !important;
  border-color: #896810 !important;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.7), 0 0 20px rgba(137, 104, 16, 0.3) !important;
}
.theme-riesling .card-header { background: transparent !important; }
.theme-riesling .card-avatar-lg { border-color: #251e09 !important; box-shadow: 0 0 0 3px #ede5cf, 0 0 0 4.5px #896810, 0 6px 16px rgba(0,0,0,0.35) !important; }

.theme-muistatko52, .theme-muistatko52 .card-front {
  --card-accent: #70beeb !important;
  --card-edge: #1d597c !important;
  background: linear-gradient(180deg, #ffffff 0%, #f3f5f6 35%, #d2e1ea 70%, #89b7d2 100%) !important;
  border-color: #1d597c !important;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.7), 0 0 20px rgba(29, 89, 124, 0.3) !important;
}
.theme-muistatko52 .card-header { background: transparent !important; }
.theme-muistatko52 .card-avatar-lg { border-color: #0c1a22 !important; box-shadow: 0 0 0 3px #d2e1ea, 0 0 0 4.5px #1d597c, 0 6px 16px rgba(0,0,0,0.35) !important; }

.theme-miksologi, .theme-miksologi .card-front {
  --card-accent: #f18a6a !important;
  --card-edge: #813118 !important;
  background: linear-gradient(180deg, #ffffff 0%, #f6f4f3 35%, #ebd7d1 70%, #d69985 100%) !important;
  border-color: #813118 !important;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.7), 0 0 20px rgba(129, 49, 24, 0.3) !important;
}
.theme-miksologi .card-header { background: transparent !important; }
.theme-miksologi .card-avatar-lg { border-color: #23100b !important; box-shadow: 0 0 0 3px #ebd7d1, 0 0 0 4.5px #813118, 0 6px 16px rgba(0,0,0,0.35) !important; }

.theme-alkumaljalla, .theme-alkumaljalla .card-front {
  --card-accent: #ffd45c !important;
  --card-edge: #8f6c0a !important;
  background: linear-gradient(180deg, #ffffff 0%, #f7f6f3 35%, #eee6cd 70%, #e0c57b 100%) !important;
  border-color: #8f6c0a !important;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.7), 0 0 20px rgba(143, 108, 10, 0.3) !important;
}
.theme-alkumaljalla .card-header { background: transparent !important; }
.theme-alkumaljalla .card-avatar-lg { border-color: #271e07 !important; box-shadow: 0 0 0 3px #eee6cd, 0 0 0 4.5px #8f6c0a, 0 6px 16px rgba(0,0,0,0.35) !important; }

.theme-mehukestit, .theme-mehukestit .card-front {
  --card-accent: #ffbe5c !important;
  --card-edge: #8c590d !important;
  background: linear-gradient(180deg, #ffffff 0%, #f7f5f3 35%, #eee1ce 70%, #deb77d 100%) !important;
  border-color: #8c590d !important;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.7), 0 0 20px rgba(140, 89, 13, 0.3) !important;
}
.theme-mehukestit .card-header { background: transparent !important; }
.theme-mehukestit .card-avatar-lg { border-color: #261a08 !important; box-shadow: 0 0 0 3px #eee1ce, 0 0 0 4.5px #8c590d, 0 6px 16px rgba(0,0,0,0.35) !important; }

.theme-vesipoika, .theme-vesipoika .card-front {
  --card-accent: #77c9e4 !important;
  --card-edge: #226277 !important;
  background: linear-gradient(180deg, #ffffff 0%, #f3f5f6 35%, #d3e3e8 70%, #8dbece 100%) !important;
  border-color: #226277 !important;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.7), 0 0 20px rgba(34, 98, 119, 0.3) !important;
}
.theme-vesipoika .card-header { background: transparent !important; }
.theme-vesipoika .card-avatar-lg { border-color: #0d1c21 !important; box-shadow: 0 0 0 3px #d3e3e8, 0 0 0 4.5px #226277, 0 6px 16px rgba(0,0,0,0.35) !important; }

/* 📜 TEKSTIEN SIIRTO JA TASAUS (SIVUSISENNYS ESTÄÄ TÖRMÄYKSET NIITTIEN KANSSA) */
.stat-row { 
  display: flex !important; 
  justify-content: space-between !important; 
  align-items: center !important;
  padding: 7px 22px !important; /* Varmistaa että teksti väistää kulmaniitit täydellisesti */
  border-bottom: 1px dashed rgba(255, 255, 255, 0.2) !important; 
  font-size: 12px !important; 
}

.stat-row:last-child { border-bottom: none !important; }
.stat-label { color: #F5F1E8 !important; font-weight: 600 !important; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8) !important; }
.stat-value { color: #ffffff !important; font-weight: 700 !important; text-align: right !important; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9) !important; }
.hidden-stat { display: none !important; }

/* 🎨 TEEMAKOHTAISET METALLIPLAATAT & NIITIT (DYNAAMISET TEEMASÄVYT) */

/* 🥉 BRONZE METALLIPLAATTI */
.theme-bronze .card-content {
  background: linear-gradient(180deg, #8a4316 0%, #a14c12 30%, #85300d 70%, #4c1a06 100%) !important;
  border: 2px solid #b86a3e !important;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.5), inset 0 1px 1px rgba(252, 213, 180, 0.5), inset 0 -2px 5px rgba(0, 0, 0, 0.8) !important;
}
.theme-bronze .card-content .stat-label { color: #fde0c2 !important; }
.theme-bronze .card-content .stat-value { color: #ffffff !important; }
.theme-bronze .card-content .stat-row { border-bottom-color: rgba(217, 119, 6, 0.3) !important; }
.theme-bronze .card-content .plaque-rivet {
  background: radial-gradient(circle at 35% 35%, #ffedd5 0%, #d97706 45%, #78350f 80%, #361202 100%) !important;
}

/* 🥈 SILVER METALLIPLAATTI */
.theme-silver .card-content {
  background: linear-gradient(180deg, #64748b 0%, #94a3b8 30%, #475569 70%, #1e293b 100%) !important;
  border: 2px solid #e2e8f0 !important;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.5), inset 0 1px 1px rgba(255, 255, 255, 0.7), inset 0 -2px 5px rgba(0, 0, 0, 0.8) !important;
}
.theme-silver .card-content .stat-label { color: #e2e8f0 !important; }
.theme-silver .card-content .stat-value { color: #ffffff !important; }
.theme-silver .card-content .stat-row { border-bottom-color: rgba(203, 213, 225, 0.3) !important; }
.theme-silver .card-content .plaque-rivet {
  background: radial-gradient(circle at 35% 35%, #ffffff 0%, #cbd5e1 45%, #475569 80%, #0f172a 100%) !important;
}

/* 🥇 GOLD METALLIPLAATTI */
.theme-gold .card-content {
  background: linear-gradient(180deg, #b45309 0%, #f59e0b 25%, #d97706 50%, #92400e 75%, #582404 100%) !important;
  border: 2px solid #fef08a !important;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.5), inset 0 1px 1px rgba(254, 240, 138, 0.8), inset 0 -2px 5px rgba(0, 0, 0, 0.8) !important;
}
.theme-gold .card-content .stat-label { color: #fef08a !important; }
.theme-gold .card-content .stat-value { color: #ffffff !important; }
.theme-gold .card-content .stat-row { border-bottom-color: rgba(250, 204, 21, 0.35) !important; }
.theme-gold .card-content .plaque-rivet {
  background: radial-gradient(circle at 35% 35%, #fff5aa 0%, #f59e0b 45%, #78350f 80%, #2e1102 100%) !important;
}

/* 💎 DIAMOND METALLIPLAATTI */
.theme-diamond .card-content {
  background: linear-gradient(180deg, #0284c7 0%, #38bdf8 30%, #0369a1 70%, #082f49 100%) !important;
  border: 2px solid #bae6fd !important;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.5), inset 0 1px 1px rgba(224, 242, 254, 0.7), inset 0 -2px 5px rgba(0, 0, 0, 0.8) !important;
}
.theme-diamond .card-content .stat-label { color: #bae6fd !important; }
.theme-diamond .card-content .stat-value { color: #ffffff !important; }
.theme-diamond .card-content .stat-row { border-bottom-color: rgba(125, 211, 252, 0.35) !important; }
.theme-diamond .card-content .plaque-rivet {
  background: radial-gradient(circle at 35% 35%, #ffffff 0%, #38bdf8 45%, #0284c7 80%, #082f49 100%) !important;
}

/* 🔵 BLUE METALLIPLAATTI */
.theme-blue .card-content {
  background: linear-gradient(180deg, #2563eb 0%, #3b82f6 30%, #1d4ed8 70%, #172554 100%) !important;
  border: 2px solid #93c5fd !important;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.5), inset 0 1px 1px rgba(219, 234, 254, 0.6), inset 0 -2px 5px rgba(0, 0, 0, 0.8) !important;
}
.theme-blue .card-content .stat-label { color: #dbeafe !important; }
.theme-blue .card-content .stat-value { color: #ffffff !important; }
.theme-blue .card-content .stat-row { border-bottom-color: rgba(96, 165, 250, 0.3) !important; }
.theme-blue .card-content .plaque-rivet {
  background: radial-gradient(circle at 35% 35%, #ffffff 0%, #60a5fa 45%, #1d4ed8 80%, #172554 100%) !important;
}

/* 🟢 GREEN METALLIPLAATTI (BRÄNDI #2E5E4E) */
.theme-green .card-content {
  background: linear-gradient(180deg, #16a34a 0%, #22c55e 30%, #15803d 70%, #052e16 100%) !important;
  border: 2px solid #86efac !important;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.5), inset 0 1px 1px rgba(220, 252, 231, 0.6), inset 0 -2px 5px rgba(0, 0, 0, 0.8) !important;
}
.theme-green .card-content .stat-label { color: #dcfce7 !important; }
.theme-green .card-content .stat-value { color: #ffffff !important; }
.theme-green .card-content .stat-row { border-bottom-color: rgba(74, 222, 128, 0.3) !important; }
.theme-green .card-content .plaque-rivet {
  background: radial-gradient(circle at 35% 35%, #ffffff 0%, #A8C7BB 45%, #2E5E4E 80%, #0e271f 100%) !important;
}

/* 🟡 YELLOW METALLIPLAATTI */
.theme-yellow .card-content {
  background: linear-gradient(180deg, #ca8a04 0%, #eab308 30%, #a16207 70%, #422006 100%) !important;
  border: 2px solid #fde047 !important;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.5), inset 0 1px 1px rgba(254, 249, 195, 0.6), inset 0 -2px 5px rgba(0, 0, 0, 0.8) !important;
}
.theme-yellow .card-content .stat-label { color: #fef9c3 !important; }
.theme-yellow .card-content .stat-value { color: #ffffff !important; }
.theme-yellow .card-content .stat-row { border-bottom-color: rgba(250, 204, 21, 0.3) !important; }
.theme-yellow .card-content .plaque-rivet {
  background: radial-gradient(circle at 35% 35%, #ffffff 0%, #facc15 45%, #a16207 80%, #422006 100%) !important;
}

/* 🔴 RED METALLIPLAATTI (BRÄNDI #7A2E3A) */
.theme-red .card-content {
  background: linear-gradient(180deg, #dc2626 0%, #ef4444 30%, #b91c1c 70%, #450a0a 100%) !important;
  border: 2px solid #fca5a5 !important;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.5), inset 0 1px 1px rgba(254, 226, 226, 0.6), inset 0 -2px 5px rgba(0, 0, 0, 0.8) !important;
}
.theme-red .card-content .stat-label { color: #fee2e2 !important; }
.theme-red .card-content .stat-value { color: #ffffff !important; }
.theme-red .card-content .stat-row { border-bottom-color: rgba(248, 113, 113, 0.3) !important; }
.theme-red .card-content .plaque-rivet {
  background: radial-gradient(circle at 35% 35%, #ffffff 0%, #CFA4AB 45%, #7A2E3A 80%, #300c14 100%) !important;
}

/* ⬛ BLACK METALLIPLAATTI */
.theme-black .card-content {
  background: linear-gradient(180deg, #404040 0%, #525252 30%, #262626 70%, #0a0a0a 100%) !important;
  border: 2px solid #a3a3a3 !important;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.65), inset 0 1px 1px rgba(255, 255, 255, 0.5), inset 0 -2px 5px rgba(0, 0, 0, 0.95) !important;
}
.theme-black .card-content .stat-label { color: #e5e5e5 !important; }
.theme-black .card-content .stat-value { color: #ffffff !important; }
.theme-black .card-content .stat-row { border-bottom-color: rgba(115, 115, 115, 0.35) !important; }
.theme-black .card-content .plaque-rivet {
  background: radial-gradient(circle at 35% 35%, #ffffff 0%, #a3a3a3 45%, #404040 80%, #0a0a0a 100%) !important;
}

/* 🍷 WINE / VIININPUNAINEN METALLIPLAATTI */
.theme-wine .card-content {
  background: linear-gradient(180deg, #801b2a 0%, #58121d 30%, #420b15 70%, #28050c 100%) !important;
  border: 2px solid #b85263 !important;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.5), inset 0 1px 1px rgba(254, 226, 226, 0.6), inset 0 -2px 5px rgba(0, 0, 0, 0.8) !important;
}
.theme-wine .card-content .stat-label { color: #fce7f3 !important; }
.theme-wine .card-content .stat-value { color: #ffffff !important; }
.theme-wine .card-content .stat-row { border-bottom-color: rgba(244, 114, 182, 0.3) !important; }
.theme-wine .card-content .plaque-rivet {
  background: radial-gradient(circle at 35% 35%, #ffffff 0%, #f472b6 45%, #801b2a 80%, #28050c 100%) !important;
}

.theme-omppupomppu .card-content {
  background: linear-gradient(180deg, #686e21 0%, #414516 30%, #2b2d10 70%, #151609 100%) !important;
  border: 2px solid #afb474 !important;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.5), inset 0 1px 1px rgba(255, 255, 255, 0.6), inset 0 -2px 5px rgba(0, 0, 0, 0.8) !important;
}
.theme-omppupomppu .card-content .stat-label { color: #f2f3ec !important; }
.theme-omppupomppu .card-content .stat-value { color: #ffffff !important; }
.theme-omppupomppu .card-content .stat-row { border-bottom-color: rgba(221, 230, 117, 0.3) !important; }
.theme-omppupomppu .card-content .plaque-rivet {
  background: radial-gradient(circle at 35% 35%, #ffffff 0%, #dde675 45%, #686e21 80%, #151609 100%) !important;
}

.theme-mallasmestari .card-content {
  background: linear-gradient(180deg, #7a5115 0%, #4d340f 30%, #32220b 70%, #181107 100%) !important;
  border: 2px solid #be9c6a !important;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.5), inset 0 1px 1px rgba(255, 255, 255, 0.6), inset 0 -2px 5px rgba(0, 0, 0, 0.8) !important;
}
.theme-mallasmestari .card-content .stat-label { color: #f4f1eb !important; }
.theme-mallasmestari .card-content .stat-value { color: #ffffff !important; }
.theme-mallasmestari .card-content .stat-row { border-bottom-color: rgba(247, 188, 99, 0.3) !important; }
.theme-mallasmestari .card-content .plaque-rivet {
  background: radial-gradient(circle at 35% 35%, #ffffff 0%, #f7bc63 45%, #7a5115 80%, #181107 100%) !important;
}

.theme-riesling .card-content {
  background: linear-gradient(180deg, #7d6012 0%, #4e3d0d 30%, #33280a 70%, #181306 100%) !important;
  border: 2px solid #c1a867 !important;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.5), inset 0 1px 1px rgba(255, 255, 255, 0.6), inset 0 -2px 5px rgba(0, 0, 0, 0.8) !important;
}
.theme-riesling .card-content .stat-label { color: #f4f2eb !important; }
.theme-riesling .card-content .stat-value { color: #ffffff !important; }
.theme-riesling .card-content .stat-row { border-bottom-color: rgba(252, 209, 95, 0.3) !important; }
.theme-riesling .card-content .plaque-rivet {
  background: radial-gradient(circle at 35% 35%, #ffffff 0%, #fcd15f 45%, #7d6012 80%, #181306 100%) !important;
}

.theme-muistatko52 .card-content {
  background: linear-gradient(180deg, #1d5371 0%, #143547 30%, #0f232f 70%, #081116 100%) !important;
  border: 2px solid #719db7 !important;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.5), inset 0 1px 1px rgba(255, 255, 255, 0.6), inset 0 -2px 5px rgba(0, 0, 0, 0.8) !important;
}
.theme-muistatko52 .card-content .stat-label { color: #ecf1f3 !important; }
.theme-muistatko52 .card-content .stat-value { color: #ffffff !important; }
.theme-muistatko52 .card-content .stat-row { border-bottom-color: rgba(112, 190, 235, 0.3) !important; }
.theme-muistatko52 .card-content .plaque-rivet {
  background: radial-gradient(circle at 35% 35%, #ffffff 0%, #70beeb 45%, #1d5371 80%, #081116 100%) !important;
}

.theme-miksologi .card-content {
  background: linear-gradient(180deg, #762f19 0%, #4a1f12 30%, #30150d 70%, #170b08 100%) !important;
  border: 2px solid #bb806d !important;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.5), inset 0 1px 1px rgba(255, 255, 255, 0.6), inset 0 -2px 5px rgba(0, 0, 0, 0.8) !important;
}
.theme-miksologi .card-content .stat-label { color: #f4eeec !important; }
.theme-miksologi .card-content .stat-value { color: #ffffff !important; }
.theme-miksologi .card-content .stat-row { border-bottom-color: rgba(241, 138, 106, 0.3) !important; }
.theme-miksologi .card-content .plaque-rivet {
  background: radial-gradient(circle at 35% 35%, #ffffff 0%, #f18a6a 45%, #762f19 80%, #170b08 100%) !important;
}

.theme-alkumaljalla .card-content {
  background: linear-gradient(180deg, #82630d 0%, #513f0a 30%, #352908 70%, #191406 100%) !important;
  border: 2px solid #c5ab63 !important;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.5), inset 0 1px 1px rgba(255, 255, 255, 0.6), inset 0 -2px 5px rgba(0, 0, 0, 0.8) !important;
}
.theme-alkumaljalla .card-content .stat-label { color: #f5f2eb !important; }
.theme-alkumaljalla .card-content .stat-value { color: #ffffff !important; }
.theme-alkumaljalla .card-content .stat-row { border-bottom-color: rgba(255, 212, 92, 0.3) !important; }
.theme-alkumaljalla .card-content .plaque-rivet {
  background: radial-gradient(circle at 35% 35%, #ffffff 0%, #ffd45c 45%, #82630d 80%, #191406 100%) !important;
}

.theme-mehukestit .card-content {
  background: linear-gradient(180deg, #80530f 0%, #50350c 30%, #342309 70%, #191106 100%) !important;
  border: 2px solid #c39d65 !important;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.5), inset 0 1px 1px rgba(255, 255, 255, 0.6), inset 0 -2px 5px rgba(0, 0, 0, 0.8) !important;
}
.theme-mehukestit .card-content .stat-label { color: #f4f1eb !important; }
.theme-mehukestit .card-content .stat-value { color: #ffffff !important; }
.theme-mehukestit .card-content .stat-row { border-bottom-color: rgba(255, 190, 92, 0.3) !important; }
.theme-mehukestit .card-content .plaque-rivet {
  background: radial-gradient(circle at 35% 35%, #ffffff 0%, #ffbe5c 45%, #80530f 80%, #191106 100%) !important;
}

.theme-vesipoika .card-content {
  background: linear-gradient(180deg, #225a6d 0%, #173945 30%, #10262d 70%, #091216 100%) !important;
  border: 2px solid #75a3b3 !important;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.5), inset 0 1px 1px rgba(255, 255, 255, 0.6), inset 0 -2px 5px rgba(0, 0, 0, 0.8) !important;
}
.theme-vesipoika .card-content .stat-label { color: #edf1f3 !important; }
.theme-vesipoika .card-content .stat-value { color: #ffffff !important; }
.theme-vesipoika .card-content .stat-row { border-bottom-color: rgba(119, 201, 228, 0.3) !important; }
.theme-vesipoika .card-content .plaque-rivet {
  background: radial-gradient(circle at 35% 35%, #ffffff 0%, #77c9e4 45%, #225a6d 80%, #091216 100%) !important;
}

/* 7. PAINIKKEET JA PALIKAT */
.btn-submit {
  width: 100%;
  padding: 13px 20px;
  background: linear-gradient(180deg, #2c705f 0%, #25595C 100%) !important;
  color: #F5F1E8 !important;
  border: 1px solid #25595C !important;
  border-radius: 12px !important;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25) !important;
  text-shadow: none !important;
  transition: all 0.2s ease !important;
}

.btn-submit:hover:not(:disabled) {
  background: linear-gradient(180deg, #46A28B 0%, #2c705f 100%) !important;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3) !important;
  transform: translateY(-1px);
}

.btn-submit:active:not(:disabled) {
  transform: translateY(1px) !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2) !important;
}

.btn-submit:disabled {
  background: #B8B8B8 !important;
  color: #7A7A7A !important;
  border-color: #9A9A9A !important;
  box-shadow: none !important;
  cursor: not-allowed;
}

.btn-secondary {
  background: #F5F1E8 !important;
  color: #2B2B2B !important;
  border: 1px solid #2B2B2B !important;
  border-radius: 12px !important;
  box-shadow: none !important;
  margin-top: 10px;
  font-weight: 600;
}

.btn-secondary:hover {
  background: #2B2B2B !important;
  color: #F5F1E8 !important;
}