/* ================================================================
   GOMLeague Demo Viewer – CSS Override v15
   Strategie: minimale Map-Overrides, maximale Bundle-Kompatibilität
   v15: html/body NICHT height:100% für Start-Screen → scrollbar
        Viewer-Modus (grid-container aktiv): über :has() auf fixed schalten
   ================================================================ */

:root {
  --primary-color: #00a3ff !important;
  --secondary-color: #0058a3 !important;
}

/* ── Start-Screen: html/body frei scrollbar ─────────────────────── */
html {
  /* KEIN height:100% – sonst wird der gesamte Scroll-Baum geclampt */
  min-height: 100% !important;
}
body {
  min-height: 100% !important;
  /* KEIN height:100% – Start-Screen braucht freie Höhe */
  padding-top: 68px !important;
  background: #080b12 !important;
  margin: 0 !important;
  overflow-x: hidden !important;
  /* overflow-y bleibt auto (Browser-Default) → Seite scrollt normal */
  box-sizing: border-box !important;
}

/* ── Viewer-Modus: wenn Match-Grid aktiv → alles auf fixed schalten ── */
html:has(.grid-container) {
  height: 100% !important;
  overflow: hidden !important;
}
body:has(.grid-container) {
  height: 100% !important;
  overflow: hidden !important;
}
body:has(.grid-container) #root {
  height: 100% !important;
  overflow: hidden !important;
}
body:has(.grid-container) .gom-app {
  height: 100% !important;
  min-height: 0 !important;
  overflow: hidden !important;
}
body:has(.grid-container) .gom-main {
  flex: 1 !important;
  padding: 0 !important;
  overflow: hidden !important;
  min-height: 0 !important;
  position: relative !important;
}
body:has(.grid-container) .gom-container {
  padding: 0 !important;
  height: 100% !important;
  max-width: none !important;
  overflow: hidden !important;
}

/* ── Start-Screen: #root + .gom-app normal fließend ─────────────── */
#root {
  /* keine height-Einschränkung – wächst mit Inhalt */
}
.gom-app {
  display: flex !important;
  flex-direction: column !important;
  min-height: calc(100vh - 68px) !important;
}
.gom-main {
  flex: 1 !important;
}
.gom-container {
  max-width: none !important;
}

/* ── Navbar ─────────────────────────────────────────────────────── */
#navbar {
  background: rgba(8,11,18,0.97) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border-bottom: 1px solid #1e293b !important;
  position: fixed !important; top: 0 !important;
  left: 0 !important; right: 0 !important;
  z-index: 9999 !important; height: 68px !important;
}
.nav-logo-img {
  display: block !important; height: 36px !important;
  width: auto !important; max-width: 200px !important;
  object-fit: contain !important; opacity: 1 !important;
}
.nav-logo { display: flex !important; align-items: center !important; }

/* ── Grid Container ─────────────────────────────────────────────── */
.grid-container {
  position: absolute !important;
  top: 0 !important; left: 0 !important;
  right: 0 !important; bottom: 0 !important;
  height: auto !important;
  margin: 0 !important; padding: 0 !important;
}

/* Bundle: height:100vh + font-size:30px → beides fixen */
.grid-container > div {
  height: 100% !important;
  padding: 0 !important;
  font-size: 1rem !important;
}

/* ── Map-Spalte ─────────────────────────────────────────────────── */
/* Bundle setzt: .map { background: linear-gradient(...) }
   Das liegt HINTER dem backgroundImage → kein Problem
   ABER: overflow:hidden ist schon im Bundle gesetzt               */
.grid-item.map {
  background-color: #080b12 !important;
  /* .map NICHT verwenden - trifft .map-container und überschreibt JS background-image! */
}

/* map-wrapper: Bundle setzt width:100%; height:100%; position:relative
   Das ist korrekt — wir lassen es so                               */

/* map-container: Bundle setzt height:100%; aspect-ratio:1
   Das EINZIGE Problem: mit grid-container position:absolute
   und grid-div height:100% ist height:100% = Viewport-Höhe
   → Container wird so hoch wie Viewport → aspect-ratio macht ihn
   genauso breit → overflow aus map-wrapper heraus → abgeschnitten

   FIX: width:100% des wrappers + height:auto + max-height:100%
   Dabei KEIN background-color setzen (würde inline background-image
   in manchen Browsern überschreiben je nach Spezifität)            */
#map {
  width: 100% !important;
  max-width: 100% !important;
  /* height+aspect-ratio aus Bundle belassen */
  /* KEIN background-color - überschreibt JS background-image! */
}
/* .map-container NICHT anfassen - Bundle setzt background-image per JS darauf */

/* ── Granaten: fix ──────────────────────────────────────────────── */
/* Bundle: .mapNade { width:1%; height:1% } → relativ zu map-container
   Wenn map-container korrekte Größe hat (~540px) → 1% = 5.4px → zu klein
   Wenn map-container falsch (0px oder riesig) → skaliert falsch
   Fix: explizite Pixel-Werte die immer passen                      */
.mapNade {
  width: 24px !important;
  height: 24px !important;
  max-width: 24px !important;
  max-height: 24px !important;
  font-size: 12px !important;
}
.mapNade svg { width: 24px !important; height: 24px !important; }

/* ── Runden-Buttons: wrap-Fix ───────────────────────────────────── */
/* Bundle: .round-nav-container { min-height:96px }
   Durch font-size:1rem (statt 30px) hat jeder Button mehr Platz
   → sie wrappen in 2 Zeilen → min-height:96px zeigt das an
   Fix: flex-wrap:nowrap auf den inneren Container                  */
.round-nav-container {
  min-height: 0 !important;
  padding: 4px !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
}
/* Der innere Flex-Container der die Buttons hält */
.round-nav-container > div,
.round-nav-container > .rounds-row {
  flex-wrap: nowrap !important;
  display: flex !important;
  overflow-x: auto !important;
  gap: 2px !important;
}
.roundNav {
  flex-shrink: 0 !important;
  min-width: 22px !important;
  font-size: 0.62rem !important;
  padding: 2px 1px !important;
  margin: 1px !important;
  width: auto !important;
}

/* ── InfoPanel: flex-column ─────────────────────────────────────── */
.infoPanel, .grid-item.infoPanel {
  background-color: #0d1117 !important;
  border-left: 1px solid #1e293b !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  font-size: 13px !important;
}

.controls-container { flex-shrink: 0 !important; }
.scoreboard-container {
  flex-shrink: 0 !important;
  /* Bundle: padding:16px, margin:12px → zu viel Platz */
  padding: 8px 12px !important;
  margin: 4px 0 !important;
}

/* ── "Press play to start" ──────────────────────────────────────── */
@keyframes pulse-glow {
  0%   { opacity: 0.3; text-shadow: 0 0 6px rgba(0,163,255,0.3); }
  50%  { opacity: 1;   text-shadow: 0 0 16px rgba(0,163,255,0.9), 0 0 32px rgba(0,163,255,0.4); }
  100% { opacity: 0.3; text-shadow: 0 0 6px rgba(0,163,255,0.3); }
}
.controls-container::after {
  content: '▶  PRESS PLAY TO START' !important;
  display: block !important;
  text-align: center !important;
  color: #00a3ff !important;
  font-size: 0.72rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.1em !important;
  padding: 5px 0 2px !important;
  animation: pulse-glow 2s ease-in-out infinite !important;
  pointer-events: none !important;
}

/* ── Spielerlisten: NEBENEINANDER ───────────────────────────────── */
.player-list-container {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  flex: 1 !important;
  overflow: hidden !important;
  min-height: 0 !important;
  margin-top: 4px !important;
  gap: 2px !important;
  align-items: start !important;
}

.scoreboard-teams {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  gap: 4px !important;
  width: 100% !important;
  padding: 0 4px !important;
  box-sizing: border-box !important;
}

.team-section {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  overflow: hidden !important;
}

.team-list { padding: 0 2px !important; box-sizing: border-box !important; }

/* Spieler-Karte: kompakt
   Bundle hat KEINE height auf .playerListItemContainer → auto
   Das Waffenbild (.playerListWeapons>div) hat auch keine Höhe → erbt font-size
   Mit font-size:1rem = 16px → Waffen werden 16px-Zeile hoch → ok
   Das Padding in .playerListWeapons (6px 0) verdoppelt die Karte fast */
.playerListItemContainer { margin-bottom: 3px !important; }
.playerListItemName { font-size: 0.78rem !important; padding: 0 4% !important; }
.playerListHpText  { font-size: 0.72rem !important; }
.playerListKAD, .playerListPrimaryAmmo,
.playerListSecondaryAmmo, .playerListMoney {
  font-size: 0.68rem !important;
  line-height: 1.2 !important;
  padding: 1px 0 !important;
}

/* Waffen-Box: Bundle padding:6px 0 → reduzieren */
.playerListWeapons {
  padding: 2px 0 !important;
}
/* Waffen-Divs: keine Höhe im Bundle → wir setzen explizit */
.playerListWeapons > div {
  height: 20px !important;
  max-height: 20px !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
}

/* Score-Zahlen: Bundle 2.8rem → reduzieren */
.score-number { font-size: 2rem !important; }
.scoreboard-scores { margin-bottom: 4px !important; }

/* ── Upload/Home ─────────────────────────────────────────────────── */
.upload-area {
  border-color: rgba(0,163,255,0.4) !important;
  background: rgba(0,163,255,0.06) !important;
}
.upload-area:hover, .upload-area.dragover {
  border-color: #00a3ff !important;
  background: rgba(0,163,255,0.12) !important;
  box-shadow: 0 8px 32px rgba(0,163,255,0.25) !important;
}
.upload-icon {
  font-size: 0 !important; display: block !important;
  margin-bottom: 20px !important; color: #00a3ff !important;
}
.upload-icon::before {
  content: '\f093' !important;
  font-family: 'Font Awesome 6 Free' !important;
  font-weight: 900 !important; font-size: 3rem !important;
  color: #00a3ff !important; display: block !important;
}
.upload-button {
  background: linear-gradient(135deg,#0058a3,#00a3ff) !important;
  box-shadow: 0 5px 20px rgba(0,163,255,0.3) !important;
  border: none !important;
}
.upload-button:hover {
  box-shadow: 0 8px 30px rgba(0,163,255,0.5) !important;
  transform: translateY(-2px) !important;
}

.hero-section { background: linear-gradient(135deg,#050810 0%,#0a1628 50%,#060c18 100%) !important; }
.hero-section h1 { color: #00a3ff !important; text-shadow: 0 0 40px rgba(0,163,255,0.3) !important; }
.upload-section, .links-section, .open-source-section { background: #111827 !important; border: 1px solid #1e293b !important; }
.upload-section h2, .links-section h2, .open-source-section h2 { color: #00a3ff !important; }

.timer-progress { background: linear-gradient(90deg,#0058a3,#00a3ff) !important; }
.play-button { background: linear-gradient(135deg,#0058a3,#00a3ff) !important; border-color: transparent !important; }
.roundNav.active { background: #00a3ff !important; border-color: #00a3ff !important; color: #fff !important; }

.site-footer { background: #0d1117 !important; border-top: 1px solid #1e293b !important; color: #475569 !important; }
.site-footer a { color: #475569 !important; }
.site-footer a:hover { color: #00a3ff !important; }
.github-btn, .tool-btn { background: #111827 !important; border: 1px solid #1e293b !important; }
.github-btn:hover, .tool-btn:hover { border-color: #00a3ff !important; }

.p-dialog { background: #111827 !important; border: 1px solid #1e293b !important; border-radius: 16px !important; color: #f1f5f9 !important; }
.p-dialog .p-dialog-header { background: #111827 !important; border-bottom: 1px solid #1e293b !important; color: #f1f5f9 !important; border-radius: 16px 16px 0 0 !important; }
.p-dialog .p-dialog-content { background: #111827 !important; color: #94a3b8 !important; }
.p-dialog .p-dialog-footer { background: #111827 !important; border-top: 1px solid #1e293b !important; border-radius: 0 0 16px 16px !important; }
.p-button { background: linear-gradient(135deg,#0058a3,#00a3ff) !important; border: none !important; border-radius: 8px !important; font-weight: 600 !important; color: #fff !important; }
.p-button:hover { filter: brightness(1.1) !important; }
.loading-spinner { border-color: #1e293b !important; border-top-color: #00a3ff !important; border-right-color: #37d5ff !important; }

#dv2-nav-dd {
  position: absolute !important; top: calc(100% + 8px) !important; right: 0 !important;
  min-width: 200px !important; background: rgba(10,10,18,0.98) !important;
  backdrop-filter: blur(20px) !important; border: 1px solid rgba(255,255,255,0.1) !important;
  border-radius: 12px !important; box-shadow: 0 20px 60px rgba(0,0,0,0.6) !important;
  z-index: 9000 !important; overflow: hidden !important;
  display: none !important; opacity: 0; visibility: hidden; pointer-events: none;
}
#dv2-nav-user.open #dv2-nav-dd, #dv2-nav-dd.open {
  display: block !important; opacity: 1 !important; visibility: visible !important; pointer-events: all !important;
}
#dv2-nav-dd a:hover, #dv2-nav-dd button:hover { background: rgba(255,255,255,0.07) !important; }
#navbar { top: 0 !important; }
/* v5: nur noch eine Navbar → nav-actions immer sichtbar */
.nav-container > .nav-actions { display: flex !important; align-items: center !important; gap: 0.5rem !important; }

::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: #0d1117; }
::-webkit-scrollbar-thumb { background: #2d3748; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #00a3ff; }