/* ============================================================
   🍻 KANSALLINEN HANALIIGA - 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,
  .picker-tray-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,
  .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;
  }

  /* 📱 LOGON KOKO MOBIILISSA.
     Tama katto oli aiemmin 190px estamassa paallekkaisyytta oikean ylakulman
     .top-user-nav -painikkeiden kanssa - mutta ne poistettiin kun ylapalkki
     korvattiin alapalkilla, joten mitaan estetta ei enaa ole. 270px antaa
     270 / 1.79 = 151px korkeuden. */
  .logo-container img {
    max-width: 270px !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(70, 162, 139, 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: #2B2B2B; 
  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;
}

.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; 
  /* Negatiivinen alamarginaali imee logotiedoston OMAN lapinakyvan reunuksen:
     Hanalogo.svg:ssa on 1376x768 -kehys jonka alareunassa on ~27 % tyhjaa, mika
     lasketaan kuvan korkeuteen vaikkei se nay. Se oli suurempi yksittainen
     tyhjan tilan lahde kuin kaikki CSS-marginaalit yhteensa.
     Mitoitettu pienimman naytetyn koon (270px leveys) mukaan: siina lapinakyvaa
     on ~40px, joten -30px jattaa viela 10px pelivaraa eika logo mene paallekkain. */
  margin: 0 auto -30px auto; 
  width: 100%; 
  max-width: 340px;
  height: auto;
  /* Hanalogo on kuvasuhteeltaan 1.79:1 (vanha oli 2.67:1) eli selvasti korkeampi.
     Korkeuskaton on annettava leveyden maarata koko, muuten logo kirjekuoriutuu
     kapeammaksi kuin max-width sallii: 340 / 1.79 = 190. */
  max-height: 200px;
  object-fit: contain;
  pointer-events: none; 
}

/* 🍻 ALAPALKKI (PÄÄNAVIGAATIO, KIINTEÄ, KAIKILLA NÄYTTÖKOILLA) */
:root {
  --bottom-nav-height: 64px;
}

.bottom-nav {
  display: flex;
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 520px;
  z-index: 200;
  background-color: #2B2B2B;
  border-top: 3px solid #46A28B;
  box-shadow: 0 -4px 14px rgba(0, 0, 0, 0.35);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  box-sizing: border-box;
}

body, .app-container {
  padding-bottom: calc(var(--bottom-nav-height) + env(safe-area-inset-bottom, 0px));
}

/* 🔍 NAVIGAATIOVÄLILEHDET ALAPALKISSA */
.nav-tab {
  flex: 1;
  padding: 10px 2px 8px 2px;
  text-align: center;
  font-size: 9.5px;
  font-weight: 500;
  color: #F5F1E8;
  opacity: 0.8;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  position: relative;
  z-index: 5;
  background: transparent;
  transition: color 0.2s ease, opacity 0.2s ease;
  white-space: nowrap;
}

.nav-tab:hover {
  opacity: 1;
}

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

.nav-tab.active {
  color: #ffffff;
  opacity: 1;
}

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

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

/* 👤 PROFIILIKUVA ALAPALKIN PROFIILI-KOHTEESSA (kutistettu versio #headerAvatarContainer:sta) */
#headerAvatarContainer.bottom-nav-avatar {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #F5F1E8;
  border: 1px solid rgba(245, 241, 232, 0.5);
}
#headerAvatarContainer.bottom-nav-avatar img { width: 100%; height: 100%; object-fit: cover; }
#headerAvatarContainer.bottom-nav-avatar .avatar-fallback { font-size: 10px; }
.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; }


/* 🍺 ETUSIVUN YLÄTYHJÄ: logon ja ensimmäisen palkin väli oli 43 px, joka syntyi
   kolmesta erillisestä lähteestä (logon alamarginaali 8 + .tab-content-täyte 25
   + palkin ylämarginaali 10). Kavennettu 22 pikseliin niin, että palkit nousevat
   lähemmäs logoa.

   Vain etusivu: .tab-content-sääntö on yhteinen kaikille välilehdille, joten sen
   muuttaminen olisi siirtänyt myös Sarjan, Sääntöjen ja Profiilin sisältöä.
   Palkin oma 10 px jätettiin koskematta, koska se erottaa myös palkkeja
   toisistaan - sen pienentäminen tiivistäisi koko sivun, ei vain yläreunaa. */
#tab-etusivu {
  padding-top: 8px;
}