/* ==========================================================================
   MMO11 — ŞANS TOPU (LUCKY BALL TOWER) MODAL CSS
   AGENTS.md §4.2: Pencere İçi Panel Kuralı (In-Window Panel Rule)
   RENK PALETİ: KESİNLİKLE LACİVERT KULLANILMAZ!
   Saf Nötr Siyah/Karbon (#09090b, #121214, #18181b), Platin/Beyaz (#ffffff, #e4e4e7),
   Buz Mavisi/Siyan (#38bdf8, #06b6d4) ve Altın Parıltısı (#f59e0b).
   ========================================================================== */

.lucky-ball-modal {
  position: absolute;
  inset: 0;
  z-index: 9995;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.88);
  padding: clamp(10px, 2.5%, 28px);
  box-sizing: border-box;
}

/* Ana Kart */
.lucky-ball-card {
  width: 100%;
  max-width: 1080px;
  /* Sabit yükseklik: içerik ne olursa olsun panel uzayıp kısalmaz */
  height: 560px;
  max-height: 90%;
  background: linear-gradient(180deg, #18181b 0%, #09090b 100%);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.9), 0 0 35px rgba(6, 182, 212, 0.12);
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
  box-sizing: border-box;
  color: #f4f4f5;
  font-family: 'Rajdhani', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* Kapatma Butonu (Sağ Üst 16px, 18px) */
.lucky-ball-close-btn {
  position: absolute;
  top: 16px;
  right: 18px;
  width: 38px;
  height: 38px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 50%;
  color: #d4d4d8;
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  z-index: 20;
}

.lucky-ball-close-btn:hover {
  background: rgba(239, 68, 68, 0.3);
  border-color: #ef4444;
  color: #ffffff;
  transform: rotate(90deg);
}

/* Header Alanı */
.lucky-ball-header {
  padding: 16px 24px;
  background: #121214;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}

.lucky-ball-title-group {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.lucky-ball-title {
  margin: 0;
  font-size: 20px;
  font-weight: 900;
  letter-spacing: 0.6px;
  color: #ffffff;
  display: flex;
  align-items: center;
  gap: 10px;
}

.lucky-ball-title-badge {
  font-size: 11px;
  font-weight: 800;
  padding: 3px 9px;
  border-radius: 6px;
  background: #27272a;
  color: #38bdf8;
  border: 1px solid rgba(56, 189, 248, 0.4);
  text-transform: uppercase;
}

.lucky-ball-subtitle {
  margin: 0;
  font-size: 12px;
  color: #a1a1aa;
}

/* Sayaç Çipleri */
.lucky-ball-header-stats {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-right: 50px;
}

.lucky-stat-chip {
  display: flex;
  align-items: center;
  gap: 7px;
  background: #18181b;
  border: 1px solid rgba(255, 255, 255, 0.12);
  padding: 6px 12px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 800;
  color: #ffffff;
}

.lucky-stat-icon {
  width: 20px;
  height: 20px;
  object-fit: contain;
}

/* Gövde — İki Sütunlu Grid */
.lucky-ball-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 18px;
  padding: 18px 24px;
  box-sizing: border-box;
}

@media (max-width: 860px) {
  .lucky-ball-body {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   SOL SÜTUN: KAZANILAN ÖDÜLLER TORBASI (MODERN SİYAH / GRİ)
   ========================================================================== */
.lucky-bag-card {
  background: #121214;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 0;
  overflow: hidden;
}

.lucky-bag-title {
  margin: 0;
  font-size: 13px;
  font-weight: 800;
  color: #e4e4e7;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding-bottom: 8px;
  letter-spacing: 0.5px;
}

.lucky-bag-items-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

.lucky-bag-empty {
  font-size: 12px;
  color: #71717a;
  text-align: center;
  padding: 30px 10px;
  line-height: 1.5;
}

.lucky-bag-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #18181b;
  border: 1px solid rgba(255, 255, 255, 0.07);
  padding: 8px 12px;
  border-radius: 10px;
  transition: all 0.2s ease;
}

.lucky-bag-item:hover {
  background: #27272a;
  border-color: rgba(255, 255, 255, 0.15);
}

.lucky-bag-item-left {
  display: flex;
  align-items: center;
  gap: 8px;
}

.lucky-bag-item-icon {
  width: 24px;
  height: 24px;
  object-fit: contain;
}

.lucky-bag-item-name {
  font-size: 12px;
  font-weight: 700;
  color: #a1a1aa;
}

.lucky-bag-item-val {
  font-size: 13px;
  font-weight: 900;
  color: #ffffff;
}

.lucky-bag-footer-info {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 11px;
  color: #a1a1aa;
  line-height: 1.4;
  text-align: center;
}

/* ==========================================================================
   SAĞ SÜTUN: OYUN SAHASI (ARENA)
   ========================================================================== */
.lucky-arena {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* LOBİ KARTI (IDLE) */
.lucky-lobby-card {
  background: #121214;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  text-align: center;
}

.lucky-lobby-banner {
  background: linear-gradient(180deg, #1f1f23 0%, #141416 100%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 16px;
}

.lucky-lobby-banner h4 {
  margin: 0 0 6px 0;
  font-size: 18px;
  font-weight: 900;
  color: #ffffff;
}

.lucky-lobby-banner p {
  margin: 0;
  font-size: 12px;
  color: #a1a1aa;
  line-height: 1.5;
}

/* Günlük Ücretsiz Bilet Alanı */
.lucky-daily-ticket-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #18181b;
  border: 1px solid rgba(16, 185, 129, 0.25);
  border-radius: 12px;
  padding: 12px 16px;
}

.lucky-daily-left {
  display: flex;
  align-items: center;
  gap: 12px;
  text-align: left;
}

.lucky-daily-title {
  font-size: 14px;
  font-weight: 800;
  color: #ffffff;
}

.lucky-daily-desc {
  font-size: 11px;
  color: #a1a1aa;
}

.btn-claim-free-ticket {
  background: #10b981;
  border: 1px solid #34d399;
  color: #ffffff;
  padding: 8px 18px;
  font-size: 13px;
  font-weight: 800;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-claim-free-ticket:hover {
  background: #059669;
  transform: translateY(-1px);
}

.btn-claim-free-ticket:disabled {
  background: #27272a;
  border-color: #3f3f46;
  color: #71717a;
  cursor: not-allowed;
  transform: none;
}

/* Bilet Paketleri (3 Seçenek) */
.lucky-packages-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

@media (max-width: 600px) {
  .lucky-packages-grid {
    grid-template-columns: 1fr;
  }
}

.lucky-pkg-card {
  background: #18181b;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 14px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  transition: all 0.2s ease;
  position: relative;
}

.lucky-pkg-card:hover {
  border-color: rgba(255, 255, 255, 0.25);
  transform: translateY(-2px);
  background: #202024;
}

.lucky-pkg-badge {
  position: absolute;
  top: -8px;
  background: #eab308;
  color: #000000;
  font-size: 10px;
  font-weight: 900;
  padding: 2px 7px;
  border-radius: 6px;
  text-transform: uppercase;
}

.lucky-pkg-icon {
  width: 48px;
  height: 48px;
  object-fit: contain;
}

.lucky-pkg-name {
  font-size: 13px;
  font-weight: 800;
  color: #ffffff;
}

.lucky-pkg-price-btn {
  width: 100%;
  background: #27272a;
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #ffffff;
  font-size: 12px;
  font-weight: 800;
  padding: 8px 6px;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: all 0.2s ease;
}

.lucky-pkg-price-btn:hover {
  background: #3f3f46;
  border-color: rgba(255, 255, 255, 0.3);
}

.lucky-pkg-price-btn.iap-btn {
  background: #10b981;
  border-color: #34d399;
}

.lucky-pkg-price-btn.iap-btn:hover {
  background: #059669;
}

/* Başla Butonu */
.btn-lucky-start {
  background: #ffffff;
  border: none;
  box-shadow: 0 4px 20px rgba(255, 255, 255, 0.25);
  color: #000000;
  font-size: 15px;
  font-weight: 900;
  padding: 13px 28px;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.btn-lucky-start:hover {
  background: #f4f4f5;
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(255, 255, 255, 0.35);
}

/* ==========================================================================
   2. AKTİF OYUN EKRANI (IN PROGRESS)
   ========================================================================== */
.lucky-stage-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #121214;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  padding: 12px 18px;
  flex-wrap: wrap;
  gap: 10px;
}

.lucky-stage-number {
  font-size: 16px;
  font-weight: 900;
  color: #ffffff;
  display: flex;
  align-items: center;
  gap: 10px;
}

.lucky-stage-type-badge {
  font-size: 11px;
  font-weight: 800;
  padding: 3px 9px;
  border-radius: 6px;
  background: #27272a;
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #a1a1aa;
}

.lucky-stage-type-badge.bonus {
  background: #eab308;
  color: #000000;
  font-weight: 900;
  border-color: #facc15;
  box-shadow: 0 0 14px rgba(234, 179, 8, 0.4);
}

.btn-claim-and-exit {
  background: #10b981;
  border: 1px solid #34d399;
  color: #ffffff;
  font-size: 13px;
  font-weight: 900;
  padding: 8px 16px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 6px;
}

.btn-claim-and-exit:hover {
  background: #059669;
  transform: translateY(-1px);
}

/* 4 TOP ALANI */
.lucky-balls-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  padding: 8px 0;
}

@media (max-width: 680px) {
  .lucky-balls-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.lucky-ball-slot {
  aspect-ratio: 1 / 1.15;
  background: #18181b;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 12px;
  box-sizing: border-box;
  cursor: pointer;
  position: relative;
  transition: all 0.25s ease;
  user-select: none;
}

.lucky-ball-slot:hover {
  border-color: rgba(255, 255, 255, 0.35);
  transform: translateY(-3px);
  background: #202024;
}

.lucky-ball-slot.disabled {
  pointer-events: none;
  opacity: 0.6;
}

.lucky-ball-img {
  width: 76px;
  height: 76px;
  object-fit: contain;
  transition: transform 0.3s ease;
  filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.6));
}

.lucky-ball-slot:hover .lucky-ball-img {
  transform: scale(1.08);
}

/* Bonus Katı Altın Efekti */
.lucky-ball-slot.bonus-ball {
  border-color: rgba(234, 179, 8, 0.35);
  background: radial-gradient(circle at center, rgba(234, 179, 8, 0.08) 0%, #18181b 100%);
}

.lucky-ball-slot.bonus-ball:hover {
  border-color: #facc15;
  box-shadow: 0 0 20px rgba(234, 179, 8, 0.3);
}

.lucky-ball-label {
  margin-top: 10px;
  font-size: 13px;
  font-weight: 800;
  color: #a1a1aa;
}

/* SEÇİLEN KART AÇILIŞ ANİMASYONU */
.lucky-ball-slot.revealed-picked {
  animation: pickRevealAnim 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes pickRevealAnim {
  0% { transform: scale(0.9) rotateY(90deg); opacity: 0.5; }
  100% { transform: scale(1) rotateY(0deg); opacity: 1; }
}

.lucky-ball-slot.revealed-reward {
  border-color: #10b981;
  background: rgba(16, 185, 129, 0.12);
  box-shadow: 0 0 25px rgba(16, 185, 129, 0.35);
}

.lucky-ball-slot.revealed-red-card {
  border-color: #ef4444;
  background: rgba(239, 68, 68, 0.15);
  box-shadow: 0 0 25px rgba(239, 68, 68, 0.4);
  animation: shakeCard 0.4s ease-in-out;
}

@keyframes shakeCard {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-6px); }
  75% { transform: translateX(6px); }
}

.lucky-revealed-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-align: center;
}

.lucky-revealed-icon {
  width: 52px;
  height: 52px;
  object-fit: contain;
}

.lucky-revealed-title {
  font-size: 14px;
  font-weight: 900;
  color: #ffffff;
}

/* Kırmızı Kart */
.red-card-graphic {
  width: 48px;
  height: 68px;
  background: #ef4444;
  border: 2px solid #ffffff;
  border-radius: 6px;
  box-shadow: 0 8px 20px rgba(239, 68, 68, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-weight: 900;
  font-size: 20px;
}

/* Kırmızı Kart Uyarı Paneli */
.lucky-red-card-alert {
  background: #1c1315;
  border: 1px solid rgba(239, 68, 68, 0.4);
  border-radius: 14px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
}

.lucky-red-card-alert h4 {
  margin: 0;
  font-size: 18px;
  font-weight: 900;
  color: #ef4444;
}

.lucky-red-card-alert p {
  margin: 0;
  font-size: 13px;
  color: #d4d4d8;
}

.lucky-red-card-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
}

.btn-rescue-continue {
  background: #ffffff;
  border: none;
  color: #000000;
  font-size: 14px;
  font-weight: 900;
  padding: 10px 22px;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: all 0.2s ease;
}

.btn-rescue-continue:hover {
  background: #e4e4e7;
  transform: translateY(-1px);
}

.btn-give-up {
  background: transparent;
  border: 1px solid rgba(239, 68, 68, 0.4);
  color: #fca5a5;
  font-size: 13px;
  font-weight: 800;
  padding: 10px 18px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-give-up:hover {
  background: rgba(239, 68, 68, 0.2);
  color: #ffffff;
}

/* Tur Geçiş Bildirimi (Auto-Advance) */
.lucky-stage-progressing-hint {
  font-size: 13px;
  font-weight: 800;
  color: #10b981;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 6px;
  animation: pulseHint 1s infinite alternate;
}

@keyframes pulseHint {
  0% { opacity: 0.7; }
  100% { opacity: 1; transform: scale(1.02); }
}