/* 🔗 VENUEIDEN DUPLIKAATTIEHDOTUSRIVIT (klikattava, avaa yhdistämismodaalin) */
.venue-duplicate-row {
  padding: 6px 8px;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.15s ease;
}
.venue-duplicate-row:hover {
  background: rgba(120, 53, 15, 0.12);
}

/* ============================================================
   📍 VERIFIED VENUE DASHBOARD STYLES (BRÄNDITYYLI #2B2B2B & #F5F1E8)
   ============================================================ */
.venue-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 !important;
  position: relative !important;
  box-sizing: border-box !important;
  text-align: center !important;
}

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

.venue-title-box h2 {
  font-family: 'Oswald', sans-serif !important;
  font-size: 24px !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;
}

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

.venue-b2b-badge {
  background: #fef3c7;
  border: 1px solid #fde68a;
  color: #92400e;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 11px;
  line-height: 1.4;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
}

.venue-status-tag {
  padding: 3px 8px;
  border-radius: 12px;
  font-weight: 700;
  font-size: 10px;
  text-transform: uppercase;
}
.venue-status-tag.verified { background: #dcfce7; color: #15803d; border: 1px solid #86efac; }
.venue-status-tag.unverified { background: #fef3c7; color: #92400e; border: 1px solid #fde68a; }

.venue-kpi-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 8px;
}

.venue-kpi-card {
  background: #ffffff;
  border: 1.5px solid #2B2B2B;
  border-radius: 8px;
  padding: 8px 6px;
  text-align: center;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

.kpi-val {
  display: block;
  font-family: 'Oswald', sans-serif;
  font-size: 18px;
  font-weight: 700;
  color: #2c705f;
  line-height: 1.1;
}

.kpi-lbl {
  font-size: 9px;
  font-weight: 600;
  color: #2B2B2B;
  text-transform: uppercase;
}

/* GRAAFI 1: CSS BAR CHART */
.venue-chart-container {
  padding: 10px 0 4px 0;
}

.chart-bars-wrapper {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 4px;
  height: 110px;
  padding-bottom: 20px;
  position: relative;
  border-bottom: 1.5px solid #2B2B2B;
}

.chart-bar-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  justify-content: flex-end;
  position: relative;
}

.chart-bar-track {
  width: 100%;
  max-width: 18px;
  height: 100%;
  background: rgba(0, 0, 0, 0.05);
  border-radius: 4px 4px 0 0;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}

.chart-bar-fill {
  width: 100%;
  background: #C4C4C4;
  border-radius: 3px 3px 0 0;
  transition: height 0.4s ease;
}

.chart-bar-fill.active {
  background: linear-gradient(180deg, #46A28B 0%, #2c705f 100%);
  box-shadow: 0 0 6px rgba(44, 112, 95, 0.4);
}

.chart-bar-val {
  font-size: 8.5px;
  font-weight: 700;
  color: #2c705f;
  margin-bottom: 2px;
  height: 12px;
}

.chart-bar-lbl {
  font-size: 8px;
  color: #2B2B2B;
  font-weight: 600;
  position: absolute;
  bottom: -18px;
  white-space: nowrap;
}

/* ⏰ 24h TUNTIGRAAFIN MOBIILIOPTIMOITUT TYYLIT */
.hourly-chart-wrapper {
  gap: 2px !important;
}

.hourly-col {
  min-width: 0 !important;
}

.hourly-track {
  max-width: 10px !important;
}

.hourly-val {
  font-size: 7px !important;
}

.hourly-lbl {
  font-size: 7.5px !important;
}

/* GRAAFI 2: PELATTUJEN PELIEN JAKAUTUMA */
.venue-game-chart-container {
  padding: 4px 0;
}

.game-dist-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.game-dist-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.game-dist-header {
  display: flex;
  justify-content: space-between;
  font-size: 11.5px;
}

.game-dist-name {
  font-weight: 700;
  color: #2B2B2B;
}

.game-dist-count {
  color: #2B2B2B;
}

.game-dist-track {
  width: 100%;
  height: 10px;
  background: #C4C4C4;
  border-radius: 5px;
  overflow: hidden;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
}

.game-dist-fill {
  height: 100%;
  border-radius: 5px;
  transition: width 0.5s ease;
}

/* OSIO 3: AKTIIVISET PELAAJAT */
.venue-players-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}

.venue-player-card {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
  background: #ffffff;
  border: 1.5px solid #2B2B2B;
  border-radius: 8px;
  cursor: pointer;
  transition: transform 0.15s ease, background 0.15s ease;
}

.venue-player-card:hover {
  background: #F5F1E8;
  transform: translateY(-1px);
}

.venue-player-rank {
  font-family: 'Oswald', sans-serif;
  font-size: 12px;
  font-weight: 700;
  color: #2c705f;
  min-width: 16px;
  text-align: center;
}

.venue-player-info {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.venue-player-name {
  font-size: 11.5px;
  font-weight: 700;
  color: #2B2B2B;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.venue-player-stats {
  font-size: 9.5px;
  color: #2B2B2B;
  opacity: 0.8;
}

/* 🔥 VIIKKOSTRIIKKI (WEEKLY STREAK UI) */
#landing-streak-card {
  transition: border-color 0.3s ease, box-shadow 0.3s ease !important;
}

/* 1. Striikki hoidossa tälle viikolle (Brändin vihreä hohto) */
#landing-streak-card.streak-done {
  border: 2px solid #46A28B !important;
  box-shadow: 0 0 18px rgba(70, 162, 139, 0.75), inset 0 0 10px rgba(70, 162, 139, 0.2) !important;
}

/* 2. Suorittamatta tälle viikolle, yli 48h aikaa (Lämmin keltainen hohto) */
#landing-streak-card.streak-pending {
  border: 2px solid #f1cb64 !important;
  box-shadow: 0 0 16px rgba(241, 203, 100, 0.65), inset 0 0 8px rgba(241, 203, 100, 0.15) !important;
}

/* 3. Alle 48h aikaa pelata peli (Oranssi laatikko & varoitushohto) */
#landing-streak-card.streak-warning-48h {
  background: #fff7ed linear-gradient(180deg, #ffffff 0%, #fff7ed 100%) !important;
  border: 2px solid #f59e0b !important;
  box-shadow: 0 0 20px rgba(245, 158, 11, 0.8), inset 0 0 10px rgba(245, 158, 11, 0.2) !important;
}

/* 4. Alle 24h aikaa pelata peli (Punainen laatikko & vaarahälytys) */
#landing-streak-card.streak-warning-24h {
  background: #fef2f2 linear-gradient(180deg, #ffffff 0%, #fef2f2 100%) !important;
  border: 2px solid #dc2626 !important;
  box-shadow: 0 0 22px rgba(220, 38, 38, 0.9), inset 0 0 12px rgba(220, 38, 38, 0.25) !important;
}

#landing-streak-card h3 {
  border-bottom: none !important;
}

.streak-badge-tag {
  font-family: 'Oswald', sans-serif;
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  background: #2B2B2B;
  color: #F5F1E8;
  padding: 2px 7px;
  border-radius: 10px;
  border: 1px solid #2B2B2B;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
  cursor: pointer;
  user-select: none;
  transition: transform 0.15s ease, background-color 0.2s ease;
  position: relative;
  top: -7px;
}

.streak-badge-tag:active {
  transform: scale(0.95);
}

.streak-freeze-popover {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  background: #2B2B2B;
  color: #F5F1E8;
  border: 1.5px solid #f1cb64;
  border-radius: 8px;
  padding: 8px 12px;
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.35;
  width: 210px;
  z-index: 120;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.45);
  text-align: left;
  animation: popoverFadeIn 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.25);
  box-sizing: border-box;
}

.streak-freeze-popover::before {
  content: '';
  position: absolute;
  top: -6px;
  left: 14px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 6px 6px 6px;
  border-color: transparent transparent #f1cb64 transparent;
}

@keyframes popoverFadeIn {
  from { opacity: 0; transform: translateY(-4px) scale(0.95); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.streak-close-btn {
  display: none;
  background: transparent;
  border: none;
  font-size: 18px;
  font-weight: 700;
  color: #2B2B2B;
  cursor: pointer;
  padding: 0;
  line-height: 1;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease, opacity 0.2s ease;
  position: absolute;
  top: 15px;
  right: 14px;
  opacity: 0.6;
  z-index: 30;
}

.streak-close-btn:hover {
  transform: scale(1.2);
  opacity: 0.8;
}

#modalStreakContainer .streak-close-btn {
  display: inline-flex;
}

.streak-weeks-grid {
  display: flex;
  gap: 6px;
  margin-top: 4px;
  padding: 6px 2px 10px 2px;
  overflow-x: auto;
  overflow-y: visible;
  width: 100%;
  box-sizing: border-box;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(to right, #000 0%, #000 78%, rgba(0, 0, 0, 0.25) 92%, transparent 100%);
  mask-image: linear-gradient(to right, #000 0%, #000 78%, rgba(0, 0, 0, 0.25) 92%, transparent 100%);
}

.streak-weeks-grid::-webkit-scrollbar {
  display: none;
}

.streak-week-item {
  flex: 0 0 calc((100% - 24px) / 4.35);
  min-width: calc((100% - 24px) / 4.35);
  background: #ffffff;
  border: 1.5px solid #2B2B2B;
  border-radius: 8px;
  padding: 6px 4px;
  text-align: center;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: all 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
}

.streak-week-item.streak-week-teaser {
  flex: 0 0 16%;
  opacity: 0.5;
  filter: blur(1px);
  pointer-events: none;
  user-select: none;
}

.streak-week-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 3px;
  padding-bottom: 3px;
  border-bottom: 1px dashed #2B2B2B;
}

.streak-week-num {
  font-family: 'Oswald', sans-serif;
  font-size: 9px;
  font-weight: 700;
  color: #2B2B2B;
  letter-spacing: 0.4px;
}

.streak-status-icon {
  font-size: 11px;
  line-height: 1;
}

.streak-reward-title {
  font-family: 'Oswald', sans-serif;
  font-size: 11px;
  font-weight: 700;
  color: #2B2B2B;
  margin-bottom: 2px;
  line-height: 1.15;
}

.streak-reward-desc {
  font-size: 8.5px;
  color: #2B2B2B;
  line-height: 1.15;
}

.btn-claim-streak {
  width: 100% !important;
  padding: 3px 3px !important;
  font-family: 'Oswald', sans-serif !important;
  font-size: 7.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.3px !important;
  text-transform: uppercase !important;
  color: #171717 !important;
  background: linear-gradient(180deg, #fef08a 0%, #f59e0b 100%) !important;
  border: 1px solid #b45309 !important;
  border-radius: 4px !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  margin-top: 3px !important;
  animation: claimPulse 1.8s ease-in-out infinite alternate !important;
}

.btn-claim-streak:hover {
  background: linear-gradient(180deg, #ffffff 0%, #fef08a 100%) !important;
  transform: scale(1.03) !important;
  box-shadow: 0 3px 8px rgba(245, 158, 11, 0.6) !important;
}

.btn-claim-disabled {
  width: 100% !important;
  padding: 3px 3px !important;
  font-family: 'Oswald', sans-serif !important;
  font-size: 7.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.3px !important;
  text-transform: uppercase !important;
  color: #7A7A7A !important;
  background: #B8B8B8 !important;
  border: 1px solid #9A9A9A !important;
  border-radius: 4px !important;
  box-shadow: none !important;
  opacity: 0.65 !important;
  cursor: not-allowed !important;
  animation: none !important;
  margin-top: 3px !important;
  box-sizing: border-box !important;
  display: block !important;
  text-align: center !important;
}

@keyframes claimPulse {
  0% { transform: scale(0.98); box-shadow: 0 0 4px rgba(245, 158, 11, 0.4); }
  100% { transform: scale(1.02); box-shadow: 0 0 10px rgba(245, 158, 11, 0.8); }
}

.streak-locked-text {
  margin-top: 2px !important;
  text-align: center !important;
}

.streak-unlock-hint {
  display: block !important;
  font-size: 7px !important;
  font-weight: 600 !important;
  color: #2B2B2B !important;
  margin-top: 2px !important;
  line-height: 1.15 !important;
  font-style: normal !important;
}

.streak-reward-info {
  animation: rewardReveal 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.25) !important;
}

@keyframes rewardReveal {
  0% { opacity: 0; transform: scale(0.8); }
  100% { opacity: 1; transform: scale(1); }
}

/* Suoritettu / Aktiivinen striikkiviikko */
.streak-week-item.completed {
  background: #EBF2EF;
  border-color: #2c705f;
}

.streak-week-item.completed .streak-week-num {
  color: #2c705f;
}

.streak-week-item.active {
  background: #fffbeb;
  border-color: #b45309;
  box-shadow: 0 0 10px rgba(245, 158, 11, 0.3);
  transform: translateY(-2px);
}

.streak-week-item.active .streak-week-num {
  color: #b45309;
}

/* ============================================================
   🎁 VIIKKOSTRIIKIN ISON LAHJA-ANIMAATION TYYLIT
   ============================================================ */

.gift-modal-overlay {
  background: rgba(15, 10, 5, 0.85) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  z-index: 10050 !important;
}

.gift-animation-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 100%;
  max-width: 380px;
  padding: 20px;
  box-sizing: border-box;
}

.gift-box-stage {
  position: relative;
  width: 220px;
  height: 260px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  margin-bottom: 25px;
  perspective: 800px;
}

/* LAHJA-PAKETTI */
.gift-box {
  position: relative;
  width: 140px;
  height: 120px;
  z-index: 10;
  transform-style: preserve-3d;
  animation: giftBoxBounceIn 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

.gift-body {
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, #2B2B2B 0%, #171717 100%);
  border: 2.5px solid #f59e0b;
  border-radius: 12px;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.8), inset 0 0 12px rgba(245, 158, 11, 0.3);
  position: relative;
  overflow: hidden;
}

.gift-body-ribbon-v {
  position: absolute;
  top: 0; bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 24px;
  background: linear-gradient(90deg, #b45309 0%, #fef08a 50%, #b45309 100%);
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.4);
}

.gift-body-ribbon-h {
  position: absolute;
  left: 0; right: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 24px;
  background: linear-gradient(180deg, #b45309 0%, #fef08a 50%, #b45309 100%);
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.4);
}

/* LAHJAPAKETIN KANSI */
.gift-lid {
  position: absolute;
  top: -16px;
  left: -8px;
  width: 156px;
  height: 28px;
  background: linear-gradient(180deg, #3A3A3A 0%, #2B2B2B 100%);
  border: 2.5px solid #fcd34d;
  border-radius: 8px;
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.6);
  z-index: 12;
  transition: transform 0.65s cubic-bezier(0.34, 1.56, 0.64, 1);
  transform-origin: top left;
}

.gift-lid-ribbon {
  position: absolute;
  top: 0; bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 26px;
  background: linear-gradient(90deg, #b45309 0%, #fef08a 50%, #b45309 100%);
}

.gift-bow {
  position: absolute;
  top: -18px;
  left: 50%;
  transform: translateX(-50%);
  width: 42px;
  height: 20px;
  background: #fef08a;
  border: 2px solid #b45309;
  border-radius: 20px 20px 0 0;
  box-shadow: 0 2px 6px rgba(0,0,0,0.4);
}

.gift-bow::before, .gift-bow::after {
  content: '';
  position: absolute;
  top: 3px;
  width: 16px;
  height: 14px;
  border: 2px solid #b45309;
  border-radius: 50%;
  background: #f59e0b;
}

.gift-bow::before { left: -10px; transform: rotate(-25deg); }
.gift-bow::after { right: -10px; transform: rotate(25deg); }

/* PAKETIN AVAUTUMISANIMAATIO (KANSI AUKEE SIVULLE ALAS) */
.gift-box.opened .gift-lid {
  transform: translateX(-130px) translateY(15px) rotate(-85deg) scale(0.75);
  opacity: 0.85;
}

/* PAKETISTA NOUSEVA PALKINTO */
.gift-reward-pop {
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%) translateY(40px) scale(0.3);
  opacity: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 240px;
  background: #F5F1E8;
  border: 3px solid #fcd34d;
  border-radius: 16px;
  padding: 18px 14px;
  box-sizing: border-box;
  box-shadow: 0 0 35px rgba(245, 158, 11, 0.8), 0 15px 30px rgba(0, 0, 0, 0.7);
  transition: transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.5s ease;
  pointer-events: none;
}

.gift-box.opened + .gift-reward-pop,
.gift-box-stage.revealed .gift-reward-pop {
  transform: translateX(-50%) translateY(-110px) scale(1.08);
  opacity: 1;
  pointer-events: auto;
}

.gift-reward-icon {
  font-size: 48px;
  line-height: 1;
  margin-bottom: 8px;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,0.3));
  animation: rewardFloat 2s ease-in-out infinite alternate;
}

.gift-reward-title {
  font-family: 'Oswald', sans-serif;
  font-size: 20px;
  font-weight: 700;
  color: #2B2B2B;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 4px;
  text-align: center;
}

.gift-reward-desc {
  font-size: 13px;
  color: #2B2B2B;
  text-align: center;
  font-weight: 600;
  line-height: 1.35;
}

.gift-close-btn {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.4s ease, transform 0.4s ease;
  pointer-events: none;
  background: linear-gradient(180deg, #fef08a 0%, #f59e0b 100%) !important;
  color: #2B2B2B !important;
  border: 2px solid #b45309 !important;
  font-weight: 800 !important;
  font-size: 15px !important;
  box-shadow: 0 0 20px rgba(245, 158, 11, 0.6) !important;
}

.gift-animation-container.ready .gift-close-btn {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

@keyframes giftBoxBounceIn {
  0% { transform: scale(0.2) translateY(100px); opacity: 0; }
  60% { transform: scale(1.1) translateY(-10px); opacity: 1; }
  100% { transform: scale(1) translateY(0); opacity: 1; }
}

@keyframes rewardFloat {
  0% { transform: translateY(0); }
  100% { transform: translateY(-6px); }
}
/* ============================================================
   🔥 LIEKKIKLUBI I–III AVATAR-KORISTE (YLÄPALKIN LIEKKI-IKONI PROFIILIKUVAN TAKANA)
   ============================================================ */

/* Säiliö avatarin ympärille */
.avatar-flame-wrapper {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 50% !important;
  flex-shrink: 0 !important;
  z-index: 1 !important; 
}

/* Avatar-kuva tai nimikirjain asetetaan liekkikuvakkeen etupuolelle */
.avatar-flame-wrapper > * {
  position: relative !important;
  z-index: 2 !important;
  border-radius: 50% !important;
}

/* Korjataan kortin suuren avatarin marginaali, kun se on wrapperin sisällä */
.avatar-flame-wrapper > .card-avatar-lg {
  margin: 0 !important;
}

#myProfileAvatarContainer .avatar-flame-wrapper,
#modalAvatarContainer .avatar-flame-wrapper {
  margin: 0 auto 8px auto !important;
  display: flex !important;
}

/* Liekkiklubin erillinen varjostus kuvan sisäkehykseen */
.avatar-flame-wrapper.flame-club-i > * {
  border-color: transparent !important;
  box-shadow: 0 0 0 2.5px #fef08a, 0 0 0 5px #f59e0b, 0 5px 15px rgba(0, 0, 0, 0.6) !important;
}

/* Liekkiklubi: 3-osaisen liekin kärki ja sivukiehkurat yltävät näyttävästi profiilikuvan takaa. */
.avatar-flame-wrapper.flame-club-i::before {
  content: '' !important;
  position: absolute !important;
  top: -95% !important;
  left: -54% !important;
  right: -52% !important;
  bottom: -10px !important;
  background-image: url("../fireanimation.svg") !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center bottom !important;
  filter: drop-shadow(0 0 10px rgba(245, 158, 11, 0.85)) drop-shadow(0 2px 5px rgba(220, 38, 38, 0.6)) !important;
  z-index: 1 !important;
  pointer-events: none !important;
}

/* ⚡ Voittoputki: 6 salamaa hehkuvan sinivioletin renkaan ympärillä (renkaan
   pulssi on omalla ::after-kerroksellaan, koska animoitu box-shadow ei voita
   samalla säännöllä asetettua !important-arvoa - ks. flame-clubin rengas alla). */
.avatar-flame-wrapper.bolt-club-i > * {
  border-color: transparent !important;
  box-shadow: 0 0 0 2.5px #ddd6fe, 0 0 0 5px #7c3aed, 0 5px 15px rgba(0, 0, 0, 0.6) !important;
}
.avatar-flame-wrapper.bolt-club-i::before {
  content: '' !important;
  position: absolute !important;
  top: -30% !important;
  left: -30% !important;
  right: -30% !important;
  bottom: -30% !important;
  background-image: url("../boltanimation.svg") !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  filter: drop-shadow(0 0 7px rgba(167, 139, 250, 0.9)) !important;
  z-index: 1 !important;
  pointer-events: none !important;
}
/* Kiinteä koko + keskitys transformilla, EI inset:0 - wrapper venyy
   display:flex-täydeksi leveydeksi #myProfileAvatarContainer/#modalAvatarContainer
   -konteksteissa, jolloin inset:0 + border-radius:50% piirtäisi soikion koko
   kortin levyisenä pyöreän avatarin sijaan. Koko (90px) mukailee .card-avatar-lg:n
   (78px) + reunan + renkaan ulkoreunaa. */
.avatar-flame-wrapper.bolt-club-i::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 90px;
  height: 90px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  z-index: 3;
  pointer-events: none;
  animation: boltRingPulse 1.6s ease-in-out infinite;
}
@keyframes boltRingPulse {
  0%, 100% { box-shadow: 0 0 8px 2px rgba(167, 139, 250, 0.5); }
  50% { box-shadow: 0 0 18px 7px rgba(167, 139, 250, 0.95); }
}

/* ❄️ Kylmä putki: jääkiteet kylmän syaanin renkaan ympärillä (tappioputki >= 5). */
.avatar-flame-wrapper.ice-club-i > * {
  border-color: transparent !important;
  box-shadow: 0 0 0 2.5px #e0f7ff, 0 0 0 5px #22d3ee, 0 5px 15px rgba(0, 0, 0, 0.6) !important;
}
.avatar-flame-wrapper.ice-club-i::before {
  content: '' !important;
  position: absolute !important;
  top: -30% !important;
  left: -30% !important;
  right: -30% !important;
  bottom: -30% !important;
  background-image: url("../iceanimation.svg") !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  filter: drop-shadow(0 0 7px rgba(103, 232, 249, 0.9)) !important;
  z-index: 1 !important;
  pointer-events: none !important;
}

/* ============================================================
   🔥 OPTIMISTIC STREAK ANIMATION (IGNITE & FLY TO CORNER)
   ============================================================ */
/* 🔥 OPTIMISTIC STREAK ANIMATION (IGNITE & POP DISAPPEAR) */
.streak-anim-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease;
}

.streak-anim-overlay.active {
  opacity: 1;
  visibility: visible;
}

.streak-anim-flame {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  filter: drop-shadow(0 0 30px rgba(245, 158, 11, 0.95)) drop-shadow(0 0 60px rgba(220, 38, 38, 0.85));
  transform: scale(0.2);
  opacity: 0;
  user-select: none;
}

.streak-flame-emoji {
  font-size: 110px;
  line-height: 1;
  display: block;
}

.streak-anim-text {
  position: absolute;
  top: 52%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: 'Oswald', sans-serif;
  font-size: 22px;
  font-weight: 700;
  color: #ffffff;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.9), 0 0 10px rgba(0, 0, 0, 0.8);
  letter-spacing: 1.5px;
  white-space: nowrap;
  pointer-events: none;
}

.streak-anim-text span {
  display: inline-block;
  color: #fef08a;
  text-shadow: 0 0 12px rgba(254, 240, 138, 0.9), 0 2px 6px rgba(0, 0, 0, 0.9);
}

.streak-anim-text span.number-pop {
  animation: streakNumberPop 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.4) forwards;
}

@keyframes streakNumberPop {
  0% { transform: scale(0.5); opacity: 0.3; }
  50% { transform: scale(1.6); color: #ffffff; }
  100% { transform: scale(1); color: #fef08a; }
}

.streak-anim-overlay.active .streak-anim-flame {
  animation: streakIgniteAndPop 2.4s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes streakIgniteAndPop {
  0% {
    transform: scale(0.2);
    opacity: 0;
    filter: drop-shadow(0 0 10px rgba(245, 158, 11, 0.5));
  }
  20% {
    transform: scale(1.4);
    opacity: 1;
    filter: drop-shadow(0 0 45px rgba(245, 158, 11, 1)) drop-shadow(0 0 80px rgba(220, 38, 38, 0.9));
  }
  75% {
    transform: scale(1.35);
    opacity: 1;
  }
  88% {
    transform: scale(1.55);
    opacity: 1;
  }
  100% {
    transform: scale(0);
    opacity: 0;
  }
}

.streak-spark-burst {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 130px;
  height: 130px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(254, 240, 138, 0.85) 0%, rgba(245, 158, 11, 0.45) 50%, transparent 75%);
  opacity: 0;
  pointer-events: none;
}

.streak-anim-overlay.active .streak-spark-burst {
  animation: sparkBurstAnim 0.75s ease-out forwards;
}

@keyframes sparkBurstAnim {
  0% { transform: translate(-50%, -50%) scale(0.2); opacity: 0; }
  35% { transform: translate(-50%, -50%) scale(1.8); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(2.6); opacity: 0; }
}

/* 🎲 VERIFIED VENUE GAME ICONS TOP BAR */
.venue-top-game-icons {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-bottom: 8px;
  padding: 2px 0;
  text-align: center;
}

.venue-game-icons-title {
  font-family: 'Oswald', sans-serif;
  font-size: 8px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: #2B2B2B;
  margin-bottom: 3px;
  display: block;
}

.venue-game-icons-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 30px;
  flex-wrap: wrap;
}

.venue-game-icon-item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.2s ease, filter 0.2s ease;
}

.venue-game-icon-item:hover {
  transform: scale(1.15);
}

.venue-game-icon-item .feed-game-icon {
  width: 18px;
  height: 18px;
}

.venue-game-icon-item.game-color-kimble .feed-game-icon { color: #37467b; }
.venue-game-icon-item.game-color-yatzy .feed-game-icon { color: #8f498a; }
.venue-game-icon-item.game-color-alias .feed-game-icon { color: #8f4954; }
.venue-game-icon-item.game-color-afrikan_tahti .feed-game-icon { color: #f1cb64; }

/* 🏆 BAARILIIGA - HEHKU & TUNNISTE (B2B VERIFIED VENUE) */
.venue-game-icon-wrapper-item {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  margin-bottom: 10px;
}

/* Pelikohtaiset brändihehkut Baariliiga-aktiivisille ikoneille */
.venue-game-icon-item.game-color-kimble.baariliiga-glow {
  filter: drop-shadow(0 0 3px #4C5884) drop-shadow(0 0 7px #37467b);
}

.venue-game-icon-item.game-color-yatzy.baariliiga-glow {
  filter: drop-shadow(0 0 3px #BD81B9) drop-shadow(0 0 7px #8f498a);
}

.venue-game-icon-item.game-color-alias.baariliiga-glow {
  filter: drop-shadow(0 0 3px #BA7882) drop-shadow(0 0 7px #8f4954);
}

.venue-game-icon-item.game-color-afrikan_tahti.baariliiga-glow {
  filter: drop-shadow(0 0 3px #fde047) drop-shadow(0 0 7px #f1cb64);
}

.baariliiga-tag {
  font-family: 'Oswald', sans-serif;
  font-size: 6px;
  font-weight: 700;
  color: #F5F1E8;
  background: linear-gradient(180deg, #388975 0%, #2c705f 100%);
  border: 1px solid #1F4035;
  border-radius: 3px;
  padding: 1px 3px;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  box-shadow: 0 0 4px rgba(70, 162, 139, 0.6), 0 1px 3px rgba(0,0,0,0.4);
  position: absolute;
  bottom: -10px;
  white-space: nowrap;
}

/* ============================================================
   🗺️ PELIPAIKAT-SIVUN VENUENÄKYMÄ (GOOGLE MAPS INFOWINDOW)
   ============================================================ */
.gm-style-iw-c {
  padding: 2px 8px 6px 8px;
  border-radius: 12px;
  background: #F5F1E8;
  border: 2px solid #2B2B2B;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

.gm-style-iw-d {
  overflow: hidden;
  max-height: none;
  margin: 0;
  padding: 0;
}

.venue-info-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 0px;
  margin-bottom: 0px;
  padding-right: 14px;
}

.venue-verified-pill {
  background: #fef08a;
  color: #b45309;
  padding: 1px 5px;
  border-radius: 4px;
  font-size: 8.5px;
  font-weight: 700;
  border: 1px solid #f59e0b;
  display: inline-block;
  line-height: 1.2;
  text-transform: uppercase;
}

/* X-sulkupainike: kohdistettu tiivistettyyn yläpalkkiin.
   Google asettaa painikkeen ja sen sisäisen span:in koon inline-tyylillä (48px/24px),
   joten omat mitat pitää pakottaa !important:lla voittaakseen ne. */
.gm-ui-hover-effect,
.gm-style-iw-c > button {
  position: absolute !important;
  top: 4px !important;
  right: 4px !important;
  width: 16px !important;
  height: 16px !important;
  min-width: 16px !important;
  min-height: 16px !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: opacity 0.2s ease;
}

.gm-ui-hover-effect:hover,
.gm-style-iw-c > button:hover {
  background: transparent !important;
  opacity: 0.7;
}

/* X-merkki itse huomattavasti pienennettynä. mask-repeat: no-repeat on pakollinen -
   ilman sitä pieneksi asetettu mask-size toistuu ruudukkona koko (isolla) span-alueella. */
.gm-ui-hover-effect > span,
.gm-ui-hover-effect > img,
.gm-ui-hover-effect > svg,
.gm-style-iw-c > button > span,
.gm-style-iw-c > button > img,
.gm-style-iw-c > button > svg {
  width: 10px !important;
  height: 10px !important;
  min-width: 10px !important;
  min-height: 10px !important;
  margin: 0 !important;
  transform: none !important;
  -webkit-mask-size: 10px 10px !important;
  mask-size: 10px 10px !important;
  -webkit-mask-repeat: no-repeat !important;
  mask-repeat: no-repeat !important;
  -webkit-mask-position: center !important;
  mask-position: center !important;
}

/* 🏆 VIRALLINEN LIIGABAARI -PLAKAATIN PIENENNETYT BRÄNDIVIHREÄT NIITIT */
.liigabaari-rivet {
  position: absolute !important;
  width: 2.5px !important;
  height: 2.5px !important;
  top: 2.5px !important;
  border-radius: 50% !important;
  background: #2c705f !important;
  border: none !important;
  box-shadow: none !important;
  z-index: 5 !important;
  pointer-events: none !important;
}

/* ============================================================
   👑 TALON MESTARI (kartan InfoWindow + venue-profiilisivu)
   ============================================================ */
/* Kompakti rivi InfoWindowissa: paikan paras voittoprosentti yhdellä silmäyksellä. */
.talon-mestari-rivi {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 6px;
  padding-top: 5px;
  border-top: 1px dashed #2B2B2B;
  font-size: 10.5px;
  color: #2B2B2B;
}

.talon-mestari-kruunu {
  font-size: 12px;
  line-height: 1;
}

.talon-mestari-otsikko {
  font-family: 'Oswald', sans-serif;
  font-size: 8.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: #2c705f;
}

.talon-mestari-nimi {
  font-weight: 700;
}

.talon-mestari-pros {
  font-weight: 700;
  color: #2c705f;
  font-variant-numeric: tabular-nums;
}

.venue-profile-tyhja {
  font-size: 11px;
  color: #2B2B2B;
  font-style: italic;
  text-align: center;
  padding: 10px;
}

/* ============================================================
   📍 PELIPAIKAN PROFIILI (venueProfileModal)
   ============================================================ */
.venue-profile-card {
  position: relative;
  text-align: center;
  max-height: 85vh;
  overflow-y: auto;
}

.venue-profile-nimi {
  font-family: 'Oswald', sans-serif;
  font-size: 22px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #2B2B2B;
  margin: 6px 0 2px 0;
  line-height: 1.1;
}

.venue-profile-osoite {
  font-size: 11px;
  color: #2B2B2B;
  opacity: 0.75;
  margin-bottom: 10px;
}

/* Liigabaari-tunnus, sama visuaalinen kieli kuin kartan kuplassa */
.venue-profile-liigabaari {
  display: inline-block;
  background: linear-gradient(180deg, #388975 0%, #2c705f 60%, #1f5043 100%);
  border: 1.5px solid #46A28B;
  border-radius: 6px;
  padding: 3px 14px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
  margin-bottom: 2px;
}

.venue-profile-liigabaari-ylarivi,
.venue-profile-liigabaari-alarivi {
  display: block;
  font-family: 'Oswald', sans-serif;
  font-weight: 700;
  color: #F5F1E8;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  line-height: 1;
}

.venue-profile-liigabaari-ylarivi { font-size: 8px; margin-bottom: 1px; }
.venue-profile-liigabaari-alarivi { font-size: 12px; }

.venue-profile-tilastot {
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 12px 0;
  padding: 10px 0;
  border-top: 1px dashed #2B2B2B;
  border-bottom: 1px dashed #2B2B2B;
}

.venue-profile-tilasto {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 72px;
}

.venue-profile-luku {
  font-family: 'Oswald', sans-serif;
  font-size: 18px;
  font-weight: 700;
  color: #2c705f;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.venue-profile-selite {
  font-size: 8.5px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: #2B2B2B;
  opacity: 0.7;
  margin-top: 2px;
}

.venue-profile-osio { margin-top: 4px; }

.venue-profile-osio-otsikko {
  font-family: 'Oswald', sans-serif;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: #2B2B2B;
  margin: 0 0 8px 0;
}

.venue-profile-reitti {
  display: block;
  margin-top: 14px;
  font-size: 11px;
  font-weight: 700;
  color: #2c705f;
  text-decoration: none;
  border: 1.5px solid #2c705f;
  border-radius: 20px;
  padding: 7px 12px;
  transition: background 0.15s ease, color 0.15s ease;
}

.venue-profile-reitti:hover {
  background: #2c705f;
  color: #F5F1E8;
}

/* "Avaa profiili" -painike kartan InfoWindowissa */
.venue-profile-avaa-btn {
  display: block;
  width: 100%;
  margin-top: 7px;
  padding: 5px 8px;
  background: linear-gradient(180deg, #388975 0%, #2c705f 100%);
  color: #F5F1E8;
  border: 1px solid #1f5043;
  border-radius: 6px;
  font-family: 'Oswald', sans-serif;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  cursor: pointer;
}

.venue-profile-avaa-btn:hover { background: #1f5043; }

/* 🍺 LIIGABAARI-KIRJAUTUMINEN (venue-profiilissa) */
.venue-checkin-box {
  background: linear-gradient(180deg, #E0EBE6 0%, #D2E2DB 100%);
  border: 1.5px solid #2c705f;
  border-radius: 10px;
  padding: 10px 12px;
  margin: 12px 0;
  text-align: center;
}

.venue-checkin-otsikko {
  font-family: 'Oswald', sans-serif;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: #1f5043;
  margin-bottom: 4px;
}

.venue-checkin-teksti {
  font-size: 10.5px;
  line-height: 1.4;
  color: #2B2B2B;
  margin: 0 0 8px 0;
}

.venue-checkin-btn {
  width: 100%;
  padding: 8px 10px;
  background: linear-gradient(180deg, #388975 0%, #2c705f 100%);
  color: #F5F1E8;
  border: 1.5px solid #1f5043;
  border-radius: 20px;
  font-family: 'Oswald', sans-serif;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  cursor: pointer;
}

.venue-checkin-btn:hover:not(:disabled) { background: #1f5043; }
.venue-checkin-btn:disabled { opacity: 0.65; cursor: default; }

.venue-checkin-tila {
  font-size: 10.5px;
  line-height: 1.35;
  margin-top: 6px;
  min-height: 0;
}

.venue-checkin-tila.ok    { color: #1f5043; font-weight: 700; }
.venue-checkin-tila.virhe { color: #8f4954; font-weight: 600; }

/* 🍺 LIIGABAARI-KIRJAUTUMINEN KARTAN INFOWINDOWISSA
   Siirretty tänne profiilimodaalista 17.8.2026: bonus on koko pelipaikka-
   ominaisuuden tärkein kannustin, eikä sitä löytänyt kukaan profiilin takaa.
   Kuplassa tila on ahdas, joten laatikko on tiiviimpi kuin profiiliversio -
   nappityylit (.venue-checkin-btn/-tila) ovat samat, vain kehys on oma. */
.iw-checkin-box {
  margin: 6px 0 4px 0;
  padding: 7px 8px 6px 8px;
  background: linear-gradient(180deg, #fffbeb 0%, #fef3c7 100%);
  border: 1px solid #fde68a;
  border-radius: 8px;
  text-align: center;
}

.iw-checkin-otsikko {
  font-family: 'Oswald', sans-serif;
  font-size: 11px;
  font-weight: 700;
  color: #78350f;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 2px;
}

.iw-checkin-teksti {
  font-size: 10px;
  line-height: 1.35;
  color: #2B2B2B;
  margin-bottom: 6px;
}

/* Kuplassa nappi saa olla täysleveä - se on kuplan tärkein toiminto. */
.iw-checkin-box .venue-checkin-btn {
  width: 100%;
  margin: 0;
}

/* ============================================================
   📍 LÄHIMMÄT PELIPAIKAT -LISTA (kartan alapuolella)
   ============================================================ */

/* Kartta ja lähimpien lista yhdistettiin yhdeksi moduuliksi 18.8.2026.
   .lahimmat-kortti jäi tarpeettomaksi (oma korttinsa omine otsikkoineen);
   sisältö elää nyt .pelipaikat-moduulin sisällä kartan alla. */
.pelipaikat-moduuli {
  overflow: hidden; /* pitää kartan kulmat kortin pyöristyksen sisällä */
}

/* Karttalohko on nyt moduulin KESKELLÄ, ei sen pohjalla: alareunan pyöristys
   pois, muuten kartan ja listan väliin jäisi kaareva sauma. */
.pelipaikat-karttalohko {
  padding: 0;
  position: relative;
  border-radius: 0;
}

/* Kartan ja hakurivin väliin ohut erotin, jotta ne eivät näytä samalta
   pinnalta vaikka ovat samassa kortissa. */
.pelipaikat-moduuli .lahimmat-tyokalurivi {
  border-top: 2px solid #2B2B2B;
}

/* Otsikkorivi ilman otsikkotekstiä: suodatin oikeaan reunaan kuten ennenkin,
   ja palkki matalammaksi koska siinä ei ole enää isoa tekstiä kannateltavana. */
.rules-card-header.vain-suodatin {
  justify-content: flex-end !important;
  padding-top: 5px !important;
  padding-bottom: 5px !important;
}

.lahimmat-otsikkorivi {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* Täppä on otsikkorivillä, koska se rajaa koko listan sisällön - sen kuuluu
   näkyä ennen kuin pelaaja alkaa selata, ei listan alla. */
.lahimmat-tappa {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  font-weight: 700;
  color: #F5F1E8;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}

.lahimmat-tappa input {
  width: 14px;
  height: 14px;
  accent-color: #46A28B;
  cursor: pointer;
  margin: 0;
}

.lahimmat-tyokalurivi {
  display: flex;
  gap: 6px;
  padding: 8px 10px 6px 10px;
}

.lahimmat-hakukentta {
  flex: 1 1 auto;
  min-width: 0;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  padding: 7px 10px;
  border: 1.5px solid #2B2B2B;
  border-radius: 8px;
  background: #F5F1E8;
  color: #2B2B2B;
  outline: none;
}

.lahimmat-hakukentta:focus {
  border-color: #46A28B;
  box-shadow: 0 0 0 2px rgba(70, 162, 139, 0.25);
}

/* Hakunappi hakukentan vieressa - sama korkeus kuin kentalla. */
.lahimmat-hae-btn {
  flex: 0 0 auto;
  font-family: 'Oswald', sans-serif;
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 7px 16px;
  border: 1.5px solid #122820;
  border-radius: 8px;
  background: #2E5E4E;
  color: #F5F1E8;
  cursor: pointer;
  white-space: nowrap;
}

.lahimmat-hae-btn:hover { background: #1f5043; }

/* Sijaintinappi on listan ALLA omalla rivillaan: se ei rajaa hakua vaan
   jarjestaa koko listan, joten hakukentan vieressa se sekoittui hakuun.
   Taysleveys kertoo etta se koskee koko listaa, ei yksittaista riviaa. */
.lahimmat-sijaintirivi {
  padding: 0 10px 10px 10px;
}

.lahimmat-sijainti-btn {
  width: 100%;
  font-family: 'Oswald', sans-serif;
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 9px 10px;
  border: 1.5px solid #122820;
  border-radius: 8px;
  background: #2E5E4E;
  color: #F5F1E8;
  cursor: pointer;
  white-space: nowrap;
}

.lahimmat-sijainti-btn:hover:not(:disabled) { background: #1f5043; }
.lahimmat-sijainti-btn:disabled { opacity: 0.65; cursor: default; }

.lahin-sijainti-tila {
  font-size: 10.5px;
  color: #F5F1E8;
  text-align: center;
  padding-top: 4px;
  min-height: 0;
}
.lahin-sijainti-tila.virhe { color: #fca5a5; }

/* Viisi riviä kerralla: rivin korkeus 52px + 4px väli = 56px, joten
   5 * 56 = 280px. Kuudes rivi jää puoliksi näkyviin, mikä on tarkoituksellista -
   se kertoo katsojalle että lista jatkuu ilman erillistä vihjettä. */
.lahimmat-lista {
  max-height: 292px;
  overflow-y: auto;
  padding: 0 10px 4px 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  scrollbar-width: thin;
  scrollbar-color: #2B2B2B #E2D4C1;
  -webkit-overflow-scrolling: touch;
}

.lahimmat-lista::-webkit-scrollbar { width: 6px; }
.lahimmat-lista::-webkit-scrollbar-track { background: #E2D4C1; border-radius: 3px; }
.lahimmat-lista::-webkit-scrollbar-thumb { background: #2B2B2B; border-radius: 3px; }

.lahin-rivi {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  min-height: 52px;
  padding: 7px 10px;
  border: 1.5px solid #2B2B2B;
  border-radius: 8px;
  background: linear-gradient(180deg, #FFFFFF 0%, #F5F1E8 100%);
  cursor: pointer;
  text-align: left;
  font-family: 'Inter', sans-serif;
}

.lahin-rivi:hover { background: #FFFFFF; border-color: #46A28B; }

/* Liigabaari erottuu kultaisella reunalla - sama visuaalinen kieli kuin
   kartan kultaisessa pinnissä, jotta yhteys on ilmeinen. */
.lahin-rivi.on-liigabaari {
  border-color: #B45309;
  background: linear-gradient(180deg, #fffbeb 0%, #fef3c7 100%);
}

.lahin-rivi-teksti { min-width: 0; flex: 1 1 auto; }

.lahin-rivi-nimi {
  font-family: 'Oswald', sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: #2B2B2B;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Rivin oikea reuna: Liigabaari-plakaatti ja etäisyys vierekkäin.
   Plakaatti on etäisyyden VASEMMALLA puolella, jolloin etäisyys pysyy
   samassa kohdassa joka rivillä ja on siksi silmäiltävissä pystysuunnassa. */
.lahin-rivi-oikea {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Luettava sana emojin sijaan: 🍺 ei kerro katsojalle mitä se tarkoittaa.
   Sama kultainen sävy kuin kartan Liigabaari-pinnissä ja rivin taustassa. */
/* Sama vihreä messinkilaatta kuin kartan InfoWindow'n Liigabaari-tunnisteessa
   (sama gradientti, reunaväri ja niitit) - yksirivisenä, koska listarivi on
   matala. Yhtenäinen tunnus molemmissa paikoissa kertoo katsojalle että kyse
   on samasta asiasta. */
.lahin-liigabaari-plakaatti {
  position: relative;
  flex: 0 0 auto;
  font-family: 'Oswald', sans-serif;
  font-size: 8px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.1px;
  color: #F5F1E8;
  background: linear-gradient(180deg, #388975 0%, #2c705f 60%, #1f5043 100%);
  border: 1.5px solid #46A28B;
  border-radius: 6px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
  padding: 3px 11px;
  white-space: nowrap;
  line-height: 1;
}

/* Niitit laatan reunoissa - InfoWindow'ssa nämä ovat omia divejä, mutta
   listassa ne saa ilmaiseksi pseudoelementteinä ilman ylimääräistä HTML:ää. */
.lahin-liigabaari-plakaatti::before,
.lahin-liigabaari-plakaatti::after {
  content: '';
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 2.5px;
  height: 2.5px;
  border-radius: 50%;
  background: #2c705f;
  pointer-events: none;
}
.lahin-liigabaari-plakaatti::before { left: 3px; }
.lahin-liigabaari-plakaatti::after  { right: 3px; }

.lahin-rivi-osoite {
  font-size: 10.5px;
  color: #4b4b4b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* min-width, ei kiinteä leveys: normaalit etäisyydet ("537 m" ... "20000 km")
   mahtuvat varattuun tilaan, jolloin plakaatti pysyy joka rivillä samassa
   kohdassa. Jos teksti joskus olisi pidempi, laatikko kasvaa eikä leikkaa
   tekstiä - se vain työntäisi plakaattia vasemmalle. */
.lahin-rivi-etaisyys {
  flex: 0 0 auto;
  min-width: 56px;
  text-align: right;
  font-family: 'Oswald', sans-serif;
  font-size: 12.5px;
  font-weight: 700;
  color: #1f5043;
  white-space: nowrap;
}

.lahin-tyhja {
  padding: 18px 10px;
  text-align: center;
  font-size: 11.5px;
  font-style: italic;
  color: #4b4b4b;
}

.lahimmat-alarivi {
  padding: 4px 10px 8px 10px;
  text-align: right;
  font-size: 10px;
  color: #F5F1E8;
  opacity: 0.75;
}

/* 🪟 PELIPAIKKAPROFIILIN AVAUS
   Kortti kasvaa auki siitä kohdasta jota klikattiin (kartan kupla tai listan
   rivi) sen sijaan että pomppaisi ruudun keskeltä. Lähtöpisteen asettaa JS
   muuttujiin --avaus-x/--avaus-y (ks. avaaVenueProfiili).

   Tämä KUMOAA yhteisen .modal-card-pomppuanimaation tälle kortille: pomppu on
   hyvä huomion kiinnittäjä, mutta tässä siirrytään kevytversiosta laajempaan
   näkymään, jolloin liike saa olla rauhallinen ja jatkuva. */
.modal-overlay.active .modal-card.venue-profile-card.venue-avautuu {
  transform-origin: var(--avaus-x, 50%) var(--avaus-y, 50%);
  animation: venueProfiiliAvautuu 0.34s cubic-bezier(0.22, 0.68, 0.3, 1) both;
}

@keyframes venueProfiiliAvautuu {
  0% {
    opacity: 0;
    transform: scale(0.55);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

/* Liikeherkkyys: jos käyttäjä on pyytänyt vähemmän liikettä, näytetään
   pelkkä häivytys. Skaalausanimaatio voi aiheuttaa huonovointisuutta. */
@media (prefers-reduced-motion: reduce) {
  .modal-overlay.active .modal-card.venue-profile-card.venue-avautuu {
    animation: venueProfiiliHaivytys 0.2s ease-out both;
  }
  @keyframes venueProfiiliHaivytys {
    0% { opacity: 0; }
    100% { opacity: 1; }
  }
}

/* ============================================================
   🍺 HANALIIGA SUOSITTELEE -KARUSELLI (kartan yläpuolella)
   ============================================================ */

.suositellut-kortti { margin-bottom: 10px; }

/* Nuolet ovat radan PÄÄLLÄ eivätkä vie tilaa kapealla näytöllä. */
.suositellut-rata-kehys {
  position: relative;
  padding: 10px 0 12px 0;
}

.suositellut-rata {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  /* proximity, EI mandatory: mandatory-snap nappaa ohjelmallisen vierityksen
     kesken ja vetää takaisin, jolloin nuolinapit eivät toimi lainkaan.
     Mitattu: kaksi peräkkäistä oikealle-painallusta jätti radan paikalleen.
     proximity antaa sormella vedettäessä saman tuntuman mutta ei kaappaa
     nuolinappien vieritystä. */
  scroll-snap-type: x proximity;
  padding: 0 12px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.suositellut-rata::-webkit-scrollbar { display: none; }

.suos-kortti {
  flex: 0 0 auto;
  width: 210px;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  padding: 0;
  border: 2px solid #2B2B2B;
  border-radius: 10px;
  background: #F5F1E8;
  cursor: pointer;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
  font-family: 'Inter', sans-serif;
  text-align: left;
}

.suos-kortti:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.4);
}

.suos-kortti-ylaosa {
  position: relative;
  height: 132px;
  background: linear-gradient(180deg, #E8E2D5 0%, #d8d0c0 100%);
  overflow: hidden;
}

/* Kuvat ovat päällekkäin ja vaihtuvat ristiinhäivytyksellä. Ilman absoluuttista
   asemointia ne veisivät tilaa vierekkäin ja kortti venyisi. */
.suos-kuvat { position: absolute; inset: 0; }

.suos-kuva {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.7s ease;
}
.suos-kuva.nakyva { opacity: 1; }

/* Tarjous kuvien päällä: nauha alareunassa, jotta se ei peitä kuvan aihetta. */
.suos-tarjous-nauha {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 4px 7px;
  background: linear-gradient(180deg, rgba(180, 83, 9, 0.88) 0%, rgba(120, 53, 15, 0.95) 100%);
  color: #FFFBEB;
  font-family: 'Oswald', sans-serif;
  /* Pienennetty 10.5 -> 9: tarjous on lisätieto, ei kortin pääasia, ja
     pitkä tarjousteksti vei aiemmin kolmanneksen kuvasta. */
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  text-align: center;
}

/* Ilman kuvia: tarjous saa koko alueen. */
.suos-tarjous-iso {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 10px;
  background: linear-gradient(180deg, #fffbeb 0%, #fde68a 100%);
  text-align: center;
}

.suos-tarjous-otsikko {
  font-family: 'Oswald', sans-serif;
  font-size: 10px;
  font-weight: 700;
  color: #92400e;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.suos-tarjous-teksti {
  font-family: 'Oswald', sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: #2B2B2B;
  line-height: 1.2;
}

/* HUOM: tassa oli .suos-logo-iso -saannot. Logo ei ole enaa erillinen
   varasuunnitelma vaan ensimmainen dia kuvakierrossa (ks. rakennaDiat),
   joten saannot jaivat kuolleiksi ja poistettiin. */

/* Logo oikeassa yläkulmassa valkoisella pohjalla: logot ovat harvoin
   luettavia suoraan valokuvan päällä. */
/* Nurkkalogo ilman valkoista laatikkoa: kehys vei kohtuuttomasti tilaa
   pieneltä kuva-alueelta. Luettavuus valokuvan päällä hoidetaan varjolla,
   joka piirtää ääriviivan logon oman muodon mukaan - ei suorakulmiota. */
.suos-logo-nurkka {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.suos-logo-nurkka img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 0 2px rgba(0,0,0,0.85)) drop-shadow(0 1px 3px rgba(0,0,0,0.6));
}

.suos-kortti-alaosa {
  padding: 7px 8px 8px 8px;
  border-top: 2px solid #2B2B2B;
  background: #F5F1E8;
  text-align: center;
}

.suos-nimi {
  font-family: 'Oswald', sans-serif;
  /* font-size tulee JS:stä nimen pituuden mukaan (nimenFonttikoko) */
  font-weight: 700;
  color: #2B2B2B;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Osoite saa kiertyä: aiemmin se pakotettiin yhdelle riville ja katkesi
   kolmeen pisteeseen. Fonttikoko tulee JS:stä pituuden mukaan. */
.suos-osoite {
  color: #4b4b4b;
  line-height: 1.25;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.suos-nuoli {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 30px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #122820;
  border-radius: 8px;
  background: rgba(46, 94, 78, 0.94);
  color: #F5F1E8;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}
.suos-nuoli.vasen { left: 2px; }
.suos-nuoli.oikea { right: 2px; }
.suos-nuoli:disabled { opacity: 0.3; cursor: default; }
.suos-nuoli:hover:not(:disabled) { background: #1f5043; }

/* ============================================================
   🖼️ ESITTELYSISÄLLÖN HALLINTA (venue dashboard, admin)
   ============================================================ */

.venue-media-osio { margin-bottom: 14px; }

.venue-media-otsikko {
  font-family: 'Oswald', sans-serif;
  font-size: 11.5px;
  font-weight: 700;
  color: #2B2B2B;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 6px;
}

.venue-media-rivi {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.venue-media-logo,
.venue-media-kuva {
  position: relative;
  width: 74px;
  height: 74px;
  border: 1.5px solid #2B2B2B;
  border-radius: 8px;
  overflow: hidden;
  background: #FFFFFF;
  flex: 0 0 auto;
}

.venue-media-logo img { width: 100%; height: 100%; object-fit: contain; padding: 4px; }
.venue-media-kuva img { width: 100%; height: 100%; object-fit: cover; }

.venue-media-poista {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: rgba(122, 46, 58, 0.92);
  color: #F5F1E8;
  font-size: 11px;
  line-height: 1;
  cursor: pointer;
}
.venue-media-poista:hover { background: #7A2E3A; }

/* Tiedostovalitsin piilotetaan ja label toimii nappina - natiivi
   tiedostokenttä ei taivu sivuston tyyliin. */
.venue-media-lisaa {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 74px;
  height: 74px;
  padding: 6px 10px;
  border: 1.5px dashed #2E5E4E;
  border-radius: 8px;
  background: #EBF2EF;
  color: #1f5043;
  font-family: 'Oswald', sans-serif;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  text-align: center;
  cursor: pointer;
  flex: 0 0 auto;
}
.venue-media-lisaa:hover { background: #dbe9e3; }
.venue-media-lisaa.pieni { min-width: 60px; }
.venue-media-lisaa input { display: none; }

.venue-media-tyhja-logo,
.venue-media-tayna {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 74px;
  height: 74px;
  padding: 6px;
  border: 1.5px solid #cfc7b8;
  border-radius: 8px;
  background: #F5F1E8;
  color: #6b6b6b;
  font-size: 10.5px;
  font-style: italic;
  text-align: center;
  flex: 0 0 auto;
}

.venue-media-tarjousrivi { display: flex; gap: 6px; }

.venue-media-tarjous-kentta {
  flex: 1 1 auto;
  min-width: 0;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  padding: 7px 10px;
  border: 1.5px solid #2B2B2B;
  border-radius: 8px;
  background: #FFFFFF;
  color: #2B2B2B;
  outline: none;
}

.venue-media-tallenna {
  flex: 0 0 auto;
  font-family: 'Oswald', sans-serif;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  padding: 7px 14px;
  border: 1.5px solid #122820;
  border-radius: 8px;
  background: #2E5E4E;
  color: #F5F1E8;
  cursor: pointer;
}
.venue-media-tallenna:hover { background: #1f5043; }

.venue-media-vinkki {
  font-size: 10.5px;
  color: #5f5f5f;
  font-style: italic;
  margin-top: 4px;
}

.venue-media-suositeltu {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 9px 10px;
  border: 1.5px solid #B45309;
  border-radius: 8px;
  background: linear-gradient(180deg, #fffbeb 0%, #fef3c7 100%);
  font-family: 'Oswald', sans-serif;
  font-size: 11.5px;
  font-weight: 700;
  color: #78350f;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  cursor: pointer;
  user-select: none;
}
.venue-media-suositeltu input { width: 15px; height: 15px; accent-color: #B45309; cursor: pointer; margin: 0; }

.venue-media-tila {
  font-size: 11px;
  color: #2B2B2B;
  margin-top: 6px;
  min-height: 0;
}

/* ============================================================
   📐 VENUE-DASHBOARDIN HAITARI
   ============================================================
   Dashboard oli seitsemän korttia peräkkäin, kaikki auki - näkymä venyi koko
   sivun mittaiseksi. Nyt vain yhteenveto on auki ja loput avataan otsikosta.
   Rakenne kootaan koodissa (rakennaVenueDashHaitari), jotta myöhemmin
   lisättävät kortit tulevat mukaan automaattisesti. */

.venue-dash-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  user-select: none;
}

/* Yhteenvetokortti ei mene kiinni, joten se ei myöskään näytä klikattavalta. */
.venue-dash-header.aina-auki { cursor: default; }

.venue-dash-header .accordion-arrow {
  flex: 0 0 auto;
  font-size: 14px;
  line-height: 1;
  color: #F5F1E8;
  opacity: 0.85;
}

/* display:none eikä max-height: kaaviot käyttävät prosenttileveyksiä eivätkä
   mittaa itseään, joten piilotettuna renderöinti on turvallista - ja näin
   suljettu osio ei vie yhtään pystytilaa. */
.venue-dash-body { display: none; }
.venue-dash-body.open { display: block; }

/* Suljetun kortin alareuna jää muuten teräväksi, koska pyöristys on bodyssa. */
.venue-dash-osio { overflow: hidden; }

/* Suljettu osio on yhden rivin palkki: otsikkorivin omat säätimet piilotetaan.
   Aikavälivalitsin näkyvissä suljetun kaavion yllä on harhaanjohtava - se
   lupaa suodattavansa jotain mitä ei näy. */
.venue-dash-osio.osio-kiinni .venue-dash-header select,
.venue-dash-osio.osio-kiinni .venue-dash-header .venue-status-tag {
  display: none;
}

/* Logodia täyttää ruudun reunasta reunaan ilman että logo rajautuu:
   taustalla sumennettu suurennos samasta logosta, päällä kokonainen logo.
   Mitattu tarve: kuva-alue 206x132 (vaaka), tyypillinen logo neliö - pelkkä
   cover-täyttö veisi logosta 36 % pois ylä- ja alareunasta. */
.suos-kuva.on-logo {
  display: block;
  padding: 0;
  background: #FFFFFF;
  overflow: hidden;
}

.suos-logo-tausta {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  /* Suurennos peittää sumennuksen aiheuttamat läpinäkyvät reunat. */
  transform: scale(1.25);
  filter: blur(16px) saturate(1.15) brightness(0.9);
}

.suos-logo-etu {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 8px;
}

/* Nurkkalogo pois sillä aikaa kun logo on itse isona diana - sama kuva
   kahdesti samassa kortissa näyttäisi virheeltä. */
.suos-kortti.logo-esilla .suos-logo-nurkka {
  opacity: 0;
  pointer-events: none;
}

/* Häivytys samaa tahtia kuvanvaihdon kanssa, muuten nurkka välähtäisi. */
.suos-logo-nurkka { transition: opacity 0.5s ease; }

/* Nimi saa kiertyä kahdelle riville ja fonttikoko tulee JS:stä pituuden
   mukaan (nimenFonttikoko). Kiinteä korkeus pitää korttien alaosat samalla
   tasolla riippumatta siitä kiertyykö nimi. */
.suos-nimi {
  white-space: normal;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-height: 1.15;
  /* 2.5em: kaksi rivia mahtuu ilman etta rivivali leikkautuu ylhaalta. */
  min-height: 2.5em;
  display: -webkit-box;
}