/* ============================================================
   📝 RAPORTOINTISIVU - PUBITEEMAN KORTIT & SYÖTTÖELEMENTIT
   ============================================================ */

.report-title-box,
.profile-title-box,
.feed-title-box,
.admin-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,
.admin-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,
.app-container .admin-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,
.admin-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, #2B2B2B 0%, #171717 100%) !important;
  border: 1.5px solid #46A28B !important;
  color: #F5F1E8 !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;
  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;
}

.landing-greeting-extra {
  margin-top: 5px !important;
  font-weight: 500 !important;
  font-size: 11px !important;
  color: #5c5044 !important;
  font-style: italic;
}

/* SIIS MIKÄ HANALIIGA? -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;
  position: relative !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;
}