/* ═══════════════════════════════════════════════════════
   GANGGAME REDESIGN — Pure CSS Only
   ═══════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;600;700&family=Rajdhani:wght@400;500;600;700&display=swap');

:root {
  --gg-gold:   #f0b429;
  --gg-purple: #8b5cf6;
  --gg-red:    #ef4444;
  --gg-green:  #22c55e;
  --gg-bg:     #08080f;
  --gg-panel:  #10101e;
  --gg-muted:  #505078;
  --gg-text:   #d0d0e8;
  --gg-font:   'Rajdhani', sans-serif;
  --gg-font-h: 'Oswald', sans-serif;
}

body { background: var(--gg-bg) !important; font-family: var(--gg-font) !important; color: var(--gg-text) !important; }

/* ── Header ── */
.game-header {
  background: rgba(8,8,16,0.97) !important;
  border-bottom: 1px solid rgba(240,180,41,0.2) !important;
  padding: 0.4rem 1rem !important;
  display: flex !important;
  align-items: center !important;
  gap: 0.8rem !important;
  flex-wrap: wrap !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 100 !important;
}
.game-header .logo {
  font-family: var(--gg-font-h) !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  letter-spacing: 2px !important;
  color: var(--gg-gold) !important;
  text-shadow: 0 0 16px rgba(240,180,41,0.6) !important;
}
.hud-stat { display: flex !important; flex-direction: column !important; align-items: center !important; min-width: 60px !important; }
.hud-label { font-size: 8px !important; color: var(--gg-muted) !important; text-transform: uppercase !important; letter-spacing: 0.1em !important; }
.hud-val { font-family: var(--gg-font-h) !important; font-size: 13px !important; font-weight: 600 !important; color: var(--gg-gold) !important; }
.hud-sep { width: 1px !important; height: 28px !important; background: rgba(42,42,80,0.6) !important; }
.user-badge { margin-left: auto !important; font-size: 12px !important; color: var(--gg-text) !important; }
.btn-logout { font-size: 11px !important; padding: 3px 8px !important; }

/* ── Desktop: Nav als Sidebar ── */
@media (min-width: 769px) {
  .nav-tabs {
    display: flex !important;
    flex-direction: column !important;
    background: #0a0a18 !important;
    border-right: 1px solid rgba(240,180,41,0.1) !important;
    border-bottom: none !important;
    width: 120px !important;
    min-height: calc(100vh - 46px) !important;
    position: sticky !important;
    top: 46px !important;
    float: left !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    scrollbar-width: none !important;
    padding: 6px 0 20px !important;
  }
  .nav-tabs::-webkit-scrollbar { display: none !important; }
  .nav-tab {
    display: flex !important;
    align-items: center !important;
    padding: 9px 10px !important;
    font-family: var(--gg-font) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    color: var(--gg-muted) !important;
    background: transparent !important;
    border: none !important;
    border-left: 3px solid transparent !important;
    border-bottom: none !important;
    border-radius: 0 !important;
    width: 100% !important;
    text-align: left !important;
    cursor: pointer !important;
    transition: all 0.15s !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  .nav-tab:hover { background: rgba(240,180,41,0.05) !important; color: var(--gg-text) !important; border-left-color: rgba(240,180,41,0.3) !important; }
  .nav-tab.active { background: rgba(240,180,41,0.08) !important; color: var(--gg-gold) !important; border-left: 3px solid var(--gg-gold) !important; }
  .panel-wrap { margin-left: 120px !important; max-width: calc(100% - 120px) !important; padding: 14px 18px !important; }
}

/* ── Mobil: Original-Layout (horizontal Nav) ── */
@media (max-width: 768px) {
  .nav-tabs {
    display: flex !important;
    flex-direction: row !important;
    float: none !important;
    width: 100% !important;
    min-height: unset !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    background: rgba(8,8,16,0.97) !important;
    border-bottom: 1px solid rgba(42,42,80,0.5) !important;
    border-right: none !important;
    padding: 2px 4px !important;
    scrollbar-width: none !important;
  }
  .nav-tabs::-webkit-scrollbar { display: none !important; }
  .nav-tab {
    padding: 8px 12px !important;
    font-size: 12px !important;
    border-left: none !important;
    border-bottom: 2px solid transparent !important;
    border-radius: 0 !important;
    flex-shrink: 0 !important;
    width: auto !important;
    white-space: nowrap !important;
    color: var(--gg-muted) !important;
  }
  .nav-tab.active {
    color: var(--gg-gold) !important;
    border-bottom: 2px solid var(--gg-gold) !important;
    background: transparent !important;
  }
  .panel-wrap { margin-left: 0 !important; max-width: 100% !important; padding: 10px !important; }
  .city-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; }
}

/* ── City Tiles ── */
.city-grid { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)) !important; gap: 10px !important; }
.city-tile { background: linear-gradient(135deg, #10101e, #14142a) !important; border: 1px solid rgba(42,42,80,0.7) !important; border-radius: 10px !important; padding: 14px 10px !important; cursor: pointer !important; transition: all 0.2s !important; text-align: center !important; }
.city-tile:hover { border-color: rgba(240,180,41,0.4) !important; box-shadow: 0 6px 20px rgba(0,0,0,0.5) !important; transform: translateY(-2px) !important; }
.city-icon { font-size: 28px !important; margin-bottom: 8px !important; display: block !important; }
.city-name { font-family: var(--gg-font-h) !important; font-size: 12px !important; font-weight: 600 !important; text-transform: uppercase !important; color: #c8c8e0 !important; }
.city-desc { font-size: 10px !important; color: var(--gg-muted) !important; }

/* ── Buttons ── */
.btn { font-family: var(--gg-font) !important; font-weight: 600 !important; border-radius: 8px !important; transition: all 0.2s !important; }
.btn-primary { border-color: var(--gg-gold) !important; color: var(--gg-gold) !important; }
.btn-primary:hover { background: var(--gg-gold) !important; color: #000 !important; }
.btn-danger { border-color: var(--gg-red) !important; color: var(--gg-red) !important; }
.btn-danger:hover { background: var(--gg-red) !important; color: #fff !important; }
.btn-success { border-color: var(--gg-green) !important; color: var(--gg-green) !important; }
.btn-success:hover { background: var(--gg-green) !important; color: #000 !important; }
.btn-acc { border-color: var(--gg-gold) !important; color: var(--gg-gold) !important; }
.btn-acc:hover { background: var(--gg-gold) !important; color: #000 !important; }
.btn-ghost { border-color: rgba(42,42,80,0.7) !important; color: var(--gg-muted) !important; }
.section-title { font-family: var(--gg-font-h) !important; font-size: 11px !important; letter-spacing: 0.18em !important; text-transform: uppercase !important; color: var(--gg-muted) !important; border-bottom: 1px solid rgba(42,42,80,0.5) !important; padding-bottom: 8px !important; margin-bottom: 14px !important; }
.shop-card { background: #10101e !important; border: 1px solid rgba(42,42,80,0.7) !important; border-radius: 10px !important; }
.shop-card:hover { border-color: rgba(240,180,41,0.3) !important; }
.shop-cat-btn.active { border-color: var(--gg-gold) !important; color: var(--gg-gold) !important; }
.auth-box { background: #10101e !important; border: 1px solid rgba(42,42,80,0.8) !important; border-radius: 14px !important; }
.auth-tab.active { background: var(--gg-gold) !important; color: #000 !important; border-color: var(--gg-gold) !important; }
.auth-input { background: rgba(8,8,16,0.9) !important; border: 1px solid rgba(42,42,80,0.7) !important; color: var(--gg-text) !important; }
.auth-input:focus { border-color: rgba(240,180,41,0.5) !important; outline: none !important; }
input:focus, textarea:focus, select:focus { border-color: rgba(240,180,41,0.45) !important; outline: none !important; }
.jail-banner { background: rgba(20,5,5,0.95) !important; border: 1px solid rgba(239,68,68,0.4) !important; }
#attack-warning { border-radius: 10px !important; }
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: var(--gg-bg); }
::-webkit-scrollbar-thumb { background: rgba(240,180,41,0.3); border-radius: 2px; }

/* XP Text Schrift */
#hud-xp-text { font-family: 'Oswald', sans-serif !important; font-size: 13px !important; font-weight: 600 !important; color: var(--gg-purple) !important; }
.nav-tab { font-family: Oswald, sans-serif !important; letter-spacing: 0.05em !important; }

/* Nav Text bündig, Emojis gleiche Breite */
.nav-tab { font-family: 'Oswald', sans-serif !important; }
@media (min-width: 769px) {
  .nav-tab { padding-left: 12px !important; }
  .nav-tab::first-letter { width: 20px !important; }
}

/* Nav Emojis bündig */
@media (min-width: 769px) {
  .nav-tab { display: flex !important; align-items: center !important; gap: 0 !important; }
  .nav-tab::before { content: attr(data-icon); display: none; }
}

/* ── Angriff Status Tile ── */
#attack-status-tile {
  margin-top: 10px !important;
  padding: 10px 14px !important;
  border-radius: 10px !important;
  background: linear-gradient(135deg, rgba(16,16,30,0.95), rgba(20,20,40,0.95)) !important;
  border: 1px solid rgba(34,197,94,0.3) !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  font-family: 'Rajdhani', sans-serif !important;
}
#attack-status-tile[style*='#e05'] {
  border-color: rgba(239,68,68,0.4) !important;
  box-shadow: 0 0 20px rgba(239,68,68,0.1) !important;
}
#attack-status-text {
  font-family: 'Oswald', sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
}

/* ── Trading Cards City Tile ── */
#cards-city-tile {
  margin-top: 10px !important;
  padding: 12px 16px !important;
  border-radius: 10px !important;
  background: linear-gradient(135deg, rgba(16,16,30,0.95), rgba(20,10,40,0.95)) !important;
  border: 1px solid rgba(139,92,246,0.25) !important;
  box-shadow: 0 2px 12px rgba(0,0,0,0.3) !important;
}
#cards-city-tile .section-title,
#cards-city-tile [class*= title] {
  font-family: 'Oswald', sans-serif !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: #8b5cf6 !important;
  border-bottom: 1px solid rgba(139,92,246,0.2) !important;
  padding-bottom: 6px !important;
  margin-bottom: 10px !important;
}
body { font-family: Oswald, Rajdhani, sans-serif !important; } .hud-label, .city-desc, .shop-item-desc, .player-level { font-family: Rajdhani, sans-serif !important; }

/* ═══ VERBESSERUNGEN ═══ */

/* Sidebar breiter für bessere Lesbarkeit */
@media (min-width: 769px) {
  .nav-tabs { width: 145px !important; }
  .panel-wrap { margin-left: 145px !important; max-width: calc(100% - 145px) !important; }

  /* Nav Tabs: Emoji feste Breite, Text bündig */
  .nav-tab {
    display: grid !important;
    grid-template-columns: 22px 1fr !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 9px 12px !important;
    font-size: 13px !important;
    letter-spacing: 0.03em !important;
  }

  /* Header luftiger */
  .game-header {
    gap: 14px !important;
    padding: 0 18px !important;
  }

  /* HUD Stats mehr Abstand */
  .hud-stat { min-width: 52px !important; }

  /* City Tiles mehr Kontrast */
  .city-tile {
    border-color: rgba(60,60,100,0.6) !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3) !important;
  }
  .city-tile:hover {
    box-shadow: 0 8px 28px rgba(0,0,0,0.6), 0 0 24px rgba(240,180,41,0.1) !important;
  }

  /* Section Titles mehr Luft */
  .section-title { margin-top: 6px !important; }
}

/* Header Logo etwas größer */
.game-header .logo {
  font-size: 20px !important;
  letter-spacing: 3px !important;
}

/* HUD Labels besser lesbar */
.hud-label { font-size: 9px !important; }
.hud-val { font-size: 14px !important; }

/* Buttons konsistenter */
.btn { letter-spacing: 0.04em !important; text-transform: uppercase !important; }

/* Scrollbar schöner */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-thumb { background: linear-gradient(180deg, rgba(240,180,41,0.5), rgba(139,92,246,0.5)); border-radius: 3px; }
.hud-label { color: #9090b8 !important; font-size: 10px !important; font-weight: 500 !important; }