/* ============================================================
   🍻 KANSALLINEN BAARIPELILIIGA - PERUSTYYLIT & PUBITEEMA
   ============================================================ */

/* 1. YLEISRAKENNE & PERUSTAUSTA (VAHVA & NÄKYVÄ PUBITEKSTUURI) */
*, *::before, *::after {
  box-sizing: border-box;
}

html { 
  scroll-behavior: smooth; 
  overflow-x: hidden;
  max-width: 100vw;
  width: 100%;
  position: relative;
  touch-action: pan-y;
}

body { 
  font-family: 'Inter', system-ui, -apple-system, sans-serif; 
  background-color: #F5F1E8; 
  margin: 0; 
  padding: 20px 10px; 
  color: #2B2B2B; 
  transition: background-color 0.6s ease, color 0.3s ease; 
  overflow-x: hidden;
  max-width: 100vw;
  width: 100%;
  position: relative;
  touch-action: pan-y;
}

@media (max-width: 600px) {
  body {
    padding: 10px 0;
    -webkit-tap-highlight-color: transparent; /* Poistaa harmaat vilskahtavat laatikot näpäytettäessä */
  }

  /* ⚡ MOBIILIN KOSKETUSOPTIMOINTI: Välitön vaste painikkeissa ilman viiveitä */
  button, 
  .btn-submit, 
  .nav-tab, 
  .react-btn, 
  .tap-handle-item, 
  .card-gear-btn,
  .top-nav-btn,
  .game-rank-item {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }

  /* 🚀 MOBIILIOPTIMOINTI: Poistetaan raskaat jatkuvat taustaanimaatiot mobiilissa kohdennetusti.
     Vältetään wildcard (*)-valitsinta, joka pakottaisi selaimen laskemaan tyylit koko DOM-puussa uudelleen. */
  .hanging-sign-wrapper,
  .hanging-sign-wrapper .wooden-sign-board,
  .nav-tabs::before,
  .nav-tabs::after,
  .xp-sparks-anim .spark,
  .card.effect-foil::before,
  #otherPlayerCard:not(:hover),
  #otherPlayerCard:not(:hover)::after,
  .card:not(:hover)::after {
    animation: none !important;
  }

  /* Varmistetaan XP- ja tasonousuanimaatioiden säilyminen mobiiliselaimella */
  .level-tag.level-up-pop {
    animation: levelUpPop 1.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards !important;
  }

  .xp-val.xp-pulse {
    animation: xpPulse 0.6s ease-in-out infinite alternate !important;
  }

  .xp-fill {
    transition: width 2.2s cubic-bezier(0.22, 1, 0.36, 1) !important;
  }

  /* Poistetaan raskas ja suorituskykyä syövä backdrop-filter (blur) */
  .ranking-blur-overlay,
  .custom-parchment-body,
  .game-ranks-grid {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  /* Kevennetään moninkertaisia varjoja näytönohjaimen säästämiseksi */
  .app-container,
  .card,
  .rules-card,
  .landing-header-card,
  .rules-header-card,
  .ranking-header-card,
  .report-header-card,
  .profile-header-card,
  .feed-header-card {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35) !important;
  }

  /* 📱 YLÄPALKIN ASETTELUN KORJAUS MOBIILISSA (ESTETÄÄN LOGON JA FIIDI-IKONIN PÄÄLLEKKÄISYYS) */
  .logo-container img {
    max-width: 190px !important;
  }

  .top-user-nav {
    top: 8px !important;
    right: 8px !important;
    z-index: 130 !important;
  }
}

/* 💡 PELIKOHTAISET TAUSTAVÄRIT JA AMBIENT-VALOHEHKUT (BRÄNDIVÄRIT) */
body, body[data-theme="general"] { 
  --ambient-glow-color: rgba(216, 200, 178, 0.5); 
  background-color: #F5F1E8; 
  background-image: 
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.5) 0%, rgba(230, 220, 205, 0.75) 100%),
    repeating-linear-gradient(0deg, rgba(43, 43, 43, 0.055) 0px, rgba(43, 43, 43, 0.055) 1px, transparent 1px, transparent 4px),
    repeating-linear-gradient(90deg, rgba(43, 43, 43, 0.055) 0px, rgba(43, 43, 43, 0.055) 1px, transparent 1px, transparent 4px),
    radial-gradient(rgba(43, 43, 43, 0.065) 1px, transparent 0);
  background-size: 100% 100%, 8px 8px, 8px 8px, 12px 12px;
}
body[data-theme="kimble"] { 
  --ambient-glow-color: rgba(55, 70, 123, 0.85); 
  background-color: #1e2642; 
  background-image: none;
}
body[data-theme="yatzy"] { 
  --ambient-glow-color: rgba(143, 73, 138, 0.85); 
  background-color: #3b1839; 
  background-image: none;
}
body[data-theme="alias"] { 
  --ambient-glow-color: rgba(143, 73, 84, 0.85); 
  background-color: #48232a; 
  background-image: none;
}
body[data-theme="afrikan_tahti"] { 
  --ambient-glow-color: rgba(241, 203, 100, 0.85); 
  background-color: #634f19; 
  background-image: none;
}

/* 💡 SELAINNÄKYMÄN AMBIENT-VALOKEILA KOKO SIVUN TAUSTALLE (BODY) */
body::before {
  content: '';
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 1000px;
  max-width: 100vw;
  height: 1000px;
  max-height: 100vh;
  border-radius: 50%;
  background: radial-gradient(circle, var(--ambient-glow-color, rgba(217, 119, 6, 0.35)) 0%, rgba(0, 0, 0, 0) 70%);
  filter: blur(80px);
  pointer-events: none;
  z-index: 0;
  opacity: 0.9;
  transition: background 0.8s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.8s ease;
}

/* 2. SOVELLUSSÄILIÖ (APP CONTAINER) - BRÄNDIVIHERIÄ #2C705F */
.app-container,
.app-container[data-theme="general"] { 
  background-color: #2c705f !important; 
  background-image: 
    radial-gradient(circle at 50% 30%, rgba(70, 162, 139, 0.35) 0%, rgba(37, 89, 92, 0.6) 100%),
    repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.06) 0px, rgba(255, 255, 255, 0.06) 1px, transparent 1px, transparent 6px),
    repeating-linear-gradient(-45deg, rgba(0, 0, 0, 0.08) 0px, rgba(0, 0, 0, 0.08) 1px, transparent 1px, transparent 6px),
    linear-gradient(180deg, #388975 0%, #2c705f 50%, #225749 100%) !important; 
  background-size: 100% 100%, 12px 12px, 12px 12px, 100% 100% !important;
  width: 100%; 
  max-width: 520px; 
  margin: 0 auto; 
  border-radius: 16px; 
  box-shadow: 
    0 0 100px 25px var(--ambient-glow-color, rgba(70, 162, 139, 0.45)),
    0 35px 80px rgba(0, 0, 0, 0.9), 
    0 12px 25px rgba(0, 0, 0, 0.6),
    inset 0 1px 0 rgba(255, 255, 255, 0.3) !important; 
  border: 1px solid #1f5043 !important; 
  position: relative; 
  overflow-x: hidden;
  transition: box-shadow 0.8s cubic-bezier(0.4, 0, 0.2, 1), background 0.3s ease, border-color 0.3s ease !important; 
}

/* 💡 PELIKOHTAINEN AMBIENT-VALOKEILA SOVELLUSKORTIN TAKANA */
.app-container::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  max-width: 100vw;
  height: 100%;
  border-radius: 50%;
  background: radial-gradient(circle, var(--ambient-glow-color, rgba(217, 119, 6, 0.28)) 0%, rgba(0, 0, 0, 0) 70%);
  filter: blur(65px);
  pointer-events: none;
  z-index: -1;
  transition: background 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Ambient-hohtovärit ja blur-taustavärit pelikohtaisille teemoille */
.app-container[data-theme="general"] { --ambient-glow-color: rgba(70, 162, 139, 0.45); --blur-bg-rgb: 37, 89, 92; --blur-border-color: #25595C; }
.app-container[data-theme="kimble"] { --ambient-glow-color: rgba(55, 70, 123, 0.55); --blur-bg-rgb: 16, 22, 42; --blur-border-color: #37467b; }
.app-container[data-theme="yatzy"] { --ambient-glow-color: rgba(143, 73, 138, 0.55); --blur-bg-rgb: 38, 15, 36; --blur-border-color: #8f498a; }
.app-container[data-theme="alias"] { --ambient-glow-color: rgba(143, 73, 84, 0.55); --blur-bg-rgb: 43, 18, 24; --blur-border-color: #8f4954; }
.app-container[data-theme="afrikan_tahti"] { --ambient-glow-color: rgba(241, 203, 100, 0.55); --blur-bg-rgb: 40, 24, 4; --blur-border-color: #f1cb64; }

#ptr-indicator { 
  text-align: center; 
  padding: 12px; 
  font-size: 13px; 
  font-weight: 700; 
  color: #8c7362; 
  background: #F5F1E8; 
  display: none; 
  text-transform: uppercase; 
  font-family: 'Oswald', sans-serif; 
  letter-spacing: 1px; 
  border-radius: 15px 15px 0 0; /* ⚡ Lisätty reunojen pyöristys kun app-container ei enää leikkaa */
}

/* 3. YLÄPALKKI & LOGO (TÄYSIN YHTENÄISTETTY TAUSTA) */
.header-top-area {
  position: relative;
  z-index: 105;
  border-radius: 15px 15px 0 0;
}

.sticky-header { 
  position: sticky; 
  top: 0; 
  z-index: 100; 
  background: #F5F1E8; 
  border-bottom: 1px solid #d8c8b2; 
  transition: background 0.3s ease; 
}

.logo-container { 
  text-align: center; 
  padding: 6px 10px 0px 10px; 
  background: transparent !important; 
  border-bottom: none !important; 
  cursor: pointer; 
  transition: background 0.2s; 
}
.logo-container:hover { background: rgba(0, 0, 0, 0.03) !important; }
.logo-container img { 
  display: block; 
  margin: 0 auto 8px auto; 
  width: 100%; 
  max-width: 280px; 
  height: auto; 
  max-height: 110px; 
  object-fit: contain; 
  pointer-events: none; 
}

/* 🍺 NESTEASTIA-NAVIGAATIO (YHTENÄINEN NESTETÄYTTÖ & KUPLINTA) */
.nav-tabs { 
  display: flex; 
  flex-wrap: wrap; 
  position: relative; 
  z-index: 20; 
  background-color: #241109; 
  background-image: linear-gradient(115deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.03) 25%, transparent 45%);
  border-top: none !important; 
  border-bottom: 6px solid rgba(15, 7, 3, 0.85); 
  box-shadow: 
    inset 0 4px 8px rgba(0, 0, 0, 0.8), 
    0 5px 12px rgba(0, 0, 0, 0.6); 
  overflow: hidden; 
  padding: 2px 0; 
  transition: background 0.35s ease, border-color 0.35s ease; 
}

/* 🫧 NOUSEVAT KUPLAT NESTEESSÄ (Rajattu tarkasti madalletun nesterajan alle) */
.nav-tabs::before {
  content: '';
  position: absolute;
  top: 14px; /* ⚡ Siirretty nesterajan mukaisesti alemmas */
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  pointer-events: none;
  background-image: 
    radial-gradient(circle at 12% 80%, rgba(255, 255, 255, 0.4) 1px, transparent 2px),
    radial-gradient(circle at 28% 90%, rgba(255, 255, 255, 0.3) 1.5px, transparent 3px),
    radial-gradient(circle at 48% 75%, rgba(255, 255, 255, 0.45) 1px, transparent 2px),
    radial-gradient(circle at 68% 85%, rgba(255, 255, 255, 0.3) 2px, transparent 3px),
    radial-gradient(circle at 88% 70%, rgba(255, 255, 255, 0.35) 1px, transparent 2px),
    radial-gradient(circle at 38% 60%, rgba(255, 255, 255, 0.25) 1.5px, transparent 3px);
  background-size: 120px 50px;
  animation: bubblesRise 3.2s linear infinite;
  opacity: 0.65;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 1) 25%, rgba(0, 0, 0, 1) 100%);
  mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 1) 25%, rgba(0, 0, 0, 1) 100%);
}

/* 🌊 NESTEEN PINNAN AALTOILEVA HEIJASTE (Selkeä & maltillisen elävä liike) */
.nav-tabs::after {
  content: '';
  position: absolute;
  top: 8px; 
  left: 0; 
  right: 0; 
  width: 100%;
  height: 9px; 
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 30' preserveAspectRatio='none'%3E%3Cpath d='M0,0 L0,5 Q150 11, 300 5 T600 5 L600,0 Z' fill='rgba(255, 255, 255, 0.48)'/%3E%3C/svg%3E");
  background-size: 300px 9px;
  background-repeat: repeat-x;
  pointer-events: none;
  z-index: 3;
  animation: liquidSurfaceWave 3.2s ease-in-out infinite;
  filter: drop-shadow(0 1px 1.5px rgba(255,255,255,0.3));
}

@keyframes bubblesRise {
  0% { background-position: 0 50px, 0 50px, 0 50px, 0 50px, 0 50px, 0 50px; }
  100% { background-position: 0 0, 0 0, 0 0, 0 0, 0 0, 0 0; }
}

@keyframes liquidSurfaceWave {
  0% {
    background-position-x: 0px;
    transform: translateY(0px) scaleY(1);
    opacity: 0.80;
  }
  50% {
    transform: translateY(1px) scaleY(1.20);
    opacity: 0.95;
  }
  100% {
    background-position-x: -300px;
    transform: translateY(0px) scaleY(1);
    opacity: 0.80;
  }
}

/* 🔍 NAVIGAATIOVÄLILEHDET NESTEEN PÄÄLLÄ */
.nav-tab { 
  flex: 1; 
  padding: 16px 2px 6px 2px; 
  text-align: center; 
  font-size: 11.5px; 
  font-weight: 700; 
  color: #fef08a !important; 
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.95), 0 0 2px rgba(0, 0, 0, 0.9); 
  cursor: pointer; 
  border-right: none !important; 
  letter-spacing: 0.4px; 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  gap: 4px; 
  position: relative; 
  z-index: 5; 
  background: transparent; 
  transition: all 0.2s ease; 
  white-space: nowrap;
}

.nav-tab:last-child { border-right: none !important; }

.nav-tab:hover {
  background: transparent !important;
  color: #ffffff !important;
  text-shadow: 0 0 8px rgba(255, 255, 255, 0.8), 0 1px 4px rgba(0, 0, 0, 0.95) !important;
}

.nav-tab span {
  transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  display: inline-block;
}

.nav-tab:hover span {
  transform: scale(1.06) translateY(-1px);
}

.nav-tab.active { 
  background: transparent !important; 
  color: #ffffff !important; 
  text-shadow: 0 0 12px rgba(255, 255, 255, 0.95), 0 0 4px rgba(254, 240, 138, 0.8), 0 1px 4px rgba(0, 0, 0, 0.95) !important;
  border-bottom: none !important; 
  box-shadow: none !important; 
}

.nav-tab.active span {
  transform: scale(1.08) translateY(-1px);
}

/* 🎨 KUSTOMOIDUT SVG-IKONIT NAVIGAATIOVÄLILEHDISSÄ */
.nav-tab-icon { 
  width: 22px !important; 
  height: 22px !important; 
  min-width: 22px !important; 
  min-height: 22px !important; 
  display: inline-block !important; 
  flex-shrink: 0 !important; 
  transition: transform 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275), filter 0.2s ease;
}

.rank-podium-icon,
.rules-book-icon,
.report-card-icon,
.report-header-icon {
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.6));
}

.admin-gear-icon {
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.4));
}

.nav-tab:hover .nav-tab-icon {
  transform: scale(1.15) translateY(-1px);
  filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.9));
}

.nav-tab.active .nav-tab-icon {
  transform: scale(1.22) translateY(-1px);
  filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.95)) drop-shadow(0 0 4px rgba(254, 240, 138, 0.8));
}
.notif-dot { width: 8px; height: 8px; background-color: #d9534f; border-radius: 50%; display: inline-block; }

.tab-content { display: none; padding: 25px 20px; }
.tab-content.active { display: block; }

.spinner { border: 2px solid rgba(255,255,255,0.3); border-top: 2px solid #fff; border-radius: 50%; width: 14px; height: 14px; animation: spin 0.8s linear infinite; display: inline-block; vertical-align: middle; margin-right: 6px; }
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
@keyframes slideInUp { from { opacity: 0; transform: translateY(15px); } to { opacity: 1; transform: translateY(0); } }

.feed-card-header-title { font-family: 'Oswald', sans-serif; letter-spacing: 0.5px; }
.clash-icon { display: inline-block; animation: clashAnim 2s ease-in-out infinite; font-size: 15px; margin-right: 4px; transform-origin: center; }

/* ============================================================
   📖 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;
  font-size: 18px !important;
  letter-spacing: 1.2px !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 #c8baa6 !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; }

.fab-scroll-top { position: fixed; bottom: 25px; right: 25px; background: #8c7362; color: #fcf9f4 !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(92, 67, 51, 0.3); transition: background 0.2s, transform 0.2s; z-index: 999; cursor: pointer; }
.fab-scroll-top:hover { background: #5c351e; transform: translateY(-3px); }

.control-panel { background: #ebdcc9; padding: 12px 16px; border-bottom: 1px solid #d8c8b2; 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: #5c4333; text-transform: uppercase; }
.control-row input, .control-row select { width: 100%; padding: 8px 10px; border-radius: 8px; font-size: 13px; border: 1px solid #d9ccbb; background: #fffefb; outline: none; }

/* 5. TAULUKOT & RANKING */
table { width: 100%; border-collapse: collapse; text-align: left; }
th { background-color: #5c4333; color: #fdfbf7; 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 #382a21; 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: #5c4333; }
.player-col { padding-left: 4px; }

.you-tag { font-size: 10px; font-weight: 700; color: #fdfbf7; background: #382a21; 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: #e2d4c1; 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: #5c4333; }

.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 - PUU- & PARGAMENTTIILME #F5F1E8 */
.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 #d97706,
    inset 0 0 0 3px #3d2314; 
  border: 3px solid #5c351e; 
  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 #5c351e;
  box-shadow: 
    0 15px 35px rgba(0, 0, 0, 0.65), 
    inset 0 0 0 1px #d97706,
    inset 0 0 0 3px #3d2314;
  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 #5c351e;
  border-radius: 16px;
  box-shadow: 
    0 15px 35px rgba(0, 0, 0, 0.65), 
    inset 0 0 0 1px #d97706,
    inset 0 0 0 3px #3d2314;
  scrollbar-width: thin;
  scrollbar-color: #8c6246 #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: #8c6246;
  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: 22px 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,
.card-share-btn,
.player-title-tag,
.global-stats-row,
.level-box,
.game-ranks-container,
.card-content {
  position: relative !important;
  z-index: 3 !important;
}

/* 🏅 KORTIN ALAOSAN METALLINEN PLAKAATI */
.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, #784528 0%, #965330 30%, #5c351e 70%, #361b0d 100%) !important;
  border: 2px solid #8c6246 !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(92, 53, 30, 0.08); 
  border: 1px solid #c8baa6; 
  border-radius: 50% !important; 
  width: 32px; 
  height: 32px; 
  cursor: pointer; 
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  color: #4a2313;
  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-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-share-btn { 
  position: absolute; 
  top: 12px; 
  left: 12px; 
  background: rgba(92, 53, 30, 0.08); 
  border: 1px solid #c8baa6; 
  border-radius: 50%; 
  width: 30px; 
  height: 30px; 
  cursor: pointer; 
  font-size: 14px;
  color: #4a2313;
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.8), 0 2px 4px rgba(0,0,0,0.15);
}

.card-avatar-lg { 
  width: 78px; 
  height: 78px; 
  border-radius: 50%; 
  object-fit: cover; 
  border: 2px solid #5c351e; 
  margin: 0 auto 8px auto; 
  box-shadow: 
    0 0 0 3px #fcd34d, 
    0 0 0 4px #78350f, 
    0 6px 16px rgba(0, 0, 0, 0.35); 
  background: #e2d4c1; 
}

.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; 
}

.promo-status { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 20px; font-size: 10px; font-weight: 700; margin-top: 6px; text-transform: uppercase; letter-spacing: 0.5px; }
.promo-status.chance { background: #e6f4ea; color: #1e7e34; border: 1px solid #b7e1cd; }
.promo-status.threat { background: #fce8e6; color: #d9534f; border: 1px solid #f5c6cb; }

/* ⚡ KUSTOMOITU VIHREÄ XP-BOOST MERKKI & XPSPARKS VEKTORIANIMAATIO */
.xp-boost-badge {
  display: inline-flex !important;
  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 { 
  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 { 
  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 { 
  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 { 
  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 { 
  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 { 
  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 { 
  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 { 
  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 { 
  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 { 
  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; }

/* 📜 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: #fde0c2 !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;
}

/* 7. PAINIKKEET JA PALIKAT */
.btn-submit { 
  width: 100%; 
  padding: 13px 20px; 
  background: linear-gradient(180deg, #674732 0%, #4a3120 100%) !important; 
  color: #fdfaf5 !important; 
  border: 1px solid #382415 !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, #78543c 0%, #573a27 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: #c0b2a3 !important; 
  color: #8c7e70 !important; 
  border-color: #a89a8b !important; 
  box-shadow: none !important;
  cursor: not-allowed; 
}

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

.btn-secondary:hover {
  background: #dfcfbc !important;
  color: #2e1d11 !important;
}

/* ============================================================
   👤 PROFIILISIVUN BRÄNDITYYLI (#2B2B2B & #F5F1E8)
   ============================================================ */
#tab-profiili .rules-card {
  background: #F5F1E8 !important;
  border: 2px solid #2B2B2B !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1) !important;
}

#tab-profiili .rules-card-header {
  background: #2B2B2B !important;
  border-bottom: 2px solid #2B2B2B !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25) !important;
}

#tab-profiili .rules-card-header h3,
#tab-profiili .rules-card-header div,
#tab-profiili .rules-card-header span {
  color: #F5F1E8 !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9) !important;
}

#tab-profiili .rules-card-body h3:not(#myProfileCard *),
#tab-profiili .rules-card-body h4:not(#myProfileCard *),
#tab-profiili .rules-card-body p:not(#myProfileCard *),
#tab-profiili .rules-card-body label:not(#myProfileCard *),
#tab-profiili .rules-card-body span:not(#myProfileCard *):not(.notif-dot-top):not(.spark),
#tab-profiili .rules-card-body div:not(#myProfileCard *):not(.plaque-rivet) {
  color: #2B2B2B !important;
  text-shadow: none !important;
}

#tab-profiili a:not(#myProfileCard *) {
  color: #8f4954 !important;
  text-shadow: none !important;
}

#tab-profiili .report-field-label {
  color: #2B2B2B !important;
}

#tab-profiili .friend-card-item {
  background: #F5F1E8 !important;
  border: 1.5px solid #2B2B2B !important;
}

#tab-profiili .friend-card-item:hover {
  background: #ffffff !important;
  border-color: #2B2B2B !important;
}

#tab-profiili .friend-name-text {
  color: #2B2B2B !important;
}

#tab-profiili .achievement-card {
  background: #F5F1E8 !important;
  border: 1.5px solid #2B2B2B !important;
}

#tab-profiili .achievement-card .achievement-name,
#tab-profiili .achievement-card div {
  color: #2B2B2B !important;
}

#tab-profiili .achievement-group h4 {
  color: #2B2B2B !important;
}

#tab-profiili .btn-secondary {
  background: #F5F1E8 !important;
  color: #2B2B2B !important;
  border: 1.5px solid #2B2B2B !important;
  border-radius: 12px !important;
  font-weight: 600;
  transition: all 0.2s ease !important;
}

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

.btn-landing-join {
  background: #2B2B2B linear-gradient(180deg, #3A3A3A 0%, #2B2B2B 100%) !important;
  color: #F5F1E8 !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  padding: 14px 28px !important;
  border-radius: 12px !important; 
  border: 1px solid #171717 !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25) !important;
  display: inline-block;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  transition: all 0.2s ease !important;
}

.btn-landing-join:hover {
  background: linear-gradient(180deg, #484848 0%, #333333 100%) !important;
  color: #FFFFFF !important;
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35) !important;
}

/* 8. SAAVUTUKSET (ACHIEVEMENTS) */
.achievement-group h4 { font-size: 11px; color: #8c7362; margin: 10px 0 8px 0; text-transform: uppercase; }
.achievement-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.achievement-card { border: 1px solid #d8c8b2; border-radius: 8px; padding: 8px 4px; text-align: center; background: #fffefb; position: relative; }
.achievement-card.unlocked { border-color: #bdab95; background: #fdfbf7; }
.achievement-card.locked { opacity: 0.45; filter: grayscale(100%); background: #ebdcc9; }
.achievement-icon { margin-bottom: 2px; display: flex; align-items: center; justify-content: center; min-height: 22px; }
.achievement-name { font-size: 9px; font-weight: 700; line-height: 1.1; }

.ach-svg-icon {
  width: 28px;
  height: 28px;
  display: inline-block;
  vertical-align: middle;
  filter: drop-shadow(0 1.5px 3px rgba(0, 0, 0, 0.22));
  transition: transform 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275), filter 0.2s ease;
}

.achievement-card:hover .ach-svg-icon {
  transform: scale(1.15) rotate(4deg);
}

.achievement-card.unlocked .ach-svg-icon {
  filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.28));
}

.achievement-card.card-blurred { position: relative; overflow: hidden; cursor: pointer; opacity: 1 !important; }
.achievement-card.card-blurred .achievement-content-blur { filter: blur(2.5px) grayscale(100%); opacity: 0.4; pointer-events: none; }
.ach-more-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(56, 42, 33, 0.75); color: #fdfbf7; display: flex; flex-direction: column; align-items: center; justify-content: center; font-family: 'Oswald', sans-serif; font-size: 15px; font-weight: 700; border-radius: 7px; z-index: 5; transition: background 0.2s ease; }
.achievement-card.card-blurred:hover .ach-more-overlay { background: rgba(56, 42, 33, 0.88); }
.ach-more-sub { font-size: 8px; font-family: 'Inter', sans-serif; font-weight: 500; opacity: 0.9; margin-top: 1px; }

/* 9. FIIDI & KOMMENTIT */
.feed-empty-state { 
  text-align: center !important; 
  padding: 24px 18px !important; 
  color: #2B2B2B !important; 
  font-size: 13px !important; 
  line-height: 1.55 !important;
  background: #F5F1E8 !important; 
  border: 2px dashed #2B2B2B !important; 
  border-radius: 12px !important; 
  margin-top: 10px !important; 
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
  font-weight: 500 !important;
}

/* 🪵 BRÄNDINMUKAINEN SUBNAV SÄILIÖ JA PAINIKKEET (OMA SYÖTE / JULKINEN) */
.feed-subnav-container {
  display: flex !important;
  gap: 8px !important;
  margin-bottom: 16px !important;
  background: #2B2B2B !important;
  padding: 5px !important;
  border-radius: 12px !important;
  border: 2px solid #2B2B2B !important;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25) !important;
}

.feed-subnav-btn {
  flex: 1 !important;
  padding: 10px 14px !important;
  font-family: 'Oswald', sans-serif !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  color: #F5F1E8 !important;
  background: #2B2B2B !important;
  border: 1px solid rgba(245, 241, 232, 0.2) !important;
  border-radius: 8px !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  text-shadow: none !important;
  box-shadow: none !important;
}

.feed-subnav-btn:hover {
  color: #ffffff !important;
  background: #3A3A3A !important;
  border-color: #F5F1E8 !important;
  transform: translateY(-1px) !important;
}

.feed-subnav-btn.active {
  color: #2B2B2B !important;
  background: #F5F1E8 !important;
  border: 1px solid #F5F1E8 !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2) !important;
  text-shadow: none !important;
}

/* 📜 SÄÄNTÖKORTIT - BRÄNDINMUKAINEN #2B2B2B ULKOREUNA JA PUHDAS #F5F1E8 SISÄPUOLI */
.rules-card,
.app-container[data-theme="kimble"] .rules-card,
.app-container[data-theme="yatzy"] .rules-card,
.app-container[data-theme="alias"] .rules-card,
.app-container[data-theme="afrikan_tahti"] .rules-card {
 background: #F5F1E8 !important;
 border: 3px solid #2B2B2B !important;
 border-radius: 14px !important;
 padding: 0 !important;
 margin-bottom: 20px !important;
 box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35) !important;
 position: relative !important;
 overflow: hidden !important;
 box-sizing: border-box !important;
}

.rules-card::before {
  display: none !important;
}

.rules-card-header {
  background: #2B2B2B !important;
  padding: 12px 18px !important;
  border-bottom: 2px solid #2B2B2B !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25) !important;
  position: relative !important;
  z-index: 2 !important;
}

.feed-card {
  background: #F5F1E8 !important;
  border: 2px solid #2B2B2B !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  margin-bottom: 12px !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25) !important;
  box-sizing: border-box !important;
}

.feed-card-header {
  background: #2B2B2B !important;
  padding: 10px 14px !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  border-bottom: 1px solid #2B2B2B !important;
}

.feed-card-header-title { 
  font-family: 'Oswald', sans-serif !important; 
  font-size: 13px !important; 
  font-weight: 700 !important; 
  letter-spacing: 0.8px !important; 
  color: #F5F1E8 !important; 
  text-shadow: none !important; 
  margin: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
}

.feed-game-icon {
  width: 16px !important;
  height: 16px !important;
  display: inline-block !important;
  flex-shrink: 0 !important;
}

.feed-card-body {
  padding: 12px 14px !important;
  position: relative !important;
  z-index: 2 !important;
  color: #2B2B2B !important;
  background: #F5F1E8 !important;
}

.feed-card-kimble { border-left: 5px solid #37467b !important; }
.feed-card-kimble .feed-card-header-title { color: #F5F1E8 !important; text-shadow: none !important; }

.feed-card-yatzy { border-left: 5px solid #2c705f !important; }
.feed-card-yatzy .feed-card-header-title { color: #F5F1E8 !important; text-shadow: none !important; }

.feed-card-alias { border-left: 5px solid #8f4954 !important; }
.feed-card-alias .feed-card-header-title { color: #F5F1E8 !important; text-shadow: none !important; }

.feed-card-afrikan_tahti { border-left: 5px solid #f1cb64 !important; }
.feed-card-afrikan_tahti .feed-card-header-title { color: #F5F1E8 !important; text-shadow: none !important; }

.feed-card-achievement { border-left: 5px solid #f1cb64 !important; }
.feed-card-announcement { 
 border-left: 5px solid #37467b !important; 
 position: sticky !important;
 top: 48px !important;
 z-index: 80 !important;
}
.feed-card-comment { border-left: 5px solid #37467b !important; }
.feed-card-comment { border-left: 5px solid #1c485c !important; }

.feed-card-anim { opacity: 0; animation: slideInUp 0.4s ease forwards; }

.reaction-bar { display: flex; gap: 8px; margin-top: 8px; padding-top: 8px; border-top: 1px dashed #eae0d0; align-items: center; }

.react-btn { 
  background: #F5F1E8; 
  border: 1.5px solid #2B2B2B; 
  font-size: 12px; 
  padding: 5px 9px; 
  border-radius: 8px; 
  cursor: pointer; 
  transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease; 
  display: flex; 
  align-items: center; 
  gap: 5px; 
  color: #2B2B2B; 
  user-select: none;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.react-btn:hover { 
  background: #ffffff; 
  border-color: #2B2B2B;
  transform: translateY(-1px) scale(1.04);
  color: #2B2B2B;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
}

.react-btn:active {
  transform: scale(0.92) !important;
}

.react-btn.active { 
  background: linear-gradient(180deg, #3A3A3A 0%, #2B2B2B 100%) !important; 
  color: #F5F1E8 !important; 
  border-color: #171717 !important; 
  font-weight: 700;
  box-shadow: 0 2px 6px rgba(43, 43, 43, 0.4) !important;
}

/* Emojin elastinen hyppy kun luokka .active kytkeytyy */
.react-btn.active span:first-child {
  display: inline-block;
  animation: popEmoji 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.25);
}

@keyframes popEmoji {
  0% { transform: scale(0.6); }
  50% { transform: scale(1.45); }
  100% { transform: scale(1); }
}

/* ============================================================
   💬 KOMMENTTIOSIO & CHAT-PUHEKUPLAT
   ============================================================ */

.comments-container { 
  margin-top: 12px; 
  padding: 12px; 
  background: rgba(255, 255, 255, 0.95); 
  border-radius: 12px; 
  display: flex;
  flex-direction: column;
  gap: 14px;
  animation: commentsSlideDown 0.25s ease-out;
}

@keyframes commentsSlideDown {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Yksittäisen kommentin säiliö */
.comment-bubble-wrapper {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-bottom: 4px;
}

/* Valkoinen puhekupla (pienennetty & tiivistetty) */
.comment-bubble {
  position: relative;
  background: #ffffff;
  border: 1.5px solid #2B2B2B;
  border-radius: 10px;
  padding: 4px 8px;
  font-size: 10.5px;
  color: #2B2B2B;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.06);
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
  max-width: 85%;
  line-height: 1.35;
  box-sizing: border-box;
  margin-left: 2px;
  margin-bottom: 4px;
}

/* Puhekuplan kärki (pito siististi alareunan tuntumassa) */
.comment-bubble::before {
  content: '';
  position: absolute;
  bottom: -7px;
  left: 12px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 7px 6px 0 6px;
  border-color: #2B2B2B transparent transparent transparent;
}

.comment-bubble::after {
  content: '';
  position: absolute;
  bottom: -5px;
  left: 13px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 6px 5px 0 5px;
  border-color: #ffffff transparent transparent transparent;
}

.comment-text {
  word-break: break-word;
}

/* Poisto- ja ilmiantonapit kuplan sisällä */
.comment-actions { 
  display: flex; 
  gap: 4px; 
  align-items: center; 
  flex-shrink: 0; 
  opacity: 0.65;
  transition: opacity 0.2s;
}

.comment-actions:hover {
  opacity: 1;
}

.btn-comment-action { 
  background: none; 
  border: none; 
  cursor: pointer; 
  font-size: 11px; 
  padding: 0; 
}

/* Kuplan alapuolella oleva kirjoittajarivi (siirretty kohdalleen kärjen kanssa) */
.comment-author-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  padding-left: 9px;
}

.comment-author-name {
  font-size: 10px;
  font-weight: 700;
  color: #2B2B2B;
}

.comment-time {
  font-size: 8.5px;
  color: #8c7362;
  font-weight: 500;
}

/* Pyöristetty syöttökenttä */
.comment-input-box {
  display: flex; 
  gap: 6px; 
  margin-top: 4px;
  align-items: center;
}

.comment-input-box input {
  flex: 1; 
  padding: 6px 12px; 
  font-size: 11px; 
  border: 1.5px solid #2B2B2B; 
  border-radius: 20px; 
  outline: none;
  background: #ffffff;
  color: #2B2B2B;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.comment-input-box input:focus {
  border-color: #2c705f;
  box-shadow: 0 0 5px rgba(44, 112, 95, 0.3);
}

.comment-input-box button {
  width: auto !important; 
  padding: 5px 12px !important; 
  font-size: 10px !important; 
  margin: 0 !important;
  border-radius: 20px !important;
  background: linear-gradient(180deg, #3A3A3A 0%, #2B2B2B 100%) !important;
  color: #F5F1E8 !important;
  border: 1px solid #171717 !important;
  font-weight: 700 !important;
  transition: all 0.2s ease !important;
}

.comment-input-box button:hover {
  background: linear-gradient(180deg, #484848 0%, #333333 100%) !important;
  color: #FFFFFF !important;
}

/* 10. LOMAKKEET & MODALIT */
.autocomplete-wrapper { position: relative; flex-grow: 1; min-width: 0; }
.input-control { width: 100%; padding: 10px; border-radius: 8px; border: 1px solid #d8c8b2; font-family: 'Inter', sans-serif; font-size: 14px; box-sizing: border-box; outline: none; }
.autocomplete-results { position: absolute; top: 100%; left: 0; right: 0; background: #ffffff; border: 1px solid #d8c8b2; border-radius: 0 0 8px 8px; z-index: 50; max-height: 120px; overflow-y: auto; display: none; }
.autocomplete-item { padding: 6px 10px; font-size: 12px; cursor: pointer; border-bottom: 1px solid #f5ece0; }
.error-box { background: #fce8e6; border-left: 4px solid #d9534f; color: #a8201a; padding: 8px 12px; font-size: 12px; font-weight: 600; margin-bottom: 12px; display: none; }

.modal-overlay { position: fixed; top:0; left:0; right:0; bottom:0; background: rgba(56, 42, 33, 0.6); display: none; align-items: center; justify-content: center; z-index: 1000; padding: 15px; }
.modal-overlay.active { display: flex; animation: modalOverlayFade 0.25s ease-out; }
.modal-card { background: #ffffff; border-radius: 14px; padding: 20px; width: 100%; max-width: 350px; box-shadow: 0 10px 30px rgba(0,0,0,0.2); max-height: 85vh; overflow-y: auto; }

/* 🌟 MODALIN JA PELAAJAKORTIN NOUSUANIMAATIOT */
@keyframes modalOverlayFade {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes cardPopUp {
  0% {
    opacity: 0;
    transform: translateY(40px) scale(0.88);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.modal-overlay.active .modal-card {
  animation: cardPopUp 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.25);
}

/* 🌟 TOISEN PELAAJAN KORTIN PASSIIVIANIMAATIO & VALO-EFEKTI */
#otherPlayerCard:not(:hover) {
  animation: cardPopUp 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.25) 0s 1 normal forwards, playerCardPassiveFloat 7s ease-in-out 0.35s infinite !important;
}

#otherPlayerCard:not(:hover)::after {
  animation: playerCardPassiveShine 7s ease-in-out 0.35s infinite !important;
}

#otherPlayerCard:hover {
  animation: none !important;
  transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateZ(var(--tz, 0px)) scale(var(--scale, 1.025)) !important;
}

#otherPlayerCard:hover::after {
  animation: none !important;
  opacity: var(--holo-opacity, 1) !important;
  background: radial-gradient(
    circle 260px at var(--mx, 50%) var(--my, 50%),
    rgba(255, 255, 255, 0.35) 0%,
    rgba(255, 255, 255, 0.08) 40%,
    transparent 70%
  ) !important;
}

.footer-section { text-align: center; font-size: 12px; color: #2B2B2B; padding-top: 10px; padding-bottom: 20px; border-radius: 0 0 15px 15px; }
.footer-section a { color: #2B2B2B; border-bottom: 1px dotted #2B2B2B; text-decoration: none; }
.footer-section a:hover { color: #2B2B2B; border-bottom: 1px solid #2B2B2B; }

#toastNotification { position: fixed; bottom: 30px; left: 50%; transform: translateX(-50%) translateY(100px); background: #5c4333; color: #fdfbf7; padding: 12px 24px; border-radius: 30px; font-size: 13px; font-weight: 700; box-shadow: 0 4px 15px rgba(92, 67, 51, 0.4); transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); z-index: 10000; pointer-events: none; white-space: nowrap; }
#toastNotification.show { transform: translateX(-50%) translateY(0); }
#toastNotification.error { background: #d9534f; box-shadow: 0 4px 15px rgba(217, 83, 79, 0.4); }

.top-user-nav { position: absolute; top: 10px; right: 10px; display: flex; align-items: center; gap: 8px; z-index: 120; }
.top-nav-btn { display: flex; align-items: center; justify-content: center; background: #F5F1E8; border: 1px solid #d8c8b2; border-radius: 50%; width: 38px; height: 38px; cursor: pointer; position: relative; box-shadow: 0 2px 5px rgba(0,0,0,0.1); transition: transform 0.15s, background 0.2s; }
.top-nav-btn:hover { background: #ffffff; transform: scale(1.05); }

#headerAvatarContainer { width: 100%; height: 100%; border-radius: 50%; overflow: hidden; display: flex; align-items: center; justify-content: center; background: #F5F1E8; }
#headerAvatarContainer img { width: 100%; height: 100%; object-fit: cover; }
/* 🔔 KELTAINEN KELLO ILMOITUS-TILASSA (OHITTAA PELITEEMAN) */
#topFeedBtn.has-notifs .nav-icon-bell {
  stroke: #f59e0b !important;
  filter: drop-shadow(0 0 6px rgba(245, 158, 11, 0.7)) !important;
}

/* 🎨 FEED-IKONIN TEEMAVÄRIT KUN EI OLE UUSIA NOTIFIKAATIOITA (KORJATTU KORKEA KONTRASTI) */
#topFeedBtn:not(.has-notifs) .nav-icon-bell {
  stroke: #2B2B2B !important;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2)) !important;
}

body[data-theme="kimble"] #topFeedBtn:not(.has-notifs) .nav-icon-bell {
  stroke: #e0f2fe !important;
  filter: drop-shadow(0 0 4px rgba(224, 242, 254, 0.4)) !important;
}

body[data-theme="yatzy"] #topFeedBtn:not(.has-notifs) .nav-icon-bell {
  stroke: #fce7f3 !important;
  filter: drop-shadow(0 0 4px rgba(252, 231, 243, 0.4)) !important;
}

body[data-theme="alias"] #topFeedBtn:not(.has-notifs) .nav-icon-bell {
  stroke: #fde8e8 !important;
  filter: drop-shadow(0 0 4px rgba(253, 232, 232, 0.4)) !important;
}

body[data-theme="afrikan_tahti"] #topFeedBtn:not(.has-notifs) .nav-icon-bell {
  stroke: #fef08a !important;
  filter: drop-shadow(0 0 4px rgba(254, 240, 138, 0.4)) !important;
}

/* 🔴 NUMERAALINEN ILMOITUSBADGE (0-9+) */
.notif-dot-top { 
  position: absolute; 
  top: -3px; 
  right: -5px; 
  min-width: 17px; 
  height: 17px; 
  padding: 0 4px;
  background-color: #dc2626; 
  color: #ffffff;
  font-family: 'Oswald', sans-serif;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  border-radius: 10px; 
  border: 1.5px solid #fcf9f4; 
  display: none;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25);
  box-sizing: border-box;
  pointer-events: none;
  animation: badgePop 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes badgePop {
  0% { transform: scale(0); }
  100% { transform: scale(1); }
}
#topFeedBtn { background: transparent !important; border: none !important; box-shadow: none !important; width: auto !important; height: auto !important; padding: 4px !important; transition: transform 0.2s ease; }
#topFeedBtn:hover { background: transparent !important; transform: scale(1.12) !important; }

/* 🔒 ESTETÄÄN FLEXBOX-LITISTYMINEN (22x22px kiinteä koko) */
.nav-icon-bell { 
  width: 22px !important; 
  height: 22px !important; 
  min-width: 22px !important; 
  min-height: 22px !important; 
  display: block !important; 
  flex-shrink: 0 !important; 
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.15)); 
  transition: stroke 0.2s ease, filter 0.2s ease; 
}
/* ============================================================
 🍻 11. 3D PUB TAP RACK & NESTEVIRTA
 ============================================================ */

/* 🪵 Kapea eristyspalkki logo-alueen ja pelihanojen välissä (#2B2B2B) */
.pub-wood-divider {
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  height: 8px;
  background-color: #2B2B2B;
  background-image: 
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.03) 0px, rgba(255, 255, 255, 0.03) 2px, transparent 2px, transparent 6px),
    linear-gradient(180deg, #3A3A3A 0%, #2B2B2B 50%, #1A1A1A 100%);
  border-top: 1px solid #4A4A4A;
  border-bottom: 1px solid #121212;
  box-shadow: 
    inset 0 1px 0 rgba(255, 255, 255, 0.25),
    0 2px 5px rgba(0, 0, 0, 0.6);
  position: relative;
  z-index: 11;
  box-sizing: border-box;
}

.tap-rack-container {
  background-color: #2B2B2B !important;
  background-image: 
    radial-gradient(ellipse at 50% 30%, rgba(60, 60, 60, 0.4) 0%, rgba(20, 20, 20, 0.98) 100%),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.02) 0px, rgba(255, 255, 255, 0.02) 1px, transparent 1px, transparent 4px),
    repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.25) 0px, rgba(0, 0, 0, 0.25) 1px, transparent 1px, transparent 3px),
    linear-gradient(180deg, #3A3A3A 0%, #2B2B2B 50%, #171717 100%) !important;
  border: none !important;
  border-bottom: 3px solid #171717 !important;
  box-shadow: 
    0 4px 12px rgba(0, 0, 0, 0.35),
    inset 0 -1px 0 #404040,
    inset 0 -6px 15px rgba(0, 0, 0, 0.95) !important;
  user-select: none;
  position: relative;
  z-index: 110;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  box-sizing: border-box;
}

/* Avauspainike (Tiskibanneri) */
.tap-rack-trigger {
  background: linear-gradient(180deg, #3A3A3A 0%, #2B2B2B 100%) !important;
  color: #F5F1E8 !important;
  font-family: 'Oswald', sans-serif;
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 6px 18px;
  border-radius: 0 0 12px 12px;
  border: 1px solid #404040;
  border-top: none;
  cursor: pointer;
  transition: all 0.2s ease;
  z-index: 2;
  box-shadow: 0 5px 12px rgba(0, 0, 0, 0.85), 0 2px 4px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(245, 241, 232, 0.2) !important;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9) !important;
}

.tap-rack-trigger:hover {
  background: linear-gradient(180deg, #484848 0%, #333333 100%) !important;
  color: #FFFFFF !important;
  border-color: #F5F1E8 !important;
  transform: translateY(1px);
}

.tap-rack-icon {
  width: 16px;
  height: 16px;
  display: inline-block;
  flex-shrink: 0;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.4));
}

/* Piiloutuva sisältöalue */
.tap-rack-content {
  width: 100%;
  max-height: 0;
  opacity: 0;
  transform: translateY(-10px);
  overflow: hidden;
  pointer-events: none;
  transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s ease, transform 0.35s ease;
  background: inherit;
}

.tap-rack-container:hover .tap-rack-content,
.tap-rack-container.open .tap-rack-content {
  max-height: 145px; /* Pidennetty ikkunaa hanojen korkeutta varten */
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  overflow: visible; 
}

.tap-handles-scroll {
  display: flex;
  justify-content: space-around;
  gap: 6px;
  padding: 18px 8px 12px 8px;
  perspective: 500px;
  width: 100%;
  max-width: 500px;
  margin: 0 auto;
  box-sizing: border-box;
}

/* Yksittäinen Hana (Tap Handle) */
.tap-handle-item {
  flex: 1;
  min-width: 68px;
  max-width: 88px;
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  position: relative;
  transition: transform 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  will-change: transform;
}

.tap-handle-item:hover {
  transform: translateY(-2px);
}

/* Hanan metallinen nivel/vipu - EI KLIPPAA BANNERIIN */
.tap-lever-housing {
  width: 9px;
  height: 10px;
  background: linear-gradient(90deg, #4a3b2c 0%, #8c7362 50%, #382a21 100%);
  border-radius: 2px 2px 0 0;
  box-shadow: inset 0 1px 2px rgba(255,255,255,0.4), 0 2px 4px rgba(0,0,0,0.5);
  position: relative;
  z-index: 1;
  margin-bottom: -3px;
}

/* Varsinainen liikkuva vipu */
.tap-lever {
  width: 4.5px;
  height: 9px;
  background: linear-gradient(180deg, #d8c8b2 0%, #8c7362 100%);
  margin: 0 auto;
  border-radius: 2px;
  transform-origin: bottom center;
  transition: transform 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  position: relative;
  top: -5px;
}

/* Poikittainen avausvipu (Kahva) */
.tap-lever::after {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 15px;
  height: 3.5px;
  background: linear-gradient(180deg, #e5d6c3 0%, #8c7362 100%);
  border-radius: 2px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.5), inset 0 1px 1px rgba(255,255,255,0.6);
  border: 1px solid #4a3b2c;
  transition: background 0.35s ease;
}

/* Pyöreä hanan lätkä (3D Tap Badge Head) & Perusmuotoilut */
.tap-badge-head {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: #2B2B2B linear-gradient(180deg, #3A3A3A 0%, #2B2B2B 50%, #171717 100%);
  border: 2px solid #525252;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.6), inset 0 2px 4px rgba(255, 255, 255, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 2;
  transition: all 0.3s ease;
  box-sizing: border-box;
  overflow: hidden;
}

.tap-badge-head::before {
  content: '';
  position: absolute;
  top: 2px;
  left: 50%;
  transform: translateX(-50%);
  width: 80%;
  height: 45%;
  border-radius: 50% / 100% 100% 0 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.10) 0%, rgba(255, 255, 255, 0) 100%);
  pointer-events: none;
  z-index: 4;
}

.tap-badge-inner {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  border-radius: 50%;
  box-sizing: border-box;
  padding: 2px;
}

/* Kaareva teksti "JUOMAPELI" Kimble-hanan yläreunassa */
.tap-curved-label {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 3;
}

.tap-curved-label text {
  font-family: 'Oswald', sans-serif;
  font-size: 8.5px;
  font-weight: 700;
  fill: #e5d6c3;
  letter-spacing: 0.8px;
}

/* Hanan ikoni */
.tap-icon {
  width: 22px;
  height: 22px;
  display: block;
  transition: transform 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275), color 0.25s ease, filter 0.25s ease;
  margin-top: 2px;
}

/* Hanan pelinimi */
.tap-name {
  font-family: 'Oswald', sans-serif;
  font-size: 8.5px;
  font-weight: 700;
  color: #F5F1E8;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  line-height: 1;
  margin-top: 1px;
  text-align: center;
  transition: color 0.25s ease;
}

/* Pelikohtaiset Ikonivärit, Bränditeemat & Loiskahduksen Sävyperintö */
.tap-handle-item[data-game="kimble"] .tap-icon { color: #37467b !important; }
.tap-handle-item[data-game="kimble"].active .tap-badge-head {
 border-color: #37467b !important;
 background: #2B2B2B linear-gradient(135deg, #37467b 0%, #171717 100%) !important;
 box-shadow: 0 0 14px rgba(55, 70, 123, 0.9), inset 0 0 8px rgba(55, 70, 123, 0.7), 0 5px 10px rgba(0, 0, 0, 0.8) !important;
}
.tap-handle-item[data-game="kimble"].active .tap-icon { color: #37467b !important; filter: drop-shadow(0 0 6px rgba(55, 70, 123, 0.9)); }
.tap-handle-item[data-game="kimble"].active .tap-name { color: #F5F1E8; }
.tap-handle-item[data-game="kimble"].active .tap-flow-drip { background: #37467b; color: #37467b; box-shadow: 0 0 8px #37467b; }

.tap-handle-item[data-game="yatzy"] .tap-icon { color: #8f498a !important; }
.tap-handle-item[data-game="yatzy"].active .tap-badge-head {
 border-color: #8f498a !important;
 background: #2B2B2B linear-gradient(135deg, #8f498a 0%, #171717 100%) !important;
 box-shadow: 0 0 14px rgba(143, 73, 138, 0.9), inset 0 0 8px rgba(143, 73, 138, 0.7), 0 5px 10px rgba(0, 0, 0, 0.8) !important;
}
.tap-handle-item[data-game="yatzy"].active .tap-icon { color: #bd81b9 !important; filter: drop-shadow(0 0 6px rgba(189, 129, 185, 0.9)); }
.tap-handle-item[data-game="yatzy"].active .tap-name { color: #F5F1E8; }
.tap-handle-item[data-game="yatzy"].active .tap-flow-drip { background: #8f498a; color: #8f498a; box-shadow: 0 0 8px #8f498a; }

.tap-handle-item[data-game="alias"] .tap-icon { color: #8f4954 !important; }
.tap-handle-item[data-game="alias"].active .tap-badge-head {
 border-color: #8f4954 !important;
 background: #2B2B2B linear-gradient(135deg, #8f4954 0%, #171717 100%) !important;
 box-shadow: 0 0 14px rgba(143, 73, 84, 0.9), inset 0 0 8px rgba(143, 73, 84, 0.7), 0 5px 10px rgba(0, 0, 0, 0.8) !important;
}
.tap-handle-item[data-game="alias"].active .tap-icon { color: #cfa4ab !important; filter: drop-shadow(0 0 6px rgba(207, 164, 171, 0.9)); }
.tap-handle-item[data-game="alias"].active .tap-name { color: #F5F1E8; }
.tap-handle-item[data-game="alias"].active .tap-flow-drip { background: #8f4954; color: #8f4954; box-shadow: 0 0 8px #8f4954; }

.tap-handle-item[data-game="afrikan_tahti"] .tap-icon { color: #f1cb64 !important; }
.tap-handle-item[data-game="afrikan_tahti"].active .tap-badge-head {
 border-color: #f1cb64 !important;
 background: #2B2B2B linear-gradient(135deg, #f1cb64 0%, #171717 100%) !important;
 box-shadow: 0 0 14px rgba(241, 203, 100, 0.9), inset 0 0 8px rgba(241, 203, 100, 0.7), 0 5px 10px rgba(0, 0, 0, 0.8) !important;
}
.tap-handle-item[data-game="afrikan_tahti"].active .tap-icon { color: #fef08a !important; filter: drop-shadow(0 0 6px rgba(254, 240, 138, 0.9)); }
.tap-handle-item[data-game="afrikan_tahti"].active .tap-name { color: #F5F1E8; }
.tap-handle-item[data-game="afrikan_tahti"].active .tap-flow-drip { background: #f1cb64; color: #f1cb64; box-shadow: 0 0 8px #f1cb64; }

.tap-handle-item[data-game="kimble"].active .tap-curved-label text {
  fill: #ffffff;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.8));
}

/* 💎 ERIKOISASETTELU AFRIKAN TÄHDELLE (2-rivinen nimi mahdutetaan palloon) */
.tap-handle-item[data-game="afrikan_tahti"] .tap-badge-inner {
  justify-content: flex-start;
  padding-top: 9px; /* ⚡ Kasvatettu (4px -> 9px) siirtämään ikonia ja tekstiä samassa suhteessa alemmas */
}

.tap-handle-item[data-game="afrikan_tahti"] .tap-icon {
  width: 14px;
  height: 14px;
  margin-top: 1px;
  margin-bottom: 1px;
}

.tap-handle-item[data-game="afrikan_tahti"] .tap-name {
  font-size: 7px;
  line-height: 1.05;
  letter-spacing: 0.1px;
  max-width: 42px;
  word-wrap: break-word;
}

/* 🎺 Messinkinen hanan suuaukko (Brass Spout Nozzle) */
.tap-spout {
  width: 13px;
  height: 9px;
  background: linear-gradient(90deg, #78350f 0%, #d97706 25%, #fef08a 50%, #b45309 75%, #451a03 100%);
  border-radius: 2px 2px 4px 4px;
  position: relative;
  z-index: 3;
  margin-top: -3px;
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.6), inset 0 1px 1px rgba(255, 255, 255, 0.7);
  border: 1px solid #78350f;
  box-sizing: border-box;
}

.tap-spout::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 50%;
  transform: translateX(-50%);
  width: 7px;
  height: 3px;
  background: #0e0805;
  border-radius: 50%;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.9);
}
/* UUSI KORJATTU KOODI: */
/* 💧 Virtauksen merkkipisara & Loiskahdusefekti */
.tap-flow-drip {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: 3.5px;
  height: 0px;
  background: transparent;
  border-radius: 0 0 4px 4px;
  transition: height 0.42s cubic-bezier(0.4, 0, 0.2, 1), background 0.3s ease, box-shadow 0.3s ease;
  margin-top: -1px; /* KORJATTU: Lähtee täsmälleen suuosan aukosta */
  z-index: 25;
  pointer-events: none;
}

/* Loiskahduksen maltillinen aaltorengas alavalikon nesteen pinnassa */
.tap-flow-drip::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 50%;
  transform: translateX(-50%) scale(0);
  width: 10px;
  height: 3px;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.95) 0%, currentColor 60%, transparent 100%);
  opacity: 0;
  filter: drop-shadow(0 0 2px currentColor);
  pointer-events: none;
}

/* Loiskahduksen pienenpienet pärskeet */
.tap-flow-drip::before {
  content: '';
  position: absolute;
  bottom: 1px;
  left: 50%;
  transform: translateX(-50%) scale(0);
  width: 8px;
  height: 4px;
  background: 
    radial-gradient(circle at 20% 40%, rgba(255, 255, 255, 0.95) 1px, transparent 1.5px),
    radial-gradient(circle at 80% 40%, rgba(255, 255, 255, 0.95) 1px, transparent 1.5px),
    radial-gradient(circle at 50% 20%, rgba(255, 255, 255, 1) 1px, transparent 2px);
  opacity: 0;
  pointer-events: none;
}

/* AKTIIVINEN HANA: Vipu kääntyy auki ja virtauksen pituus saavuttaa alavalikon nesterajan */
.tap-handle-item.active {
  transform: translateY(-2px) scale(1.03);
}

.tap-handle-item.active .tap-spout::after {
  display: none;
}

.tap-handle-item.active .tap-lever {
  transform: rotateX(35deg) translateY(1px);
  background: #fcd34d;
}

.tap-handle-item.active .tap-lever::after {
  background: linear-gradient(180deg, #fef08a 0%, #d97706 100%);
  border-color: #92400e;
}

.tap-handle-item.active .tap-badge-head {
  border-width: 2px;
  box-shadow: 0 5px 12px rgba(0,0,0,0.8);
}

.tap-handle-item.active .tap-icon {
  transform: scale(1.1);
}

/* Nestevirran syöttö alavalikon madallettuun nesterajaan asti (Nostettu 24px kohdalleen) */
.tap-handle-item.active .tap-flow-drip {
  height: 26px;
  animation: liquidFlow 0.6s linear infinite;
}

.tap-handle-item.active .tap-flow-drip::after {
  opacity: 1;
  animation: splashRipple 0.65s ease-out infinite;
}

.tap-handle-item.active .tap-flow-drip::before {
  opacity: 1;
  animation: splashDroplets 0.65s ease-out infinite;
}

@keyframes liquidFlow {
  0% { opacity: 0.85; width: 3.5px; }
  50% { opacity: 1; width: 4px; }
  100% { opacity: 0.85; width: 3.5px; }
}

@keyframes splashRipple {
  0% {
    transform: translateX(-50%) scale(0.2);
    opacity: 1;
  }
  60% {
    opacity: 0.7;
  }
  100% {
    transform: translateX(-50%) scale(1.1);
    opacity: 0;
  }
}

@keyframes splashDroplets {
  0% {
    transform: translateX(-50%) translateY(2px) scale(0.3);
    opacity: 1;
  }
  50% {
    transform: translateX(-50%) translateY(-2px) scale(0.8);
    opacity: 0.7;
  }
  100% {
    transform: translateX(-50%) translateY(-4px) scale(1);
    opacity: 0;
  }
}

/* ============================================================
   🍻 12. HARMONISET KOKONAISTEEMAT & DIVISIOONAKORJAUS
   ============================================================ */
/* ============================================================
   🍻 PUB LIIGAPÖRSSI - SININEN PUUPLAKAATI & TYYLIT
   ============================================================ */

.ranking-header-card {
  padding: 24px 18px 18px 18px !important;
  margin: 10px 10px 15px 10px !important;
  
  /* Tumma brändipuutekstuuri (#2B2B2B) ilman taustahohtoa */
  background: 
    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;
  
  /* Veistetyn puun & messinkiviisteen reunat */
  border: 3px solid #404040 !important;
  border-radius: 14px !important;
  
  /* Syvyys- ja sisävarjot */
  box-shadow: 
    0 12px 30px rgba(0, 0, 0, 0.8),
    inset 0 0 0 1px #d97706, /* Kultamessinkinen sisäviiste */
    inset 0 0 0 3px #121212, /* Puuraami */
    inset 0 -8px 18px rgba(0, 0, 0, 0.95) !important;
  
  position: relative !important;
  box-sizing: border-box !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

/* Sisäpuolen polttokuvioitu / veistetty katkoviiva */
.ranking-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;
}

/* Kolmiulotteiset tummat niitit kulmissa (Brändiväri #2B2B2B) */
.plaque-rivet,
.sub-rivet {
  position: absolute !important;
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
  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;
  z-index: 5 !important;
  pointer-events: none !important;
}
.rivet-tl { top: 10px !important; left: 10px !important; }
.rivet-tr { top: 10px !important; right: 10px !important; }
.rivet-bl { bottom: 10px !important; left: 10px !important; }
.rivet-br { bottom: 10px !important; right: 10px !important; }

.ranking-title-box {
  text-align: center;
  margin-bottom: 14px;
}

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

/* Pelikohtaiset aliottsikon hohtovärit Sääntökirjassa; Sarjataulukossa käytetään aina brändiväriä #F5F1E8 */
.app-container[data-theme="kimble"] .rules-subtitle { color: #9ab0e5 !important; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9) !important; }
.app-container[data-theme="yatzy"] .rules-subtitle { color: #bd81b9 !important; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9) !important; }
.app-container[data-theme="alias"] .rules-subtitle { color: #cfa4ab !important; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9) !important; }
.app-container[data-theme="afrikan_tahti"] .rules-subtitle { color: #fef08a !important; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9) !important; }

.app-container .ranking-subtitle,
.app-container[data-theme="kimble"] .ranking-subtitle,
.app-container[data-theme="yatzy"] .ranking-subtitle,
.app-container[data-theme="alias"] .ranking-subtitle,
.app-container[data-theme="afrikan_tahti"] .ranking-subtitle {
  color: #F5F1E8 !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9) !important;
}

/* SARJATAULUKKO -OTSIKKO & HAKULABELIT BRÄNDIVÄRISSÄ #F5F1E8 */
.ranking-header-card h2 {
  text-align: center;
  font-family: 'Oswald', sans-serif;
  color: #F5F1E8 !important;
  margin: 0 !important;
  font-size: 26px !important;
  letter-spacing: 2.5px !important;
  text-transform: uppercase;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9) !important;
}

.ranking-header-card label {
  font-size: 10px !important;
  font-family: 'Oswald', sans-serif !important;
  font-weight: 700 !important;
  color: #F5F1E8 !important;
  display: block !important;
  margin-bottom: 4px !important;
  letter-spacing: 0.8px !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.8);
}

/* Oma sijoitus -painike täsmäämään brändiväreihin #2B2B2B ja #F5F1E8 */
    .ranking-header-card .btn-secondary,
    .app-container #tab-ranking .ranking-header-card .btn-secondary,
    .app-container[data-theme="kimble"] #tab-ranking .ranking-header-card .btn-secondary,
    .app-container[data-theme="yatzy"] #tab-ranking .ranking-header-card .btn-secondary,
    .app-container[data-theme="alias"] #tab-ranking .ranking-header-card .btn-secondary,
    .app-container[data-theme="afrikan_tahti"] #tab-ranking .ranking-header-card .btn-secondary {
      background: linear-gradient(180deg, #3A3A3A 0%, #2B2B2B 100%) !important;
      color: #F5F1E8 !important;
      border: 1.5px solid #F5F1E8 !important;
      font-weight: 700 !important;
      text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9) !important;
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4) !important;
    }

    .ranking-header-card .btn-secondary:hover,
    .app-container #tab-ranking .ranking-header-card .btn-secondary:hover {
      background: linear-gradient(180deg, #484848 0%, #333333 100%) !important;
      color: #FFFFFF !important;
      border-color: #FFFFFF !important;
    }

    /* HAKUKENTÄT JA PUDOTUSVALIKOT (Brändivärissä #F5F1E8) */
    .ranking-header-card input, 
    .ranking-header-card select {
      background: #F5F1E8 !important;
      border: 1.5px solid #bdab95 !important;
      color: #2B2B2B !important;
      font-weight: 600 !important;
      box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0.15), 0 2px 4px rgba(0, 0, 0, 0.3) !important;
      border-radius: 7px !important;
    }

    .ranking-header-card select option {
      background: #F5F1E8 !important;
      color: #2B2B2B !important;
    }

    .ranking-header-card input::placeholder {
      color: #8c7362 !important;
    }

/* SÄILYTETÄÄN TUMMA BRÄNDIPLAATTI (#2B2B2B) JA BRÄNDISÄVYT (#F5F1E8) PEITTÄMÄTTÄ PELIKOHTAISIA REUNUKSIA */
.app-container[data-theme="kimble"] .ranking-header-card,
.app-container[data-theme="yatzy"] .ranking-header-card,
.app-container[data-theme="alias"] .ranking-header-card,
.app-container[data-theme="afrikan_tahti"] .ranking-header-card {
 background: 
    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;
}

.app-container[data-theme="kimble"] .ranking-header-card label,
.app-container[data-theme="yatzy"] .ranking-header-card label,
.app-container[data-theme="alias"] .ranking-header-card label,
.app-container[data-theme="afrikan_tahti"] .ranking-header-card label {
  color: #F5F1E8 !important;
}

.app-container[data-theme="kimble"] .ranking-header-card h2,
.app-container[data-theme="yatzy"] .ranking-header-card h2,
.app-container[data-theme="alias"] .ranking-header-card h2,
.app-container[data-theme="afrikan_tahti"] .ranking-header-card h2 {
  color: #F5F1E8 !important;
}

/* ------------------------------------------------------------
   🍻 PUBI-RANKINGTAULUKKO & KERROSTETUT POHJATYYLIT
   ------------------------------------------------------------ */

#tab-ranking {
  background: transparent !important;
  padding: 0 !important;
}

#tab-ranking table {
  width: 100% !important;
  border-collapse: collapse !important;
  margin: 10px 0 0 0 !important;
  padding: 0 !important;
  background: #1a0d06 linear-gradient(180deg, #261309 0%, #150803 100%) !important;
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.8), 0 4px 12px rgba(0, 0, 0, 0.4) !important;
}

#tab-ranking table tr {
  margin: 0 !important;
  padding: 0 !important;
}

#tab-ranking table td, 
#tab-ranking table th {
  box-sizing: border-box !important;
}
/* Divisioona-pääpalkki: Puutekstuurinen tumma brändilankku (#2B2B2B) */
#tab-ranking tr.div-main-header td,
.div-main-header td {
 padding: 10px 12px !important;
 margin: 0 !important;
 background-color: #2B2B2B !important;
 background-image: 
radial-gradient(ellipse at 50% 15%, rgba(217, 119, 6, 0.08) 0%, rgba(15, 15, 15, 0.96) 100%),
 repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.03) 0px, rgba(255, 255, 255, 0.03) 2px, transparent 2px, transparent 6px),
 repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.3) 0px, rgba(0, 0, 0, 0.3) 2px, transparent 2px, transparent 4px),
 linear-gradient(180deg, #3A3A3A 0%, #2B2B2B 50%, #171717 100%) !important;
 border-top: 2px solid #404040 !important;
 border-bottom: 2px solid #121212 !important;
 box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), inset 0 -3px 8px rgba(0, 0, 0, 0.8) !important;
 text-align: center !important;
 position: relative !important;
 left: 0 !important;
 width: 100% !important;
 box-sizing: border-box !important;
}

/* HILLITYT DIVISIOONAKOHTAISET HOHDOT PÄÄPALKEILLE */
#tab-ranking tr.div-main-header.main-pronssi td,
#tab-ranking tr.div-main-header:has(.div-plaque-pronssi) td {
 background-image: 
radial-gradient(ellipse at 50% 15%, rgba(217, 119, 6, 0.10) 0%, rgba(15, 15, 15, 0.96) 100%),
 repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.03) 0px, rgba(255, 255, 255, 0.03) 2px, transparent 2px, transparent 6px),
 repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.3) 0px, rgba(0, 0, 0, 0.3) 2px, transparent 2px, transparent 4px),
 linear-gradient(180deg, #3A3A3A 0%, #2B2B2B 50%, #171717 100%) !important;
}

#tab-ranking tr.div-main-header.main-hopea td,
#tab-ranking tr.div-main-header:has(.div-plaque-hopea) td {
 background-image: 
radial-gradient(ellipse at 50% 15%, rgba(148, 163, 184, 0.10) 0%, rgba(15, 15, 15, 0.96) 100%),
 repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.03) 0px, rgba(255, 255, 255, 0.03) 2px, transparent 2px, transparent 6px),
 repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.3) 0px, rgba(0, 0, 0, 0.3) 2px, transparent 2px, transparent 4px),
 linear-gradient(180deg, #3A3A3A 0%, #2B2B2B 50%, #171717 100%) !important;
}

#tab-ranking tr.div-main-header.main-kulta td,
#tab-ranking tr.div-main-header:has(.div-plaque-kulta) td {
 background-image: 
radial-gradient(ellipse at 50% 15%, rgba(252, 211, 77, 0.10) 0%, rgba(15, 15, 15, 0.96) 100%),
 repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.03) 0px, rgba(255, 255, 255, 0.03) 2px, transparent 2px, transparent 6px),
 repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.3) 0px, rgba(0, 0, 0, 0.3) 2px, transparent 2px, transparent 4px),
 linear-gradient(180deg, #3A3A3A 0%, #2B2B2B 50%, #171717 100%) !important;
}

#tab-ranking tr.div-main-header.main-timantti td,
#tab-ranking tr.div-main-header:has(.div-plaque-timantti) td {
 background-image: 
radial-gradient(ellipse at 50% 15%, rgba(56, 189, 248, 0.10) 0%, rgba(15, 15, 15, 0.96) 100%),
 repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.03) 0px, rgba(255, 255, 255, 0.03) 2px, transparent 2px, transparent 6px),
 repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.3) 0px, rgba(0, 0, 0, 0.3) 2px, transparent 2px, transparent 4px),
 linear-gradient(180deg, #3A3A3A 0%, #2B2B2B 50%, #171717 100%) !important;
}

/* Divisioona-plakaatti puupalkin sisällä */
.div-plaque {
 position: relative !important;
 display: inline-flex !important;
 align-items: center !important;
 justify-content: center !important;
 min-width: 190px !important;
 max-width: 85% !important;
 margin: 0 auto !important;
 padding: 6px 26px !important;
 border-radius: 6px !important;
 font-family: 'Oswald', sans-serif !important;
 font-size: 14px !important;
 font-weight: 700 !important;
 text-transform: uppercase !important;
 letter-spacing: 2px !important;
 box-sizing: border-box !important;
}

/* Plakaatin kulmaniitit (Yleiset perustyylit) */
.div-plaque .plaque-rivet {
 position: absolute !important;
 width: 6px !important;
 height: 6px !important;
 border-radius: 50% !important;
 border: none !important;
 z-index: 5 !important;
 pointer-events: none !important;
 box-shadow: 0 1px 2px rgba(0, 0, 0, 0.75) !important;
}
.div-plaque .rivet-tl { top: 3.5px !important; left: 5px !important; }
.div-plaque .rivet-tr { top: 3.5px !important; right: 5px !important; }
.div-plaque .rivet-bl { bottom: 3.5px !important; left: 5px !important; }
.div-plaque .rivet-br { bottom: 3.5px !important; right: 5px !important; }

/* 🎨 Päädivisioonien metalliniitit teemoittain */
.div-plaque-pronssi .plaque-rivet {
 background: radial-gradient(circle at 30% 30%, #ffedd5 0%, #d97706 70%, #361202 100%) !important;
 box-shadow: 0 1px 2px rgba(0, 0, 0, 0.6) !important;
 border: none !important;
}

.div-plaque-hopea .plaque-rivet {
 background: radial-gradient(circle at 30% 30%, #ffffff 0%, #94a3b8 70%, #0f172a 100%) !important;
 box-shadow: 0 1px 2px rgba(0, 0, 0, 0.6) !important;
 border: none !important;
}

.div-plaque-kulta .plaque-rivet {
 background: radial-gradient(circle at 30% 30%, #fff9c4 0%, #f59e0b 70%, #2e1102 100%) !important;
 box-shadow: 0 1px 2px rgba(0, 0, 0, 0.6) !important;
 border: none !important;
}

.div-plaque-timantti .plaque-rivet {
 background: radial-gradient(circle at 30% 30%, #ffffff 0%, #38bdf8 70%, #082f49 100%) !important;
 box-shadow: 0 1px 2px rgba(0, 0, 0, 0.6) !important;
 border: none !important;
}

/* Divisioonavärit plakaateille (Hillityt teemakohtaiset hohdot) */
.div-plaque-pronssi {
 background: linear-gradient(180deg, #a14c12 0%, #6e2c08 100%) !important;
 border: 1.5px solid #d97706 !important;
 color: #fed7aa !important;
 text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9), 0 0 2px rgba(217, 119, 6, 0.08) !important;
 box-shadow: 0 3px 8px rgba(0, 0, 0, 0.7), 0 0 3px rgba(217, 119, 6, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -2px 5px rgba(0, 0, 0, 0.5) !important;
}

.div-plaque-hopea {
 background: linear-gradient(180deg, #475569 0%, #1e293b 100%) !important;
 border: 1.5px solid #94a3b8 !important;
 color: #f1f5f9 !important;
 text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9), 0 0 2px rgba(148, 163, 184, 0.08) !important;
 box-shadow: 0 3px 8px rgba(0, 0, 0, 0.7), 0 0 3px rgba(148, 163, 184, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.3), inset 0 -2px 5px rgba(0, 0, 0, 0.5) !important;
}

.div-plaque-kulta {
 background: linear-gradient(180deg, #b45309 0%, #78350f 100%) !important;
 border: 1.5px solid #fcd34d !important;
 color: #fef08a !important;
 text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9), 0 0 2px rgba(252, 211, 77, 0.08) !important;
 box-shadow: 0 3px 8px rgba(0, 0, 0, 0.7), 0 0 3px rgba(252, 211, 77, 0.08), inset 0 1px 0 rgba(254, 240, 138, 0.35), inset 0 -2px 5px rgba(0, 0, 0, 0.5) !important;
}

.div-plaque-timantti {
 background: linear-gradient(180deg, #0284c7 0%, #075985 100%) !important;
 border: 1.5px solid #38bdf8 !important;
 color: #e0f2fe !important;
 text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9), 0 0 2px rgba(56, 189, 248, 0.08) !important;
 box-shadow: 0 3px 8px rgba(0, 0, 0, 0.7), 0 0 3px rgba(56, 189, 248, 0.08), inset 0 1px 0 rgba(224, 242, 254, 0.35), inset 0 -2px 5px rgba(0, 0, 0, 0.5) !important;
}

/* Aladivisioonaotsikot (I, II, III, IV) - Tumma brändipuurima (#2B2B2B) */
#tab-ranking tr.div-sub-header td,
.div-sub-header td {
 font-family: 'Oswald', sans-serif !important;
 font-size: 10px !important;
 font-weight: 700 !important;
 text-transform: uppercase !important;
 text-align: center !important;
 letter-spacing: 1.2px !important;
 padding: 1px 4px !important;
 line-height: 1 !important;
 background-color: #2B2B2B !important;
 background-image: 
radial-gradient(ellipse at 50% 50%, rgba(100, 100, 100, 0.12) 0%, rgba(20, 20, 20, 0.96) 100%),
 repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.02) 0px, rgba(255, 255, 255, 0.02) 1px, transparent 1px, transparent 4px),
 repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.25) 0px, rgba(0, 0, 0, 0.25) 1px, transparent 1px, transparent 3px),
 linear-gradient(180deg, #3A3A3A 0%, #2B2B2B 50%, #171717 100%) !important;
 border-top: 1px solid #404040 !important;
 border-bottom: 1px solid #121212 !important;
 box-shadow: inset 0 0.5px 0 rgba(255, 255, 255, 0.1), inset 0 -1px 2px rgba(0, 0, 0, 0.8) !important;
}

#tab-ranking tr.div-sub-header.sub-pronssi td,
#tab-ranking tr.div-sub-header:has(.sub-plaque-pronssi) td {
 background-image: 
radial-gradient(ellipse at 50% 50%, rgba(217, 119, 6, 0.06) 0%, rgba(20, 20, 20, 0.96) 100%),
 repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.02) 0px, rgba(255, 255, 255, 0.02) 1px, transparent 1px, transparent 4px),
 repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.25) 0px, rgba(0, 0, 0, 0.25) 1px, transparent 1px, transparent 3px),
 linear-gradient(180deg, #3A3A3A 0%, #2B2B2B 50%, #171717 100%) !important;
}

#tab-ranking tr.div-sub-header.sub-hopea td,
#tab-ranking tr.div-sub-header:has(.sub-plaque-hopea) td {
 background-image: 
radial-gradient(ellipse at 50% 50%, rgba(148, 163, 184, 0.06) 0%, rgba(20, 20, 20, 0.96) 100%),
 repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.02) 0px, rgba(255, 255, 255, 0.02) 1px, transparent 1px, transparent 4px),
 repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.25) 0px, rgba(0, 0, 0, 0.25) 1px, transparent 1px, transparent 3px),
 linear-gradient(180deg, #3A3A3A 0%, #2B2B2B 50%, #171717 100%) !important;
}

#tab-ranking tr.div-sub-header.sub-kulta td,
#tab-ranking tr.div-sub-header:has(.sub-plaque-kulta) td {
 background-image: 
radial-gradient(ellipse at 50% 50%, rgba(252, 211, 77, 0.06) 0%, rgba(20, 20, 20, 0.96) 100%),
 repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.02) 0px, rgba(255, 255, 255, 0.02) 1px, transparent 1px, transparent 4px),
 repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.25) 0px, rgba(0, 0, 0, 0.25) 1px, transparent 1px, transparent 3px),
 linear-gradient(180deg, #3A3A3A 0%, #2B2B2B 50%, #171717 100%) !important;
}

#tab-ranking tr.div-sub-header.sub-timantti td,
#tab-ranking tr.div-sub-header:has(.sub-plaque-timantti) td {
 background-image: 
radial-gradient(ellipse at 50% 50%, rgba(56, 189, 248, 0.06) 0%, rgba(20, 20, 20, 0.96) 100%),
 repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.02) 0px, rgba(255, 255, 255, 0.02) 1px, transparent 1px, transparent 4px),
 repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.25) 0px, rgba(0, 0, 0, 0.25) 1px, transparent 1px, transparent 3px),
 linear-gradient(180deg, #3A3A3A 0%, #2B2B2B 50%, #171717 100%) !important;
}

/* Aladivisioonan pieni plakaatti (I, II, III, IV) */
.sub-plaque {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 38px !important;
  padding: 1px 10px !important;
  border-radius: 3px !important;
  font-family: 'Oswald', sans-serif !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  letter-spacing: 1.2px !important;
  box-sizing: border-box !important;
  line-height: 1 !important;
}

/* Plakaatin erittäin pienet niitit kulmissa (4px x 4px) */
.sub-rivet {
  position: absolute !important;
  width: 4px !important;
  height: 4px !important;
  border-radius: 50% !important;
  border: none !important;
  z-index: 5 !important;
  pointer-events: none !important;
  box-shadow: 0 0.5px 1px rgba(0,0,0,0.7) !important;
}

/* 📍 Aladivisioonaplaatan uusi 2-niittinen sivu-asettelu */
.sub-plaque .sub-rivet-left { 
  top: 50% !important; 
  transform: translateY(-50%) !important; 
  left: 3px !important; 
}
.sub-plaque .sub-rivet-right { 
  top: 50% !important; 
  transform: translateY(-50%) !important; 
  right: 3px !important; 
}

/* Plakaattien ja niittien värit divisioonittain */
/* PRONSSI */
.sub-plaque-pronssi {
  background: linear-gradient(180deg, #96430d 0%, #632605 100%) !important;
  border: 1px solid #c86800 !important;
  color: #fde0c2 !important;
  text-shadow: 0 1px 1.5px rgba(0, 0, 0, 0.9) !important;
  box-shadow: 0 1.5px 3px rgba(0,0,0,0.6), inset 0 0.5px 0 rgba(255,255,255,0.2) !important;
}
.sub-plaque-pronssi .sub-rivet {
  background: radial-gradient(circle at 35% 35%, #ffedd5 0%, #d97706 45%, #78350f 80%, #361202 100%) !important;
  border: none !important;
}

/* HOPEA */
.sub-plaque-hopea {
  background: linear-gradient(180deg, #3d4956 0%, #17202a 100%) !important;
  border: 1px solid #8292a6 !important;
  color: #f1f5f9 !important;
  text-shadow: 0 1px 1.5px rgba(0, 0, 0, 0.9) !important;
  box-shadow: 0 1.5px 3px rgba(0,0,0,0.6), inset 0 0.5px 0 rgba(255,255,255,0.25) !important;
}
.sub-plaque-hopea .sub-rivet {
  background: radial-gradient(circle at 35% 35%, #ffffff 0%, #94a3b8 45%, #334155 80%, #0f172a 100%) !important;
  border: none !important;
}

/* KULTA */
.sub-plaque-kulta {
  background: linear-gradient(180deg, #a14805 0%, #692c0a 100%) !important;
  border: 1px solid #ebd03f !important;
  color: #fef08a !important;
  text-shadow: 0 1px 1.5px rgba(0, 0, 0, 0.9) !important;
  box-shadow: 0 1.5px 3px rgba(0,0,0,0.6), inset 0 0.5px 0 rgba(254,240,138,0.3) !important;
}
.sub-plaque-kulta .sub-rivet {
  background: radial-gradient(circle at 35% 35%, #fff5aa 0%, #f59e0b 45%, #78350f 80%, #2e1102 100%) !important;
  border: none !important;
}

/* TIMANTTI */
.sub-plaque-timantti {
  background: linear-gradient(180deg, #0274b3 0%, #05486c 100%) !important;
  border: 1px solid #2bb0ed !important;
  color: #e0f2fe !important;
  text-shadow: 0 1px 1.5px rgba(0, 0, 0, 0.9) !important;
  box-shadow: 0 1.5px 3px rgba(0,0,0,0.6), inset 0 0.5px 0 rgba(224,242,254,0.3) !important;
}
.sub-plaque-timantti .sub-rivet {
  background: radial-gradient(circle at 35% 35%, #ffffff 0%, #38bdf8 45%, #0284c7 80%, #082f49 100%) !important;
  border: none !important;
}

/* Pelaajarivit - Brändiväri #F5F1E8 */
.player-row {
  cursor: pointer !important;
  transition: all 0.15s ease !important;
  background: #F5F1E8 !important;
  border-bottom: 1px solid #c8baa6 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7) !important;
}

.player-row:hover {
  background: #ffffff !important;
  filter: brightness(1.02) !important;
  transform: scale(1.002) !important;
}

/* Aktiivinen käyttäjä ("Sinä") - Lämmin, vaalea kultakorostus (kevennetty ilme, joka ei sekoitu tummiin divisioonapalkkeihin) */
.player-row.active-user {
  background: linear-gradient(180deg, #fffbeb 0%, #fef08a 60%, #fde68a 100%) !important;
  border-left: 5px solid #d97706 !important;
  border-bottom: 1px solid #d97706 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), inset 0 0 8px rgba(245, 158, 11, 0.25), 0 2px 6px rgba(180, 83, 9, 0.15) !important;
}

.player-row.active-user:hover {
  background: linear-gradient(180deg, #fefce8 0%, #fef08a 50%, #fcd34d 100%) !important;
  filter: brightness(1.02) !important;
}

.rank-col {
  width: 42px !important;
  text-align: center !important;
  padding: 6px 4px 6px 8px !important;
  vertical-align: middle !important;
}

.player-col {
  padding: 6px 8px 6px 4px !important;
  vertical-align: middle !important;
}

.player-row-content {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  flex-wrap: nowrap !important;
  width: 100% !important;
}

/* Sijoituslaatat (3D Metalliset laatat puulankulla) */
.rank-number-box {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 28px !important;
  height: 26px !important;
  padding: 0 5px !important;
  border-radius: 6px !important;
  font-family: 'Oswald', sans-serif !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.35) !important;
  box-sizing: border-box !important;
  white-space: nowrap !important;
}

.rank-box-pronssi {
  background: linear-gradient(180deg, #a14c12 0%, #571e05 100%) !important;
  border: 1px solid #d97706 !important;
  color: #ffedd5 !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9) !important;
}

.rank-box-hopea {
  background: linear-gradient(180deg, #475569 0%, #1e293b 100%) !important;
  border: 1px solid #94a3b8 !important;
  color: #f8fafc !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9) !important;
}

.rank-box-kulta {
  background: linear-gradient(180deg, #b45309 0%, #6e2a04 100%) !important;
  border: 1px solid #fcd34d !important;
  color: #fef08a !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9) !important;
}

.rank-box-timantti {
  background: linear-gradient(180deg, #0284c7 0%, #034b70 100%) !important;
  border: 1px solid #38bdf8 !important;
  color: #e0f2fe !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9) !important;
}

.player-name-text {
  font-family: 'Inter', sans-serif !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  color: #2a1408 !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) !important;
  white-space: nowrap !important;
}

.player-row.active-user .player-name-text {
  color: #3d1a08 !important;
  font-weight: 800 !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7) !important;
}

.avatar-container {
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  overflow: hidden !important;
  border: 1.5px solid #8c6246 !important;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.6), inset 0 1px 2px rgba(0, 0, 0, 0.8) !important;
  background: #2a160a !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}

.avatar-container.bg-pronssi { border-color: #d97706 !important; }
.avatar-container.bg-hopea { border-color: #94a3b8 !important; }
.avatar-container.bg-kulta { border-color: #fcd34d !important; }
.avatar-container.bg-timantti { border-color: #38bdf8 !important; }

.you-tag {
  font-size: 9px !important;
  font-weight: 700 !important;
  color: #fef08a !important;
  background: linear-gradient(180deg, #b45309 0%, #632303 100%) !important;
  border: 1px solid #fcd34d !important;
  padding: 2px 7px !important;
  border-radius: 4px !important;
  margin-left: 4px !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(254, 240, 138, 0.4) !important;
  flex-shrink: 0 !important;
}
/* 🔒 KIRJAUTUMATTOMAN KÄYTTÄJÄN SARJATAULUKON SUMENNUS & OVERLAY */
.ranking-table-wrapper {
  position: relative !important;
  overflow: hidden !important;
}

.ranking-blur-overlay {
  position: absolute !important;
  top: 115px !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: auto !important;
  background: linear-gradient(180deg, rgba(var(--blur-bg-rgb, 43, 43, 43), 0) 0%, rgba(var(--blur-bg-rgb, 43, 43, 43), 0.6) 25%, rgba(var(--blur-bg-rgb, 43, 43, 43), 0.95) 60%, rgba(var(--blur-bg-rgb, 43, 43, 43), 0.98) 100%) !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.4) 20%, #000 45%) !important;
  mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.4) 20%, #000 45%) !important;
  display: flex;
  align-items: center !important;
  justify-content: center !important;
  padding: 15px 12px !important;
  z-index: 25 !important;
  box-sizing: border-box !important;
  border-bottom: 2px solid var(--blur-border-color, #2B2B2B) !important;
  border-radius: 0 0 12px 12px !important;
  transition: background 0.3s ease, border-color 0.3s ease !important;
}

.ranking-blur-overlay.empty-state {
  top: 0 !important;
  background: rgba(var(--blur-bg-rgb, 43, 43, 43), 0.95) !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
}

.ranking-blur-overlay .btn-landing-join {
  font-size: 12.5px !important;
  padding: 11px 18px !important;
  width: 100% !important;
  max-width: 360px !important;
  text-align: center !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.7) !important;
  margin: 0 !important;
}
/* Sivutus (Pagination) - Tumma brändijalusta (#2B2B2B) */
#rankingPagination {
 display: flex !important;
 justify-content: center !important;
 align-items: center !important;
 gap: 12px !important;
 padding: 14px 10px !important;
 background: linear-gradient(180deg, #3A3A3A 0%, #2B2B2B 50%, #171717 100%) !important;
 border-top: 2px solid #404040 !important;
 border-radius: 0 0 14px 14px !important;
 box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.8) !important;
 box-sizing: border-box !important;
}

/* Brändin mukainen ulkoreunus sarjataulukon sivunvaihtoikkunalle ja tyhjälle ranking-ilmoitukselle (#2B2B2B) */
#rankingPagination,
.ranking-empty-msg,
.app-container[data-theme] #rankingPagination,
.app-container[data-theme] .ranking-empty-msg {
  border-left: 2px solid #2B2B2B !important;
  border-right: 2px solid #2B2B2B !important;
  border-bottom: 2px solid #2B2B2B !important;
}

#rankingPageIndicator {
 font-family: 'Oswald', sans-serif !important;
 font-size: 13px !important;
 font-weight: 700 !important;
 letter-spacing: 1px !important;
 color: #F5F1E8 !important;
 text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9) !important;
}

#rankingPagination .btn-secondary {
 background: linear-gradient(180deg, #3A3A3A 0%, #2B2B2B 100%) !important;
 color: #e5d6c3 !important;
 border: 1px solid #525252 !important;
 box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4) !important;
 transition: all 0.2s ease !important;
}

#rankingPagination .btn-secondary:hover:not(:disabled) {
 background: linear-gradient(180deg, #525252 0%, #333333 100%) !important;
 color: #fef08a !important;
 border-color: #d97706 !important;
}

#rankingPagination .btn-secondary:disabled {
 background: #171717 !important;
 color: #525252 !important;
 border-color: #2B2B2B !important;
 box-shadow: none !important;
 opacity: 0.5 !important;
 cursor: not-allowed !important;
 transform: none !important;
}

.ranking-header-card input::placeholder {
  color: #8c7362 !important;
}

/* ESTETÄÄN PELITEEMOJA (Kimble jne.) PEITTÄMÄSTÄ PUUPLAKAATTIA (SÄILYTETÄÄN TUMMA BRÄNDI #2B2B2B) */
.app-container[data-theme="kimble"] .ranking-header-card,
.app-container[data-theme="yatzy"] .ranking-header-card,
.app-container[data-theme="alias"] .ranking-header-card,
.app-container[data-theme="afrikan_tahti"] .ranking-header-card {
 background: 
    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-color: #404040 !important;
 box-shadow: 
    0 12px 30px rgba(0, 0, 0, 0.8),
    inset 0 0 0 1px #d97706,
    inset 0 0 0 3px #121212,
    inset 0 -8px 18px rgba(0, 0, 0, 0.95) !important;
}

.app-container[data-theme="kimble"] .ranking-header-card label,
.app-container[data-theme="yatzy"] .ranking-header-card label,
.app-container[data-theme="alias"] .ranking-header-card label,
.app-container[data-theme="afrikan_tahti"] .ranking-header-card label {
  color: #e5d6c3 !important;
}

.app-container[data-theme="kimble"] .ranking-header-card h2,
.app-container[data-theme="yatzy"] .ranking-header-card h2,
.app-container[data-theme="alias"] .ranking-header-card h2,
.app-container[data-theme="afrikan_tahti"] .ranking-header-card h2 {
  color: #fef08a !important;
}

/* ------------------------------------------------------------
   RANKING-TAULUKON & DIVISIOONAOTSIKOIDEN TÄYDELLINEN TASAUS
   ------------------------------------------------------------ */
#tab-ranking table {
  width: 100% !important;
  border-collapse: collapse !important;
  margin: 10px 0 0 0 !important;
  padding: 0 !important;
}

#tab-ranking table tr {
  margin: 0 !important;
  padding: 0 !important;
}

#tab-ranking table td, 
#tab-ranking table th {
  box-sizing: border-box !important;
}

/* Divisioonaotsikot (Kulta, Hopea, Pronssi, I, II, III, IV jne.) */
#tab-ranking tr.div-main-header td,
#tab-ranking tr.div-sub-header td,
.div-main-header td,
.div-sub-header td {
  margin: 0 !important;
  padding: 8px 12px !important;
  border-left: none !important;
  border-right: none !important;
  text-align: center !important;
  position: relative;
  left: -2px; /* Siirtää palkkeja täsmälleen 2px vasemmalle poistaen raon */
  width: calc(100% + 2px) !important;
}

/* VÄLILEHTIEN PÄÄSÄILIÖIDEN TAUSTAN NOLLAUS */
#tab-ranking, 
#tab-raportoi,
#tab-saannot,
#tab-profiili, 
#tab-feed, 
#landing-general, 
#tab-etusivu {
  background: transparent !important;
}

/* FIIDIKORTTIEN SYÖTE REUNAMERKIT */
.game-card-general { background: #ffffff; border: 1px solid #d8c8b2; border-radius: 12px; padding: 20px; }
.game-card-kimble { background: #ffffff; border: 2px solid #7dd3fc; border-left: 6px solid #0284c7; border-radius: 12px; padding: 20px; }
.game-card-yatzy { background: #ffffff; border: 2px solid #f472b6; border-left: 6px solid #8f498a; border-radius: 12px; padding: 20px; }
.game-card-alias { background: #ffffff; border: 2px solid #fca5a5; border-left: 6px solid #b91c1c; border-radius: 12px; padding: 20px; }
.game-card-afrikan_tahti { background: #ffffff; border: 2px solid #fde047; border-left: 6px solid #ca8a04; border-radius: 12px; padding: 20px; }

/* ============================================================
 🔵 1. KIMBLE TEEMA (Juomapeliliigan Sininen #37467b)
 ============================================================ */
/* Kimble-tausta poistettu – pidetään tasaharmaana */
.app-container[data-theme="kimble"] {
  background-color: #37467b !important;
  background-image: 
    radial-gradient(circle at 50% 30%, rgba(125, 143, 196, 0.15) 0%, rgba(26, 33, 61, 0.95) 100%),
    repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.06) 0px, rgba(255, 255, 255, 0.06) 1px, transparent 1px, transparent 6px),
    repeating-linear-gradient(-45deg, rgba(0, 0, 0, 0.2) 0px, rgba(0, 0, 0, 0.2) 1px, transparent 1px, transparent 6px) !important;
  background-size: 100% 100%, 12px 12px, 12px 12px !important;
  border-color: #37467b !important;
  box-shadow: 
    0 35px 80px rgba(0, 0, 0, 0.9), 
    0 0 15px rgba(55, 70, 123, 0.3), 
    inset 0 0 25px rgba(0, 0, 0, 0.4), 
    inset 0 1px 0 rgba(255, 255, 255, 0.4) !important;
}
.app-container[data-theme="kimble"] .sticky-header { background: #f7eee0 !important; border-bottom-color: #cce3f5 !important; }
.app-container[data-theme="kimble"] .logo-container { background: transparent !important; border-bottom-color: rgba(255, 255, 255, 0.2) !important; }
.app-container[data-theme="kimble"] .nav-tabs { 
  background: linear-gradient(180deg, #10162a 0px, #10162a 9px, rgba(125, 143, 196, 0.85) 9px, #37467b 25px, #253359 65%, #18233f 100%) !important; 
  border-top: none !important; 
  border-bottom-color: #10162a !important; 
}
.app-container[data-theme="kimble"] .nav-tab { color: #e0f2fe !important; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.95), 0 0 3px rgba(0, 0, 0, 0.9) !important; }
.app-container[data-theme="kimble"] .game-bar-container { background: #dcebf7 !important; border-bottom-color: #cce3f5 !important; }
.app-container[data-theme="kimble"] .game-bar-trigger { background: #37467b !important; color: #ffffff !important; border-color: #253359 !important; }

.app-container[data-theme="kimble"] .footer-section { background: #d4e5f3 !important; color: #2c516c !important; border-top: 1px solid #b3d5ef; }
.app-container[data-theme="kimble"] .footer-section a { color: #37467b !important; border-bottom-color: #37467b !important; }


/* ============================================================
 🟣 2. YATZY TEEMA (Juomapeliliigan Violetti #8f498a)
 ============================================================ */
/* Yatzy-tausta poistettu – pidetään tasaharmaana */
.app-container[data-theme="yatzy"] {
  background-color: #8f498a !important;
  background-image: 
    radial-gradient(circle at 50% 30%, rgba(189, 129, 185, 0.15) 0%, rgba(38, 15, 36, 0.95) 100%),
    repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.06) 0px, rgba(255, 255, 255, 0.06) 1px, transparent 1px, transparent 6px),
    repeating-linear-gradient(-45deg, rgba(0, 0, 0, 0.2) 0px, rgba(0, 0, 0, 0.2) 1px, transparent 1px, transparent 6px) !important;
  background-size: 100% 100%, 12px 12px, 12px 12px !important;
  border-color: #8f498a !important;
  box-shadow: 
    0 35px 80px rgba(0, 0, 0, 0.9), 
    0 0 15px rgba(143, 73, 138, 0.3), 
    inset 0 0 25px rgba(0, 0, 0, 0.4), 
    inset 0 1px 0 rgba(255, 255, 255, 0.4) !important;
}
.app-container[data-theme="yatzy"] .sticky-header { background: #f7eee0 !important; border-bottom-color: #f3dbe8 !important; }
.app-container[data-theme="yatzy"] .logo-container { background: transparent !important; border-bottom-color: rgba(255, 255, 255, 0.2) !important; }
.app-container[data-theme="yatzy"] .nav-tabs { 
  background: linear-gradient(180deg, #230b22 0px, #230b22 9px, rgba(189, 129, 185, 0.85) 9px, #8f498a 25px, #673363 65%, #3b1839 100%) !important; 
  border-top: none !important; 
  border-bottom-color: #230b22 !important; 
}
.app-container[data-theme="yatzy"] .nav-tab { color: #fce7f3 !important; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.95), 0 0 3px rgba(0, 0, 0, 0.9) !important; }
.app-container[data-theme="yatzy"] .game-bar-container { background: #f9e8f4 !important; border-bottom-color: #f3dbe8 !important; }
.app-container[data-theme="yatzy"] .game-bar-trigger { background: #8f498a !important; color: #ffffff !important; border-color: #673363 !important; }

.app-container[data-theme="yatzy"] .footer-section { background: #f3dbe8 !important; color: #43193e !important; border-top: 1px solid #e2b2cf; }
.app-container[data-theme="yatzy"] .footer-section a { color: #8f498a !important; border-bottom-color: #8f498a !important; }

/* ============================================================
 🔴 3. ALIAS TEEMA (Juomapeliliigan Punainen #8f4954)
 ============================================================ */
/* Alias-tausta poistettu – pidetään tasaharmaana */
.app-container[data-theme="alias"] {
  background-color: #8f4954 !important;
  background-image: 
    radial-gradient(circle at 50% 30%, rgba(207, 164, 171, 0.15) 0%, rgba(61, 24, 30, 0.95) 100%),
    repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.06) 0px, rgba(255, 255, 255, 0.06) 1px, transparent 1px, transparent 6px),
    repeating-linear-gradient(-45deg, rgba(0, 0, 0, 0.2) 0px, rgba(0, 0, 0, 0.2) 1px, transparent 1px, transparent 6px) !important;
  background-size: 100% 100%, 12px 12px, 12px 12px !important;
  border-color: #8f4954 !important;
  box-shadow: 
    0 35px 80px rgba(0, 0, 0, 0.9), 
    0 0 15px rgba(143, 73, 84, 0.3), 
    inset 0 0 25px rgba(0, 0, 0, 0.4), 
    inset 0 1px 0 rgba(255, 255, 255, 0.4) !important;
}
.app-container[data-theme="alias"] .sticky-header { background: #F5F1E8 !important; border-bottom-color: #EBD6D9 !important; }
.app-container[data-theme="alias"] .logo-container { background: transparent !important; border-bottom-color: rgba(255, 255, 255, 0.2) !important; }
.app-container[data-theme="alias"] .nav-tabs { 
  background: linear-gradient(180deg, #2b1218 0px, #2b1218 9px, rgba(207, 164, 171, 0.85) 9px, #8f4954 25px, #68323c 65%, #3d1820 100%) !important; 
  border-top: none !important; 
  border-bottom-color: #2b1218 !important; 
}
.app-container[data-theme="alias"] .nav-tab { color: #F5EBEB !important; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.95), 0 0 3px rgba(0, 0, 0, 0.9) !important; }
.app-container[data-theme="alias"] .game-bar-container { background: #F5EBEB !important; border-bottom-color: #EBD6D9 !important; }
.app-container[data-theme="alias"] .game-bar-trigger { background: #8f4954 !important; color: #ffffff !important; border-color: #68323c !important; }

.app-container[data-theme="alias"] .footer-section { background: #F5EBEB !important; color: #40181E !important; border-top: 1px solid #CFA4AB; }
.app-container[data-theme="alias"] .footer-section a { color: #8f4954 !important; border-bottom-color: #8f4954 !important; }

/* ============================================================
 🟡 4. AFRIKAN TÄHTI TEEMA (Juomapeliliigan Kulta #f1cb64)
 ============================================================ */
/* Afrikan Tähti -tausta poistettu – pidetään tasaharmaana */
.app-container[data-theme="afrikan_tahti"] {
  background-color: #c89b3c !important;
  background-image: 
    radial-gradient(circle at 50% 30%, rgba(254, 240, 138, 0.2) 0%, rgba(100, 70, 15, 0.95) 100%),
    repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.06) 0px, rgba(255, 255, 255, 0.06) 1px, transparent 1px, transparent 6px),
    repeating-linear-gradient(-45deg, rgba(0, 0, 0, 0.2) 0px, rgba(0, 0, 0, 0.2) 1px, transparent 1px, transparent 6px) !important;
  background-size: 100% 100%, 12px 12px, 12px 12px !important;
  border-color: #f1cb64 !important;
  box-shadow: 
    0 35px 80px rgba(0, 0, 0, 0.9), 
    0 0 15px rgba(241, 203, 100, 0.3), 
    inset 0 0 25px rgba(0, 0, 0, 0.4), 
    inset 0 1px 0 rgba(255, 255, 255, 0.4) !important;
}
.app-container[data-theme="afrikan_tahti"] .sticky-header { background: #f7eee0 !important; border-bottom-color: #f3e2bf !important; }
.app-container[data-theme="afrikan_tahti"] .logo-container { background: transparent !important; border-bottom-color: rgba(255, 255, 255, 0.2) !important; }
.app-container[data-theme="afrikan_tahti"] .nav-tabs { 
  background: linear-gradient(180deg, #281804 0px, #281804 9px, rgba(254, 240, 138, 0.85) 9px, #f1cb64 25px, #c89b3c 65%, #785310 100%) !important; 
  border-top: none !important; 
  border-bottom-color: #281804 !important; 
}
.app-container[data-theme="afrikan_tahti"] .nav-tab { color: #fef08a !important; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.95), 0 0 3px rgba(0, 0, 0, 0.9) !important; }
.app-container[data-theme="afrikan_tahti"] .game-bar-container { background: #f8e7c5 !important; border-bottom-color: #f3e2bf !important; }
.app-container[data-theme="afrikan_tahti"] .game-bar-trigger { background: #c89b3c !important; color: #ffffff !important; border-color: #f1cb64 !important; }

.app-container[data-theme="afrikan_tahti"] .footer-section { background: #f3debb !important; color: #553a13 !important; border-top: 1px solid #e8ca96; }
.app-container[data-theme="afrikan_tahti"] .footer-section a { color: #c89b3c !important; border-bottom-color: #c89b3c !important; }

/* FIIDIKORTTIEN REUNATEEMAT */
.feed-card-kimble { border-left: 5px solid #37467b !important; }
.feed-card-yatzy { border-left: 5px solid #8f498a !important; }
.feed-card-alias { border-left: 5px solid #8f4954 !important; }
.feed-card-afrikan_tahti { border-left: 5px solid #f1cb64 !important; }

/* 13. ETUSIVU JA SISÄLLÖT (LÄPINÄKYVÄT TAUSTAT JOTTA KORTIN DYNAMINEN SÄVY NÄKYY) */
#tab-profiili, #tab-feed, #landing-general, #tab-etusivu {
 background: transparent !important;
 border-radius: 0 0 16px 16px;
}

/* PUINEN PUBITEEMA ETUSIVULLE (Landing Cards) */
.landing-hero-card {
  padding: 24px 18px 18px 18px !important;
  margin: 10px 10px 15px 10px !important;
  
  /* Aito, tumma mahonkipuun tekstuuri syvemmillä liukuväreillä & puunsyillä */
  background-color: #2b1408 !important;
  background-image: 
    radial-gradient(ellipse at 50% 15%, rgba(180, 83, 9, 0.45) 0%, rgba(15, 7, 3, 0.98) 100%),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.03) 0px, rgba(255, 255, 255, 0.03) 1px, transparent 1px, transparent 6px),
    repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.3) 0px, rgba(0, 0, 0, 0.3) 2px, transparent 2px, transparent 4px),
    linear-gradient(180deg, #4a2313 0%, #2e1208 50%, #170803 100%) !important;
  
  /* Veistetyn puun & messinkiviisteen reunat */
  border: 3px solid #6e3719 !important;
  border-radius: 14px !important;
  
  /* Messinkinen sisäviiste & syvät puuvarjot */
  box-shadow: 
    0 12px 30px rgba(0, 0, 0, 0.85),
    inset 0 0 0 1px #d97706,
    inset 0 0 0 3px #1f0b04,
    inset 0 4px 12px rgba(254, 240, 138, 0.2),
    inset 0 -8px 20px rgba(0, 0, 0, 0.95) !important;
  
  position: relative !important;
  box-sizing: border-box !important;
  text-align: center;
}

/* Polttokuvioitu / veistetty sisäkehikko */
.landing-hero-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;
}

.landing-hero-card h2 { 
  font-family: 'Oswald', sans-serif !important;
  font-size: 26px !important;
  letter-spacing: 2.5px !important;
  text-transform: uppercase !important;
  margin: 0 0 12px 0 !important;
  color: #fef08a !important;
  text-shadow: 
    0 1px 3px rgba(0, 0, 0, 0.9),
    0 0 5px rgba(245, 158, 11, 0.25) !important;
}

.landing-hero-card p { color: #e5d6c3; font-size: 14px; line-height: 1.6; margin-bottom: 20px; }

/* SÄILYTETÄÄN TUMMA BRÄNDIPLAATTI TEEMOJEN YLI ETUSIVULLA (#2B2B2B) */
.app-container[data-theme="kimble"] .landing-hero-card,
.app-container[data-theme="yatzy"] .landing-hero-card,
.app-container[data-theme="alias"] .landing-hero-card,
.app-container[data-theme="afrikan_tahti"] .landing-hero-card {
  background: 
    radial-gradient(ellipse at 50% 20%, rgba(217, 119, 6, 0.35) 0%, rgba(15, 15, 15, 0.96) 100%),
    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-color: #404040 !important;
  box-shadow: 
    0 12px 30px rgba(0, 0, 0, 0.8),
    inset 0 0 0 1px #d97706,
    inset 0 0 0 3px #121212,
    inset 0 4px 12px rgba(254, 240, 138, 0.15),
    inset 0 -8px 18px rgba(0, 0, 0, 0.95) !important;
}

/* 14. TASOELEMENTIT JA PELIRANKING-NAPIT */
.level-box { display: flex; flex-direction: column; align-items: center; margin: 6px 0 10px 0; }
.level-tag { 
  font-family: 'Oswald', sans-serif; 
  font-size: 13.5px; 
  font-weight: 700; 
  color: #4a2313; 
  text-transform: uppercase; 
  letter-spacing: 0.8px; 
  background: transparent;
  padding: 2px 0;
  border: none;
  box-shadow: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
  max-width: 90%;
}

.level-pawn-group {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  line-height: 1;
}

.level-pawn-icon {
  width: 32px;
  height: 32px;
  display: inline-block;
  flex-shrink: 0;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.35));
  transition: transform 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275), filter 0.25s ease;
}

.level-tag:hover .level-pawn-icon {
  transform: scale(1.18) rotate(-5deg) translateY(-1px);
  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.5));
}

.xp-container { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; margin-top: 5px; width: 100%; }

/* Messinkinen kouru XP-palkille */
.xp-bar { 
  width: 140px; 
  height: 9px; 
  background: #2b1408; 
  border-radius: 5px; 
  overflow: hidden; 
  border: 1px solid #78350f; 
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.8), 0 1px 2px rgba(255,255,255,0.5);
  position: relative;
}

.xp-fill { 
  width: 0%; 
  height: 100%; 
  background: linear-gradient(90deg, #d97706 0%, #fef08a 100%); 
  border-radius: 4px; 
  box-shadow: 0 0 8px rgba(245, 158, 11, 0.8);
  transition: width 2.2s cubic-bezier(0.22, 1, 0.36, 1); 
}

/* 🌟 Tasonousun & XP-lisäyksen visualisointianimaatiot */
.level-tag.level-up-pop {
  animation: levelUpPop 1.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

@keyframes levelUpPop {
  0% { transform: scale(1); }
  35% { transform: scale(1.45) rotate(-7deg); filter: drop-shadow(0 0 16px #f59e0b); color: #fef08a; }
  70% { transform: scale(0.92) rotate(3deg); }
  100% { transform: scale(1) rotate(0deg); }
}

.xp-val.xp-pulse {
  animation: xpPulse 0.6s ease-in-out infinite alternate;
  color: #d97706;
  font-weight: 800;
}

@keyframes xpPulse {
  from { transform: scale(1); }
  to { transform: scale(1.1); }
}

.xp-val { font-size: 8.5px; font-weight: 700; color: #785438; text-align: center; margin-top: 1px; }

/* PELIRANKING-NAPISTO */
.game-ranks-container { margin: 28px 0 2px 0; display: flex; flex-direction: column; align-items: center; }
.game-ranks-label { 
  font-size: 9px; 
  font-weight: 700; 
  color: #785438; 
  text-transform: uppercase; 
  letter-spacing: 0.8px; 
  margin-bottom: 5px; 
  font-family: 'Oswald', sans-serif;
}

/* PELIRANKING-PALKKI (TEEMASÄVYTTENEN FRAME) */
.game-ranks-grid { 
  display: flex; 
  justify-content: center; 
  gap: 6px; 
  background: rgba(0, 0, 0, 0.35) linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(0, 0, 0, 0.45) 100%); 
  padding: 5px 6px; 
  border-radius: 10px; 
  border: 1.5px solid rgba(255, 255, 255, 0.25); 
  box-shadow: inset 0 2px 6px rgba(0,0,0,0.6), 0 2px 5px rgba(0,0,0,0.25);
  width: 100%; 
  box-sizing: border-box; 
  backdrop-filter: blur(4px);
}

/* TEEMAKOHTAISET PALKKIVÄRIT */
.theme-blue .game-ranks-grid { background: rgba(30, 58, 138, 0.5) linear-gradient(180deg, rgba(96, 165, 250, 0.25) 0%, rgba(30, 58, 138, 0.7) 100%) !important; border-color: #60a5fa !important; }
.theme-green .game-ranks-grid { background: rgba(20, 83, 45, 0.5) linear-gradient(180deg, rgba(74, 222, 128, 0.25) 0%, rgba(20, 83, 45, 0.7) 100%) !important; border-color: #4ade80 !important; }
.theme-yellow .game-ranks-grid { background: rgba(113, 63, 18, 0.5) linear-gradient(180deg, rgba(250, 204, 21, 0.25) 0%, rgba(113, 63, 18, 0.7) 100%) !important; border-color: #facc15 !important; }
.theme-red .game-ranks-grid { background: rgba(127, 29, 29, 0.5) linear-gradient(180deg, rgba(248, 113, 113, 0.25) 0%, rgba(127, 29, 29, 0.7) 100%) !important; border-color: #f87171 !important; }
.theme-bronze .game-ranks-grid { background: rgba(87, 32, 8, 0.5) linear-gradient(180deg, rgba(217, 119, 6, 0.25) 0%, rgba(87, 32, 8, 0.7) 100%) !important; border-color: #d97706 !important; }
.theme-silver .game-ranks-grid { background: rgba(30, 41, 59, 0.5) linear-gradient(180deg, rgba(203, 213, 225, 0.25) 0%, rgba(30, 41, 59, 0.7) 100%) !important; border-color: #cbd5e1 !important; }
.theme-gold .game-ranks-grid { background: rgba(69, 26, 3, 0.55) linear-gradient(180deg, rgba(254, 240, 138, 0.3) 0%, rgba(69, 26, 3, 0.75) 100%) !important; border-color: #fcd34d !important; }
.theme-diamond .game-ranks-grid { background: rgba(8, 47, 73, 0.55) linear-gradient(180deg, rgba(56, 189, 248, 0.3) 0%, rgba(8, 47, 73, 0.75) 100%) !important; border-color: #38bdf8 !important; }
.theme-black .game-ranks-grid { background: rgba(10, 10, 10, 0.65) linear-gradient(180deg, rgba(82, 82, 82, 0.3) 0%, rgba(10, 10, 10, 0.85) 100%) !important; border-color: #737373 !important; }
.theme-wine .game-ranks-grid { background: rgba(66, 11, 21, 0.6) linear-gradient(180deg, rgba(244, 114, 182, 0.25) 0%, rgba(66, 11, 21, 0.8) 100%) !important; border-color: #b85263 !important; }

/* PELIEN LAATIKOT DIVISIOONITTAN */
.game-rank-item { 
  display: flex; 
  flex-direction: column; 
  align-items: center; 
  flex: 1; 
  min-width: 0; 
  padding: 5px 2px; 
  border-radius: 6px; 
  cursor: pointer; 
  transition: all 0.22s cubic-bezier(0.175, 0.885, 0.32, 1.275); 
  user-select: none; 
  border: 1px solid transparent;
}

.game-rank-item.div-item-pronssi {
  background: linear-gradient(180deg, rgba(161, 76, 18, 0.88) 0%, rgba(87, 30, 5, 0.95) 100%) !important;
  border: 1px solid #d97706 !important;
  box-shadow: inset 0 1px 0 rgba(254, 215, 170, 0.3), 0 2px 4px rgba(0,0,0,0.4) !important;
}

.game-rank-item.div-item-hopea {
  background: linear-gradient(180deg, rgba(71, 85, 105, 0.88) 0%, rgba(30, 41, 59, 0.95) 100%) !important;
  border: 1px solid #94a3b8 !important;
  box-shadow: inset 0 1px 0 rgba(241, 245, 249, 0.3), 0 2px 4px rgba(0,0,0,0.4) !important;
}

.game-rank-item.div-item-kulta {
  background: linear-gradient(180deg, rgba(180, 83, 9, 0.88) 0%, rgba(110, 42, 4, 0.95) 100%) !important;
  border: 1px solid #fcd34d !important;
  box-shadow: inset 0 1px 0 rgba(254, 240, 138, 0.35), 0 2px 4px rgba(0,0,0,0.4) !important;
}

.game-rank-item.div-item-timantti {
  background: linear-gradient(180deg, rgba(2, 132, 199, 0.88) 0%, rgba(3, 75, 112, 0.95) 100%) !important;
  border: 1px solid #38bdf8 !important;
  box-shadow: inset 0 1px 0 rgba(224, 242, 254, 0.35), 0 2px 4px rgba(0,0,0,0.4) !important;
}

.game-rank-item.div-item-none {
  background: rgba(0, 0, 0, 0.35) !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
}

.game-rank-item:hover { 
  transform: translateY(-2px) scale(1.03);
  filter: brightness(1.15);
}

.game-rank-item.active { 
  transform: scale(1.05) translateY(-1px) !important;
  box-shadow: 0 0 12px rgba(255, 255, 255, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.6) !important; 
  outline: 2px solid #ffffff !important;
  outline-offset: -1px !important;
}

.game-rank-item.active .game-rank-title { color: #ffffff !important; text-shadow: 0 1px 2px #000; }
.game-rank-item.active .game-rank-div { color: #ffffff !important; text-shadow: 0 1px 2px #000; font-weight: 800; }
.game-rank-item.active .game-rank-top { color: #fef08a !important; text-shadow: 0 0 4px rgba(254, 240, 138, 0.8); }

.game-rank-title { font-size: 8.5px; color: #c8baa6; font-weight: 700; text-transform: uppercase; line-height: 1.1; white-space: nowrap; font-family: 'Oswald', sans-serif; }
.game-rank-div { font-size: 9.5px; font-weight: 700; color: #fef08a; margin-top: 2px; white-space: nowrap; }
.game-rank-top { font-size: 8.5px; font-weight: 700; color: #fcd34d; margin-top: 1px; }

.global-stats-row { display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 11px; font-weight: 600; color: #785438; margin: 4px 0 8px 0; }
.global-stat-sep { color: #c8baa6; }

.coming-soon-box {
  padding: 30px 20px !important;
  margin: 10px 10px 15px 10px !important;
  background-color: #2b1408 !important;
  background-image: 
    radial-gradient(ellipse at 50% 15%, rgba(180, 83, 9, 0.45) 0%, rgba(15, 7, 3, 0.98) 100%),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.03) 0px, rgba(255, 255, 255, 0.03) 1px, transparent 1px, transparent 6px),
    repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.3) 0px, rgba(0, 0, 0, 0.3) 2px, transparent 2px, transparent 4px),
    linear-gradient(180deg, #4a2313 0%, #2e1208 50%, #170803 100%) !important;
  border: 3px solid #6e3719 !important;
  border-radius: 14px !important;
  box-shadow: 
    0 12px 30px rgba(0, 0, 0, 0.85),
    inset 0 0 0 1px #d97706,
    inset 0 0 0 3px #1f0b04,
    inset 0 4px 12px rgba(254, 240, 138, 0.2),
    inset 0 -8px 20px rgba(0, 0, 0, 0.95) !important;
  position: relative !important;
  box-sizing: border-box !important;
  text-align: center;
}
.coming-soon-box::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;
}
.coming-soon-badge { position: relative; z-index: 2; display: inline-block; background: rgba(245, 158, 11, 0.15); color: #fef08a; font-family: 'Oswald', sans-serif; font-size: 11px; font-weight: 700; padding: 4px 12px; border-radius: 20px; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 12px; border: 1px solid #f59e0b; text-shadow: 0 1px 2px rgba(0,0,0,0.8); }
.coming-soon-box h3 { position: relative; z-index: 2; margin: 0 0 8px 0; font-size: 24px; font-family: 'Oswald', sans-serif; color: #fef08a; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9), 0 0 5px rgba(245, 158, 11, 0.25); text-transform: uppercase; letter-spacing: 1px; }
.coming-soon-box p { position: relative; z-index: 2; font-size: 14px; color: #e5d6c3; margin: 0 0 16px 0; line-height: 1.5; text-shadow: 0 1px 2px rgba(0,0,0,0.8); }

/* SÄILYTETÄÄN TUMMA BRÄNDIPLAATTI TULOSSA PIAN -BOKSISSA (#2B2B2B) */
.app-container[data-theme="kimble"] .coming-soon-box,
.app-container[data-theme="yatzy"] .coming-soon-box,
.app-container[data-theme="alias"] .coming-soon-box,
.app-container[data-theme="afrikan_tahti"] .coming-soon-box {
  background: 
    radial-gradient(ellipse at 50% 20%, rgba(217, 119, 6, 0.35) 0%, rgba(15, 15, 15, 0.96) 100%),
    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) 1px, transparent 1px, transparent 8px),
    linear-gradient(180deg, #3A3A3A 0%, #2B2B2B 50%, #171717 100%) !important;
  border-color: #404040 !important;
  box-shadow: 
    0 12px 30px rgba(0, 0, 0, 0.8),
    inset 0 0 0 1px #d97706,
    inset 0 0 0 3px #121212,
    inset 0 4px 12px rgba(254, 240, 138, 0.15),
    inset 0 -8px 18px rgba(0, 0, 0, 0.95) !important;
}
/* ============================================================
   🎛️ KUSTOMOINTI-MODALIN PUUPUBITYYLI & TIIVIS NÄKYMÄ
   ============================================================ */

/* ============================================================
   🎛️ KUSTOMOINTISIVUN & KORTIN TAKAPUOLEN DYNAMISESTI SOVITETUT TYYLIT
   ============================================================ */

/* Otsikoplakaati */
.custom-header-card {
  padding: 8px 12px !important;
  margin-bottom: 8px !important;
  background-color: #2b1408 !important;
  background-image: 
    radial-gradient(ellipse at 50% 15%, rgba(180, 83, 9, 0.45) 0%, rgba(15, 7, 3, 0.98) 100%),
    linear-gradient(180deg, #4a2313 0%, #2e1208 50%, #170803 100%) !important;
  border: 2px solid #6e3719 !important;
  border-radius: 10px !important;
  box-shadow: 
    0 4px 12px rgba(0, 0, 0, 0.5),
    inset 0 0 0 1px #d97706,
    inset 0 0 0 2px #1f0b04 !important;
  position: relative !important;
  text-align: center !important;
  transition: all 0.3s ease !important;
}

.custom-header-card h3 {
  font-family: 'Oswald', sans-serif !important;
  font-size: 15px !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  color: #fef08a !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9), 0 0 4px rgba(245, 158, 11, 0.25) !important;
  margin: 0 !important;
}

/* Sisältöalue kortin kääntöpuolella */
.custom-parchment-body {
  background: rgba(255, 255, 255, 0.88) linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(245, 241, 232, 0.85) 100%) !important;
  border: 1.5px solid #bdab95 !important;
  border-radius: 10px !important;
  padding: 8px 10px !important;
  margin-bottom: 8px !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08) !important;
  backdrop-filter: blur(4px) !important;
}

.custom-parchment-body label {
  margin-top: 4px !important;
  margin-bottom: 2px !important;
  font-family: 'Oswald', sans-serif !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  letter-spacing: 0.6px !important;
  color: #5c4333 !important;
  text-transform: uppercase !important;
  text-shadow: none !important;
}

.card-back select {
  padding: 5px 8px !important;
  margin-bottom: 4px !important;
  font-size: 11px !important;
  border-radius: 6px !important;
  border: 1px solid #8c6246 !important;
  background: linear-gradient(180deg, #fffdf7 0%, #f7eee0 100%) !important;
  color: #382a21 !important;
  font-weight: 600 !important;
  box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0.12) !important;
  transition: border-color 0.3s ease, background 0.3s ease, color 0.3s ease !important;
}

/* TEEMAKOHTAISET DYNAMIIKAT PUDOTUSVALIKOILLE (Sijainti & Titteli) */
.theme-green .card-back select {
  border-color: #2E5E4E !important;
  background: linear-gradient(180deg, #ffffff 0%, #e1ebe7 100%) !important;
  color: #122820 !important;
}
.theme-red .card-back select {
  border-color: #7A2E3A !important;
  background: linear-gradient(180deg, #ffffff 0%, #ebd6d9 100%) !important;
  color: #300c14 !important;
}
.theme-gold .card-back select {
  border-color: #b45309 !important;
  background: linear-gradient(180deg, #ffffff 0%, #fef08a 100%) !important;
  color: #451a03 !important;
}
.theme-black .card-back select {
  border-color: #404040 !important;
  background: linear-gradient(180deg, #ffffff 0%, #e5e5e5 100%) !important;
  color: #171717 !important;
}
.theme-blue .card-back select {
  border-color: #2563eb !important;
  background: linear-gradient(180deg, #ffffff 0%, #dbeafe 100%) !important;
  color: #172554 !important;
}
.theme-silver .card-back select {
  border-color: #475569 !important;
  background: linear-gradient(180deg, #ffffff 0%, #e2e8f0 100%) !important;
  color: #0f172a !important;
}
.theme-diamond .card-back select {
  border-color: #0284c7 !important;
  background: linear-gradient(180deg, #ffffff 0%, #e0f2fe 100%) !important;
  color: #082f49 !important;
}
.theme-bronze .card-back select {
  border-color: #8a4316 !important;
  background: linear-gradient(180deg, #ffffff 0%, #f6ece2 100%) !important;
  color: #361202 !important;
}
.theme-yellow .card-back select {
  border-color: #ca8a04 !important;
  background: linear-gradient(180deg, #ffffff 0%, #fef9c3 100%) !important;
  color: #422006 !important;
}

/* Avatar-esikatselun hienosäätö linjaan tekstin ja napin kanssa */
#custAvatarPreview {
  margin-top: 5px !important;
}

/* Haitariohjaimet (Kortin tyyli & Väriteema - Pienennetty & Siistitty) */
.custom-accordion-header {
  font-family: 'Oswald', sans-serif !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  letter-spacing: 0.6px !important;
  color: #fef08a !important;
  text-align: center !important;
  margin: 4px 0 2px 0 !important;
  padding: 3px 6px !important;
  background: linear-gradient(180deg, #3d2314 0%, #231109 100%) !important;
  border: 1px solid #78350f !important;
  border-radius: 5px !important;
  cursor: pointer !important;
  user-select: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  box-shadow: 0 1.5px 3px rgba(0,0,0,0.3) !important;
  transition: all 0.2s ease !important;
}

.custom-accordion-header:hover {
  background: linear-gradient(180deg, #5c351e 0%, #31180d 100%) !important;
  border-color: #d97706 !important;
  color: #ffffff !important;
}

.accordion-arrow {
  font-size: 9px !important;
  color: #f59e0b !important;
  line-height: 1 !important;
}

/* Teema- ja tyyliruudukko (Sallii piilottamisen / JS-toggletoiminnon & Animaatiot) */
.theme-grid {
  display: flex;
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 6px !important;
  margin-bottom: 0 !important;
  padding: 0 !important;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
  transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s ease, margin-bottom 0.3s ease, padding 0.3s ease;
}

.theme-grid.open {
  max-height: 250px; /* Riittävä maksimikorkeus jotta animaatio pelaa nätisti */
  opacity: 1;
  margin-bottom: 8px !important;
  padding: 4px 0 !important;
  overflow: visible; /* Sallii aktiivisten laatikoiden teemahehku-varjojen näkymisen */
  pointer-events: auto;
}

.theme-box {
  background: transparent !important;
  border: 2px solid transparent !important;
  border-radius: 50% !important;
  padding: 2px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  user-select: none !important;
  position: relative !important;
}

.theme-circle {
  width: 26px !important;
  height: 26px !important;
  border-radius: 50% !important;
  margin: 0 auto !important;
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3), inset 0 1px 1px rgba(255, 255, 255, 0.5) !important;
  border: 1.5px solid rgba(0, 0, 0, 0.15) !important;
  transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
  box-sizing: border-box !important;
}

.theme-box:hover .theme-circle {
  transform: scale(1.1) !important;
}

.theme-box.active {
  border-color: #d97706 !important;
  background: rgba(217, 119, 6, 0.18) !important;
  box-shadow: 0 0 8px rgba(217, 119, 6, 0.4) !important;
}

.theme-box.active .theme-circle {
  transform: scale(1.04) !important;
}

.theme-box.locked {
  opacity: 0.5 !important;
}

.theme-box.locked .theme-circle {
  filter: grayscale(40%) !important;
}

.lock-icon {
  display: none !important;
  font-size: 10px !important;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.8)) !important;
  line-height: 1 !important;
}

.theme-box.locked .lock-icon {
  display: inline-block !important;
}

.lock-req-info {
  font-size: 10px !important;
  color: #7f1d1d !important;
  background: #fee2e2 !important;
  border: 1px solid #f87171 !important;
  border-radius: 6px !important;
  padding: 4px 8px !important;
  margin-top: 3px !important;
  margin-bottom: 6px !important;
  text-align: center !important;
  font-weight: 600 !important;
  line-height: 1.25 !important;
}

/* Otsikkorivi & pudotusvalikko näytettäville tilastoille (Keskitetty) */
.stats-header-row {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  margin-top: 6px !important;
  margin-bottom: 4px !important;
  width: 100% !important;
}

.stats-header-row label {
  margin: 0 0 4px 0 !important;
  text-align: center !important;
  width: 100% !important;
  display: block !important;
}

/* Pelivalintanapit ("NÄYTETTÄVÄT TILASTOT") */
.cust-game-btn-group {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 6px !important;
  width: 100% !important;
  margin-top: 2px !important;
}

.cust-game-btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 32px !important;
  height: 32px !important;
  padding: 0 !important;
  border-radius: 8px !important;
  background: linear-gradient(180deg, #f7eee0 0%, #e8dac5 100%) !important;
  border: 1.5px solid #8c6246 !important;
  color: #5c4333 !important;
  cursor: pointer !important;
  box-shadow: 0 1.5px 3px rgba(0, 0, 0, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.8) !important;
  transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}

.cust-game-btn:hover {
  background: linear-gradient(180deg, #fff8ed 0%, #edd3bd 100%) !important;
  transform: translateY(-1px) !important;
}

.cust-game-btn.active {
  background: linear-gradient(180deg, #3d2314 0%, #231109 100%) !important;
  border-color: #d97706 !important;
  color: #fef08a !important;
  box-shadow: 0 0 8px rgba(217, 119, 6, 0.5), inset 0 1px 0 rgba(254, 240, 138, 0.3) !important;
  transform: scale(1.05) !important;
}

.cust-game-icon {
  width: 17px !important;
  height: 17px !important;
  display: block !important;
  opacity: 0.65 !important;
  transition: opacity 0.2s ease, stroke 0.2s ease, filter 0.2s ease !important;
}

.cust-game-btn:hover .cust-game-icon {
  opacity: 0.9 !important;
}

.cust-game-btn.active .cust-game-icon {
  opacity: 1 !important;
  filter: drop-shadow(0 0 4px rgba(254, 240, 138, 0.8)) !important;
  stroke: #fef08a !important;
}

/* Off-On Tilastoplakaati ja Kytkimet (Custom Stats Plaque & Switches) */
.custom-stats-plaque {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 6px 3px !important;
  padding: 8px 4px !important;
  margin-bottom: 8px !important;
  background: linear-gradient(180deg, #d8c8b2 0%, #bead98 100%) !important;
  border: 1.5px solid #8c6246 !important;
  border-radius: 8px !important;
  box-shadow: 
    0 2px 6px rgba(0, 0, 0, 0.15),
    inset 0 1px 1px rgba(255, 255, 255, 0.6) !important;
  transition: all 0.3s ease !important;
}

.custom-stats-plaque .switch-row {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: space-between !important;
  text-align: center !important;
  padding: 1px 0 !important;
  font-size: 8.5px !important;
  font-weight: 700 !important;
  color: #382a21 !important;
  gap: 3px !important;
  border-bottom: none !important;
  cursor: pointer !important;
  user-select: none !important;
}

.custom-stats-plaque .switch-row span {
  font-family: 'Inter', sans-serif !important;
  font-size: 8px !important;
  font-weight: 700 !important;
  color: #382a21 !important;
  line-height: 1.1 !important;
  min-height: 18px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  pointer-events: none !important;
}

.switch {
  position: relative !important;
  display: inline-block !important;
  width: 28px !important;
  height: 15px !important;
  flex-shrink: 0 !important;
  cursor: pointer !important;
}

.switch input {
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
  position: absolute !important;
  pointer-events: none !important;
}

.slider {
  position: absolute !important;
  cursor: pointer !important;
  top: 0; left: 0; right: 0; bottom: 0;
  background-color: #8c7362 !important;
  transition: background-color 0.2s ease !important;
  border-radius: 15px !important;
  box-shadow: inset 1px 1px 2px rgba(0, 0, 0, 0.4) !important;
}

.slider:before {
  position: absolute !important;
  content: "" !important;
  height: 11px !important;
  width: 11px !important;
  left: 2px !important;
  bottom: 2px !important;
  background-color: #ffffff !important;
  transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
  border-radius: 50% !important;
  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3) !important;
}

.switch input:checked + .slider {
  background-color: #b45309 !important;
}

.switch input:checked + .slider:before {
  transform: translateX(13px) !important;
}

/* Modal-painikkeet kortin takapuolella */
#btn-avatar-upload {
  padding: 4px 10px !important;
  font-size: 10px !important;
  border-radius: 6px !important;
  margin: 0 !important;
  width: auto !important;
  font-weight: 700 !important;
  font-family: 'Oswald', sans-serif !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25) !important;
  background: linear-gradient(180deg, #8a4316 0%, #6e2c08 100%) !important;
  border: 1px solid #d97706 !important;
  color: #fef08a !important;
}

#btn-avatar-upload:hover {
  transform: translateY(-1px) !important;
  filter: brightness(1.1) !important;
}

.card-back #btnSaveCustom {
  padding: 8px 12px !important;
  font-size: 11px !important;
  border-radius: 8px !important;
  margin-top: 4px !important;
  background: linear-gradient(180deg, #b45309 0%, #78350f 100%) !important;
  border: 1px solid #fcd34d !important;
  color: #fef08a !important;
  box-shadow: 0 3px 8px rgba(0,0,0,0.35) !important;
}

.card-back #btnSaveCustom:hover:not(:disabled) {
  background: linear-gradient(180deg, #d97706 0%, #92400e 100%) !important;
  color: #ffffff !important;
}

.card-back .btn-secondary {
  margin-top: 4px !important;
  padding: 7px 12px !important;
  font-size: 10.5px !important;
  border-radius: 8px !important;
  background: linear-gradient(180deg, #3d2314 0%, #231109 100%) !important;
  border: 1px solid #78350f !important;
  color: #e5d6c3 !important;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25) !important;
}

.card-back .btn-secondary:hover {
  background: linear-gradient(180deg, #5c351e 0%, #31180d 100%) !important;
  color: #fef08a !important;
  border-color: #d97706 !important;
}

/* ============================================================
   🎨 TEEMAKOHTAISET DYNAMIIKAT KORTIN TAKAPUOLELLE (.card-back)
   ============================================================ */

/* 1. GREEN / VIHREÄ TEEMA (#2c705f) */
.theme-green .card-back {
 background: linear-gradient(180deg, #ffffff 0%, #F8FBF9 35%, #E1EBE7 70%, #A8C7BB 100%) !important;
 border-color: #2c705f !important;
 box-shadow: 0 12px 30px rgba(0,0,0,0.65), inset 0 0 0 1px #2c705f !important;
}
.theme-green .custom-header-card {
 background: linear-gradient(180deg, #2c705f 0%, #1d4e42 60%, #13352b 100%) !important;
 border-color: #2c705f !important;
 box-shadow: inset 0 0 0 1px #47a292, 0 4px 10px rgba(0,0,0,0.4) !important;
}
.theme-green .custom-header-card h3 { color: #dcfce7 !important; text-shadow: 0 0 4px rgba(71, 162, 146, 0.4) !important; }
.theme-green .custom-accordion-header {
 background: linear-gradient(180deg, #2c705f 0%, #1d4e42 100%) !important;
 border-color: #13352b !important;
 color: #dcfce7 !important;
}
.theme-green .custom-accordion-header:hover {
 background: linear-gradient(180deg, #388979 0%, #225c50 100%) !important;
 border-color: #47a292 !important;
 color: #ffffff !important;
}
.theme-green .custom-accordion-header .accordion-arrow { color: #47a292 !important; }
.theme-green .custom-stats-plaque {
 background: linear-gradient(180deg, #47a292 0%, #2c705f 100%) !important;
 border-color: #1d4e42 !important;
}
.theme-green .custom-stats-plaque .switch-row span { color: #ffffff !important; }
.theme-green .custom-stats-plaque .switch input:checked + .slider { background-color: #2c705f !important; }
.theme-green .card-back #btnSaveCustom,
.theme-green #btn-avatar-upload {
 background: linear-gradient(180deg, #2c705f 0%, #1d4e42 100%) !important;
 border: 1px solid #47a292 !important;
 color: #ffffff !important;
}
.theme-green .card-back #btnSaveCustom:hover:not(:disabled) {
 background: linear-gradient(180deg, #388979 0%, #225c50 100%) !important;
 color: #ffffff !important;
}
.theme-green .card-back .btn-secondary {
 background: linear-gradient(180deg, #1d4e42 0%, #13352b 100%) !important;
 border: 1px solid #2c705f !important;
 color: #47a292 !important;
}
.theme-green .card-back .btn-secondary:hover {
 background: linear-gradient(180deg, #2c705f 0%, #184237 100%) !important;
 color: #dcfce7 !important;
 border-color: #47a292 !important;
}

/* 2. RED / PUNAINEN TEEMA (#8f4954) */
.theme-red .card-back {
 background: linear-gradient(180deg, #ffffff 0%, #FBF4F5 35%, #EBD6D9 70%, #CFA4AB 100%) !important;
 border-color: #8f4954 !important;
 box-shadow: 0 12px 30px rgba(0,0,0,0.65), inset 0 0 0 1px #8f4954 !important;
}
.theme-red .custom-header-card {
 background: linear-gradient(180deg, #8f4954 0%, #68323c 60%, #4a1f26 100%) !important;
 border-color: #8f4954 !important;
 box-shadow: inset 0 0 0 1px #bc6c78, 0 4px 10px rgba(0,0,0,0.4) !important;
}
.theme-red .custom-header-card h3 { color: #fee2e2 !important; text-shadow: 0 0 4px rgba(188, 108, 120, 0.4) !important; }
.theme-red .custom-accordion-header {
 background: linear-gradient(180deg, #8f4954 0%, #68323c 100%) !important;
 border-color: #4a1f26 !important;
 color: #fee2e2 !important;
}
.theme-red .custom-accordion-header:hover {
 background: linear-gradient(180deg, #a95a66 0%, #7d3b47 100%) !important;
 border-color: #bc6c78 !important;
 color: #ffffff !important;
}
.theme-red .custom-accordion-header .accordion-arrow { color: #bc6c78 !important; }
.theme-red .custom-stats-plaque {
 background: linear-gradient(180deg, #bc6c78 0%, #8f4954 100%) !important;
 border-color: #68323c !important;
}
.theme-red .custom-stats-plaque .switch-row span { color: #ffffff !important; }
.theme-red .custom-stats-plaque .switch input:checked + .slider { background-color: #8f4954 !important; }
.theme-red .card-back #btnSaveCustom,
.theme-red #btn-avatar-upload {
 background: linear-gradient(180deg, #8f4954 0%, #68323c 100%) !important;
 border: 1px solid #bc6c78 !important;
 color: #ffffff !important;
}
.theme-red .card-back #btnSaveCustom:hover:not(:disabled) {
 background: linear-gradient(180deg, #a95a66 0%, #7d3b47 100%) !important;
 color: #ffffff !important;
}
.theme-red .card-back .btn-secondary {
 background: linear-gradient(180deg, #68323c 0%, #4a1f26 100%) !important;
 border: 1px solid #8f4954 !important;
 color: #bc6c78 !important;
}
.theme-red .card-back .btn-secondary:hover {
 background: linear-gradient(180deg, #8f4954 0%, #52242c 100%) !important;
 color: #fee2e2 !important;
 border-color: #bc6c78 !important;
}

/* 3. GOLD / KULTA TEEMA (#D4A017) */
.theme-gold .card-back {
  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), inset 0 0 0 1px #D4A017 !important;
}
.theme-gold .custom-header-card {
  background: linear-gradient(180deg, #b45309 0%, #f59e0b 30%, #d97706 60%, #582404 100%) !important;
  border-color: #fef08a !important;
  box-shadow: inset 0 0 0 1px #fef08a, 0 4px 10px rgba(0,0,0,0.4) !important;
}
.theme-gold .custom-header-card h3 { color: #ffffff !important; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9) !important; }
.theme-gold .custom-accordion-header {
  background: linear-gradient(180deg, #b45309 0%, #78350f 100%) !important;
  border-color: #451a03 !important;
  color: #fef08a !important;
}
.theme-gold .custom-accordion-header:hover {
  background: linear-gradient(180deg, #d97706 0%, #92400e 100%) !important;
  border-color: #fde047 !important;
  color: #ffffff !important;
}
.theme-gold .custom-accordion-header .accordion-arrow { color: #fef08a !important; }
.theme-gold .custom-stats-plaque {
  background: linear-gradient(180deg, #fde047 0%, #b45309 100%) !important;
  border-color: #78350f !important;
}
.theme-gold .custom-stats-plaque .switch-row span { color: #2e1102 !important; }
.theme-gold .custom-stats-plaque .switch input:checked + .slider { background-color: #b45309 !important; }
.theme-gold .card-back #btnSaveCustom,
.theme-gold #btn-avatar-upload {
  background: linear-gradient(180deg, #d97706 0%, #92400e 100%) !important;
  border: 1px solid #fef08a !important;
  color: #ffffff !important;
}
.theme-gold .card-back #btnSaveCustom:hover:not(:disabled) {
  background: linear-gradient(180deg, #f59e0b 0%, #b45309 100%) !important;
  color: #ffffff !important;
}
.theme-gold .card-back .btn-secondary {
  background: linear-gradient(180deg, #78350f 0%, #451a03 100%) !important;
  border: 1px solid #d97706 !important;
  color: #fef08a !important;
}
.theme-gold .card-back .btn-secondary:hover {
  background: linear-gradient(180deg, #b45309 0%, #582404 100%) !important;
  color: #ffffff !important;
  border-color: #fef08a !important;
}

/* 4. BLACK / MUSTA TEEMA (#2B2B2B) */
.theme-black .card-back {
  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 .custom-header-card {
  background: linear-gradient(180deg, #404040 0%, #262626 60%, #0a0a0a 100%) !important;
  border-color: #525252 !important;
  box-shadow: inset 0 0 0 1px #a3a3a3, 0 4px 10px rgba(0,0,0,0.5) !important;
}
.theme-black .custom-header-card h3 { color: #ffffff !important; text-shadow: 0 0 4px rgba(255, 255, 255, 0.4) !important; }
.theme-black .custom-accordion-header {
  background: linear-gradient(180deg, #404040 0%, #262626 100%) !important;
  border-color: #171717 !important;
  color: #ffffff !important;
}
.theme-black .custom-accordion-header:hover {
  background: linear-gradient(180deg, #525252 0%, #333333 100%) !important;
  border-color: #a3a3a3 !important;
  color: #ffffff !important;
}
.theme-black .custom-accordion-header .accordion-arrow { color: #a3a3a3 !important; }
.theme-black .custom-stats-plaque {
  background: linear-gradient(180deg, #a3a3a3 0%, #404040 100%) !important;
  border-color: #262626 !important;
}
.theme-black .custom-stats-plaque .switch-row span { color: #ffffff !important; }
.theme-black .custom-stats-plaque .switch input:checked + .slider { background-color: #171717 !important; }
.theme-black .card-back #btnSaveCustom,
.theme-black #btn-avatar-upload {
  background: linear-gradient(180deg, #404040 0%, #171717 100%) !important;
  border: 1px solid #a3a3a3 !important;
  color: #ffffff !important;
}
.theme-black .card-back #btnSaveCustom:hover:not(:disabled) {
  background: linear-gradient(180deg, #525252 0%, #262626 100%) !important;
  color: #ffffff !important;
}
.theme-black .card-back .btn-secondary {
  background: linear-gradient(180deg, #262626 0%, #0a0a0a 100%) !important;
  border: 1px solid #525252 !important;
  color: #e5e5e5 !important;
}
.theme-black .card-back .btn-secondary:hover {
  background: linear-gradient(180deg, #404040 0%, #171717 100%) !important;
  color: #ffffff !important;
  border-color: #a3a3a3 !important;
}

/* 5. BLUE / SININEN TEEMA */
.theme-blue .card-back {
  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), inset 0 0 0 1px #1e40af !important;
}
.theme-blue .custom-header-card {
  background: linear-gradient(180deg, #2563eb 0%, #1d4ed8 60%, #172554 100%) !important;
  border-color: #60a5fa !important;
}
.theme-blue .custom-header-card h3 { color: #dbeafe !important; }
.theme-blue .custom-accordion-header {
  background: linear-gradient(180deg, #2563eb 0%, #1d4ed8 100%) !important;
  border-color: #172554 !important;
  color: #dbeafe !important;
}
.theme-blue .custom-accordion-header:hover {
  background: linear-gradient(180deg, #3b82f6 0%, #1e40af 100%) !important;
  border-color: #60a5fa !important;
  color: #ffffff !important;
}
.theme-blue .custom-accordion-header .accordion-arrow { color: #60a5fa !important; }
.theme-blue .custom-stats-plaque {
  background: linear-gradient(180deg, #93c5fd 0%, #1d4ed8 100%) !important;
  border-color: #172554 !important;
}
.theme-blue .custom-stats-plaque .switch-row span { color: #ffffff !important; }
.theme-blue .card-back #btnSaveCustom,
.theme-blue #btn-avatar-upload {
  background: linear-gradient(180deg, #2563eb 0%, #1d4ed8 100%) !important;
  border: 1px solid #60a5fa !important;
  color: #ffffff !important;
}
.theme-blue .card-back #btnSaveCustom:hover:not(:disabled) {
  background: linear-gradient(180deg, #3b82f6 0%, #1e40af 100%) !important;
  color: #ffffff !important;
}
.theme-blue .card-back .btn-secondary {
  background: linear-gradient(180deg, #1d4ed8 0%, #172554 100%) !important;
  border: 1px solid #2563eb !important;
  color: #dbeafe !important;
}
.theme-blue .card-back .btn-secondary:hover {
  background: linear-gradient(180deg, #2563eb 0%, #1e3a8a 100%) !important;
  color: #ffffff !important;
  border-color: #60a5fa !important;
}

/* 6. SILVER / HOPEA TEEMA */
.theme-silver .card-back {
  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), inset 0 0 0 1px #334155 !important;
}
.theme-silver .custom-header-card {
  background: linear-gradient(180deg, #64748b 0%, #475569 60%, #1e293b 100%) !important;
  border-color: #cbd5e1 !important;
}
.theme-silver .custom-header-card h3 { color: #ffffff !important; }
.theme-silver .custom-accordion-header {
  background: linear-gradient(180deg, #64748b 0%, #475569 100%) !important;
  border-color: #1e293b !important;
  color: #ffffff !important;
}
.theme-silver .custom-accordion-header:hover {
  background: linear-gradient(180deg, #94a3b8 0%, #64748b 100%) !important;
  border-color: #cbd5e1 !important;
  color: #ffffff !important;
}
.theme-silver .custom-accordion-header .accordion-arrow { color: #cbd5e1 !important; }
.theme-silver .custom-stats-plaque {
  background: linear-gradient(180deg, #cbd5e1 0%, #475569 100%) !important;
  border-color: #1e293b !important;
}
.theme-silver .custom-stats-plaque .switch-row span { color: #ffffff !important; }
.theme-silver .card-back #btnSaveCustom,
.theme-silver #btn-avatar-upload {
  background: linear-gradient(180deg, #64748b 0%, #334155 100%) !important;
  border: 1px solid #cbd5e1 !important;
  color: #ffffff !important;
}
.theme-silver .card-back #btnSaveCustom:hover:not(:disabled) {
  background: linear-gradient(180deg, #94a3b8 0%, #475569 100%) !important;
  color: #ffffff !important;
}
.theme-silver .card-back .btn-secondary {
  background: linear-gradient(180deg, #334155 0%, #1e293b 100%) !important;
  border: 1px solid #64748b !important;
  color: #f1f5f9 !important;
}
.theme-silver .card-back .btn-secondary:hover {
  background: linear-gradient(180deg, #475569 0%, #0f172a 100%) !important;
  color: #ffffff !important;
  border-color: #cbd5e1 !important;
}

/* 7. DIAMOND / TIMANTTI TEEMA */
.theme-diamond .card-back {
  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), inset 0 0 0 1px #0369a1 !important;
}
.theme-diamond .custom-header-card {
  background: linear-gradient(180deg, #0284c7 0%, #0369a1 60%, #082f49 100%) !important;
  border-color: #38bdf8 !important;
}
.theme-diamond .custom-header-card h3 { color: #e0f2fe !important; }
.theme-diamond .custom-accordion-header {
  background: linear-gradient(180deg, #0284c7 0%, #0369a1 100%) !important;
  border-color: #082f49 !important;
  color: #e0f2fe !important;
}
.theme-diamond .custom-accordion-header:hover {
  background: linear-gradient(180deg, #38bdf8 0%, #0284c7 100%) !important;
  border-color: #bae6fd !important;
  color: #ffffff !important;
}
.theme-diamond .custom-accordion-header .accordion-arrow { color: #38bdf8 !important; }
.theme-diamond .custom-stats-plaque {
  background: linear-gradient(180deg, #bae6fd 0%, #0369a1 100%) !important;
  border-color: #082f49 !important;
}
.theme-diamond .custom-stats-plaque .switch-row span { color: #ffffff !important; }
.theme-diamond .card-back #btnSaveCustom,
.theme-diamond #btn-avatar-upload {
  background: linear-gradient(180deg, #0284c7 0%, #0369a1 100%) !important;
  border: 1px solid #38bdf8 !important;
  color: #ffffff !important;
}
.theme-diamond .card-back #btnSaveCustom:hover:not(:disabled) {
  background: linear-gradient(180deg, #38bdf8 0%, #0284c7 100%) !important;
  color: #ffffff !important;
}
.theme-diamond .card-back .btn-secondary {
  background: linear-gradient(180deg, #0369a1 0%, #082f49 100%) !important;
  border: 1px solid #0284c7 !important;
  color: #e0f2fe !important;
}
.theme-diamond .card-back .btn-secondary:hover {
  background: linear-gradient(180deg, #0284c7 0%, #0c4a6e 100%) !important;
  color: #ffffff !important;
  border-color: #38bdf8 !important;
}

/* 8. BRONZE / PRONSSI TEEMA */
.theme-bronze .card-back {
  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 #6e3719 !important;
}
.theme-bronze .custom-header-card {
  background: linear-gradient(180deg, #8a4316 0%, #6e2c08 60%, #361202 100%) !important;
  border-color: #d97706 !important;
}
.theme-bronze .custom-header-card h3 { color: #fef08a !important; }
.theme-bronze .custom-accordion-header {
  background: linear-gradient(180deg, #8a4316 0%, #6e2c08 100%) !important;
  border-color: #361202 !important;
  color: #fef08a !important;
}
.theme-bronze .custom-accordion-header:hover {
  background: linear-gradient(180deg, #a14c12 0%, #85300d 100%) !important;
  border-color: #fde0c2 !important;
  color: #ffffff !important;
}
.theme-bronze .custom-accordion-header .accordion-arrow { color: #d97706 !important; }
.theme-bronze .custom-stats-plaque {
  background: linear-gradient(180deg, #d8c8b2 0%, #85300d 100%) !important;
  border-color: #4c1a06 !important;
}
.theme-bronze .custom-stats-plaque .switch-row span { color: #ffffff !important; }
.theme-bronze .card-back #btnSaveCustom,
.theme-bronze #btn-avatar-upload {
  background: linear-gradient(180deg, #b45309 0%, #6e2c08 100%) !important;
  border: 1px solid #fef08a !important;
  color: #ffffff !important;
}
.theme-bronze .card-back #btnSaveCustom:hover:not(:disabled) {
  background: linear-gradient(180deg, #d97706 0%, #8a4316 100%) !important;
  color: #ffffff !important;
}
.theme-bronze .card-back .btn-secondary {
  background: linear-gradient(180deg, #6e2c08 0%, #361202 100%) !important;
  border: 1px solid #8a4316 !important;
  color: #fde0c2 !important;
}
.theme-bronze .card-back .btn-secondary:hover {
  background: linear-gradient(180deg, #8a4316 0%, #4c1a06 100%) !important;
  color: #fef08a !important;
  border-color: #d97706 !important;
}

/* 9. YELLOW / KELTAINEN TEEMA */
.theme-yellow .card-back {
  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), inset 0 0 0 1px #854d0e !important;
}
.theme-yellow .custom-header-card {
  background: linear-gradient(180deg, #ca8a04 0%, #a16207 60%, #422006 100%) !important;
  border-color: #fde047 !important;
}
.theme-yellow .custom-header-card h3 { color: #ffffff !important; }
.theme-yellow .custom-accordion-header {
  background: linear-gradient(180deg, #ca8a04 0%, #a16207 100%) !important;
  border-color: #422006 !important;
  color: #ffffff !important;
}
.theme-yellow .custom-accordion-header:hover {
  background: linear-gradient(180deg, #eab308 0%, #ca8a04 100%) !important;
  border-color: #fde047 !important;
  color: #ffffff !important;
}
.theme-yellow .custom-accordion-header .accordion-arrow { color: #fde047 !important; }
.theme-yellow .custom-stats-plaque {
  background: linear-gradient(180deg, #fde047 0%, #a16207 100%) !important;
  border-color: #422006 !important;
}
.theme-yellow .custom-stats-plaque .switch-row span { color: #ffffff !important; }
.theme-yellow .card-back #btnSaveCustom,
.theme-yellow #btn-avatar-upload {
  background: linear-gradient(180deg, #ca8a04 0%, #a16207 100%) !important;
  border: 1px solid #fde047 !important;
  color: #ffffff !important;
}
.theme-yellow .card-back #btnSaveCustom:hover:not(:disabled) {
  background: linear-gradient(180deg, #eab308 0%, #ca8a04 100%) !important;
  color: #ffffff !important;
}
.theme-yellow .card-back .btn-secondary {
  background: linear-gradient(180deg, #a16207 0%, #422006 100%) !important;
  border: 1px solid #ca8a04 !important;
  color: #fef9c3 !important;
}
.theme-yellow .card-back .btn-secondary:hover {
  background: linear-gradient(180deg, #ca8a04 0%, #713f12 100%) !important;
  color: #ffffff !important;
  border-color: #fde047 !important;
}

/* 10. WINE / VIININPUNAINEN TEEMA (#701C28) */
.theme-wine .card-back {
  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.65), inset 0 0 0 1px #701C28 !important;
}
.theme-wine .custom-header-card {
  background: linear-gradient(180deg, #801b2a 0%, #58121d 60%, #28050c 100%) !important;
  border-color: #701C28 !important;
  box-shadow: inset 0 0 0 1px #f472b6, 0 4px 10px rgba(0,0,0,0.4) !important;
}
.theme-wine .custom-header-card h3 { color: #fce7f3 !important; text-shadow: 0 0 4px rgba(244, 114, 182, 0.4) !important; }
.theme-wine .custom-accordion-header {
  background: linear-gradient(180deg, #701C28 0%, #420B15 100%) !important;
  border-color: #28050c !important;
  color: #fce7f3 !important;
}
.theme-wine .custom-accordion-header:hover {
  background: linear-gradient(180deg, #8c2333 0%, #540e1b 100%) !important;
  border-color: #f472b6 !important;
  color: #ffffff !important;
}
.theme-wine .custom-accordion-header .accordion-arrow { color: #f472b6 !important; }
.theme-wine .custom-stats-plaque {
  background: linear-gradient(180deg, #d89ba4 0%, #701C28 100%) !important;
  border-color: #420B15 !important;
}
.theme-wine .custom-stats-plaque .switch-row span { color: #ffffff !important; }
.theme-wine .custom-stats-plaque .switch input:checked + .slider { background-color: #801b2a !important; }
.theme-wine .card-back #btnSaveCustom,
.theme-wine #btn-avatar-upload {
  background: linear-gradient(180deg, #701C28 0%, #420B15 100%) !important;
  border: 1px solid #f472b6 !important;
  color: #ffffff !important;
}
.theme-wine .card-back #btnSaveCustom:hover:not(:disabled) {
  background: linear-gradient(180deg, #8c2333 0%, #58121d 100%) !important;
  color: #ffffff !important;
}
.theme-wine .card-back .btn-secondary {
  background: linear-gradient(180deg, #420B15 0%, #28050c 100%) !important;
  border: 1px solid #701C28 !important;
  color: #f4d3d8 !important;
}
.theme-wine .card-back .btn-secondary:hover {
  background: linear-gradient(180deg, #701C28 0%, #36070f 100%) !important;
  color: #fce7f3 !important;
  border-color: #f472b6 !important;
}
.theme-wine .card-back select {
  border-color: #701C28 !important;
  background: linear-gradient(180deg, #ffffff 0%, #f4d3d8 100%) !important;
  color: #28050c !important;
}

/* ============================================================
   🃏 KERÄILYKORTIN 3D-KELLUTUS & NOUSTO (FLAT SISÄLTÖ)
   ============================================================ */

.card {
  transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateZ(var(--tz, 0px)) scale(var(--scale, 1));
  transition: transform 0.3s ease-out, box-shadow 0.3s ease-out !important;
  will-change: transform, box-shadow;
}

/* 🌟 PASSIIVINEN ELEGANTTI VALON PYÖRÄHDYS (LEPOTILASSA) */
.card:not(:hover)::after {
  animation: cardAmbientShine 9s ease-in-out infinite;
}

/* Varjo syvenee ja kääntyy kortin kallistuksen mukaan (Aktiivitila) */
.card:hover {
  box-shadow: 
    calc(var(--ry, 0deg) * -2px) 
    calc(var(--rx, 0deg) * -2px + 20px) 
    35px 
    rgba(0, 0, 0, 0.45) !important;
}

.card:hover::after {
  animation: none !important;
  opacity: var(--holo-opacity, 1) !important;
}

/* Toisen pelaajan kortin pehmeä ja maltillinen passiivinen 3D-keinu */
@keyframes playerCardPassiveFloat {
  0%, 100% {
    transform: perspective(1000px) rotateX(1.5deg) rotateY(-1.8deg) translateY(0px) translateZ(3px) scale(1);
  }
  25% {
    transform: perspective(1000px) rotateX(-1.2deg) rotateY(1.5deg) translateY(-3px) translateZ(8px) scale(1.005);
  }
  50% {
    transform: perspective(1000px) rotateX(1.8deg) rotateY(1.2deg) translateY(-1px) translateZ(5px) scale(1.002);
  }
  75% {
    transform: perspective(1000px) rotateX(-1.0deg) rotateY(-2.0deg) translateY(-3.5px) translateZ(9px) scale(1.006);
  }
}

/* Toisen pelaajan kortin pyyhkivä valoheijastus */
@keyframes playerCardPassiveShine {
  0%, 100% {
    opacity: 0.12;
    background: radial-gradient(circle 260px at 20% 20%, rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0.05) 40%, transparent 70%);
  }
  25% {
    opacity: 0.38;
    background: radial-gradient(circle 260px at 80% 30%, rgba(255, 255, 255, 0.45) 0%, rgba(255, 255, 255, 0.08) 40%, transparent 70%);
  }
  50% {
    opacity: 0.15;
    background: radial-gradient(circle 260px at 60% 80%, rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0.05) 40%, transparent 70%);
  }
  75% {
    opacity: 0.42;
    background: radial-gradient(circle 260px at 20% 70%, rgba(255, 255, 255, 0.45) 0%, rgba(255, 255, 255, 0.08) 40%, transparent 70%);
  }
}

/* Erittäin maltillinen micro-liike lepotilassa */
@keyframes cardAmbientFloat {
  0%, 100% {
    transform: perspective(1000px) rotateX(0.8deg) rotateY(-1deg) translateY(0px) translateZ(2px) scale(1);
  }
  50% {
    transform: perspective(1000px) rotateX(-0.8deg) rotateY(1deg) translateY(-2.5px) translateZ(6px) scale(1.004);
  }
}

/* Erittäin pehmeä ja rauhallinen valosäteen pyyhkäisy */
@keyframes cardAmbientShine {
  0%, 100% {
    opacity: 0.04;
    background-position: 20% 20%;
  }
  50% {
    opacity: 0.18;
    background-position: 80% 80%;
  }
}

/* Varmistetaan että sisäpuolen tekstit ja kuvat säilyvät täysin flat-tilassa */
.card-header, 
.card-content,
.card-avatar-lg,
.card-header h2, 
.card-share-btn,
.player-title-tag, 
.global-stats-row,
.level-box, 
.game-ranks-container,
.stat-row {
  transform: none !important;
}

/* Pehmeä valoheijastus kortin pinnassa */
.card::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: radial-gradient(
    circle 260px at var(--mx, 50%) var(--my, 50%),
    rgba(255, 255, 255, 0.28) 0%,
    rgba(255, 255, 255, 0.08) 40%,
    transparent 70%
  ) !important;
  background-size: 200% 200% !important;
  pointer-events: none;
  z-index: 10;
  opacity: var(--holo-opacity, 0);
  transition: opacity 0.3s ease;
  overflow: hidden;
}

/* 🌟 FOIL EFEKTI (Holografinen kimalle & passiivinen lepotilanamAATIO) */
.card.effect-foil::before {
 content: '';
 position: absolute;
 inset: 0;
 border-radius: inherit;
 background: linear-gradient(
   115deg, 
   transparent 20%, 
   rgba(255, 215, 0, 0.30) 35%, 
   rgba(0, 255, 200, 0.25) 45%, 
   rgba(255, 0, 255, 0.30) 55%, 
   rgba(255, 215, 0, 0.30) 65%, 
   transparent 80%
 );
 background-size: 300% 300%;
 background-position: calc(var(--mx, 50%) * 2.5) calc(var(--my, 50%) * 2.5);
 mix-blend-mode: color-dodge; /* Tuo kirkkaat sävyt pintaan alta paistavan teeman päälle */
 pointer-events: none;
 z-index: 10;
 opacity: 0.25; /* Passiivinen lepotila: selkeästi näkyvä kimalle */
 transition: opacity 0.3s ease;
}

.card.effect-foil:not(:hover)::before {
 animation: cardFoilAmbientShine 9s ease-in-out infinite;
}

.card.effect-foil:hover::before {
 animation: none;
 opacity: 0.55; /* Sivistynyt ja hillitty hohto aktiivisesti kallistettaessa */
}

@keyframes cardFoilAmbientShine {
 0%, 100% {
   opacity: 0.20;
   background-position: 20% 20%;
 }
 50% {
   opacity: 0.38;
   background-position: 80% 80%;
 }
}
/* ============================================================
 🎨 LANDING PAGE PELI-IKONIT JA LAATIKKOTYYLIT
 ============================================================ */
.landing-game-icon-wrapper {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  width: 84px !important;
  height: 84px !important;
  margin: 10px auto 16px auto !important;
  border-radius: 50% !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 #404040 !important;
  box-shadow: 
    0 10px 22px rgba(0, 0, 0, 0.8),
    inset 0 0 0 1px #525252,
    inset 0 0 0 3px #121212,
    inset 0 3px 6px rgba(255, 255, 255, 0.15),
    inset 0 -5px 10px rgba(0, 0, 0, 0.9) !important;
  position: relative !important;
  box-sizing: border-box !important;
  transform: perspective(600px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateZ(var(--tz, 0px)) scale(var(--scale, 1)) !important;
  transition: transform 0.22s ease-out, box-shadow 0.22s ease-out !important;
  will-change: transform, box-shadow;
  transform-style: preserve-3d !important;
  cursor: pointer !important;
}

/* Katkoviiva-ura puukehyksen reunalla on poistettu */
.landing-game-icon-wrapper::before {
  display: none !important;
}

/* 📜 SUURENNETTU PERGAMENTTIYMPYRÄ SYVÄLLÄ 3D-VARJOSTUKSELLA (#F5F1E8) */
.landing-game-icon-wrapper::after {
  content: '' !important;
  position: absolute !important;
  top: 10px !important; left: 10px !important; right: 10px !important; bottom: 10px !important;
  border-radius: 50% !important;
  background: #F5F1E8 linear-gradient(180deg, #FFFFFF 0%, #F5F1E8 100%) !important;
  box-shadow: 
    inset 0 3px 6px rgba(0, 0, 0, 0.4), 
    inset 0 -1px 3px rgba(255, 255, 255, 0.7),
    0 2px 6px rgba(0, 0, 0, 0.45) !important;
  border: 1px solid rgba(110, 55, 25, 0.4) !important;
  z-index: 1 !important;
  pointer-events: none !important;
}

.landing-game-icon-wrapper:hover {
  box-shadow: 
    calc(var(--ry, 0deg) * -1px) 
    calc(var(--rx, 0deg) * -1px + 12px) 
    25px 
    rgba(0, 0, 0, 0.5) !important;
}

/* 🎮 IKONI ANIMOITUU KANSSA SAMASSA TAAHDISSA TAUSTAN KANSSA */
.landing-game-icon {
  width: 48px !important;
  height: 48px !important;
  filter: drop-shadow(0 3px 5px rgba(0, 0, 0, 0.3)) !important;
  position: relative !important;
  z-index: 3 !important;
  transform: none !important;
  transition: none !important;
}

/* KIMBLE LANDING PAGE STYLES */
#landing-kimble .rules-card {
  border-color: #2B2B2B !important;
  box-shadow: 
    0 10px 25px rgba(0, 0, 0, 0.65), 
    inset 0 0 0 1px #5b71b0,
    inset 0 0 0 3px #18233f !important;
}
#landing-kimble .rules-card::before {
  border-color: rgba(91, 113, 176, 0.35) !important;
}
#landing-kimble .plaque-rivet {
  background: radial-gradient(circle at 35% 35%, #a5b4fc 0%, #5b71b0 45%, #37467b 85%, #18233f 100%) !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.8), inset 0 1px 1px rgba(255, 255, 255, 0.9) !important;
}
#landing-kimble .rules-card-header {
  border-bottom-color: #37467b !important;
  padding-top: 16px !important;
}
#landing-kimble .rules-card-header h3 {
  color: #37467b !important;
  text-shadow: none !important;
  text-align: center !important;
  margin-top: 4px !important;
}

/* YATZY LANDING PAGE STYLES */
#landing-yatzy .rules-card {
  border-color: #2B2B2B !important;
  box-shadow: 
    0 10px 25px rgba(0, 0, 0, 0.65), 
    inset 0 0 0 1px #bd81b9,
    inset 0 0 0 3px #3b1839 !important;
}
#landing-yatzy .rules-card::before {
  border-color: rgba(189, 129, 185, 0.35) !important;
}
#landing-yatzy .plaque-rivet {
  background: radial-gradient(circle at 35% 35%, #fce7f3 0%, #bd81b9 45%, #8f498a 85%, #3b1839 100%) !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.8), inset 0 1px 1px rgba(255, 255, 255, 0.9) !important;
}
#landing-yatzy .rules-card-header {
  border-bottom-color: #8f498a !important;
  padding-top: 16px !important;
}
#landing-yatzy .rules-card-header h3 {
  color: #8f498a !important;
  text-shadow: none !important;
  text-align: center !important;
}

/* ALIAS LANDING PAGE STYLES */
#landing-alias .rules-card {
  border-color: #2B2B2B !important;
  box-shadow: 
    0 10px 25px rgba(0, 0, 0, 0.65), 
    inset 0 0 0 1px #bc6c78,
    inset 0 0 0 3px #3d1820 !important;
}
#landing-alias .rules-card::before {
  border-color: rgba(188, 108, 120, 0.35) !important;
}
#landing-alias .plaque-rivet {
  background: radial-gradient(circle at 35% 35%, #fca5a5 0%, #bc6c78 45%, #8f4954 85%, #3d1820 100%) !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.8), inset 0 1px 1px rgba(255, 255, 255, 0.9) !important;
}
#landing-alias .rules-card-header {
  border-bottom-color: #8f4954 !important;
  padding-top: 16px !important;
}
#landing-alias .rules-card-header h3 {
  color: #8f4954 !important;
  text-shadow: none !important;
  text-align: center !important;
  margin-top: 4px !important;
}

/* AFRIKAN TÄHTI LANDING PAGE STYLES */
#landing-afrikan_tahti .rules-card {
  border-color: #2B2B2B !important;
  box-shadow: 
    0 10px 25px rgba(0, 0, 0, 0.65), 
    inset 0 0 0 1px #fef08a,
    inset 0 0 0 3px #451a03 !important;
}
#landing-afrikan_tahti .rules-card::before {
  border-color: rgba(254, 240, 138, 0.35) !important;
}
#landing-afrikan_tahti .plaque-rivet {
  background: radial-gradient(circle at 35% 35%, #fef08a 0%, #f1cb64 45%, #d97706 85%, #451a03 100%) !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.8), inset 0 1px 1px rgba(255, 255, 255, 0.9) !important;
}
#landing-afrikan_tahti .rules-card-header {
  border-bottom-color: #f1cb64 !important;
  padding-top: 16px !important;
}
#landing-afrikan_tahti .rules-card-header h3 {
  color: #f1cb64 !important;
  text-shadow: none !important;
  text-align: center !important;
  margin-top: 4px !important;
}

/* ============================================================
   🔴 KIMBLE-DIVISIOONIEN TAUSTAVESILEIMA (WATERMARK STAMP)
   ============================================================ */
.card-watermark {
  position: absolute;
  top: -30px;
  left: 50%;
  right: auto;
  width: 380px;
  max-width: 100%;
  height: 380px;
  pointer-events: none;
  z-index: 2;
  transform: translateX(-50%) rotate(315deg);
  opacity: 0;
  transition: opacity 0.3s ease, color 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* Varmistetaan että kortin alaosalla on aina sivistynyt vähimmäiskorkeus,
   vaikka kaikki .stat-row -rivit olisivat piilotettuina */
.card-content { 
  position: relative; 
  z-index: 2; 
  min-height: 60px; /* KORJATTU: Estää kortin runkoa romahtamasta täysin kasaan */
}

.card-watermark svg {
  width: 100%;
  height: 100%;
}

/* Näytetään leima ainoastaan Kimble-divisioonien korttiteemoissa */
.theme-bronze .card-watermark,
.theme-silver .card-watermark,
.theme-gold .card-watermark,
.theme-diamond .card-watermark {
  opacity: 0.035; /* Muutettu selkeästi läpinäkyvämmäksi (0.065 -> 0.035) hienovaraisen ilmeen saavuttamiseksi */
}

/* Divisioonakohtainen värisävy leimalle */
.theme-bronze .card-watermark { color: #b45309; }
.theme-silver .card-watermark { color: #475569; }
.theme-gold .card-watermark { color: #d97706; }
.theme-diamond .card-watermark { color: #0284c7; }

/* 🍷 VIININPUNAINEN TEEMA: Punainen viinilasi -vesileima */
.theme-wine .card-watermark {
  opacity: 0.05 !important;
  color: #801b2a !important;
}
.theme-wine .card-watermark svg {
  display: none !important;
}
.theme-wine .card-watermark::before {
  content: '' !important;
  width: 100% !important;
  height: 100% !important;
  background-color: currentColor !important;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 22h8'/%3E%3Cpath d='M12 15v7'/%3E%3Cpath d='M12 15a7 7 0 0 0 7-7V3H5v5a7 7 0 0 0 7 7z'/%3E%3Cpath d='M5 8h14'/%3E%3C/svg%3E") no-repeat center / contain !important;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 22h8'/%3E%3Cpath d='M12 15v7'/%3E%3Cpath d='M12 15a7 7 0 0 0 7-7V3H5v5a7 7 0 0 0 7 7z'/%3E%3Cpath d='M5 8h14'/%3E%3C/svg%3E") no-repeat center / contain !important;
}

.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,
.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;
}

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

.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,
#tab-profiili .rules-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;
}

/* 🍻 SARJATAULUKKO-PLAKAATIN BRÄNDIPUUPROFIILI (#2B2B2B) JA PELIKOHTAISET REUNUKSET */
.app-container .ranking-header-card,
.app-container[data-theme="general"] .ranking-header-card,
.ranking-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;
}

/* Polttokuvioitu / veistetty sisäkehikko */
.ranking-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;
}

/* Sarjataulukko-plakaatin niitit brändiväriin #2B2B2B */
.ranking-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;
}

/* Pelikohtaiset reunus- ja katkoviivavärit kaikille yläplakaateille */
.app-container[data-theme="kimble"] .rules-header-card,
.app-container[data-theme="kimble"] .ranking-header-card,
.app-container[data-theme="kimble"] .report-header-card,
.app-container[data-theme="kimble"] .profile-header-card,
.app-container[data-theme="kimble"] .feed-header-card {
  border: 3px solid #37467b !important;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.8), inset 0 0 0 1px #37467b, inset 0 0 0 3px #121212, inset 0 -8px 18px rgba(0, 0, 0, 0.95) !important;
}
.app-container[data-theme="kimble"] .rules-header-card::before,
.app-container[data-theme="kimble"] .ranking-header-card::before,
.app-container[data-theme="kimble"] .report-header-card::before,
.app-container[data-theme="kimble"] .profile-header-card::before,
.app-container[data-theme="kimble"] .feed-header-card::before {
  border-color: #37467b !important;
}

.app-container[data-theme="yatzy"] .rules-header-card,
.app-container[data-theme="yatzy"] .ranking-header-card,
.app-container[data-theme="yatzy"] .report-header-card,
.app-container[data-theme="yatzy"] .profile-header-card,
.app-container[data-theme="yatzy"] .feed-header-card {
  border: 3px solid #8f498a !important;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.8), inset 0 0 0 1px #8f498a, inset 0 0 0 3px #121212, inset 0 -8px 18px rgba(0, 0, 0, 0.95) !important;
}
.app-container[data-theme="yatzy"] .rules-header-card::before,
.app-container[data-theme="yatzy"] .ranking-header-card::before,
.app-container[data-theme="yatzy"] .report-header-card::before,
.app-container[data-theme="yatzy"] .profile-header-card::before,
.app-container[data-theme="yatzy"] .feed-header-card::before {
  border-color: #8f498a !important;
}

.app-container[data-theme="alias"] .rules-header-card,
.app-container[data-theme="alias"] .ranking-header-card,
.app-container[data-theme="alias"] .report-header-card,
.app-container[data-theme="alias"] .profile-header-card,
.app-container[data-theme="alias"] .feed-header-card {
  border: 3px solid #8f4954 !important;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.8), inset 0 0 0 1px #8f4954, inset 0 0 0 3px #121212, inset 0 -8px 18px rgba(0, 0, 0, 0.95) !important;
}
.app-container[data-theme="alias"] .rules-header-card::before,
.app-container[data-theme="alias"] .ranking-header-card::before,
.app-container[data-theme="alias"] .report-header-card::before,
.app-container[data-theme="alias"] .profile-header-card::before,
.app-container[data-theme="alias"] .feed-header-card::before {
  border-color: #8f4954 !important;
}

.app-container[data-theme="afrikan_tahti"] .rules-header-card,
.app-container[data-theme="afrikan_tahti"] .ranking-header-card,
.app-container[data-theme="afrikan_tahti"] .report-header-card,
.app-container[data-theme="afrikan_tahti"] .profile-header-card,
.app-container[data-theme="afrikan_tahti"] .feed-header-card {
  border: 3px solid #f1cb64 !important;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.8), inset 0 0 0 1px #f1cb64, inset 0 0 0 3px #121212, inset 0 -8px 18px rgba(0, 0, 0, 0.95) !important;
}
.app-container[data-theme="afrikan_tahti"] .rules-header-card::before,
.app-container[data-theme="afrikan_tahti"] .ranking-header-card::before,
.app-container[data-theme="afrikan_tahti"] .report-header-card::before,
.app-container[data-theme="afrikan_tahti"] .profile-header-card::before,
.app-container[data-theme="afrikan_tahti"] .feed-header-card::before {
  border-color: #f1cb64 !important;
}

/* Kolmiulotteiset messinkipultit kulmissa (Silotellut & täysin pyöreät 3D-niitit) */
.plaque-rivet {
  position: absolute !important;
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
  background: radial-gradient(circle at 35% 35%, #fff5aa 0%, #f59e0b 45%, #78350f 85%, #2e1102 100%) !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.75), inset 0 1px 1px rgba(255, 255, 255, 0.85) !important;
  border: none !important;
  z-index: 5 !important;
  pointer-events: none !important;
}
.rivet-tl { top: 10px !important; left: 10px !important; }
.rivet-tr { top: 10px !important; right: 10px !important; }
.rivet-bl { bottom: 10px !important; left: 10px !important; }
.rivet-br { bottom: 10px !important; right: 10px !important; }

/* Otsikon ja tekstien kulta- ja messinkityylit (Säilyttää lämpimän keltaisen ja hillityn hohdon teemasta riippumatta) */
.app-container .ranking-header-card h2,
.app-container[data-theme="kimble"] .ranking-header-card h2,
.app-container[data-theme="yatzy"] .ranking-header-card h2,
.app-container[data-theme="alias"] .ranking-header-card h2,
.app-container[data-theme="afrikan_tahti"] .ranking-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;
}

.app-container .ranking-header-card label,
.app-container[data-theme="kimble"] .ranking-header-card label,
.app-container[data-theme="yatzy"] .ranking-header-card label,
.app-container[data-theme="alias"] .ranking-header-card label,
.app-container[data-theme="afrikan_tahti"] .ranking-header-card label {
 color: #F5F1E8 !important;
 font-family: 'Oswald', sans-serif !important;
 font-size: 10px !important;
 font-weight: 700 !important;
 letter-spacing: 0.8px !important;
 text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8) !important;
}

/* Hakukentät ja pudotusvalikot pergamenttisävyissä (#F5F1E8) */
.app-container .ranking-header-card input,
.app-container .ranking-header-card select,
.app-container[data-theme="kimble"] .ranking-header-card input,
.app-container[data-theme="kimble"] .ranking-header-card select {
  background: #F5F1E8 !important;
  border: 1.5px solid #bdab95 !important;
  color: #2B2B2B !important;
  font-weight: 600 !important;
  box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0.15), 0 2px 4px rgba(0, 0, 0, 0.3) !important;
  border-radius: 7px !important;
}
/* GENERAL-TEEMAN (BEER TANK) NAVI-NESTE */
.app-container[data-theme="general"] .nav-tabs {
  background: linear-gradient(180deg, #1a0b04 0px, #1a0b04 9px, rgba(254, 240, 138, 0.3) 9px, #b45309 25px, #78350f 65%, #3d2314 100%) !important;
  border-top: none !important;
  border-bottom-color: #261208 !important;
}
/* ============================================================
   📝 RAPORTOINTISIVU - PUBITEEMAN KORTIT & SYÖTTÖELEMENTIT
   ============================================================ */

.report-title-box,
.profile-title-box,
.feed-title-box {
  text-align: center;
}

.rules-header-card h2,
.ranking-header-card h2,
.report-header-card h2,
.profile-header-card h2,
.feed-header-card h2,
.app-container .rules-header-card h2,
.app-container .ranking-header-card h2,
.app-container .report-header-card h2,
.app-container .profile-header-card h2,
.app-container .feed-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,
.ranking-subtitle,
.report-subtitle,
.profile-subtitle,
.feed-subtitle {
  display: block !important;
  font-family: 'Oswald', sans-serif !important;
  font-size: 9.5px !important;
  font-weight: 700 !important;
  letter-spacing: 2px !important;
  color: #F5F1E8 !important;
  text-transform: uppercase !important;
  margin-top: 2px !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9) !important;
}

.app-container[data-theme="kimble"] .report-subtitle { color: #9ab0e5 !important; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9) !important; }
.app-container[data-theme="yatzy"] .report-subtitle { color: #bd81b9 !important; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9) !important; }
.app-container[data-theme="alias"] .report-subtitle { color: #cfa4ab !important; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9) !important; }
.app-container[data-theme="afrikan_tahti"] .report-subtitle { color: #fef08a !important; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9) !important; }

.report-field-label {
  font-family: 'Oswald', sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  color: #2B2B2B !important;
  display: block !important;
  margin-bottom: 4px !important;
  letter-spacing: 0.5px !important;
  text-transform: uppercase !important;
}

.report-input,
.match-drink,
.app-container .report-input,
.app-container[data-theme="kimble"] .report-input,
.app-container[data-theme="yatzy"] .report-input,
.app-container[data-theme="alias"] .report-input,
.app-container[data-theme="afrikan_tahti"] .report-input {
  background: #F5F1E8 linear-gradient(180deg, #FFFFFF 0%, #F5F1E8 100%) !important;
  border: 1.5px solid #2B2B2B !important;
  color: #2B2B2B !important;
  font-weight: 600 !important;
  box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0.12) !important;
  border-radius: 8px !important;
  padding: 9px 10px !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 13px !important;
  box-sizing: border-box !important;
  outline: none !important;
}

.report-input:focus,
.match-drink:focus {
  border-color: #2B2B2B !important;
  box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0.15), 0 0 5px rgba(43, 43, 43, 0.3) !important;
}

/* Julkinen ottelu -laatikko */
.public-match-box,
.app-container[data-theme="kimble"] .public-match-box,
.app-container[data-theme="yatzy"] .public-match-box,
.app-container[data-theme="alias"] .public-match-box,
.app-container[data-theme="afrikan_tahti"] .public-match-box {
  margin-bottom: 5px !important;
  background: #F5F1E8 linear-gradient(180deg, #FFFFFF 0%, #F5F1E8 100%) !important;
  padding: 12px 14px !important;
  border-radius: 10px !important;
  border: 1.5px solid #2B2B2B !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 2px 5px rgba(0, 0, 0, 0.08) !important;
}

.public-info-btn,
.app-container[data-theme="kimble"] .public-info-btn,
.app-container[data-theme="yatzy"] .public-info-btn,
.app-container[data-theme="alias"] .public-info-btn,
.app-container[data-theme="afrikan_tahti"] .public-info-btn {
  background: #2B2B2B linear-gradient(180deg, #3A3A3A 0%, #2B2B2B 100%) !important;
  border: 1px solid #2B2B2B !important;
  border-radius: 50% !important;
  width: 20px !important;
  height: 20px !important;
  font-family: 'Oswald', sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  color: #F5F1E8 !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4) !important;
}

.public-info-content {
  font-size: 11px !important;
  background: #F5F1E8 !important;
  border-left: 3px solid #2B2B2B !important;
  padding: 10px 12px !important;
  margin-top: 10px !important;
  color: #2B2B2B !important;
  border-radius: 0 8px 8px 0 !important;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.05) !important;
  line-height: 1.4 !important;
}

/* Sijoituslohkot ja metallipainikkeet */
.rank-block {
  background: #F5F1E8 linear-gradient(180deg, #FFFFFF 0%, #F5F1E8 100%) !important;
  border: 1.5px solid #2B2B2B !important;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.8) !important;
  border-radius: 10px !important;
  padding: 14px !important;
  margin-bottom: 12px !important;
  position: relative;
}

/* Raportointisivun niitit & lähetyspainike */
#tab-raportoi .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;
}

#submitMatchBtn,
#tab-raportoi .btn-submit {
  background: #2B2B2B linear-gradient(180deg, #3A3A3A 0%, #2B2B2B 100%) !important;
  color: #F5F1E8 !important;
  border: 1px solid #2B2B2B !important;
}

#submitMatchBtn:hover:not(:disabled),
#tab-raportoi .btn-submit:hover:not(:disabled) {
  background: linear-gradient(180deg, #484848 0%, #333333 100%) !important;
  color: #FFFFFF !important;
}

.rank-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

/* 3D Metalliset sijoitusbadget (Kulta, Hopea, Pronssi, Puu) */
.rank-badge {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 32px !important;
  height: 32px !important;
  padding: 0 6px !important;
  border-radius: 8px !important;
  font-family: 'Oswald', sans-serif !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px !important;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.4) !important;
  box-sizing: border-box !important;
  flex-shrink: 0 !important;
}

.rank-badge.rank-1 {
  background: linear-gradient(180deg, #b45309 0%, #6e2a04 100%) !important;
  border: 1.5px solid #fcd34d !important;
  color: #fef08a !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9) !important;
}

.rank-badge.rank-2 {
  background: linear-gradient(180deg, #475569 0%, #1e293b 100%) !important;
  border: 1.5px solid #94a3b8 !important;
  color: #f8fafc !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9) !important;
}

.rank-badge.rank-3 {
  background: linear-gradient(180deg, #a14c12 0%, #571e05 100%) !important;
  border: 1.5px solid #d97706 !important;
  color: #ffedd5 !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9) !important;
}

.rank-badge.rank-4 {
  background: linear-gradient(180deg, #3d2314 0%, #1d0f07 100%) !important;
  border: 1.5px solid #8c6246 !important;
  color: #e5d6c3 !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9) !important;
}
/* ============================================================
   🍻 ETUSIVUN UUDISTETUT PLAKAATIT JA BOKSIT (LANDING PAGE)
   ============================================================ */


   /* TERVETULOA-PLAKAATI (BRÄNDINMUKAINEN #2B2B2B JA #F5F1E8) */
.landing-header-card {
  padding: 20px 16px 16px 16px !important;
  margin: 10px 10px 12px 10px !important;
  background-color: #2B2B2B !important;
  background-image: 
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.02) 0px, rgba(255, 255, 255, 0.02) 1px, transparent 1px, transparent 6px),
    repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.25) 0px, rgba(0, 0, 0, 0.25) 2px, transparent 2px, transparent 4px),
    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.85),
    inset 0 0 0 1px #F5F1E8,
    inset 0 0 0 3px #171717,
    inset 0 -8px 20px rgba(0, 0, 0, 0.95) !important;
  position: relative !important;
  z-index: 20 !important;
  box-sizing: border-box !important;
  text-align: center !important;
}

.landing-header-card::before {
  content: '';
  position: absolute;
  top: 6px; left: 6px; right: 6px; bottom: 6px;
  border: 1px dashed #2B2B2B !important;
  border-radius: 8px !important;
  pointer-events: none !important;
}

.landing-header-card h1,
.landing-header-card h2 {
  font-family: 'Oswald', sans-serif !important;
  font-size: 22px !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  margin: 0 !important;
  color: #F5F1E8 !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9) !important;
}

.landing-header-subtitle {
  font-family: 'Oswald', sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 1.5px !important;
  color: #F5F1E8 !important;
  text-transform: uppercase !important;
  margin-top: 3px !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9) !important;
}

/* ESITTELY- JA LIITTYMISBOKSI (VIRALLINEN PERGAMENTTI #F5F1E8 & #2B2B2B) */
.landing-sub-card {
  background: #F5F1E8 linear-gradient(180deg, #FFFFFF 0%, #F5F1E8 100%) !important;
  border: 1.5px solid #2B2B2B !important;
  border-radius: 12px !important;
  padding: 16px 16px !important;
  margin: 0 10px 14px 10px !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15) !important;
  text-align: center !important;
  box-sizing: border-box !important;
}

/* 🪵 KETTINGISSÄ ROIKKUVAT PLAKAATIT & 3D METALLIKETJU */
.hanging-signs-row {
  display: flex !important;
  flex-direction: row !important;
  justify-content: center !important;
  align-items: flex-start !important;
  gap: 6px !important;
  margin: -2px 10px 10px 10px !important;
  position: relative !important;
  z-index: 15 !important;
}

.hanging-sign-wrapper {
  position: relative !important;
  flex: 1 !important;
  max-width: 145px !important;
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  transform-origin: top center !important;
  will-change: transform;
}

/* 🍃 PASSIIVINEN ORGAANINEN HEILUMISANIMAATIO */
@keyframes gentleSway1 {
  0%, 100% { transform: rotate(-2.2deg); }
  50% { transform: rotate(1.6deg); }
}

@keyframes gentleSway2 {
  0%, 100% { transform: rotate(1.8deg) translateY(1px); }
  40% { transform: rotate(-1.5deg) translateY(0px); }
  75% { transform: rotate(0.9deg) translateY(1.5px); }
}

@keyframes gentleSway3 {
  0%, 100% { transform: rotate(-1.0deg); }
  60% { transform: rotate(2.2deg); }
}

/* 🪵 KYLTTIKORTIEN VARJON ANIMAATIOT */
@keyframes boardSway1 {
  0%, 100% {
    box-shadow: 
      2.5px 5.5px 10px rgba(0, 0, 0, 0.50),
      inset -1px 3px 5px -1px rgba(0, 0, 0, 0.32),
      inset 0 -1px 3px rgba(0, 0, 0, 0.3) !important;
  }
  50% {
    box-shadow: 
      -2px 5px 9px rgba(0, 0, 0, 0.45),
      inset 1px 3px 5px -1px rgba(0, 0, 0, 0.28),
      inset 0 -1px 3px rgba(0, 0, 0, 0.3) !important;
  }
}

@keyframes boardSway2 {
  0%, 100% {
    box-shadow: 
      -2.2px 5.5px 10px rgba(0, 0, 0, 0.50),
      inset 1px 3px 5px -1px rgba(0, 0, 0, 0.3),
      inset 0 -1px 3px rgba(0, 0, 0, 0.3) !important;
  }
  40% {
    box-shadow: 
      2px 4.8px 9px rgba(0, 0, 0, 0.44),
      inset -1px 3px 5px -1px rgba(0, 0, 0, 0.28),
      inset 0 -1px 3px rgba(0, 0, 0, 0.3) !important;
  }
  75% {
    box-shadow: 
      -1.2px 5.2px 9.5px rgba(0, 0, 0, 0.47),
      inset 0.8px 3px 5px -1px rgba(0, 0, 0, 0.3),
      inset 0 -1px 3px rgba(0, 0, 0, 0.3) !important;
  }
}

@keyframes boardSway3 {
  0%, 100% {
    box-shadow: 
      1.5px 5px 9.5px rgba(0, 0, 0, 0.46),
      inset -0.8px 3px 5px -1px rgba(0, 0, 0, 0.29),
      inset 0 -1px 3px rgba(0, 0, 0, 0.3) !important;
  }
  60% {
    box-shadow: 
      -2.8px 5.8px 11px rgba(0, 0, 0, 0.52),
      inset 1.5px 3.5px 5px -1px rgba(0, 0, 0, 0.33),
      inset 0 -1px 3px rgba(0, 0, 0, 0.3) !important;
  }
}

.hanging-sign-wrapper.sign-1 {
  animation: gentleSway1 5.8s ease-in-out infinite !important;
}

.hanging-sign-wrapper.sign-1 .wooden-sign-board {
  animation: boardSway1 5.8s ease-in-out infinite !important;
}

.hanging-sign-wrapper.sign-2 {
  animation: gentleSway2 4.3s ease-in-out infinite 1.4s !important;
}

.hanging-sign-wrapper.sign-2 .wooden-sign-board {
  animation: boardSway2 4.3s ease-in-out infinite 1.4s !important;
}

.hanging-sign-wrapper.sign-3 {
  animation: gentleSway3 6.6s ease-in-out infinite 0.3s !important;
}

.hanging-sign-wrapper.sign-3 .wooden-sign-board {
  animation: boardSway3 6.6s ease-in-out infinite 0.3s !important;
}

/* ⛓️ REALISTISET 3D METALLIKETJUT */
.chain-connector {
  position: absolute !important;
  top: -28px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  z-index: 12 !important;
  pointer-events: none !important;
}

.chain-connector.left { left: 4px !important; }
.chain-connector.right { right: 4px !important; }

.chain-connector::before {
  content: '' !important;
  width: 6px !important;
  height: 6px !important;
  border-radius: 50% !important;
  border: 1px solid #171717 !important;
  background: radial-gradient(circle at 35% 35%, #ffffff 0%, #F5F1E8 45%, #2B2B2B 80%, #171717 100%) !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.8) !important;
  margin-bottom: -2px !important;
  flex-shrink: 0 !important;
  position: relative !important;
  z-index: 3 !important;
}

.chain-connector::after {
  content: '' !important;
  width: 6px !important;
  height: 6px !important;
  border-radius: 50% !important;
  border: 1px solid #171717 !important;
  background: radial-gradient(circle at 35% 35%, #ffffff 0%, #F5F1E8 45%, #2B2B2B 80%, #171717 100%) !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.8) !important;
  margin-top: -2px !important;
  flex-shrink: 0 !important;
  position: relative !important;
  z-index: 3 !important;
}

.chain-link {
  width: 5px !important;
  height: 7px !important;
  border-radius: 2.5px !important;
  border: 1px solid #171717 !important;
  background: linear-gradient(135deg, #ffffff 0%, #F5F1E8 35%, #2B2B2B 75%, #171717 100%) !important;
  box-shadow: 
    0 1px 2px rgba(0, 0, 0, 0.85),
    inset 0 0.8px 1px rgba(255, 255, 255, 0.95) !important;
  margin-bottom: -3px !important;
  box-sizing: border-box !important;
  position: relative !important;
  z-index: 1 !important;
  flex-shrink: 0 !important;
}

.chain-link.cross {
  width: 3px !important;
  height: 5px !important;
  border-radius: 1.5px !important;
  border: 1px solid #171717 !important;
  background: linear-gradient(90deg, #2B2B2B 0%, #F5F1E8 50%, #171717 100%) !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.9) !important;
  margin-bottom: -3px !important;
  z-index: 2 !important;
  flex-shrink: 0 !important;
}

/* 🪵 PLAKAATTI (BRÄNDI #2B2B2B) */
.wooden-sign-board {
  width: 100% !important;
  padding: 6px 12px 5px 12px !important;
  min-height: 42px !important;
  background-color: #2B2B2B !important;
  background-image: 
    repeating-linear-gradient(92deg, rgba(255, 255, 255, 0.02) 0px, rgba(255, 255, 255, 0.02) 1px, transparent 1px, transparent 5px),
    repeating-linear-gradient(88deg, rgba(0, 0, 0, 0.2) 0px, rgba(0, 0, 0, 0.2) 2px, transparent 2px, transparent 8px),
    linear-gradient(180deg, #3A3A3A 0%, #2B2B2B 60%, #171717 100%) !important;
  border: 1.5px solid #2B2B2B !important;
  box-shadow: 
    0 5px 10px rgba(0, 0, 0, 0.48),
    inset 0 3px 5px -1px rgba(0, 0, 0, 0.3),
    inset 0 -1px 3px rgba(0, 0, 0, 0.3) !important;
  position: relative !important;
  box-sizing: border-box !important;
  text-align: center !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 1px !important;
}

.wooden-sign-board::before {
  display: none !important;
}

.sign-1 .wooden-sign-board {
  border-radius: 9px 3px 11px 4px / 4px 10px 3px 8px !important;
}
.sign-2 .wooden-sign-board {
  border-radius: 4px 11px 5px 10px / 9px 4px 8px 3px !important;
}
.sign-3 .wooden-sign-board {
  border-radius: 10px 4px 8px 5px / 3px 9px 4px 11px !important;
}

.sign-question {
  font-family: 'Inter', sans-serif !important;
  font-size: 8.5px !important;
  color: #F5F1E8 !important;
  font-weight: 700 !important;
  line-height: 1.15 !important;
  letter-spacing: 0.1px !important;
  text-shadow: none !important;
}

.sign-answer {
  font-family: 'Oswald', sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  color: #F5F1E8 !important;
  letter-spacing: 1px !important;
  text-shadow: none !important;
}

.qa-summary {
  font-size: 12px !important;
  color: #2B2B2B !important;
  font-weight: 600 !important;
  line-height: 1.45 !important;
  margin: 0 0 12px 0 !important;
  text-align: center !important;
}

.landing-intro-text {
  font-size: 12.5px !important;
  color: #2B2B2B !important;
  line-height: 1.55 !important;
  margin: 0 0 14px 0 !important;
}

.landing-welcome-box {
  background: #F5F1E8 !important;
  padding: 10px 12px !important;
  border-radius: 8px !important;
  border: 1px solid #2B2B2B !important;
  font-weight: 600 !important;
  font-size: 12px !important;
  color: #2B2B2B !important;
}

/* SIIS MIKÄ BAARIPELILIIGA? -KORTTI (#F5F1E8) */
.landing-info-card {
  background: #F5F1E8 linear-gradient(180deg, #FFFFFF 0%, #F5F1E8 100%) !important;
  border: 1.5px solid #2B2B2B !important;
  border-radius: 12px !important;
  padding: 16px 16px !important;
  margin: 0 10px 15px 10px !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15) !important;
  box-sizing: border-box !important;
}

.landing-info-card h3 {
  font-family: 'Oswald', sans-serif !important;
  font-size: 17px !important;
  color: #2B2B2B !important;
  margin: 0 0 8px 0 !important;
  text-align: center !important;
  text-transform: uppercase !important;
  letter-spacing: 0.8px !important;
  border-bottom: 1.5px dashed #2B2B2B !important;
  padding-bottom: 6px !important;
}

.landing-info-main {
  font-size: 12px !important;
  color: #2B2B2B !important;
  line-height: 1.5 !important;
  margin: 0 0 12px 0 !important;
  text-align: center !important;
}

.landing-features-grid {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  font-size: 11.5px !important;
  color: #2B2B2B !important;
  margin-bottom: 12px !important;
}

.feature-item {
  display: flex !important;
  gap: 8px !important;
  align-items: flex-start !important;
  line-height: 1.4 !important;
}

.feature-icon {
  font-size: 15px !important;
  line-height: 1 !important;
  flex-shrink: 0 !important;
  margin-top: 1px !important;
}

.feature-item strong {
  color: #2B2B2B !important;
}

.landing-community-text {
  text-align: center !important;
  color: #2B2B2B !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  margin: 0 !important;
  line-height: 1.45 !important;
}
/* ============================================================
   ✍️ UUTISKIRJOITTIMEN TEKSTINMUOTOILUTYÖKALUT
   ============================================================ */
.news-editor-toolbar {
  display: flex;
  align-items: center;
  gap: 4px;
  background: #ebdcc9;
  border: 1px solid #c8baa6;
  border-bottom: none;
  border-radius: 8px 8px 0 0;
  padding: 4px 8px;
}

.news-toolbar-btn {
  background: #ffffff;
  border: 1px solid #bdab95;
  border-radius: 4px;
  color: #2B2B2B;
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 8px;
  cursor: pointer;
  transition: all 0.15s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 26px;
  height: 24px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

.news-toolbar-btn:hover {
  background: #f5ece0;
  border-color: #8c6246;
  color: #2B2B2B;
}

.news-toolbar-sep {
  color: #bdab95;
  font-size: 12px;
  margin: 0 4px;
  user-select: none;
}

.news-editor-area {
  min-height: 90px;
  max-height: 250px;
  overflow-y: auto;
  background: #ffffff !important;
  border-radius: 0 0 8px 8px !important;
  border-top: 1px solid #c8baa6 !important;
  outline: none;
  line-height: 1.5;
}

.news-editor-area[contenteditable="true"]:empty::before {
  content: attr(data-placeholder);
  color: #8c7362;
  font-style: italic;
}

/* ============================================================
   📰 UUTISARTIKKELIKORTIT (NEWS & CHANGELOG CARDS)
   ============================================================ */
.news-article-card {
  background: #fdfbf7;
  border: 1px solid #c8baa6;
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 12px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

.news-article-card:last-child {
  margin-bottom: 0;
}

.news-article-title {
  font-family: 'Oswald', sans-serif;
  font-size: 18px;
  font-weight: 700;
  color: #2B2B2B;
  margin: 0 0 4px 0;
  line-height: 1.25;
  letter-spacing: 0.5px;
}

.news-article-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  padding-bottom: 6px;
  border-bottom: 1px dashed #e2d4c1;
}

.news-category-badge {
  display: inline-block;
  font-family: 'Oswald', sans-serif;
  font-size: 7.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 1px 4px;
  border-radius: 3px;
  line-height: 1.1;
  background: #2E5E4E;
  color: #ffffff;
}

.news-category-badge.badge-uutinen {
  background: #2E5E4E;
  color: #ffffff;
}

.news-category-badge.badge-changelog {
  background: #0284c7;
  color: #ffffff;
}

.news-category-badge.badge-tiedote {
  background: #b45309;
  color: #ffffff;
}

.news-category-badge.badge-tapahtuma {
  background: #7A2E3A;
  color: #ffffff;
}

.news-article-date {
  font-size: 10px;
  color: #8c7362;
  font-weight: 600;
}

.news-article-content {
  font-size: 11.5px;
  color: #2B2B2B;
  line-height: 1.55;
  word-break: break-word;
}

.news-article-content font[size="5"] { font-size: 16px !important; }
.news-article-content font[size="3"] { font-size: 11.5px !important; }
.news-article-content font[size="1"] { font-size: 10px !important; }

/* ============================================================
   🤝 KAVERIPYYNNÖN LÄHETYSANIMAATIO
   ============================================================ */
@keyframes friendReqPop {
  0% {
    transform: scale(0.9);
    opacity: 0.7;
  }
  50% {
    transform: scale(1.1);
    box-shadow: 0 0 10px rgba(46, 94, 78, 0.5);
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.btn-req-sent-anim {
  animation: friendReqPop 0.45s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards !important;
  background: #e6f4ea !important;
  color: #2E5E4E !important;
  border: 1px solid #2E5E4E !important;
  font-weight: 700 !important;
}
/* ============================================================
   👥 KAVERILISTA (FRIENDS LIST GRID & CARDS)
   ============================================================ */
.friends-list-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 10px;
  margin-top: 8px;
}

.friend-card-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  background: #ffffff;
  border: 1.5px solid #d8c8b2;
  border-radius: 10px;
  cursor: pointer;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
  transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.friend-card-item:hover {
  background: #fdfbf7;
  border-color: #2E5E4E;
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(46, 94, 78, 0.15);
}

.friend-avatar-container {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  border: 1px solid #2E5E4E;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.friend-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.friend-avatar-fallback {
  width: 100%;
  height: 100%;
  background: #e2d4c1;
  color: #5c4333;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  font-family: 'Oswald', sans-serif;
}

.friend-name-text {
  font-family: 'Inter', sans-serif;
  font-size: 12.5px;
  font-weight: 700;
  color: #382a21;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.friend-card-item:hover .friend-name-text {
  color: #2E5E4E;
}
/* ============================================================
   🔗 KUTSUKAVERI-MODAL & QR-KOODI (BRÄNDITYYLI #2B2B2B & #F5F1E8)
   ============================================================ */
#referralModal .modal-card {
  background: #F5F1E8 !important;
  border: 2px solid #2B2B2B !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4) !important;
}

#referralModal .custom-header-card {
  background-color: #2B2B2B !important;
  background-image: 
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.02) 0px, rgba(255, 255, 255, 0.02) 1px, transparent 1px, transparent 6px),
    linear-gradient(180deg, #3A3A3A 0%, #2B2B2B 50%, #171717 100%) !important;
  border: 2px solid #2B2B2B !important;
  box-shadow: inset 0 0 0 1px rgba(245, 241, 232, 0.2), 0 4px 10px rgba(0, 0, 0, 0.3) !important;
}

#referralModal .custom-header-card h3 {
  color: #F5F1E8 !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9) !important;
}

#referralModal p, 
#referralModal .report-field-label {
  color: #2B2B2B !important;
}

.qr-code-wrapper {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  padding: 10px !important;
  background: #F5F1E8 !important;
  border: 2px solid #2B2B2B !important;
  border-radius: 12px !important;
  margin: 8px auto 12px auto !important;
  width: 170px !important;
  height: 170px !important;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.12), 0 4px 10px rgba(0, 0, 0, 0.1) !important;
  box-sizing: border-box !important;
}

.qr-code-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  border-radius: 4px !important;
}

.referral-link-wrapper {
  display: flex !important;
  gap: 6px !important;
  margin-top: 4px !important;
  margin-bottom: 12px !important;
  align-items: center !important;
}

.referral-link-input {
  flex: 1 !important;
  font-size: 11px !important;
  padding: 8px 10px !important;
  background: #F5F1E8 !important;
  border: 1.5px solid #2B2B2B !important;
  color: #2B2B2B !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 600 !important;
  border-radius: 8px !important;
  outline: none !important;
  box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0.1) !important;
}

#referralModal .btn-submit {
  background: #2B2B2B linear-gradient(180deg, #3A3A3A 0%, #2B2B2B 100%) !important;
  color: #F5F1E8 !important;
  border: 1px solid #171717 !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25) !important;
}

#referralModal .btn-submit:hover:not(:disabled) {
  background: linear-gradient(180deg, #484848 0%, #333333 100%) !important;
  color: #FFFFFF !important;
}

#referralModal .btn-secondary {
  background: #F5F1E8 !important;
  color: #2B2B2B !important;
  border: 1.5px solid #2B2B2B !important;
  font-weight: 700 !important;
  box-shadow: none !important;
  transition: all 0.2s ease !important;
}

#referralModal .btn-secondary:hover {
  background: #2B2B2B !important;
  color: #F5F1E8 !important;
  border-color: #2B2B2B !important;
}
/* ============================================================
   🎁 KUTSU KAVERI -MAINOSBANNERI (ETUSIVU)
   ============================================================ */
.landing-referral-banner {
  position: relative !important;
  background: linear-gradient(135deg, #fffbeb 0%, #fef08a 100%) !important;
  border: 1px solid #fcd34d !important;
  border-radius: 10px !important;
  padding: 10px 32px 10px 14px !important;
  margin: 0 10px 14px 10px !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
  box-sizing: border-box !important;
  align-items: center !important;
}

.landing-referral-banner .banner-content {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  width: 100% !important;
}

.landing-referral-banner .banner-icon {
  font-size: 22px !important;
  flex-shrink: 0 !important;
}

.landing-referral-banner .banner-text {
  font-size: 11px !important;
  color: #5c4333 !important;
  line-height: 1.35 !important;
  flex-grow: 1 !important;
  margin: 0 !important;
}

.landing-referral-banner .banner-action-btn {
  width: auto !important;
  flex-shrink: 0 !important;
  padding: 6px 14px !important;
  font-size: 10px !important;
  background: linear-gradient(180deg, #d97706 0%, #b45309 100%) !important;
  border: 1px solid #92400e !important;
  color: #fff !important;
  border-radius: 6px !important;
  margin: 0 !important;
  box-shadow: 0 2px 4px rgba(0,0,0,0.15) !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  letter-spacing: 0.5px !important;
}

.landing-referral-banner .banner-action-btn:hover {
  background: linear-gradient(180deg, #f59e0b 0%, #d97706 100%) !important;
  color: #ffffff !important;
}

.landing-referral-banner .banner-close-btn {
  position: absolute !important;
  top: 5px !important;
  right: 5px !important;
  transform: none !important;
  background: transparent !important;
  border: none !important;
  color: #b45309 !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  width: 16px !important;
  height: 16px !important;
  line-height: 1 !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  opacity: 0.5 !important;
  transition: opacity 0.2s ease !important;
}

.landing-referral-banner .banner-close-btn:hover {
  opacity: 1 !important;
}

/* Mobiili-optimointi erittäin kapeille näytöille */
@media (max-width: 380px) {
  .landing-referral-banner .banner-content {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
  }
  .landing-referral-banner .banner-icon {
    display: none !important;
  }
}
/* Google-kirjautumispainikkeen hover- ja aktiivityylit */
.btn-google {
  transition: all 0.2s ease !important;
}

.btn-google:hover {
  background: #f7eee0 !important;
  border-color: #b45309 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15) !important;
}

.btn-google:active {
  transform: translateY(1px) !important;
}