/* ============================================================
   🃏 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, 
.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%;
 }
}

/* 🔩 METALLIC EFEKTI (Taso 10 - matalin taso, mutta pitää silti erottua
   selvästi tavallisesta kortista. Aiemmin täysin staattinen (ei ambient-
   animaatiota lainkaan) - kosketuslaitteella jolla ei ole hoveria efekti ei
   siis KOSKAAN näkynyt liikkuvan mitenkään. Lisätty hillitty mutta selkeä
   lepotila-animaatio + vahvistettu kontrasti/opasiteetti, pysyen silti
   Prisman (taso 20) alapuolella. */
.card.effect-metallic::before {
 content: '';
 position: absolute;
 inset: 0;
 border-radius: inherit;
 background: linear-gradient(
   100deg,
   transparent 25%,
   rgba(255, 255, 255, 0.55) 45%,
   rgba(170, 178, 186, 0.4) 50%,
   rgba(255, 255, 255, 0.55) 55%,
   transparent 75%
 );
 background-size: 250% 250%;
 background-position: calc(var(--mx, 50%) * 1.8) calc(var(--my, 50%) * 1.8);
 mix-blend-mode: overlay;
 pointer-events: none;
 z-index: 10;
 opacity: 0.26;
 transition: opacity 0.3s ease;
}
.card.effect-metallic:not(:hover)::before {
 animation: cardMetallicAmbientShine 7s ease-in-out infinite;
}
.card.effect-metallic:hover::before {
 animation: none;
 opacity: 0.48;
}
@keyframes cardMetallicAmbientShine {
 0%, 100% {
   opacity: 0.18;
   background-position: 30% 30%;
 }
 50% {
   opacity: 0.34;
   background-position: 70% 70%;
 }
}

/* 🌈 PRISMA EFEKTI (Taso 20 - spektrikimallus) */
.card.effect-prisma::before {
 content: '';
 position: absolute;
 inset: 0;
 border-radius: inherit;
 background: repeating-linear-gradient(
   100deg,
   rgba(255, 0, 120, 0.22) 0%,
   rgba(255, 180, 0, 0.22) 8%,
   rgba(120, 255, 0, 0.22) 16%,
   rgba(0, 220, 255, 0.22) 24%,
   rgba(150, 0, 255, 0.22) 32%,
   rgba(255, 0, 120, 0.22) 40%
 );
 background-size: 220% 220%;
 background-position: calc(var(--mx, 50%) * 2.2) calc(var(--my, 50%) * 2.2);
 mix-blend-mode: color-dodge;
 pointer-events: none;
 z-index: 10;
 opacity: 0.22;
 transition: opacity 0.3s ease;
}
.card.effect-prisma:not(:hover)::before {
 animation: cardPrismaAmbientShine 11s ease-in-out infinite;
}
.card.effect-prisma:hover::before {
 animation: none;
 opacity: 0.5;
}
@keyframes cardPrismaAmbientShine {
 0%, 100% {
   opacity: 0.18;
   background-position: 20% 20%;
 }
 50% {
   opacity: 0.32;
   background-position: 80% 80%;
 }
}

/* 🌌 AURORA EFEKTI (Taso 40 - hitaasti ajelehtiva brändivihreä hehku, korkein tyyli) */
.card.effect-aurora::before {
 content: '';
 position: absolute;
 inset: 0;
 border-radius: inherit;
 background: linear-gradient(
   125deg,
   transparent 12%,
   rgba(70, 162, 139, 0.45) 28%,
   rgba(180, 255, 235, 0.4) 40%,
   rgba(44, 112, 95, 0.4) 50%,
   rgba(56, 189, 248, 0.4) 62%,
   rgba(70, 162, 139, 0.45) 76%,
   transparent 90%
 );
 background-size: 280% 280%;
 background-position: calc(var(--mx, 50%) * 2) calc(var(--my, 50%) * 2);
 mix-blend-mode: color-dodge;
 pointer-events: none;
 z-index: 10;
 opacity: 0.4;
 transition: opacity 0.3s ease;
}
.card.effect-aurora:not(:hover)::before {
 animation: cardAuroraAmbientDrift 14s ease-in-out infinite;
}
.card.effect-aurora:hover::before {
 animation: none;
 opacity: 0.72;
}
@keyframes cardAuroraAmbientDrift {
 0%, 100% { background-position: 10% 30%; }
 33% { background-position: 70% 60%; }
 66% { background-position: 30% 80%; }
}

/* ============================================================
 🖼️ KORTIN REUNUKSET (border-*) — tasoperusteiset avattavat reunuskoristeet.
 Kolme ensimmäistä mukautuvat automaattisesti valittuun väriteemaan
 --card-accent / --card-edge -muuttujien kautta (määritelty jokaisessa
 .theme-X -säännössä, 02-rules.css). Timanttiviiva on tarkoituksella
 kiinteä, oma erillinen prestiisi-ilmeensä.
 ============================================================ */

/* 🪞 KORISTEKULMAT (Taso 5) — pidempi, vahvempi kaari jokaisessa kulmassa.
   Kaari kulkee (20,4)->(4,20) ohjauspisteen (4,4) kautta: molemmat päät
   pysyvät koko matkaltaan selvästi card-gear-btn:n (12px inset, 32px) ULKO-
   puolella (kaari "viistää" kulman eri kulmasta kuin nappi, ei koskaan
   samaa x- ja y-aluetta yhtäaikaa), ja koko kaari pysyy card-front/-content:n
   pyöristetyn kulman (16px/10px, overflow:hidden) näkyvällä alueella, koska
   sekä alku- että loppupiste ovat vähintään 4px irti todellisesta kulmasta. */
.card.border-corners .card-front::before,
.card.border-corners .card-front::after,
.card.border-corners .card-content::before,
.card.border-corners .card-content::after {
  content: '';
  position: absolute;
  width: 24px;
  height: 24px;
  z-index: 4;
  pointer-events: none;
  background-color: var(--card-edge, #2B2B2B);
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20,4 Q4,4 4,20' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / contain;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20,4 Q4,4 4,20' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / contain;
}
.card.border-corners .card-front::before { top: 2px; left: 2px; }
.card.border-corners .card-front::after { top: 2px; right: 2px; transform: scaleX(-1); }
.card.border-corners .card-content::before { bottom: 2px; left: 2px; transform: scaleY(-1); }
.card.border-corners .card-content::after { bottom: 2px; right: 2px; transform: scale(-1,-1); }

/* 💍 KAKSOISRENGAS (Taso 15) */
.card.border-double,
.card.border-double .card-front {
  box-shadow:
    0 12px 30px rgba(0, 0, 0, 0.65),
    0 0 0 3px #F5F1E8,
    0 0 0 6px var(--card-edge, #25595C) !important;
}

/* 💓 HEHKU (Taso 25) — HUOM (kaksi eri bugia, molemmat korjattu):
   1) Ei animoida box-shadowia suoraan .card:ssa, koska teeman oma box-shadow
      on !important, ja !important-säännöt voittavat animaatiot CSS:n
      kaskadijärjestyksessä (animaatio "pyörii" muttei koskaan näy).
   2) .card::after ON JO KÄYTÖSSÄ (rivi ~103: "Pehmeä valoheijastus kortin
      pinnassa", holo-kallistusefekti) - sen opacity on OLETUKSENA 0
      (var(--holo-opacity, 0)), joten mikä tahansa oma sääntö joka EI aseta
      opacityä jää täysin näkymättömäksi vaikka box-shadow itsessään animoisi
      oikein. .card::before puolestaan on jo kehys-efektien (foil/prisma/
      metallic/aurora) käytössä. Siksi hehku käyttää OMAA pseudo-elementtiään
      .card-inner::after, joka ei ole minkään muun säännön "varaama". */
.card.border-pulse .card-inner {
  position: relative;
}
.card.border-pulse .card-inner::after {
  content: '';
  position: absolute;
  /* HUOM (aukko-bugi, kolmas korjausyritys): edellinen "-3px, tarkka
     kompensaatio" oli geometrisesti pikselilleen oikein (mitattu ja
     varmistettu), mutta silti jäljellä pieni raon TUNTU - todennäköisesti
     box-shadow'n blur-häivytys (spread oli vain 1-5px ennen kuin blur alkoi
     haalistaa väriä) ei näytä "kiinni kortissa" vaikka geometria täsmää.
     Sen sijaan että arvattaisiin pyöristys-/inset-arvoja neljättä kertaa,
     tehdään hehku YLIVARMASTI kiinni kortissa: pienempi negatiivinen inset
     (menee hieman kortin OMAN reunan sisäpuolelle asti) + selvästi isompi
     spread ennen blur-häivytystä, jolloin näkyvä väri alkaa aina korttia
     peittävältä/koskettavalta alueelta eikä koskaan jätä tulkinnanvaraista
     rakoa riippumatta selaimen tarkasta pinojärjestys-/blur-toteutuksesta. */
  inset: -1px;
  border-radius: 16px;
  /* VARMISTETTU MITTAAMALLA: .card-inner:lla on transform-style:preserve-3d
     (3D-kääntöä varten), joka muodostaa OMAN pinojärjestyskontekstin sen
     lapsille. Siinä .card-front on z-index:2 ja .card-content z-index:3 -
     molemmat SIIS PIIRTYVÄT tämän hehkun (oli z-index:1) PÄÄLLE, jolloin
     reunaa lähinnä oleva kirkkain osa hehkusta piiloutui niiden alle.
     box-shadow ei koskaan piirry pseudo-elementin OMAN laatikon sisäpuolelle
     (spesifikaation mukaan), joten korkeampi z-index ei "vuoda" väriä kortin
     pinnalle - se vain varmistaa ettei mikään peitä jo-muutenkin-vain-kortin-
     ULKOPUOLELLE piirtyvää hehkua. */
  z-index: 5;
  pointer-events: none;
  animation: cardBorderPulseGlow 2.4s ease-in-out infinite;
}
@keyframes cardBorderPulseGlow {
  0%, 100% {
    box-shadow: 0 0 8px 3px var(--card-accent, #46A28B);
  }
  50% {
    box-shadow: 0 0 22px 8px var(--card-accent, #46A28B);
  }
}

/* 💎 TIMANTTIVIIVA (Taso 45) — kiinteä, ei mukaudu teemaan */
.card.border-diamond,
.card.border-diamond .card-front {
  box-shadow:
    0 12px 30px rgba(0, 0, 0, 0.65),
    inset 0 0 0 2px #38bdf8,
    inset 0 0 0 4px #ffffff,
    inset 0 0 0 5px #0284c7,
    0 0 14px 2px rgba(56, 189, 248, 0.5) !important;
}

/* ============================================================
 🎨 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;
}

/* SIIDERI-TEEMA: Siideri-vesileima */
.theme-omppupomppu .card-watermark {
  opacity: 0.05 !important;
  color: #717821 !important;
}
.theme-omppupomppu .card-watermark svg {
  display: none !important;
}
.theme-omppupomppu .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='2 0 18 21'%3E%3Cg transform='translate(-1.5,0) translate(12,11) scale(1.2) translate(-12,-11)'%3E%3Cpath d='M12,7.5 C9.5,5.5 6,6.5 5.7,10.5 C5.4,14.5 8,18.5 11.3,19.3 C11.7,19.4 12.3,19.4 12.7,19.3 C16,18.5 18.6,14.5 18.3,10.5 C18,6.5 14.5,5.5 12,7.5 Z' fill='black'/%3E%3Cpath d='M13,4 Q15.7,2.8 16.3,5.3 Q13.8,6.2 13,4 Z' fill='black'/%3E%3Cpath d='M12,7.5 Q11.6,4.7 13,3.3' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round'/%3E%3C/g%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='2 0 18 21'%3E%3Cg transform='translate(-1.5,0) translate(12,11) scale(1.2) translate(-12,-11)'%3E%3Cpath d='M12,7.5 C9.5,5.5 6,6.5 5.7,10.5 C5.4,14.5 8,18.5 11.3,19.3 C11.7,19.4 12.3,19.4 12.7,19.3 C16,18.5 18.6,14.5 18.3,10.5 C18,6.5 14.5,5.5 12,7.5 Z' fill='black'/%3E%3Cpath d='M13,4 Q15.7,2.8 16.3,5.3 Q13.8,6.2 13,4 Z' fill='black'/%3E%3Cpath d='M12,7.5 Q11.6,4.7 13,3.3' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round'/%3E%3C/g%3E%3C/svg%3E") no-repeat center / contain !important;
}

/* OLUT-TEEMA: Olut-vesileima */
.theme-mallasmestari .card-watermark {
  opacity: 0.05 !important;
  color: #865813 !important;
}
.theme-mallasmestari .card-watermark svg {
  display: none !important;
}
.theme-mallasmestari .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='4 1 18 22'%3E%3Cpath d='M8,20 Q8,21.5 9.5,21.5 L15,21.5 Q16.5,21.5 16.5,20 L16.9,9.8 L7.6,9.8 Z' fill='black'/%3E%3Cpath d='M16.8,11.5 L18.5,11.5 Q20.5,11.5 20.5,13.5 L20.5,15.5 Q20.5,17.5 18.5,17.5 L16.8,17.5' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round'/%3E%3Cg transform='translate(12.25,9.8) scale(0.8) translate(-12.25,-9.8)'%3E%3Cpath d='M7.4,9.8 Q6.9,7 8.5,6.3 Q8.3,4.7 10,4.7 Q10.3,3.2 12.2,3.6 Q13.4,2.7 14.6,3.8 Q16.3,3.7 16.3,5.6 Q17.7,5.9 17.3,7.8 Q17.9,9 17.1,9.8 Z' fill='none' stroke='black' stroke-width='1.2'/%3E%3C/g%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='4 1 18 22'%3E%3Cpath d='M8,20 Q8,21.5 9.5,21.5 L15,21.5 Q16.5,21.5 16.5,20 L16.9,9.8 L7.6,9.8 Z' fill='black'/%3E%3Cpath d='M16.8,11.5 L18.5,11.5 Q20.5,11.5 20.5,13.5 L20.5,15.5 Q20.5,17.5 18.5,17.5 L16.8,17.5' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round'/%3E%3Cg transform='translate(12.25,9.8) scale(0.8) translate(-12.25,-9.8)'%3E%3Cpath d='M7.4,9.8 Q6.9,7 8.5,6.3 Q8.3,4.7 10,4.7 Q10.3,3.2 12.2,3.6 Q13.4,2.7 14.6,3.8 Q16.3,3.7 16.3,5.6 Q17.7,5.9 17.3,7.8 Q17.9,9 17.1,9.8 Z' fill='none' stroke='black' stroke-width='1.2'/%3E%3C/g%3E%3C/svg%3E") no-repeat center / contain !important;
}

/* VALKOVIINI-TEEMA: Valkoviini-vesileima */
.theme-riesling .card-watermark {
  opacity: 0.05 !important;
  color: #896810 !important;
}
.theme-riesling .card-watermark svg {
  display: none !important;
}
.theme-riesling .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='6 1.5 12 19.5'%3E%3Cpath d='M7.5,3 L16.5,3 C16.5,8 15,11.5 12,12.5 C9,11.5 7.5,8 7.5,3 Z' fill='none' stroke='black' stroke-width='1.5' stroke-linejoin='round'/%3E%3Cpath d='M8.3,5.8 C8.4,9 10.6,11.2 12,11.8 C13.4,11.2 15.6,9 15.7,5.8 Z' fill='black' fill-opacity='0.4'/%3E%3Cline x1='12' y1='12.0' x2='12' y2='18' stroke='black' stroke-width='1.5' stroke-linecap='butt'/%3E%3Cellipse cx='12' cy='19' rx='4' ry='1.2' fill='none' stroke='black' stroke-width='1.5'/%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='6 1.5 12 19.5'%3E%3Cpath d='M7.5,3 L16.5,3 C16.5,8 15,11.5 12,12.5 C9,11.5 7.5,8 7.5,3 Z' fill='none' stroke='black' stroke-width='1.5' stroke-linejoin='round'/%3E%3Cpath d='M8.3,5.8 C8.4,9 10.6,11.2 12,11.8 C13.4,11.2 15.6,9 15.7,5.8 Z' fill='black' fill-opacity='0.4'/%3E%3Cline x1='12' y1='12.0' x2='12' y2='18' stroke='black' stroke-width='1.5' stroke-linecap='butt'/%3E%3Cellipse cx='12' cy='19' rx='4' ry='1.2' fill='none' stroke='black' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat center / contain !important;
}

/* LONKERO-TEEMA: Lonkero-vesileima */
.theme-muistatko52 .card-watermark {
  opacity: 0.05 !important;
  color: #1d597c !important;
}
.theme-muistatko52 .card-watermark svg {
  display: none !important;
}
.theme-muistatko52 .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='-4 -4 32 32'%3E%3Ccircle cx='12' cy='12' r='8' fill='none' stroke='black' stroke-width='1.6'/%3E%3Cpath d='M4,12 A8,8 0 0,1 7.2,5.6 L7.2,18.4 A8,8 0 0,1 4,12 Z' fill='black'/%3E%3Cpath d='M10.4,4.162 A8,8 0 0,1 13.6,4.162 L13.6,19.838 A8,8 0 0,1 10.4,19.838 Z' fill='black'/%3E%3Cpath d='M16.8,5.6 A8,8 0 0,1 20,12 L20,12 A8,8 0 0,1 16.8,18.4 Z' fill='black'/%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='-4 -4 32 32'%3E%3Ccircle cx='12' cy='12' r='8' fill='none' stroke='black' stroke-width='1.6'/%3E%3Cpath d='M4,12 A8,8 0 0,1 7.2,5.6 L7.2,18.4 A8,8 0 0,1 4,12 Z' fill='black'/%3E%3Cpath d='M10.4,4.162 A8,8 0 0,1 13.6,4.162 L13.6,19.838 A8,8 0 0,1 10.4,19.838 Z' fill='black'/%3E%3Cpath d='M16.8,5.6 A8,8 0 0,1 20,12 L20,12 A8,8 0 0,1 16.8,18.4 Z' fill='black'/%3E%3C/svg%3E") no-repeat center / contain !important;
}

/* COCKTAIL-TEEMA: Cocktail-vesileima */
.theme-miksologi .card-watermark {
  opacity: 0.05 !important;
  color: #813118 !important;
}
.theme-miksologi .card-watermark svg {
  display: none !important;
}
.theme-miksologi .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='2 -3 21 24'%3E%3Cg transform='translate(-1.5,-1)'%3E%3Cpath d='M4,4 Q4,10 12,11 Q20,10 20,4 Z' fill='black'/%3E%3Cline x1='12' y1='11' x2='12' y2='18.2' stroke='black' stroke-width='1.4' stroke-linecap='round'/%3E%3Cellipse cx='12' cy='19.3' rx='4' ry='1.1' fill='none' stroke='black' stroke-width='1.4'/%3E%3C/g%3E%3Cline x1='10.5' y1='6.3' x2='14.5' y2='2.5' stroke='black' stroke-width='1' stroke-linecap='round'/%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='2 -3 21 24'%3E%3Cg transform='translate(-1.5,-1)'%3E%3Cpath d='M4,4 Q4,10 12,11 Q20,10 20,4 Z' fill='black'/%3E%3Cline x1='12' y1='11' x2='12' y2='18.2' stroke='black' stroke-width='1.4' stroke-linecap='round'/%3E%3Cellipse cx='12' cy='19.3' rx='4' ry='1.1' fill='none' stroke='black' stroke-width='1.4'/%3E%3C/g%3E%3Cline x1='10.5' y1='6.3' x2='14.5' y2='2.5' stroke='black' stroke-width='1' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / contain !important;
}

/* KUOHUVIINI-TEEMA: Kuohuviini-vesileima */
.theme-alkumaljalla .card-watermark {
  opacity: 0.05 !important;
  color: #8f6c0a !important;
}
.theme-alkumaljalla .card-watermark svg {
  display: none !important;
}
.theme-alkumaljalla .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='8.2 2.5 7.8 19.3'%3E%3Cpath d='M9.5,3 C9.5,3 9.7,7.5 10.2,10.5 C10.5,12.2 10.9,13.6 11.3,14 C11.5,14.2 11.75,14.3 12,14.3 C12.25,14.3 12.5,14.2 12.7,14 C13.1,13.6 13.5,12.2 13.8,10.5 C14.3,7.5 14.5,3 14.5,3 Z' fill='none' stroke='black' stroke-width='1.4' stroke-linejoin='round'/%3E%3Cpath d='M10.1,4.8 C10.1,4.8 10.3,8 10.7,10.3 C11,11.9 11.3,13 11.6,13.5 C11.75,13.7 11.85,13.8 12,13.8 C12.15,13.8 12.25,13.7 12.4,13.5 C12.7,13 13,11.9 13.3,10.3 C13.7,8 13.9,4.8 13.9,4.8 Z' fill='black' fill-opacity='0.4'/%3E%3Cline x1='12' y1='14.3' x2='12' y2='18.2' stroke='black' stroke-width='1.4' stroke-linecap='round'/%3E%3Cellipse cx='12' cy='19.3' rx='3' ry='1' fill='none' stroke='black' stroke-width='1.4'/%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='8.2 2.5 7.8 19.3'%3E%3Cpath d='M9.5,3 C9.5,3 9.7,7.5 10.2,10.5 C10.5,12.2 10.9,13.6 11.3,14 C11.5,14.2 11.75,14.3 12,14.3 C12.25,14.3 12.5,14.2 12.7,14 C13.1,13.6 13.5,12.2 13.8,10.5 C14.3,7.5 14.5,3 14.5,3 Z' fill='none' stroke='black' stroke-width='1.4' stroke-linejoin='round'/%3E%3Cpath d='M10.1,4.8 C10.1,4.8 10.3,8 10.7,10.3 C11,11.9 11.3,13 11.6,13.5 C11.75,13.7 11.85,13.8 12,13.8 C12.15,13.8 12.25,13.7 12.4,13.5 C12.7,13 13,11.9 13.3,10.3 C13.7,8 13.9,4.8 13.9,4.8 Z' fill='black' fill-opacity='0.4'/%3E%3Cline x1='12' y1='14.3' x2='12' y2='18.2' stroke='black' stroke-width='1.4' stroke-linecap='round'/%3E%3Cellipse cx='12' cy='19.3' rx='3' ry='1' fill='none' stroke='black' stroke-width='1.4'/%3E%3C/svg%3E") no-repeat center / contain !important;
}

/* MEHU-TEEMA: Mehu-vesileima */
.theme-mehukestit .card-watermark {
  opacity: 0.05 !important;
  color: #8c590d !important;
}
.theme-mehukestit .card-watermark svg {
  display: none !important;
}
.theme-mehukestit .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='3 -3 16 22'%3E%3Cpath d='M6,5 L15,5 L14.3,17 Q14.2,18.5 12.5,18.5 L8.5,18.5 Q6.8,18.5 6.7,17 Z' fill='black'/%3E%3Cpath d='M6,5 L4.7,3.8 L6,3.8 Z' fill='black'/%3E%3Cpath d='M15,5 L16.3,3.8 L15,3.8 Z' fill='black'/%3E%3Crect x='6' y='3.7' width='9' height='1.4' rx='0.5' fill='black'/%3E%3Crect x='9.3' y='-2' width='1.6' height='6.2' rx='0.75' fill='black' transform='rotate(22 10.1 2)'/%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='3 -3 16 22'%3E%3Cpath d='M6,5 L15,5 L14.3,17 Q14.2,18.5 12.5,18.5 L8.5,18.5 Q6.8,18.5 6.7,17 Z' fill='black'/%3E%3Cpath d='M6,5 L4.7,3.8 L6,3.8 Z' fill='black'/%3E%3Cpath d='M15,5 L16.3,3.8 L15,3.8 Z' fill='black'/%3E%3Crect x='6' y='3.7' width='9' height='1.4' rx='0.5' fill='black'/%3E%3Crect x='9.3' y='-2' width='1.6' height='6.2' rx='0.75' fill='black' transform='rotate(22 10.1 2)'/%3E%3C/svg%3E") no-repeat center / contain !important;
}

/* VESI-TEEMA: Vesi-vesileima */
.theme-vesipoika .card-watermark {
  opacity: 0.05 !important;
  color: #226277 !important;
}
.theme-vesipoika .card-watermark svg {
  display: none !important;
}
.theme-vesipoika .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='5 1 15 22'%3E%3Cpath d='M7,5 L17,5 L16,20 Q15.9,21.5 14,21.5 L10,21.5 Q8.1,21.5 8,20 Z' fill='none' stroke='black' stroke-width='1.5' stroke-linejoin='round'/%3E%3Cpath d='M7.8,10.3 L16.2,10.3 L15.5,19.3 Q15.4,20.3 14,20.3 L10,20.3 Q8.6,20.3 8.5,19.3 Z' fill='black' fill-opacity='0.45'/%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='5 1 15 22'%3E%3Cpath d='M7,5 L17,5 L16,20 Q15.9,21.5 14,21.5 L10,21.5 Q8.1,21.5 8,20 Z' fill='none' stroke='black' stroke-width='1.5' stroke-linejoin='round'/%3E%3Cpath d='M7.8,10.3 L16.2,10.3 L15.5,19.3 Q15.4,20.3 14,20.3 L10,20.3 Q8.6,20.3 8.5,19.3 Z' fill='black' fill-opacity='0.45'/%3E%3C/svg%3E") no-repeat center / contain !important;
}

.rules-header-card,
.ranking-header-card,
.report-header-card,
.profile-header-card,
.feed-header-card,
.admin-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,
.admin-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,
.admin-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 #2B2B2B !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;
}