/* =========================================================
   ZENİN KLANI: 24 KARE — Design System
   ========================================================= */
:root {
  --ink: #0b0710;
  --night: #140b1f;
  --plum: #2a1236;
  --crimson: #d42a48;
  --crimson-2: #ff4d6a;
  --gold: #f0c96e;
  --gold-2: #ffe7a8;
  --ice: #7fe3ff;
  --ice-2: #c9f5ff;
  --paper: #f3e9dc;
  --muted: #a99bb5;
  --hp: #4ee08a;
  --ce: #6aa8ff;
  --glass: rgba(20, 10, 30, 0.62);
  --glass-border: rgba(240, 201, 110, 0.35);
  --u: 1;
  --font-pixel: 'Pixelify Sans', 'Press Start 2P', monospace;
  --font-ui: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font: var(--font-ui);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body {
  width: 100%;
  height: 100%;
  background: #07040a !important;
  margin: 0;
  padding: 0;
  overflow: hidden;
  font-family: var(--font-ui);
  color: var(--paper);
  user-select: none;
}

button,
input,
select,
textarea {
  font-family: var(--font-ui);
}

#stage {
  position: absolute;
  left: 0;
  top: 0;
  transform: none;
  width: 960px;
  height: 540px;
  font-size: calc(var(--u) * 8px);
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(240, 201, 110, 0.15), 0 30px 80px rgba(0, 0, 0, 0.7);
  cursor: crosshair;
}

#game {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  display: block;
}

/* ---------- generic screens ---------- */
.screen,
.hud,
.dialog,
.cutin {
  position: absolute;
  inset: 0;
  display: none;
}

.screen.active,
.hud.active {
  display: flex;
}

.dialog.active {
  display: flex;
}

.cutin.active {
  display: block;
}

.modal {
  align-items: center;
  justify-content: center;
  background: rgba(8, 4, 12, 0.92);
  z-index: 50;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.glass-card {
  background: linear-gradient(160deg, #240f30, #0c0512);
  border: 0.15em solid var(--glass-border);
  border-radius: 0.6em;
  padding: 1.8em 2.4em;
  box-shadow: 0 0 0 0.12em rgba(0, 0, 0, .6), 0 1.5em 3em rgba(0, 0, 0, .55), inset 0 0 2em rgba(212, 42, 72, 0.12);
  text-align: center;
  max-height: 94%;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(240, 201, 110, 0.4) transparent;
}

.glass-card h2 {
  font-size: 2.4em;
  letter-spacing: .08em;
  color: var(--gold);
  text-shadow: 0 .12em 0 #6b2a1a;
  margin-bottom: .6em;
}

.kicker {
  font-size: 1.1em;
  letter-spacing: .35em;
  color: var(--crimson-2);
  text-shadow: 0 0 .6em rgba(255, 77, 106, .5);
}

.ice {
  color: var(--ice);
  text-shadow: 0 0 .5em rgba(127, 227, 255, .6);
}

/* ---------- buttons ---------- */
/* ---------- buttons & menu layout ---------- */
.menu {
  display: flex;
  flex-direction: column;
  gap: 0.5em;
  margin-top: 0.7em;
  width: 100%;
  box-sizing: border-box;
}

.menu.row {
  flex-direction: row;
  justify-content: center;
}

/* 1. Hero CTA (Ana Başlatıcı Buton) */
.btn-hero-start {
  width: 100%;
  font-size: 1.18em !important;
  font-weight: 800 !important;
  padding: 0.7em 1.2em !important;
  border-radius: 0.8rem !important;
  background: linear-gradient(135deg, #e11d48, #be123c, #881337) !important;
  border: 1.8px solid #fda4af !important;
  box-shadow: 0 6px 24px rgba(225, 29, 72, 0.55), inset 0 0 16px rgba(255, 255, 255, 0.25) !important;
  color: #ffffff !important;
  animation: heroPulse 3s ease-in-out infinite;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
}

@keyframes heroPulse {
  0%, 100% {
    box-shadow: 0 6px 24px rgba(225, 29, 72, 0.55), inset 0 0 16px rgba(255, 255, 255, 0.25);
    border-color: #fda4af;
  }
  50% {
    box-shadow: 0 8px 34px rgba(225, 29, 72, 0.85), inset 0 0 24px rgba(255, 255, 255, 0.45);
    border-color: #ffffff;
  }
}

.btn-hero-start:hover {
  transform: translateY(-2px) scale(1.01) !important;
  box-shadow: 0 10px 38px rgba(225, 29, 72, 0.9), inset 0 0 24px rgba(255, 255, 255, 0.45) !important;
}

/* 2. Lobi 2 Sütunlu Eylem Izgarası (Glassmorphism Tiles) */
.lobby-actions-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.4em;
  width: 100%;
  box-sizing: border-box;
}

.lobby-actions-grid .btn {
  font-size: 0.95em;
  padding: 0.52em 0.8em;
  border-radius: 0.7rem;
  justify-content: flex-start;
  text-align: left;
  gap: 0.55em;
  width: 100%;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-sizing: border-box;
  margin: 0;
}

.lobby-actions-grid .btn .btn-icon-badge {
  font-size: 1.15em;
  flex-shrink: 0;
}

.lobby-actions-grid .btn .btn-label {
  font-size: 0.92em;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
}

/* 3. Alt Kompakt Bar */
.lobby-footer-actions {
  display: flex;
  gap: 0.4em;
  width: 100%;
  margin-top: 0.25em;
  box-sizing: border-box;
}

.lobby-footer-actions .btn-sm {
  font-size: 0.82em;
  padding: 0.42em 0.75em;
  border-radius: 0.6rem;
  flex: 1;
  min-width: 0;
  justify-content: center;
  gap: 0.35em;
  margin: 0;
}

@media (max-width: 520px) {
  .lobby-actions-grid {
    grid-template-columns: 1fr;
  }
}

.btn {
  font-family: var(--font);
  font-size: 1.25em;
  font-weight: 700;
  letter-spacing: .05em;
  color: #fff;
  background: linear-gradient(135deg, rgba(45, 20, 60, .85), rgba(20, 8, 30, .92));
  border: 1.5px solid rgba(240, 201, 110, .4);
  border-radius: .55em;
  padding: .55em 1.2em;
  cursor: pointer;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5em;
  transition: transform .15s cubic-bezier(0.2, 0.8, 0.2, 1), border-color .18s, box-shadow .18s, color .18s, background .18s;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .45);
  text-decoration: none;
  user-select: none;
}

.btn:hover,
.btn:focus-visible {
  outline: none;
  transform: translateY(-2px);
  border-color: #fff;
  box-shadow: 0 8px 20px rgba(0, 0, 0, .55);
}

.btn:active {
  transform: translateY(1px);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .5);
}

/* Buton İkon Rozeti */
/* Buton İkon Rozeti (Arka plan kutusu olmadan saf ve temiz ikon) */
.btn-icon-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2em;
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  flex-shrink: 0;
  margin-right: 0.25em;
  transition: transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.btn:hover .btn-icon-badge {
  transform: scale(1.22) rotate(-4deg);
}

/* =========================================================
   ÖZEL RENKLİ BUTON TEMALARI (Canlı & Jujutsu Karakter Renkleri)
   ========================================================= */

/* 1. Giriş Yap & Oyuncu Hesabı Butonu (Neon Lanetli Mavi - Rikugan Aura) */
.btn-login-glow,
.btn-menu-auth {
  background: linear-gradient(135deg, rgba(0, 114, 255, 0.5), rgba(0, 240, 255, 0.38), rgba(46, 16, 101, 0.65)) !important;
  border: 1.8px solid #00f0ff !important;
  color: #e0f7ff !important;
  text-shadow: 0 0 10px rgba(0, 240, 255, 0.8);
  box-shadow: 0 4px 18px rgba(0, 180, 255, 0.4), inset 0 0 14px rgba(0, 240, 255, 0.22) !important;
}

.btn-login-glow:hover,
.btn-menu-auth:hover {
  border-color: #ffffff !important;
  color: #ffffff !important;
  box-shadow: 0 8px 26px rgba(0, 240, 255, 0.7), inset 0 0 20px rgba(0, 240, 255, 0.45) !important;
}

/* 2. Google OAuth Butonu (Karanlık Jujutsu Cam Teması) */
.btn-google-glow {
  background: linear-gradient(135deg, rgba(26, 12, 38, 0.92), rgba(12, 6, 20, 0.96)) !important;
  color: #f1f5f9 !important;
  font-weight: 700;
  border: 1.5px solid rgba(66, 133, 244, 0.65) !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45), 0 0 10px rgba(66, 133, 244, 0.25) !important;
  text-shadow: none !important;
}

.btn-google-glow:hover {
  background: linear-gradient(135deg, rgba(38, 18, 56, 0.95), rgba(18, 8, 30, 0.98)) !important;
  box-shadow: 0 6px 22px rgba(66, 133, 244, 0.55), 0 0 16px rgba(66, 133, 244, 0.35) !important;
  border-color: #4285f4 !important;
  color: #ffffff !important;
  transform: translateY(-2px);
}

/* 3. Bölüm Seç & Malikaneye Gir (Zenin Alevi Kırmızı) */
.btn-theme-start {
  background: linear-gradient(135deg, #e02448, #990024) !important;
  border: 1.8px solid #ff859d !important;
  color: #ffffff !important;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);
  box-shadow: 0 4px 20px rgba(224, 36, 72, 0.48), inset 0 0 14px rgba(255, 120, 150, 0.3) !important;
}

.btn-theme-start:hover {
  border-color: #ffffff !important;
  box-shadow: 0 8px 28px rgba(224, 36, 72, 0.75), inset 0 0 20px rgba(255, 180, 200, 0.45) !important;
}

/* 4. Liderlik Tablosu (Altın & Kehribar Şampiyonluk) */
.btn-theme-leaderboard {
  background: linear-gradient(135deg, rgba(217, 119, 6, 0.5), rgba(146, 64, 14, 0.72)) !important;
  border: 1.5px solid #fbbf24 !important;
  color: #fef3c7 !important;
  text-shadow: 0 0 8px rgba(251, 191, 36, 0.55);
  box-shadow: 0 4px 16px rgba(245, 158, 11, 0.38) !important;
}

.btn-theme-leaderboard:hover {
  border-color: #ffffff !important;
  box-shadow: 0 8px 24px rgba(245, 158, 11, 0.65) !important;
}

/* 5. Sunucular & Wi-Fi (Siber Turkuaz & Ağ) */
.btn-theme-servers {
  background: linear-gradient(135deg, rgba(8, 145, 178, 0.48), rgba(14, 116, 144, 0.72)) !important;
  border: 1.5px solid #22d3ee !important;
  color: #cffafe !important;
  text-shadow: 0 0 8px rgba(34, 211, 238, 0.55);
  box-shadow: 0 4px 16px rgba(6, 182, 212, 0.38) !important;
}

.btn-theme-servers:hover {
  border-color: #ffffff !important;
  box-shadow: 0 8px 24px rgba(6, 182, 212, 0.65) !important;
}

/* 6. Oyuncu Listesi (Büyücü Zümrüt Yeşili) */
.btn-theme-players {
  background: linear-gradient(135deg, rgba(5, 150, 105, 0.48), rgba(4, 120, 87, 0.72)) !important;
  border: 1.5px solid #34d399 !important;
  color: #d1fae5 !important;
  text-shadow: 0 0 8px rgba(52, 211, 153, 0.55);
  box-shadow: 0 4px 16px rgba(16, 185, 129, 0.38) !important;
}

.btn-theme-players:hover {
  border-color: #ffffff !important;
  box-shadow: 0 8px 24px rgba(16, 185, 129, 0.65) !important;
}

/* 7. Kulüpler (Klan Moru & Ametist) */
.btn-theme-clubs {
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.48), rgba(91, 33, 182, 0.72)) !important;
  border: 1.5px solid #c084fc !important;
  color: #ede9fe !important;
  text-shadow: 0 0 8px rgba(192, 132, 252, 0.55);
  box-shadow: 0 4px 16px rgba(139, 92, 246, 0.38) !important;
}

.btn-theme-clubs:hover {
  border-color: #ffffff !important;
  box-shadow: 0 8px 24px rgba(139, 92, 246, 0.65) !important;
}

/* 8. Ses Kontrolü (İndigo & Mavi) */
.btn-theme-sound {
  background: linear-gradient(135deg, rgba(79, 70, 229, 0.42), rgba(49, 46, 129, 0.68)) !important;
  border: 1.5px solid #a5b4fc !important;
  color: #e0e7ff !important;
  box-shadow: 0 4px 14px rgba(99, 102, 241, 0.35) !important;
}

.btn-theme-sound:hover {
  border-color: #ffffff !important;
  box-shadow: 0 8px 22px rgba(99, 102, 241, 0.6) !important;
}

/* 9. Tam Ekran */
.btn-theme-fullscreen {
  background: linear-gradient(135deg, rgba(13, 148, 136, 0.42), rgba(17, 94, 89, 0.68)) !important;
  border: 1.5px solid #5eead4 !important;
  color: #ccfbf1 !important;
  box-shadow: 0 4px 14px rgba(20, 184, 166, 0.35) !important;
}

/* 10. Shutdown (Acil Durum Kırmızısı) */
.btn-theme-shutdown {
  background: linear-gradient(135deg, rgba(220, 38, 38, 0.55), rgba(153, 27, 27, 0.8)) !important;
  border: 1.5px solid #f87171 !important;
  color: #fee2e2 !important;
  text-shadow: 0 0 8px rgba(248, 113, 113, 0.7);
  box-shadow: 0 4px 18px rgba(239, 68, 68, 0.45) !important;
}

/* 11. Sıfırla (Gri & Kehribar Vurgu) */
.btn-theme-reset {
  background: linear-gradient(135deg, rgba(71, 85, 105, 0.38), rgba(30, 41, 59, 0.62)) !important;
  border: 1.5px solid rgba(148, 163, 184, 0.5) !important;
  color: #cbd5e1 !important;
}

.btn-theme-reset:hover {
  border-color: #f59e0b !important;
  color: #fde68a !important;
  box-shadow: 0 6px 18px rgba(245, 158, 11, 0.45) !important;
}

/* 12. Çıkış Yap */
.btn-theme-logout {
  background: linear-gradient(135deg, rgba(225, 29, 72, 0.42), rgba(159, 18, 57, 0.68)) !important;
  border: 1.5px solid #fb7185 !important;
  color: #ffe4e6 !important;
}

/* 13. Hızlı Hesap Değiştir */
.btn-theme-switch {
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.38), rgba(59, 130, 246, 0.38)) !important;
  border: 1.5px solid rgba(192, 132, 252, 0.6) !important;
  color: #f3e8ff !important;
}

.btn-theme-switch:hover {
  border-color: #ffffff !important;
  box-shadow: 0 6px 20px rgba(168, 85, 247, 0.55) !important;
}

/* 14. Kontroller & Geri */
.btn-theme-controls {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.42), rgba(67, 56, 202, 0.68)) !important;
  border: 1.5px solid #818cf8 !important;
  color: #e0e7ff !important;
}

.btn-theme-back {
  background: linear-gradient(135deg, rgba(71, 85, 105, 0.42), rgba(30, 41, 59, 0.68)) !important;
  border: 1.5px solid #94a3b8 !important;
  color: #f1f5f9 !important;
}

/* ---------- splash ---------- */
#splash {
  z-index: 40;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  background: radial-gradient(ellipse at center, rgba(20, 8, 28, .35), rgba(5, 2, 8, .92));
}

.splash-inner {
  text-align: center;
}

.splash-logo {
  font-size: 4.2em;
  font-weight: 700;
  letter-spacing: .12em;
  color: var(--gold);
  text-shadow: 0 .08em 0 #7a2b17, 0 0 1em rgba(240, 201, 110, .4);
  margin: .2em 0 .6em;
}

.splash-logo span {
  display: block;
  font-size: .45em;
  color: var(--crimson-2);
  text-shadow: 0 .08em 0 #4a0716, 0 0 .8em rgba(255, 77, 106, .5);
  letter-spacing: .16em;
  margin-top: .15em;
}

.blink {
  font-size: 1.5em;
  color: var(--paper);
  animation: blink 1.1s steps(2) infinite;
}

/* ---------- title / lobby (Aşağı / Yukarı Kaydırılabilir Lobi Menüsü) ---------- */
#title,
#side-lobby {
  justify-content: flex-end;
  align-items: center;
  padding-right: 1.4em;
  padding-top: 0.4em;
  padding-bottom: 0.6em;
  background: linear-gradient(90deg, transparent 35%, rgba(10, 4, 14, .72) 70%);
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: rgba(240, 201, 110, 0.65) rgba(10, 4, 16, 0.6);
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
  scroll-behavior: smooth;
}

#title::-webkit-scrollbar,
#side-lobby::-webkit-scrollbar {
  width: 9px;
}

#title::-webkit-scrollbar-track,
#side-lobby::-webkit-scrollbar-track {
  background: rgba(10, 4, 16, 0.65);
  border-radius: 4px;
  margin: 0.5em 0;
  border: 1px solid rgba(240, 201, 110, 0.15);
}

#title::-webkit-scrollbar-thumb,
#side-lobby::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(240, 201, 110, 0.95), rgba(212, 42, 72, 0.95));
  border-radius: 4px;
  border: 1px solid rgba(240, 201, 110, 0.5);
  box-shadow: 0 0 10px rgba(240, 201, 110, 0.6);
}

#title::-webkit-scrollbar-thumb:hover,
#side-lobby::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #ffe7a8, #ff4d6a);
  box-shadow: 0 0 16px rgba(240, 201, 110, 0.9);
}

/* =========================================================
   KOMPAKT VE EKRANA TAM SIĞAN LOBİ MENÜSÜ & PANELİ (MODERN GLASS)
   ========================================================= */
.title-panel {
  text-align: center;
  width: min(620px, 98%);
  max-width: 98%;
  max-height: 525px;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: rgba(240, 201, 110, 0.45) rgba(10, 4, 16, 0.4);
  animation: slideIn .6s cubic-bezier(.2, .9, .3, 1.2);
  padding: 0.45em 0.85em 0.55em;
  background: rgba(12, 6, 22, 0.92);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-radius: 0.95rem;
  border: 1.5px solid rgba(240, 201, 110, 0.4);
  box-shadow: 0 12px 38px rgba(0, 0, 0, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  box-sizing: border-box;
}

.title-panel::-webkit-scrollbar {
  width: 6px;
}
.title-panel::-webkit-scrollbar-track {
  background: rgba(10, 4, 16, 0.5);
  border-radius: 3px;
}
.title-panel::-webkit-scrollbar-thumb {
  background: rgba(240, 201, 110, 0.5);
  border-radius: 3px;
}

.title-panel .logo {
  font-family: var(--font-pixel) !important;
  font-size: 1.95em !important;
  line-height: .95;
  margin-top: 0;
  margin-bottom: 0.06em;
}

.title-panel .subtitle {
  margin-top: 0.04em;
  margin-bottom: 0.18em;
  font-size: 0.88em;
  color: #e2e8f0;
}

.title-panel .kicker {
  font-family: var(--font-pixel) !important;
  font-size: 0.8em;
  margin-bottom: 0.04em;
}

.title-panel .lobby-server-hud {
  margin: 0.12em auto 0.25em;
  padding: 0.28em 0.85em;
  font-size: 0.84em;
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
}

/* Profil Kartı (Geniş, Okunaklı ve Modern) */
.title-panel .lobby-profile-card {
  display: flex !important;
  align-items: center !important;
  gap: 0.75em !important;
  padding: 0.5em 0.75em !important;
  margin: 0.18em 0 0.3em !important;
  background: linear-gradient(135deg, rgba(22, 10, 36, 0.94), rgba(38, 16, 50, 0.85)) !important;
  border: 1.5px solid rgba(240, 201, 110, 0.5) !important;
  border-radius: 0.85rem !important;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
  text-align: left !important;
}

.title-panel .lobby-avatar-badge {
  width: 52px !important;
  height: 52px !important;
  min-width: 52px !important;
  min-height: 52px !important;
  border-radius: 9px !important;
  border: 1.8px solid #f0c96e !important;
  box-shadow: 0 0 10px rgba(240, 201, 110, 0.45) !important;
  flex-shrink: 0 !important;
}

.title-panel .lobby-user-details {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.16em !important;
  flex: 1 !important;
  min-width: 0 !important;
}

.title-panel .lobby-user-details .save-info {
  font-size: 0.98em !important;
  font-weight: 700 !important;
  color: #fff !important;
  line-height: 1.2 !important;
  margin: 0 !important;
}

.title-panel .lobby-user-country-tag {
  font-size: 0.8em !important;
  color: #94a3b8 !important;
  line-height: 1.2 !important;
}

.title-panel .lobby-user-title-wrap {
  display: flex !important;
  align-items: center !important;
  gap: 0.4em !important;
  margin: 0.08em 0 !important;
  flex-wrap: wrap !important;
}

.title-panel .lobby-user-title-badge {
  font-size: 0.76em !important;
  padding: 0.14em 0.5em !important;
  border-radius: 0.35em !important;
  line-height: 1.2 !important;
  font-weight: 700 !important;
}

.title-panel .lobby-user-beta-badge {
  font-size: 0.74em !important;
  padding: 0.14em 0.5em !important;
  border-radius: 0.35em !important;
  line-height: 1.2 !important;
  font-weight: 700 !important;
}

.title-panel .lobby-phone-verify-container {
  margin: 0.06em 0 !important;
}

.title-panel .lobby-phone-unverified-badge {
  font-size: 0.78em !important;
  line-height: 1.2 !important;
  color: #38bdf8 !important;
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 6px !important;
  cursor: pointer !important;
}

.title-panel .lobby-user-actions-row {
  display: flex !important;
  align-items: center !important;
  gap: 0.35em !important;
  margin-top: 0.2em !important;
  flex-wrap: wrap !important;
}

.title-panel .lobby-user-actions-row button {
  font-size: 0.78em !important;
  padding: 0.28em 0.6em !important;
  min-height: 27px !important;
  border-radius: 0.4rem !important;
  font-weight: 600 !important;
}

.title-panel .lobby-guest-bar {
  margin: 0.15em 0 0.3em;
}

.title-panel .guest-bar-actions {
  display: flex;
  gap: 0.4em;
  flex-wrap: wrap;
  justify-content: center;
}

.title-panel .guest-bar-actions .btn {
  font-size: 0.88em;
  padding: 0.35em 0.8em;
  min-height: 34px;
}

/* Hızlı Savaş & Karakter Seçimi — Dengeli 4x2 Izgara (Büyük Butonlar) */
.title-panel .lobby-duel-picker {
  margin: 0.2em 0 0.26em !important;
  padding: 0.35em 0.55em !important;
  border-radius: 0.85rem !important;
  background: rgba(14, 8, 26, 0.88) !important;
  border: 1.5px solid rgba(240, 201, 110, 0.4) !important;
}

.title-panel .duel-picker-header {
  margin-bottom: 0.15em;
}

.title-panel .duel-picker-title {
  font-family: var(--font-pixel) !important;
  font-size: 0.82em;
  color: #ffd166;
  letter-spacing: 0.6px;
}

.title-panel .duel-picker-sub {
  display: none !important;
}

.title-panel .duel-pill-group {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 0.32em !important;
  width: 100% !important;
}

.title-panel .duel-card {
  padding: 0.32em 0.45em !important;
  font-size: 0.84em !important;
  gap: 0.4em !important;
  min-height: 42px !important;
  border-radius: 0.55rem !important;
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1.2px solid rgba(255, 255, 255, 0.16) !important;
}

.title-panel .duel-card:hover {
  border-color: rgba(0, 240, 255, 0.75) !important;
  background: rgba(255, 255, 255, 0.12) !important;
  transform: translateY(-1.5px) !important;
}

.title-panel .duel-avatar-img {
  width: 26px !important;
  height: 26px !important;
  border-radius: 5px !important;
  flex-shrink: 0 !important;
}

.title-panel .duel-badge {
  font-size: 0.66em !important;
  padding: 0.1em 0.3em !important;
  font-weight: 800 !important;
  letter-spacing: 0.4px !important;
}

.title-panel .duel-name {
  font-size: 0.82em !important;
  font-weight: 700 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  letter-spacing: 0.2px !important;
}

/* 💀 10 Oyunculu Hesaplaşma — 2 Sütun Kaplayarak 4x2 Tam Simetri Sağlar */
.title-panel #pill-duel-showdown {
  grid-column: span 2 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.6em !important;
  min-height: 42px !important;
  background: linear-gradient(135deg, rgba(220, 38, 38, 0.32), rgba(127, 29, 29, 0.55)) !important;
  border: 1.5px solid rgba(248, 113, 113, 0.7) !important;
}

.title-panel #pill-duel-showdown:hover {
  border-color: #f87171 !important;
  box-shadow: 0 0 16px rgba(239, 68, 68, 0.6) !important;
}

/* Canlı Hareket & Saldırı Test Çubuğu — Simetrik 7x2 Izgara (Büyük Butonlar) */
.title-panel .side-anim-hud {
  margin: 0.18em auto 0.26em !important;
  padding: 0.32em 0.5em !important;
  background: rgba(14, 8, 22, 0.92) !important;
  border: 1.2px solid rgba(0, 229, 255, 0.45) !important;
  border-radius: 0.75rem !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 0.22em !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.title-panel .side-anim-label {
  font-size: 0.78em !important;
  font-weight: 700 !important;
  color: #38bdf8 !important;
  letter-spacing: 0.5px !important;
}

.title-panel .side-anim-btn-group {
  display: grid !important;
  grid-template-columns: repeat(7, 1fr) !important;
  gap: 4px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.title-panel .side-anim-pill {
  font-size: 0.76em !important;
  font-weight: 700 !important;
  padding: 0.25em 0.2em !important;
  min-height: 29px !important;
  text-align: center !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  border-radius: 5px !important;
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1.2px solid rgba(255, 255, 255, 0.14) !important;
  color: #e2e8f0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}

.title-panel .side-anim-pill:hover {
  background: rgba(56, 189, 248, 0.28) !important;
  border-color: #38bdf8 !important;
  color: #fff !important;
  transform: translateY(-1px) !important;
}

.title-panel .side-anim-pill.active {
  background: linear-gradient(135deg, rgba(14, 165, 233, 0.75), rgba(59, 130, 246, 0.95)) !important;
  border-color: #38bdf8 !important;
  color: #fff !important;
  box-shadow: 0 0 12px rgba(56, 189, 248, 0.6) !important;
  font-weight: 800 !important;
}

.title-panel .menu {
  margin-top: 0.2em;
}

/* Kahraman Eylemleri (Storyline & Hesaplaşma Yan Yana) */
.title-panel .lobby-hero-actions {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 0.35em !important;
  margin-bottom: 0.24em !important;
}

.title-panel .btn-hero-storyline,
.title-panel .btn-hero-showdown {
  padding: 0.42em 0.6em !important;
  font-size: 0.92em !important;
  min-height: 38px !important;
  margin-bottom: 0 !important;
  font-weight: 800 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  cursor: pointer !important;
  border-radius: 0.55rem !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.4em !important;
}

.title-panel .btn-hero-storyline {
  background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 50%, #db2777 100%) !important;
  color: #fff !important;
  box-shadow: 0 0 16px rgba(124, 58, 237, 0.65) !important;
  border: 1.5px solid rgba(251, 191, 36, 0.95) !important;
}

.title-panel .btn-hero-showdown {
  background: linear-gradient(135deg, #dc2626 0%, #b91c1c 50%, #7f1d1d 100%) !important;
  color: #fff !important;
  box-shadow: 0 0 16px rgba(220, 38, 38, 0.65) !important;
  border: 1.5px solid rgba(248, 113, 113, 0.95) !important;
}

/* Ana Bölüm Başlat Butonu */
.title-panel .btn-hero-start {
  padding: 0.48em 0.8em !important;
  font-size: 1.02em !important;
  min-height: 44px !important;
  font-weight: 800 !important;
  margin-bottom: 0.24em !important;
  width: 100% !important;
  border-radius: 0.6rem !important;
  letter-spacing: 0.4px !important;
  background: linear-gradient(135deg, #e11d48 0%, #be123c 60%, #881337 100%) !important;
  border: 1.8px solid #fb7185 !important;
  box-shadow: 0 0 18px rgba(225, 29, 72, 0.65) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.5em !important;
}

.title-panel .btn-hero-start:hover {
  transform: translateY(-1.5px) !important;
  box-shadow: 0 0 24px rgba(225, 29, 72, 0.9) !important;
  border-color: #ffe4e6 !important;
}

/* 4 Sütunlu Eylem Izgarası (Büyük, Net Butonlar) */
.title-panel .lobby-actions-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 0.24em !important;
}

.title-panel .lobby-actions-grid .btn {
  font-size: 0.78em !important;
  font-weight: 700 !important;
  padding: 0.28em 0.35em !important;
  min-height: 33px !important;
  border-radius: 0.45rem !important;
  gap: 0.28em !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.title-panel .lobby-actions-grid .btn .btn-icon-badge {
  font-size: 1.05em !important;
  line-height: 1 !important;
}

.title-panel .lobby-actions-grid .btn .btn-label {
  font-size: 0.82em !important;
  font-weight: 700 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.title-panel .lobby-footer-actions {
  margin-top: 0.2em !important;
  gap: 0.3em !important;
  display: flex !important;
  justify-content: center !important;
}

.title-panel .lobby-footer-actions .btn {
  font-size: 0.78em !important;
  padding: 0.25em 0.5em !important;
  min-height: 28px !important;
  border-radius: 0.4rem !important;
}

.title-panel .save-info {
  margin-top: 0.12em;
  font-size: 0.78em;
}

.title-scroll-hint {
  position: absolute;
  bottom: 0.8em;
  right: 1.8em;
  font-family: 'Pixelify Sans', monospace;
  font-size: 0.75em;
  font-weight: 700;
  padding: 0.3em 0.75em;
  border-radius: 0.6em;
  background: rgba(18, 10, 30, 0.94);
  border: 1.5px solid #f0c96e;
  color: #ffd166;
  box-shadow: 0 0 14px rgba(240, 201, 110, 0.6), 0 4px 12px rgba(0, 0, 0, 0.8);
  pointer-events: none;
  animation: floatBounce 1.4s ease-in-out infinite;
  z-index: 50;
  letter-spacing: 0.5px;
  transition: opacity 0.3s ease;
}

.logo {
  font-size: 4.4em;
  font-weight: 700;
  line-height: .92;
  letter-spacing: .06em;
  color: var(--gold);
  text-shadow: 0 .07em 0 #7a2b17, 0 .14em 0 #3a120a, 0 0 .8em rgba(240, 201, 110, .35);
  margin-top: .1em;
}

.logo span {
  display: block;
  font-size: .62em;
  color: var(--crimson-2);
  text-shadow: 0 .08em 0 #4a0716, 0 0 .8em rgba(255, 77, 106, .5);
}

.subtitle {
  margin-top: .35em;
  font-size: 1.18em;
  letter-spacing: .18em;
  color: var(--ice);
  text-shadow: 0 0 .6em rgba(127, 227, 255, .55);
}

.save-info {
  margin-top: 1.2em;
  color: var(--muted);
  font-size: 1.05em;
  letter-spacing: .1em;
}

/* ---------- 2. Bölüm Girişi (Yan Lobi): Yuji Itadori Özel Tam Boy Giriş Duruşu ---------- */
.side-yuji-stand {
  position: absolute;
  left: 4.2em;
  bottom: 0.2em;
  height: 44em;
  max-height: 86vh;
  aspect-ratio: 537 / 1221;
  pointer-events: none;
  background: url('../assets/yuji_entrance.png') center bottom / contain no-repeat;
  image-rendering: pixelated;
  transform-origin: 50% 100%;
  filter: drop-shadow(0 0 1.4em rgba(0, 229, 255, 0.55)) drop-shadow(0 0 3em rgba(255, 0, 85, 0.28));
  animation: yujiIn .8s cubic-bezier(.2, .9, .3, 1.1), yujiBreath 3.2s steps(8) .8s infinite, yujiGlow 2.4s infinite ease-in-out;
  display: none;
  z-index: 10;
}

.side-yuji-stand.active {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
}

.side-yuji-badge {
  position: absolute;
  bottom: 0.8em;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  background: rgba(14, 8, 24, 0.96);
  border: 1px solid rgba(0, 229, 255, 0.45);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.8), inset 0 0 10px rgba(0, 229, 255, 0.15);
  border-radius: 6px;
  padding: 0.25em 0.8em;
  white-space: nowrap;
  pointer-events: auto;
}

.side-yuji-badge .badge-role {
  font-family: 'Pixelify Sans', monospace;
  font-size: 0.65em;
  color: #ff4d6a;
  letter-spacing: 0.1em;
  font-weight: 700;
  text-shadow: 0 0 6px rgba(255, 77, 106, 0.5);
}

.side-yuji-badge .badge-hero {
  font-family: 'Pixelify Sans', monospace;
  font-size: 0.95em;
  color: #00e5ff;
  letter-spacing: 0.08em;
  font-weight: 700;
  text-shadow: 0 0 8px rgba(0, 229, 255, 0.6);
}

@keyframes yujiIn {
  from {
    opacity: 0;
    transform: translateX(-3.5em);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes yujiBreath {

  0%,
  100% {
    transform: scale(1) translateY(0);
  }

  50% {
    transform: scale(1.015) translateY(-.5em);
  }
}

@keyframes yujiGlow {
  0%,
  100% {
    opacity: 0.85;
    transform: scale(1);
  }

  50% {
    opacity: 1;
    transform: scale(1.02);
  }
}

/* ---------- Canlı Yuji Itadori Animasyon Vitrini ---------- */
.yuji-bg-container {
  position: absolute;
  left: 2.4em;
  bottom: 1.2em;
  z-index: 30;
  display: flex;
  flex-direction: column;
  align-items: center;
  pointer-events: auto;
  animation: yujiIn 0.9s cubic-bezier(0.2, 0.9, 0.3, 1.1);
}

.yuji-lobby-canvas {
  width: 175px;
  height: 195px;
  image-rendering: pixelated;
  filter: drop-shadow(0 0 18px rgba(0, 229, 255, 0.65));
  cursor: pointer;
  transition: transform 0.2s cubic-bezier(0.2, 0.9, 0.3, 1.2);
}

.yuji-lobby-canvas:hover {
  transform: scale(1.05);
}

.yuji-anim-hud {
  margin-top: 0.35em;
  background: linear-gradient(160deg, rgba(18, 12, 32, 0.98), rgba(8, 5, 16, 0.98));
  border: 0.12em solid rgba(0, 229, 255, 0.45);
  box-shadow: 0 0.5em 1.5em rgba(0, 0, 0, 0.85), inset 0 0 1em rgba(0, 229, 255, 0.12);
  border-radius: 0.8em;
  padding: 0.4em 0.7em;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3em;
}

.yuji-anim-label {
  font-family: 'Pixelify Sans', monospace;
  font-size: 0.75em;
  color: #9ec5d9;
  letter-spacing: 0.08em;
  text-shadow: 0 0 6px rgba(0, 229, 255, 0.4);
}

.yuji-anim-btn-group,
.side-anim-btn-group {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.35em;
}

.yuji-anim-pill,
.side-anim-pill {
  font-family: var(--font-ui);
  font-size: 0.82em;
  font-weight: 700;
  padding: 0.28em 0.65em;
  border-radius: 0.5em;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.07);
  color: #d6e2ed;
  cursor: pointer;
  transition: all 0.18s ease;
}

.yuji-anim-pill:hover,
.side-anim-pill:hover {
  background: rgba(0, 229, 255, 0.25);
  border-color: #00e5ff;
  color: #ffffff;
  transform: translateY(-1px);
}

.yuji-anim-pill.active,
.side-anim-pill.active {
  background: linear-gradient(135deg, #00b4d8, #0077b6);
  border-color: #00e5ff;
  color: #ffffff;
  box-shadow: 0 0 10px rgba(0, 229, 255, 0.65);
}

.side-anim-pill#btn-title-win,
.side-anim-pill#btn-side-win {
  border-color: rgba(255, 209, 102, 0.6);
  background: rgba(255, 209, 102, 0.12);
  color: #ffd166;
}

.side-anim-pill#btn-title-win:hover,
.side-anim-pill#btn-side-win:hover {
  background: rgba(255, 209, 102, 0.28);
  border-color: #ffd166;
  color: #ffffff;
}

.side-anim-pill#btn-title-win.active,
.side-anim-pill#btn-side-win.active {
  background: linear-gradient(135deg, #f59e0b, #d97706);
  border-color: #ffd166;
  color: #ffffff;
  box-shadow: 0 0 14px rgba(255, 209, 102, 0.8);
}

/* ---------- Yan Lobi Karakter & Boss Vitrini Seçim Çubuğu ---------- */
.side-char-selector {
  margin: 0.5em auto 0.25em;
  padding: 0.35em 0.8em;
  background: rgba(12, 6, 20, 0.90);
  border: 1.5px solid rgba(240, 201, 110, 0.35);
  border-radius: 0.8em;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  width: fit-content;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.65), inset 0 0 10px rgba(240, 201, 110, 0.1);
}

.side-char-label {
  font-family: 'Pixelify Sans', monospace;
  font-size: 0.85em;
  font-weight: 700;
  color: #ffd166;
  text-shadow: 0 0 6px rgba(255, 209, 102, 0.4);
}

.side-char-btn-group {
  display: flex;
  gap: 0.4em;
  flex-wrap: wrap;
  justify-content: center;
}

.side-char-pill {
  font-family: var(--font-ui);
  font-size: 0.82em;
  font-weight: 700;
  padding: 0.32em 0.75em;
  border-radius: 0.5em;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.08);
  color: #e2e8f0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  transition: all 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.side-char-pill:hover {
  transform: translateY(-2px) scale(1.04);
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.6);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}

/* Yuji Aktif */
.side-char-pill[data-char="yuji"].active {
  background: linear-gradient(135deg, #0284c7, #0369a1);
  border-color: #38bdf8;
  color: #ffffff;
  box-shadow: 0 0 14px rgba(56, 189, 248, 0.75), inset 0 0 8px rgba(255, 255, 255, 0.3);
}

/* Sukuna Aktif */
.side-char-pill[data-char="sukuna"].active {
  background: linear-gradient(135deg, #dc2626, #991b1b);
  border-color: #f87171;
  color: #ffffff;
  box-shadow: 0 0 16px rgba(239, 68, 68, 0.85), inset 0 0 8px rgba(255, 255, 255, 0.3);
}

/* Gojo Aktif */
.side-char-pill[data-char="gojo"].active {
  background: linear-gradient(135deg, #0284c7, #6366f1);
  border-color: #818cf8;
  color: #ffffff;
  box-shadow: 0 0 16px rgba(99, 102, 241, 0.85), inset 0 0 8px rgba(255, 255, 255, 0.3);
}

/* Parmak Taşıyıcısı (Curse) Aktif */
.side-char-pill[data-char="curse"].active {
  background: linear-gradient(135deg, #d97706, #78350f);
  border-color: #fbbf24;
  color: #ffffff;
  box-shadow: 0 0 16px rgba(251, 191, 36, 0.85), inset 0 0 8px rgba(255, 255, 255, 0.3);
}

/* Megumi Fushiguro Aktif */
.side-char-pill[data-char="megumi"].active {
  background: linear-gradient(135deg, #2e1065, #581c87);
  border-color: #c084fc;
  color: #ffffff;
  box-shadow: 0 0 16px rgba(168, 85, 247, 0.85), inset 0 0 8px rgba(255, 255, 255, 0.3);
}

/* Kilitli Karakter Rozet ve Buton Stilleri */
.side-char-pill.locked,
.side-char-pill.hero-locked,
.duel-pill.locked,
.duel-pill.hero-locked {
  position: relative;
  background: rgba(30, 20, 35, 0.72) !important;
  border: 1px dashed rgba(239, 68, 68, 0.6) !important;
  color: #cbd5e1 !important;
  opacity: 0.92;
}

.side-char-pill.locked:hover,
.side-char-pill.hero-locked:hover,
.duel-pill.locked:hover,
.duel-pill.hero-locked:hover {
  border-color: rgba(239, 68, 68, 0.95) !important;
  box-shadow: 0 0 12px rgba(239, 68, 68, 0.45) !important;
  transform: translateY(-1px);
}

/* ---------- Ana Menü Hızlı Savaş & Karakter Seçici (Modern Glass Grid) ---------- */
.lobby-duel-picker {
  margin: 0.5em auto 0.4em;
  padding: 0.65em 0.85em;
  background: rgba(14, 8, 26, 0.82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1.5px solid rgba(240, 201, 110, 0.4);
  border-radius: 1rem;
  width: min(560px, 98%);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.45em;
  box-sizing: border-box;
}

.duel-picker-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.1em;
  width: 100%;
}

.duel-picker-title {
  font-family: 'Pixelify Sans', monospace;
  font-size: 0.88em;
  font-weight: 700;
  color: #ffd166;
  letter-spacing: 0.8px;
  text-shadow: 0 0 10px rgba(255, 209, 102, 0.5);
}

.duel-picker-sub {
  font-size: 0.72em;
  color: #94a3b8;
  letter-spacing: 0.3px;
}

.duel-pill-group {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.45em;
  width: 100%;
  box-sizing: border-box;
}

@media (max-width: 600px) {
  .duel-pill-group {
    grid-template-columns: repeat(2, 1fr);
  }
}

.duel-card {
  font-family: var(--font);
  font-size: 0.82em;
  font-weight: 700;
  padding: 0.45em 0.6em;
  border-radius: 0.7em;
  border: 1.5px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.05);
  color: #e2e8f0;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.5em;
  text-align: left;
  transition: all 0.22s cubic-bezier(0.2, 0.8, 0.2, 1);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
  position: relative;
  overflow: hidden;
  user-select: none;
}

.duel-card:hover {
  transform: translateY(-2px);
  border-color: rgba(0, 240, 255, 0.6);
  background: rgba(255, 255, 255, 0.09);
  box-shadow: 0 6px 18px rgba(0, 240, 255, 0.25);
}

.duel-avatar-img {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  border: 1.2px solid rgba(255, 255, 255, 0.25);
  object-fit: cover;
  background: rgba(0, 0, 0, 0.45);
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.duel-card:hover .duel-avatar-img {
  transform: scale(1.1);
  border-color: #00f0ff;
}

.duel-card-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}

.duel-badge {
  font-size: 0.65em;
  font-weight: 800;
  letter-spacing: 0.6px;
  color: #fbbf24;
  text-transform: uppercase;
}

.duel-badge.danger { color: #f87171; }
.duel-badge.cyan { color: #38bdf8; }
.duel-badge.purple { color: #c084fc; }
.duel-badge.emerald { color: #34d399; }
.duel-badge.lock { color: #94a3b8; }

.duel-name {
  font-family: var(--font-ui);
  font-size: 0.95em;
  font-weight: 700;
  color: #ffffff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: 0.3px;
}

.duel-card.active {
  background: linear-gradient(135deg, rgba(225, 29, 72, 0.45), rgba(159, 18, 57, 0.75));
  border-color: #ff4d6a;
  box-shadow: 0 0 18px rgba(255, 77, 106, 0.6), inset 0 0 10px rgba(255, 77, 106, 0.3);
}

.duel-card.active .duel-avatar-img {
  border-color: #ff4d6a;
  box-shadow: 0 0 10px rgba(255, 77, 106, 0.7);
}

.duel-card#pill-duel-sukuna.active {
  background: linear-gradient(135deg, rgba(220, 38, 38, 0.5), rgba(127, 29, 29, 0.8));
  border-color: #f87171;
  box-shadow: 0 0 20px rgba(239, 68, 68, 0.75);
}

.duel-card#pill-duel-naoya.active {
  background: linear-gradient(135deg, rgba(14, 116, 144, 0.5), rgba(21, 94, 117, 0.8));
  border-color: #38bdf8;
  box-shadow: 0 0 20px rgba(56, 189, 248, 0.75);
}

.duel-card#pill-duel-curse.active {
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.5), rgba(76, 29, 149, 0.8));
  border-color: #c084fc;
  box-shadow: 0 0 20px rgba(192, 132, 252, 0.75);
}

.duel-card#pill-duel-megumi.active {
  background: linear-gradient(135deg, rgba(5, 150, 105, 0.5), rgba(6, 78, 59, 0.8));
  border-color: #34d399;
  box-shadow: 0 0 20px rgba(52, 211, 153, 0.75);
}

.duel-card#pill-duel-gojo.active {
  background: linear-gradient(135deg, rgba(2, 132, 199, 0.5), rgba(30, 58, 138, 0.8));
  border-color: #38bdf8;
  box-shadow: 0 0 20px rgba(56, 189, 248, 0.85);
}

/* Sukuna vs Gojo Özel Buton */
.btn-theme-sukuna-gojo {
  background: linear-gradient(135deg, #b91c1c, #450a0a) !important;
  border: 1.8px solid #f87171 !important;
  color: #ffffff !important;
  box-shadow: 0 4px 20px rgba(185, 28, 28, 0.6), inset 0 0 12px rgba(248, 113, 113, 0.3) !important;
}

.btn-theme-sukuna-gojo:hover {
  border-color: #ffffff !important;
  box-shadow: 0 8px 28px rgba(239, 68, 68, 0.85), inset 0 0 16px rgba(255, 255, 255, 0.4) !important;
}

/* Sukuna vs Finger Bearer Özel Buton */
.btn-theme-curse {
  background: linear-gradient(135deg, #581c87, #1e1b4b) !important;
  border: 1.8px solid #c084fc !important;
  color: #ffffff !important;
  box-shadow: 0 4px 20px rgba(88, 28, 135, 0.6), inset 0 0 12px rgba(192, 132, 252, 0.3) !important;
}

.btn-theme-curse:hover {
  border-color: #ffffff !important;
  box-shadow: 0 8px 28px rgba(168, 85, 247, 0.85), inset 0 0 16px rgba(255, 255, 255, 0.4) !important;
}

/* ---------- Yan Lobi Animasyon Çubuğu ---------- */
.side-anim-hud {
  margin: 0.35em auto 0.25em;
  padding: 0.32em 0.65em;
  background: rgba(14, 8, 22, 0.90);
  border: 1px solid rgba(0, 229, 255, 0.4);
  border-radius: 0.7em;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.45em;
  width: fit-content;
  max-width: 96%;
}

.side-anim-label {
  font-family: 'Pixelify Sans', monospace;
  font-size: 0.8em;
  color: #9ec5d9;
}

/* ---------- Koridor Hızlı Işınlanma & Boss Butonları ---------- */
.corridor-quick-jump {
  position: absolute;
  top: 1.2em;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 0.8em;
  z-index: 50;
  pointer-events: auto;
}

.quick-jump-pill {
  font-family: var(--font-ui);
  font-size: 0.88em;
  font-weight: 700;
  padding: 0.45em 0.95em;
  border-radius: 0.7em;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  transition: all 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.7);
}

.quick-jump-pill.sukuna {
  background: linear-gradient(135deg, rgba(185, 28, 28, 0.92), rgba(69, 10, 10, 0.92));
  border: 1.5px solid #f87171;
  color: #ffffff;
}

.quick-jump-pill.sukuna:hover {
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 0 18px rgba(248, 113, 113, 0.85);
  border-color: #ffffff;
}

.quick-jump-pill.curse {
  background: linear-gradient(135deg, rgba(180, 83, 9, 0.92), rgba(59, 7, 100, 0.92));
  border: 1.5px solid #fbbf24;
  color: #ffffff;
}

.quick-jump-pill.curse:hover {
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 0 18px rgba(251, 191, 36, 0.85);
  border-color: #ffffff;
}

.quick-jump-pill.lobby {
  background: linear-gradient(135deg, rgba(30, 41, 59, 0.92), rgba(15, 23, 42, 0.92));
  border: 1.5px solid #94a3b8;
  color: #ffffff;
}

.quick-jump-pill.lobby:hover {
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 0 18px rgba(148, 163, 184, 0.85);
  border-color: #ffffff;
}

/* ---------- Menü Bölümler & Naoya Temaları ---------- */
.btn.btn-theme-chapters {
  background: linear-gradient(135deg, rgba(60, 20, 75, 0.92), rgba(28, 8, 42, 0.95));
  border: 1.5px solid rgba(240, 201, 110, 0.7);
  box-shadow: 0 0 16px rgba(240, 201, 110, 0.25);
  color: #fff4d1;
}

.btn.btn-theme-chapters:hover {
  background: linear-gradient(135deg, rgba(80, 25, 100, 0.95), rgba(38, 12, 55, 0.98));
  border-color: #ffd166;
  box-shadow: 0 0 24px rgba(255, 209, 102, 0.65);
  transform: translateY(-2px);
}

.btn.btn-theme-naoya {
  background: linear-gradient(135deg, rgba(16, 75, 95, 0.92), rgba(6, 32, 45, 0.95));
  border: 1.5px solid #00f0ff;
  box-shadow: 0 0 16px rgba(0, 240, 255, 0.35);
  color: #ffffff;
}

.btn.btn-theme-naoya:hover {
  background: linear-gradient(135deg, rgba(22, 100, 128, 0.95), rgba(8, 45, 62, 0.98));
  border-color: #7fe3ff;
  box-shadow: 0 0 24px rgba(0, 240, 255, 0.75);
  transform: translateY(-2px);
}

/* ---------- controls ---------- */
#controls {
  background: #0d0516;
  z-index: 55;
}

#controls .glass-card {
  /* 94vh sahneden (stage) büyük kalıyordu → alt kısım kesiliyordu; artık sahneye göre sınırlı ve kaydırılabilir */
  max-width: 48em;
  width: 94%;
  max-height: 94%;
  padding: 1.1em 1.6em 0;
  background: linear-gradient(160deg, #1c0c26, #0a0410);
  border: 0.15em solid rgba(240, 201, 110, 0.5);
  box-shadow: 0 0 0 0.15em #000, 0 1.5em 4em rgba(0, 0, 0, .95), inset 0 0 2em rgba(212, 42, 72, 0.18);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(240, 201, 110, .6) rgba(0, 0, 0, .35);
}

#controls .glass-card>* {
  flex-shrink: 0;
}

#controls .glass-card::-webkit-scrollbar {
  width: .7em;
}

#controls .glass-card::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, .35);
  border-radius: .4em;
}

#controls .glass-card::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--gold), #b5762e);
  border-radius: .4em;
  border: .15em solid rgba(10, 4, 16, .9);
}

/* Tamam butonu kaydırırken hep altta görünür kalsın */
.ctrl-footer {
  position: sticky;
  bottom: 0;
  z-index: 2;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1em;
  margin: 0 -1.6em;
  padding: .7em 1.6em .8em;
  background: linear-gradient(180deg, rgba(10, 4, 16, 0), rgba(10, 4, 16, .96) 35%);
}

.scroll-hint {
  font-size: .85em;
  color: var(--muted);
  letter-spacing: .08em;
  animation: hintBob 1.2s ease-in-out infinite;
  transition: opacity .25s;
}

.scroll-hint.hide {
  opacity: 0;
}

@keyframes hintBob {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(.2em);
  }
}

#controls h2 {
  font-size: 2em;
  margin-bottom: .35em;
  color: var(--gold);
}

.ctrl-grid {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .38em 1em;
  text-align: left;
  font-size: 1.05em;
  margin-bottom: .8em;
  align-items: center;
}

.ctrl-grid span:not(.key) {
  color: #f5ece0;
}

.key {
  background: rgba(240, 201, 110, .22);
  border: .12em solid rgba(240, 201, 110, .65);
  border-radius: .3em;
  padding: .14em .6em;
  color: #fff;
  text-shadow: 0 0 .4em var(--gold);
  white-space: nowrap;
  text-align: center;
  font-size: .95em;
  font-weight: 700;
}

.skills-preview-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .75em;
  margin-bottom: .8em;
}

@media (max-width: 600px) {
  .skills-preview-list {
    grid-template-columns: 1fr;
  }
}

.skills-preview-list .ulti-preview {
  grid-column: 1 / -1;
  border-color: rgba(240, 201, 110, 0.75);
  background: linear-gradient(90deg, rgba(28, 14, 38, 0.95), rgba(12, 24, 42, 0.95));
  box-shadow: 0 0 1em rgba(240, 201, 110, 0.25);
}

.skills-preview-list .ulti-preview .barrage-info b {
  color: #ffd166;
  text-shadow: 0 0 .6em rgba(255, 209, 102, 0.7);
}

.barrage-preview {
  display: flex;
  align-items: center;
  gap: .75em;
  text-align: left;
  background: rgba(18, 8, 24, 0.92);
  border: .12em solid rgba(240, 201, 110, 0.45);
  border-radius: .45em;
  padding: .45em .75em;
  box-shadow: 0 .2em .8em rgba(0, 0, 0, .45);
}

.barrage-preview.mirror-preview {
  border-color: rgba(127, 227, 255, 0.55);
  background: rgba(8, 18, 30, 0.92);
}

.barrage-preview.mirror-preview .barrage-info b {
  color: var(--ice);
  text-shadow: 0 0 .5em rgba(127, 227, 255, .5);
}

.barrage-gif {
  width: 4.8em;
  height: 3.4em;
  object-fit: contain;
  image-rendering: pixelated;
  border-radius: .3em;
  background: rgba(0, 0, 0, .6);
  border: .1em solid rgba(127, 227, 255, .35);
  box-shadow: 0 0 .6em rgba(127, 227, 255, .2);
  flex-shrink: 0;
}

.barrage-info b {
  display: block;
  font-size: 1.02em;
  color: var(--gold-2);
  letter-spacing: .06em;
  margin-bottom: .2em;
  text-shadow: 0 0 .5em rgba(240, 201, 110, .4);
}

.barrage-info p {
  font-size: .84em;
  color: #f5ece0;
  line-height: 1.35;
  margin: 0;
}

#btn-controls-close {
  align-self: center;
  padding: .45em 2em;
}

.gold {
  color: var(--gold-2);
  text-shadow: 0 0 .5em rgba(240, 201, 110, .5);
}

/* ---------- estate HUD ---------- */
#estate-hud {
  pointer-events: none;
}

.location-tag {
  position: absolute;
  left: 1.2em;
  top: 1em;
  font-size: 1.4em;
  letter-spacing: .12em;
  color: var(--paper);
  background: linear-gradient(90deg, rgba(20, 8, 28, .92), transparent);
  padding: .35em 3em .35em .7em;
  border-left: .25em solid var(--crimson);
}

.location-tag span {
  color: var(--crimson-2);
  margin-right: .4em;
}

.location-tag span.location-name {
  color: inherit;
  margin-right: 0;
}

.stats-panel {
  position: absolute;
  right: 1em;
  top: 1em;
  width: 15.5em;
  padding: 1em 1.1em;
  text-align: left;
}

.stats-head {
  display: flex;
  gap: .7em;
  align-items: center;
  margin-bottom: .7em;
}

.mini-portrait {
  width: 3.6em;
  height: 3.6em;
  border-radius: .3em;
  border: .12em solid var(--ice);
  image-rendering: pixelated;
  box-shadow: 0 0 .8em rgba(127, 227, 255, .4);
  object-fit: cover;
}

.stats-name {
  font-weight: 700;
  font-size: 1.25em;
  color: var(--gold);
  letter-spacing: .06em;
}

.stats-lv {
  color: var(--muted);
  font-size: 1.05em;
}

.stats-lv b {
  color: var(--ice);
  font-size: 1.2em;
}

.power-box {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  background: linear-gradient(90deg, rgba(212, 42, 72, .35), rgba(240, 201, 110, .18));
  border: .1em solid rgba(240, 201, 110, .4);
  border-radius: .3em;
  padding: .3em .6em;
  margin-bottom: .6em;
}

.power-box span {
  letter-spacing: .25em;
  color: var(--gold-2);
  font-size: 1em;
}

.power-box b {
  font-size: 1.7em;
  color: #fff;
  text-shadow: 0 0 .5em rgba(255, 77, 106, .8);
}

.power-box.big {
  margin-top: 1em;
}

.power-box.big b {
  font-size: 2.4em;
}

.stat-list {
  list-style: none;
  font-size: 1.08em;
}

.stat-list li {
  display: flex;
  justify-content: space-between;
  padding: .22em 0;
  border-bottom: .06em dashed rgba(169, 155, 181, .22);
}

.stat-list li span {
  color: var(--muted);
}

.stat-list li b {
  color: var(--paper);
}

.prompt {
  position: absolute;
  left: 50%;
  bottom: 4.2em;
  transform: translateX(-50%);
  font-size: 1.4em;
  padding: .45em 1.1em;
  border-radius: .35em;
  background: rgba(14, 6, 20, .88);
  border: .12em solid var(--gold);
  color: var(--gold-2);
  white-space: nowrap;
  display: none;
  box-shadow: 0 0 1em rgba(240, 201, 110, .35);
  animation: bob 1.2s ease-in-out infinite;
}

.prompt.active {
  display: block;
}

.prompt kbd {
  font-family: var(--font);
  background: var(--gold);
  color: var(--ink);
  padding: 0 .4em;
  border-radius: .2em;
  margin-right: .4em;
  font-weight: 700;
}

.hint {
  position: absolute;
  left: 50%;
  bottom: .8em;
  transform: translateX(-50%);
  font-size: 1em;
  color: rgba(243, 233, 220, .7);
  letter-spacing: .08em;
  text-shadow: 0 .1em 0 #000;
}

/* ---------- estate guide panel (sağ altta) ---------- */
.estate-guide-panel {
  position: absolute;
  right: 1.2em;
  bottom: 1em;
  display: flex;
  flex-direction: column;
  gap: .35em;
  background: linear-gradient(135deg, rgba(12, 4, 18, 0.94), rgba(22, 8, 32, 0.90));
  border: .14em solid rgba(127, 227, 255, 0.65);
  border-radius: .45em;
  padding: .55em .85em;
  box-shadow: 0 0 1.5em rgba(0, 0, 0, .95), 0 0 .9em rgba(127, 227, 255, .35);
  pointer-events: none;
  z-index: 25;
  opacity: 1 !important;
}

.guide-item {
  display: flex;
  align-items: center;
  gap: .65em;
  font-size: 1.05em;
  color: #fff;
  text-shadow: 0 .08em .2em #000;
}

.guide-item kbd {
  font-family: var(--font);
  font-size: .95em;
  font-weight: 700;
  padding: .12em .45em;
  border-radius: .22em;
  background: rgba(127, 227, 255, .25);
  border: .12em solid var(--ice);
  color: #fff;
  min-width: 1.9em;
  text-align: center;
  box-shadow: 0 0 .5em rgba(127, 227, 255, 0.45);
}

.guide-item.dojo kbd {
  background: rgba(255, 77, 106, .35);
  border-color: var(--crimson-2);
  color: #fff;
  box-shadow: 0 0 .8em rgba(255, 77, 106, .7);
}

.guide-item.dojo span {
  color: #ff9fb0;
  font-weight: 700;
  text-shadow: 0 0 .6em rgba(255, 77, 106, 0.6);
}

/* ---------- bars ---------- */
.bar {
  position: relative;
  width: 100%;
  height: 0.95em;
  background: rgba(0, 0, 0, .65);
  border: .1em solid rgba(0, 0, 0, .9);
  border-radius: .22em;
  overflow: hidden;
  box-shadow: inset 0 0 0 .06em rgba(255, 255, 255, .1);
  box-sizing: border-box;
}

.bar-fill,
.bar-ghost {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 100%;
}

.bar-ghost {
  background: #fff3c4;
  transition: width .6s ease .25s;
}

.bar-text {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .72em;
  font-weight: 700;
  text-shadow: 0 .1em 0 #000, 0 0 .3em #000;
  letter-spacing: .02em;
  white-space: nowrap;
  padding: 0 .35em;
  box-sizing: border-box;
  pointer-events: none;
}

.bar.hp {
  height: 1.08em;
}

.bar {
  background-image: url('../assets/ui/hud_bar_bg.png') !important;
  background-repeat: repeat !important;
  image-rendering: pixelated !important;
}

.bar-fill {
  image-rendering: pixelated !important;
}

.bar.hp .bar-fill {
  background: url('../assets/ui/hud_bar_hp.png') repeat !important;
}

.bar.ce .bar-fill {
  background: url('../assets/ui/hud_bar_ce.png') repeat !important;
}

.bar.ce {
  height: .76em;
  margin-top: .18em;
}

.bar.stm {
  height: .72em;
  margin-top: .16em;
}

.bar.stm .bar-fill {
  background: url('../assets/ui/hud_bar_stm.png') repeat !important;
}

.bar.stm.low .bar-fill {
  background: linear-gradient(180deg, #ff8a80, #d50000 50%, #8b0000);
  animation: pulse .4s infinite;
}

.bar.ulti {
  height: .84em;
  margin-top: .16em;
  border-color: rgba(240, 201, 110, 0.65);
}

.bar.ulti .bar-fill {
  background: url('../assets/ui/hud_bar_ult.png') repeat !important;
}

.bar.ulti.ready {
  box-shadow: 0 0 .85em rgba(255, 209, 102, 0.8), inset 0 0 .4em #ffffff;
}

.bar.ulti.ready .bar-fill {
  background: url('../assets/ui/hud_bar_ult.png') repeat !important;
  box-shadow: inset 0 0 8px #fff;
  animation: ultiShine 1.1s linear infinite;
}

@keyframes ultiShine {
  0% {
    background-position: 0% 50%;
  }

  100% {
    background-position: 200% 50%;
  }
}

.bar.boss {
  height: 1.5em;
}

.bar.boss .bar-fill {
  background: linear-gradient(180deg, #ff8fa2, var(--crimson) 50%, #7a0f24);
  transition: width .08s;
}

.bar.boss.p2 .bar-fill {
  background: linear-gradient(180deg, #ffb070, #ff3b1f 50%, #7a1206);
}

/* ---------- battle HUD ---------- */
#battle-hud {
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none;
  z-index: 20;
  opacity: 1;
}

#stage:has(#counter-cutscene.active) #battle-hud {
  opacity: 0 !important;
}

.boss-bar {
  position: absolute !important;
  left: 50% !important;
  top: 14px !important;
  transform: translateX(-50%) !important;
  width: 42em !important;
  margin: 0 !important;
  pointer-events: none !important;
  z-index: 25 !important;
}

.boss-label {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: .25em;
}

#boss-name {
  font-size: 1.5em;
  font-weight: 700;
  letter-spacing: .14em;
  color: var(--paper);
  text-shadow: 0 .12em 0 #000;
}

.phase-tag {
  font-size: 1.05em;
  letter-spacing: .15em;
  padding: .1em .6em;
  border-radius: .2em;
  background: rgba(212, 42, 72, .25);
  border: .1em solid var(--crimson);
  color: var(--crimson-2);
}

.phase-tag.p2 {
  background: rgba(255, 59, 31, .35);
  border-color: #ff7b3a;
  color: #ffd0a8;
  animation: pulse 1s infinite;
}

.player-panel {
  position: absolute;
  left: .9em;
  bottom: .9em;
  display: flex;
  flex-direction: column;
  gap: .32em;
  background-color: rgba(14, 18, 28, 0.94);
  border: 4px solid transparent;
  border-image: url('../assets/ui/hud_panel_frame.png') 6 fill repeat;
  image-rendering: pixelated;
  padding: .45em .5em .38em .5em;
  width: 15.6em;
  box-sizing: border-box;
  box-shadow: 0 0 1.2em rgba(0, 0, 0, .85);
  user-select: none;
}

#battle-hud.sukuna-hud .player-panel {
  border-image: url('../assets/ui/hud_panel_frame.png') 6 fill repeat;
  box-shadow: 0 0 1.4em rgba(255, 23, 68, .35), 0 0 .5em rgba(0, 0, 0, .9);
}

.p-card-header {
  display: flex;
  gap: .48em;
  align-items: center;
}

.p-portrait {
  width: 3.5em;
  height: 3.6em;
  border-radius: .15em;
  border: 3px solid transparent;
  border-image: url('../assets/ui/hud_portrait_frame.png') 6 repeat;
  image-rendering: pixelated;
  object-fit: cover;
  box-shadow: 0 0 .8em rgba(0, 0, 0, .65);
  flex-shrink: 0;
}

#battle-hud.sukuna-hud .p-portrait {
  border-image: url('../assets/ui/hud_portrait_frame.png') 6 repeat;
  box-shadow: 0 0 .9em rgba(255, 23, 68, .6);
}

.p-header-meta {
  display: flex;
  flex-direction: column;
  gap: .12em;
  flex: 1;
  min-width: 0;
}

.p-name {
  font-weight: 700;
  color: var(--gold);
  letter-spacing: .08em;
  font-size: 1.05em;
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#battle-hud.sukuna-hud .p-name {
  color: #ff5252;
  text-shadow: 0 0 .4em rgba(255, 23, 68, .6);
}

.p-stats-row {
  display: flex;
  align-items: center;
  gap: .5em;
  font-size: .78em;
  color: var(--muted);
  line-height: 1;
}

.p-lv b {
  color: var(--ice);
}

.p-power b {
  color: #fff;
}

.p-info {
  display: flex;
  flex-direction: column;
  gap: .22em;
  width: 100%;
  box-sizing: border-box;
}

.bar {
  position: relative;
  width: 100%;
  background: rgba(0, 0, 0, .75);
  border: .1em solid rgba(255, 255, 255, .25);
  border-radius: .22em;
  overflow: hidden;
  box-sizing: border-box;
}

.bar.hp {
  height: 1.05em;
  border-color: rgba(78, 224, 138, .55);
}

.bar.ce {
  height: .75em;
  border-color: rgba(127, 227, 255, .45);
}

.bar.stm {
  height: .72em;
  border-color: rgba(240, 201, 110, .45);
}

.bar.ulti {
  height: .82em;
  border-color: rgba(255, 143, 61, .55);
}

.bar-text {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .70em;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 .08em .18em #000, 0 0 .3em #000;
  letter-spacing: .04em;
  padding: 0 .35em;
  pointer-events: none;
  box-sizing: border-box;
}

.p-bottom {
  display: flex;
  flex-direction: column;
  gap: .22em;
  margin-top: .12em;
  width: 100%;
  box-sizing: border-box;
}

.p-skills-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: .2em;
}

.dash-ico {
  position: relative;
  width: 1.8em;
  height: 1.45em;
  border: .1em solid var(--ice);
  border-radius: .18em;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .80em;
  font-weight: 700;
  color: var(--ice);
  overflow: hidden;
  background: repeating-linear-gradient(90deg, rgba(127, 227, 255, .15) 0 .2em, transparent .2em .45em);
  flex-shrink: 0;
}

.combo-pips {
  display: flex;
  gap: .22em;
  align-items: center;
}

.combo-pips i {
  width: .70em;
  height: .70em;
  transform: rotate(45deg);
  background: rgba(255, 255, 255, .12);
  border: .1em solid rgba(240, 201, 110, .5);
  display: block;
  transition: background .1s;
}

.combo-pips i.on {
  background: var(--gold);
  box-shadow: 0 0 .5em var(--gold);
}

.combo-pips.ready3 i.on {
  background: var(--ice);
  box-shadow: 0 0 .6em var(--ice);
  border-color: var(--ice);
}

.dash-ico .cd {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 0;
  background: rgba(0, 0, 0, .7);
}

.dash-ico.off {
  border-color: #555;
  color: #666;
}

.dash-ico.barrage-ico {
  border-color: var(--gold-2);
  color: var(--gold-2);
  background: repeating-linear-gradient(90deg, rgba(240, 201, 110, .22) 0 .2em, transparent .2em .45em);
}

.dash-ico.barrage-ico.active {
  background: rgba(240, 201, 110, .45);
  box-shadow: 0 0 .7em rgba(240, 201, 110, .85);
  color: #fff;
  border-color: #ffe066;
}

.dash-ico.barrage-ico.off {
  border-color: #555;
  color: #666;
}

.dash-ico.mirror-ico {
  border-color: #bff3ff;
  color: #bff3ff;
  background: repeating-linear-gradient(90deg, rgba(191, 243, 255, .22) 0 .2em, transparent .2em .45em);
}

.dash-ico.mirror-ico.off {
  border-color: #555;
  color: #666;
}

.dash-ico.guard-ico {
  border-color: #70d6ff;
  color: #70d6ff;
  background: rgba(112, 214, 255, .14);
}

.dash-ico.guard-ico.active {
  background: rgba(112, 214, 255, .45);
  box-shadow: 0 0 .7em rgba(112, 214, 255, .7);
  color: #fff;
}

.dash-ico.counter-ico {
  border-color: #00e5ff;
  color: #00e5ff;
  background: repeating-linear-gradient(90deg, rgba(0, 229, 255, .22) 0 .2em, transparent .2em .45em);
}

.dash-ico.counter-ico.active {
  background: rgba(0, 229, 255, .5);
  box-shadow: 0 0 .9em rgba(0, 229, 255, .9), 0 0 1.5em rgba(255, 209, 102, .6);
  color: #fff;
  border-color: #7fe3ff;
  animation: pulse .5s infinite;
}

.dash-ico.counter-ico.off {
  border-color: #555;
  color: #666;
}

.dash-ico.ulti-ico {
  border-color: rgba(240, 201, 110, .6);
  color: var(--gold-2);
  background: rgba(240, 201, 110, .14);
}

.dash-ico.ulti-ico.ready {
  border-color: #ffd166;
  color: #fff;
  background: rgba(255, 209, 102, .55);
  box-shadow: 0 0 .9em rgba(255, 209, 102, .9), 0 0 1.6em rgba(127, 227, 255, .6);
  animation: pulse .65s infinite;
}

.p-stats {
  font-size: .92em;
  color: var(--muted);
  margin-left: auto;
  letter-spacing: .03em;
}

.hit-counter {
  position: absolute;
  right: 1.4em;
  top: 30%;
  font-size: 1.4em;
  color: var(--gold-2);
  letter-spacing: .1em;
  text-align: right;
  text-shadow: 0 .12em 0 #000;
  opacity: 0;
  transition: opacity .2s;
}

.hit-counter b {
  display: block;
  font-size: 2.6em;
  color: #fff;
  text-shadow: 0 .06em 0 var(--crimson), 0 0 .5em rgba(255, 77, 106, .7);
  line-height: 1;
}

.hit-counter.active {
  opacity: 1;
}

.hit-counter.pop b {
  animation: pop .18s ease;
}

/* ---------- battle actions panel (sağ altta, kompakt ve animasyonlu) ---------- */
.battle-actions-panel {
  position: absolute;
  right: .8em;
  bottom: .8em;
  display: flex;
  flex-direction: column;
  gap: .22em;
  background: linear-gradient(135deg, rgba(12, 4, 18, 0.88), rgba(24, 8, 34, 0.78));
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: .1em solid rgba(240, 201, 110, 0.55);
  border-radius: .4em;
  padding: .38em .68em;
  box-shadow: 0 0 1.5em rgba(0, 0, 0, .88), 0 0 .5em rgba(240, 201, 110, .2);
  pointer-events: auto;
  z-index: 25;
  max-width: 20em;
  transform: translateY(0);
  transition: transform 0.32s cubic-bezier(0.18, 0.89, 0.32, 1.15), opacity 0.25s ease, background 0.2s ease;
  will-change: transform;
}

.battle-actions-panel:hover {
  background: linear-gradient(135deg, rgba(12, 4, 18, 0.94), rgba(24, 8, 34, 0.88));
  border-color: rgba(240, 201, 110, 0.85);
}

.battle-actions-panel.minimized {
  transform: translateY(calc(100% - 2.15em));
  background: linear-gradient(135deg, rgba(12, 4, 18, 0.96), rgba(24, 8, 34, 0.92));
  border-color: rgba(240, 201, 110, 0.35);
  opacity: 0.88;
}

.battle-actions-panel.minimized:hover {
  opacity: 1;
  border-color: rgba(240, 201, 110, 0.85);
  box-shadow: 0 0 1.2em rgba(240, 201, 110, 0.35);
}

.battle-actions-panel .actions-items-container {
  display: flex;
  flex-direction: column;
  gap: .22em;
  transition: opacity 0.2s ease;
}

.battle-actions-panel.minimized .actions-items-container {
  opacity: 0;
  pointer-events: none;
}

.actions-toggle-btn {
  background: rgba(240, 201, 110, 0.12);
  border: 1px solid rgba(240, 201, 110, 0.3);
  border-radius: .25em;
  color: var(--gold);
  font-family: var(--font);
  font-size: .78em;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .6em;
  padding: .2em .45em;
  margin-bottom: .25em;
  letter-spacing: .05em;
  user-select: none;
  transition: all 0.2s ease;
}

.actions-toggle-btn:hover {
  background: rgba(240, 201, 110, 0.25);
  color: #fff;
  border-color: var(--gold);
  box-shadow: 0 0 .5em rgba(240, 201, 110, 0.4);
}

.action-item {
  display: flex;
  align-items: center;
  gap: .42em;
  font-size: .76em;
  color: #eaeaea;
  text-shadow: 0 .08em .15em #000;
  line-height: 1.2;
}

.action-item kbd {
  font-family: var(--font);
  font-size: .84em;
  font-weight: 700;
  padding: .06em .32em;
  border-radius: .2em;
  background: rgba(127, 227, 255, .2);
  border: .1em solid var(--ice);
  color: #fff;
  min-width: 1.55em;
  text-align: center;
  box-shadow: 0 0 .35em rgba(127, 227, 255, 0.35);
  flex-shrink: 0;
}

.action-item span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.action-item.counter kbd {
  background: rgba(0, 229, 255, .25);
  border-color: #00e5ff;
  color: #fff;
  box-shadow: 0 0 .5em rgba(0, 229, 255, .5);
}

.action-item.counter span {
  color: #80f0ff;
  font-weight: 700;
  text-shadow: 0 0 .4em rgba(0, 229, 255, 0.4);
}

.action-item.ulti kbd {
  background: rgba(255, 209, 102, .28);
  border-color: #ffd166;
  color: #fff;
  box-shadow: 0 0 .5em rgba(255, 209, 102, .5);
}

.action-item.ulti span {
  color: #ffe57f;
  font-weight: 700;
  text-shadow: 0 0 .4em rgba(255, 209, 102, 0.5);
}

.btn-battle-hud-pause {
  pointer-events: auto;
  position: absolute;
  right: 1.2em;
  top: 1.2em;
  background: rgba(20, 10, 30, 0.88);
  border: 0.12em solid rgba(127, 227, 255, 0.5);
  border-radius: 0.4em;
  color: #7fe3ff;
  font-family: inherit;
  font-size: 1.1em;
  font-weight: 700;
  padding: 0.35em 0.85em;
  cursor: pointer;
  transition: all 0.15s ease;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.6);
  z-index: 30;
}

.btn-battle-hud-pause:hover {
  background: rgba(127, 227, 255, 0.25);
  border-color: #7fe3ff;
  transform: translateY(-2px);
  box-shadow: 0 0 15px rgba(127, 227, 255, 0.5);
}

/* ---------- DIALOG (RİGLİ & ANİMASYONLU KONUŞMA SİSTEMİ) ---------- */
.dialog {
  display: none;
  position: absolute;
  left: 2.5em;
  right: 2.5em;
  bottom: 1.4em;
  height: 9.6em;
  background: linear-gradient(135deg, rgba(16, 6, 26, 0.96), rgba(8, 2, 14, 0.98));
  border: 0.18em solid var(--gold);
  border-radius: 0.65em;
  box-shadow: 0 0 0 0.15em #000, 0 1.2em 2.5em rgba(0, 0, 0, 0.95), 0 0 2em rgba(255, 209, 102, 0.35);
  z-index: 100;
  padding: 0.9em 1.2em;
  gap: 1.2em;
  cursor: pointer;
  transition: transform 0.1s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.dialog.active {
  display: flex;
  animation: dlgRigIn 0.32s cubic-bezier(0.18, 0.9, 0.32, 1.25);
}

.dialog.shouting,
.dialog.active.shouting {
  animation: dlgShoutShake 0.18s ease-in-out infinite alternate;
  border-color: #ff1744;
  box-shadow: 0 0 0 0.15em #000, 0 0 3em rgba(255, 23, 68, 0.7);
}

@keyframes dlgRigIn {
  0% {
    transform: translateY(35px) scale(0.96);
    opacity: 0;
  }

  70% {
    transform: translateY(-4px) scale(1.01);
    opacity: 1;
  }

  100% {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
}

@keyframes dlgShoutShake {
  0% {
    transform: translate(0, 0) rotate(0deg);
  }

  25% {
    transform: translate(-2px, -2px) rotate(-0.5deg);
  }

  50% {
    transform: translate(2px, 1px) rotate(0.4deg);
  }

  75% {
    transform: translate(-1px, 2px) rotate(-0.3deg);
  }

  100% {
    transform: translate(1px, -1px) rotate(0.2deg);
  }
}

#dlg-portrait {
  height: 100%;
  aspect-ratio: 1;
  border-radius: 0.45em;
  border: 0.16em solid rgba(240, 201, 110, 0.6);
  image-rendering: pixelated;
  object-fit: cover;
  transition: transform 0.15s ease, border-color 0.2s ease, box-shadow 0.2s ease;
  transform-origin: center bottom;
  will-change: transform;
  transform: translateZ(0);
  background: rgba(10, 3, 18, 0.9);
}

#dlg-portrait.speaking {
  border-color: var(--gold);
  box-shadow: 0 0 16px rgba(255, 209, 102, 0.75);
  animation: dlgRigSpeaking 0.16s ease-in-out infinite alternate;
}

@keyframes dlgRigSpeaking {
  0% {
    transform: scale(1) translateY(0) rotate(0deg);
  }

  50% {
    transform: scale(1.05) translateY(-4px) rotate(1deg);
  }

  100% {
    transform: scale(1.02) translateY(-1px) rotate(-1deg);
  }
}

#dlg-portrait.speaking.gojo {
  border-color: #00f0ff;
  box-shadow: 0 0 18px rgba(0, 240, 255, 0.85), 0 0 8px rgba(140, 0, 255, 0.6);
  animation: dlgGojoSpeak 0.15s ease-in-out infinite alternate;
}

@keyframes dlgGojoSpeak {
  0% {
    transform: scale(1) translateY(0) rotate(-0.6deg);
  }

  50% {
    transform: scale(1.06) translateY(-5px) rotate(1.2deg);
  }

  100% {
    transform: scale(1.03) translateY(-1px) rotate(-0.8deg);
  }
}

#dlg-portrait.speaking.sukuna {
  border-color: #ff1744;
  box-shadow: 0 0 18px rgba(255, 23, 68, 0.85), 0 0 8px rgba(255, 85, 0, 0.6);
  animation: dlgSukunaSpeak 0.14s ease-in-out infinite alternate;
}

@keyframes dlgSukunaSpeak {
  0% {
    transform: scale(1) translateY(0) rotate(0.8deg);
  }

  50% {
    transform: scale(1.07) translateY(-5px) rotate(-1.4deg);
  }

  100% {
    transform: scale(1.03) translateY(-2px) rotate(1deg);
  }
}

#dlg-portrait.speaking.yuji {
  border-color: #00e5ff;
  box-shadow: 0 0 16px rgba(0, 229, 255, 0.85);
  animation: dlgRigSpeaking 0.16s ease-in-out infinite alternate;
}

#dlg-portrait.speaking.naoya {
  border-color: #ffd166;
  box-shadow: 0 0 18px rgba(255, 209, 102, 0.85), 0 0 8px rgba(240, 201, 110, 0.6);
  animation: dlgNaoyaSpeak 0.14s ease-in-out infinite alternate;
}

@keyframes dlgNaoyaSpeak {
  0% {
    transform: scale(1) translateY(0) rotate(-0.5deg);
  }

  50% {
    transform: scale(1.05) translateY(-4px) rotate(1deg);
  }

  100% {
    transform: scale(1.02) translateY(-1px) rotate(-0.8deg);
  }
}

#dlg-portrait.speaking.maki {
  border-color: var(--crimson-2);
  box-shadow: 0 0 16px rgba(255, 77, 106, 0.85), 0 0 8px rgba(180, 0, 30, 0.55);
  animation: dlgMakiSpeak 0.15s ease-in-out infinite alternate;
}

@keyframes dlgMakiSpeak {
  0% {
    transform: scale(1) translateY(0) rotate(0.4deg);
  }

  50% {
    transform: scale(1.05) translateY(-4px) rotate(-0.8deg);
  }

  100% {
    transform: scale(1.02) translateY(-1px) rotate(0.5deg);
  }
}

#dlg-portrait.speaking.curse {
  border-color: #10b981;
  box-shadow: 0 0 18px rgba(16, 185, 129, 0.85), 0 0 8px rgba(255, 215, 0, 0.6);
  animation: dlgCurseSpeak 0.12s ease-in-out infinite alternate;
}

@keyframes dlgCurseSpeak {
  0% {
    transform: scale(1) translateY(0) rotate(-1deg);
  }

  50% {
    transform: scale(1.08) translateY(-6px) rotate(1.6deg);
  }

  100% {
    transform: scale(1.03) translateY(-2px) rotate(-1.2deg);
  }
}

#dlg-portrait.speaking.megumi {
  border-color: #a855f7;
  box-shadow: 0 0 18px rgba(168, 85, 247, 0.85), 0 0 8px rgba(56, 189, 248, 0.6);
  animation: dlgMegumiSpeak 0.15s ease-in-out infinite alternate;
}

@keyframes dlgMegumiSpeak {
  0% {
    transform: scale(1) translateY(0) rotate(0.4deg);
  }

  50% {
    transform: scale(1.05) translateY(-4px) rotate(-0.8deg);
  }

  100% {
    transform: scale(1.02) translateY(-1px) rotate(0.5deg);
  }
}

#dlg-portrait.speaking.maki-p2 {
  border-color: #ff1f3d;
  box-shadow: 0 0 20px rgba(255, 31, 61, 0.9), 0 0 10px rgba(100, 0, 15, 0.8);
  animation: dlgMakiP2Speak 0.12s ease-in-out infinite alternate;
}

@keyframes dlgMakiP2Speak {
  0% {
    transform: scale(1) translateY(0) rotate(1deg);
  }

  50% {
    transform: scale(1.08) translateY(-6px) rotate(-1.5deg);
  }

  100% {
    transform: scale(1.03) translateY(-2px) rotate(1.2deg);
  }
}

.dlg-body {
  flex: 1;
  position: relative;
  display: flex;
  flex-direction: column;
}

.dlg-top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.3em;
}

.dlg-skip-btn {
  pointer-events: auto;
  background: rgba(255, 209, 102, 0.15);
  border: 0.12em solid var(--gold);
  border-radius: 0.35em;
  color: var(--gold);
  font-family: inherit;
  font-size: 1.05em;
  font-weight: 700;
  padding: 0.2em 0.7em;
  cursor: pointer;
  transition: all 0.15s ease;
}

.dlg-skip-btn:hover {
  background: var(--gold);
  color: #0b0312;
  box-shadow: 0 0 12px rgba(255, 209, 102, 0.6);
}

.dlg-name {
  font-size: 1.35em;
  font-weight: 700;
  color: var(--gold);
  letter-spacing: .12em;
}

.dlg-name.naoya {
  color: #ffd166;
  text-shadow: 0 0 12px rgba(255, 209, 102, 0.9), 0 0 20px rgba(240, 201, 110, 0.6);
}

.dlg-name.gojo {
  color: #00f0ff;
  text-shadow: 0 0 12px rgba(0, 240, 255, 0.85), 0 0 20px rgba(120, 0, 255, 0.5);
}

.dlg-name.sukuna {
  color: #ff1744;
  text-shadow: 0 0 12px rgba(255, 23, 68, 0.85), 0 0 20px rgba(255, 80, 0, 0.6);
}

.dlg-name.maki {
  color: var(--crimson-2);
}

.dlg-name.maki-p2 {
  color: #ff334b;
  text-shadow: 0 0 10px rgba(255, 51, 75, 0.85);
}

.dlg-name.yuji {
  color: #00e5ff;
  text-shadow: 0 0 10px rgba(0, 229, 255, 0.7);
}

.dlg-name.toji {
  color: #a855f7;
  text-shadow: 0 0 12px rgba(168, 85, 247, 0.85), 0 0 20px rgba(168, 85, 247, 0.5);
}

.dlg-name.geto {
  color: #fbbf24;
  text-shadow: 0 0 12px rgba(251, 191, 36, 0.85), 0 0 20px rgba(245, 158, 11, 0.5);
}

.dlg-name.yuta {
  color: #38bdf8;
  text-shadow: 0 0 12px rgba(56, 189, 248, 0.85), 0 0 20px rgba(56, 189, 248, 0.5);
}

.dlg-text {
  font-size: 1.4em;
  line-height: 1.38;
  color: var(--paper);
  flex: 1;
  transition: opacity 0.2s ease;
}

/* Diyalog sırasında soldan sağa doğru eriyen / parıldayan yazı animasyonu */
.dlg-body.typing .dlg-text {
  background: linear-gradient(90deg, #ffffff 0%, #ffffff 80%, rgba(255, 209, 102, 0.45) 92%, rgba(255, 255, 255, 0.15) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-size: 200% 100%;
  animation: dlgTypeShimmer 1.1s linear infinite;
}

@keyframes dlgTypeShimmer {
  0% { background-position: -120% 0; }
  100% { background-position: 120% 0; }
}

.dlg-body.typing .dlg-name {
  position: relative;
  overflow: hidden;
}

.dlg-body.typing .dlg-name::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.4) 50%, transparent 100%);
  transform: translateX(-100%);
  animation: dlgNameWipe 1.4s ease-in-out infinite;
}

@keyframes dlgNameWipe {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

.dlg-body.typing .dlg-next {
  opacity: 0.35;
  animation: none;
}

.dlg-next {
  position: absolute;
  right: .3em;
  bottom: 0;
  color: var(--gold);
  animation: bob .8s infinite;
  font-size: 1.1em;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

/* ---------- level up ---------- */
.levelup-card {
  min-width: 26em;
  border-color: var(--ice);
  box-shadow: 0 0 2.5em rgba(127, 227, 255, .35), inset 0 0 2em rgba(127, 227, 255, .12);
}

.lvl-title {
  color: var(--ice) !important;
  text-shadow: 0 .12em 0 #0e3b52, 0 0 .8em rgba(127, 227, 255, .6) !important;
  animation: pop .4s ease;
}

.lvl-sub {
  font-size: 1.4em;
  color: var(--paper);
  margin-top: -.3em;
  margin-bottom: .8em;
}

.lvl-rows {
  list-style: none;
  font-size: 1.3em;
  text-align: left;
}

.lvl-rows li {
  display: grid;
  grid-template-columns: 1fr 3em 1.5em 3em;
  gap: .3em;
  align-items: center;
  padding: .25em 0;
  border-bottom: .06em dashed rgba(169, 155, 181, .25);
  opacity: 0;
  animation: rowIn .35s ease forwards;
}

.lvl-rows li span:first-child {
  color: var(--muted);
}

.lvl-rows .old {
  text-align: right;
  color: var(--muted);
}

.lvl-rows .arrow {
  text-align: center;
  color: var(--gold);
}

.lvl-rows .new {
  color: var(--hp);
  font-weight: 700;
  text-shadow: 0 0 .4em rgba(78, 224, 138, .6);
}

.lvl-rows.simple li {
  grid-template-columns: 1fr auto;
}

/* ---------- counter ulti cutscene (1:12 - Bitiş) ---------- */
.cutscene-modal {
  z-index: 45;
  background: radial-gradient(circle at center, rgba(12, 4, 18, 0.96), rgba(2, 0, 4, 0.99));
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  pointer-events: none;
  overflow: hidden;
}

.cutscene-film-reel {
  width: 100%;
  height: 2.4em;
  background: repeating-linear-gradient(90deg, #180924 0, #180924 1.8em, #040108 1.8em, #040108 2.4em);
  border-top: .15em solid rgba(127, 227, 255, 0.5);
  border-bottom: .15em solid rgba(127, 227, 255, 0.5);
  box-shadow: 0 0 1.5em rgba(0, 0, 0, .9);
  animation: reelScroll 1.2s linear infinite;
}

@keyframes reelScroll {
  0% {
    background-position: 0 0;
  }

  100% {
    background-position: 2.4em 0;
  }
}

.cutscene-speedlines {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-radial-gradient(circle at 60% 50%, transparent 0, transparent 40px, rgba(127, 227, 255, 0.08) 42px, transparent 46px);
  opacity: 0.7;
  animation: speedSpin 0.3s linear infinite;
}

@keyframes speedSpin {
  0% {
    transform: scale(1) rotate(0deg);
    opacity: 0.5;
  }

  50% {
    transform: scale(1.05) rotate(1deg);
    opacity: 0.85;
  }

  100% {
    transform: scale(1) rotate(0deg);
    opacity: 0.5;
  }
}

.cutscene-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  max-width: 95%;
  z-index: 2;
}

.cutscene-screen-wrap {
  position: relative;
  display: inline-block;
  border-radius: 0.45em;
  overflow: hidden;
  box-shadow: 0 0 3em rgba(240, 201, 110, 0.65), 0 0 6em rgba(127, 227, 255, 0.4);
  border: 0.22em solid var(--gold);
  animation: cutscenePop 0.25s ease-out;
}

@keyframes cutscenePop {
  0% {
    transform: scale(1.06);
    filter: brightness(1.8);
  }

  100% {
    transform: scale(1);
    filter: brightness(1);
  }
}

.cutscene-screen-wrap.shake-heavy {
  animation: csHeavyShake 0.16s ease-in-out infinite;
}

@keyframes csHeavyShake {
  0% {
    transform: translate(0, 0) scale(1.02);
  }

  25% {
    transform: translate(-6px, 4px) scale(1.03);
  }

  50% {
    transform: translate(7px, -5px) scale(1.02);
  }

  75% {
    transform: translate(-5px, -3px) scale(1.03);
  }

  100% {
    transform: translate(0, 0) scale(1.02);
  }
}

.cutscene-gif {
  width: 52em;
  max-height: 28em;
  object-fit: contain;
  display: block;
}

.cutscene-video {
  width: 52em;
  max-height: 28em;
  object-fit: contain;
  display: none;
  image-rendering: pixelated;
  background: #000;
  border-radius: 0.3em;
}

.cutscene-video.active {
  display: block;
}

.cutscene-skip-btn {
  position: absolute;
  top: 0.8em;
  right: 1em;
  z-index: 30;
  background: rgba(10, 14, 28, 0.95);
  border: 1px solid rgba(255, 209, 102, 0.6);
  color: #ffd166;
  font-family: inherit;
  font-size: 0.82em;
  font-weight: 800;
  padding: 0.35em 0.8em;
  border-radius: 0.4em;
  cursor: pointer;
  letter-spacing: 0.08em;
  box-shadow: 0 0.2em 0.8em rgba(0, 0, 0, 0.6);
  transition: all 0.15s ease;
}

.cutscene-skip-btn:hover {
  background: #ffd166;
  color: #0b1122;
  transform: scale(1.05);
  box-shadow: 0 0 1.2em rgba(255, 209, 102, 0.7);
}

/* 3D Pixel Split Estate Destruction */
.cutscene-3d-split {
  position: absolute;
  inset: 0;
  pointer-events: none;
  display: none;
  perspective: 600px;
  overflow: hidden;
  z-index: 5;
}

.cutscene-3d-split.active {
  display: block;
}

.split-side {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50%;
  background-image: url('../assets/cutscene/cut_split_estate.jpg');
  background-size: 200% 100%;
  image-rendering: pixelated;
  transition: transform 0.4s cubic-bezier(0.16, 0.9, 0.28, 1.25);
}

.split-side.split-left {
  left: 0;
  background-position: left center;
  transform-origin: left center;
  clip-path: polygon(0 0, 100% 0, 94% 100%, 0 100%);
  box-shadow: 0.4em 0 1.5em rgba(0, 0, 0, 0.85);
}

.cutscene-3d-split.active .split-side.split-left {
  transform: perspective(600px) rotateY(-22deg) translateX(-3.2em) translateZ(1.5em);
}

.split-side.split-right {
  right: 0;
  background-position: right center;
  transform-origin: right center;
  clip-path: polygon(6% 0, 100% 0, 100% 100%, 0 100%);
  box-shadow: -0.4em 0 1.5em rgba(0, 0, 0, 0.85);
}

.cutscene-3d-split.active .split-side.split-right {
  transform: perspective(600px) rotateY(22deg) translateX(3.2em) translateZ(1.5em);
}

.split-chasm {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 0.6em;
  transform: translateX(-50%);
  background: linear-gradient(180deg, #7fe3ff, #ffd166, #ff4d6a);
  box-shadow: 0 0 2em #ffd166, 0 0 3.5em #7fe3ff;
  opacity: 0;
  transition: opacity 0.15s;
}

.cutscene-3d-split.active .split-chasm {
  opacity: 1;
  animation: chasmPulse 0.08s infinite alternate;
}

@keyframes chasmPulse {
  0% {
    transform: translateX(-50%) scaleX(1);
    opacity: 0.75;
  }

  100% {
    transform: translateX(-50%) scaleX(2.6);
    opacity: 1;
  }
}

.cutscene-fps-counter {
  position: absolute;
  top: 0.7em;
  right: 0.9em;
  background: rgba(3, 1, 6, 0.85);
  border: 0.14em solid var(--ice);
  color: var(--ice);
  padding: 0.2em 0.75em;
  font-size: 1.25em;
  font-weight: 700;
  letter-spacing: 0.15em;
  border-radius: 0.25em;
  text-shadow: 0 0 0.5em var(--ice);
  box-shadow: 0 0 1em rgba(127, 227, 255, 0.5);
  transition: color 0.15s, border-color 0.15s;
}

.cutscene-fps-counter.impact {
  border-color: var(--gold);
  color: #fff3c4;
  text-shadow: 0 0 0.7em var(--gold);
  box-shadow: 0 0 1.5em rgba(255, 209, 102, 0.8);
}

.cutscene-flash {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: #ffffff;
  opacity: 0;
  transition: opacity 0.05s ease-out;
}

.cutscene-flash.active {
  opacity: 0.75;
}

.cutscene-flash.sakuga-strobe {
  animation: sakugaStrobe 0.08s ease-out 1;
}

@keyframes sakugaStrobe {
  0% {
    opacity: 0.8;
  }

  100% {
    opacity: 0;
  }
}

.cutscene-dialogue {
  margin-top: 0.7em;
  text-align: center;
  background: linear-gradient(90deg, transparent, rgba(20, 6, 28, 0.94), transparent);
  padding: 0.45em 2.5em;
  border-radius: 0.35em;
  border-top: 0.08em solid rgba(240, 201, 110, 0.3);
  border-bottom: 0.08em solid rgba(240, 201, 110, 0.3);
}

.cs-kicker {
  font-size: 1.1em;
  letter-spacing: 0.28em;
  color: var(--ice);
  font-weight: 700;
  text-shadow: 0 0 0.6em var(--ice);
  display: block;
}

.cs-text {
  font-size: 1.6em;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.06em;
}

/* ---------- Sukuna Awakening Cutscene ---------- */
.cutscene-modal.sukuna-theme {
  background: radial-gradient(circle at center, rgba(32, 2, 10, 0.98), rgba(6, 0, 2, 0.99));
}

.cutscene-film-reel.crimson {
  background: repeating-linear-gradient(90deg, #2a050f 0, #2a050f 1.8em, #0a0104 1.8em, #0a0104 2.4em);
  border-top: .15em solid rgba(255, 23, 68, 0.6);
  border-bottom: .15em solid rgba(255, 23, 68, 0.6);
}

.sukuna-speedlines {
  background: repeating-radial-gradient(circle at 50% 50%, transparent 0, transparent 38px, rgba(255, 23, 68, 0.12) 40px, transparent 44px);
}

.sukuna-screen-wrap {
  border: 0.22em solid #ff1744 !important;
  box-shadow: 0 0 3em rgba(255, 23, 68, 0.7), 0 0 6em rgba(0, 0, 0, 0.9) !important;
}

.cutscene-image {
  width: 52em;
  max-height: 28em;
  object-fit: contain;
  display: block;
  image-rendering: pixelated;
}

.cutscene-dialogue.sukuna {
  border-left: 0.25em solid #ff1744;
  border-bottom-color: rgba(255, 23, 68, 0.4);
  background: rgba(22, 2, 8, 0.85);
}

.cutscene-dialogue.sukuna .cs-kicker {
  color: #ff3366;
  text-shadow: 0 0 0.8em #ff1744;
}

.cutscene-dialogue.sukuna .cs-text {
  text-shadow: 0 0.1em 0 #000, 0 0 1em rgba(255, 23, 68, 0.85);
}

.sukuna-skip {
  border-color: rgba(255, 51, 102, 0.7) !important;
  color: #ff3366 !important;
}

/* ---------- Megumi Shadow Ulti Cutscene (Pure 24 FPS Pixel Cinematic) ---------- */
.cutscene-modal.megumi-theme {
  background: radial-gradient(circle at center, rgba(16, 6, 30, 0.98), rgba(3, 1, 8, 0.99)) !important;
}

.cutscene-modal.pure-cinematic .cutscene-dialogue,
.cutscene-modal.pure-cinematic #cs-dialogue {
  display: none !important;
}

.cutscene-modal.megumi-theme .cutscene-screen-wrap {
  border: 0.22em solid #a855f7 !important;
  box-shadow: 0 0 3em rgba(168, 85, 247, 0.7), 0 0 6em rgba(0, 0, 0, 0.95) !important;
}

.cutscene-modal.megumi-theme .cutscene-fps-counter {
  background: rgba(168, 85, 247, 0.95);
  color: #fff;
  border-color: #c084fc;
  text-shadow: 0 0 8px #a855f7;
}

.cutscene-modal.megumi-theme .cutscene-skip-btn {
  border-color: rgba(168, 85, 247, 0.8) !important;
  color: #e9d5ff !important;
}

.sukuna-skip:hover {
  background: #ff1744 !important;
  color: #fff !important;
  box-shadow: 0 0 1.5em rgba(255, 23, 68, 0.85) !important;
}

/* ---------- cut-in ---------- */
.cutin {
  z-index: 28;
  pointer-events: none;
}

.cutin-band {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 12em;
  transform: translateY(-50%);
  background: linear-gradient(90deg, rgba(120, 6, 20, .95), rgba(20, 2, 6, .95));
  border-top: .2em solid var(--crimson-2);
  border-bottom: .2em solid var(--crimson-2);
  display: flex;
  align-items: center;
  gap: 2em;
  padding-left: 6em;
  animation: bandIn .5s cubic-bezier(.2, .9, .3, 1.1);
  box-shadow: 0 0 3em rgba(255, 40, 60, .6);
}

.cutin-band.ice {
  background: linear-gradient(90deg, rgba(10, 60, 90, .95), rgba(2, 10, 20, .95));
  border-color: var(--ice);
  box-shadow: 0 0 3em rgba(127, 227, 255, .5);
}

.cutin-band img {
  height: 14em;
  margin-top: -2em;
  object-fit: contain;
  image-rendering: pixelated;
  filter: drop-shadow(0 0 1em rgba(0, 0, 0, .8));
  animation: cutImg .6s ease;
}

#cutin-small {
  font-size: 1.5em;
  letter-spacing: .4em;
  color: var(--paper);
}

#cutin-big {
  font-size: 3.6em;
  font-weight: 700;
  color: #fff;
  letter-spacing: .06em;
  text-shadow: 0 .08em 0 #000, 0 0 .5em rgba(255, 77, 106, .8);
}

.cutin-band.ice #cutin-big {
  text-shadow: 0 .08em 0 #000, 0 0 .5em rgba(127, 227, 255, .9);
}

/* ---------- results ---------- */
.result-card {
  min-width: 28em;
}

.res-title {
  font-size: 4em !important;
}

.res-title.win {
  color: var(--gold) !important;
}

.res-title.lose {
  color: var(--crimson-2) !important;
  text-shadow: 0 .1em 0 #3a0410 !important;
}

.res-sub {
  font-size: 1.3em;
  color: var(--muted);
  margin: -.6em 0 1em;
}

/* ---------- boss exit modal ---------- */
.boss-exit-card {
  max-width: 32em;
  border: 0.16em solid #ff1744 !important;
  box-shadow: 0 0 35px rgba(255, 23, 68, 0.35), inset 0 0 25px rgba(255, 23, 68, 0.15) !important;
  background: linear-gradient(165deg, #2b0b14, #0f050a) !important;
  padding: 2.2em 2.6em !important;
}

.boss-exit-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  margin-bottom: 0.4em;
}

.boss-exit-icon {
  font-size: 2.2em;
  filter: drop-shadow(0 0 8px #ff4400);
  animation: pulseWarning 1.2s infinite ease-in-out;
}

@keyframes pulseWarning {

  0%,
  100% {
    transform: scale(1);
    opacity: 1;
  }

  50% {
    transform: scale(1.15);
    opacity: 0.8;
  }
}

.boss-exit-warning {
  font-size: 1.6em !important;
  font-weight: 700 !important;
  color: #ff3344 !important;
  text-shadow: 0 0 12px rgba(255, 51, 68, 0.6) !important;
  margin: 0.8em 0 0.5em !important;
  letter-spacing: 0.03em;
}

.boss-exit-sub {
  font-size: 1.15em !important;
  color: #d1b8c4 !important;
  line-height: 1.45;
  margin-bottom: 1.8em !important;
}

.boss-exit-btns {
  display: flex;
  gap: 1.2em;
  justify-content: center;
}

.btn.danger {
  background: linear-gradient(135deg, #b3001e, #e60026) !important;
  color: #fff !important;
  border-color: rgba(255, 120, 140, 0.5) !important;
  box-shadow: 0 0 15px rgba(230, 0, 38, 0.4) !important;
}

.btn.danger:hover {
  background: linear-gradient(135deg, #e60026, #ff1744) !important;
  box-shadow: 0 0 24px rgba(255, 23, 68, 0.75) !important;
  transform: translateY(-2px);
}

/* ---------- fade / loading ---------- */
.fade {
  position: absolute;
  inset: 0;
  background: #000;
  opacity: 0;
  pointer-events: none;
  transition: opacity .35s ease;
  z-index: 50;
}

.fade.on {
  opacity: 1;
}

.loading {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at center, #1b0a17 0%, #080209 70%, #030005 100%);
  z-index: 9999;
  opacity: 1;
  transition: opacity 0.4s ease, transform 0.4s ease;
  user-select: none;
}

.loading.done {
  opacity: 0 !important;
  pointer-events: none !important;
  transform: scale(1.02);
  display: none !important;
}

.loading-panel {
  max-width: 560px;
  width: 90%;
  background: rgba(18, 6, 17, 0.98);
  border: 2px solid rgba(240, 201, 110, 0.45);
  border-radius: 1.2em;
  padding: 1.8em 2em;
  box-shadow: 0 0 50px rgba(255, 31, 61, 0.25), inset 0 0 35px rgba(0, 0, 0, 0.7);
  text-align: center;
  position: relative;
  overflow: hidden;
}

.loading-crest {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  margin-bottom: 0.2em;
}

.loading-kanji {
  font-size: 1.4em;
  color: #ff3366;
  font-weight: 900;
  letter-spacing: 0.15em;
  text-shadow: 0 0 12px rgba(255, 51, 102, 0.85);
}

.loading-subkicker {
  font-size: 0.72em;
  letter-spacing: 0.16em;
  color: #f0c96e;
  font-weight: 700;
}

.loading-brand {
  font-family: 'Pixelify Sans', sans-serif;
  font-size: 2.1em;
  font-weight: 900;
  margin: 0 0 1em;
  letter-spacing: 0.08em;
  color: #fff;
  text-shadow: 0 0 20px rgba(240, 201, 110, 0.5);
}

.loading-brand span {
  color: #ff3366;
}

.loading-preview-card {
  display: flex;
  align-items: center;
  gap: 1.1em;
  background: rgba(10, 3, 10, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 0.9em;
  padding: 0.9em 1.2em;
  margin-bottom: 1.3em;
  text-align: left;
  box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.6);
}

.loading-preview-thumb-wrap {
  width: 56px;
  height: 56px;
  border-radius: 0.6em;
  border: 2px solid #f0c96e;
  overflow: hidden;
  position: relative;
  background: #000;
  flex-shrink: 0;
  box-shadow: 0 0 12px rgba(240, 201, 110, 0.4);
}

.loading-preview-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  image-rendering: pixelated;
}

.loading-preview-info {
  flex: 1;
  overflow: hidden;
}

.loading-category-badge {
  display: inline-block;
  font-size: 0.65em;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: #f0c96e;
  background: rgba(240, 201, 110, 0.15);
  padding: 0.2em 0.6em;
  border-radius: 0.4em;
  border: 1px solid rgba(240, 201, 110, 0.4);
  margin-bottom: 0.3em;
}

.loading-current-label {
  font-size: 0.95em;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.loading-detail-sub {
  font-size: 0.78em;
  color: #94a3b8;
  margin-top: 0.2em;
}

.loading-bar-container {
  margin-bottom: 1em;
  position: relative;
}

.loading-bar-track {
  height: 16px;
  background: rgba(0, 0, 0, 0.8);
  border: 1px solid rgba(240, 201, 110, 0.5);
  border-radius: 12px;
  overflow: hidden;
  position: relative;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.85);
}

.loading-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #ff1f3d 0%, #ff5e3a 50%, #f0c96e 100%);
  border-radius: 12px;
  position: relative;
  transition: width 0.1s linear;
  box-shadow: 0 0 18px rgba(255, 31, 61, 0.85);
}

.loading-bar-shimmer {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent);
  animation: loadingShimmer 1.4s infinite;
}

@keyframes loadingShimmer {
  0% {
    transform: translateX(-100%);
  }

  100% {
    transform: translateX(100%);
  }
}

.loading-bar-stats {
  display: flex;
  justify-content: space-between;
  font-size: 0.82em;
  font-weight: 700;
  color: #f0c96e;
  margin-top: 0.5em;
}

.loading-percent {
  color: #fff;
  font-size: 1.1em;
  font-family: 'Pixelify Sans', monospace;
}

.loading-log-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  font-size: 0.84em;
  color: #94a3b8;
  margin-top: 0.6em;
}

.loading-pulse-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 8px #22c55e;
  animation: pulseDot 1s infinite alternate;
}

@keyframes pulseDot {
  0% {
    transform: scale(0.85);
    opacity: 0.7;
  }

  100% {
    transform: scale(1.3);
    opacity: 1;
  }
}

.btn-loading-ready {
  margin-top: 1em;
  width: 100%;
  font-size: 1.1em;
  padding: 0.65em 1.2em;
  animation: btnReadyGlow 1.2s infinite alternate;
}

@keyframes btnReadyGlow {
  0% {
    box-shadow: 0 0 10px rgba(240, 201, 110, 0.4);
  }

  100% {
    box-shadow: 0 0 24px rgba(240, 201, 110, 0.9);
  }
}

/* ---------- hoparlör (ses kontrolü) ---------- */
.speaker {
  position: absolute;
  right: 1em;
  top: 1em;
  z-index: 58;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  cursor: default;
  transition: right .35s ease, opacity .25s ease;
}

#stage:has(#estate-hud.active) .speaker {
  right: 17.6em;
}

#stage:has(#splash.active) .speaker,
#stage:has(#splash.active) .touch-pause,
#stage:has(#splash.active) #btn-open-pixelai,
#stage:has(#counter-cutscene.active) .speaker,
#stage:has(#loading:not(.done)) .speaker {
  opacity: 0;
  pointer-events: none;
}

.speaker-btn {
  position: relative;
  width: 3.8em;
  height: 3.8em;
  padding: .55em;
  display: grid;
  place-items: center;
  font-family: var(--font);
  color: var(--gold-2);
  cursor: pointer;
  background: radial-gradient(circle at 35% 30%, rgba(90, 40, 110, .95), rgba(20, 8, 28, .95) 70%);
  border: .15em solid var(--glass-border);
  border-radius: 50%;
  box-shadow: 0 .22em 0 rgba(0, 0, 0, .6), 0 0 0 .1em rgba(0, 0, 0, .5), inset 0 0 .8em rgba(240, 201, 110, .15);
  transition: transform .12s ease, border-color .15s, box-shadow .2s, color .15s;
}

.speaker-btn:hover,
.speaker-btn:focus-visible {
  outline: none;
  transform: translateY(-.12em) scale(1.05);
  border-color: var(--gold);
  color: #fff;
  box-shadow: 0 .32em 0 rgba(0, 0, 0, .6), 0 0 1.3em rgba(240, 201, 110, .45), inset 0 0 .8em rgba(240, 201, 110, .25);
}

.speaker-btn:active {
  transform: translateY(.08em) scale(.97);
  box-shadow: 0 .06em 0 rgba(0, 0, 0, .6);
}

.spk-ico {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.spk-ico path {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.spk-ico .spk-body {
  fill: currentColor;
  fill-opacity: .25;
}

.spk-w {
  transform-origin: 12px 12px;
  transition: opacity .2s, transform .2s;
}

.spk-x {
  opacity: 0;
  stroke: var(--crimson-2) !important;
  transition: opacity .2s;
}

.speaker[data-level="2"] .spk-w {
  animation: spkWave 1.2s ease-in-out infinite;
}

.speaker[data-level="2"] .spk-w2 {
  animation-delay: .15s;
}

.speaker[data-level="1"] .spk-w1 {
  animation: spkWave 1.2s ease-in-out infinite;
}

.speaker[data-level="1"] .spk-w2 {
  opacity: 0;
}

.speaker[data-level="0"] .spk-w {
  opacity: 0;
  transform: scale(.6);
}

.speaker[data-level="0"] .spk-x {
  opacity: 1;
}

.speaker[data-level="0"] .speaker-btn {
  color: var(--muted);
  border-color: rgba(255, 77, 106, .55);
}

/* küçük ekolayzer */
.spk-eq {
  position: absolute;
  right: -.15em;
  bottom: -.15em;
  display: flex;
  align-items: flex-end;
  gap: .12em;
  height: 1.2em;
  padding: .18em .25em;
  border-radius: .3em;
  background: rgba(10, 4, 14, .92);
  border: .1em solid rgba(127, 227, 255, .55);
}

.spk-eq i {
  display: block;
  width: .22em;
  height: 100%;
  background: var(--ice);
  border-radius: .05em;
  transform-origin: bottom;
  transform: scaleY(.3);
}

.speaker:not([data-level="0"]) .spk-eq i {
  animation: spkEq .9s ease-in-out infinite;
}

.speaker:not([data-level="0"]) .spk-eq i:nth-child(2) {
  animation-duration: .7s;
  animation-delay: .1s;
}

.speaker:not([data-level="0"]) .spk-eq i:nth-child(3) {
  animation-duration: 1.1s;
  animation-delay: .25s;
}

.speaker[data-level="0"] .spk-eq {
  border-color: rgba(255, 77, 106, .5);
}

.speaker[data-level="0"] .spk-eq i {
  background: var(--crimson-2);
}

/* açılır panel */
.speaker-panel {
  position: absolute;
  right: 0;
  top: calc(100% + .6em);
  width: 15em;
  padding: .7em .85em .6em;
  background: linear-gradient(160deg, rgba(36, 15, 48, .97), rgba(12, 5, 18, .97));
  border: .14em solid var(--glass-border);
  border-radius: .5em;
  box-shadow: 0 1em 2em rgba(0, 0, 0, .6), inset 0 0 1.4em rgba(212, 42, 72, .12);
  opacity: 0;
  transform: translateY(-.5em) scale(.96);
  transform-origin: top right;
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
}

.speaker-panel::before {
  /* hover köprüsü */
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: -.8em;
  height: .8em;
}

.speaker:hover .speaker-panel,
.speaker:focus-within .speaker-panel,
.speaker.open .speaker-panel {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.speaker-now {
  font-size: 1em;
  color: var(--paper);
  letter-spacing: .04em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: .45em;
}

.speaker-note {
  color: var(--gold);
  display: inline-block;
  animation: spkNote 1.6s ease-in-out infinite;
}

.speaker[data-level="0"] .speaker-note {
  animation: none;
  color: var(--muted);
}

.speaker-row {
  display: flex;
  align-items: center;
  gap: .6em;
}

.speaker-pct {
  min-width: 3.6em;
  text-align: right;
  font-size: 1.05em;
  font-weight: 700;
  color: var(--gold-2);
}

.speaker[data-level="0"] .speaker-pct {
  color: var(--crimson-2);
}

.speaker-range {
  --fill: 80%;
  flex: 1;
  height: 1.4em;
  margin: 0;
  background: transparent;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.speaker-range:focus {
  outline: none;
}

.speaker-range::-webkit-slider-runnable-track {
  height: .55em;
  border-radius: .3em;
  border: .08em solid rgba(240, 201, 110, .4);
  background: linear-gradient(90deg, var(--crimson) 0%, var(--gold) var(--fill), rgba(255, 255, 255, .08) var(--fill));
}

.speaker-range::-moz-range-track {
  height: .55em;
  border-radius: .3em;
  border: .08em solid rgba(240, 201, 110, .4);
  background: linear-gradient(90deg, var(--crimson) 0%, var(--gold) var(--fill), rgba(255, 255, 255, .08) var(--fill));
}

.speaker-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 1.15em;
  height: 1.15em;
  margin-top: -.35em;
  border-radius: .2em;
  background: var(--gold-2);
  border: .12em solid #6b2a1a;
  box-shadow: 0 0 .6em rgba(240, 201, 110, .8);
  transition: transform .12s;
}

.speaker-range::-moz-range-thumb {
  width: 1em;
  height: 1em;
  border-radius: .2em;
  background: var(--gold-2);
  border: .12em solid #6b2a1a;
  box-shadow: 0 0 .6em rgba(240, 201, 110, .8);
}

.speaker-range:hover::-webkit-slider-thumb,
.speaker-range:active::-webkit-slider-thumb {
  transform: scale(1.2);
}

.speaker[data-level="0"] .speaker-range {
  filter: grayscale(.8) brightness(.8);
}

.speaker-hint {
  margin-top: .4em;
  font-size: .9em;
  color: var(--muted);
  text-align: right;
  letter-spacing: .06em;
}

.speaker-hint kbd {
  font-family: var(--font);
  background: var(--gold);
  color: var(--ink);
  padding: 0 .35em;
  border-radius: .2em;
  font-weight: 700;
  margin-right: .2em;
}

@keyframes spkWave {
  50% {
    opacity: .35;
    transform: scale(.88);
  }
}

@keyframes spkEq {

  0%,
  100% {
    transform: scaleY(.3);
  }

  50% {
    transform: scaleY(1);
  }
}

@keyframes spkNote {
  50% {
    transform: translateY(-.18em) rotate(-8deg);
  }
}

/* ---------- chapters (bölüm seçimi) ---------- */
#chapters {
  background: #0d0516;
  z-index: 55;
}

.chapters-card {
  width: 56em;
  max-height: 94%;
  padding: 1em 1.4em 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  border-color: rgba(240, 201, 110, .5);
}

.chapters-card h2 {
  font-size: 2em;
  margin-bottom: .1em;
}

.chapters-sub {
  font-size: .95em;
  letter-spacing: .15em;
  color: var(--muted);
  margin-bottom: .6em;
}

.chapter-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: .4em;
  overflow-y: auto;
  overscroll-behavior: contain;
  min-height: 0;
  padding-right: .3em;
  scrollbar-width: thin;
  scrollbar-color: rgba(240, 201, 110, .6) rgba(0, 0, 0, .35);
}

.chapter-list li {
  flex: 0 0 auto;
}

.chapter {
  width: 100%;
  display: flex;
  align-items: center;
  gap: .9em;
  font-family: var(--font);
  color: var(--paper);
  text-align: left;
  padding: .4em .8em;
  background: linear-gradient(90deg, rgba(60, 28, 74, .8), rgba(30, 12, 40, .85));
  border: .12em solid rgba(240, 201, 110, .35);
  border-radius: .35em;
  cursor: pointer;
  transition: transform .12s, border-color .15s, box-shadow .15s;
}

.chapter:hover,
.chapter:focus-visible {
  outline: none;
  transform: translateX(.25em);
  border-color: var(--gold);
  box-shadow: 0 0 1.1em rgba(240, 201, 110, .3);
}

.ch-no {
  flex: 0 0 auto;
  width: 1.9em;
  height: 1.9em;
  line-height: 1.9em;
  text-align: center;
  font-size: 1.3em;
  font-weight: 700;
  color: var(--gold);
  border: .1em solid rgba(240, 201, 110, .5);
  border-radius: .3em;
  background: rgba(0, 0, 0, .35);
}

.ch-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.ch-main b {
  font-size: 1.25em;
  letter-spacing: .05em;
}

.ch-main small {
  font-size: .95em;
  color: var(--muted);
}

.ch-main small i {
  color: var(--crimson-2);
  font-style: normal;
  margin: 0 .2em;
}

.ch-main b em {
  margin-left: .7em;
  font-size: .72em;
  font-style: normal;
  font-weight: 500;
  letter-spacing: .12em;
  color: var(--ice);
  text-shadow: 0 0 .5em rgba(127, 227, 255, .45);
}

.ch-badge {
  flex: 0 0 auto;
  min-width: 7.5em;
  text-align: center;
  font-size: .95em;
  letter-spacing: .08em;
  padding: .25em .6em;
  border-radius: .3em;
  border: .1em solid currentColor;
}

.chapter.open {
  border-color: rgba(255, 179, 192, .8);
}

.chapter.open .ch-badge {
  color: var(--crimson-2);
  background: rgba(212, 42, 72, .2);
  animation: pulse 1.6s infinite;
}

.ch-badge.ch-badge-selected {
  color: #10b981 !important;
  background: rgba(16, 185, 129, 0.25) !important;
  border-color: #34d399 !important;
  box-shadow: 0 0 10px rgba(16, 185, 129, 0.45);
  font-weight: 700;
  animation: none !important;
}

.ch-badge.ch-badge-pick {
  color: #38bdf8 !important;
  background: rgba(56, 189, 248, 0.22) !important;
  border-color: #38bdf8 !important;
  box-shadow: 0 0 10px rgba(56, 189, 248, 0.4);
  font-weight: 700;
}

.ch-badge.ch-badge-locked {
  color: #ef4444 !important;
  background: rgba(239, 68, 68, 0.18) !important;
  border-color: #ef4444 !important;
  animation: none !important;
}

.ch-badge.ch-badge-soon {
  color: #fbbf24 !important;
  background: rgba(251, 191, 36, 0.18) !important;
  border-color: #fbbf24 !important;
  animation: none !important;
}

.chapter.done .ch-badge {
  color: var(--hp);
}

.chapter.soon {
  opacity: .75;
}

.chapter.soon .ch-badge {
  color: var(--gold);
}

.chapter.locked {
  cursor: not-allowed;
  filter: grayscale(.85) brightness(.7);
  border-color: rgba(169, 155, 181, .25);
}

.chapter.locked:hover {
  transform: none;
  box-shadow: none;
  border-color: rgba(169, 155, 181, .25);
}

.chapter.locked .ch-badge {
  color: var(--muted);
}

.chapter.shake {
  animation: shake .35s;
}

.chapter-msg {
  min-height: 1.4em;
  margin-top: .5em;
  font-size: 1.05em;
  color: var(--crimson-2);
  letter-spacing: .05em;
}

.chapter.selected-active {
  border-color: #00e5ff !important;
  box-shadow: 0 0 1.2em rgba(0, 229, 255, 0.45) !important;
  background: linear-gradient(90deg, rgba(0, 150, 255, .3), rgba(30, 12, 40, .9)) !important;
}

.chapter.selected-active .ch-no {
  border-color: #00e5ff !important;
  color: #00e5ff !important;
  text-shadow: 0 0 8px rgba(0, 229, 255, 0.8);
}

@keyframes shake {
  20% {
    transform: translateX(-.5em);
  }

  40% {
    transform: translateX(.5em);
  }

  60% {
    transform: translateX(-.3em);
  }

  80% {
    transform: translateX(.3em);
  }
}

/* ---------- attack growth (saldırı gelişimi) ---------- */
#atk-growth {
  z-index: 57;
  cursor: pointer;
}

.atk-card {
  width: 70em;
  padding: 1em 1.6em 1em;
}

.atk-card h2 {
  font-size: 2em;
  margin-bottom: .1em;
}

.ag-sub {
  font-size: .95em;
  letter-spacing: .1em;
  color: var(--muted);
  margin-bottom: .6em;
}

.ag-rows {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: .3em;
}

.ag-row {
  display: flex;
  align-items: center;
  gap: .8em;
  text-align: left;
  padding: .3em .7em;
  border-radius: .3em;
  background: rgba(60, 28, 74, .55);
  border: .1em solid rgba(240, 201, 110, .2);
  animation: rowIn .35s both;
}

.ag-row.top {
  border-color: var(--gold);
  background: linear-gradient(90deg, rgba(240, 201, 110, .22), rgba(60, 28, 74, .55));
}

.ag-row.up .ag-lv {
  color: var(--hp);
}

.ag-key {
  flex: 0 0 5.2em;
  text-align: center;
  font-size: .9em;
  color: var(--gold);
  border: .1em solid rgba(240, 201, 110, .45);
  border-radius: .25em;
  padding: .1em 0;
  background: rgba(0, 0, 0, .35);
}

.ag-name {
  flex: 1 1 auto;
  font-size: 1.05em;
  min-width: 0;
}

.ag-mod {
  display: block;
  font-size: .72em;
  line-height: 1.2;
  color: var(--ice);
  opacity: .85;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ag-mod.new {
  color: var(--gold-2);
  opacity: 1;
  font-weight: 700;
  animation: blink 1s steps(2) 4;
}

.ag-mod.off {
  color: var(--muted);
  opacity: .6;
}

.ag-pips {
  flex: 0 0 auto;
  display: flex;
  gap: .2em;
}

.ag-pips i {
  width: .75em;
  height: .75em;
  background: rgba(255, 255, 255, .12);
  border: .08em solid rgba(240, 201, 110, .35);
}

.ag-pips i.on {
  background: var(--ice);
  border-color: #fff;
}

.ag-pips i.new {
  background: var(--gold);
  animation: pop .5s;
}

.ag-bar {
  flex: 0 0 5em;
  height: .55em;
  background: rgba(0, 0, 0, .5);
  border-radius: .3em;
  overflow: hidden;
}

.ag-bar b {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #7fe3ff, #c9f5ff);
}

.ag-lv {
  flex: 0 0 7.5em;
  font-size: .95em;
  color: var(--paper);
  text-align: right;
}

.ag-lv em {
  font-style: normal;
  color: var(--gold-2);
  font-weight: 700;
}

.ag-xp {
  flex: 0 0 4.6em;
  font-size: .95em;
  text-align: right;
  color: var(--ice);
}

.ag-go {
  margin-top: .7em;
  font-size: 1em;
  color: var(--muted);
}

/* ---------- chapter intro ---------- */
#chapter-intro {
  background: radial-gradient(ellipse at center, #1d0f28 0%, #07040a 80%);
  z-index: 56;
  cursor: pointer;
}

.intro-card {
  width: 66em;
  max-width: 95vw;
  margin: 0 auto;
  text-align: center;
  animation: fadeIn .5s ease;
}

.intro-title {
  font-size: clamp(1.8em, 3.8vw, 3.2em);
  letter-spacing: .06em;
  color: var(--gold);
  margin: .1em 0 .05em;
  text-shadow: 0 .08em 0 #7a2b17, 0 0 1em rgba(240, 201, 110, .4);
  white-space: normal;
  word-break: normal;
  overflow-wrap: break-word;
}

.intro-arc {
  font-size: 1.15em;
  letter-spacing: .25em;
  color: var(--ice);
  text-shadow: 0 0 .6em rgba(127, 227, 255, .5);
}

.intro-vs {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3em;
  margin: 1.2em 0 1em;
}

.intro-side {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5em;
  width: 17em;
}

.intro-side.hero {
  animation: slideInL .6s cubic-bezier(.2, .9, .3, 1.2);
}

.intro-side.foe {
  animation: slideIn .6s cubic-bezier(.2, .9, .3, 1.2);
}

.intro-side b {
  font-size: 1.5em;
  letter-spacing: .1em;
}

.intro-side.hero b {
  color: var(--ice);
  text-shadow: 0 0 .5em rgba(127, 227, 255, .5);
}

.intro-side.foe b {
  color: var(--crimson-2);
  text-shadow: 0 0 .5em rgba(255, 77, 106, .5);
}

.intro-portrait {
  width: 11em;
  height: 11em;
  border-radius: .8em;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(160deg, #2a1236, #0c0512) center / cover no-repeat;
  border: .2em solid var(--glass-border);
  box-shadow: 0 0 0 .12em #000, 0 1em 2em rgba(0, 0, 0, .6);
}

.intro-portrait .glyph {
  font-size: 5em;
  font-weight: 700;
  line-height: 1;
}

.intro-side.hero .intro-portrait {
  border-color: #00f0ff;
  box-shadow: 0 0 20px rgba(0, 240, 255, 0.45), inset 0 0 14px rgba(0, 240, 255, 0.25);
  color: var(--ice);
}

.intro-side.foe .intro-portrait {
  border-color: rgba(255, 77, 106, .7);
  color: var(--crimson-2);
}

.intro-vs-tag {
  font-size: 3.4em;
  font-weight: 700;
  color: var(--gold);
  letter-spacing: .05em;
  text-shadow: 0 .08em 0 #7a2b17, 0 0 1em rgba(240, 201, 110, .5);
  animation: pop .5s;
}

.intro-summary {
  font-size: 1.2em;
  line-height: 1.5;
  color: var(--paper);
  max-width: 48em;
  margin: 0 auto;
}

.intro-go {
  margin-top: 1.2em;
  font-size: 1.1em;
  color: var(--muted);
}

/* ---------- animations ---------- */
@keyframes blink {
  50% {
    opacity: 0;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateX(2em);
  }
}

@keyframes slideInL {
  from {
    opacity: 0;
    transform: translateX(-2em);
  }
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translate(-50%, -2em);
  }
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(2em);
  }
}

@keyframes dlgSlideUp {
  from {
    transform: translateY(1.5em);
  }

  to {
    transform: translateY(0);
  }
}

@keyframes bob {
  50% {
    transform: translate(-50%, -.25em);
  }
}

.dlg-next {
  animation-name: bobSimple;
}

@keyframes bobSimple {
  50% {
    transform: translateY(-.25em);
  }
}

@keyframes pulse {
  50% {
    box-shadow: 0 0 1em rgba(255, 90, 40, .8);
  }
}

@keyframes pop {
  0% {
    transform: scale(1.6);
  }

  100% {
    transform: scale(1);
  }
}

@keyframes rowIn {
  from {
    opacity: 0;
    transform: translateX(-1em);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes bandIn {
  from {
    transform: translateY(-50%) scaleY(0);
  }

  to {
    transform: translateY(-50%) scaleY(1);
  }
}

@keyframes cutImg {
  from {
    transform: translateX(-6em);
    opacity: 0;
  }
}

/* =========================================================
   MOBİL / DOKUNMATİK
   Yerleşim ve ölçüler js/touch.js tarafından hesaplanır:
   --b = tuş birimi (px), --m = ekran kenar boşluğu, --mb = alt ek boşluk.
   Kümelerin ölçüleri (touch.js ile aynı): sol 3.6b · sağ 4.86b · yükseklik 2.75b
   ========================================================= */
html,
body {
  overscroll-behavior: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

body {
  position: fixed;
  inset: 0;
  touch-action: manipulation;
}

.touch-only {
  display: none !important;
}

body.touch .touch-only {
  display: inline !important;
}

body.touch .kbd-only {
  display: none !important;
}

.touch-note {
  text-align: left;
  font-size: .95em;
  line-height: 1.4;
  color: #f5ece0;
  background: rgba(127, 227, 255, .1);
  border: .1em solid rgba(127, 227, 255, .4);
  border-radius: .4em;
  padding: .5em .8em;
  margin-bottom: .7em;
}

.touch-note b {
  color: var(--ice);
}

.menu .btn.sm {
  font-size: 1.05em;
  padding: .4em 1.2em;
}

/* kaydırılan alanlar parmakla dikey kayabilsin */
#controls .glass-card,
.chapter-list {
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
}

.speaker-range {
  touch-action: none;
}

/* ---------- dokunmatikte HUD sadeleşir (tuşlar zaten yetenekleri gösterir) ---------- */
body.touch .battle-actions-panel,
body.touch .estate-guide-panel,
body.touch .hint {
  display: none;
}

body.touch .player-panel {
  top: .9em;
  bottom: auto;
  width: 17.5em;
  padding: .4em .7em .4em .5em;
}

body.touch .player-panel .p-portrait,
body.touch .player-panel .dash-ico,
body.touch .player-panel .p-stats {
  display: none;
}

body.touch .boss-bar {
  width: 30em;
}

/* hoparlör + duraklat: ikisi de aynı sabit boyutta (3.8 × 13.33px ≈ 51px → parmakla rahat basılır) */
body.touch .speaker:hover .speaker-panel,
body.touch .speaker:focus-within .speaker-panel {
  opacity: 0;
  transform: translateY(-.5em) scale(.96);
  pointer-events: none;
}

body.touch .speaker.open .speaker-panel {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

body.touch .speaker-range {
  height: 2.2em;
}

body.touch .speaker-range::-webkit-slider-thumb {
  width: 1.7em;
  height: 1.7em;
  margin-top: -.55em;
}

.touch-pause {
  --sp: 50.7px;
  /* .speaker-btn ile aynı boyut (3.8em × 13.33px) */
  display: none;
  position: absolute;
  z-index: 58;
  right: calc(var(--u) * 8px + var(--sp) + 8px);
  top: calc(var(--u) * 8px);
  width: var(--sp);
  height: var(--sp);
  padding: 0;
  place-items: center;
  font-family: var(--font);
  font-size: 13.333px;
  color: var(--gold-2);
  cursor: pointer;
  background: radial-gradient(circle at 35% 30%, rgba(90, 40, 110, .95), rgba(20, 8, 28, .95) 70%);
  border: .15em solid var(--glass-border);
  border-radius: 50%;
  box-shadow: 0 .22em 0 rgba(0, 0, 0, .6), 0 0 0 .1em rgba(0, 0, 0, .5), inset 0 0 .8em rgba(240, 201, 110, .15);
}

.touch-pause span {
  font-size: 1.1em;
  letter-spacing: -.12em;
  line-height: 1;
}

.touch-pause:active {
  transform: translateY(.08em) scale(.96);
}

body.touch[data-tmode="battle"] .touch-pause,
body.touch[data-tmode="estate"] .touch-pause {
  display: grid;
}

#stage:has(#estate-hud.active) .touch-pause {
  right: calc(var(--u) * 8px * 17.6 + var(--sp) + 8px);
}

/* ---------- ekran tuşları (oyun alanının dışında / yarı saydam) ---------- */
#touch-ui {
  --b: 48px;
  --m: 12px;
  --mx: 0px;
  --mb: 0px;
  --g: calc(var(--b) * .12);
  position: fixed;
  inset: 0;
  z-index: 70;
  display: none !important;
  pointer-events: none;
  touch-action: none;
  font-family: var(--font);
}

body.mobile-device.touch #touch-ui {
  display: block !important;
}

.tc-pad,
.tc-grid {
  position: fixed;
  display: none !important;
  pointer-events: auto;
  touch-action: none;
  bottom: calc(var(--m) + var(--mb));
}

.tc-pad {
  left: max(calc(var(--m) + var(--mx)), env(safe-area-inset-left, 0px));
}

.tc-grid {
  right: max(calc(var(--m) + var(--mx)), env(safe-area-inset-right, 0px));
  gap: var(--g);
  align-items: end;
  justify-items: center;
}

body.mobile-device.touch[data-tmode="battle"] #tc-pad,
body.mobile-device.touch[data-tmode="estate"] #tc-pad {
  display: block !important;
}

body.mobile-device.touch[data-tmode="battle"] #tc-battle,
body.mobile-device.touch[data-tmode="estate"] #tc-estate {
  display: grid !important;
}

/* hareket çubuğu: malikanede yuvarlak (4 yön), savaşta yatay hap (sol/sağ) */
.tc-pad {
  width: calc(var(--b) * 2.7);
  height: calc(var(--b) * 2.7);
  border-radius: 50%;
  background: radial-gradient(circle at 50% 45%, rgba(40, 20, 56, .55), rgba(10, 4, 16, .6));
  border: calc(var(--b) * .04 + 1px) solid rgba(127, 227, 255, .55);
  box-shadow: 0 0 calc(var(--b) * .35) rgba(127, 227, 255, .2), inset 0 0 calc(var(--b) * .4) rgba(0, 0, 0, .55);
  transition: opacity .15s, border-color .1s;
}

body[data-tmode="battle"] .tc-pad {
  width: calc(var(--b) * 3.6);
  height: calc(var(--b) * 1.6);
  border-radius: 999px;
}

.tc-pad.on {
  border-color: var(--gold);
}

.tc-arrow {
  position: absolute;
  color: rgba(243, 233, 220, .55);
  font-size: calc(var(--b) * .32);
  line-height: 1;
  pointer-events: none;
  text-shadow: 0 0 6px #000;
}

.tc-arrow.a-u {
  left: 50%;
  top: calc(var(--b) * .14);
  transform: translateX(-50%);
}

.tc-arrow.a-d {
  left: 50%;
  bottom: calc(var(--b) * .14);
  transform: translateX(-50%);
}

.tc-arrow.a-l {
  top: 50%;
  left: calc(var(--b) * .2);
  transform: translateY(-50%);
}

.tc-arrow.a-r {
  top: 50%;
  right: calc(var(--b) * .2);
  transform: translateY(-50%);
}

body[data-tmode="battle"] .tc-arrow.a-u,
body[data-tmode="battle"] .tc-arrow.a-d {
  display: none;
}

.tc-knob {
  position: absolute;
  left: 50%;
  top: 50%;
  pointer-events: none;
  width: calc(var(--b) * .9);
  height: calc(var(--b) * .9);
  margin: calc(var(--b) * -.45) 0 0 calc(var(--b) * -.45);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, rgba(255, 231, 168, .95), rgba(212, 42, 72, .9));
  border: calc(var(--b) * .035 + 1px) solid rgba(255, 255, 255, .65);
  box-shadow: 0 0 calc(var(--b) * .3) rgba(255, 77, 106, .6);
  transition: transform .08s ease-out;
}

.tc-pad.on .tc-knob {
  transition: none;
}

/* sağ küme: savaş (4x2) ve malikane (2x2) */
#tc-battle {
  grid-template-columns: repeat(3, var(--b)) calc(var(--b) * 1.5);
  grid-template-rows: var(--b) calc(var(--b) * 1.5);
  grid-template-areas: "r c v j" "f e d a";
}

/* sonradan eklenen karaktere özel EKSTRA tuşlar: üstte yeni bir sıra açılır, temel tuşlar yerinden oynamaz */
#tc-battle.has-x {
  grid-template-rows: var(--b) var(--b) calc(var(--b) * 1.5);
  grid-template-areas: "x1 x2 x3 x4" "r c v j" "f e d a";
}

#tc-estate {
  grid-template-columns: var(--b) calc(var(--b) * 1.5);
  grid-template-rows: var(--b) calc(var(--b) * 1.5);
  grid-template-areas: ". j" "r a";
}

#tb-e-jump {
  grid-area: j;
}

#tb-e-run {
  grid-area: r;
}

#tb-e-act {
  grid-area: a;
}

.tb {
  position: relative;
  width: var(--b);
  height: var(--b);
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(var(--b) * .03);
  font-family: var(--font);
  font-weight: 700;
  line-height: 1;
  color: #fff;
  cursor: pointer;
  border: calc(var(--b) * .045 + 1px) solid var(--ice);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, rgba(60, 40, 90, .75), rgba(12, 6, 20, .8));
  box-shadow: 0 0 calc(var(--b) * .25) rgba(0, 0, 0, .7), inset 0 0 calc(var(--b) * .25) rgba(127, 227, 255, .18);
  text-shadow: 0 1px 2px #000;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
  transition: transform .06s, background .1s, opacity .15s, filter .15s;
}

.tb b {
  font-size: calc(var(--b) * .4);
}

.tb small {
  font-size: calc(var(--b) * .16);
  letter-spacing: 0;
  opacity: .92;
  font-weight: 600;
}

.tb.mini {
  width: calc(var(--b) * .92);
  height: calc(var(--b) * .92);
}

.tb.mini b {
  font-size: calc(var(--b) * .34);
}

.tb.mini small {
  font-size: calc(var(--b) * .125);
}

.tb.big {
  width: calc(var(--b) * 1.5);
  height: calc(var(--b) * 1.5);
}

.tb.big b {
  font-size: calc(var(--b) * .62);
}

.tb.big small {
  font-size: calc(var(--b) * .22);
}

.tb .cd {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 0;
  background: rgba(0, 0, 0, .62);
  pointer-events: none;
}

.tb.down {
  transform: scale(.9);
  background: radial-gradient(circle at 50% 40%, rgba(127, 227, 255, .6), rgba(20, 60, 90, .8));
}

.tb.off {
  filter: grayscale(.9) brightness(.7);
}

.tb.ready {
  animation: pulse .65s infinite;
}

.tb.atk {
  border-color: #ffb3c0;
  background: radial-gradient(circle at 35% 30%, rgba(224, 64, 92, .8), rgba(110, 16, 38, .85));
}

.tb.atk.down {
  background: radial-gradient(circle at 50% 40%, #ff8fa2, #b01a38);
}

.tb.dash {
  border-color: var(--ice);
}

.tb.jump {
  border-color: #b7f5c8;
  color: #d9ffe5;
}

.tb.barrage {
  border-color: var(--gold-2);
  color: var(--gold-2);
}

.tb.barrage.down,
.tb.barrage.active {
  background: radial-gradient(circle at 50% 40%, rgba(240, 201, 110, .75), rgba(120, 80, 20, .85));
  color: #fff;
}

.tb.guard {
  border-color: #70d6ff;
  color: #70d6ff;
}

.tb.guard.active {
  background: radial-gradient(circle at 50% 40%, rgba(112, 214, 255, .6), rgba(20, 60, 90, .8));
  color: #fff;
}

.tb.mirror {
  border-color: #bff3ff;
  color: #bff3ff;
}

.tb.counter {
  border-color: #00e5ff;
  color: #00e5ff;
}

.tb.counter.active {
  background: radial-gradient(circle at 50% 40%, rgba(0, 229, 255, .6), rgba(0, 60, 80, .85));
  color: #fff;
}

.tb.ulti {
  border-color: rgba(240, 201, 110, .7);
  color: var(--gold-2);
}

.tb.ulti.ready {
  border-color: #ffd166;
  color: #fff;
  background: radial-gradient(circle at 50% 40%, rgba(255, 209, 102, .7), rgba(120, 70, 10, .85));
}

/* oyunun üstüne binen yerleşimde tuşlar saydam: arkadaki dövüş görünür kalır */
body[data-tlayout="over"] .tc-pad,
body[data-tlayout="over"] .tb:not(.down):not(.ready):not(.active) {
  opacity: .5;
}

body[data-tlayout="over"] .tb.down,
body[data-tlayout="over"] .tc-pad.on {
  opacity: .95;
}

/* ---------- dikey ekran uyarısı ---------- */
#rotate-hint {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 28px;
  text-align: center;
  touch-action: manipulation;
  background: radial-gradient(ellipse at center, #1d0f28 0%, #07040a 80%);
}

#rotate-hint.show {
  display: flex !important;
}

@media (min-width: 800px),
(pointer: fine) and (hover: hover) {

  #rotate-hint,
  #rotate-hint.show {
    display: none !important;
  }
}

.rot-phone {
  position: relative;
  width: 62px;
  height: 104px;
  border: 4px solid var(--gold);
  border-radius: 12px;
  box-shadow: 0 0 24px rgba(240, 201, 110, .35);
  animation: rotPhone 2.6s ease-in-out infinite;
}

.rot-phone i {
  position: absolute;
  left: 50%;
  bottom: 8px;
  width: 16px;
  height: 4px;
  margin-left: -8px;
  border-radius: 2px;
  background: var(--gold);
}

@keyframes rotPhone {

  0%,
  20% {
    transform: rotate(0deg);
  }

  55%,
  80% {
    transform: rotate(-90deg);
  }

  100% {
    transform: rotate(0deg);
  }
}

.rot-title {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--gold);
  text-shadow: 0 2px 0 #6b2a1a;
}

.rot-sub {
  font-size: 15px;
  line-height: 1.5;
  max-width: 22em;
  color: var(--paper);
  opacity: .85;
}

.rot-skip {
  font-family: var(--font);
  font-size: 15px;
  color: var(--muted);
  cursor: pointer;
  margin-top: 6px;
  background: none;
  border: 1px solid rgba(169, 155, 181, .45);
  border-radius: 8px;
  padding: 10px 18px;
}

/* =========================================================
   HESAP SİSTEMİ & DOĞRULAMA (KLASİK WEBSİTELER GİBİ MODERN TASARIM)
   ========================================================= */

/* =========================================================
   DOĞRULAMA KODU BİLDİRİM BANNERI (GMAIL & HOTMAIL & SMS)
   ========================================================= */
.sms-banner,
.mail-banner {
  position: fixed;
  top: 18px;
  left: 50%;
  transform: translateX(-50%) translateY(-160px);
  width: 94%;
  max-width: 480px;
  z-index: 600;
  transition: transform 0.42s cubic-bezier(0.18, 0.9, 0.28, 1.25), opacity 0.3s;
  opacity: 0;
  pointer-events: none;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  cursor: pointer;
}

.sms-banner.show,
.mail-banner.show {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
  pointer-events: auto;
}

/* Kart Ana Gövdesi */
.sms-banner-card,
.mail-banner-card {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  padding: 14px 16px;
  background: rgba(18, 9, 28, 0.97);
  border: 1.5px solid rgba(127, 227, 255, 0.65);
  border-radius: 14px;
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.9), 0 0 24px rgba(127, 227, 255, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  transition: transform 0.18s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.sms-banner-card:hover,
.mail-banner-card:hover {
  transform: translateY(-2px);
}

/* Gmail Teması */
.mail-banner.provider-gmail .sms-banner-card,
.mail-banner.provider-gmail .mail-banner-card {
  background: linear-gradient(145deg, rgba(32, 10, 14, 0.98), rgba(16, 5, 8, 0.99));
  border: 1.5px solid rgba(234, 67, 53, 0.75);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.92), 0 0 28px rgba(234, 67, 53, 0.35), inset 0 1px 0 rgba(255, 120, 110, 0.2);
}

.mail-banner.provider-gmail .mail-banner-app {
  color: #ff6e61;
}

/* Hotmail / Outlook Teması */
.mail-banner.provider-hotmail .sms-banner-card,
.mail-banner.provider-hotmail .mail-banner-card {
  background: linear-gradient(145deg, rgba(8, 20, 38, 0.98), rgba(4, 10, 22, 0.99));
  border: 1.5px solid rgba(0, 120, 212, 0.75);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.92), 0 0 28px rgba(0, 120, 212, 0.35), inset 0 1px 0 rgba(100, 180, 255, 0.2);
}

.mail-banner.provider-hotmail .mail-banner-app {
  color: #5ec5ff;
}

/* SMS Doğrulama Teması */
.mail-banner.provider-sms .sms-banner-card,
.mail-banner.provider-sms .mail-banner-card {
  background: linear-gradient(145deg, rgba(8, 30, 20, 0.98), rgba(4, 18, 12, 0.99));
  border: 1.5px solid rgba(78, 224, 138, 0.75);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.92), 0 0 28px rgba(78, 224, 138, 0.35), inset 0 1px 0 rgba(120, 255, 180, 0.2);
}

.mail-banner.provider-sms .mail-banner-app {
  color: #4ee08a;
}

/* İkon & Logo Alanı */
.sms-banner-icon,
.mail-banner-icon-wrap {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  flex-shrink: 0;
}

.provider-svg {
  width: 24px;
  height: 24px;
  display: block;
}

.mail-banner-icon {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Banner İçerik */
.sms-banner-body,
.mail-banner-body {
  flex: 1;
  min-width: 0;
}

.sms-banner-head,
.mail-banner-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 2px;
}

.mail-banner-meta {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sms-banner-app,
.mail-banner-app {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: var(--ice);
  text-transform: uppercase;
}

.mail-banner-sep {
  color: var(--muted);
  font-size: 10px;
}

.mail-banner-sender {
  font-size: 11px;
  color: #c9bccc;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mail-banner-ai-badge {
  font-size: 10px;
  font-weight: 800;
  padding: 1px 7px;
  border-radius: 4px;
  background: rgba(127, 227, 255, 0.2);
  border: 1px solid rgba(127, 227, 255, 0.45);
  color: var(--ice);
  letter-spacing: 0.04em;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  white-space: nowrap;
}

.sms-banner-time,
.mail-banner-time {
  font-size: 11px;
  color: var(--muted);
  flex-shrink: 0;
}

.mail-banner-subject {
  font-size: 13px;
  font-weight: 700;
  color: #ffffff;
  margin: 1px 0 4px;
  line-height: 1.3;
}

.sms-banner-text,
.mail-banner-text {
  font-size: 12.5px;
  line-height: 1.45;
  color: #f3e9dc;
  margin-bottom: 7px;
}

.sms-banner-text b,
.mail-banner-text b,
.highlight-code {
  color: var(--gold);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.1em;
  background: rgba(240, 201, 110, 0.18);
  padding: 1px 7px;
  border-radius: 5px;
  border: 1px solid rgba(240, 201, 110, 0.35);
  display: inline-block;
}

/* Otomatik Doldurma İlerleme Çubuğu */
.mail-autofill-progress-bar {
  height: 22px;
  background: rgba(0, 0, 0, 0.45);
  border-radius: 6px;
  border: 1px solid rgba(78, 224, 138, 0.25);
  overflow: hidden;
  position: relative;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  padding: 0 8px;
}

.mail-autofill-indicator {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0%;
  background: linear-gradient(90deg, rgba(78, 224, 138, 0.3), rgba(78, 224, 138, 0.8));
  transition: width 0.85s linear;
}

.mail-autofill-text {
  position: relative;
  z-index: 2;
  font-size: 11px;
  font-weight: 700;
  color: #b7f5c8;
  display: flex;
  align-items: center;
  gap: 5px;
  letter-spacing: 0.02em;
}

/* Banner Aksiyon Butonları */
.sms-banner-actions,
.mail-banner-actions {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
}

.sms-autofill-btn,
.mail-autofill-btn {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 700;
  padding: 6px 13px;
  border-radius: 7px;
  border: 1px solid rgba(127, 227, 255, 0.55);
  background: linear-gradient(135deg, rgba(30, 95, 160, 0.95), rgba(15, 55, 95, 0.98));
  color: #fff;
  cursor: pointer;
  transition: all 0.18s ease;
  box-shadow: 0 2px 10px rgba(127, 227, 255, 0.35);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  animation: pulseAutofill 1.8s infinite;
}

@keyframes pulseAutofill {

  0%,
  100% {
    box-shadow: 0 2px 10px rgba(127, 227, 255, 0.35);
  }

  50% {
    box-shadow: 0 0 16px rgba(127, 227, 255, 0.7);
  }
}

.mail-banner.provider-gmail .sms-autofill-btn,
.mail-banner.provider-gmail .mail-autofill-btn {
  background: linear-gradient(135deg, #ea4335, #b31412);
  border-color: #ff8577;
  box-shadow: 0 2px 10px rgba(234, 67, 53, 0.45);
}

.mail-banner.provider-hotmail .sms-autofill-btn,
.mail-banner.provider-hotmail .mail-autofill-btn {
  background: linear-gradient(135deg, #0078d4, #004578);
  border-color: #5ec5ff;
  box-shadow: 0 2px 10px rgba(0, 120, 212, 0.45);
}

.sms-autofill-btn:hover,
.mail-autofill-btn:hover {
  transform: translateY(-1px);
  filter: brightness(1.12);
}

.mail-open-btn {
  font-family: 'Inter', sans-serif;
  font-size: 11.5px;
  font-weight: 600;
  padding: 5px 10px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.15s;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.mail-open-btn:hover {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.35);
  text-decoration: none;
  color: #fff;
}

.mail-copy-btn {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: var(--paper);
  font-size: 11px;
  font-weight: 600;
  padding: 5px 9px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s;
}

.mail-copy-btn:hover {
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
}

.sms-dismiss-btn,
.mail-dismiss-btn {
  background: transparent;
  border: none;
  color: var(--muted);
  font-size: 15px;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 4px;
  transition: all 0.12s;
  margin-left: auto;
}

.sms-dismiss-btn:hover,
.mail-dismiss-btn:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.12);
}

/* ---------- Auth Modal Overlay ---------- */
.auth {
  position: fixed;
  inset: 0;
  z-index: 100000 !important;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: clamp(10px, 2.5vh, 26px) clamp(10px, 2vw, 24px);
  background: radial-gradient(ellipse at center, rgba(26, 12, 36, 0.94) 0%, rgba(7, 4, 10, 0.98) 100%);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color: rgba(240, 201, 110, 0.45) rgba(15, 7, 22, 0.7);
}

.auth::-webkit-scrollbar {
  width: 8px;
}

.auth::-webkit-scrollbar-track {
  background: rgba(15, 7, 22, 0.7);
  border-radius: 4px;
}

.auth::-webkit-scrollbar-thumb {
  background: rgba(240, 201, 110, 0.45);
  border-radius: 4px;
}

.auth::-webkit-scrollbar-thumb:hover {
  background: rgba(240, 201, 110, 0.75);
}

.auth[hidden],
.auth.hidden {
  display: none !important;
}

.auth-container {
  width: 100%;
  max-width: min(500px, 94vw);
  margin: auto;
  animation: authScaleIn 0.32s cubic-bezier(0.2, 0.9, 0.3, 1.2);
}

@keyframes authScaleIn {
  from {
    opacity: 0;
    transform: scale(0.94) translateY(12px);
  }

  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.auth-card {
  position: relative;
  background: linear-gradient(168deg, rgba(28, 12, 38, 0.96) 0%, rgba(10, 4, 16, 0.98) 100%);
  border: 1.5px solid rgba(240, 201, 110, 0.4);
  border-radius: 18px;
  padding: clamp(18px, 2.8vh, 26px) clamp(16px, 3vw, 28px) clamp(16px, 2vh, 22px);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.88), 0 0 40px rgba(240, 201, 110, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  color: #f3e9dc;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  max-height: 94vh;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(240, 201, 110, 0.4) transparent;
}

.auth-card-close {
  position: absolute;
  top: 14px;
  right: 16px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid rgba(240, 201, 110, 0.4);
  background: rgba(35, 15, 48, 0.7);
  color: var(--gold);
  font-size: 16px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
  transition: all 0.2s ease;
}

.auth-card-close:hover {
  background: rgba(255, 77, 106, 0.35);
  border-color: #ff4d6a;
  color: #fff;
  transform: scale(1.1);
  box-shadow: 0 0 12px rgba(255, 77, 106, 0.5);
}

.auth-switch-pane-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 13px;
  color: #c9bccc;
}

.auth-link-bold {
  background: none;
  border: none;
  color: var(--gold);
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.15s, text-shadow 0.15s;
  padding: 0;
}

.auth-link-bold:hover {
  color: #fff;
  text-shadow: 0 0 8px rgba(240, 201, 110, 0.7);
}

/* Header */
.auth-header {
  text-align: center;
  margin-bottom: 20px;
}

.auth-brand-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}

.auth-kanji {
  font-family: var(--font);
  color: var(--crimson-2);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.25em;
  text-shadow: 0 0 8px rgba(255, 77, 106, 0.5);
}

.auth-pill {
  background: rgba(240, 201, 110, 0.14);
  border: 1px solid rgba(240, 201, 110, 0.35);
  color: var(--gold);
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  letter-spacing: 0.08em;
}

.auth-title {
  font-family: var(--font);
  font-size: 27px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--gold);
  text-shadow: 0 2px 0 #6b2a1a, 0 0 16px rgba(240, 201, 110, 0.3);
  margin: 4px 0 3px;
  line-height: 1.1;
}

.auth-title span {
  color: var(--crimson-2);
  text-shadow: 0 2px 0 #4a0716, 0 0 16px rgba(255, 77, 106, 0.4);
}

.auth-subtitle {
  font-size: 12.5px;
  color: var(--muted);
  font-weight: 400;
  margin: 0;
}

/* Main Tabs (Giriş Yap / Kayıt Ol) */
.auth-tabs {
  display: flex;
  gap: 8px;
  background: rgba(0, 0, 0, 0.4);
  padding: 5px;
  border-radius: 11px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  margin-bottom: 20px;
}

.auth-tab {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 14px;
  font-family: 'Inter', sans-serif;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--muted);
  background: transparent;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.18s ease;
}

.auth-tab .tab-icon {
  width: 17px;
  height: 17px;
  stroke: currentColor;
}

.auth-tab:hover:not(.active) {
  color: #fff;
  background: rgba(255, 255, 255, 0.06);
}

.auth-tab.active {
  background: linear-gradient(135deg, rgba(212, 42, 72, 0.95), rgba(142, 21, 48, 0.98));
  color: #fff;
  box-shadow: 0 4px 14px rgba(212, 42, 72, 0.45);
  font-weight: 700;
}

/* Subtabs (Şifre ile Giriş / SMS Kodu ile Hızlı Giriş) */
.auth-subtabs {
  display: flex;
  gap: 6px;
  margin-bottom: 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding-bottom: 8px;
}

.subtab-btn {
  background: transparent;
  border: none;
  font-family: 'Inter', sans-serif;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--muted);
  padding: 6px 12px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s;
}

.subtab-btn:hover:not(.active) {
  color: var(--paper);
  background: rgba(255, 255, 255, 0.05);
}

.subtab-btn.active {
  color: var(--ice);
  background: rgba(127, 227, 255, 0.12);
  font-weight: 700;
  box-shadow: inset 0 0 0 1px rgba(127, 227, 255, 0.35);
}

/* Form Panes */
.auth-form-pane {
  display: flex;
  flex-direction: column;
  animation: fadeIn 0.22s ease-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* 2-Column Grid (Ad & Soyad) */
.auth-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

/* Field Group */
.auth-f {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-bottom: 13px;
}

.auth-f label {
  font-size: 12px;
  font-weight: 600;
  color: #dfd4e6;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.req,
.auth-f label .req {
  display: none !important;
}

.auth-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 2px;
}

.field-helper {
  font-size: 11px;
  color: var(--muted);
  margin: 3px 0 0;
  line-height: 1.35;
}

/* Inputs & Wrappers */
.input-wrap {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}

.field-icon {
  position: absolute;
  left: 13px;
  width: 16px;
  height: 16px;
  color: var(--muted);
  pointer-events: none;
  transition: color 0.15s;
}

.auth-card input[type="text"],
.auth-card input[type="email"],
.auth-card input[type="tel"],
.auth-card input[type="password"] {
  width: 100%;
  height: 42px;
  background: rgba(16, 7, 24, 0.88);
  border: 1.5px solid rgba(169, 155, 181, 0.28);
  border-radius: 9px;
  padding: 0 14px 0 38px;
  color: #fff;
  font-size: 13.5px;
  font-family: 'Inter', -apple-system, sans-serif;
  transition: all 0.18s ease;
  outline: none;
}

.auth-card input::placeholder {
  color: rgba(169, 155, 181, 0.5);
  font-size: 12.5px;
}

.auth-card input:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(240, 201, 110, 0.22);
  background: rgba(22, 10, 32, 0.95);
}

.input-wrap:focus-within .field-icon {
  color: var(--gold);
}

.input-wrap.with-action input {
  padding-right: 42px;
}

/* Şifre Tekrar Alanı İçin Özel Jujutsu Mavi / Gök Mavisi Tema */
#au-reg-pass2 {
  border-color: rgba(56, 189, 248, 0.45) !important;
  box-shadow: 0 0 8px rgba(56, 189, 248, 0.12);
}

#au-reg-pass2:focus {
  border-color: #38bdf8 !important;
  box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.28), 0 0 12px rgba(56, 189, 248, 0.45) !important;
  background: rgba(14, 25, 45, 0.95) !important;
}

.input-wrap:focus-within input#au-reg-pass2+.btn-toggle-eye,
.input-wrap:focus-within input#au-reg-pass2~.field-icon {
  color: #38bdf8 !important;
}

label[for="au-reg-pass2"] .req {
  color: #38bdf8 !important;
  font-weight: 700;
  text-shadow: 0 0 6px rgba(56, 189, 248, 0.45);
}

#au-reg-pass2-match-helper {
  color: #38bdf8;
  font-size: 12px;
  font-weight: 600;
  margin-top: 4px;
  transition: all 0.2s ease;
}

/* Name Char Counter & Header Row (Max 12 Karakter) */
.auth-name-header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}

.auth-name-header-label {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--paper);
  display: flex;
  align-items: center;
  gap: 3px;
}

.name-char-counter {
  font-size: 11px;
  font-weight: 700;
  color: #94a3b8;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(169, 155, 181, 0.3);
  padding: 2px 8px;
  border-radius: 6px;
  letter-spacing: 0.04em;
  transition: all 0.2s ease;
}

.name-char-counter.valid {
  color: #4ee08a;
  border-color: rgba(78, 224, 138, 0.5);
  background: rgba(78, 224, 138, 0.12);
}

.name-char-counter.limit-reached {
  color: #f0c96e;
  border-color: rgba(240, 201, 110, 0.6);
  background: rgba(240, 201, 110, 0.16);
}

.name-char-counter.limit-exceeded {
  color: #ff5a5a;
  border-color: #ef4444;
  background: rgba(239, 68, 68, 0.24);
  box-shadow: 0 0 10px rgba(239, 68, 68, 0.45);
  animation: counterPulse 0.3s ease;
}

@keyframes counterPulse {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.08);
  }

  100% {
    transform: scale(1);
  }
}

/* Phone & SMS Verification Layout */
.phone-input-wrap {
  display: flex;
  align-items: center;
  gap: 7px;
  position: relative;
}

.phone-country-select {
  height: 42px;
  max-width: 155px;
  background: rgba(22, 10, 32, 0.95);
  border: 1.5px solid rgba(169, 155, 181, 0.28);
  border-radius: 9px;
  color: #fff;
  font-size: 11.5px;
  font-weight: 600;
  padding: 0 8px;
  outline: none;
  cursor: pointer;
  flex-shrink: 0;
  transition: all 0.18s ease;
}

.phone-country-select:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 2px rgba(240, 201, 110, 0.22);
}

.phone-country-select option {
  background: #140b1f;
  color: #f3e9dc;
  font-size: 12.5px;
  padding: 6px;
}

.phone-dial-code {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 42px;
  padding: 0 9px;
  background: rgba(255, 255, 255, 0.05);
  border: 1.5px solid rgba(169, 155, 181, 0.28);
  border-radius: 9px;
  font-size: 12px;
  font-weight: 700;
  color: var(--gold);
  white-space: nowrap;
  flex-shrink: 0;
  user-select: none;
}

.phone-verified-badge {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 700;
  color: #4ee08a;
  background: rgba(78, 224, 138, 0.15);
  border: 1px solid rgba(78, 224, 138, 0.4);
  padding: 2px 7px;
  border-radius: 6px;
}

.phone-country-code {
  display: flex;
  align-items: center;
  padding: 0 10px;
  height: 42px;
  background: rgba(255, 255, 255, 0.05);
  border: 1.5px solid rgba(169, 155, 181, 0.28);
  border-radius: 9px;
  font-size: 12.5px;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
  flex-shrink: 0;
  user-select: none;
}

.phone-input-wrap input {
  padding-left: 12px !important;
  flex: 1;
  min-width: 0;
}

.btn-send-code {
  height: 42px;
  padding: 0 13px;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  border: 1.5px solid rgba(127, 227, 255, 0.5);
  border-radius: 9px;
  background: linear-gradient(135deg, rgba(20, 50, 80, 0.9), rgba(10, 25, 45, 0.95));
  color: var(--ice);
  cursor: pointer;
  transition: all 0.15s;
  flex-shrink: 0;
}

.btn-send-code:hover:not(:disabled) {
  background: linear-gradient(135deg, rgba(30, 80, 130, 0.95), rgba(15, 45, 75, 1));
  border-color: var(--ice);
  color: #fff;
  box-shadow: 0 0 12px rgba(127, 227, 255, 0.35);
}

.btn-send-code:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  border-color: rgba(169, 155, 181, 0.25);
  color: var(--muted);
}

.code-input-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
}

.code-input-wrap input {
  text-align: center;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 5px;
  padding-left: 14px !important;
  color: var(--gold);
}

.code-timer {
  font-size: 11px;
  color: var(--gold);
  font-weight: 700;
  background: rgba(240, 201, 110, 0.12);
  padding: 2px 7px;
  border-radius: 4px;
  border: 1px solid rgba(240, 201, 110, 0.3);
}

.btn-verify-code {
  height: 42px;
  padding: 0 16px;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 700;
  border-radius: 9px;
  border: 1.5px solid rgba(78, 224, 138, 0.5);
  background: linear-gradient(135deg, rgba(25, 75, 45, 0.9), rgba(12, 45, 25, 0.95));
  color: var(--hp);
  cursor: pointer;
  transition: all 0.15s;
  flex-shrink: 0;
}

.btn-verify-code:hover {
  background: linear-gradient(135deg, rgba(35, 105, 60, 1), rgba(18, 60, 35, 1));
  border-color: var(--hp);
  color: #fff;
  box-shadow: 0 0 12px rgba(78, 224, 138, 0.35);
}

.code-feedback {
  font-size: 11.5px;
  margin-top: 4px;
  font-weight: 600;
  display: none;
}

.code-feedback.ok {
  display: block;
  color: var(--hp);
}

.code-feedback.err {
  display: block;
  color: var(--crimson-2);
}

/* Email Doğrulama & Sağlayıcı Stilleri */
.email-input-wrap {
  display: flex;
  align-items: center;
  gap: 7px;
  position: relative;
  width: 100%;
}

.email-input-wrap .input-wrap {
  flex: 1;
  min-width: 0;
}

/* Sağlayıcı Rozetleri (Gmail / Hotmail / Mail) */
.provider-badge {
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  animation: fadeIn 0.2s ease;
}

.provider-badge.badge-gmail {
  background: rgba(234, 67, 53, 0.18);
  border: 1px solid rgba(234, 67, 53, 0.5);
  color: #ff8577;
}

.provider-badge.badge-hotmail {
  background: rgba(0, 120, 212, 0.18);
  border: 1px solid rgba(0, 120, 212, 0.5);
  color: #6bc6ff;
}

.provider-badge.badge-default {
  background: rgba(127, 227, 255, 0.15);
  border: 1px solid rgba(127, 227, 255, 0.45);
  color: var(--ice);
}

/* Hızlı Doldurma Çipi (Floating Quick-Fill Chip) - Gizlendi */
.code-chip-wrap,
.quick-chip,
.autofill-pref-row,
#reg-code-chip-wrap,
#login-code-chip-wrap,
#forgot-code-chip-wrap {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
  height: 0 !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Gmail Doğrulama Kodu Giriş Alanı - Belirgin ve Şık Vurgulama */
#au-reg-code-group {
  display: flex !important;
  visibility: visible !important;
  height: auto !important;
  overflow: visible !important;
  padding: 10px 12px;
  background: rgba(234, 67, 53, 0.08);
  border: 1px solid rgba(234, 67, 53, 0.35);
  border-radius: 10px;
  margin-bottom: 14px;
  transition: all 0.25s ease;
}

#au-reg-code-group:focus-within {
  border-color: rgba(234, 67, 53, 0.7);
  box-shadow: 0 0 14px rgba(234, 67, 53, 0.25);
  background: rgba(234, 67, 53, 0.12);
}

#au-reg-code-group .code-input-wrap input {
  background: rgba(15, 12, 25, 0.85);
  border: 1.5px solid rgba(240, 201, 110, 0.45);
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 6px;
  text-align: center;
  border-radius: 8px;
  height: 44px;
}

#au-reg-code-group .code-input-wrap input:focus {
  border-color: var(--gold);
  box-shadow: 0 0 12px rgba(240, 201, 110, 0.35);
}

.autofill-toggle-wrap {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 11.5px;
  color: var(--ice);
  cursor: pointer;
  user-select: none;
}

.autofill-toggle-wrap input[type="checkbox"] {
  width: 14px;
  height: 14px;
  accent-color: var(--ice);
  cursor: pointer;
}

/* Kod Otomatik Doldurulduğunda Parlama Animasyonu */
.autofilled-glow {
  animation: autofillGlow 1.4s ease-out;
  border-color: #4ee08a !important;
  color: #4ee08a !important;
  background: rgba(18, 55, 32, 0.95) !important;
}

@keyframes autofillGlow {
  0% {
    box-shadow: 0 0 0 4px rgba(78, 224, 138, 0.65), 0 0 20px rgba(78, 224, 138, 0.4);
    transform: scale(1.02);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(78, 224, 138, 0);
    transform: scale(1);
  }
}

/* Password Eye Toggle & Strength Meter */
.btn-toggle-eye {
  position: absolute;
  right: 11px;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 15px;
  opacity: 0.65;
  transition: opacity 0.15s, transform 0.12s;
  padding: 4px;
  line-height: 1;
}

.btn-toggle-eye:hover {
  opacity: 1;
  transform: scale(1.1);
}

.pass-strength-bar {
  width: 100%;
  height: 4px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 2px;
  overflow: hidden;
  margin-top: 4px;
}

.pass-strength-fill {
  height: 100%;
  width: 0;
  transition: width 0.25s ease, background-color 0.25s ease;
  border-radius: 2px;
}

/* Checkboxes & Links */
.auth-agreement,
.auth-remember {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--muted);
  cursor: pointer;
  margin-top: 5px;
  user-select: none;
}

.auth-agreement input[type="checkbox"],
.auth-remember input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--crimson);
  cursor: pointer;
  flex-shrink: 0;
}

.auth-link-sm,
.auth-link-inline {
  color: var(--ice);
  text-decoration: none;
  font-size: 11.5px;
  transition: color 0.15s;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  font-family: inherit;
}

.auth-link-sm:hover,
.auth-link-inline:hover {
  color: #fff;
  text-decoration: underline;
}

.auth-options-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 4px;
}

/* Submit Button */
.auth-main-btn {
  width: 100%;
  height: 46px;
  margin-top: 16px;
  font-family: 'Inter', sans-serif;
  font-size: 14.5px;
  font-weight: 700;
  letter-spacing: 0.03em;
  border: 1.5px solid #ffb3c0;
  border-radius: 10px;
  background: linear-gradient(135deg, #e0405c, #9c1533);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  cursor: pointer;
  box-shadow: 0 4px 18px rgba(224, 64, 92, 0.4);
  transition: all 0.18s ease;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.auth-main-btn svg {
  width: 18px;
  height: 18px;
  stroke-width: 2.2;
  transition: transform 0.15s;
}

.auth-main-btn:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 6px 24px rgba(224, 64, 92, 0.55);
  filter: brightness(1.08);
}

.auth-main-btn:hover:not(:disabled) svg {
  transform: translateX(3px);
}

.auth-main-btn:active {
  transform: translateY(1px);
  box-shadow: 0 2px 10px rgba(224, 64, 92, 0.3);
}

.auth-main-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  filter: grayscale(0.4);
}

/* Google OAuth (accounts.google.com) Buton & Ayracı */
.auth-oauth-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 14px 0 10px;
  width: 100%;
}

.auth-oauth-divider::before,
.auth-oauth-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: rgba(255, 255, 255, 0.14);
}

.auth-oauth-divider span {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--muted);
}

.btn-google-oauth,
#btn-lobby-google-login,
#btn-side-google,
#btn-google-login,
#btn-google-register,
#google-oauth-modal,
.auth-oauth-divider {
  display: none !important;
}

.btn-google-oauth {
  width: 100%;
  height: 44px;
  display: none !important;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: #ffffff;
  border: 1px solid #dadce0;
  border-radius: 10px;
  color: #3c4043;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
  transition: all 0.2s cubic-bezier(0.2, 0.9, 0.3, 1.2);
}

.btn-google-oauth:hover {
  background: #f8fafd;
  border-color: #4285F4;
  box-shadow: 0 4px 16px rgba(66, 133, 244, 0.35);
  transform: translateY(-1px);
}

.btn-google-oauth:active {
  transform: translateY(1px);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}

.btn-google-oauth .google-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

/* ==================== GOOGLE IDENTITY OAUTH MODAL ==================== */
.google-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  animation: fadeIn 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.google-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(8px);
}

.google-modal-card {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 440px;
  background: #ffffff;
  color: #202124;
  border-radius: 20px;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(0, 0, 0, 0.08);
  overflow: hidden;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  animation: zoomIn 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.google-modal-header {
  padding: 24px 24px 16px;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  border-bottom: 1px solid #f1f3f4;
  position: relative;
}

.google-modal-header .google-logo {
  flex-shrink: 0;
  margin-top: 2px;
}

.google-modal-titles h3 {
  margin: 0;
  font-size: 19px;
  font-weight: 600;
  color: #202124;
  line-height: 1.3;
}

.google-modal-titles p {
  margin: 4px 0 0;
  font-size: 13px;
  color: #5f6368;
}

.google-modal-close {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: #5f6368;
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
}

.google-modal-close:hover {
  background: #f1f3f4;
  color: #202124;
}

.google-accounts-list {
  max-height: 280px;
  overflow-y: auto;
  padding: 8px 0;
}

.google-account-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 24px;
  cursor: pointer;
  transition: background 0.15s;
  border-bottom: 1px solid #f8f9fa;
}

.google-account-item:hover {
  background: #f8fafd;
}

.google-account-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #e8f0fe;
  color: #1a73e8;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 16px;
  flex-shrink: 0;
  overflow: hidden;
  border: 1px solid rgba(26, 115, 232, 0.2);
}

.google-account-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.google-account-info {
  flex: 1;
  min-width: 0;
}

.google-account-name {
  font-size: 14px;
  font-weight: 600;
  color: #202124;
  display: flex;
  align-items: center;
  gap: 6px;
}

.google-admin-badge {
  font-size: 10px;
  font-weight: 700;
  background: #e6f4ea;
  color: #137333;
  padding: 2px 6px;
  border-radius: 4px;
  letter-spacing: 0.02em;
}

.google-account-email {
  font-size: 12px;
  color: #5f6368;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.google-account-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  flex-shrink: 0;
}

.btn-google-delete-alt {
  background: rgba(220, 53, 69, 0.08);
  border: 1px solid rgba(220, 53, 69, 0.3);
  color: #dc3545;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 5px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn-google-delete-alt:hover {
  background: #dc3545;
  color: #ffffff;
  transform: scale(1.05);
  box-shadow: 0 2px 6px rgba(220, 53, 69, 0.35);
}

.badge-main-acc-mini {
  font-size: 10px;
  font-weight: 700;
  color: #b08800;
  background: rgba(255, 193, 7, 0.15);
  border: 1px solid rgba(255, 193, 7, 0.4);
  padding: 2px 6px;
  border-radius: 4px;
  white-space: nowrap;
}

.google-modal-footer {
  padding: 14px 24px 20px;
  background: #fafafa;
  border-top: 1px solid #f1f3f4;
}

.google-btn-other {
  width: 100%;
  padding: 10px 14px;
  background: #ffffff;
  border: 1px solid #dadce0;
  border-radius: 8px;
  color: #3c4043;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all 0.15s;
}

.google-btn-other:hover {
  background: #f8fafd;
  border-color: #1a73e8;
  color: #1a73e8;
}

.google-disclaimer {
  font-size: 11px;
  color: #70757a;
  line-height: 1.45;
  margin-top: 12px;
  text-align: center;
}

.google-field-input {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 14px;
  border: 1px solid #dadce0;
  border-radius: 8px;
  font-size: 14px;
  color: #202124;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.google-field-input:focus {
  border-color: #1a73e8;
  box-shadow: 0 0 0 2px rgba(26, 115, 232, 0.2);
}

.google-btn-primary {
  background: #1a73e8;
  color: #ffffff;
  border: none;
  border-radius: 8px;
  padding: 8px 18px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}

.google-btn-primary:hover {
  background: #1557b0;
}

.google-btn-text {
  background: transparent;
  color: #5f6368;
  border: none;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.google-btn-text:hover {
  color: #202124;
}

/* Yan Lobi Başlat Butonu Vurgusu */
.btn-side-start-highlight {
  background: linear-gradient(135deg, #00b4d8, #0077b6) !important;
  border-color: #00e5ff !important;
  color: #ffffff !important;
  box-shadow: 0 0.4em 1.6em rgba(0, 229, 255, 0.55) !important;
  animation: pulseStart 2s infinite ease-in-out;
}

@keyframes pulseStart {

  0%,
  100% {
    box-shadow: 0 0 14px rgba(0, 229, 255, 0.45);
  }

  50% {
    box-shadow: 0 0 26px rgba(0, 229, 255, 0.85);
    transform: scale(1.02);
  }
}

/* Alerts */
.auth-alert {
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 12.5px;
  font-weight: 600;
  margin-top: 12px;
  line-height: 1.4;
  animation: fadeIn 0.2s ease-out;
}

.auth-alert.err {
  background: rgba(212, 42, 72, 0.18);
  border: 1px solid rgba(255, 77, 106, 0.5);
  color: #ffb3c0;
}

.auth-alert.ok {
  background: rgba(78, 224, 138, 0.18);
  border: 1px solid rgba(78, 224, 138, 0.5);
  color: #b7f5c8;
}

.auth-alert.info {
  background: rgba(127, 227, 255, 0.14);
  border: 1px solid rgba(127, 227, 255, 0.4);
  color: #c9f5ff;
}

/* Forgot Password Pane */
.forgot-header {
  margin-bottom: 16px;
}

.btn-back-link {
  background: none;
  border: none;
  color: var(--ice);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  padding: 0 0 8px;
  transition: color 0.15s;
}

.btn-back-link:hover {
  color: #fff;
  text-decoration: underline;
}

.forgot-title {
  font-size: 17px;
  font-weight: 700;
  color: var(--gold);
  margin: 4px 0 2px;
}

.forgot-sub {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.4;
}

/* Footer */
.auth-footer {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  text-align: center;
}

.auth-footer-note {
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 0.02em;
  margin: 0;
}

/* Responsive */
@media (max-width: 480px) {
  .auth {
    padding: 12px 8px;
  }

  .auth-card {
    padding: 20px 18px 16px;
    border-radius: 14px;
  }

  .auth-grid-2 {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .auth-title {
    font-size: 23px;
  }

  .btn-send-code {
    padding: 0 10px;
    font-size: 11.5px;
  }
}

/* =========================================================
   OYUNCU LİSTESİ & BÜYÜCÜ SİCİLİ MODALI (JUJUTSU ROSTER)
   ========================================================= */
#players-modal {
  z-index: 52;
  background: rgba(6, 3, 10, 0.94);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.players-card {
  width: 95%;
  max-width: 58em;
  max-height: 92%;
  display: flex;
  flex-direction: column;
  padding: 1.4em 1.8em 1em;
  background: linear-gradient(165deg, rgba(28, 12, 38, 0.96), rgba(10, 4, 16, 0.98));
  border: 0.15em solid rgba(240, 201, 110, 0.55);
  box-shadow: 0 0 0 0.15em #000, 0 1.5em 4em rgba(0, 0, 0, 0.95), inset 0 0 2.5em rgba(127, 227, 255, 0.08);
  border-radius: 0.7em;
  position: relative;
  overflow: hidden;
}

/* Başlık Bölümü */
.players-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 0.8em;
  border-bottom: 0.08em solid rgba(240, 201, 110, 0.25);
  padding-bottom: 0.7em;
  flex-shrink: 0;
}

.players-title-wrap {
  text-align: left;
}

.players-kicker {
  font-size: 0.92em;
  letter-spacing: 0.28em;
  color: var(--ice);
  text-shadow: 0 0 0.6em var(--ice);
  font-weight: 700;
  display: block;
  margin-bottom: 0.15em;
}

.players-header h2 {
  font-size: 2em;
  margin: 0;
  color: var(--gold);
  text-shadow: 0 0.08em 0 #7a2b17, 0 0 1em rgba(240, 201, 110, 0.4);
}

.btn-modal-close {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.35), rgba(185, 28, 28, 0.65));
  border: 2px solid #ef4444;
  color: #fff;
  border-radius: 50%;
  width: 48px;
  height: 48px;
  min-width: 48px;
  min-height: 48px;
  font-size: 24px;
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
  box-shadow: 0 0 16px rgba(239, 68, 68, 0.55), inset 0 0 8px rgba(255, 255, 255, 0.15);
  transition: all 0.18s cubic-bezier(0.34, 1.56, 0.64, 1);
  position: relative;
  z-index: 100;
  pointer-events: auto;
  touch-action: manipulation;
  user-select: none;
}

.btn-modal-close:hover {
  background: #ef4444;
  border-color: #fca5a5;
  color: #fff;
  transform: scale(1.15);
  box-shadow: 0 0 26px rgba(239, 68, 68, 0.9);
}

.btn-modal-close:active {
  transform: scale(0.92);
}

/* Oyuncu Listesi Özel Kapatma Butonu (Büyük ve Ultra Belirgin) */
#btn-players-close-x {
  width: 52px;
  height: 52px;
  min-width: 52px;
  min-height: 52px;
  font-size: 26px;
  font-weight: 900;
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.5), rgba(153, 27, 27, 0.85));
  border: 2.5px solid #ff4d6a;
  box-shadow: 0 0 20px rgba(239, 68, 68, 0.7), inset 0 0 10px rgba(255, 255, 255, 0.25);
}

#btn-players-close {
  min-height: 44px;
  padding: 10px 26px;
  font-size: 15px;
  font-weight: 900;
  cursor: pointer;
  pointer-events: auto;
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.04));
  border: 1.5px solid rgba(255, 255, 255, 0.3);
  color: #fff;
  transition: all 0.15s ease;
}

#btn-players-close:hover {
  background: rgba(239, 68, 68, 0.3);
  border-color: #ef4444;
  color: #fca5a5;
  transform: scale(1.05);
}

/* Canlı İstatistik Çubuğu */
.players-stats-bar {
  display: flex;
  gap: 0.8em;
  margin-bottom: 0.9em;
  flex-wrap: wrap;
  flex-shrink: 0;
}

.stat-chip {
  display: flex;
  align-items: center;
  gap: 0.5em;
  background: rgba(20, 8, 28, 0.75);
  border: 0.08em solid rgba(240, 201, 110, 0.3);
  border-radius: 0.4em;
  padding: 0.35em 0.8em;
  font-size: 0.95em;
}

.stat-chip-label {
  color: var(--muted);
}

.stat-chip-val {
  font-weight: 700;
  color: var(--paper);
}

.stat-chip.online-chip {
  border-color: rgba(78, 224, 138, 0.5);
  background: rgba(16, 40, 26, 0.5);
}

.stat-chip.online-chip .stat-chip-val {
  color: #4ee08a;
  text-shadow: 0 0 0.5em rgba(78, 224, 138, 0.6);
}

.stat-chip.my-chip {
  margin-left: auto;
  border-color: rgba(127, 227, 255, 0.45);
  background: rgba(14, 32, 48, 0.6);
}

.stat-chip.my-chip .stat-chip-val {
  color: var(--ice);
}

/* Canlı Yeşil Pulse Göstergesi */
.live-dot {
  width: 0.65em;
  height: 0.65em;
  border-radius: 50%;
  background: #4ee08a;
  display: inline-block;
  box-shadow: 0 0 0.5em #4ee08a;
}

.live-dot.pulse {
  animation: liveBeacon 1.4s ease-in-out infinite;
}

@keyframes liveBeacon {
  0% {
    transform: scale(0.9);
    box-shadow: 0 0 0 0 rgba(78, 224, 138, 0.7);
  }

  70% {
    transform: scale(1.15);
    box-shadow: 0 0 0 0.6em rgba(78, 224, 138, 0);
  }

  100% {
    transform: scale(0.9);
    box-shadow: 0 0 0 0 rgba(78, 224, 138, 0);
  }
}

/* Arama ve Filtreleme Kontrolleri */
.players-controls {
  display: flex;
  flex-direction: column;
  gap: 0.65em;
  margin-bottom: 0.9em;
  flex-shrink: 0;
}

.player-search-box {
  position: relative;
  display: flex;
  align-items: center;
  background: rgba(10, 4, 16, 0.85);
  border: 0.12em solid rgba(240, 201, 110, 0.45);
  border-radius: 0.45em;
  padding: 0.3em 0.8em;
  transition: all 0.2s;
}

.player-search-box:focus-within {
  border-color: var(--gold);
  box-shadow: 0 0 1em rgba(240, 201, 110, 0.35);
}

.search-icon {
  font-size: 1.15em;
  margin-right: 0.5em;
  opacity: 0.8;
}

.player-search-box input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: #fff;
  font-family: var(--font);
  font-size: 1.1em;
  letter-spacing: 0.03em;
}

.player-search-box input::placeholder {
  color: rgba(169, 155, 181, 0.55);
}

.btn-clear-search {
  background: transparent;
  border: none;
  color: var(--muted);
  font-size: 1.1em;
  cursor: pointer;
  padding: 0.2em;
  transition: color 0.15s;
}

.btn-clear-search:hover {
  color: #fff;
}

/* Filtreleme Sekmeleri */
.players-filter-tabs {
  display: flex;
  gap: 0.45em;
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: 0.2em;
}

.players-filter-tabs::-webkit-scrollbar {
  display: none;
}

.player-filter-tab {
  background: rgba(30, 14, 42, 0.7);
  border: 0.09em solid rgba(240, 201, 110, 0.3);
  color: var(--paper);
  border-radius: 0.35em;
  padding: 0.35em 0.85em;
  font-family: var(--font);
  font-size: 0.95em;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s;
}

.player-filter-tab:hover {
  border-color: var(--gold);
  color: #fff;
  transform: translateY(-0.06em);
}

.player-filter-tab.active {
  background: linear-gradient(180deg, #c9354e, #801227);
  border-color: #ff9fb0;
  color: #fff;
  box-shadow: 0 0 0.8em rgba(212, 42, 72, 0.5);
}

/* Kaydırılabilir Liste Konteyneri */
.players-list-scroll {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 0.4em;
  min-height: 16em;
  scrollbar-width: thin;
  scrollbar-color: rgba(240, 201, 110, 0.5) rgba(0, 0, 0, 0.35);
}

.players-list-scroll::-webkit-scrollbar {
  width: 0.6em;
}

.players-list-scroll::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.4);
  border-radius: 0.3em;
}

.players-list-scroll::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--gold), #8e581c);
  border-radius: 0.3em;
}

/* Oyuncu Izgara & Kart Tasarımı */
.players-grid {
  display: flex;
  flex-direction: column;
  gap: 0.7em;
}

.player-card {
  position: relative;
  background: linear-gradient(140deg, rgba(22, 10, 32, 0.88), rgba(12, 5, 18, 0.95));
  border: 0.12em solid rgba(240, 201, 110, 0.28);
  border-radius: 0.55em;
  padding: 0.65em 0.9em;
  cursor: pointer;
  transition: transform 0.15s ease, border-color 0.2s, box-shadow 0.2s;
  overflow: hidden;
  text-align: left;
}

.player-card:hover,
.player-card:focus-visible {
  outline: none;
  transform: translateY(-0.1em);
  border-color: var(--gold);
  box-shadow: 0 0.3em 1.2em rgba(0, 0, 0, 0.7), 0 0 1em rgba(240, 201, 110, 0.3);
}

.player-card.is-me {
  border-color: rgba(127, 227, 255, 0.7);
  background: linear-gradient(140deg, rgba(14, 30, 48, 0.9), rgba(10, 8, 24, 0.95));
  box-shadow: 0 0 1.2em rgba(127, 227, 255, 0.25);
}

.player-card.is-me:hover {
  border-color: var(--ice);
  box-shadow: 0 0 1.6em rgba(127, 227, 255, 0.45);
}

.player-card-inner {
  display: flex;
  align-items: center;
  gap: 1em;
}

/* Oyuncu Avatarı & Rozeti */
.player-avatar-wrap {
  position: relative;
  flex-shrink: 0;
}

.player-avatar {
  width: 3.5em;
  height: 3.5em;
  border-radius: 0.45em;
  background: radial-gradient(circle, #2d133b, #120718);
  border: 0.14em solid var(--gold);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0.8em rgba(0, 0, 0, 0.6);
  position: relative;
}

.player-avatar.rank-special {
  border-color: #ffd166;
  box-shadow: 0 0 1em rgba(255, 209, 102, 0.6);
  background: radial-gradient(circle, #4a1e12, #18060a);
}

.player-avatar.rank-g1 {
  border-color: var(--ice);
  box-shadow: 0 0 0.8em rgba(127, 227, 255, 0.5);
  background: radial-gradient(circle, #123048, #071220);
}

.avatar-kanji {
  font-size: 1.6em;
  font-weight: 700;
  line-height: 1;
  color: #fff;
  text-shadow: 0 0 0.4em rgba(255, 255, 255, 0.7);
}

.avatar-level-tag {
  font-size: 0.65em;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--gold-2);
  margin-top: 0.1em;
}

.player-status-beacon {
  position: absolute;
  right: -0.25em;
  top: -0.25em;
}

.status-dot {
  width: 0.8em;
  height: 0.8em;
  border-radius: 50%;
  display: block;
  border: 0.12em solid #0c0512;
}

.status-dot.online {
  background: #4ee08a;
  box-shadow: 0 0 0.5em #4ee08a;
}

.status-dot.online.pulse {
  animation: dotPulse 1.5s infinite;
}

@keyframes dotPulse {

  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }

  50% {
    opacity: 0.5;
    transform: scale(0.85);
  }
}

.status-dot.offline {
  background: #7a7582;
}

/* Oyuncu Bilgi Alanı */
.player-info-wrap {
  flex: 1;
  min-width: 0;
}

.player-name-row {
  display: flex;
  align-items: center;
  gap: 0.6em;
  flex-wrap: wrap;
  margin-bottom: 0.2em;
}

.player-name {
  font-size: 1.25em;
  font-weight: 700;
  color: #fff;
  margin: 0;
  letter-spacing: 0.04em;
}

.badge-me {
  background: linear-gradient(90deg, #00b4d8, #0077b6);
  color: #fff;
  font-size: 0.7em;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 0.15em 0.55em;
  border-radius: 0.3em;
  text-shadow: 0 0.05em 0.2em rgba(0, 0, 0, 0.6);
  box-shadow: 0 0 0.6em rgba(0, 180, 216, 0.6);
}

.player-rank-pill {
  font-size: 0.75em;
  font-weight: 600;
  letter-spacing: 0.06em;
  padding: 0.12em 0.55em;
  border-radius: 0.3em;
  border: 0.08em solid rgba(240, 201, 110, 0.5);
  color: var(--gold-2);
  background: rgba(240, 201, 110, 0.12);
}

.player-rank-pill.rank-special {
  border-color: #ffd166;
  color: #ffeaa7;
  background: rgba(255, 209, 102, 0.22);
  text-shadow: 0 0 0.4em rgba(255, 209, 102, 0.7);
}

.player-rank-pill.rank-g1 {
  border-color: var(--ice);
  color: var(--ice);
  background: rgba(127, 227, 255, 0.15);
}

.player-meta-row {
  display: flex;
  gap: 0.9em;
  font-size: 0.85em;
  color: var(--muted);
  margin-bottom: 0.35em;
  flex-wrap: wrap;
}

.player-clan-tag {
  color: #d1c7d8;
}

.player-tech-tag {
  color: var(--ice);
}

.player-stats-row {
  display: flex;
  gap: 1.2em;
  font-size: 0.88em;
  flex-wrap: wrap;
}

.pstat-item {
  display: flex;
  flex-direction: column;
}

.pstat-label {
  font-size: 0.78em;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.pstat-val {
  font-weight: 700;
}

.pstat-val.gold {
  color: var(--gold-2);
}

.pstat-val.hp {
  color: var(--hp);
}

.pstat-val.ice {
  color: var(--ice);
}

.pstat-val.online-text {
  color: #4ee08a;
}

/* Buton */
.player-action-wrap {
  flex-shrink: 0;
}

.btn-inspect-player {
  background: rgba(240, 201, 110, 0.15);
  border: 0.1em solid rgba(240, 201, 110, 0.4);
  color: var(--gold-2);
  border-radius: 0.35em;
  padding: 0.35em 0.7em;
  font-family: var(--font);
  font-size: 0.9em;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.3em;
  transition: all 0.15s;
}

.player-card:hover .btn-inspect-player {
  background: var(--gold);
  color: #0d0516;
  border-color: #fff;
  transform: translateX(0.15em);
}

/* Boş Durum */
.players-empty-msg {
  text-align: center;
  padding: 3em 1em;
  color: var(--muted);
}

.players-empty-msg .empty-icon {
  font-size: 2.8em;
  margin-bottom: 0.3em;
  opacity: 0.6;
}

.players-empty-msg p {
  font-size: 1.2em;
  color: var(--paper);
  margin-bottom: 0.3em;
}

/* Alt Bar */
.players-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 0.8em;
  padding-top: 0.7em;
  border-top: 0.08em solid rgba(240, 201, 110, 0.25);
  flex-shrink: 0;
}

.players-info-hint {
  font-size: 0.85em;
  color: var(--muted);
  letter-spacing: 0.03em;
}

/* Detay Kartı Açılır Paneli (Sheet) */
.player-detail-sheet {
  position: absolute;
  inset: 0;
  background: rgba(8, 3, 14, 0.94);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  z-index: 10;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1.5em;
  animation: fadeIn 0.2s ease-out;
}

.player-detail-sheet.active {
  display: flex;
}

.detail-sheet-card {
  width: 100%;
  max-width: 44em;
  max-height: 88vh;
  overflow-y: auto;
  background: linear-gradient(160deg, #240d34, #0c0414);
  border: 0.15em solid var(--gold);
  border-radius: 0.6em;
  padding: 1.4em 1.8em;
  box-shadow: 0 0 2.5em rgba(0, 0, 0, 0.9), 0 0 1.5em rgba(240, 201, 110, 0.3);
  text-align: left;
}

.detail-sheet-head {
  display: flex;
  gap: 1.1em;
  align-items: center;
  margin-bottom: 1em;
  border-bottom: 0.08em solid rgba(240, 201, 110, 0.25);
  padding-bottom: 0.8em;
}

.detail-avatar {
  width: 4.2em;
  height: 4.2em;
  border-radius: 0.5em;
  background: radial-gradient(circle, #3d1b4f, #14071c);
  border: 0.15em solid var(--gold);
  font-size: 1.8em;
  font-weight: 700;
  display: grid;
  place-items: center;
  color: #fff;
  box-shadow: 0 0 1em rgba(240, 201, 110, 0.4);
}

.detail-title-col {
  flex: 1;
}

.detail-badge-row {
  display: flex;
  gap: 0.6em;
  align-items: center;
  margin-bottom: 0.2em;
}

.detail-rank {
  font-size: 0.82em;
  font-weight: 700;
  color: var(--gold-2);
  background: rgba(240, 201, 110, 0.18);
  border: 0.08em solid var(--gold);
  padding: 0.12em 0.6em;
  border-radius: 0.3em;
}

.player-detail-status {
  font-size: 0.8em;
  font-weight: 700;
  padding: 0.12em 0.55em;
  border-radius: 0.3em;
}

.player-detail-status.online {
  color: #4ee08a;
  background: rgba(78, 224, 138, 0.15);
  border: 0.08em solid rgba(78, 224, 138, 0.5);
}

.player-detail-status.offline {
  color: var(--muted);
  background: rgba(255, 255, 255, 0.05);
  border: 0.08em solid rgba(255, 255, 255, 0.15);
}

.detail-name {
  font-size: 1.8em;
  color: #fff;
  margin: 0;
}

.detail-clan {
  font-size: 0.95em;
  color: var(--ice);
  margin: 0.1em 0 0;
}

.btn-detail-close {
  background: rgba(255, 255, 255, 0.08);
  border: 0.08em solid rgba(255, 255, 255, 0.25);
  color: #fff;
  border-radius: 50%;
  width: 2em;
  height: 2em;
  font-size: 1.1em;
  cursor: pointer;
  display: grid;
  place-items: center;
  align-self: flex-start;
  transition: all 0.15s;
}

.btn-detail-close:hover {
  background: rgba(212, 42, 72, 0.8);
  border-color: #ff4d6a;
}

.detail-tech-box {
  background: rgba(10, 4, 16, 0.7);
  border: 0.08em solid rgba(127, 227, 255, 0.4);
  border-radius: 0.4em;
  padding: 0.6em 0.9em;
  margin-bottom: 0.9em;
}

.tech-label {
  font-size: 0.75em;
  letter-spacing: 0.15em;
  color: var(--muted);
  display: block;
}

.tech-val {
  font-size: 1.1em;
  color: var(--ice);
}

.detail-stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.6em;
  margin-bottom: 0.9em;
}

.dstat-card {
  background: rgba(20, 8, 30, 0.65);
  border: 0.08em solid rgba(240, 201, 110, 0.25);
  border-radius: 0.35em;
  padding: 0.45em 0.8em;
}

.dstat-label {
  font-size: 0.78em;
  color: var(--muted);
  display: block;
}

.dstat-num {
  font-size: 1.25em;
  font-weight: 700;
}

.detail-bio {
  font-size: 0.95em;
  line-height: 1.45;
  color: #dfd7e4;
  background: rgba(0, 0, 0, 0.3);
  padding: 0.7em 0.9em;
  border-radius: 0.35em;
  border-left: 0.2em solid var(--gold);
}

/* =========================================================
   OTURUM ÇAKIŞMASI & EŞZAMANLI KORUMA UYARI PANELLERİ
   ========================================================= */
.session-displaced-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(5, 2, 8, 0.96);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5em;
}

.session-displaced-card {
  width: 100%;
  max-width: 32em;
  background: linear-gradient(165deg, #2b0b14, #0f0307);
  border: 0.18em solid #ff4d6a;
  box-shadow: 0 0 3em rgba(255, 77, 106, 0.4), 0 1.5em 4em rgba(0, 0, 0, 0.95);
  border-radius: 0.8em;
  padding: 2em 1.8em;
  text-align: center;
  animation: cutscenePop 0.3s cubic-bezier(0.2, 0.9, 0.3, 1.2);
}

.displaced-icon {
  font-size: 3.4em;
  margin-bottom: 0.2em;
}

.session-displaced-card h3 {
  font-size: 1.6em;
  color: #ff4d6a;
  letter-spacing: 0.06em;
  margin-bottom: 0.5em;
  text-shadow: 0 0 0.8em rgba(255, 77, 106, 0.5);
}

.displaced-lead {
  font-size: 1.15em;
  color: #fff;
  line-height: 1.45;
  margin-bottom: 0.6em;
}

.displaced-sub {
  font-size: 0.92em;
  color: var(--muted);
  line-height: 1.4;
  margin-bottom: 1.4em;
}

.displaced-actions {
  display: flex;
  justify-content: center;
}

/* Giriş Formu Devralma Butonu */
.takeover-box {
  margin-top: 0.7em;
  text-align: center;
}

.btn-takeover {
  background: linear-gradient(90deg, #e63946, #c1121f);
  border: 0.12em solid #ffb3c0;
  color: #fff;
  font-family: var(--font);
  font-size: 0.95em;
  font-weight: 700;
  padding: 0.5em 1.1em;
  border-radius: 0.4em;
  cursor: pointer;
  box-shadow: 0 0 1em rgba(230, 57, 70, 0.4);
  transition: all 0.15s;
  letter-spacing: 0.04em;
  display: inline-block;
}

.btn-takeover:hover {
  transform: translateY(-0.1em) scale(1.02);
  box-shadow: 0 0 1.5em rgba(230, 57, 70, 0.7);
  border-color: #fff;
}

/* Mobil Uyum */
@media (max-width: 600px) {
  .players-card {
    padding: 1em 1em 0.8em;
    max-height: 96%;
  }

  .player-card-inner {
    flex-direction: column;
    align-items: flex-start;
  }

  .player-action-wrap {
    width: 100%;
    margin-top: 0.3em;
  }

  .btn-inspect-player {
    width: 100%;
    justify-content: center;
  }

  .detail-sheet-card {
    padding: 1.1em 1.2em;
  }

  .detail-stats-grid {
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   PİKSEL VE HD PROFİL İKONLARI (AVATAR SİSTEMİ)
   ========================================================= */

/* Piksel Sanatı Render Kuralları (GBA/Retro Keskinlik) */
.pixelated,
img.pixelated {
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;
}

/* Lobi Profil Kartı */
.lobby-profile-card {
  display: flex;
  align-items: center;
  gap: 0.9em;
  background: rgba(18, 8, 25, 0.88);
  border: 0.12em solid rgba(240, 201, 110, 0.45);
  box-shadow: 0 0.4em 1.2em rgba(0, 0, 0, 0.6), inset 0 0 1em rgba(240, 201, 110, 0.08);
  border-radius: 0.65em;
  padding: 0.55em 0.85em;
  margin: 0.7em 0 0.3em;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: fadeIn 0.25s ease-out;
}

.lobby-guest-bar {
  margin: 0.5em 0 0.8em;
  width: 100%;
}

.btn-lobby-login-trigger {
  width: 100%;
  padding: 0.6em 1.1em;
  font-size: 1.05em;
  font-weight: 700;
  letter-spacing: 0.05em;
  border-radius: 0.6em;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  transition: all 0.2s ease;
}

.btn-lobby-login-trigger:hover {
  transform: translateY(-2px);
}

.lobby-avatar-badge {
  position: relative;
  width: 48px !important;
  height: 48px !important;
  max-width: 48px !important;
  max-height: 48px !important;
  min-width: 48px !important;
  min-height: 48px !important;
  border-radius: 8px;
  border: 2px solid var(--gold);
  background: radial-gradient(circle, #2b1338, #0d0413);
  overflow: hidden !important;
  cursor: pointer;
  flex-shrink: 0 !important;
  box-shadow: 0 0 0.8em rgba(240, 201, 110, 0.35);
  transition: transform 0.18s, border-color 0.18s, box-shadow 0.18s;
}

.lobby-avatar-badge:hover {
  transform: scale(1.06);
  border-color: #fff;
  box-shadow: 0 0 1.2em rgba(240, 201, 110, 0.7);
}

.lobby-avatar-img {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

.lobby-avatar-edit-icon {
  position: absolute;
  bottom: 0.15em;
  right: 0.15em;
  background: rgba(0, 0, 0, 0.75);
  color: var(--gold);
  font-size: 0.7em;
  padding: 0.1em 0.3em;
  border-radius: 0.25em;
  border: 0.06em solid rgba(240, 201, 110, 0.5);
  line-height: 1;
}

.lobby-user-details {
  display: flex;
  flex-direction: column;
  gap: 0.25em;
  flex: 1;
  min-width: 0;
}

.lobby-user-details .save-info {
  margin: 0;
  text-align: left;
  font-size: 0.88em;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lobby-user-title-wrap {
  display: flex;
  align-items: center;
  gap: 0.4em;
  margin: 0.12em 0 0.2em;
}

.lobby-user-title-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  font-size: 0.74em;
  font-weight: 800;
  color: #ffd700;
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.22), rgba(255, 60, 100, 0.18));
  border: 0.08em solid rgba(255, 215, 0, 0.55);
  border-radius: 0.35em;
  padding: 0.15em 0.55em;
  letter-spacing: 0.04em;
  text-shadow: 0 0 8px rgba(255, 215, 0, 0.6);
  box-shadow: 0 0 8px rgba(255, 215, 0, 0.2);
}

.btn-change-avatar {
  background: linear-gradient(135deg, rgba(38, 20, 52, 0.92), rgba(18, 8, 26, 0.96)) !important;
  border: 1.2px solid rgba(240, 201, 110, 0.6) !important;
  color: #ffd700 !important;
  font-family: var(--font);
  font-size: 0.78em;
  font-weight: 700;
  padding: 0.35em 0.75em;
  border-radius: 0.4em;
  cursor: pointer;
  align-self: flex-start;
  transition: all 0.15s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}

.btn-change-avatar:hover {
  background: linear-gradient(135deg, rgba(58, 30, 80, 0.98), rgba(28, 12, 40, 1)) !important;
  border-color: #ffd700 !important;
  color: #ffffff !important;
  box-shadow: 0 0 12px rgba(240, 201, 110, 0.55);
  transform: translateY(-1px);
}

.lobby-user-actions-row {
  display: flex;
  align-items: center;
  gap: 0.45em;
  margin-top: 0.25em;
  flex-wrap: wrap;
}

.btn-switch-account {
  background: linear-gradient(135deg, rgba(16, 38, 68, 0.92), rgba(8, 20, 42, 0.96)) !important;
  border: 1.2px solid rgba(0, 220, 255, 0.6) !important;
  color: #e0f7ff !important;
  font-family: var(--font);
  font-size: 0.78em;
  font-weight: 700;
  padding: 0.35em 0.75em;
  border-radius: 0.4em;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  transition: all 0.15s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}

.btn-switch-account:hover {
  background: linear-gradient(135deg, rgba(25, 60, 110, 0.98), rgba(12, 32, 65, 1)) !important;
  border-color: #00f0ff !important;
  color: #ffffff !important;
  transform: translateY(-1px);
  box-shadow: 0 0 12px rgba(0, 240, 255, 0.55);
}

.btn-lobby-logout {
  background: linear-gradient(135deg, rgba(55, 16, 28, 0.92), rgba(30, 8, 16, 0.96)) !important;
  border: 1.2px solid rgba(255, 77, 106, 0.6) !important;
  color: #ff99aa !important;
  font-family: var(--font);
  font-size: 0.78em;
  font-weight: 700;
  padding: 0.35em 0.7em;
  border-radius: 0.4em;
  cursor: pointer;
  transition: all 0.15s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}

.btn-lobby-logout:hover {
  background: linear-gradient(135deg, rgba(85, 22, 40, 0.98), rgba(50, 12, 25, 1)) !important;
  border-color: #ff4d6a !important;
  color: #ffffff !important;
  box-shadow: 0 0 12px rgba(255, 77, 106, 0.55);
  transform: translateY(-1px);
}

.guest-bar-actions {
  display: flex;
  gap: 0.5em;
  width: 100%;
}

.btn-lobby-switch-trigger {
  padding: 0.65em 1em;
  font-size: 0.95em;
  white-space: nowrap;
}

/* Aktif hesap kartı & rozet */
.recent-acc-card.current-active {
  border-color: rgba(78, 224, 138, 0.6) !important;
  background: rgba(14, 30, 22, 0.7) !important;
}

.current-badge {
  font-size: 10px;
  font-weight: 700;
  color: #4ee08a;
  background: rgba(78, 224, 138, 0.15);
  padding: 1px 6px;
  border-radius: 4px;
  margin-left: 6px;
}

.badge-active-acc {
  font-size: 11px;
  font-weight: 700;
  color: #4ee08a;
  padding: 4px 8px;
  background: rgba(78, 224, 138, 0.15);
  border-radius: 6px;
  border: 1px solid rgba(78, 224, 138, 0.3);
}

/* =========================================================
   ÖNCEDEN GİRİŞ YAPAN HESAPLAR LİSTESİ
   ========================================================= */
.recent-accounts-section {
  background: rgba(12, 6, 18, 0.85);
  border: 1.5px solid rgba(240, 201, 110, 0.3);
  border-radius: 12px;
  padding: 12px 14px 10px;
  margin-bottom: 16px;
  animation: fadeIn 0.25s ease-out;
}

.recent-accounts-header {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 10px;
}

.recent-kicker {
  font-size: 11px;
  font-weight: 700;
  color: var(--gold);
  letter-spacing: 0.08em;
}

.recent-sub {
  font-size: 11.5px;
  color: var(--muted);
}

.recent-accounts-list {
  display: flex;
  flex-direction: column;
  gap: 7px;
  max-height: 180px;
  overflow-y: auto;
  padding-right: 4px;
}

.recent-accounts-list::-webkit-scrollbar {
  width: 5px;
}

.recent-accounts-list::-webkit-scrollbar-thumb {
  background: rgba(240, 201, 110, 0.3);
  border-radius: 3px;
}

.recent-acc-card {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(25, 12, 35, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 6px 10px;
  cursor: pointer;
  transition: all 0.16s ease;
}

.recent-acc-card:hover {
  background: rgba(45, 20, 60, 0.95);
  border-color: rgba(240, 201, 110, 0.5);
  transform: translateX(2px);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

.recent-acc-avatar-wrap {
  width: 34px;
  height: 34px;
  border-radius: 6px;
  border: 1.5px solid var(--gold);
  overflow: hidden;
  background: #14071c;
  flex-shrink: 0;
}

.recent-acc-avatar {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.recent-acc-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  text-align: left;
}

.recent-acc-name {
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.recent-acc-email {
  font-size: 11px;
  color: var(--ice);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.recent-acc-actions {
  display: flex;
  align-items: center;
  gap: 5px;
}

.btn-recent-quick-login {
  background: linear-gradient(135deg, rgba(240, 201, 110, 0.25), rgba(240, 201, 110, 0.1));
  border: 1px solid rgba(240, 201, 110, 0.5);
  color: var(--gold);
  font-size: 11px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 5px;
  cursor: pointer;
  transition: all 0.14s;
}

.btn-recent-quick-login:hover {
  background: var(--gold);
  color: #000;
}

.btn-recent-remove {
  background: transparent;
  border: none;
  color: var(--muted);
  font-size: 13px;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 4px;
  transition: color 0.14s;
}

.btn-recent-remove:hover {
  color: var(--crimson-2);
  background: rgba(255, 77, 106, 0.15);
}

.btn-recent-delete-alt {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: rgba(255, 77, 106, 0.14);
  border: 1px solid rgba(255, 77, 106, 0.4);
  color: #ff6b81;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 9px;
  border-radius: 5px;
  cursor: pointer;
  transition: all 0.16s ease;
  white-space: nowrap;
}

.btn-recent-delete-alt:hover {
  background: rgba(255, 77, 106, 0.35);
  border-color: #ff4d6a;
  color: #ffffff;
  transform: scale(1.04);
  box-shadow: 0 0 10px rgba(255, 77, 106, 0.5);
}

.btn-recent-delete-alt:active {
  transform: scale(0.96);
}

.badge-main-acc {
  font-size: 10px;
  font-weight: 700;
  color: var(--gold);
  background: rgba(240, 201, 110, 0.15);
  border: 1px solid rgba(240, 201, 110, 0.4);
  padding: 2px 6px;
  border-radius: 4px;
  margin-left: 6px;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  white-space: nowrap;
}

/* =========================================================
   KAYIT FORMU AVATAR SEÇİCİSİ
   ========================================================= */
.avatar-picker-field {
  margin-bottom: 15px;
}

.btn-avatar-style-toggle {
  background: rgba(127, 227, 255, 0.12);
  border: 1px solid rgba(127, 227, 255, 0.35);
  color: var(--ice);
  font-size: 11px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.15s;
}

.btn-avatar-style-toggle.active {
  background: rgba(78, 224, 138, 0.18);
  border-color: rgba(78, 224, 138, 0.55);
  color: #5ef59f;
}

.btn-avatar-style-toggle:hover {
  filter: brightness(1.2);
}

.avatar-selection-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
  gap: 8px;
  margin-top: 8px;
  padding: 4px 2px;
}

.reg-avatar-item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: rgba(20, 9, 28, 0.85);
  border: 1.5px solid rgba(255, 255, 255, 0.12);
  border-radius: 9px;
  padding: 6px 4px 5px;
  cursor: pointer;
  transition: all 0.18s ease;
  user-select: none;
}

.reg-avatar-item:hover {
  border-color: rgba(240, 201, 110, 0.6);
  background: rgba(35, 15, 48, 0.95);
  transform: translateY(-2px);
}

.reg-avatar-item.selected {
  border-color: var(--gold);
  background: linear-gradient(180deg, rgba(50, 22, 70, 0.95), rgba(28, 10, 38, 0.98));
  box-shadow: 0 0 12px rgba(240, 201, 110, 0.45), inset 0 0 8px rgba(240, 201, 110, 0.15);
}

.reg-avatar-img {
  width: 44px;
  height: 44px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  object-fit: cover;
  background: #0d0413;
  margin-bottom: 4px;
}

.reg-avatar-item.selected .reg-avatar-img {
  border-color: var(--gold);
}

.reg-avatar-name {
  font-size: 10.5px;
  font-weight: 700;
  color: #dfd4e6;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.reg-avatar-item.selected .reg-avatar-name {
  color: var(--gold);
}

.reg-avatar-check {
  position: absolute;
  top: 3px;
  right: 4px;
  font-size: 10px;
  font-weight: 900;
  color: var(--gold);
}

/* =========================================================
   PROFİL İKONU SEÇİCİ MODAL (LOBİ İÇİN)
   ========================================================= */
#avatar-modal {
  z-index: 55;
  background: rgba(6, 3, 10, 0.94);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.avatar-modal-card {
  width: 95%;
  max-width: 52em;
  max-height: 92%;
  display: flex;
  flex-direction: column;
  padding: 1.4em 1.8em 1.2em;
  background: linear-gradient(165deg, rgba(28, 12, 38, 0.96), rgba(10, 4, 16, 0.98));
  border: 0.15em solid rgba(240, 201, 110, 0.55);
  box-shadow: 0 0 0 0.15em #000, 0 1.5em 4em rgba(0, 0, 0, 0.95), inset 0 0 2.5em rgba(240, 201, 110, 0.08);
  border-radius: 0.7em;
  overflow-y: auto;
}

.avatar-modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  border-bottom: 0.08em solid rgba(240, 201, 110, 0.25);
  padding-bottom: 0.7em;
  margin-bottom: 0.6em;
}

.avatar-modal-title h2 {
  font-size: 1.5em;
  color: var(--gold);
  margin: 0.1em 0 0;
}

.avatar-modal-sub {
  font-size: 0.88em;
  color: var(--muted);
  margin: 0 0 0.8em;
}

.avatar-mode-switcher {
  display: flex;
  gap: 0.6em;
  margin-bottom: 1em;
}

.avatar-mode-btn {
  background: rgba(255, 255, 255, 0.06);
  border: 0.08em solid rgba(255, 255, 255, 0.18);
  color: var(--muted);
  font-family: var(--font);
  font-size: 0.82em;
  font-weight: 700;
  padding: 0.45em 1em;
  border-radius: 0.4em;
  cursor: pointer;
  transition: all 0.15s;
}

.avatar-mode-btn:hover:not(.active) {
  color: #fff;
  background: rgba(255, 255, 255, 0.12);
}

.avatar-mode-btn.active {
  background: linear-gradient(135deg, rgba(240, 201, 110, 0.3), rgba(240, 201, 110, 0.12));
  border-color: var(--gold);
  color: var(--gold);
  box-shadow: 0 0 0.9em rgba(240, 201, 110, 0.3);
}

.avatar-grid-picker {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13.5em, 1fr));
  gap: 0.9em;
  margin-bottom: 1.2em;
}

.avatar-modal-card-item {
  display: flex;
  gap: 0.8em;
  background: rgba(20, 8, 30, 0.75);
  border: 0.12em solid rgba(255, 255, 255, 0.12);
  border-radius: 0.55em;
  padding: 0.75em;
  cursor: pointer;
  transition: all 0.18s ease;
  user-select: none;
}

.avatar-modal-card-item:hover {
  background: rgba(40, 16, 58, 0.9);
  border-color: rgba(240, 201, 110, 0.6);
  transform: translateY(-0.15em);
  box-shadow: 0 0.5em 1.2em rgba(0, 0, 0, 0.6);
}

.avatar-modal-card-item.selected {
  background: linear-gradient(165deg, rgba(50, 20, 72, 0.95), rgba(22, 8, 32, 0.98));
  border-color: var(--gold);
  box-shadow: 0 0 1.2em rgba(240, 201, 110, 0.45);
}

.avatar-modal-img-wrap {
  position: relative;
  width: 4.8em;
  height: 4.8em;
  border-radius: 0.45em;
  border: 0.12em solid var(--gold);
  background: #0d0413;
  overflow: hidden;
  flex-shrink: 0;
}

.avatar-modal-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.avatar-selected-badge {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(240, 201, 110, 0.92);
  color: #000;
  font-size: 0.62em;
  font-weight: 900;
  text-align: center;
  padding: 0.15em 0;
  letter-spacing: 0.05em;
}

.avatar-modal-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: left;
  min-width: 0;
}

.avatar-modal-name {
  font-size: 1.05em;
  color: #fff;
  margin-bottom: 0.15em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.avatar-modal-card-item.selected .avatar-modal-name {
  color: var(--gold);
}

.avatar-modal-title {
  font-size: 0.78em;
  color: var(--ice);
  font-weight: 700;
  margin-bottom: 0.3em;
}

.avatar-modal-desc {
  font-size: 0.72em;
  color: var(--muted);
  line-height: 1.3;
}

.avatar-modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 0.8em;
  border-top: 0.08em solid rgba(240, 201, 110, 0.25);
  padding-top: 0.9em;
}

/* =========================================================
   OYUNCU LİSTESİ AVATAR GÖRÜNTÜLERİ
   ========================================================= */
.player-card-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 0.35em;
}

.pdetail-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 0.35em;
}

/* =========================================================
   OYUNCU LİSTESİ DAVET BUTONU & DETAY
   ========================================================= */
.btn-invite-player {
  background: rgba(56, 189, 248, 0.15);
  border: 1px solid rgba(56, 189, 248, 0.4);
  color: #7fe3ff;
  border-radius: 0.35em;
  padding: 0.35em 0.7em;
  font-family: inherit;
  font-size: 0.78em;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  transition: all 0.15s ease;
}

.btn-invite-player:hover {
  background: rgba(56, 189, 248, 0.35);
  border-color: #38bdf8;
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 0 10px rgba(56, 189, 248, 0.4);
}

.detail-sheet-actions {
  display: flex;
  gap: 0.8em;
  margin-top: 1.1em;
}

/* =========================================================
   BRAWL STARS TARZI KULÜP SİSTEMİ (CLUBS MODAL)
   ========================================================= */
#clubs-modal {
  z-index: 55;
  background: rgba(5, 2, 8, 0.94);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.clubs-modal-card {
  width: 96%;
  max-width: 66em;
  max-height: 94%;
  display: flex;
  flex-direction: column;
  padding: 1.3em 1.6em 1em;
  background: linear-gradient(165deg, rgba(24, 10, 34, 0.98), rgba(9, 4, 15, 0.99));
  border: 0.15em solid rgba(56, 189, 248, 0.5);
  box-shadow: 0 0 0 0.15em #000, 0 1.5em 4em rgba(0, 0, 0, 0.95), inset 0 0 3em rgba(56, 189, 248, 0.08);
  border-radius: 0.85em;
  position: relative;
  overflow: hidden;
}

.clubs-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 0.08em solid rgba(255, 255, 255, 0.1);
  padding-bottom: 0.8em;
  margin-bottom: 0.8em;
  flex-shrink: 0;
}

.clubs-title-wrap {
  display: flex;
  flex-direction: column;
}

.clubs-kicker {
  font-size: 0.72em;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: var(--ice);
  text-transform: uppercase;
}

.clubs-header h2 {
  font-size: 1.4em;
  color: #fff;
  margin: 0.1em 0 0;
  letter-spacing: 0.02em;
}

/* Brawl Stars Tarzı Sekmeler */
.clubs-nav-tabs {
  display: flex;
  gap: 0.5em;
  background: rgba(0, 0, 0, 0.4);
  padding: 0.35em;
  border-radius: 0.6em;
  border: 1px solid rgba(255, 255, 255, 0.08);
  margin-bottom: 0.9em;
  flex-shrink: 0;
  overflow-x: auto;
}

.club-nav-tab {
  background: transparent;
  border: none;
  color: var(--muted);
  font-family: inherit;
  font-size: 0.86em;
  font-weight: 700;
  padding: 0.5em 1.1em;
  border-radius: 0.45em;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.18s ease;
}

.club-nav-tab:hover:not(.active) {
  color: #fff;
  background: rgba(255, 255, 255, 0.06);
}

.club-nav-tab.active {
  background: linear-gradient(135deg, #0284c7, #0369a1);
  color: #fff;
  box-shadow: 0 2px 10px rgba(2, 132, 199, 0.45);
}

.clubs-modal-content {
  flex: 1;
  overflow-y: auto;
  min-height: 24em;
  position: relative;
}

/* Boş Durum (Empty State) */
.club-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 3.5em 1em;
}

.club-empty-icon {
  font-size: 3.8em;
  margin-bottom: 0.3em;
  filter: drop-shadow(0 0 15px rgba(56, 189, 248, 0.5));
}

.club-empty-state h3 {
  font-size: 1.45em;
  color: #fff;
  margin: 0.2em 0 0.5em;
}

.club-empty-sub {
  color: var(--muted);
  max-width: 32em;
  font-size: 0.92em;
  line-height: 1.5;
  margin-bottom: 1.8em;
}

.club-empty-actions {
  display: flex;
  gap: 1em;
  flex-wrap: wrap;
  justify-content: center;
}

/* Kulüp Başlığı Banner'ı (Brawl Stars Style) */
.club-header-banner {
  display: flex;
  align-items: center;
  gap: 1.2em;
  background: linear-gradient(135deg, rgba(20, 8, 30, 0.9), rgba(12, 4, 18, 0.95));
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-top-width: 4px;
  border-radius: 0.7em;
  padding: 1.1em 1.3em;
  margin-bottom: 1em;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6);
  flex-wrap: wrap;
}

.club-banner-badge-wrap {
  width: 5.4em;
  height: 5.4em;
  border-radius: 0.65em;
  border: 2.5px solid #38bdf8;
  background: #000;
  overflow: hidden;
  flex-shrink: 0;
}

.club-banner-badge-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.club-banner-main-col {
  flex: 1;
  min-width: 16em;
}

.club-banner-title-row {
  display: flex;
  align-items: center;
  gap: 0.8em;
  margin-bottom: 0.3em;
}

.club-banner-title {
  font-size: 1.35em;
  font-weight: 800;
  margin: 0;
  letter-spacing: 0.02em;
}

.club-banner-tag {
  background: rgba(255, 255, 255, 0.1);
  padding: 0.15em 0.6em;
  border-radius: 0.35em;
  font-size: 0.76em;
  color: var(--muted);
  font-weight: 700;
  letter-spacing: 0.05em;
}

.club-banner-desc {
  font-size: 0.86em;
  color: #d1d5db;
  margin: 0 0 0.7em;
  line-height: 1.4;
  word-break: break-word;
}

.club-banner-stats-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6em;
}

.club-stat-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.09);
  padding: 0.25em 0.7em;
  border-radius: 0.4em;
  font-size: 0.78em;
}

.club-stat-pill .cb-label {
  color: var(--muted);
}

.club-stat-pill .cb-val {
  color: #fff;
  font-weight: 700;
}

.club-banner-actions {
  flex-shrink: 0;
}

.btn-leave-club {
  color: #ff8598 !important;
  border-color: rgba(255, 133, 152, 0.3) !important;
}

.btn-leave-club:hover {
  background: rgba(255, 133, 152, 0.18) !important;
  border-color: #ff8598 !important;
}

/* Kulüp İçerik Grid'i (Sol: Üyeler, Sağ: Sohbet) */
.club-content-grid {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: 1em;
}

/* Sol Kolon: Üye Paneli */
.club-members-pane {
  background: rgba(15, 6, 22, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 0.65em;
  padding: 0.9em 1.1em;
  display: flex;
  flex-direction: column;
}

.pane-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding-bottom: 0.6em;
  margin-bottom: 0.8em;
}

.pane-header h3 {
  font-size: 1em;
  margin: 0;
  color: #fff;
}

.pane-hint {
  font-size: 0.72em;
  color: var(--muted);
}

.club-members-list-scroll {
  max-height: 23em;
  overflow-y: auto;
  padding-right: 0.3em;
}

.club-members-grid {
  display: flex;
  flex-direction: column;
  gap: 0.55em;
}

.club-member-card {
  display: flex;
  align-items: center;
  gap: 0.8em;
  background: rgba(25, 10, 36, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 0.5em;
  padding: 0.55em 0.8em;
  transition: all 0.15s ease;
}

.club-member-card:hover {
  background: rgba(38, 16, 54, 0.9);
  border-color: rgba(56, 189, 248, 0.4);
}

.club-member-card.is-me {
  border-color: rgba(240, 201, 110, 0.5);
  background: linear-gradient(135deg, rgba(38, 16, 54, 0.9), rgba(28, 12, 40, 0.9));
}

.cm-avatar-col {
  position: relative;
  width: 2.8em;
  height: 2.8em;
  flex-shrink: 0;
}

.cm-avatar-wrap {
  width: 100%;
  height: 100%;
  border-radius: 0.35em;
  overflow: hidden;
  background: #000;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.cm-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.cm-level-tag {
  position: absolute;
  bottom: -0.2em;
  right: -0.2em;
  background: #000;
  border: 1px solid var(--gold);
  color: var(--gold);
  font-size: 0.58em;
  font-weight: 800;
  padding: 0 0.3em;
  border-radius: 0.25em;
}

.cm-status-dot {
  position: absolute;
  top: -0.2em;
  left: -0.2em;
  width: 0.65em;
  height: 0.65em;
  border-radius: 50%;
  border: 1px solid #000;
}

.cm-status-dot.online {
  background: #22c55e;
}

.cm-status-dot.offline {
  background: #6b7280;
}

.cm-info-col {
  flex: 1;
  min-width: 0;
}

.cm-name-row {
  display: flex;
  align-items: center;
  gap: 0.5em;
  flex-wrap: wrap;
  margin-bottom: 0.15em;
}

.cm-name {
  font-size: 0.92em;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.badge-me-sm {
  font-size: 0.65em;
  color: var(--gold);
  font-weight: 800;
}

.cm-meta-row {
  display: flex;
  gap: 0.8em;
  font-size: 0.74em;
  color: var(--muted);
}

.cm-power {
  color: var(--gold);
  font-weight: 700;
}

/* Rol Rozetleri (Hiyerarşi) */
.cm-role-tag {
  font-size: 0.68em;
  font-weight: 800;
  padding: 0.15em 0.55em;
  border-radius: 0.35em;
  letter-spacing: 0.02em;
  display: inline-flex;
  align-items: center;
  gap: 0.25em;
}

.cm-role-tag.role-owner {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.35), rgba(217, 119, 6, 0.2));
  border: 1px solid #f59e0b;
  color: #fde047;
  box-shadow: 0 0 8px rgba(245, 158, 11, 0.3);
}

.cm-role-tag.role-moderator {
  background: linear-gradient(135deg, rgba(56, 189, 248, 0.3), rgba(2, 132, 199, 0.2));
  border: 1px solid #38bdf8;
  color: #bae6fd;
}

.cm-role-tag.role-vip {
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.3), rgba(126, 34, 206, 0.2));
  border: 1px solid #c084fc;
  color: #f3e8ff;
  box-shadow: 0 0 6px rgba(168, 85, 247, 0.3);
}

.cm-role-tag.role-member {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #cbd5e1;
}

.btn-member-menu {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #fff;
  border-radius: 0.35em;
  padding: 0.3em 0.55em;
  cursor: pointer;
  font-size: 0.85em;
  transition: all 0.15s;
}

.btn-member-menu:hover {
  background: rgba(56, 189, 248, 0.25);
  border-color: #38bdf8;
}

/* Sağ Kolon: Brawl Stars Kulüp Sohbeti */
.club-chat-pane {
  background: rgba(15, 6, 22, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 0.65em;
  padding: 0.9em 1.1em;
  display: flex;
  flex-direction: column;
}

.chat-safe-badge {
  font-size: 0.7em;
  color: #4ee08a;
  background: rgba(78, 224, 138, 0.12);
  border: 1px solid rgba(78, 224, 138, 0.3);
  padding: 0.15em 0.5em;
  border-radius: 0.3em;
}

.club-chat-messages {
  flex: 1;
  max-height: 19em;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0.6em;
  padding: 0.4em 0.2em;
  margin-bottom: 0.7em;
}

.chat-msg {
  display: flex;
  flex-direction: column;
  max-width: 90%;
}

.chat-msg.chat-me {
  align-self: flex-end;
}

.chat-msg.chat-other {
  align-self: flex-start;
}

.chat-msg-head {
  display: flex;
  align-items: center;
  gap: 0.4em;
  margin-bottom: 0.2em;
  font-size: 0.72em;
}

.chat-sender-name {
  font-weight: 700;
  color: #e2e8f0;
}

.chat-role-pill {
  font-size: 0.85em;
  font-weight: 800;
  padding: 0.1em 0.4em;
  border-radius: 0.25em;
}

.chat-time {
  color: var(--muted);
  font-size: 0.9em;
}

.chat-bubble {
  background: rgba(30, 14, 44, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 0.5em 0.8em;
  border-radius: 0.55em;
  font-size: 0.86em;
  color: #fff;
  line-height: 1.35;
  word-break: break-word;
}

.chat-me .chat-bubble {
  background: linear-gradient(135deg, rgba(2, 132, 199, 0.4), rgba(3, 105, 161, 0.4));
  border-color: rgba(56, 189, 248, 0.4);
}

.chat-msg.system-msg {
  align-self: center;
  background: rgba(255, 255, 255, 0.05);
  border: 1px dashed rgba(255, 255, 255, 0.12);
  border-radius: 0.4em;
  padding: 0.35em 0.8em;
  font-size: 0.76em;
  color: #f0c96e;
  text-align: center;
  max-width: 100%;
}

.chat-empty {
  text-align: center;
  color: var(--muted);
  font-size: 0.82em;
  padding: 2em 0;
}

.club-chat-form {
  margin-top: auto;
}

.chat-input-wrap {
  display: flex;
  gap: 0.4em;
}

.chat-input-wrap input {
  flex: 1;
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 0.45em;
  padding: 0.5em 0.8em;
  color: #fff;
  font-family: inherit;
  font-size: 0.86em;
  outline: none;
}

.chat-input-wrap input:focus {
  border-color: #38bdf8;
  box-shadow: 0 0 8px rgba(56, 189, 248, 0.3);
}

.btn-chat-send {
  background: linear-gradient(135deg, #0284c7, #0369a1);
  border: none;
  color: #fff;
  font-weight: 800;
  border-radius: 0.45em;
  padding: 0 1em;
  cursor: pointer;
  transition: all 0.15s;
}

.btn-chat-send:hover {
  filter: brightness(1.15);
}

/* Üye Yönetim Açılır Modalı */
.member-action-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 60;
  backdrop-filter: blur(4px);
}

.member-action-card {
  width: 90%;
  max-width: 24em;
  background: linear-gradient(165deg, rgba(32, 12, 44, 0.98), rgba(16, 6, 24, 0.99));
  border: 1px solid var(--gold);
  border-radius: 0.7em;
  padding: 1.2em 1.4em;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.8);
}

.member-action-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.4em;
}

.member-action-head h4 {
  margin: 0;
  font-size: 1.15em;
  color: #fff;
}

.ma-target-role {
  font-size: 0.82em;
  color: var(--muted);
  margin-bottom: 1em;
}

.ma-buttons-col {
  display: flex;
  flex-direction: column;
  gap: 0.55em;
}

.btn-ma {
  width: 100%;
  text-align: center;
  justify-content: center;
  font-size: 0.88em;
  padding: 0.6em 1em;
}

.btn-ma.danger {
  background: linear-gradient(135deg, #dc2626, #991b1b);
  border-color: #f87171;
  color: #fff;
}

.ma-notice {
  font-size: 0.82em;
  color: var(--muted);
  text-align: center;
  padding: 0.5em 0;
}

/* 2. KULÜP BUL VE LİSTE GÖRÜNÜMÜ */
.browse-clubs-view {
  display: flex;
  flex-direction: column;
  gap: 0.8em;
}

.browse-header-row {
  display: flex;
  gap: 0.8em;
  align-items: center;
  flex-wrap: wrap;
}

.browse-search-box {
  flex: 1;
  min-width: 14em;
  display: flex;
  align-items: center;
  gap: 0.5em;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 0.45em;
  padding: 0.5em 0.8em;
}

.browse-search-box input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: #fff;
  font-family: inherit;
  font-size: 0.88em;
}

.browse-clubs-list-scroll {
  max-height: 25em;
  overflow-y: auto;
  padding-right: 0.3em;
}

.browse-clubs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(28em, 1fr));
  gap: 0.8em;
}

.club-card {
  display: flex;
  align-items: center;
  gap: 1em;
  background: rgba(22, 9, 32, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-left-width: 4px;
  border-radius: 0.6em;
  padding: 0.85em 1.1em;
  transition: all 0.15s ease;
}

.club-card:hover {
  background: rgba(35, 14, 50, 0.95);
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
}

.club-card-badge-wrap {
  width: 4.2em;
  height: 4.2em;
  border-radius: 0.5em;
  border: 2px solid #38bdf8;
  background: #000;
  overflow: hidden;
  flex-shrink: 0;
}

.club-card-badge-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.club-card-info {
  flex: 1;
  min-width: 0;
}

.club-card-title-row {
  display: flex;
  align-items: center;
  gap: 0.6em;
  margin-bottom: 0.2em;
}

.club-card-name {
  margin: 0;
  font-size: 1.05em;
  font-weight: 800;
}

.club-card-tag {
  font-size: 0.72em;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.08);
  padding: 0.1em 0.4em;
  border-radius: 0.25em;
}

.club-card-desc {
  font-size: 0.78em;
  color: #cbd5e1;
  margin: 0 0 0.4em;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.club-card-meta-row {
  display: flex;
  gap: 0.7em;
  font-size: 0.72em;
  color: var(--muted);
  flex-wrap: wrap;
}

.cc-meta {
  background: rgba(0, 0, 0, 0.35);
  padding: 0.1em 0.45em;
  border-radius: 0.25em;
}

.badge-joined {
  color: #4ee08a;
  font-size: 0.76em;
  font-weight: 800;
  background: rgba(78, 224, 138, 0.12);
  border: 1px solid rgba(78, 224, 138, 0.4);
  padding: 0.3em 0.6em;
  border-radius: 0.35em;
}

/* 3. KULÜP OLUŞTURMA FORMU */
.create-club-view {
  padding: 0.5em 0;
}

.create-club-header {
  margin-bottom: 1em;
}

.create-club-header h3 {
  font-size: 1.25em;
  color: #fff;
  margin: 0 0 0.2em;
}

.create-sub {
  font-size: 0.84em;
  color: var(--muted);
  margin: 0;
}

.create-form-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 1.4em;
}

.create-col-left,
.create-col-right {
  display: flex;
  flex-direction: column;
  gap: 0.85em;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 0.35em;
}

.form-group label {
  font-size: 0.84em;
  font-weight: 700;
  color: #e2e8f0;
}

.form-group input,
.form-group textarea,
.form-group select {
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 0.45em;
  padding: 0.55em 0.8em;
  color: #fff;
  font-family: inherit;
  font-size: 0.88em;
  outline: none;
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
  border-color: #38bdf8;
  box-shadow: 0 0 8px rgba(56, 189, 248, 0.35);
}

.form-row-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.8em;
}

.field-hint {
  font-size: 0.7em;
  color: var(--muted);
}

/* Renk Seçici Kutuları */
.color-picker-grid {
  display: flex;
  gap: 0.55em;
  flex-wrap: wrap;
}

.color-swatch-item {
  width: 2.2em;
  height: 2.2em;
  border-radius: 0.4em;
  border: 2px solid rgba(255, 255, 255, 0.2);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.15s, border-color 0.15s;
}

.color-swatch-item:hover {
  transform: scale(1.1);
  border-color: #fff;
}

.color-swatch-item.selected {
  transform: scale(1.15);
  border-color: #fff;
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.6);
}

.color-check {
  font-size: 0.9em;
  font-weight: 900;
  color: #fff;
  text-shadow: 0 0 3px #000;
}

/* Güvenli Rozet Seçici Grid'i */
.badge-picker-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.btn-toggle-badge-pixel {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: var(--gold);
  font-family: inherit;
  font-size: 0.72em;
  font-weight: 700;
  padding: 0.25em 0.6em;
  border-radius: 0.3em;
  cursor: pointer;
}

.badge-picker-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(5.8em, 1fr));
  gap: 0.6em;
  max-height: 12.5em;
  overflow-y: auto;
  padding: 0.3em;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 0.5em;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.badge-picker-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: rgba(20, 8, 30, 0.8);
  border: 1.5px solid rgba(255, 255, 255, 0.1);
  border-radius: 0.4em;
  padding: 0.4em;
  cursor: pointer;
  position: relative;
  transition: all 0.15s;
}

.badge-picker-card:hover {
  background: rgba(35, 14, 52, 0.9);
  border-color: #38bdf8;
}

.badge-picker-card.selected {
  border-color: var(--gold);
  background: linear-gradient(135deg, rgba(40, 16, 60, 0.9), rgba(20, 8, 30, 0.9));
  box-shadow: 0 0 10px rgba(240, 201, 110, 0.4);
}

.badge-picker-img {
  width: 3.2em;
  height: 3.2em;
  object-fit: cover;
  border-radius: 0.3em;
}

.badge-picker-name {
  font-size: 0.65em;
  color: #fff;
  margin-top: 0.3em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.badge-picker-check {
  position: absolute;
  top: 0.2em;
  right: 0.2em;
  background: var(--gold);
  color: #000;
  font-size: 0.6em;
  font-weight: 900;
  padding: 0 0.3em;
  border-radius: 0.2em;
}

.create-preview-wrap {
  margin-top: 0.4em;
}

.preview-title {
  font-size: 0.76em;
  color: var(--muted);
  font-weight: 700;
  display: block;
  margin-bottom: 0.3em;
}

.preview-card {
  pointer-events: none;
}

.create-footer-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.8em;
  margin-top: 1.2em;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: 1em;
}

/* 4. LİDERLİK TABLOSU GÖRÜNÜMÜ */
.leaderboard-clubs-view {
  display: flex;
  flex-direction: column;
  gap: 0.8em;
}

.lb-header {
  margin-bottom: 0.4em;
}

.lb-header h3 {
  font-size: 1.2em;
  color: var(--gold);
  margin: 0 0 0.2em;
}

.lb-sub {
  font-size: 0.82em;
  color: var(--muted);
  margin: 0;
}

.lb-clubs-list-scroll {
  max-height: 25em;
  overflow-y: auto;
}

.lb-table {
  display: flex;
  flex-direction: column;
  gap: 0.4em;
}

.lb-row {
  display: grid;
  grid-template-columns: 4em 1.8fr 1fr 1.2fr 6em;
  align-items: center;
  background: rgba(22, 9, 32, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 0.5em;
  padding: 0.6em 0.9em;
  font-size: 0.86em;
}

.lb-row.lb-head {
  background: rgba(0, 0, 0, 0.5);
  font-weight: 700;
  color: var(--muted);
  font-size: 0.76em;
  text-transform: uppercase;
}

.lb-row.top-rank {
  border-color: rgba(240, 201, 110, 0.4);
  background: linear-gradient(135deg, rgba(32, 12, 45, 0.85), rgba(18, 7, 26, 0.85));
}

.rank-badge {
  font-size: 1.05em;
  color: #fff;
}

.lb-col-club {
  display: flex;
  align-items: center;
  gap: 0.7em;
}

.lb-badge-wrap {
  width: 2.6em;
  height: 2.6em;
  border-radius: 0.4em;
  border: 1.5px solid #38bdf8;
  overflow: hidden;
  background: #000;
  flex-shrink: 0;
}

.lb-badge-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.lb-club-names {
  display: flex;
  flex-direction: column;
}

.lb-club-title {
  font-size: 0.95em;
}

.lb-club-tag {
  font-size: 0.72em;
  color: var(--muted);
}

.lb-col-members {
  color: #e2e8f0;
}

.lb-power-val {
  color: var(--gold);
}

/* Toast Bildirimi */
.club-toast {
  position: fixed;
  bottom: 2em;
  left: 50%;
  transform: translateX(-50%) translateY(2em);
  background: rgba(18, 7, 26, 0.96);
  border: 1.5px solid var(--gold);
  border-radius: 0.6em;
  padding: 0.75em 1.4em;
  color: #fff;
  font-size: 0.88em;
  font-weight: 700;
  z-index: 999;
  opacity: 0;
  pointer-events: none;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.8);
}

.club-toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.club-toast.err {
  border-color: #f87171;
  color: #fca5a5;
  background: rgba(30, 8, 12, 0.96);
}

.club-toast.ok {
  border-color: #4ee08a;
  color: #bbf7d0;
  background: rgba(6, 26, 14, 0.96);
}

.club-toast.warn {
  border-color: #f59e0b;
  color: #fef08a;
}

.clubs-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: 0.8em;
  margin-top: 0.6em;
}

.clubs-security-note {
  font-size: 0.74em;
  color: #4ee08a;
}

/* Mobil / Küçük Ekran Uyumluluğu */
@media (max-width: 768px) {
  .club-content-grid {
    grid-template-columns: 1fr;
  }

  .create-form-grid {
    grid-template-columns: 1fr;
  }

  .browse-clubs-grid {
    grid-template-columns: 1fr;
  }

  .lb-row {
    grid-template-columns: 3em 1.5fr 1fr 1fr;
  }

  .lb-col-action {
    display: none;
  }
}

/* =========================================================
   VİRÜS KORUMASI: KLAVYEDEN GİRİŞ & KOPYALA-YAPIŞTIR ENGELİ
   ========================================================= */
.security-toast {
  position: fixed;
  top: 1.8em;
  left: 50%;
  transform: translateX(-50%) translateY(-1.5em);
  background: linear-gradient(135deg, rgba(35, 10, 16, 0.98), rgba(20, 5, 10, 0.99));
  border: 1.5px solid #f87171;
  border-radius: 0.6em;
  padding: 0.85em 1.5em;
  color: #fef2f2;
  font-size: 0.88em;
  font-weight: 700;
  z-index: 99999;
  opacity: 0;
  pointer-events: none;
  transition: all 0.28s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.85), 0 0 20px rgba(248, 113, 113, 0.4);
  max-width: 90vw;
  text-align: center;
  display: flex;
  align-items: center;
  gap: 0.6em;
}

.security-toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.paste-blocked-pulse {
  animation: pastePulseAnim 0.7s ease-in-out;
  border-color: #f87171 !important;
  box-shadow: 0 0 12px rgba(248, 113, 113, 0.6) !important;
}

@keyframes pastePulseAnim {
  0% {
    transform: scale(1);
  }

  25% {
    transform: scale(1.02);
  }

  50% {
    transform: scale(0.99);
  }

  100% {
    transform: scale(1);
  }
}

/* Kulüp Üyesi PP Unvan Etiketi */
.cm-title-row {
  margin: 0.15em 0 0.2em;
}

.cm-title-tag {
  display: inline-block;
  font-size: 0.72em;
  font-weight: 700;
  color: #fef08a;
  background: rgba(254, 240, 138, 0.14);
  border: 0.06em solid rgba(254, 240, 138, 0.4);
  border-radius: 0.3em;
  padding: 0.1em 0.45em;
  letter-spacing: 0.03em;
}

/* Kulüp Boş Durum Görünümü (Empty State) */
.empty-clubs-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 3.2em 1.8em;
  background: rgba(18, 10, 28, 0.75);
  border: 0.12em dashed rgba(240, 201, 110, 0.4);
  border-radius: 1em;
  margin: 1.5em auto;
  max-width: 520px;
  animation: fadeIn 0.3s ease-out;
}

.empty-clubs-icon {
  font-size: 3.2em;
  margin-bottom: 0.35em;
  filter: drop-shadow(0 0 16px rgba(240, 201, 110, 0.65));
}

.empty-clubs-state h3 {
  color: #fff;
  font-size: 1.35em;
  margin: 0.1em 0 0.4em;
  font-family: var(--font);
}

.empty-clubs-state p {
  color: #cbd5e1;
  font-size: 0.9em;
  line-height: 1.55;
  margin: 0 0 1.3em;
}

.btn-create-first-club {
  font-size: 0.95em;
  padding: 0.7em 1.4em;
  box-shadow: 0 0 1.2em rgba(240, 201, 110, 0.45);
}

/* Toji & Özel Karakter Rozet Sınıfları */
.player-rank-pill.rank-toji-killer {
  border-color: #f43f5e;
  color: #fda4af;
  background: rgba(244, 63, 94, 0.22);
  text-shadow: 0 0 0.4em rgba(244, 63, 94, 0.7);
}

.player-avatar.rank-toji-killer {
  border-color: #f43f5e;
  box-shadow: 0 0 1em rgba(244, 63, 94, 0.6);
  background: radial-gradient(circle, #3d0d1e, #14030a);
}

.player-rank-pill.rank-special-talent {
  border-color: #f59e0b;
  color: #fde68a;
  background: rgba(245, 158, 11, 0.22);
  text-shadow: 0 0 0.4em rgba(245, 158, 11, 0.7);
}

.player-avatar.rank-special-talent {
  border-color: #f59e0b;
  box-shadow: 0 0 1em rgba(245, 158, 11, 0.6);
  background: radial-gradient(circle, #38240a, #130a02);
}

/* =========================================================
   SERVER SHUTDOWN & BAKIM MODU STİLLERİ
   ========================================================= */
.btn-shutdown-trigger {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.25), rgba(185, 28, 28, 0.4)) !important;
  border-color: #ef4444 !important;
  color: #fecaca !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  box-shadow: 0 0 10px rgba(239, 68, 68, 0.35) !important;
  transition: all 0.2s ease !important;
}

.btn-shutdown-trigger:hover {
  background: #ef4444 !important;
  color: #fff !important;
  box-shadow: 0 0 18px rgba(239, 68, 68, 0.75) !important;
  transform: scale(1.04);
}

/* Tam Ekran Kapatma Ekranı */
.server-shutdown-overlay {
  position: fixed;
  inset: 0;
  z-index: 999999;
  background: radial-gradient(circle at center, rgba(30, 8, 12, 0.96), rgba(8, 2, 4, 0.99));
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5em;
  animation: fadeIn 0.4s ease-out;
}

.shutdown-card {
  max-width: 620px;
  width: 100%;
  background: rgba(20, 6, 12, 0.92);
  border: 2px solid #ef4444;
  border-radius: 1.2em;
  padding: 2.2em 2em;
  box-shadow: 0 0 35px rgba(239, 68, 68, 0.45), inset 0 0 30px rgba(239, 68, 68, 0.12);
  text-align: center;
  position: relative;
  overflow: hidden;
}

.shutdown-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.2em;
}

.shutdown-badge-pulse {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  background: rgba(239, 68, 68, 0.18);
  border: 1px solid rgba(239, 68, 68, 0.6);
  border-radius: 2em;
  padding: 0.35em 0.9em;
}

.shutdown-status-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #ef4444;
  box-shadow: 0 0 10px #ef4444;
  animation: pulse 1s infinite alternate;
}

.shutdown-status-text {
  font-size: 0.78em;
  font-weight: 800;
  color: #fca5a5;
  letter-spacing: 0.08em;
}

.shutdown-alert-icon {
  font-size: 1.8em;
  filter: drop-shadow(0 0 10px rgba(239, 68, 68, 0.8));
}

.shutdown-title {
  color: #fef2f2;
  font-size: 1.6em;
  font-weight: 900;
  letter-spacing: 0.05em;
  margin: 0 0 0.4em;
  text-shadow: 0 0 15px rgba(239, 68, 68, 0.7);
  font-family: var(--font);
}

.shutdown-lead {
  color: #e2e8f0;
  font-size: 0.95em;
  margin: 0 0 1.5em;
  line-height: 1.5;
}

.shutdown-details-box {
  background: rgba(10, 3, 6, 0.8);
  border: 1px solid rgba(239, 68, 68, 0.35);
  border-radius: 0.8em;
  padding: 1.1em 1.3em;
  margin-bottom: 1.5em;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 0.65em;
}

.sdetail-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.88em;
  gap: 1em;
}

.sdetail-label {
  color: #94a3b8;
}

.sdetail-val {
  color: #f1f5f9;
  font-weight: 600;
  text-align: right;
  word-break: break-all;
}

.sdetail-val.status-down {
  color: #f87171;
  font-weight: 800;
}

.sdetail-val.highlight {
  color: #fde047;
}

.sdetail-val.status-saved {
  color: #4ade80 !important;
  font-weight: 700 !important;
  text-shadow: 0 0 8px rgba(74, 222, 128, 0.4);
}

.sdetail-val.mail {
  color: #60a5fa;
}

.shutdown-note {
  color: #cbd5e1;
  font-size: 0.82em;
  line-height: 1.5;
  margin: 0 0 1.6em;
}

.shutdown-actions {
  display: flex;
  gap: 1em;
  justify-content: center;
}

/* Shutdown Onay Modalı */
.shutdown-confirm-overlay {
  position: fixed;
  inset: 0;
  z-index: 999998;
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5em;
  animation: fadeIn 0.25s ease-out;
}

.shutdown-confirm-card {
  max-width: 520px;
  width: 100%;
  background: rgba(18, 6, 12, 0.96);
  border: 2px solid #ef4444;
  border-radius: 1em;
  padding: 1.8em;
  box-shadow: 0 0 30px rgba(239, 68, 68, 0.5);
}

.sc-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.8em;
}

.sc-head h3 {
  color: #f87171;
  margin: 0;
  font-size: 1.25em;
  font-family: var(--font);
}

.sc-lead {
  color: #f1f5f9;
  font-size: 0.95em;
  margin: 0 0 1em;
}

.sc-info-box {
  background: rgba(239, 68, 68, 0.12);
  border-left: 3px solid #ef4444;
  padding: 0.8em 1em;
  border-radius: 0.4em;
  margin-bottom: 1.2em;
  font-size: 0.85em;
  line-height: 1.5;
  color: #fca5a5;
}

.sc-info-box p {
  margin: 0.2em 0;
}

.sc-field {
  display: flex;
  flex-direction: column;
  gap: 0.4em;
  margin-bottom: 1.4em;
  text-align: left;
}

.sc-field label {
  font-size: 0.82em;
  color: #cbd5e1;
  font-weight: 700;
}

.sc-field input {
  background: rgba(0, 0, 0, 0.6);
  border: 1px solid rgba(239, 68, 68, 0.4);
  color: #fff;
  padding: 0.65em 0.85em;
  border-radius: 0.4em;
  font-family: var(--font);
  font-size: 0.9em;
}

.sc-field input:focus {
  border-color: #ef4444;
  outline: none;
  box-shadow: 0 0 10px rgba(239, 68, 68, 0.4);
}

.sc-actions {
  display: flex;
  gap: 0.8em;
  justify-content: flex-end;
}

/* 5 Saniyelik Acil Durum Geri Sayım Bannerı */
.shutdown-countdown-banner {
  position: fixed;
  top: 1.5em;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999999;
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.96), rgba(153, 27, 27, 0.98));
  border: 2px solid #fff;
  box-shadow: 0 0 35px rgba(239, 68, 68, 0.9), 0 0 15px #000;
  border-radius: 1em;
  padding: 0.9em 1.6em;
  display: flex;
  align-items: center;
  gap: 1em;
  max-width: 90vw;
  animation: countdownPulse 0.8s ease-in-out infinite alternate;
}

.sc-content {
  display: flex;
  align-items: center;
  gap: 1em;
}

.sc-icon {
  font-size: 2.2em;
  animation: bounce 0.6s infinite alternate;
}

.sc-text {
  display: flex;
  flex-direction: column;
  text-align: left;
}

.sc-title {
  color: #fff;
  font-size: 1.15em;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-shadow: 0 0 8px rgba(0, 0, 0, 0.8);
}

.sc-desc {
  color: #fee2e2;
  font-size: 0.85em;
  font-weight: 600;
}

.sc-timer-box {
  background: #000;
  color: #f87171;
  font-size: 2.2em;
  font-weight: 900;
  min-width: 1.6em;
  height: 1.6em;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.3em;
  border: 2px solid #f87171;
  box-shadow: 0 0 15px rgba(248, 113, 113, 0.8);
  font-family: monospace;
}

@keyframes countdownPulse {
  0% {
    transform: translateX(-50%) scale(1);
    box-shadow: 0 0 25px rgba(239, 68, 68, 0.7);
  }

  100% {
    transform: translateX(-50%) scale(1.03);
    box-shadow: 0 0 45px rgba(239, 68, 68, 1);
  }
}

/* =========================================================
   GENEL LİDERLİK TABLOSU (TOP 50 JUJUTSU SİCİLİ)
   ========================================================= */
#leaderboard-modal {
  z-index: 54;
  background: rgba(6, 3, 10, 0.94);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.leaderboard-modal-card {
  width: 96%;
  max-width: 66em;
  max-height: 94%;
  height: 94%;
  display: flex;
  flex-direction: column;
  padding: 0.9em 1.3em 0.7em;
  background: radial-gradient(circle at top, rgba(28, 12, 42, 0.98), rgba(9, 4, 15, 0.98));
  border: 0.15em solid rgba(240, 201, 110, 0.5);
  box-shadow: 0 0 0 0.15em #000, 0 1.5em 4em rgba(0, 0, 0, 0.95), inset 0 0 2.5em rgba(240, 201, 110, 0.08);
  border-radius: 0.85em;
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
}

.leaderboard-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  border-bottom: 0.08em solid rgba(240, 201, 110, 0.25);
  padding-bottom: 0.45em;
  margin-bottom: 0.55em;
  flex-shrink: 0;
}

.leaderboard-kicker {
  font-size: 0.72em;
  letter-spacing: 0.16em;
  color: #f0c96e;
  font-weight: 700;
  text-transform: uppercase;
}

.leaderboard-header h2 {
  margin: 0.1em 0 0;
  font-size: 1.3em;
  color: #fff;
  text-shadow: 0 0 12px rgba(240, 201, 110, 0.4);
}

.leaderboard-sub {
  font-size: 0.76em;
  color: var(--muted, #94a3b8);
  margin: 0.12em 0 0;
}

/* Liderlik Arama & Filtreler */
.leaderboard-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5em;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.55em;
  flex-shrink: 0;
}

.leaderboard-search-box {
  position: relative;
  flex: 1;
  min-width: 170px;
}

.leaderboard-search-box input {
  width: 100%;
  padding: 0.45em 2em 0.45em 2.2em;
  background: rgba(0, 0, 0, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 0.45em;
  color: #fff;
  font-size: 0.82em;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
  box-sizing: border-box;
}

.leaderboard-search-box input:focus {
  border-color: #f0c96e;
  box-shadow: 0 0 10px rgba(240, 201, 110, 0.3);
}

.leaderboard-search-box .search-icon {
  position: absolute;
  left: 0.75em;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.85em;
  opacity: 0.6;
}

.leaderboard-tabs {
  display: flex;
  gap: 0.35em;
  flex-wrap: wrap;
}

.lb-tab-btn {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #cbd5e1;
  padding: 0.35em 0.75em;
  border-radius: 0.35em;
  font-size: 0.76em;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

.lb-tab-btn:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}

.lb-tab-btn.active {
  background: linear-gradient(135deg, #f0c96e, #d4a737);
  color: #0b0512;
  border-color: #f0c96e;
  box-shadow: 0 0 10px rgba(240, 201, 110, 0.4);
}

/* TOP 3 PODYUM (1. Altın, 2. Gümüş, 3. Bronz) */
.leaderboard-podium-wrap {
  margin-bottom: 0.55em;
  flex-shrink: 0;
}

.leaderboard-podium-grid {
  display: grid;
  grid-template-columns: 1fr 1.15fr 1fr;
  gap: 0.5em;
  align-items: flex-end;
}

.podium-pedestal-card {
  position: relative;
  background: rgba(18, 8, 28, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 0.6em;
  padding: 0.35em 0.5em 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  overflow: hidden;
  transition: transform 0.2s, box-shadow 0.2s;
}

.podium-pedestal-card:hover {
  transform: translateY(-2px);
}

.podium-crown-badge {
  font-size: 1.1em;
  margin-bottom: 0.1em;
  filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.6));
}

.podium-avatar-wrap {
  position: relative;
  width: 2.7em;
  height: 2.7em;
  border-radius: 0.35em;
  background: #000;
  border: 1.5px solid #fff;
  overflow: hidden;
  margin-bottom: 0.25em;
}

.podium-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.podium-rank-pill {
  position: absolute;
  bottom: 0;
  right: 0;
  padding: 0.1em 0.35em;
  font-size: 0.65em;
  font-weight: 900;
  border-top-left-radius: 0.35em;
  background: #000;
  color: #fff;
}

.podium-info {
  display: flex;
  flex-direction: column;
  gap: 0.05em;
  margin-bottom: 0.3em;
  width: 100%;
}

.podium-name {
  font-size: 0.78em;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.podium-title {
  font-size: 0.65em;
  color: #94a3b8;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.podium-power {
  font-size: 0.74em;
  color: #f0c96e;
  margin-top: 0.05em;
}

.podium-club {
  font-size: 0.62em;
  color: #38bdf8;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.podium-pedestal-block {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0.25em 0;
  font-weight: 900;
}

.pedestal-rank-num {
  font-size: 1.05em;
}

.pedestal-medal-tag {
  font-size: 0.58em;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Podyum Renkleri */
.podium-gold {
  border-color: rgba(240, 201, 110, 0.6);
  background: radial-gradient(circle at top, rgba(55, 36, 12, 0.6), rgba(18, 8, 28, 0.85));
  box-shadow: 0 0 20px rgba(240, 201, 110, 0.25);
  transform: scale(1.03);
}

.podium-gold .podium-avatar-wrap {
  border-color: #f0c96e;
  box-shadow: 0 0 12px rgba(240, 201, 110, 0.5);
}

.podium-gold .podium-pedestal-block {
  background: linear-gradient(180deg, rgba(240, 201, 110, 0.35), rgba(160, 118, 23, 0.5));
  color: #f0c96e;
}

.podium-silver {
  border-color: rgba(203, 213, 225, 0.5);
  background: radial-gradient(circle at top, rgba(30, 41, 59, 0.6), rgba(18, 8, 28, 0.85));
  box-shadow: 0 0 12px rgba(203, 213, 225, 0.15);
}

.podium-silver .podium-avatar-wrap {
  border-color: #cbd5e1;
  box-shadow: 0 0 8px rgba(203, 213, 225, 0.4);
}

.podium-silver .podium-pedestal-block {
  background: linear-gradient(180deg, rgba(203, 213, 225, 0.25), rgba(100, 116, 139, 0.4));
  color: #cbd5e1;
}

.podium-bronze {
  border-color: rgba(217, 119, 6, 0.5);
  background: radial-gradient(circle at top, rgba(48, 26, 12, 0.6), rgba(18, 8, 28, 0.85));
  box-shadow: 0 0 12px rgba(217, 119, 6, 0.15);
}

.podium-bronze .podium-avatar-wrap {
  border-color: #d97706;
  box-shadow: 0 0 8px rgba(217, 119, 6, 0.4);
}

.podium-bronze .podium-pedestal-block {
  background: linear-gradient(180deg, rgba(217, 119, 6, 0.25), rgba(146, 64, 14, 0.4));
  color: #fbbf24;
}

/* Liderlik Listesi Kaydırma Alanı */
.leaderboard-list-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  padding-right: 0.35em;
  display: flex;
  flex-direction: column;
  gap: 0.35em;
  scrollbar-width: thin;
  scrollbar-color: rgba(240, 201, 110, 0.5) rgba(0, 0, 0, 0.35);
}

.leaderboard-list-scroll::-webkit-scrollbar {
  width: 0.55em;
}

.leaderboard-list-scroll::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.4);
  border-radius: 0.3em;
}

.leaderboard-list-scroll::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--gold), #8e581c);
  border-radius: 0.3em;
}

.lb-row-card {
  display: grid;
  grid-template-columns: 2.8em 2.5em 1fr auto;
  align-items: center;
  gap: 0.6em;
  background: rgba(22, 10, 32, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 0.5em;
  padding: 0.35em 0.7em;
  transition: all 0.15s ease;
}

.lb-row-card:hover {
  background: rgba(35, 16, 52, 0.85);
  border-color: rgba(255, 255, 255, 0.18);
  transform: translateX(2px);
}

.lb-row-card.is-me-highlight {
  border-color: #38bdf8;
  background: linear-gradient(135deg, rgba(14, 52, 75, 0.7), rgba(22, 10, 32, 0.85));
  box-shadow: 0 0 15px rgba(56, 189, 248, 0.25);
}

.lb-rank-num {
  font-size: 0.88em;
  font-weight: 900;
  color: #94a3b8;
  text-align: center;
}

.lb-rank-num.gold {
  color: #f0c96e;
  font-size: 1em;
  text-shadow: 0 0 8px rgba(240, 201, 110, 0.6);
}

.lb-rank-num.silver {
  color: #e2e8f0;
  font-size: 0.95em;
  text-shadow: 0 0 6px rgba(226, 232, 240, 0.5);
}

.lb-rank-num.bronze {
  color: #f59e0b;
  font-size: 0.95em;
}

.lb-avatar-col {
  position: relative;
  width: 2.5em;
  height: 2.5em;
  border-radius: 0.35em;
  overflow: hidden;
  border: 1.5px solid rgba(255, 255, 255, 0.15);
  background: #000;
}

.lb-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.lb-online-dot {
  position: absolute;
  bottom: 2px;
  right: 2px;
  width: 7px;
  height: 7px;
  background: #22c55e;
  border: 1.5px solid #000;
  border-radius: 50%;
  box-shadow: 0 0 5px #22c55e;
}

.lb-player-col {
  display: flex;
  flex-direction: column;
  gap: 0.1em;
  min-width: 0;
}

.lb-name-row {
  display: flex;
  align-items: center;
  gap: 0.4em;
  flex-wrap: wrap;
}

.lb-player-name {
  font-weight: 700;
  color: #fff;
  font-size: 0.85em;
}

.lb-me-tag {
  background: #0284c7;
  color: #fff;
  font-size: 0.65em;
  font-weight: 900;
  padding: 0.08em 0.35em;
  border-radius: 0.25em;
  letter-spacing: 0.05em;
}

.lb-country-tag {
  font-size: 0.68em;
  color: #94a3b8;
}

.lb-sub-row {
  display: flex;
  align-items: center;
  gap: 0.5em;
  font-size: 0.72em;
}

.lb-title-badge {
  color: #f0c96e;
}

.lb-club-name {
  color: #38bdf8;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lb-stats-col {
  display: flex;
  gap: 1em;
  align-items: center;
}

.lb-stat-cell {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.lb-stat-label {
  font-size: 0.6em;
  color: #64748b;
  font-weight: 700;
  letter-spacing: 0.05em;
}

.lb-stat-val {
  font-size: 0.82em;
  font-weight: 800;
}

.lb-stat-val.level {
  color: #38bdf8;
}

.lb-stat-val.power {
  color: #f0c96e;
}

/* Senin Sıralaman Alt Çubuğu */
.leaderboard-my-rank-banner {
  flex-shrink: 0;
  margin-top: 0.45em;
  padding: 0.4em 0.8em;
  background: linear-gradient(135deg, rgba(28, 18, 48, 0.9), rgba(15, 23, 42, 0.9));
  border: 1px solid rgba(56, 189, 248, 0.4);
  border-radius: 0.5em;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 0 15px rgba(56, 189, 248, 0.15);
}

.my-rank-content {
  display: flex;
  align-items: center;
  gap: 0.6em;
}

.my-rank-trophy {
  font-size: 1.3em;
}

.my-rank-text b {
  color: #fff;
  font-size: 0.82em;
}

.my-rank-text p {
  margin: 0.05em 0 0;
  font-size: 0.72em;
  color: #94a3b8;
}

.rank-highlight {
  color: #f0c96e;
  font-weight: 900;
  font-size: 1.05em;
}

.leaderboard-footer {
  margin-top: 0.45em;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  flex-shrink: 0;
}

@media (max-width: 640px) {
  .leaderboard-podium-grid {
    grid-template-columns: 1fr 1.15fr 1fr;
    gap: 0.3em;
  }

  .podium-pedestal-card {
    padding: 0.25em 0.35em 0;
  }

  .podium-avatar-wrap {
    width: 2.2em;
    height: 2.2em;
  }

  .podium-name {
    font-size: 0.7em;
  }

  .podium-power {
    font-size: 0.65em;
  }

  .lb-row-card {
    grid-template-columns: 2.2em 2.2em 1fr auto;
    gap: 0.45em;
    padding: 0.3em 0.5em;
  }

  .lb-avatar-col {
    width: 2.1em;
    height: 2.1em;
  }
}

/* =========================================================
   CANLI SUNUCU & WI-FI HIZI GÖSTERGESİ (LOBBY HUD)
   ========================================================= */
.lobby-server-hud {
  display: inline-flex;
  align-items: center;
  gap: 0.65em;
  background: rgba(12, 7, 24, 0.85);
  border: 1.5px solid rgba(56, 189, 248, 0.4);
  border-radius: 2em;
  padding: 0.4em 1em;
  margin: 0.4em 0 0.8em;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.55), inset 0 0 14px rgba(56, 189, 248, 0.15);
  cursor: pointer;
  transition: all 0.22s ease;
  user-select: none;
  font-size: 0.85em;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.lobby-server-hud:hover {
  background: rgba(20, 10, 36, 0.95);
  border-color: #38bdf8;
  box-shadow: 0 6px 24px rgba(56, 189, 248, 0.45), inset 0 0 18px rgba(56, 189, 248, 0.25);
  transform: translateY(-2px);
}

.server-hud-country {
  display: flex;
  align-items: center;
  gap: 0.35em;
  font-weight: 700;
  color: #f8fafc;
}

.server-hud-divider {
  color: rgba(255, 255, 255, 0.25);
  font-weight: 300;
}

.server-hud-region {
  display: flex;
  align-items: center;
  gap: 0.4em;
  color: #cbd5e1;
}

.hud-server-name {
  font-weight: 600;
}

.hud-ping-badge {
  font-size: 0.78em;
  font-weight: 800;
  padding: 0.2em 0.6em;
  border-radius: 1em;
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid currentColor;
  letter-spacing: 0.04em;
  transition: all 0.2s ease;
}

.hud-ping-badge.good {
  color: #34d399;
  border-color: rgba(52, 211, 153, 0.6);
  background: rgba(16, 185, 129, 0.15);
  box-shadow: 0 0 10px rgba(52, 211, 153, 0.35);
}

.lobby-user-country-tag {
  font-size: 0.78em;
  color: #94a3b8;
  margin: 0.2em 0 0.35em;
  display: flex;
  align-items: center;
  gap: 0.4em;
}

.lobby-user-country-tag b {
  color: #e2e8f0;
}

/* =========================================================
   BÖLGESEL SUNUCULAR VE WI-FI MODALI (#server-modal)
   ========================================================= */
#server-modal {
  z-index: 54;
  background: rgba(6, 3, 10, 0.94);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.server-modal-card {
  width: 96%;
  max-width: 64em;
  max-height: 94%;
  height: 94%;
  display: flex;
  flex-direction: column;
  padding: 1em 1.4em 0.8em;
  background: radial-gradient(circle at top, rgba(24, 10, 36, 0.98), rgba(8, 4, 14, 0.98));
  border: 0.15em solid rgba(56, 189, 248, 0.5);
  box-shadow: 0 0 0 0.15em #000, 0 1.5em 4em rgba(0, 0, 0, 0.95), inset 0 0 2.5em rgba(56, 189, 248, 0.08);
  border-radius: 0.85em;
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
}

.server-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  padding-bottom: 0.6em;
  margin-bottom: 0.8em;
  flex-shrink: 0;
}

.server-modal-kicker {
  font-size: 0.74em;
  letter-spacing: 0.18em;
  color: #38bdf8;
  font-weight: 700;
  text-transform: uppercase;
}

.server-modal-header h2 {
  margin: 0.15em 0 0;
  font-size: 1.4em;
  color: #fff;
  text-shadow: 0 0 12px rgba(56, 189, 248, 0.4);
}

.server-modal-sub {
  font-size: 0.82em;
  color: var(--muted, #94a3b8);
  margin: 0.2em 0 0;
}

/* Kullanıcı Konum ve Öneri Kartı */
.server-user-location-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1em;
  background: linear-gradient(135deg, rgba(14, 52, 75, 0.4), rgba(22, 10, 32, 0.6));
  border: 1px solid rgba(56, 189, 248, 0.25);
  border-radius: 0.6em;
  padding: 0.65em 1em;
  margin-bottom: 1em;
  flex-shrink: 0;
}

.user-loc-details {
  display: flex;
  align-items: center;
  gap: 0.7em;
}

.user-loc-details .loc-pin {
  font-size: 1.6em;
}

.user-loc-details b {
  color: #fff;
  font-size: 0.92em;
}

.user-loc-details p {
  margin: 0.15em 0 0;
  font-size: 0.78em;
  color: #94a3b8;
}

.user-loc-details .highlight {
  color: #38bdf8;
}

.server-cards-grid {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 0.65em;
  padding-right: 0.3em;
  scrollbar-width: thin;
  scrollbar-color: rgba(56, 189, 248, 0.5) rgba(0, 0, 0, 0.35);
}

.server-cards-grid::-webkit-scrollbar {
  width: 0.55em;
}

.server-cards-grid::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.4);
  border-radius: 0.3em;
}

.server-cards-grid::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #38bdf8, #0284c7);
  border-radius: 0.3em;
}

.server-grid-card {
  background: rgba(18, 8, 28, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 0.75em;
  padding: 0.85em;
  display: flex;
  flex-direction: column;
  gap: 0.6em;
  transition: all 0.2s ease;
  position: relative;
  overflow: hidden;
}

.server-grid-card:hover {
  background: rgba(30, 14, 46, 0.9);
  border-color: rgba(56, 189, 248, 0.4);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}

.server-grid-card.active {
  border-color: #38bdf8;
  background: linear-gradient(145deg, rgba(14, 42, 62, 0.85), rgba(20, 9, 32, 0.9));
  box-shadow: 0 0 20px rgba(56, 189, 248, 0.25);
}

.server-grid-card.is-best {
  border-left: 3px solid #22c55e;
}

.server-card-top {
  display: flex;
  align-items: center;
  gap: 0.6em;
  position: relative;
}

.server-flag {
  font-size: 1.8em;
  line-height: 1;
}

.server-names {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.server-title {
  color: #fff;
  font-size: 0.95em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.server-city {
  color: #94a3b8;
  font-size: 0.74em;
}

.server-region-code {
  color: #38bdf8;
  font-size: 0.68em;
  font-family: monospace;
}

.badge-fastest {
  position: absolute;
  top: 0;
  right: 0;
  background: #22c55e;
  color: #042f0e;
  font-size: 0.62em;
  font-weight: 900;
  padding: 0.15em 0.5em;
  border-radius: 1em;
  letter-spacing: 0.05em;
}

.badge-connected {
  position: absolute;
  top: 0;
  right: 0;
  background: #0284c7;
  color: #fff;
  font-size: 0.62em;
  font-weight: 900;
  padding: 0.15em 0.5em;
  border-radius: 1em;
}

.server-card-stats {
  display: flex;
  flex-direction: column;
  gap: 0.3em;
  background: rgba(0, 0, 0, 0.35);
  border-radius: 0.5em;
  padding: 0.5em 0.65em;
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.stat-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.74em;
}

.stat-label {
  color: #94a3b8;
}

.stat-val {
  color: #e2e8f0;
  font-weight: 600;
}

.stat-val.ping-val {
  font-size: 0.92em;
  font-family: monospace;
}

.server-card-specs {
  font-size: 0.7em;
  color: #64748b;
  border-top: 1px dashed rgba(255, 255, 255, 0.08);
  padding-top: 0.4em;
}

.server-card-action {
  margin-top: auto;
}

.btn-server-connect {
  width: 100%;
  padding: 0.45em 0.8em;
  font-size: 0.82em;
}

.server-modal-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1em;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: 0.8em;
  margin-top: 0.8em;
  flex-shrink: 0;
}

.server-modal-hint {
  font-size: 0.72em;
  color: #64748b;
}

@media (max-width: 640px) {
  .server-cards-grid {
    grid-template-columns: 1fr;
  }

  .server-user-location-info {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* =========================================================
   PIXEL AI ASİSTANI & SORU SORMA MODALI (Özel Yetkili Paneli)
   ========================================================= */
.pixelai-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 999997;
  background: rgba(4, 5, 12, 0.88);
  backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.2em;
  animation: fadeIn 0.25s ease-out;
}

.pixelai-modal-card {
  max-width: 680px;
  width: 100%;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  background: rgba(14, 12, 26, 0.96);
  border: 2px solid #a855f7;
  border-radius: 1em;
  padding: 1.5em;
  box-shadow: 0 0 35px rgba(168, 85, 247, 0.4), inset 0 0 20px rgba(0, 0, 0, 0.6);
  overflow: hidden;
}

.pai-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1em;
  border-bottom: 1px solid rgba(168, 85, 247, 0.25);
  padding-bottom: 0.8em;
}

.pai-title-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
}

.pai-icon {
  font-size: 1.8em;
  filter: drop-shadow(0 0 8px #d946ef);
}

.pai-head h3 {
  color: #f3e8ff;
  margin: 0;
  font-size: 1.15em;
  font-family: var(--font, sans-serif);
  letter-spacing: 0.5px;
}

.pai-badge {
  display: inline-block;
  font-size: 0.72em;
  color: #38bdf8;
  background: rgba(56, 189, 248, 0.12);
  border: 1px solid rgba(56, 189, 248, 0.35);
  padding: 2px 7px;
  border-radius: 4px;
  font-family: monospace;
  font-weight: bold;
  margin-top: 3px;
}

.pai-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 1em;
}

.pai-tab-btn {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #cbd5e1;
  padding: 6px 14px;
  border-radius: 6px;
  font-size: 0.85em;
  cursor: pointer;
  transition: all 0.2s;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
}

.pai-tab-btn:hover {
  background: rgba(168, 85, 247, 0.2);
  color: #fff;
  border-color: #a855f7;
}

.pai-tab-btn.active {
  background: linear-gradient(135deg, #9333ea, #db2777);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 0 10px rgba(168, 85, 247, 0.4);
}

.pai-studio-link {
  margin-left: auto;
  background: rgba(56, 189, 248, 0.15);
  border-color: rgba(56, 189, 248, 0.4);
  color: #38bdf8;
}

.pai-studio-link:hover {
  background: rgba(56, 189, 248, 0.3);
  box-shadow: 0 0 12px rgba(56, 189, 248, 0.4);
}

.pai-body {
  flex: 1;
  overflow-y: auto;
  padding-right: 4px;
}

.pai-pane {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.pai-templates-label {
  font-size: 0.78em;
  color: #94a3b8;
  font-weight: 600;
}

.pai-templates-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.pai-chip {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #e2e8f0;
  font-size: 0.75em;
  padding: 4px 10px;
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.15s;
}

.pai-chip:hover {
  background: rgba(168, 85, 247, 0.25);
  border-color: #c084fc;
  color: #fff;
  transform: translateY(-1px);
}

.pai-input-wrap {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 10px;
}

.pai-input-wrap textarea {
  width: 100%;
  height: 75px;
  background: transparent;
  border: none;
  outline: none;
  color: #fff;
  font-family: inherit;
  font-size: 0.9em;
  resize: vertical;
  line-height: 1.45;
}

.pai-input-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  padding-top: 8px;
}

.pai-status {
  font-size: 0.75em;
  color: #64748b;
  font-family: monospace;
}

.btn-pai-send {
  background: linear-gradient(135deg, #a855f7, #ec4899);
  color: #fff;
  border: none;
  padding: 6px 16px;
  border-radius: 6px;
  font-size: 0.85em;
  font-weight: bold;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: transform 0.15s, box-shadow 0.15s;
}

.btn-pai-send:hover {
  transform: translateY(-1px);
  box-shadow: 0 0 12px rgba(236, 72, 153, 0.5);
}

.pai-response-box {
  background: rgba(8, 8, 16, 0.75);
  border: 1px solid rgba(168, 85, 247, 0.35);
  border-radius: 8px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 120px;
}

.pai-response-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.8em;
  color: #c084fc;
  font-weight: bold;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  padding-bottom: 6px;
}

.btn-mini-copy {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #94a3b8;
  font-size: 0.75em;
  padding: 2px 8px;
  border-radius: 4px;
  cursor: pointer;
}

.btn-mini-copy:hover {
  color: #fff;
  border-color: #38bdf8;
}

.pai-response-content {
  font-size: 0.88em;
  line-height: 1.55;
  color: #e2e8f0;
  white-space: pre-wrap;
  max-height: 220px;
  overflow-y: auto;
}

.pai-gen-row {
  display: flex;
  gap: 8px;
}

.pai-gen-row input {
  flex: 1;
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 6px;
  color: #fff;
  padding: 8px 12px;
  font-size: 0.88em;
}

.pai-quick-preview-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 180px;
  background: #08080f;
  border: 1px dashed rgba(168, 85, 247, 0.4);
  border-radius: 8px;
  padding: 16px;
  gap: 10px;
}

.pai-quick-preview-box canvas {
  width: 128px;
  height: 128px;
  image-rendering: pixelated;
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.8);
}

.pai-quick-desc {
  font-size: 0.78em;
  color: #64748b;
}

.pai-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: 0.8em;
  margin-top: 0.8em;
}

.pai-auth-note {
  font-size: 0.72em;
  color: #38bdf8;
}

/* AI Drag Picture Modu (Tam Aynısı / 1:1 Pixel Clone) */
.pai-dropzone-area {
  border: 2px dashed rgba(168, 85, 247, 0.5);
  border-radius: 10px;
  background: rgba(168, 85, 247, 0.05);
  padding: 24px 16px;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.pai-dropzone-area:hover,
.pai-dropzone-area.dragover {
  border-color: #38bdf8;
  background: rgba(56, 189, 248, 0.1);
  box-shadow: 0 0 20px rgba(56, 189, 248, 0.35);
  transform: scale(1.01);
}

.pai-drop-icon {
  font-size: 2.2em;
  filter: drop-shadow(0 0 10px rgba(168, 85, 247, 0.6));
}

.pai-drop-title {
  font-size: 0.95em;
  color: #f1f5f9;
}

.pai-drop-sub {
  font-size: 0.75em;
  color: #94a3b8;
}

.pai-drop-badge {
  font-size: 0.72em;
  color: #34d399;
  background: rgba(52, 211, 153, 0.12);
  border: 1px solid rgba(52, 211, 153, 0.3);
  padding: 3px 8px;
  border-radius: 999px;
  margin-top: 4px;
  font-weight: 600;
}

.pai-clone-stage {
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(168, 85, 247, 0.25);
  border-radius: 10px;
  padding: 14px;
  animation: fadeIn 0.2s ease;
}

.pai-clone-split-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
}

.pai-clone-box {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.pai-box-label {
  font-size: 0.75em;
  font-weight: bold;
  color: #c084fc;
}

.pai-img-frame {
  width: 140px;
  height: 140px;
  background: #080912;
  border: 2px solid rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.8);
}

.pai-img-frame img,
.pai-img-frame canvas {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: scale-down;
  image-rendering: pixelated;
}

.pai-clone-arrow {
  font-size: 1.8em;
  color: #38bdf8;
  text-shadow: 0 0 10px rgba(56, 189, 248, 0.6);
}

.pai-clone-controls-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: rgba(255, 255, 255, 0.03);
  padding: 8px 12px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.pai-ctrl-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78em;
  color: #cbd5e1;
}

.select-cyber-mini {
  background: #0b0c16;
  border: 1px solid rgba(168, 85, 247, 0.4);
  color: #fff;
  border-radius: 4px;
  padding: 4px 8px;
  font-size: 0.78em;
  outline: none;
}

.pai-clone-actions-row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 4px;
}

/* =========================================================
   SUKUNA AWAKENING & ROOFTOP CUTSCENE STYLES
   ========================================================= */
.sukuna-cutscene-modal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.sukuna-cutscene-modal.active {
  opacity: 1;
  pointer-events: all;
}

.sukuna-cs-backdrop {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, rgba(30, 4, 18, 0.88) 0%, rgba(5, 2, 8, 0.98) 100%);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.sukuna-cs-flash {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 10005;
  opacity: 0;
  transition: opacity 0.22s ease-out;
}

.sukuna-cs-wrap {
  position: relative;
  z-index: 10002;
  width: min(880px, 94vw);
  background: linear-gradient(180deg, #16081e 0%, #0d0413 100%);
  border: 2px solid rgba(255, 23, 68, 0.55);
  border-radius: 14px;
  box-shadow: 0 0 50px rgba(255, 23, 68, 0.32), 0 25px 70px rgba(0, 0, 0, 0.92);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transform: scale(0.97);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.sukuna-cutscene-modal.active .sukuna-cs-wrap {
  transform: scale(1);
}

.sukuna-cs-wrap.shake-heavy {
  animation: cs-shake 0.45s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}

@keyframes cs-shake {

  10%,
  90% {
    transform: translate3d(-3px, -2px, 0) scale(1.01);
  }

  20%,
  80% {
    transform: translate3d(4px, 3px, 0) scale(1);
  }

  30%,
  50%,
  70% {
    transform: translate3d(-6px, -4px, 0) scale(1.02);
  }

  40%,
  60% {
    transform: translate3d(6px, 4px, 0) scale(1.01);
  }
}

.sukuna-cs-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 18px;
  background: linear-gradient(90deg, rgba(255, 23, 68, 0.22), rgba(30, 8, 38, 0.8));
  border-bottom: 1px solid rgba(255, 23, 68, 0.35);
}

.sukuna-cs-kicker {
  font-family: 'Pixelify Sans', monospace;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: #ff3d6a;
  text-shadow: 0 0 10px rgba(255, 61, 106, 0.6);
}

.sukuna-cs-skip {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: #e2e8f0;
  padding: 4px 12px;
  border-radius: 6px;
  font-family: var(--font-ui);
  font-size: 11px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.sukuna-cs-skip:hover {
  background: rgba(255, 23, 68, 0.4);
  border-color: #ff1744;
  color: #fff;
  box-shadow: 0 0 12px rgba(255, 23, 68, 0.5);
}

.sukuna-cs-viewport {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: 480px;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.sukuna-cs-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: filter 0.3s ease;
}

.sukuna-cs-vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at center, transparent 55%, rgba(10, 2, 14, 0.75) 100%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.5) 0%, transparent 15%, transparent 85%, rgba(0, 0, 0, 0.7) 100%);
}

.sukuna-cs-dialog-box {
  padding: 16px 22px;
  background: linear-gradient(180deg, rgba(22, 7, 28, 0.96) 0%, rgba(12, 3, 16, 0.98) 100%);
  border-top: 1px solid rgba(255, 23, 68, 0.25);
}

.sukuna-cs-text {
  margin: 0;
  font-family: 'Inter', sans-serif;
  font-size: 14.5px;
  line-height: 1.65;
  color: #f3e8ff;
  white-space: pre-line;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9);
  min-height: 48px;
}

.sukuna-cs-prompt-row {
  display: flex;
  justify-content: flex-end;
  margin-top: 10px;
}

.sukuna-cs-prompt {
  font-family: var(--font-ui);
  font-size: 11.5px;
  font-weight: 600;
  color: #ff5277;
  letter-spacing: 0.5px;
  animation: cs-pulse 1.2s infinite alternate;
}

.sukuna-cs-prompt kbd {
  background: rgba(255, 23, 68, 0.25);
  border: 1px solid rgba(255, 23, 68, 0.6);
  color: #fff;
  padding: 1px 6px;
  border-radius: 4px;
  font-family: inherit;
  font-size: 11px;
}

@keyframes cs-pulse {
  from {
    opacity: 0.6;
    transform: translateX(0);
  }

  to {
    opacity: 1;
    transform: translateX(3px);
  }
}

/* =========================================================
       I18N — ÜLKE DİLİ & PROFİL KÖKEN ROZETİ STİLLERİ
       ========================================================= */
.server-hud-lang {
  display: flex;
  align-items: center;
  gap: 0.35em;
  padding: 0.15em 0.55em;
  border-radius: 0.35em;
  background: linear-gradient(135deg, rgba(240, 201, 110, 0.18), rgba(0, 220, 255, 0.15));
  border: 1px solid rgba(240, 201, 110, 0.45);
  cursor: pointer;
  transition: all 0.18s ease;
  color: #ffd700;
  font-weight: 700;
  user-select: none;
}

.server-hud-lang:hover {
  background: linear-gradient(135deg, rgba(240, 201, 110, 0.32), rgba(0, 220, 255, 0.28));
  border-color: #ffd700;
  box-shadow: 0 0 10px rgba(240, 201, 110, 0.45);
  transform: scale(1.05);
}

.player-detail-country-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  font-size: 0.82em;
  font-weight: 700;
  color: #ffd700;
  background: rgba(240, 201, 110, 0.18);
  border: 0.08em solid rgba(240, 201, 110, 0.6);
  padding: 0.15em 0.65em;
  border-radius: 0.35em;
  letter-spacing: 0.02em;
  box-shadow: 0 0 8px rgba(240, 201, 110, 0.25);
}

.player-country-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.25em;
  font-size: 0.76em;
  font-weight: 700;
  color: #ffd700;
  background: rgba(240, 201, 110, 0.14);
  border: 1px solid rgba(240, 201, 110, 0.45);
  border-radius: 4px;
  padding: 1px 7px;
}

.country-dstat-card,
.server-dstat-card {
  border-color: rgba(240, 201, 110, 0.45) !important;
  background: rgba(26, 12, 38, 0.95) !important;
}

/* Ülke Dili Seçim Modalı */
.lang-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(6, 2, 10, 0.94);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5em;
  animation: fadeIn 0.2s ease-out;
}

.lang-modal-card {
  width: 95%;
  max-width: 52em;
  max-height: 92%;
  overflow-y: auto;
  background: linear-gradient(165deg, rgba(28, 12, 38, 0.98), rgba(12, 4, 18, 0.99));
  border: 0.15em solid rgba(240, 201, 110, 0.6);
  box-shadow: 0 0 3em rgba(0, 0, 0, 0.95), inset 0 0 2.5em rgba(240, 201, 110, 0.08);
  border-radius: 0.7em;
  padding: 1.6em 2em 1.4em;
}

.lang-modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  border-bottom: 0.08em solid rgba(240, 201, 110, 0.25);
  padding-bottom: 0.8em;
  margin-bottom: 0.8em;
}

.lang-modal-kicker {
  font-size: 0.78em;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--gold);
}

.lang-modal-title h2 {
  font-size: 1.6em;
  color: #fff;
  margin: 0.1em 0 0.2em;
  text-shadow: 0 0 10px rgba(240, 201, 110, 0.4);
}

.lang-modal-sub {
  font-size: 0.88em;
  color: var(--muted);
  margin: 0;
}

.lang-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(14.8em, 1fr));
  gap: 0.85em;
  margin: 0.8em 0;
  max-height: 52vh;
  overflow-y: auto;
  padding-right: 0.35em;
  scrollbar-width: thin;
  scrollbar-color: rgba(240, 201, 110, 0.4) rgba(25, 12, 38, 0.6);
}

.lang-cards-grid::-webkit-scrollbar {
  width: 6px;
}

.lang-cards-grid::-webkit-scrollbar-track {
  background: rgba(25, 12, 38, 0.6);
  border-radius: 4px;
}

.lang-cards-grid::-webkit-scrollbar-thumb {
  background: rgba(240, 201, 110, 0.5);
  border-radius: 4px;
}

.lang-card {
  display: flex;
  align-items: flex-start;
  gap: 0.85em;
  padding: 0.85em 1em;
  background: rgba(22, 10, 32, 0.85);
  border: 1.5px solid rgba(255, 255, 255, 0.12);
  border-radius: 0.6em;
  cursor: pointer;
  transition: all 0.16s ease;
  user-select: none;
}

.lang-card:hover {
  background: rgba(45, 20, 65, 0.95);
  border-color: #ffd700;
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.6);
}

.lang-card.active {
  background: linear-gradient(135deg, rgba(65, 28, 90, 0.95), rgba(30, 10, 45, 0.98));
  border-color: #ffd700;
  box-shadow: 0 0 16px rgba(240, 201, 110, 0.5);
}

.lang-card-flag {
  font-size: 2.1em;
  line-height: 1;
  flex-shrink: 0;
  margin-top: 0.05em;
}

.lang-card-info {
  flex: 1;
  min-width: 0;
}

.lang-card-native {
  font-size: 0.96em;
  font-weight: 700;
  color: #ffffff;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.45em;
  flex-wrap: wrap;
}

.lang-card-origin {
  display: block;
  font-size: 0.73em;
  color: #dfcefc;
  margin: 0.25em 0 0.2em;
  line-height: 1.35;
  font-weight: 500;
}

.lang-card-name {
  font-size: 0.78em;
  color: var(--muted);
  margin: 0.15em 0;
}

.lang-card-region {
  font-size: 0.7em;
  color: var(--ice);
  font-weight: 600;
}

.lang-card-server-tag {
  font-size: 0.68em;
  color: #7ee787;
  background: rgba(126, 231, 135, 0.14);
  border: 1px solid rgba(126, 231, 135, 0.35);
  padding: 1px 6px;
  border-radius: 4px;
  font-weight: 600;
  white-space: nowrap;
}

.lang-active-check {
  font-size: 0.65em;
  color: #4ee08a;
  background: rgba(78, 224, 138, 0.18);
  border: 1px solid rgba(78, 224, 138, 0.4);
  padding: 1px 6px;
  border-radius: 4px;
  font-weight: 800;
}

/* Arama Çubuğu ve Kıta Sekmeleri */
.lang-modal-search-row {
  display: flex;
  align-items: center;
  gap: 0.75em;
  margin: 0.75em 0 0.5em;
  flex-wrap: wrap;
}

.lang-search-box {
  flex: 1;
  min-width: 14em;
  display: flex;
  align-items: center;
  background: rgba(15, 6, 24, 0.85);
  border: 1px solid rgba(240, 201, 110, 0.3);
  border-radius: 0.5em;
  padding: 0.45em 0.85em;
  gap: 0.5em;
  transition: all 0.2s ease;
}

.lang-search-box:focus-within {
  border-color: #ffd700;
  box-shadow: 0 0 12px rgba(240, 201, 110, 0.35);
  background: rgba(22, 9, 35, 0.95);
}

.lang-search-icon {
  font-size: 0.95em;
  opacity: 0.75;
}

.lang-search-input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: #ffffff;
  font-size: 0.88em;
  font-family: inherit;
}

.lang-search-input::placeholder {
  color: rgba(255, 255, 255, 0.45);
}

.lang-search-clear {
  background: rgba(255, 255, 255, 0.12);
  border: none;
  color: #ffffff;
  cursor: pointer;
  font-size: 0.8em;
  padding: 2px 7px;
  border-radius: 50%;
  line-height: 1;
  transition: background 0.15s;
}

.lang-search-clear:hover {
  background: rgba(255, 80, 80, 0.7);
}

.lang-count-badge {
  font-size: 0.78em;
  font-weight: 700;
  color: var(--gold);
  background: rgba(240, 201, 110, 0.12);
  border: 1px solid rgba(240, 201, 110, 0.25);
  padding: 0.45em 0.85em;
  border-radius: 0.5em;
  white-space: nowrap;
}

.lang-region-tabs {
  display: flex;
  gap: 0.4em;
  overflow-x: auto;
  padding: 0.35em 0.2em 0.65em;
  scrollbar-width: thin;
  scrollbar-color: rgba(240, 201, 110, 0.4) transparent;
}

.lang-region-tab {
  background: rgba(25, 12, 38, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--muted);
  padding: 0.32em 0.75em;
  border-radius: 0.45em;
  font-size: 0.76em;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
  user-select: none;
}

.lang-region-tab:hover {
  color: #fff;
  border-color: rgba(240, 201, 110, 0.45);
  background: rgba(45, 20, 65, 0.85);
}

.lang-region-tab.active {
  color: #120520;
  background: linear-gradient(135deg, #ffd700, #f0c96e);
  border-color: #ffd700;
  font-weight: 800;
  box-shadow: 0 0 10px rgba(240, 201, 110, 0.5);
}

.lang-modal-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 0.08em solid rgba(240, 201, 110, 0.2);
  padding-top: 0.8em;
  margin-top: 0.4em;
  gap: 1em;
  flex-wrap: wrap;
}

.lang-modal-hint {
  font-size: 0.78em;
  color: var(--muted);
  flex: 1;
}

/* Detay Kartı Kıta/Nereden Geldiği Alanı */
.origin-dstat-card {
  border-color: rgba(240, 201, 110, 0.35);
  background: rgba(26, 12, 38, 0.75);
}

.origin-dstat-card #pdetail-origin-val {
  font-size: 0.84em;
  line-height: 1.35;
  color: #ffd700;
  font-weight: 700;
}

/* Çentik (Onaylı Hesap / Doğrulanmış Oyuncu) Rozet Tasarımı */
.user-verified-centik {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 19px;
  height: 19px;
  min-width: 19px;
  background: linear-gradient(135deg, #00f0ff 0%, #0070f3 100%);
  color: #ffffff;
  font-size: 11px;
  font-weight: 900;
  border-radius: 50%;
  margin-left: 5px;
  border: 1.5px solid #ffffff;
  box-shadow: 0 0 10px rgba(0, 240, 255, 0.7), inset 0 0 4px rgba(255, 255, 255, 0.8);
  vertical-align: middle;
  cursor: pointer;
  line-height: 1;
  animation: centikPulse 2.4s infinite ease-in-out;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.user-verified-centik:hover {
  transform: scale(1.18) rotate(5deg);
  box-shadow: 0 0 16px rgba(0, 240, 255, 0.95), inset 0 0 6px #fff;
}

@keyframes centikPulse {
  0% {
    box-shadow: 0 0 6px rgba(0, 240, 255, 0.5), inset 0 0 2px rgba(255, 255, 255, 0.6);
  }

  50% {
    box-shadow: 0 0 14px rgba(0, 240, 255, 0.9), inset 0 0 5px rgba(255, 255, 255, 0.9);
  }

  100% {
    box-shadow: 0 0 6px rgba(0, 240, 255, 0.5), inset 0 0 2px rgba(255, 255, 255, 0.6);
  }
}

.lobby-user-centik-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(0, 240, 255, 0.1);
  border: 1px solid rgba(0, 240, 255, 0.4);
  border-radius: 20px;
  padding: 3px 10px;
  margin: 4px 0 6px 0;
  font-size: 11px;
  color: #7fe3ff;
  font-weight: 600;
  width: fit-content;
}

.lobby-user-centik-badge .centik-label {
  letter-spacing: 0.3px;
}

/* Lobi Telefon Doğrulama Alanı & Butonları */
.lobby-phone-verify-container {
  margin: 4px 0 6px 0;
}

.lobby-phone-unverified-badge {
  display: inline-flex;
  flex-direction: column;
  gap: 5px;
}

.btn-lobby-verify-phone {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  font-family: 'Inter', -apple-system, sans-serif;
  font-size: 11.5px;
  font-weight: 700;
  color: #38bdf8;
  background: linear-gradient(135deg, rgba(14, 165, 233, 0.22), rgba(59, 130, 246, 0.3));
  border: 1.5px solid rgba(56, 189, 248, 0.65);
  border-radius: 8px;
  cursor: pointer;
  box-shadow: 0 0 12px rgba(56, 189, 248, 0.3);
  transition: all 0.2s ease;
  white-space: nowrap;
}

.btn-lobby-verify-phone:hover {
  background: linear-gradient(135deg, rgba(14, 165, 233, 0.35), rgba(59, 130, 246, 0.45));
  border-color: #38bdf8;
  box-shadow: 0 0 16px rgba(56, 189, 248, 0.55);
  transform: translateY(-1px);
  color: #fff;
}

.btn-action-phone-verify {
  background: rgba(14, 165, 233, 0.15);
  border: 1px solid rgba(56, 189, 248, 0.45);
  color: #38bdf8;
  border-radius: 7px;
  font-size: 11.5px;
  font-weight: 700;
  padding: 4px 10px;
  cursor: pointer;
  transition: all 0.18s ease;
}

.btn-action-phone-verify:hover {
  background: rgba(14, 165, 233, 0.3);
  border-color: #38bdf8;
  color: #fff;
}

.btn-action-phone-verify.verified {
  background: rgba(16, 185, 129, 0.15);
  border-color: rgba(16, 185, 129, 0.45);
  color: #34d399;
  cursor: default;
}

.pulse-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #38bdf8;
  box-shadow: 0 0 8px #38bdf8;
  display: inline-block;
  animation: pulseDot 1.4s infinite;
}

@keyframes pulseDot {

  0%,
  100% {
    opacity: 0.4;
    transform: scale(0.85);
  }

  50% {
    opacity: 1;
    transform: scale(1.25);
  }
}

/* Lobi Telefon Doğrulama Modalı */
.lobby-phone-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(6, 3, 12, 0.88);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  padding: 16px;
}

.lobby-phone-modal-card {
  position: relative;
  width: 100%;
  max-width: 480px;
  background: linear-gradient(145deg, rgba(20, 10, 32, 0.96), rgba(12, 6, 20, 0.98));
  border: 1.5px solid rgba(56, 189, 248, 0.45);
  border-radius: 16px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.8), 0 0 25px rgba(56, 189, 248, 0.25);
  padding: 26px 24px;
  color: #f3f4f6;
  box-sizing: border-box;
  animation: lpModalPop 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes lpModalPop {
  0% {
    opacity: 0;
    transform: scale(0.92);
  }

  100% {
    opacity: 1;
    transform: scale(1);
  }
}

.lp-modal-header {
  text-align: center;
  margin-bottom: 20px;
}

.lp-modal-icon-badge {
  font-size: 34px;
  margin-bottom: 8px;
}

.lp-modal-title {
  font-family: 'Cinzel', serif;
  font-size: 20px;
  color: #fff;
  margin: 0 0 6px 0;
  letter-spacing: 0.5px;
}

.lp-modal-subtitle {
  font-size: 13px;
  color: rgba(229, 231, 235, 0.8);
  margin: 0;
  line-height: 1.45;
}

.lp-gold {
  color: #38bdf8;
  text-shadow: 0 0 8px rgba(56, 189, 248, 0.5);
}

.lp-modal-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.lp-modal-footer {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}

/* =========================================================
   BÖLÜMLER MODALI: SEVİYE 100 BAR, XP, COINS, PP VE GRINDING
   ========================================================= */
.ch-player-bar {
  background: linear-gradient(135deg, rgba(20, 10, 35, 0.95), rgba(12, 6, 22, 0.95));
  border: 1.5px solid rgba(240, 201, 110, 0.35);
  border-radius: 12px;
  padding: 12px 14px;
  margin-bottom: 14px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5), inset 0 0 12px rgba(240, 201, 110, 0.08);
}

.ch-p-stats-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}

.ch-p-level-badge {
  display: flex;
  flex-direction: column;
}

.ch-p-badge-label {
  font-size: 10px;
  color: #9ca3af;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.ch-p-badge-val {
  font-size: 16px;
  font-weight: 900;
  color: #ffd166;
  text-shadow: 0 0 10px rgba(255, 209, 102, 0.5);
}

.ch-p-badge-val small {
  font-size: 11px;
  color: #94a3b8;
  font-weight: 500;
}

.ch-p-currencies {
  display: flex;
  gap: 10px;
}

.currency-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 700;
}

.currency-chip.coins {
  background: rgba(251, 191, 36, 0.15);
  border: 1px solid rgba(251, 191, 36, 0.5);
  color: #fbbf24;
  box-shadow: 0 0 10px rgba(251, 191, 36, 0.2);
}

.currency-chip.pp {
  background: rgba(56, 189, 248, 0.15);
  border: 1px solid rgba(56, 189, 248, 0.5);
  color: #38bdf8;
  box-shadow: 0 0 10px rgba(56, 189, 248, 0.2);
}

.ch-xp-progress-wrap {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ch-xp-labels {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: #cbd5e1;
  font-weight: 600;
}

.ch-xp-track {
  width: 100%;
  height: 9px;
  background: rgba(0, 0, 0, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 6px;
  overflow: hidden;
  position: relative;
}

.ch-xp-fill {
  height: 100%;
  background: linear-gradient(90deg, #38bdf8, #818cf8, #ffd166);
  border-radius: 6px;
  transition: width 0.4s ease;
  box-shadow: 0 0 10px rgba(56, 189, 248, 0.6);
}

.ch-grind-hint {
  margin-top: 8px;
  padding: 6px 8px;
  background: rgba(56, 189, 248, 0.08);
  border-left: 3px solid #38bdf8;
  border-radius: 4px;
  font-size: 11px;
  color: #94a3b8;
  line-height: 1.35;
}

.ch-level-pill {
  display: inline-block;
  font-size: 9.5px;
  padding: 1px 6px;
  border-radius: 4px;
  margin-left: 6px;
  font-weight: 700;
}

.ch-level-pill.met {
  background: rgba(16, 185, 129, 0.2);
  color: #34d399;
  border: 1px solid rgba(16, 185, 129, 0.4);
}

.ch-level-pill.unmet {
  background: rgba(239, 68, 68, 0.2);
  color: #f87171;
  border: 1px solid rgba(239, 68, 68, 0.4);
}

/* =========================================================
   SONUÇ EKRANI: ÖDÜLLER KARTI & KİLİT AÇILMA KUTLAMASI
   ========================================================= */
.res-unlock-card {
  display: flex;
  align-items: center;
  gap: 12px;
  background: linear-gradient(135deg, rgba(234, 179, 8, 0.25), rgba(168, 85, 247, 0.25));
  border: 1.8px solid #ffd166;
  border-radius: 12px;
  padding: 10px 14px;
  margin: 12px 0;
  box-shadow: 0 0 20px rgba(255, 209, 102, 0.4);
  animation: unlockCardPulse 1.8s infinite alternate;
}

@keyframes unlockCardPulse {
  0% {
    transform: scale(0.99);
    box-shadow: 0 0 14px rgba(255, 209, 102, 0.3);
  }

  100% {
    transform: scale(1.02);
    box-shadow: 0 0 26px rgba(255, 209, 102, 0.6);
  }
}

.res-unlock-badge {
  font-size: 26px;
}

.res-unlock-info {
  display: flex;
  flex-direction: column;
  text-align: left;
}

.res-unlock-kicker {
  font-size: 10px;
  color: #ffd166;
  font-weight: 800;
  letter-spacing: 1px;
}

.res-unlock-info b {
  font-size: 14px;
  color: #fff;
}

.res-rewards-box {
  background: rgba(15, 8, 25, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  padding: 10px 14px;
  margin: 10px 0;
}

.res-reward-chips {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-bottom: 8px;
}

.res-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: 8px;
}

.res-chip.xp {
  background: rgba(129, 140, 248, 0.2);
  border: 1px solid #818cf8;
  color: #c7d2fe;
}

.res-chip.coins {
  background: rgba(251, 191, 36, 0.2);
  border: 1px solid #fbbf24;
  color: #fde68a;
}

.res-chip.pp {
  background: rgba(56, 189, 248, 0.2);
  border: 1px solid #38bdf8;
  color: #bae6fd;
}

.res-xp-bar-wrap {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.res-xp-header {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  font-weight: 700;
  color: #cbd5e1;
}

.res-xp-bar {
  width: 100%;
  height: 8px;
  background: rgba(0, 0, 0, 0.7);
  border-radius: 5px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.res-xp-fill {
  height: 100%;
  background: linear-gradient(90deg, #38bdf8, #ffd166);
  border-radius: 5px;
  transition: width 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

/* =========================================================
   BETA PIONEER ROZETİ (Beta Oyuncularına Özel Kalıcı Rozet)
   ========================================================= */
.lobby-user-beta-badge,
.badge-beta-pioneer {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: linear-gradient(135deg, rgba(255, 209, 102, 0.22), rgba(0, 229, 255, 0.28));
  border: 1px solid rgba(255, 215, 0, 0.75);
  box-shadow: 0 0 14px rgba(255, 215, 0, 0.35), inset 0 0 8px rgba(0, 229, 255, 0.25);
  color: #fff8e7;
  font-family: 'Outfit', sans-serif;
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  padding: 3px 9px;
  border-radius: 14px;
  text-shadow: 0 0 8px rgba(255, 215, 0, 0.8);
  animation: betaBadgeGlow 2.8s ease-in-out infinite alternate;
  vertical-align: middle;
  cursor: default;
}

@keyframes betaBadgeGlow {
  0% {
    border-color: rgba(255, 215, 0, 0.6);
    box-shadow: 0 0 10px rgba(255, 215, 0, 0.25), inset 0 0 6px rgba(0, 229, 255, 0.15);
  }

  100% {
    border-color: rgba(0, 229, 255, 0.9);
    box-shadow: 0 0 18px rgba(0, 229, 255, 0.5), inset 0 0 10px rgba(255, 215, 0, 0.4);
  }
}

.btn-theme-shop {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.2), rgba(217, 119, 6, 0.35)) !important;
  border-color: #f59e0b !important;
  color: #fef3c7 !important;
}

.btn-theme-shop:hover {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.35), rgba(217, 119, 6, 0.55)) !important;
  box-shadow: 0 0 20px rgba(245, 158, 11, 0.55) !important;
}

.btn-theme-emotes {
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.2), rgba(126, 34, 206, 0.35)) !important;
  border-color: #a855f7 !important;
  color: #f3e8ff !important;
}

.btn-theme-emotes:hover {
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.35), rgba(126, 34, 206, 0.55)) !important;
  box-shadow: 0 0 20px rgba(168, 85, 247, 0.55) !important;
}

/* =========================================================
   JUJUTSU MAĞAZA (SHOP) MODAL STİLLERİ
   ========================================================= */
.shop-modal-card {
  width: 95%;
  max-width: 1060px;
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  background: rgba(10, 14, 24, 0.96);
  border: 1px solid rgba(255, 209, 102, 0.4);
  box-shadow: 0 0 35px rgba(0, 0, 0, 0.9), 0 0 30px rgba(255, 209, 102, 0.18);
  border-radius: 18px;
  padding: 16px 20px;
  box-sizing: border-box;
  overflow: hidden;
}

.shop-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  padding-bottom: 8px;
}

.shop-modal-kicker {
  font-size: 0.72rem;
  letter-spacing: 0.15em;
  font-weight: 800;
  color: #ffd166;
  text-transform: uppercase;
}

.shop-modal-title h2 {
  margin: 2px 0 2px;
  font-size: 1.45rem;
  color: #ffffff;
  font-family: 'Cinzel', serif;
  text-shadow: 0 0 14px rgba(255, 209, 102, 0.4);
}

.shop-modal-sub {
  margin: 0;
  font-size: 0.82rem;
  color: #94a3b8;
}

/* Cüzdan Barı */
.shop-wallet-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(18, 24, 42, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 8px 14px;
  margin-bottom: 10px;
}

.wallet-balance {
  display: flex;
  gap: 16px;
}

.wallet-pill {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.12);
  padding: 5px 12px;
  border-radius: 20px;
  font-weight: 800;
}

.wallet-pill.coins {
  border-color: rgba(255, 209, 102, 0.5);
  color: #ffd166;
}

.wallet-pill.pp {
  border-color: rgba(56, 189, 248, 0.5);
  color: #38bdf8;
}

.wallet-val {
  font-size: 1.10rem;
}

.wallet-label {
  font-size: 0.72rem;
  color: #94a3b8;
  text-transform: uppercase;
}

.btn-shop-daily-gift {
  background: linear-gradient(135deg, #10b981, #059669);
  border: 1px solid #34d399;
  color: #ffffff;
  font-weight: 700;
  font-size: 0.82rem;
  padding: 6px 14px;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 0 14px rgba(16, 185, 129, 0.35);
}

.btn-shop-daily-gift:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 22px rgba(16, 185, 129, 0.6);
}

.shop-wallet-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* ================= MAĞAZA GEZİNME BAR & 0ms ARAMA ================= */
.shop-nav-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.shop-category-tabs {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
}

.shop-cat-btn {
  background: rgba(18, 24, 42, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  padding: 6px 12px;
  color: #cbd5e1;
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: 0.78rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  transform: translateZ(0);
}

.shop-cat-btn:hover {
  border-color: rgba(255, 209, 102, 0.5);
  color: #ffffff;
  transform: translateY(-1px);
  background: rgba(30, 41, 68, 0.9);
}

.shop-cat-btn.active {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.28), rgba(217, 119, 6, 0.45));
  border-color: #ffd166;
  color: #ffd166;
  box-shadow: 0 0 14px rgba(245, 158, 11, 0.35);
}

.cat-icon {
  font-size: 0.95rem;
}

.cat-count {
  font-size: 0.68rem;
  padding: 1px 6px;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.45);
  color: #94a3b8;
  font-weight: 800;
}

.shop-cat-btn.active .cat-count {
  background: rgba(245, 158, 11, 0.35);
  color: #fef08a;
}

.cat-badge {
  font-size: 0.66rem;
  padding: 1px 5px;
  border-radius: 6px;
  background: rgba(236, 72, 153, 0.25);
  color: #f472b6;
  font-weight: 800;
  border: 1px solid rgba(236, 72, 153, 0.4);
}

/* 0ms Canlı Arama Çubuğu */
.shop-search-box {
  position: relative;
  display: flex;
  align-items: center;
  min-width: 220px;
  flex: 1;
  max-width: 320px;
}

.shop-search-icon {
  position: absolute;
  left: 10px;
  font-size: 0.85rem;
  color: #94a3b8;
  pointer-events: none;
}

.shop-search-input {
  width: 100%;
  background: rgba(12, 16, 28, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 10px;
  padding: 7px 28px 7px 32px;
  color: #ffffff;
  font-family: 'Outfit', sans-serif;
  font-size: 0.78rem;
  outline: none;
  transition: all 0.2s ease;
  box-sizing: border-box;
}

.shop-search-input:focus {
  border-color: #38bdf8;
  background: rgba(15, 23, 42, 0.98);
  box-shadow: 0 0 14px rgba(56, 189, 248, 0.35);
}

.shop-search-clear {
  position: absolute;
  right: 8px;
  background: none;
  border: none;
  color: #94a3b8;
  cursor: pointer;
  font-size: 0.75rem;
  padding: 2px 4px;
}

.shop-search-clear:hover {
  color: #ffffff;
}

/* ================= CANLI VİTRİN / İNCELEME (SPOTLIGHT BANNER) ================= */
.shop-spotlight-banner {
  background: linear-gradient(135deg, rgba(20, 26, 48, 0.95), rgba(12, 16, 32, 0.95));
  border: 1.5px solid rgba(255, 209, 102, 0.4);
  border-radius: 14px;
  padding: 12px 18px;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6), inset 0 0 20px rgba(255, 209, 102, 0.08);
  transition: all 0.2s ease;
}

.spotlight-left-group {
  display: flex;
  align-items: center;
  gap: 14px;
}

.spotlight-icon-box {
  width: 58px;
  height: 58px;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 34px;
  border: 1.5px solid rgba(255, 209, 102, 0.4);
  box-shadow: 0 0 16px rgba(255, 209, 102, 0.25);
  flex-shrink: 0;
  animation: spotlightGlow 3s ease-in-out infinite alternate;
}

@keyframes spotlightGlow {
  0% { transform: scale(1); box-shadow: 0 0 14px rgba(255, 209, 102, 0.2); }
  100% { transform: scale(1.04); box-shadow: 0 0 22px rgba(255, 209, 102, 0.5); }
}

.spotlight-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.spotlight-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.spotlight-title {
  font-size: 1.05rem;
  font-weight: 900;
  color: #ffffff;
  margin: 0;
  font-family: 'Outfit', sans-serif;
  letter-spacing: 0.02em;
}

.spotlight-badge {
  font-size: 0.65rem;
  font-weight: 800;
  padding: 1px 7px;
  border-radius: 4px;
  letter-spacing: 0.06em;
}

.spotlight-badge.mythic {
  background: rgba(255, 23, 68, 0.25);
  color: #ff5252;
  border: 1px solid rgba(255, 23, 68, 0.5);
}

.spotlight-badge.legendary {
  background: rgba(245, 158, 11, 0.25);
  color: #ffd166;
  border: 1px solid rgba(245, 158, 11, 0.5);
}

.spotlight-badge.epic {
  background: rgba(168, 85, 247, 0.25);
  color: #c084fc;
  border: 1px solid rgba(168, 85, 247, 0.5);
}

.spotlight-badge.rare {
  background: rgba(56, 189, 248, 0.25);
  color: #38bdf8;
  border: 1px solid rgba(56, 189, 248, 0.5);
}

.spotlight-sub {
  font-size: 0.76rem;
  color: #38bdf8;
  font-weight: 600;
}

.spotlight-desc {
  font-size: 0.72rem;
  color: #94a3b8;
  max-width: 520px;
  line-height: 1.35;
  margin: 0;
}

.spotlight-stats {
  display: flex;
  gap: 12px;
  font-size: 0.72rem;
  color: #a7f3d0;
  margin-top: 3px;
  font-weight: 700;
}

.spotlight-stats span {
  display: flex;
  align-items: center;
  gap: 4px;
}

.spotlight-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.btn-spotlight-action {
  padding: 8px 18px;
  border-radius: 10px;
  font-family: 'Outfit', sans-serif;
  font-weight: 800;
  font-size: 0.82rem;
  cursor: pointer;
  border: none;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  align-items: center;
  gap: 6px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
}

.btn-spotlight-action.buy {
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: #ffffff;
  box-shadow: 0 0 16px rgba(245, 158, 11, 0.45);
}

.btn-spotlight-action.buy:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 24px rgba(245, 158, 11, 0.7);
}

.btn-spotlight-action.equip {
  background: rgba(56, 189, 248, 0.25);
  border: 1.5px solid #38bdf8;
  color: #38bdf8;
}

.btn-spotlight-action.equip:hover {
  background: rgba(56, 189, 248, 0.45);
  transform: translateY(-2px);
}

.btn-spotlight-action.equipped {
  background: rgba(16, 185, 129, 0.25);
  border: 1.5px solid #10b981;
  color: #34d399;
}

/* ================= 0ms ANINDA ALIŞVERİŞ BİLDİRİMİ (FAST TOAST) ================= */
.shop-fast-toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  background: rgba(15, 23, 42, 0.96);
  border: 1.5px solid #10b981;
  color: #ffffff;
  padding: 10px 18px;
  border-radius: 12px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.8), 0 0 20px rgba(16, 185, 129, 0.35);
  z-index: 10001;
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: 0.84rem;
  animation: fastToastPop 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

.shop-fast-toast.error {
  border-color: #ef4444;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.8), 0 0 20px rgba(239, 68, 68, 0.35);
}

@keyframes fastToastPop {
  0% { transform: translateY(20px) scale(0.92); opacity: 0; }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}

/* ================= GELİŞMİŞ EŞYA KARTLARI (0ms GPU-ACCELERATED) ================= */
.shop-card-stat {
  font-size: 0.68rem;
  color: #a7f3d0;
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid rgba(52, 211, 153, 0.25);
  border-radius: 5px;
  padding: 2px 6px;
  margin-bottom: 6px;
  display: inline-block;
  font-weight: 700;
}

.shop-card.spotlighted {
  border-color: #ffd166 !important;
  box-shadow: 0 0 20px rgba(255, 209, 102, 0.4) !important;
  background: linear-gradient(180deg, rgba(255, 209, 102, 0.12), rgba(15, 21, 37, 0.95)) !important;
}

/* Eşyalar Izgarası */
.shop-items-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 10px;
  overflow-y: auto;
  padding-right: 6px;
  flex: 1;
  min-height: 240px;
  max-height: 60vh;
  contain: content;
}

.shop-card {
  position: relative;
  background: rgba(15, 21, 37, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  box-sizing: border-box;
  cursor: pointer;
}

.shop-card:hover {
  border-color: rgba(255, 255, 255, 0.35);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}

/* Nadirlik Renkleri */
.shop-card.rarity-beta {
  border-color: rgba(255, 215, 0, 0.6);
  background: linear-gradient(180deg, rgba(255, 215, 0, 0.08), rgba(15, 21, 37, 0.9));
}

.shop-card.rarity-mythic {
  border-color: rgba(255, 23, 68, 0.6);
  background: linear-gradient(180deg, rgba(255, 23, 68, 0.08), rgba(15, 21, 37, 0.9));
}

.shop-card.rarity-legendary {
  border-color: rgba(245, 158, 11, 0.6);
}

.shop-card.rarity-epic {
  border-color: rgba(168, 85, 247, 0.6);
}

.shop-card.rarity-starter {
  border-color: rgba(56, 189, 248, 0.6);
}

.shop-card-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  font-size: 0.64rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  padding: 2px 6px;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.6);
  color: #ffd166;
  border: 1px solid rgba(255, 209, 102, 0.4);
}

.shop-card-icon-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  margin-bottom: 6px;
}

.shop-card-icon {
  font-size: 32px;
  text-shadow: 0 0 8px rgba(255, 255, 255, 0.35);
}

.shop-card-title {
  margin: 0 0 2px;
  font-size: 0.92rem;
  color: #ffffff;
  font-weight: 800;
}

.shop-card-sub {
  font-size: 0.72rem;
  color: #38bdf8;
  display: block;
  margin-bottom: 4px;
}

.shop-card-desc {
  font-size: 0.75rem;
  color: #94a3b8;
  line-height: 1.3;
  margin: 0 0 10px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.shop-card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: 8px;
  margin-top: auto;
}

.shop-card-price {
  font-weight: 800;
  font-size: 0.88rem;
  display: flex;
  gap: 6px;
  align-items: center;
}

.price-coins {
  color: #ffd166;
}

.price-pp {
  color: #38bdf8;
}

.price-free {
  color: #10b981;
  font-size: 0.74rem;
  font-weight: 800;
}

.btn-shop-action {
  border: none;
  font-family: 'Outfit', sans-serif;
  font-weight: 800;
  font-size: 0.78rem;
  padding: 6px 14px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-shop-action.buy {
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: #ffffff;
  box-shadow: 0 0 10px rgba(245, 158, 11, 0.35);
}

.btn-shop-action.buy:hover {
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  box-shadow: 0 0 16px rgba(245, 158, 11, 0.6);
}

.btn-shop-action.equip {
  background: rgba(56, 189, 248, 0.2);
  border: 1px solid #38bdf8;
  color: #38bdf8;
}

.btn-shop-action.equip:hover {
  background: rgba(56, 189, 248, 0.4);
}

.btn-shop-action.equipped {
  background: rgba(16, 185, 129, 0.2);
  border: 1px solid #10b981;
  color: #34d399;
  cursor: default;
}

.shop-modal-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: 10px;
}

.shop-modal-hint {
  font-size: 0.76rem;
  color: #64748b;
}

/* =========================================================
   SEZON PASS (BATTLE PASS) PREMIUM STİLLERİ
   ========================================================= */
.season-pass-header-box {
  background: linear-gradient(135deg, rgba(20, 26, 46, 0.95), rgba(12, 16, 32, 0.95));
  border: 1px solid rgba(255, 209, 102, 0.35);
  border-radius: 14px;
  padding: 16px 20px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}

.sp-title-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 12px;
}

.sp-kicker {
  font-size: 0.75rem;
  font-weight: 900;
  color: #ffd166;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.sp-main-title {
  margin: 4px 0 2px 0;
  color: #ffffff;
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.sp-desc {
  margin: 0;
  font-size: 0.80rem;
  color: #94a3b8;
  line-height: 1.4;
}

.sp-level-pill {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  background: rgba(255, 209, 102, 0.12);
  border: 1.5px solid rgba(255, 209, 102, 0.5);
  padding: 8px 16px;
  border-radius: 12px;
  box-shadow: 0 0 16px rgba(255, 209, 102, 0.2);
}

.sp-lvl-title {
  font-size: 0.65rem;
  font-weight: 800;
  color: #ffd166;
  letter-spacing: 0.1em;
}

.sp-lvl-val {
  font-size: 1.3rem;
  font-weight: 900;
  color: #ffffff;
}

.sp-progress-track {
  position: relative;
  height: 22px;
  background: rgba(0, 0, 0, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 11px;
  overflow: hidden;
  margin-bottom: 14px;
}

.sp-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #f59e0b, #ffd166, #ff1744);
  box-shadow: 0 0 15px rgba(255, 209, 102, 0.7);
  transition: width 0.4s ease;
}

.sp-progress-text {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 900;
  color: #ffffff;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9);
  pointer-events: none;
}

.sp-filter-row {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 4px;
}

.sp-filter-btn {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #94a3b8;
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s;
}

.sp-filter-btn:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
}

.sp-filter-btn.active {
  background: linear-gradient(135deg, rgba(255, 209, 102, 0.3), rgba(245, 158, 11, 0.45));
  border-color: #ffd166;
  color: #ffffff;
  box-shadow: 0 0 12px rgba(255, 209, 102, 0.3);
}

.shop-card.is-unlocked {
  border-color: rgba(56, 189, 248, 0.4);
  box-shadow: 0 0 14px rgba(56, 189, 248, 0.15);
}

.shop-card.is-unlocked .btn-shop-action.buy {
  animation: pulse-glow 2s infinite;
}

@keyframes pulse-glow {
  0%, 100% { box-shadow: 0 0 10px rgba(245, 158, 11, 0.4); }
  50% { box-shadow: 0 0 20px rgba(245, 158, 11, 0.85); }
}

.shop-card.is-claimed {
  opacity: 0.85;
  border-color: rgba(16, 185, 129, 0.3);
}

/* =========================================================
   VİSA & MASTERCARD ÖDEME (CHECKOUT) MODAL STİLLERİ
   ========================================================= */
.payment-modal-card {
  width: 95%;
  max-width: 860px;
  max-height: 92vh;
  background: rgba(10, 14, 26, 0.98);
  border: 1.5px solid rgba(255, 209, 102, 0.45);
  border-radius: 20px;
  padding: 20px 24px;
  box-shadow: 0 0 50px rgba(0, 0, 0, 0.95), 0 0 35px rgba(255, 209, 102, 0.2);
  box-sizing: border-box;
  overflow-y: auto;
}

.payment-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  padding-bottom: 10px;
  margin-bottom: 14px;
}

.payment-modal-kicker {
  font-size: 0.70rem;
  letter-spacing: 0.16em;
  font-weight: 900;
  color: #10b981;
  text-transform: uppercase;
}

.payment-modal-title h2 {
  margin: 3px 0 2px;
  font-size: 1.45rem;
  color: #ffffff;
  font-family: 'Cinzel', serif;
  text-shadow: 0 0 14px rgba(255, 209, 102, 0.35);
}

.payment-modal-sub {
  margin: 0;
  font-size: 0.82rem;
  color: #94a3b8;
}

.payment-body-grid {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 20px;
  align-items: start;
}

@media (max-width: 780px) {
  .payment-body-grid {
    grid-template-columns: 1fr;
  }
}

/* İnteraktif Sanal Kart */
.virtual-card {
  background: linear-gradient(135deg, #241442 0%, #0f172a 48%, #3b0764 100%);
  border: 1.5px solid rgba(255, 255, 255, 0.22);
  border-radius: 14px;
  padding: 18px 20px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.65), inset 0 1px 2px rgba(255, 255, 255, 0.35);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 175px;
  position: relative;
  overflow: hidden;
}

.virtual-card::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.08) 0%, transparent 60%);
  pointer-events: none;
}

.vc-top-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.vc-chip-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
}

.vc-chip {
  width: 36px;
  height: 26px;
  background: linear-gradient(135deg, #fcd34d, #b45309);
  border-radius: 5px;
  border: 1px solid #78350f;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4);
}

.vc-contactless {
  color: rgba(255, 255, 255, 0.65);
  font-weight: 900;
  font-size: 1rem;
  letter-spacing: -0.1em;
}

.vc-brand-visa {
  font-family: 'Outfit', sans-serif;
  font-size: 1.5rem;
  font-weight: 900;
  font-style: italic;
  color: #ffffff;
  letter-spacing: 0.06em;
  text-shadow: 0 2px 8px rgba(255, 255, 255, 0.3);
  display: none;
}

.vc-brand-visa.active {
  display: inline-block;
}

.vc-brand-mastercard {
  display: none;
  align-items: center;
  position: relative;
  width: 44px;
  height: 28px;
}

.vc-brand-mastercard.active {
  display: flex;
}

.mc-circle {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  position: absolute;
}

.mc-circle.red {
  background: #ea001b;
  left: 0;
  opacity: 0.95;
}

.mc-circle.orange {
  background: #ff5f00;
  right: 0;
  opacity: 0.9;
}

.vc-number {
  font-family: 'Courier New', monospace;
  font-size: 1.18rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  color: #ffffff;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.9);
  margin: 16px 0;
}

.vc-bottom-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}

.vc-label {
  display: block;
  font-size: 0.60rem;
  color: #94a3b8;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 2px;
}

.vc-val {
  font-size: 0.82rem;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* Sipariş Özeti */
.payment-order-summary {
  background: rgba(18, 24, 42, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 12px 16px;
  margin-top: 14px;
}

.pos-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.78rem;
  margin-bottom: 6px;
  gap: 8px;
}

.pos-label {
  color: #94a3b8;
  font-weight: 600;
}

.pos-val {
  color: #ffffff;
  font-weight: 700;
  text-align: right;
}

.pos-val.highlight {
  color: #ffd166;
}

.pos-val.mythic {
  color: #ff1744;
}

.pos-divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.1);
  margin: 10px 0;
}

.pos-total-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 800;
  color: #ffffff;
  font-size: 0.85rem;
}

.pos-price {
  font-size: 1.25rem;
  font-weight: 900;
  color: #ffd166;
  text-shadow: 0 0 10px rgba(255, 209, 102, 0.5);
}

/* Kart Türü Seçici */
.pay-method-selector {
  display: flex;
  gap: 10px;
  margin-bottom: 12px;
}

.pay-method-opt {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 9px 12px;
  border: 1.5px solid rgba(255, 255, 255, 0.15);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  cursor: pointer;
  transition: all 0.2s;
  font-weight: 700;
  font-size: 0.82rem;
  color: #cbd5e1;
}

.pay-method-opt input[type="radio"] {
  display: none;
}

.pay-method-opt:hover {
  background: rgba(255, 255, 255, 0.09);
  color: #fff;
}

.pay-method-opt.active {
  border-color: #ffd166;
  background: linear-gradient(135deg, rgba(255, 209, 102, 0.15), rgba(245, 158, 11, 0.25));
  color: #ffffff;
  box-shadow: 0 0 14px rgba(255, 209, 102, 0.25);
}

.pay-icon-brand.visa {
  font-weight: 900;
  font-style: italic;
  color: #ffd166;
  letter-spacing: 0.06em;
}

.pay-icon-brand.mastercard {
  display: flex;
  align-items: center;
  gap: 4px;
}

.mc-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  display: inline-block;
}

.mc-dot.red { background: #ea001b; }
.mc-dot.orange { background: #ff5f00; margin-left: -5px; }

/* Form Alanları */
.pay-field {
  margin-bottom: 11px;
}

.pay-field label {
  display: block;
  font-size: 0.72rem;
  font-weight: 800;
  color: #cbd5e1;
  margin-bottom: 4px;
  letter-spacing: 0.02em;
}

.pay-input-icon-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.pay-field input {
  width: 100%;
  box-sizing: border-box;
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 8px;
  padding: 8px 12px;
  color: #ffffff;
  font-size: 0.85rem;
  font-family: inherit;
  outline: none;
  transition: all 0.2s;
}

.pay-field input:focus {
  border-color: #38bdf8;
  box-shadow: 0 0 12px rgba(56, 189, 248, 0.35);
  background: rgba(0, 0, 0, 0.65);
}

.pay-field-badge {
  position: absolute;
  right: 10px;
  font-size: 0.72rem;
  font-weight: 900;
  font-style: italic;
  color: #ffd166;
  pointer-events: none;
}

.pay-field-hint-icon {
  position: absolute;
  right: 10px;
  font-size: 0.80rem;
  pointer-events: none;
}

.pay-field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.pay-security-notice {
  background: rgba(16, 185, 129, 0.1);
  border: 1px solid rgba(16, 185, 129, 0.25);
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 0.72rem;
  color: #a7f3d0;
  margin: 10px 0 14px 0;
  line-height: 1.35;
}

.pay-actions-row {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
}

.btn-pay-submit {
  flex: 1;
  background: linear-gradient(135deg, #10b981, #059669);
  border: none;
  color: #ffffff;
  font-family: 'Outfit', sans-serif;
  font-weight: 900;
  font-size: 0.88rem;
  padding: 10px 16px;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.2s;
  box-shadow: 0 0 18px rgba(16, 185, 129, 0.4);
}

.btn-pay-submit:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 25px rgba(16, 185, 129, 0.65);
}

/* Antlaşma & Sözleşme Onay Alanı & Hızlı Test */
.pay-test-fill-btn {
  border: 1px dashed rgba(255, 209, 102, 0.6) !important;
  color: #ffd166 !important;
  font-size: 0.72rem !important;
  padding: 3px 8px !important;
  background: rgba(255, 209, 102, 0.08) !important;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.pay-test-fill-btn:hover {
  background: rgba(255, 209, 102, 0.22) !important;
  border-color: #ffd166 !important;
  color: #ffffff !important;
  transform: translateY(-1px);
}

.pay-terms-wrap {
  margin: 10px 0 12px 0;
  padding: 9px 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1.5px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  transition: all 0.25s ease;
}

.pay-terms-wrap.shake-glow {
  border-color: #ef4444 !important;
  background: rgba(239, 68, 68, 0.14) !important;
  box-shadow: 0 0 18px rgba(239, 68, 68, 0.5) !important;
  animation: payShake 0.4s ease-in-out;
}

@keyframes payShake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-6px); }
  40%, 80% { transform: translateX(6px); }
}

.pay-terms-label {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  cursor: pointer;
  font-size: 0.73rem;
  color: #cbd5e1;
  line-height: 1.4;
  user-select: none;
}

.pay-terms-label input[type="checkbox"] {
  margin-top: 2px;
  width: 16px;
  height: 16px;
  cursor: pointer;
  accent-color: #10b981;
  flex-shrink: 0;
}

.pay-terms-link {
  color: #ffd166;
  text-decoration: underline;
  font-weight: 800;
  cursor: pointer;
  transition: color 0.15s;
}

.pay-terms-link:hover {
  color: #ffe699;
}

/* ============ SEZON PASS KULLANICI & SATIŞ ANTLAŞMASI MODALI ============ */
.terms-modal-card {
  width: 580px;
  max-width: 92vw;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  background: linear-gradient(145deg, rgba(16, 20, 32, 0.98), rgba(9, 11, 20, 0.98));
  border: 1.5px solid rgba(255, 209, 102, 0.4);
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.85), 0 0 35px rgba(255, 209, 102, 0.18);
  padding: 22px;
  box-sizing: border-box;
  z-index: 10001;
}

.terms-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  padding-bottom: 12px;
  margin-bottom: 14px;
}

.terms-kicker {
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  color: #ffd166;
  display: block;
  margin-bottom: 4px;
}

.terms-header-title h3 {
  margin: 0;
  color: #ffffff;
  font-size: 1.05rem;
  font-weight: 800;
}

.terms-modal-body {
  flex: 1;
  overflow-y: auto;
  padding-right: 8px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: 52vh;
}

.terms-modal-body::-webkit-scrollbar {
  width: 6px;
}

.terms-modal-body::-webkit-scrollbar-thumb {
  background: rgba(255, 209, 102, 0.3);
  border-radius: 3px;
}

.terms-section {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  padding: 10px 12px;
}

.terms-section h4 {
  margin: 0 0 4px 0;
  color: #ffd166;
  font-size: 0.82rem;
  font-weight: 700;
}

.terms-section p {
  margin: 0;
  font-size: 0.74rem;
  color: #cbd5e1;
  line-height: 1.45;
}

.terms-modal-footer {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: 14px;
  margin-top: 14px;
}

.btn-terms-accept {
  background: linear-gradient(135deg, #ffd166, #f59e0b);
  border: none;
  color: #000;
  font-family: 'Outfit', sans-serif;
  font-weight: 900;
  font-size: 0.82rem;
  padding: 9px 18px;
  border-radius: 8px;
  cursor: pointer;
  box-shadow: 0 0 16px rgba(245, 158, 11, 0.4);
  transition: all 0.2s;
}

.btn-terms-accept:hover {
  transform: translateY(-1px);
  box-shadow: 0 0 22px rgba(245, 158, 11, 0.6);
}

/* =========================================================
   FORTNITE TARZI EMOTE ÇARKI (EMOTE WHEEL OVERLAY)
   ========================================================= */
.emote-wheel-overlay {
  position: fixed;
  inset: 0;
  background: rgba(4, 6, 14, 0.78);
  backdrop-filter: blur(8px);
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: ewFadeIn 0.18s ease-out;
}

@keyframes ewFadeIn {
  from {
    opacity: 0;
    transform: scale(0.95);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

.emote-wheel-center-disc {
  max-width: 720px;
  width: 95%;
  background: rgba(10, 14, 26, 0.96);
  border: 2px solid rgba(168, 85, 247, 0.55);
  box-shadow: 0 0 50px rgba(0, 0, 0, 0.95), 0 0 35px rgba(168, 85, 247, 0.35);
  border-radius: 22px;
  padding: 22px 20px;
  text-align: center;
  box-sizing: border-box;
}

.emote-wheel-header .ew-kicker {
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  font-weight: 800;
  color: #a855f7;
}

.emote-wheel-header h3 {
  margin: 4px 0 2px;
  font-size: 1.35rem;
  color: #ffffff;
  font-weight: 800;
}

.emote-wheel-header .ew-sub {
  font-size: 0.8rem;
  color: #94a3b8;
  display: block;
  margin-bottom: 16px;
}

.emote-wheel-slots {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
  margin-bottom: 16px;
}

@media (max-width: 640px) {
  .emote-wheel-slots {
    grid-template-columns: repeat(3, 1fr);
  }
}

.emote-wheel-slot {
  position: relative;
  background: rgba(20, 26, 44, 0.90);
  border: 1.8px solid rgba(255, 255, 255, 0.15);
  border-radius: 12px;
  padding: 12px 6px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.emote-wheel-slot:hover {
  background: rgba(168, 85, 247, 0.25);
  border-color: #a855f7;
  transform: translateY(-2px);
  box-shadow: 0 4px 20px rgba(168, 85, 247, 0.40);
}

.slot-num-badge {
  position: absolute;
  top: 6px;
  left: 6px;
  font-size: 0.72rem;
  font-weight: 900;
  color: #ffffff;
  border-radius: 6px;
  padding: 1px 6px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
}

.slot-preview-box {
  width: 58px;
  height: 58px;
  background: rgba(0, 0, 0, 0.50);
  border: 1px solid rgba(255, 255, 255, 0.20);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 10px;
  margin-bottom: 6px;
  cursor: pointer;
  overflow: hidden;
  transition: transform 0.15s;
}

.slot-preview-box:hover {
  transform: scale(1.08);
}

.slot-stamp-img {
  width: 52px;
  height: 52px;
  object-fit: contain;
  image-rendering: pixelated;
}

.slot-name {
  font-size: 0.78rem;
  font-weight: 800;
  color: #ffffff;
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.slot-tag {
  font-size: 0.65rem;
  font-weight: 800;
  color: #ffd166;
  background: rgba(255, 209, 102, 0.15);
  padding: 1px 6px;
  border-radius: 4px;
  margin-bottom: 6px;
}

.slot-reassign-select {
  width: 95%;
  font-size: 0.68rem;
  font-weight: 700;
  color: #f1f5f9;
  background: rgba(8, 12, 22, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 6px;
  padding: 3px 2px;
  margin-bottom: 6px;
  cursor: pointer;
}

.btn-slot-play {
  width: 95%;
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.20);
  color: #ffffff;
  border-radius: 6px;
  font-size: 0.68rem;
  font-weight: 800;
  padding: 4px 0;
  cursor: pointer;
  transition: all 0.15s;
}

.btn-slot-play:hover {
  background: rgba(0, 229, 255, 0.35);
  border-color: #00e5ff;
}

/* Ayar Paneli (Süre & Karakter Üstü Konum) */
.ew-settings-panel {
  background: rgba(18, 24, 40, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  padding: 12px 16px;
  margin-bottom: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ew-setting-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.ew-setting-row label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.82rem;
  color: #cbd5e1;
  font-weight: 700;
}

.ew-setting-row label strong {
  color: #00e5ff;
}

.ew-setting-row input[type="range"] {
  flex: 1;
  accent-color: #a855f7;
  cursor: pointer;
}

.ew-actions-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.btn-save-ew {
  background: linear-gradient(135deg, #0284c7, #7c3aed);
  border: 1.5px solid rgba(255, 255, 255, 0.3);
  color: #ffffff;
  padding: 9px 24px;
  border-radius: 10px;
  font-size: 0.88rem;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(124, 58, 237, 0.4);
  transition: all 0.2s;
}

.btn-save-ew:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 22px rgba(124, 58, 237, 0.6);
  border-color: #ffffff;
}

.btn-close-ew {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #cbd5e1;
  padding: 9px 20px;
  border-radius: 10px;
  font-size: 0.85rem;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-close-ew:hover {
  background: rgba(255, 23, 68, 0.2);
  border-color: #ff1744;
  color: #ff1744;
}

/* =========================================================
   PING & SHOP TOAST BİLDİRİMLERİ
   ========================================================= */
.ping-banner {
  position: fixed;
  top: 68px;
  left: 50%;
  transform: translateX(-50%) translateY(-20px);
  background: rgba(8, 12, 22, 0.92);
  border: 1.6px solid #00e5ff;
  border-radius: 12px;
  padding: 8px 22px;
  font-family: 'Outfit', sans-serif;
  font-weight: 800;
  font-size: 0.95rem;
  letter-spacing: 0.05em;
  color: #00e5ff;
  box-shadow: 0 0 20px rgba(0, 229, 255, 0.4);
  pointer-events: none;
  opacity: 0;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 99998;
}

.ping-banner.visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.shop-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: rgba(12, 18, 32, 0.94);
  border: 1.5px solid #ffd166;
  border-radius: 12px;
  padding: 10px 24px;
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: 0.92rem;
  color: #ffffff;
  box-shadow: 0 0 24px rgba(255, 209, 102, 0.35);
  pointer-events: none;
  opacity: 0;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 100000;
}

.shop-toast.visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* =========================================================
   KİLİTLİ BUTON & DÜELLO PİLL ROZETİ
   ========================================================= */
.lock-indicator {
  font-size: 0.72rem;
  margin-left: 4px;
  filter: drop-shadow(0 0 6px #ff1744);
}

.btn-locked {
  filter: grayscale(0.35);
  border-style: dashed !important;
}

/* =========================================================
   REAKSİYON ŞABLONLARI ÇARKI (SLOT PREVIEWS)
   ========================================================= */
.slot-preview-box {
  width: 58px;
  height: 58px;
  background: rgba(0, 0, 0, 0.45);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 6px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  overflow: hidden;
}

.slot-stamp-img {
  width: 52px;
  height: 52px;
  object-fit: contain;
  image-rendering: pixelated;
  filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.25));
}

.slot-quote-preview {
  font-size: 0.62rem;
  color: #94a3b8;
  font-style: italic;
  margin-top: 3px;
  max-width: 130px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* =========================================================
   SEZON PASS (BATTLE PASS 1 - 50) STYLES
   ========================================================= */
.season-pass-header-box {
  background: linear-gradient(135deg, rgba(20, 10, 35, 0.95), rgba(10, 20, 45, 0.90));
  border: 1.8px solid #a855f7;
  border-radius: 16px;
  padding: 16px 20px;
  margin-bottom: 16px;
  box-shadow: 0 0 25px rgba(168, 85, 247, 0.25);
}

.sp-title-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 12px;
}

.sp-kicker {
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  color: #c084fc;
  display: block;
}

.sp-main-title {
  margin: 3px 0;
  font-size: 1.25rem;
  color: #ffffff;
}

.sp-desc {
  margin: 0;
  font-size: 0.78rem;
  color: #94a3b8;
}

.sp-level-pill {
  background: rgba(0, 0, 0, 0.55);
  border: 1.5px solid #ffd166;
  border-radius: 12px;
  padding: 8px 16px;
  text-align: center;
}

.sp-lvl-title {
  font-size: 0.65rem;
  font-weight: 800;
  color: #ffd166;
  letter-spacing: 0.08em;
  display: block;
}

.sp-lvl-val {
  font-size: 1.15rem;
  font-weight: 900;
  color: #ffffff;
}

.sp-progress-track {
  position: relative;
  width: 100%;
  height: 22px;
  background: rgba(0, 0, 0, 0.6);
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  overflow: hidden;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
}

.sp-progress-fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background: linear-gradient(90deg, #9333ea, #a855f7, #38bdf8);
  box-shadow: 0 0 16px rgba(168, 85, 247, 0.8);
  transition: width 0.4s ease-out;
}

.sp-progress-text {
  position: relative;
  z-index: 2;
  font-size: 0.75rem;
  font-weight: 800;
  color: #ffffff;
  padding-left: 12px;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
}

.sp-filter-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.sp-filter-btn {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: #cbd5e1;
  padding: 4px 12px;
  border-radius: 8px;
  font-size: 0.75rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
}

.sp-filter-btn:hover {
  background: rgba(168, 85, 247, 0.2);
  border-color: #a855f7;
  color: #ffffff;
}

.sp-filter-btn.active {
  background: #a855f7;
  border-color: #c084fc;
  color: #ffffff;
  box-shadow: 0 0 10px rgba(168, 85, 247, 0.5);
}

.shop-card.is-locked {
  opacity: 0.72;
  filter: grayscale(0.2);
}

.shop-card.is-unlocked {
  border-color: rgba(56, 189, 248, 0.45);
}

.shop-card.is-claimed {
  border-color: rgba(16, 185, 129, 0.45);
}

/* =========================================================
   JUJUTSU ANTIVIRUS & OVER-WRITE DEFENDER v5.0 ARAYÜZ STİLLERİ
   ========================================================= */

/* Lobi & Menü Butonu */
.btn-theme-antivirus {
  background: linear-gradient(135deg, rgba(6, 95, 120, 0.65), rgba(15, 23, 42, 0.88)) !important;
  border: 1.5px solid #00f0ff !important;
  color: #e0f2fe !important;
  text-shadow: 0 0 10px rgba(0, 240, 255, 0.65);
  box-shadow: 0 4px 18px rgba(0, 240, 255, 0.35) !important;
  position: relative;
  overflow: hidden;
}

.btn-theme-antivirus::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(60deg, transparent, rgba(0, 240, 255, 0.15), transparent);
  transform: rotate(30deg);
  animation: avPulseShimmer 3.5s infinite;
  pointer-events: none;
}

@keyframes avPulseShimmer {
  0% { transform: translateX(-100%) rotate(30deg); }
  50%, 100% { transform: translateX(100%) rotate(30deg); }
}

.btn-theme-antivirus:hover {
  border-color: #ffffff !important;
  box-shadow: 0 6px 24px rgba(0, 240, 255, 0.7) !important;
  transform: translateY(-2px);
}

/* Kişisel AI Asistan Lobi Butonu */
.btn-theme-ai {
  background: linear-gradient(135deg, rgba(88, 28, 135, 0.75), rgba(15, 23, 42, 0.92)) !important;
  border: 1.5px solid #a855f7 !important;
  color: #f3e8ff !important;
  text-shadow: 0 0 10px rgba(168, 85, 247, 0.7);
  box-shadow: 0 4px 18px rgba(168, 85, 247, 0.4) !important;
  position: relative;
  overflow: hidden;
}

.btn-theme-ai::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(60deg, transparent, rgba(168, 85, 247, 0.25), transparent);
  transform: rotate(30deg);
  animation: aiPulseShimmer 3.2s infinite;
  pointer-events: none;
}

@keyframes aiPulseShimmer {
  0% { transform: translateX(-100%) rotate(30deg); }
  50%, 100% { transform: translateX(100%) rotate(30deg); }
}

.btn-theme-ai:hover {
  border-color: #38bdf8 !important;
  box-shadow: 0 6px 26px rgba(168, 85, 247, 0.7), 0 0 16px rgba(56, 189, 248, 0.5) !important;
  transform: translateY(-2px);
}

/* Liderlik Tablosu İçi Antivirüs Butonu */
.btn-lb-antivirus {
  background: linear-gradient(135deg, rgba(8, 145, 178, 0.35), rgba(15, 23, 42, 0.8));
  border: 1px solid #38bdf8;
  color: #38bdf8;
  padding: 5px 12px;
  border-radius: 6px;
  font-size: 0.76rem;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s ease;
  box-shadow: 0 0 10px rgba(56, 189, 248, 0.2);
}

.btn-lb-antivirus:hover {
  background: #38bdf8;
  color: #000;
  box-shadow: 0 0 16px rgba(56, 189, 248, 0.6);
}

/* Onaylı & Sezon Pass Plus Rozetleri */
.lb-antivirus-shield {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  margin-left: 4px;
  filter: drop-shadow(0 0 6px rgba(0, 240, 255, 0.7));
  cursor: help;
}

.badge-season-plus {
  background: linear-gradient(135deg, #a855f7, #ec4899);
  color: #ffffff;
  padding: 1px 7px;
  border-radius: 6px;
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.05em;
  margin-left: 6px;
  box-shadow: 0 0 12px rgba(236, 72, 153, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.4);
  display: inline-block;
  vertical-align: middle;
}

/* Antivirüs Toast Bildirimi */
.antivirus-toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 999999;
  background: rgba(15, 23, 42, 0.95);
  border: 1.5px solid #00f0ff;
  border-radius: 10px;
  padding: 12px 18px;
  color: #e2e8f0;
  font-size: 0.84rem;
  font-weight: 700;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.8), 0 0 20px rgba(0, 240, 255, 0.3);
  backdrop-filter: blur(12px);
  transform: translateY(120%);
  opacity: 0;
  transition: all 0.3s cubic-bezier(0.18, 0.9, 0.32, 1.2);
  pointer-events: none;
  max-width: 380px;
}

.antivirus-toast.show {
  transform: translateY(0);
  opacity: 1;
}

.antivirus-toast.level-danger {
  border-color: #ff1744;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.8), 0 0 20px rgba(255, 23, 68, 0.4);
  color: #ffebee;
}

.antivirus-toast.level-success {
  border-color: #10b981;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.8), 0 0 20px rgba(16, 185, 129, 0.4);
  color: #ecfdf5;
}

/* Antivirus Modal & Siber Kart */
#antivirus-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 100050;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(3, 7, 18, 0.88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  padding: 16px;
  box-sizing: border-box;
}

.antivirus-modal-card {
  width: 95%;
  max-width: 960px;
  max-height: 92vh;
  height: auto;
  display: flex;
  flex-direction: column;
  background: linear-gradient(165deg, rgba(13, 20, 36, 0.96), rgba(8, 12, 24, 0.98));
  border: 1.5px solid rgba(0, 240, 255, 0.45);
  border-radius: 14px;
  padding: 20px;
  box-shadow: 0 0 40px rgba(0, 240, 255, 0.18), inset 0 1px 1px rgba(255, 255, 255, 0.12);
  overflow-y: auto;
  box-sizing: border-box;
  color: #f1f5f9;
}

.antivirus-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  border-bottom: 1px solid rgba(0, 240, 255, 0.2);
  padding-bottom: 14px;
  margin-bottom: 16px;
}

.av-kicker-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 4px;
}

.av-kicker {
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  color: #00f0ff;
}

.av-grade-pill {
  background: rgba(255, 23, 68, 0.18);
  border: 1px solid #ff1744;
  color: #ff616f;
  padding: 1px 8px;
  border-radius: 12px;
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.av-main-title {
  font-size: 1.45rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  margin: 0 0 4px 0;
  background: linear-gradient(135deg, #ffffff, #00f0ff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.av-sub {
  margin: 0;
  font-size: 0.8rem;
  color: #94a3b8;
}

/* 5 HUD Kartı Izgarası */
.antivirus-hud-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}

.av-hud-card {
  background: rgba(15, 23, 42, 0.75);
  border: 1px solid rgba(56, 189, 248, 0.25);
  border-radius: 10px;
  padding: 10px 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  transition: all 0.2s ease;
}

.av-hud-card:hover {
  border-color: #00f0ff;
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0, 240, 255, 0.15);
}

.av-hud-icon {
  font-size: 1.5rem;
  flex-shrink: 0;
}

.av-hud-info {
  display: flex;
  flex-direction: column;
}

.av-hud-label {
  font-size: 0.64rem;
  font-weight: 800;
  color: #94a3b8;
  letter-spacing: 0.05em;
}

.av-hud-val {
  font-size: 1.15rem;
  font-weight: 900;
  color: #38bdf8;
  margin: 1px 0;
}

.av-hud-status.text-ok {
  font-size: 0.62rem;
  color: #34d399;
  font-weight: 700;
}

/* Derin Tarama Bölümü */
.av-scan-box {
  background: rgba(15, 23, 42, 0.85);
  border: 1.5px solid rgba(0, 240, 255, 0.35);
  border-radius: 10px;
  padding: 14px;
  margin-bottom: 16px;
}

.av-scan-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.btn-av-scan-pulse {
  background: linear-gradient(135deg, #0284c7, #0369a1);
  border: 1.5px solid #38bdf8;
  color: #ffffff;
  padding: 10px 20px;
  border-radius: 8px;
  font-weight: 900;
  font-size: 0.84rem;
  cursor: pointer;
  box-shadow: 0 0 16px rgba(56, 189, 248, 0.4);
  transition: all 0.2s ease;
}

.btn-av-scan-pulse:hover:not(:disabled) {
  background: #38bdf8;
  color: #000;
  box-shadow: 0 0 24px rgba(56, 189, 248, 0.7);
  transform: scale(1.02);
}

.btn-av-scan-pulse:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.av-progress-track {
  width: 100%;
  height: 18px;
  background: rgba(2, 6, 23, 0.9);
  border-radius: 9px;
  overflow: hidden;
  position: relative;
  border: 1px solid rgba(56, 189, 248, 0.25);
}

.av-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #0284c7, #00f0ff, #10b981);
  transition: width 0.3s ease;
  box-shadow: 0 0 12px #00f0ff;
}

.av-progress-label {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 0.68rem;
  font-weight: 900;
  color: #ffffff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
}

/* Siber Terminal */
.av-terminal-wrap {
  background: rgba(3, 7, 18, 0.95);
  border: 1px solid rgba(56, 189, 248, 0.3);
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 16px;
}

.av-term-bar {
  background: rgba(15, 23, 42, 0.9);
  padding: 6px 12px;
  font-size: 0.7rem;
  font-weight: 800;
  color: #94a3b8;
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.av-terminal-content {
  height: 130px;
  overflow-y: auto;
  padding: 8px 12px;
  font-family: monospace, 'Courier New', Courier;
  font-size: 0.74rem;
  line-height: 1.5;
}

.term-line {
  margin-bottom: 4px;
}

.term-line.info { color: #38bdf8; }
.term-line.warning { color: #fbbf24; }
.term-line.danger { color: #f87171; font-weight: 700; }
.term-line.success { color: #34d399; }
.term-time { color: #64748b; margin-right: 6px; }
.term-mod { color: #94a3b8; font-weight: 700; margin-right: 6px; }

/* Alt Satır & Simülasyon */
.av-footer-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.av-sim-group {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.btn-av-sim {
  background: rgba(30, 41, 59, 0.8);
  border: 1px solid #64748b;
  color: #cbd5e1;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 0.72rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-av-sim:hover {
  background: #334155;
  color: #ffffff;
  border-color: #94a3b8;
}

.btn-av-sim.sim-danger {
  background: rgba(185, 28, 28, 0.45);
  border-color: #ef4444;
  color: #fca5a5;
}

.btn-av-sim.sim-danger:hover {
  background: #dc2626;
  color: #ffffff;
  box-shadow: 0 0 12px rgba(239, 68, 68, 0.6);
}

.btn-av-sim.sim-ban {
  background: linear-gradient(135deg, #7f1d1d, #991b1b);
  border-color: #f87171;
  color: #ffffff;
  animation: avPulseBan 1.8s infinite alternate;
}

.btn-av-sim.sim-ban:hover {
  background: #b91c1c;
  box-shadow: 0 0 16px rgba(248, 113, 113, 0.8);
}

@keyframes avPulseBan {
  0% { box-shadow: 0 0 4px rgba(239, 68, 68, 0.3); }
  100% { box-shadow: 0 0 14px rgba(239, 68, 68, 0.85); }
}

/* Tehdit Skoru (Threat Meter) */
.av-threat-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: rgba(15, 23, 42, 0.8);
  border: 1px solid rgba(239, 68, 68, 0.35);
  border-radius: 8px;
  padding: 8px 14px;
  margin-bottom: 14px;
}

.av-threat-track {
  flex: 1;
  height: 14px;
  background: rgba(0, 0, 0, 0.7);
  border-radius: 7px;
  overflow: hidden;
  position: relative;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.av-threat-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #10b981 0%, #f59e0b 50%, #ef4444 85%, #dc2626 100%);
  transition: width 0.4s ease;
  box-shadow: 0 0 8px rgba(239, 68, 68, 0.6);
}

/* =========================================================
   AUTHENTIC CHROME SECURITY WARNING: BAĞLANTINIZ GİZLİ DEĞİL
   (Kural İhlali, Cihaz/Donanım ve Hesap Banı Mührü)
   ========================================================= */
#ban-hammer-overlay,
#chrome-security-error-overlay {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  max-width: 100vw !important;
  height: 100vh !important;
  max-height: 100vh !important;
  z-index: 2147483647 !important;
  background-color: #202124 !important;
  color: #e8eaed !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  align-items: center !important;
  padding: 0 !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  user-select: text !important;
  -webkit-font-smoothing: antialiased !important;
}

/* Üst Sahte Chrome Sekme & Adres Çubuğu (Video Birebir Eşleşmesi) */
.chrome-top-bar {
  width: 100%;
  background: #292a2d;
  border-bottom: 1px solid #3c4043;
  padding: 8px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-sizing: border-box;
}

.chrome-tab-indicator {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #202124;
  color: #e8eaed;
  padding: 6px 14px;
  border-radius: 8px 8px 0 0;
  font-size: 12px;
  font-weight: 500;
  max-width: 220px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chrome-omnibox {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #18191b;
  border-radius: 20px;
  padding: 6px 14px;
  flex: 1;
  max-width: 780px;
  font-size: 13px;
  color: #9aa0a6;
}

.chrome-insecure-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #ea4335;
  font-weight: 500;
  font-size: 12px;
}

.chrome-insecure-badge svg {
  width: 14px;
  height: 14px;
  fill: #ea4335;
  flex-shrink: 0;
}

.chrome-omnibox-url {
  color: #e8eaed;
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Ana İçerik Alanı */
.chrome-ssl-content {
  max-width: 620px;
  width: min(90vw, 620px);
  margin: 48px auto 60px auto;
  text-align: left;
  box-sizing: border-box;
}

/* Kırmızı Üçgen İkonu */
.chrome-ssl-icon-wrap {
  margin-bottom: 24px;
}

.chrome-ssl-icon-svg {
  width: 48px;
  height: 48px;
  display: block;
}

/* Başlık */
.chrome-ssl-title {
  font-size: 24px;
  font-weight: 500;
  color: #e8eaed;
  margin: 0 0 16px 0;
  letter-spacing: normal;
  line-height: 1.35;
}

/* Açıklama Metni */
.chrome-ssl-desc {
  font-size: 14px;
  line-height: 1.6;
  color: #9aa0a6;
  margin: 0 0 16px 0;
}

.chrome-ssl-desc strong {
  color: #e8eaed;
}

.chrome-ssl-link {
  color: #8ab4f8;
  text-decoration: underline;
  cursor: pointer;
}

/* Hata Kodu */
.chrome-ssl-error-code {
  font-size: 11px;
  color: #9aa0a6;
  font-family: monospace, monospace;
  letter-spacing: 0.5px;
  margin: 16px 0 36px 0;
}

/* Butonlar */
.chrome-ssl-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-top: 24px;
}

.chrome-btn-advanced {
  background: transparent;
  border: 1px solid #5f6368;
  color: #8ab4f8;
  font-size: 13px;
  font-weight: 500;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  outline: none;
}

.chrome-btn-advanced:hover {
  background: rgba(138, 180, 248, 0.08);
  border-color: #8ab4f8;
}

.chrome-btn-reload {
  background: #8ab4f8;
  color: #202124;
  border: none;
  font-size: 13px;
  font-weight: 500;
  padding: 9px 24px;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.15s, box-shadow 0.15s;
  outline: none;
}

.chrome-btn-reload:hover {
  background: #93bbf9;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

/* Gelişmiş Tıklanınca Açılan Bölüm */
.chrome-ssl-advanced-details {
  display: none;
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid #3c4043;
  font-size: 13px;
  line-height: 1.6;
  color: #9aa0a6;
}

.chrome-ssl-advanced-details p {
  margin: 0 0 14px 0;
}

.chrome-ssl-ban-callout {
  background: rgba(234, 67, 53, 0.1);
  border-left: 3px solid #ea4335;
  padding: 12px 16px;
  border-radius: 4px;
  margin-top: 18px;
  color: #f28b82;
  font-size: 13px;
  line-height: 1.5;
}

.chrome-ssl-ban-callout strong {
  color: #ea4335;
  display: block;
  margin-bottom: 4px;
}

/* Gizli Yönetici Kilidi */
.chrome-admin-unlock-trigger {
  opacity: 0.15;
  transition: opacity 0.2s;
  cursor: pointer;
  display: inline-block;
  margin-top: 20px;
  font-size: 11px;
  color: #9aa0a6;
}
.chrome-admin-unlock-trigger:hover {
  opacity: 0.8;
  color: #8ab4f8;
}

/* Mobil Telefon Uyumu (Telefondan felan) */
@media (max-width: 600px) {
  #ban-hammer-overlay,
  #chrome-security-error-overlay {
    padding: 24px 20px !important;
    align-items: stretch !important;
    box-sizing: border-box !important;
  }
  .chrome-top-bar {
    display: none !important; /* Mobilde yerel mobil Chrome çubuğu olduğu için üst bar gizlenir */
  }
  .chrome-ssl-content {
    margin: 16px 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  .chrome-ssl-title {
    font-size: 20px !important;
    margin-bottom: 12px !important;
  }
  .chrome-ssl-desc {
    font-size: 13px !important;
    line-height: 1.5 !important;
    word-break: break-word !important;
  }
  .chrome-ssl-icon-svg {
    width: 42px !important;
    height: 42px !important;
  }
  .chrome-ssl-error-code {
    font-size: 10px !important;
    word-break: break-all !important;
    margin: 12px 0 24px 0 !important;
  }
  .chrome-ssl-actions {
    display: flex !important;
    flex-direction: row !important;
    justify-content: flex-start !important;
    align-items: center !important;
    gap: 12px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  .chrome-btn-advanced, .chrome-btn-reload {
    padding: 8px 14px !important;
    font-size: 13px !important;
    white-space: nowrap !important;
  }
}

/* =========================================================
   🤖 7/24 YAPAY ZEKA NÖBETÇİ GÖZLEMCİ & ANINDA ŞİKAYET STİLLERİ
   ========================================================= */

/* Kayan Yapay Zeka Şikayet Bildirimi (AI Toast Container) */
.ai-toast-container {
  position: fixed;
  top: 24px;
  right: 24px;
  z-index: 999999;
  display: flex;
  flex-direction: column;
  gap: 12px;
  pointer-events: none;
  max-width: 440px;
  width: calc(100vw - 48px);
}

.ai-complaint-toast {
  pointer-events: auto;
  background: rgba(10, 15, 30, 0.95);
  border: 1.5px solid #ef4444;
  border-radius: 12px;
  padding: 14px 16px;
  display: flex;
  gap: 14px;
  align-items: flex-start;
  box-shadow: 0 8px 32px rgba(239, 68, 68, 0.35), 0 0 15px rgba(255, 23, 68, 0.2);
  backdrop-filter: blur(12px);
  animation: aiToastSlide 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.ai-complaint-toast::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: linear-gradient(180deg, #ef4444, #f59e0b, #ef4444);
  box-shadow: 0 0 10px #ef4444;
}

.ai-complaint-toast.ai-toast-fadeout {
  opacity: 0;
  transform: translateX(100px);
}

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

.ai-toast-icon-wrap {
  position: relative;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(239, 68, 68, 0.15);
  border: 1px solid rgba(239, 68, 68, 0.4);
  border-radius: 10px;
}

.ai-toast-pulse {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 10px;
  border: 1.5px solid #ef4444;
  animation: aiToastRing 1.8s infinite;
}

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

.ai-toast-icon {
  font-size: 1.4rem;
}

.ai-toast-body {
  flex: 1;
  min-width: 0;
}

.ai-toast-badge-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
  flex-wrap: wrap;
}

.ai-badge-red {
  background: #dc2626;
  color: #fff;
  font-size: 0.65rem;
  font-weight: 900;
  padding: 2px 7px;
  border-radius: 4px;
  letter-spacing: 0.05em;
  box-shadow: 0 0 8px rgba(220, 38, 38, 0.6);
}

.ai-badge-id {
  background: rgba(56, 189, 248, 0.15);
  border: 1px solid rgba(56, 189, 248, 0.4);
  color: #38bdf8;
  font-size: 0.65rem;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 4px;
}

.ai-badge-conf {
  background: rgba(16, 185, 129, 0.15);
  border: 1px solid rgba(16, 185, 129, 0.4);
  color: #34d399;
  font-size: 0.65rem;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 4px;
}

.ai-toast-title {
  font-size: 0.86rem;
  color: #f1f5f9;
  font-weight: 700;
  margin-bottom: 2px;
}

.ai-toast-reason {
  font-size: 0.74rem;
  color: #cbd5e1;
  line-height: 1.4;
  margin-bottom: 8px;
}

.ai-toast-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.68rem;
  color: #94a3b8;
}

.btn-ai-toast-view {
  background: linear-gradient(135deg, #0284c7, #0369a1);
  color: #fff;
  border: none;
  border-radius: 5px;
  padding: 4px 10px;
  font-size: 0.7rem;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-ai-toast-view:hover {
  background: #38bdf8;
  color: #000;
  box-shadow: 0 0 10px #38bdf8;
}

/* 🤖 7/24 Yapay Zeka Nöbetçi Paneli (Modal İçi) */
.ai-sentinel-panel {
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.9), rgba(8, 12, 24, 0.95));
  border: 1.5px solid rgba(0, 240, 255, 0.35);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 16px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5), inset 0 0 20px rgba(0, 240, 255, 0.05);
  position: relative;
}

.ai-sentinel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

.ai-header-left {
  display: flex;
  align-items: center;
  gap: 14px;
}

.ai-pulse-indicator {
  position: relative;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.ai-beacon-dot {
  position: absolute;
  top: 5px;
  left: 5px;
  width: 10px;
  height: 10px;
  background: #10b981;
  border-radius: 50%;
  box-shadow: 0 0 10px #10b981;
}

.ai-beacon-ping {
  position: absolute;
  top: 0;
  left: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid #10b981;
  animation: aiBeaconPing 1.8s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}

@keyframes aiBeaconPing {
  0% { transform: scale(0.5); opacity: 1; }
  100% { transform: scale(1.8); opacity: 0; }
}

.ai-panel-title {
  margin: 0 0 3px 0;
  font-size: 1.05rem;
  font-weight: 900;
  color: #00f0ff;
  letter-spacing: 0.04em;
  text-shadow: 0 0 12px rgba(0, 240, 255, 0.4);
}

.ai-panel-sub {
  margin: 0;
  font-size: 0.76rem;
  color: #94a3b8;
  max-width: 620px;
  line-height: 1.4;
}

.ai-stats-pill-group {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

.ai-pill {
  background: rgba(3, 7, 18, 0.8);
  border: 1px solid rgba(56, 189, 248, 0.25);
  border-radius: 8px;
  padding: 6px 10px;
  text-align: center;
  min-width: 100px;
}

.ai-pill small {
  display: block;
  font-size: 0.58rem;
  color: #64748b;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.ai-pill b {
  font-size: 0.78rem;
  color: #38bdf8;
  font-weight: 900;
}

/* Yapay Zeka Sekme Gezgini */
.ai-nav-tabs {
  display: flex;
  gap: 10px;
  border-bottom: 1px solid rgba(56, 189, 248, 0.2);
  margin-bottom: 14px;
}

.ai-tab-btn {
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: #94a3b8;
  font-size: 0.8rem;
  font-weight: 800;
  padding: 8px 14px;
  cursor: pointer;
  transition: all 0.2s;
}

.ai-tab-btn:hover {
  color: #00f0ff;
}

.ai-tab-btn.active {
  color: #00f0ff;
  border-bottom-color: #00f0ff;
  text-shadow: 0 0 10px rgba(0, 240, 255, 0.5);
}

/* Canlı Kimlik Matrisi Araç Çubuğu ve Tablosu */
.ai-matrix-toolbar, .ai-reports-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.btn-ai-action {
  background: rgba(15, 23, 42, 0.8);
  border: 1px solid #38bdf8;
  color: #38bdf8;
  border-radius: 6px;
  padding: 6px 12px;
  font-size: 0.72rem;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-ai-action:hover {
  background: #38bdf8;
  color: #000;
  box-shadow: 0 0 12px rgba(56, 189, 248, 0.6);
}

.ai-matrix-table-wrap {
  max-height: 240px;
  overflow-y: auto;
  border: 1px solid rgba(56, 189, 248, 0.2);
  border-radius: 8px;
  background: rgba(2, 6, 23, 0.8);
}

.ai-matrix-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  font-size: 0.75rem;
}

.ai-matrix-table th {
  background: rgba(15, 23, 42, 0.95);
  color: #94a3b8;
  font-weight: 800;
  padding: 8px 12px;
  border-bottom: 1px solid rgba(56, 189, 248, 0.25);
  position: sticky;
  top: 0;
  z-index: 2;
  letter-spacing: 0.04em;
}

.ai-matrix-table td {
  padding: 8px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  color: #cbd5e1;
  vertical-align: middle;
}

.ai-matrix-table tr:hover {
  background: rgba(56, 189, 248, 0.08);
}

.ai-badge-class {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 4px;
}

.identity-human {
  background: rgba(16, 185, 129, 0.15);
  color: #34d399;
  border: 1px solid rgba(16, 185, 129, 0.4);
}

.identity-suspect {
  background: rgba(245, 158, 11, 0.15);
  color: #fbbf24;
  border: 1px solid rgba(245, 158, 11, 0.4);
}

.identity-bot, .identity-hacker {
  background: rgba(239, 68, 68, 0.15);
  color: #f87171;
  border: 1px solid rgba(239, 68, 68, 0.4);
}

.ai-trust-bar-wrap {
  width: 90px;
  height: 8px;
  background: rgba(0, 0, 0, 0.6);
  border-radius: 4px;
  overflow: hidden;
  position: relative;
  border: 1px solid rgba(255, 255, 255, 0.1);
  display: inline-block;
  vertical-align: middle;
  margin-right: 6px;
}

.ai-trust-bar-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 0.3s ease;
}

.trust-high { background: #10b981; }
.trust-mid { background: #f59e0b; }
.trust-low { background: #ef4444; }

/* Şikayet Kartları Listesi */
.ai-reports-list {
  max-height: 240px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ai-report-item {
  background: rgba(15, 23, 42, 0.7);
  border: 1px solid rgba(239, 68, 68, 0.3);
  border-radius: 8px;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  transition: all 0.2s;
}

.ai-report-item:hover {
  border-color: #ef4444;
  background: rgba(15, 23, 42, 0.9);
  box-shadow: 0 2px 12px rgba(239, 68, 68, 0.2);
}

.ai-report-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ai-report-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.76rem;
}

.ai-report-id {
  color: #38bdf8;
  font-weight: 900;
}

.ai-report-target {
  color: #f1f5f9;
  font-weight: 700;
}

.ai-report-meta {
  font-size: 0.7rem;
  color: #94a3b8;
}

.ai-report-actions {
  display: flex;
  gap: 6px;
}

.btn-ai-sm {
  background: rgba(56, 189, 248, 0.15);
  border: 1px solid #38bdf8;
  color: #38bdf8;
  border-radius: 5px;
  padding: 4px 8px;
  font-size: 0.68rem;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-ai-sm:hover {
  background: #38bdf8;
  color: #000;
}

.btn-ai-ban {
  background: rgba(239, 68, 68, 0.15);
  border: 1px solid #ef4444;
  color: #f87171;
  border-radius: 5px;
  padding: 4px 8px;
  font-size: 0.68rem;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-ai-ban:hover {
  background: #ef4444;
  color: #fff;
  box-shadow: 0 0 10px #ef4444;
}

/* Adli İnceleme Dosyası Modalı (#ai-dossier-modal) */
.ai-dossier-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  z-index: 1000000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  backdrop-filter: blur(8px);
}

.ai-dossier-card {
  background: rgba(10, 15, 30, 0.98);
  border: 2px solid #00f0ff;
  border-radius: 14px;
  width: 100%;
  max-width: 650px;
  box-shadow: 0 0 35px rgba(0, 240, 255, 0.3);
  padding: 24px;
  color: #f1f5f9;
}

.ai-dossier-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(0, 240, 255, 0.3);
  padding-bottom: 14px;
  margin-bottom: 16px;
}

.ai-dossier-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(56, 189, 248, 0.2);
  border-radius: 8px;
  padding: 12px;
  margin-bottom: 16px;
}

.ai-dossier-item small {
  display: block;
  font-size: 0.65rem;
  color: #64748b;
  text-transform: uppercase;
  font-weight: 800;
}

.ai-dossier-item b {
  font-size: 0.88rem;
  color: #38bdf8;
}

.ai-dossier-telemetry {
  background: #020617;
  border: 1px solid #1e293b;
  border-radius: 8px;
  padding: 10px;
  font-family: monospace;
  font-size: 0.72rem;
  color: #34d399;
  max-height: 120px;
  overflow-y: auto;
  margin-bottom: 16px;
}

.ai-dossier-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

/* =========================================================
   KOGANE (CULLING GAME SHIKIGAMI) & AI COMPANION STYLES
   ========================================================= */

#kogane-companion {
  position: fixed !important;
  z-index: 2147483647 !important;
  pointer-events: auto !important;
  isolation: isolate !important;
  touch-action: none !important;
}

#kogane-bubble {
  z-index: 2147483647 !important;
  pointer-events: auto !important;
}

#kogane-visual {
  animation: koganePixelSway 3.2s ease-in-out infinite alternate;
}

@keyframes koganePixelSway {
  0% { transform: translateY(0px) rotate(0deg); }
  50% { transform: translateY(-3px) rotate(1.2deg); }
  100% { transform: translateY(2px) rotate(-1.2deg); }
}

/* Dönen Yıldızlar (Dizzy Hali) */
#kogane-stars {
  display: flex;
  justify-content: space-between;
  align-items: center;
  animation: koganeStarBob 0.6s ease-in-out infinite alternate;
}

.kogane-star {
  font-size: 13px;
  display: inline-block;
  animation: koganeStarSpin 1.2s linear infinite;
  filter: drop-shadow(0 0 4px #facc15);
}

.star-1 { animation-delay: 0s; }
.star-2 { animation-delay: 0.35s; font-size: 11px; }
.star-3 { animation-delay: 0.7s; }

@keyframes koganeStarSpin {
  0% { transform: rotate(0deg) scale(0.9); }
  50% { transform: rotate(180deg) scale(1.2); }
  100% { transform: rotate(360deg) scale(0.9); }
}

@keyframes koganeStarBob {
  0% { transform: translateY(0px); }
  100% { transform: translateY(-4px); }
}

/* Panik Ter Damlası */
#kogane-sweatdrop {
  animation: koganeSweatDrop 0.5s ease-in-out infinite alternate;
  filter: drop-shadow(0 0 5px #38bdf8);
}

@keyframes koganeSweatDrop {
  0% { transform: translateY(0) scale(0.9); }
  100% { transform: translateY(3px) scale(1.15); }
}

/* Konuşma Baloncuğu & İnteraktif Çipler */
#kogane-bubble {
  animation: koganeBubblePop 0.22s cubic-bezier(0.18, 0.9, 0.32, 1.25);
}

@keyframes koganeBubblePop {
  0% { transform: scale(0.85) translateY(12px); opacity: 0; }
  100% { transform: scale(1.0) translateY(0); opacity: 1; }
}

.kogane-chip {
  background: rgba(251, 191, 36, 0.12);
  border: 1px solid rgba(251, 191, 36, 0.4);
  color: #fef08a;
  border-radius: 6px;
  padding: 3px 7px;
  font-size: 10px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s ease;
  user-select: none;
}

.kogane-chip:hover {
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: #000;
  border-color: #fef08a;
  transform: translateY(-1px);
  box-shadow: 0 0 8px rgba(251, 191, 36, 0.6);
}

.kogane-chip:active {
  transform: scale(0.95);
}

#kogane-think-badge {
  animation: koganeThinkPulse 0.8s ease-in-out infinite;
}

@keyframes koganeThinkPulse {
  0%, 100% { opacity: 0.75; transform: scale(0.96); }
  50% { opacity: 1; transform: scale(1.05); }
}

/* ==============================================================
   MANGA DİYALOG ŞABLONLARI & ANİME EFEKTLERİ
   ============================================================== */
.manga-bubble {
  border-radius: 14px;
  padding: 12px 14px;
  font-family: 'Inter', system-ui, sans-serif;
  color: #f8fafc;
  transition: all 0.22s cubic-bezier(0.18, 0.9, 0.32, 1.25);
  box-shadow: 0 12px 35px rgba(0,0,0,0.85);
  position: relative;
}

.manga-bubble-arrow {
  position: absolute;
  bottom: -9px;
  right: 34px;
  width: 0;
  height: 0;
  border-left: 9px solid transparent;
  border-right: 9px solid transparent;
  transition: border-color 0.2s ease;
}

/* 1. SEVİNME MANGA ŞABLONU (Happy) */
.manga-theme-happy {
  background: linear-gradient(135deg, rgba(28, 22, 12, 0.98), rgba(15, 23, 42, 0.99)) !important;
  border: 2px solid #fbbf24 !important;
  box-shadow: 0 0 25px rgba(251, 191, 36, 0.4), 0 12px 35px rgba(0,0,0,0.9) !important;
  color: #fef08a !important;
}
.manga-theme-happy .manga-bubble-arrow {
  border-top: 9px solid #fbbf24;
}
.manga-theme-happy #kogane-manga-tag {
  color: #fde047;
  text-shadow: 0 0 6px rgba(253, 224, 71, 0.5);
}

/* 2. KIZMA & CİDDİYET MANGA ŞABLONU (Angry - Spiky Rumble) */
.manga-theme-angry {
  background: linear-gradient(135deg, rgba(48, 10, 10, 0.98), rgba(20, 5, 5, 0.99)) !important;
  border: 2.2px solid #ef4444 !important;
  box-shadow: 0 0 30px rgba(239, 68, 68, 0.65), 0 12px 35px rgba(0,0,0,0.95) !important;
  color: #fecaca !important;
  animation: koganeAngryRumble 0.18s ease-in-out infinite alternate, koganeBubblePop 0.22s ease-out !important;
}
.manga-theme-angry .manga-bubble-arrow {
  border-top: 9px solid #ef4444;
}
.manga-theme-angry #kogane-manga-tag {
  color: #f87171;
  text-shadow: 0 0 8px #ef4444;
}
@keyframes koganeAngryRumble {
  0% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-1.5px, 1px) scale(1.01); }
  100% { transform: translate(1.5px, -1px) scale(0.99); }
}

/* 3. DUYGULANMA MANGA ŞABLONU (Touched - Gözyaşı & Minnettarlık) */
.manga-theme-touched {
  background: linear-gradient(135deg, rgba(38, 15, 32, 0.98), rgba(15, 23, 42, 0.99)) !important;
  border: 2px solid #f472b6 !important;
  box-shadow: 0 0 25px rgba(244, 114, 182, 0.45), 0 12px 35px rgba(0,0,0,0.9) !important;
  color: #fce7f3 !important;
}
.manga-theme-touched .manga-bubble-arrow {
  border-top: 9px solid #f472b6;
}
.manga-theme-touched #kogane-manga-tag {
  color: #f472b6;
  text-shadow: 0 0 6px rgba(244, 114, 182, 0.5);
}

/* 4. MAÇ BİTİNCE GURURLANDIRMA MANGA ŞABLONU (Proud - Şampiyon Zaferi) */
.manga-theme-proud {
  background: linear-gradient(135deg, rgba(40, 30, 6, 0.98), rgba(15, 23, 42, 0.99)) !important;
  border: 2.5px solid #fde047 !important;
  box-shadow: 0 0 35px rgba(253, 224, 71, 0.65), 0 12px 35px rgba(0,0,0,0.95) !important;
  color: #fef9c3 !important;
}
.manga-theme-proud .manga-bubble-arrow {
  border-top: 9px solid #fde047;
}
.manga-theme-proud #kogane-manga-tag {
  color: #fde047;
  text-shadow: 0 0 10px #eab308;
}

/* 5. MAÇ KAYBEDİNCE MOTİVE VE SEVİNDİRME MANGA ŞABLONU (Cheer Up) */
.manga-theme-cheer_up {
  background: linear-gradient(135deg, rgba(12, 32, 40, 0.98), rgba(15, 23, 42, 0.99)) !important;
  border: 2px solid #38bdf8 !important;
  box-shadow: 0 0 25px rgba(56, 189, 248, 0.5), 0 12px 35px rgba(0,0,0,0.9) !important;
  color: #e0f2fe !important;
}
.manga-theme-cheer_up .manga-bubble-arrow {
  border-top: 9px solid #38bdf8;
}
.manga-theme-cheer_up #kogane-manga-tag {
  color: #38bdf8;
  text-shadow: 0 0 8px rgba(56, 189, 248, 0.6);
}

/* 6. PANİK & ACİL DURUM MANGA ŞABLONU (Panic - Titreyen Çizgiler) */
.manga-theme-panic {
  background: linear-gradient(135deg, rgba(18, 25, 45, 0.98), rgba(10, 15, 30, 0.99)) !important;
  border: 2px solid #60a5fa !important;
  box-shadow: 0 0 25px rgba(96, 165, 250, 0.55), 0 12px 35px rgba(0,0,0,0.9) !important;
  color: #dbeafe !important;
  animation: koganePanicShudder 0.2s ease-in-out infinite alternate !important;
}
.manga-theme-panic .manga-bubble-arrow {
  border-top: 9px solid #60a5fa;
}
.manga-theme-panic #kogane-manga-tag {
  color: #60a5fa;
  text-shadow: 0 0 8px #3b82f6;
}
@keyframes koganePanicShudder {
  0% { transform: translateY(0); }
  100% { transform: translateY(-2px); }
}

/* 7. TAKTİK & SIR MANGA ŞABLONU (Tactics & Secret) */
.manga-theme-tactics, .manga-theme-secret {
  background: linear-gradient(135deg, rgba(10, 25, 30, 0.98), rgba(15, 23, 42, 0.99)) !important;
  border: 2px solid #22d3ee !important;
  box-shadow: 0 0 25px rgba(34, 211, 238, 0.45), 0 12px 35px rgba(0,0,0,0.9) !important;
  color: #cffafe !important;
}
.manga-theme-tactics .manga-bubble-arrow, .manga-theme-secret .manga-bubble-arrow {
  border-top: 9px solid #22d3ee;
}
.manga-theme-tactics #kogane-manga-tag, .manga-theme-secret #kogane-manga-tag {
  color: #22d3ee;
}

/* 8. KOKUSEN & SUKUNA MANGA ŞABLONU (Cursed Energy & Lightning) */
.manga-theme-kokusen, .manga-theme-sukuna {
  background: linear-gradient(135deg, rgba(32, 10, 15, 0.98), rgba(10, 10, 15, 0.99)) !important;
  border: 2.2px solid #ef4444 !important;
  box-shadow: 0 0 35px rgba(239, 68, 68, 0.6), 0 0 15px rgba(0, 0, 0, 0.9) !important;
  color: #fee2e2 !important;
}
.manga-theme-kokusen .manga-bubble-arrow, .manga-theme-sukuna .manga-bubble-arrow {
  border-top: 9px solid #ef4444;
}
.manga-theme-kokusen #kogane-manga-tag, .manga-theme-sukuna #kogane-manga-tag {
  color: #ef4444;
  text-shadow: 0 0 8px #b91c1c;
}

/* 9. ON GÖLGE MANGA ŞABLONU (Megumi Shadow) */
.manga-theme-megumi {
  background: linear-gradient(135deg, rgba(20, 20, 45, 0.98), rgba(10, 12, 28, 0.99)) !important;
  border: 2px solid #818cf8 !important;
  box-shadow: 0 0 25px rgba(129, 140, 248, 0.45) !important;
  color: #e0e7ff !important;
}
.manga-theme-megumi .manga-bubble-arrow {
  border-top: 9px solid #818cf8;
}

/* 10. FAL & TURBO MANGA ŞABLONU (Fortune & Speed) */
.manga-theme-fortune {
  background: linear-gradient(135deg, rgba(35, 15, 45, 0.98), rgba(15, 20, 35, 0.99)) !important;
  border: 2px solid #c084fc !important;
  box-shadow: 0 0 25px rgba(192, 132, 252, 0.45) !important;
  color: #f3e8ff !important;
}
.manga-theme-fortune .manga-bubble-arrow {
  border-top: 9px solid #c084fc;
}

.manga-theme-speed, .manga-theme-warrior {
  background: linear-gradient(135deg, rgba(35, 25, 10, 0.98), rgba(15, 23, 42, 0.99)) !important;
  border: 2px solid #f97316 !important;
  box-shadow: 0 0 25px rgba(249, 115, 22, 0.45) !important;
  color: #ffedd5 !important;
}
.manga-theme-speed .manga-bubble-arrow, .manga-theme-warrior .manga-bubble-arrow {
  border-top: 9px solid #f97316;
}

/* ÖFKE DAMARI ANİMASYONU (💢) */
@keyframes koganeAngerPulse {
  0%, 100% { transform: scale(1.0) rotate(0deg); }
  50% { transform: scale(1.25) rotate(8deg); }
}

/* YÖNLÜ SÜZÜLME FRAMELERİ (Sağ, Sol, Yukarı, Aşağı) */
.glide-dir-left {
  transform: rotate(-12deg) scale(0.98, 1.0) !important;
}
.glide-dir-right {
  transform: rotate(12deg) scale(0.98, 1.0) !important;
}
.glide-dir-up {
  transform: rotate(0deg) scale(0.96, 1.05) !important;
}
.glide-dir-down {
  transform: rotate(0deg) scale(1.05, 0.96) !important;
}
.glide-dir-idle {
  transform: rotate(0deg) scale(1.0, 1.0) !important;
}

/* =========================================================================
   🗯️ KOGANE TAUNT BUBBLE & ACTION BUTTONS GLOBAL FALLBACK
   ========================================================================= */
#kogane-assistant-container {
  overflow: visible !important;
}
.kogane-taunt-bubble {
  position: absolute !important;
  bottom: calc(100% + 8px) !important;
  left: 50% !important;
  transform: translateX(-50%) scale(0.92);
  width: 175px !important;
  max-width: calc(100vw - 20px) !important;
  background: #ffffff !important;
  border: 2.5px solid #000000 !important;
  outline: 2.5px solid rgba(255, 255, 255, 0.95) !important;
  padding: 6px 8px !important;
  z-index: 2147483647 !important;
  border-radius: 4px !important;
  box-shadow: 0 4px 0px rgba(0, 0, 0, 0.7), 0 0 16px rgba(254, 240, 138, 0.55) !important;
  font-family: 'Cinzel', 'Pixelify Sans', monospace !important;
  pointer-events: auto !important;
  user-select: none !important;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s cubic-bezier(0.16, 1, 0.3, 1), transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.2s !important;
  overflow: visible !important;
  color: #000000 !important;
  box-sizing: border-box !important;
}
.kogane-taunt-bubble.taunt-visible {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateX(-50%) scale(1.0) !important;
}
.taunt-sfx-tag {
  position: relative !important;
  display: inline-block !important;
  background: #000000 !important;
  color: #fde047 !important;
  font-size: 8.5px !important;
  font-weight: 900 !important;
  padding: 1.5px 5px !important;
  border-radius: 2px !important;
  margin-bottom: 3px !important;
  border: 1px solid #fff !important;
  box-shadow: 1px 1px 0 #000 !important;
  max-width: 100% !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  box-sizing: border-box !important;
}
.taunt-text-content {
  position: relative !important;
  color: #000000 !important;
  font-size: 10.5px !important;
  line-height: 1.32 !important;
  font-weight: 800 !important;
  min-height: 18px !important;
  word-break: break-word !important;
}
.taunt-arrow-down {
  position: absolute !important;
  bottom: -8px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 0 !important;
  height: 0 !important;
  border-left: 6px solid transparent !important;
  border-right: 6px solid transparent !important;
  border-top: 8px solid #000000 !important;
  z-index: 4 !important;
}
.taunt-arrow-down::after {
  content: '' !important;
  position: absolute !important;
  bottom: 2px !important;
  left: -4.5px !important;
  width: 0 !important;
  height: 0 !important;
  border-left: 4.5px solid transparent !important;
  border-right: 4.5px solid transparent !important;
  border-top: 6px solid #ffffff !important;
}
.taunt-flipped {
  bottom: auto !important;
  top: calc(100% + 8px) !important;
}
.taunt-flipped .taunt-arrow-down {
  bottom: auto !important;
  top: -8px !important;
  border-top: none !important;
  border-bottom: 8px solid #000000 !important;
}
.taunt-flipped .taunt-arrow-down::after {
  bottom: auto !important;
  top: 2px !important;
  border-top: none !important;
  border-bottom: 6px solid #ffffff !important;
}
.taunt-shift-right {
  left: 0px !important;
  transform: translateX(0) scale(1.0) !important;
}
.taunt-shift-right .taunt-arrow-down {
  left: 28px !important;
  transform: none !important;
}
.taunt-shift-left {
  left: auto !important;
  right: 0px !important;
  transform: translateX(0) scale(1.0) !important;
}
.taunt-shift-left .taunt-arrow-down {
  left: auto !important;
  right: 28px !important;
  transform: none !important;
}
.taunt-action-bar {
  display: flex !important;
  gap: 4px !important;
  margin-top: 4px !important;
  padding-top: 4px !important;
  border-top: 1px dashed rgba(0, 0, 0, 0.25) !important;
  position: relative !important;
  z-index: 5 !important;
}
.taunt-mini-btn {
  flex: 1 1 auto !important;
  padding: 3px 5px !important;
  font-size: 8.5px !important;
  font-weight: 800 !important;
  border: 1.5px solid #000000 !important;
  border-radius: 3px !important;
  cursor: pointer !important;
  background: #ffffff !important;
  color: #0f172a !important;
  text-align: center !important;
  white-space: nowrap !important;
  box-shadow: 1px 1px 0px #000000 !important;
}
.taunt-mini-btn.btn-pet {
  background: #fdf2f8 !important;
  color: #9d174d !important;
  border-color: #ec4899 !important;
}
.taunt-mini-btn.btn-quest {
  background: #fefce8 !important;
  color: #854d0e !important;
  border-color: #ca8a04 !important;
}

/* =========================================================
   SHOP GPU & FPS OPTİMİZASYON PAKETİ (SIFIR REPAINT / 60+ FPS)
   ========================================================= */

/* 1. MODAL ARKA PLANLARI: Pahalı backdrop-filter yerine opak/yarı-opak GPU dostu katman */
#shop-modal,
#payment-modal,
#payment-terms-modal {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  background-color: rgba(8, 11, 20, 0.94) !important;
  contain: layout style paint;
  will-change: opacity;
}

/* 2. KAYDIRILABİLİR KART IZGARASI (GRID): Ekran dışı yeniden hesaplamaları izole et */
#shop-items-grid {
  contain: layout style;
  transform: translateZ(0); /* Tek bir GPU katmanı oluşturur */
  -webkit-overflow-scrolling: touch;
  scroll-behavior: auto !important; /* Smooth scroll ağır DOM'da takılma yaratır */
}

/* 3. MAĞAZA KARTLARI: Sadece ekranda görünenleri çiz + İzolasyon */
.shop-card {
  position: relative;
  /* Ekran dışındaki kartların boyanmasını (Paint) tamamen atlar: */
  content-visibility: auto;
  contain-intrinsic-size: 220px 280px;
  contain: layout style paint;

  /* 'transition: all' YASAK! Sadece GPU'nun 0ms'de işlediği transform ve border-color */
  transition: transform 0.14s cubic-bezier(0.2, 0, 0.2, 1),
              border-color 0.14s ease !important;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.45) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  backface-visibility: hidden;
}

/* Hover ve Spotlight durumunda box-shadow'u yeniden boyamak yerine sahte katman (::after) aç */
.shop-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.14s ease;
  box-shadow: 0 0 18px rgba(255, 209, 102, 0.35);
}

.shop-card:hover {
  transform: translate3d(0, -3px, 0);
}

.shop-card:hover::after,
.shop-card.spotlighted::after {
  opacity: 1;
}

/* 4. NADİRLİK (RARITY) PARLAMALARI: Pahalı animasyonlu gölgeler yerine sabit hafif sınırlar */
.shop-card.rarity-mythic {
  border-color: rgba(255, 23, 68, 0.65) !important;
}
.shop-card.rarity-mythic::after {
  box-shadow: inset 0 0 14px rgba(255, 23, 68, 0.28) !important;
}

.shop-card.rarity-legendary {
  border-color: rgba(255, 209, 102, 0.65) !important;
}
.shop-card.rarity-legendary::after {
  box-shadow: inset 0 0 14px rgba(255, 209, 102, 0.25) !important;
}

.shop-card.rarity-epic {
  border-color: rgba(168, 85, 247, 0.6) !important;
}

/* 5. EMOJİ VE İKON KUTULARI: filter: drop-shadow yerine hafif text-shadow */
.shop-card-icon,
.spotlight-icon-box span {
  filter: none !important;
  -webkit-filter: none !important;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
  display: inline-block;
  transform: translateZ(0);
}

/* 6. SEZON PASS AKSİYON KARTLARI VE VİTRİN: Ağır gölgeleri sadeleştir */
.sp-action-card,
#shop-spotlight-banner,
.season-pass-header-box {
  contain: layout style paint;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important;
  backdrop-filter: none !important;
}

/* İlerleme çubuğunda width yerine GPU hızlandırmalı geçiş */
.sp-progress-fill {
  will-change: width;
  transition: width 0.2s ease-out !important;
}

/* 7. MAĞAZA BUTONLARI: Anında tepki (0ms tıklama hissi) */
.btn-shop-action,
.btn-spotlight-action,
.sp-filter-btn,
.shop-cat-btn {
  transition: transform 0.08s ease, opacity 0.1s ease !important;
  box-shadow: none !important;
  user-select: none;
}

.btn-shop-action:active,
.btn-spotlight-action:active {
  transform: scale3d(0.96, 0.96, 1) !important;
}

/* =========================================================
   ☁️ CLOUDFLARE (CLOUDWARE) ENTERPRISE ANTI-CHEAT & WAF STİLLERİ
   (Turnstile Doğrulama, Ray ID, DDoS Kalkanı & Hile Engeli)
   ========================================================= */
.cf-overlay {
  position: fixed !important;
  inset: 0 !important;
  z-index: 2147483640 !important;
  background: rgba(18, 18, 20, 0.96) !important;
  backdrop-filter: blur(8px) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
  color: #e5e7eb !important;
  padding: 16px !important;
  box-sizing: border-box !important;
  transition: opacity 0.35s ease;
}

.cf-overlay.fade-out {
  opacity: 0 !important;
  pointer-events: none !important;
}

.cf-container {
  width: 100% !important;
  max-width: 580px !important;
  background: #1f2023 !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 12px !important;
  padding: 32px 36px !important;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(246, 130, 31, 0.25) !important;
  box-sizing: border-box !important;
  position: relative !important;
}

.cf-header {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  padding-bottom: 18px !important;
  margin-bottom: 24px !important;
}

.cf-logo-row {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

.cf-logo-svg {
  width: 44px !important;
  height: 24px !important;
}

.cf-brand-text {
  font-size: 19px !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  letter-spacing: -0.3px !important;
}

.cf-badge-secure {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: #10b981 !important;
  background: rgba(16, 185, 129, 0.12) !important;
  border: 1px solid rgba(16, 185, 129, 0.3) !important;
  padding: 4px 10px !important;
  border-radius: 16px !important;
}

.cf-dot {
  width: 7px !important;
  height: 7px !important;
  background: #10b981 !important;
  border-radius: 50% !important;
  box-shadow: 0 0 6px #10b981 !important;
}

.cf-title {
  font-size: 20px !important;
  font-weight: 600 !important;
  color: #ffffff !important;
  margin: 0 0 12px 0 !important;
  line-height: 1.4 !important;
}

.cf-subtitle {
  font-size: 13.5px !important;
  line-height: 1.6 !important;
  color: #9ca3af !important;
  margin: 0 0 24px 0 !important;
}

/* Turnstile İnteraktif Kutu */
.cf-turnstile-box {
  background: #282a2e !important;
  border: 1px solid #3f4247 !important;
  border-radius: 8px !important;
  padding: 16px 20px !important;
  margin-bottom: 24px !important;
  cursor: pointer !important;
  transition: border-color 0.2s, background 0.2s !important;
  user-select: none !important;
}

.cf-turnstile-box:hover {
  border-color: #f6821f !important;
  background: #2e3035 !important;
}

.cf-turnstile-box.verified {
  border-color: #10b981 !important;
  background: rgba(16, 185, 129, 0.06) !important;
}

.cf-turnstile-inner {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
}

.cf-checkbox-wrap {
  width: 30px !important;
  height: 30px !important;
  background: #1e2023 !important;
  border: 2px solid #52565e !important;
  border-radius: 6px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}

.cf-spinner {
  width: 16px !important;
  height: 16px !important;
  border: 2.5px solid rgba(246, 130, 31, 0.25) !important;
  border-top-color: #f6821f !important;
  border-radius: 50% !important;
  animation: cf-spin 0.75s linear infinite !important;
}

@keyframes cf-spin {
  to { transform: rotate(360deg); }
}

.cf-check-icon svg {
  width: 20px !important;
  height: 20px !important;
}

.cf-turnstile-label {
  font-size: 14px !important;
  font-weight: 500 !important;
  color: #e5e7eb !important;
  line-height: 1.35 !important;
}

.cf-turnstile-footer {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  margin-top: 14px !important;
  padding-top: 10px !important;
  border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
  font-size: 11px !important;
  color: #6b7280 !important;
}

.cf-turnstile-logo {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  color: #9ca3af !important;
  font-weight: 500 !important;
}

.cf-link {
  color: #9ca3af !important;
  text-decoration: none !important;
}

.cf-link:hover {
  text-decoration: underline !important;
}

.cf-test-action-row {
  margin-bottom: 24px !important;
}

.cf-btn-test-cheat {
  width: 100% !important;
  padding: 10px 16px !important;
  background: rgba(239, 68, 68, 0.12) !important;
  border: 1px solid #ef4444 !important;
  color: #f87171 !important;
  border-radius: 6px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: background 0.15s, color 0.15s !important;
}

.cf-btn-test-cheat:hover {
  background: #ef4444 !important;
  color: #ffffff !important;
}

.cf-footer {
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
  padding-top: 16px !important;
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 8px 16px !important;
  font-size: 12px !important;
  color: #6b7280 !important;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace !important;
}

.cf-diag-label {
  color: #9ca3af !important;
  margin-right: 4px !important;
}

.cf-diag-val {
  color: #d1d5db !important;
}

.btn-av-sim.sim-cloudflare {
  background: rgba(246, 130, 31, 0.15) !important;
  border: 1px solid #f6821f !important;
  color: #fb923c !important;
}

.btn-av-sim.sim-cloudflare:hover {
  background: #f6821f !important;
  color: #ffffff !important;
}

@media (max-width: 600px) {
  .cf-container {
    padding: 24px 20px !important;
  }
  .cf-title {
    font-size: 17px !important;
  }
  .cf-footer {
    grid-template-columns: 1fr !important;
  }
}

/* =========================================================
   ARENA MULTIPLAYER HUD (JUJUTSU BRAWL SHOWDOWN)
   ========================================================= */

@keyframes arenaGlowPulse {
  0% { box-shadow: 0 0 15px rgba(239, 68, 68, 0.4), 0 4px 15px rgba(0,0,0,0.6); transform: translateY(0); }
  100% { box-shadow: 0 0 28px rgba(251, 191, 36, 0.7), 0 6px 20px rgba(239, 68, 68, 0.6); transform: translateY(-1px); }
}

.arena-hud {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 40;
  font-family: 'Pixelify Sans', 'Inter', monospace, sans-serif;
}

/* Üst Sol: Radar Yanı Sayaçlar */
.arena-top-left {
  position: absolute;
  top: 14px;
  left: 148px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  pointer-events: auto;
}

.arena-meta-badge {
  background: rgba(15, 23, 42, 0.85);
  border: 1px solid rgba(56, 189, 248, 0.5);
  color: #38bdf8;
  font-size: 0.82rem;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: 6px;
  backdrop-filter: blur(8px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: fit-content;
}

.arena-meta-badge.cube-badge {
  border-color: rgba(52, 211, 153, 0.5);
  color: #34d399;
}

.arena-mode-badge {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.3), rgba(168, 85, 247, 0.3));
  border: 1px solid rgba(244, 63, 94, 0.6);
  color: #fda4af;
  font-size: 0.74rem;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 4px;
  width: fit-content;
  letter-spacing: 0.5px;
}

/* Üst Sağ: Kill Feed & Pause */
.arena-top-right {
  position: absolute;
  top: 14px;
  right: 16px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  pointer-events: auto;
  max-width: 320px;
}

.arena-killfeed-container {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
}

.killfeed-item {
  background: rgba(15, 23, 42, 0.88);
  backdrop-filter: blur(8px);
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 0.72rem;
  box-shadow: 0 2px 8px rgba(0,0,0,0.5);
  animation: killfeedSlideIn 0.3s ease-out;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@keyframes killfeedSlideIn {
  from { opacity: 0; transform: translateX(20px); }
  to { opacity: 1; transform: translateX(0); }
}

.btn-arena-pause {
  background: rgba(15, 23, 42, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #e2e8f0;
  padding: 5px 12px;
  border-radius: 6px;
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
  box-shadow: 0 4px 12px rgba(0,0,0,0.4);
}

.btn-arena-pause:hover {
  background: rgba(239, 68, 68, 0.3);
  border-color: #ef4444;
  color: #fff;
}

/* Alt Merkez: BBS 360° Skill Bar */
.arena-bottom-center {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  pointer-events: auto;
}

.arena-hp-wrap {
  width: 280px;
}

.arena-hp-track {
  position: relative;
  width: 100%;
  height: 18px;
  background: rgba(15, 23, 42, 0.9);
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-radius: 9px;
  overflow: hidden;
  box-shadow: 0 0 12px rgba(0,0,0,0.8);
}

.arena-hp-fill {
  height: 100%;
  background: linear-gradient(90deg, #10b981 0%, #34d399 100%);
  transition: width 0.15s ease-out;
}

.arena-hp-text {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  font-weight: 800;
  color: #ffffff;
  text-shadow: 0 1px 3px rgba(0,0,0,0.9);
  letter-spacing: 0.5px;
}

.arena-ammo-wrap {
  width: 280px;
  display: flex;
  gap: 5px;
  height: 8px;
  margin-top: -3px;
  margin-bottom: 3px;
}

.ammo-seg {
  flex: 1;
  height: 100%;
  background: rgba(15, 23, 42, 0.85);
  border: 1.5px solid rgba(251, 146, 60, 0.65);
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 0 6px rgba(249, 115, 22, 0.35);
}

.ammo-seg-fill {
  height: 100%;
  background: linear-gradient(90deg, #ea580c, #f59e0b);
  border-radius: 2px;
  transition: width 0.06s linear;
}

.ammo-seg.empty {
  border-color: rgba(239, 68, 68, 0.6);
  background: rgba(30, 41, 59, 0.7);
}

.bbs-skill-bar {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  background: rgba(15, 23, 42, 0.75);
  padding: 6px 10px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: 0 8px 32px rgba(0,0,0,0.7);
  backdrop-filter: blur(10px);
}

.bbs-slot {
  position: relative;
  width: 52px;
  height: 52px;
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(30, 41, 59, 0.9), rgba(15, 23, 42, 0.95));
  border: 2px solid rgba(148, 163, 184, 0.4);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  user-select: none;
  overflow: hidden;
  transition: transform 0.1s, border-color 0.15s;
}

.bbs-slot:hover {
  border-color: #38bdf8;
  transform: translateY(-2px);
}

.bbs-slot:active {
  transform: translateY(1px) scale(0.97);
}

.bbs-kbd {
  position: absolute;
  top: 2px;
  left: 3px;
  font-size: 0.58rem;
  font-weight: 800;
  color: #94a3b8;
  background: rgba(0,0,0,0.6);
  padding: 1px 4px;
  border-radius: 3px;
  border: 1px solid rgba(255,255,255,0.15);
}

.bbs-slot-icon {
  font-size: 1.25rem;
  margin-top: 4px;
}

.bbs-slot-label {
  font-size: 0.55rem;
  font-weight: 700;
  color: #cbd5e1;
  margin-top: 1px;
}

.bbs-slot-sub {
  font-size: 0.48rem;
  font-weight: 800;
  color: #94a3b8;
  max-width: 90%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 1px;
}

.bbs-slot.atk1 {
  width: 68px;
  height: 60px;
  border-color: rgba(56, 189, 248, 0.45);
}

.bbs-slot.atk1:hover {
  border-color: #38bdf8;
  box-shadow: 0 0 14px rgba(56, 189, 248, 0.4);
}

.bbs-slot.atk2 {
  width: 68px;
  height: 60px;
  border-color: rgba(245, 158, 11, 0.45);
}

.bbs-slot.atk2:hover {
  border-color: #f59e0b;
  box-shadow: 0 0 14px rgba(245, 158, 11, 0.4);
}

.bbs-slot.atk3 {
  width: 70px;
  height: 70px;
}

.bbs-cd-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.78);
  color: #ffd166;
  font-size: 0.75rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  backdrop-filter: grayscale(1);
}

.bbs-slot.dodge {
  border-color: rgba(56, 189, 248, 0.6);
}

.bbs-slot.dodge .skill-charges {
  position: absolute;
  bottom: 2px;
  right: 3px;
  font-size: 0.60rem;
  font-weight: 900;
  color: #38bdf8;
  background: rgba(0,0,0,0.7);
  padding: 1px 3px;
  border-radius: 3px;
}

/* Soul Bomb / Ultimate BBS Slot */
.bbs-slot.ult {
  width: 62px;
  height: 62px;
  border-radius: 50%;
  border: 2px solid rgba(239, 68, 68, 0.5);
  background: radial-gradient(circle, rgba(127, 29, 29, 0.8), rgba(15, 23, 42, 0.95));
}

.bbs-slot.ult.ready {
  border-color: #ffd166;
  box-shadow: 0 0 20px rgba(255, 209, 102, 0.8), inset 0 0 12px rgba(239, 68, 68, 0.8);
  animation: ultReadyPulse 1.2s infinite alternate;
}

@keyframes ultReadyPulse {
  0% { transform: scale(1); filter: brightness(1); }
  100% { transform: scale(1.06); filter: brightness(1.3); }
}

.ult-ring-fill {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(239, 68, 68, 0.35);
  pointer-events: none;
  transition: height 0.2s;
}

.ult-kbd {
  top: 3px;
  left: 50%;
  transform: translateX(-50%);
  color: #ffd166;
}

.ult-icon {
  font-size: 1.5rem;
}

.ult-label {
  font-size: 0.50rem;
  color: #ffd166;
  font-weight: 900;
}

/* =========================================================
   ARENA MODALS (MAP SELECTOR, TROPHY ROAD, POSTMATCH)
   ========================================================= */

.arena-modal-card {
  max-width: 640px;
  width: 94%;
  background: rgba(15, 17, 26, 0.96);
  border: 1px solid rgba(56, 189, 248, 0.35);
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.9);
  backdrop-filter: blur(16px);
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-height: 85vh;
  overflow: hidden;
}

.arena-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  padding-bottom: 12px;
}

.arena-modal-kicker {
  font-size: 0.72rem;
  font-weight: 800;
  color: #38bdf8;
  letter-spacing: 1px;
}

.arena-modal-header h2 {
  margin: 4px 0 2px 0;
  font-size: 1.35rem;
  color: #fff;
}

.arena-modal-sub {
  margin: 0;
  font-size: 0.82rem;
  color: #94a3b8;
}

.arena-map-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
  overflow-y: auto;
  max-height: 52vh;
  padding: 4px 2px;
}

.arena-map-card {
  background: rgba(30, 41, 59, 0.7);
  border: 2px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  padding: 12px;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.arena-map-card:hover {
  border-color: #38bdf8;
  background: rgba(30, 41, 59, 0.95);
  transform: translateY(-2px);
}

.arena-map-card.selected {
  border-color: #ffd166;
  background: rgba(245, 158, 11, 0.15);
  box-shadow: 0 0 16px rgba(255, 209, 102, 0.4);
}

.map-badge {
  font-size: 0.68rem;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 4px;
  width: fit-content;
}

.map-name {
  font-size: 0.92rem;
  font-weight: 700;
  color: #ffffff;
}

.map-size {
  font-size: 0.72rem;
  color: #94a3b8;
}

/* Kupa Yolu (Trophy Road) */
.trophy-road-meta {
  margin-top: 6px;
}

.trophy-rank-badge {
  background: rgba(245, 158, 11, 0.2);
  border: 1px solid rgba(245, 158, 11, 0.5);
  color: #ffd166;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 0.85rem;
  display: inline-block;
}

.trophy-road-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow-y: auto;
  max-height: 52vh;
  padding-right: 4px;
}

.trophy-tier-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(30, 41, 59, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 10px 14px;
}

.trophy-tier-card.unlocked {
  border-color: rgba(52, 211, 153, 0.5);
  background: rgba(16, 185, 129, 0.1);
}

.tier-kupa {
  font-size: 1rem;
  font-weight: 800;
  color: #ffd166;
  min-width: 80px;
}

.tier-info {
  flex: 1;
  margin: 0 12px;
}

.tier-rank {
  font-size: 0.85rem;
  font-weight: 700;
  color: #fff;
}

.tier-reward {
  font-size: 0.78rem;
  color: #94a3b8;
}

.btn-claim-tier {
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 800;
  border: 1px solid transparent;
  cursor: pointer;
}

.trophy-tier-card.unlocked .btn-claim-tier {
  background: #10b981;
  color: #fff;
}

.trophy-tier-card.locked .btn-claim-tier {
  background: rgba(255,255,255,0.06);
  color: #64748b;
  cursor: not-allowed;
}

/* Post-Match Modal (Victory Royale) */
.postmatch-card {
  max-width: 480px;
  width: 90%;
  text-align: center;
  background: rgba(15, 17, 26, 0.97);
  border: 2px solid rgba(255, 209, 102, 0.6);
  box-shadow: 0 0 50px rgba(255, 209, 102, 0.3), 0 20px 60px rgba(0,0,0,0.95);
  border-radius: 14px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.postmatch-title {
  margin: 0;
  font-size: 1.6rem;
  font-weight: 900;
  letter-spacing: 1px;
}

.postmatch-trophies {
  font-size: 1.15rem;
  font-weight: 800;
  margin-top: 6px;
}

.postmatch-stats {
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 8px;
  padding: 12px 16px;
  border: 1px solid rgba(255,255,255,0.08);
}

.postmatch-stats .stat-row {
  display: flex;
  justify-content: space-between;
  font-size: 0.84rem;
  color: #cbd5e1;
}

.postmatch-stats .stat-row strong {
  color: #fff;
}

.postmatch-actions {
  display: flex;
  justify-content: center;
  gap: 12px;
}

.btn-hero-replay {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
  color: #fff !important;
  font-weight: 800 !important;
  box-shadow: 0 4px 15px rgba(16, 185, 129, 0.4) !important;
}

/* =========================================================
   HAKEM & DİREKTÖR BOT (KOGANE) VE TAKIM LOBİSİ STILLERI
   ========================================================= */

.btn-arena-director {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.3), rgba(245, 158, 11, 0.4));
  border: 1px solid rgba(251, 191, 36, 0.6);
  color: #ffd166;
  padding: 5px 12px;
  border-radius: 6px;
  font-size: 0.8rem;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.2s;
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
  display: flex;
  align-items: center;
  gap: 5px;
}

.btn-arena-director:hover {
  background: linear-gradient(135deg, #ef4444, #f59e0b);
  color: #fff;
  transform: translateY(-1px);
}

/* Direktör Bot Konsolu */
.arena-director-modal {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 60;
  pointer-events: auto;
}

.director-card {
  max-width: 580px;
  width: 92%;
  background: rgba(15, 23, 42, 0.96);
  border: 2px solid rgba(251, 191, 36, 0.6);
  border-radius: 14px;
  padding: 20px;
  box-shadow: 0 0 40px rgba(251, 191, 36, 0.25), 0 20px 50px rgba(0, 0, 0, 0.9);
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.director-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  padding-bottom: 10px;
}

.director-title-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.director-avatar {
  font-size: 2.2rem;
  filter: drop-shadow(0 0 10px rgba(251, 191, 36, 0.8));
  animation: balloonFloat 2s infinite ease-in-out alternate;
}

@keyframes balloonFloat {
  0% { transform: translateY(0); }
  100% { transform: translateY(-6px); }
}

.director-title {
  margin: 0;
  font-size: 1.15rem;
  color: #ffd166;
  font-weight: 800;
}

.director-sub {
  font-size: 0.76rem;
  color: #94a3b8;
}

.director-balloon {
  background: rgba(255, 255, 255, 0.08);
  border-left: 3px solid #ffd166;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 0.86rem;
  color: #f1f5f9;
  line-height: 1.4;
  font-style: italic;
  transition: transform 0.2s;
}

.director-balloon.pop {
  transform: scale(1.02);
}

.director-quick-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  max-height: 120px;
  overflow-y: auto;
  padding: 2px;
}

.director-chip {
  background: rgba(30, 41, 59, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #cbd5e1;
  padding: 5px 10px;
  border-radius: 6px;
  font-size: 0.74rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s;
  display: flex;
  align-items: center;
  gap: 5px;
}

.director-chip:hover {
  background: rgba(245, 158, 11, 0.2);
  border-color: #ffd166;
  color: #fff;
  transform: translateY(-1px);
}

.director-input-row {
  display: flex;
  gap: 8px;
}

.director-thought-input {
  flex: 1;
  background: rgba(0, 0, 0, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  padding: 10px 14px;
  color: #fff;
  font-size: 0.88rem;
  outline: none;
  font-family: inherit;
}

.director-thought-input:focus {
  border-color: #ffd166;
  box-shadow: 0 0 10px rgba(251, 191, 36, 0.4);
}

.director-submit-btn {
  background: linear-gradient(135deg, #f59e0b, #ef4444);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 0 16px;
  font-weight: 800;
  font-size: 0.88rem;
  cursor: pointer;
  transition: transform 0.15s;
}

.director-submit-btn:hover {
  transform: translateY(-1px);
  filter: brightness(1.1);
}

/* =========================================================
   BRAWL STARS TAKIM LOBİSİ & DAVET KODU
   ========================================================= */

.brawl-team-card {
  max-width: 680px;
  width: 94%;
  background: rgba(15, 23, 42, 0.97);
  border: 2px solid rgba(168, 85, 247, 0.5);
  box-shadow: 0 0 40px rgba(168, 85, 247, 0.25), 0 20px 60px rgba(0,0,0,0.95);
  border-radius: 14px;
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.team-invite-code-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 8px;
}

.team-invite-code-bar span {
  font-size: 0.92rem;
  color: #cbd5e1;
}

.team-invite-code-bar strong {
  background: rgba(168, 85, 247, 0.2);
  border: 1px solid rgba(168, 85, 247, 0.6);
  color: #c084fc;
  padding: 3px 8px;
  border-radius: 6px;
  letter-spacing: 1.5px;
  font-size: 1.05rem;
}

.btn-copy-code {
  background: rgba(56, 189, 248, 0.15);
  border: 1px solid #38bdf8;
  color: #38bdf8;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s;
}

.btn-copy-code:hover {
  background: #38bdf8;
  color: #fff;
}

.team-settings-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  background: rgba(255, 255, 255, 0.03);
  padding: 10px 14px;
  border-radius: 8px;
}

.team-setting-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.team-setting-item label {
  font-size: 0.76rem;
  color: #94a3b8;
  font-weight: 700;
}

.team-setting-item select {
  background: rgba(15, 23, 42, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #fff;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 0.82rem;
  outline: none;
}

/* 3 Takım Yuvası */
.team-slots-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.team-slot-card {
  background: rgba(30, 41, 59, 0.7);
  border: 2px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: all 0.2s;
}

.team-slot-card.is-me {
  border-color: #38bdf8;
  background: rgba(14, 165, 233, 0.1);
}

.team-slot-card.offline {
  border-color: rgba(239, 68, 68, 0.5);
  background: rgba(239, 68, 68, 0.08);
}

.slot-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.slot-num {
  font-size: 0.68rem;
  font-weight: 800;
  color: #94a3b8;
}

.host-crown {
  font-size: 0.65rem;
  font-weight: 900;
  color: #ffd166;
  background: rgba(245, 158, 11, 0.2);
  padding: 1px 4px;
  border-radius: 3px;
}

.slot-badge {
  font-size: 0.64rem;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 4px;
}

.slot-badge.ready {
  background: rgba(16, 185, 129, 0.2);
  color: #34d399;
}

.slot-badge.wait {
  background: rgba(245, 158, 11, 0.2);
  color: #fbbf24;
}

.slot-badge.offline {
  background: rgba(239, 68, 68, 0.2);
  color: #f87171;
}

.slot-body {
  display: flex;
  align-items: center;
  gap: 10px;
}

.slot-hero-img {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  background: rgba(0,0,0,0.4);
  border: 1px solid rgba(255,255,255,0.15);
  object-fit: cover;
  image-rendering: pixelated;
}

.slot-info {
  flex: 1;
  overflow: hidden;
}

.slot-player-name {
  font-size: 0.82rem;
  font-weight: 800;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.slot-hero-name {
  font-size: 0.74rem;
  color: #38bdf8;
  font-weight: 700;
}

.slot-hero-role {
  font-size: 0.64rem;
  color: #94a3b8;
}

.slot-hero-select {
  width: 100%;
  background: rgba(15, 23, 42, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #fff;
  padding: 4px;
  border-radius: 4px;
  font-size: 0.74rem;
}

.slot-hero-locked {
  font-size: 0.72rem;
  color: #94a3b8;
  text-align: center;
  padding: 4px;
}

.team-offline-notice {
  background: rgba(245, 158, 11, 0.1);
  border: 1px solid rgba(245, 158, 11, 0.3);
  color: #fde68a;
  font-size: 0.76rem;
  padding: 8px 12px;
  border-radius: 6px;
  line-height: 1.4;
}

.team-actions-row {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.btn-ready-toggle {
  font-weight: 800 !important;
}

@media (max-width: 640px) {
  .team-slots-container {
    grid-template-columns: 1fr;
  }
}