:root {
  --primary-color: #18d7ff;
  --secondary-color: #18d7ff;
  --accent-color: #18d7ff;
  --TColor: #ff9aa2;
  --CTColor: #6ff0c2;
  --BlackColor: #050a12;
  --LightColor: #dce7f5;
  --DarkColor: #101a2a;
  --text-color: #dce7f5 !important;
  --text-muted: #748199;
  --border-radius: 16px;
  --gradient-primary: linear-gradient(135deg, #18d7ff 0%, #6ff0c2 100%);
}

html,
body {
  background: radial-gradient(circle at 24% 12%, rgba(24, 215, 255, 0.12), transparent 34%), #050a12;
  color: #dce7f5;
  font-family: var(--font-exo, "Segoe UI", sans-serif);
}

.grid-container {
  background: #050a12;
  color: #dce7f5 !important;
}

.grid-container > .infoPanel {
  border-left: 1px solid rgba(35, 53, 78, 0.9);
  background: linear-gradient(180deg, rgba(10, 17, 29, 0.96), rgba(5, 10, 18, 0.96));
  box-shadow: -14px 0 40px rgba(0, 0, 0, 0.4);
}

.map-wrapper {
  background: #050a12;
}

.timer-container,
.scoreboard-container,
.round-nav-container,
.controls-container,
.player-list-container {
  background: rgba(12, 20, 34, 0.78);
  border: 1px solid rgba(35, 53, 78, 0.86);
  border-radius: 16px;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.28);
  overflow: hidden;
}

.timer-container {
  margin: 18px 18px 12px;
}

.timer-progress {
  background: linear-gradient(90deg, #18d7ff, #6ff0c2);
}

.timer-text,
.score-number,
.team-name,
.playerListItemName {
  color: #dce7f5;
  font-weight: 800;
}

.playerNameTag,
.playerListItemName,
.playerListItemName.T,
.playerListItemName.CT {
  color: #ffffff !important;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.72);
}

.score-number.T,
.team-name.T,
.T {
  color: #ff9aa2 !important;
}

.score-number.CT,
.team-name.CT,
.CT {
  color: #6ff0c2 !important;
}

.control-button,
.map-button,
.roundNav,
.p-button {
  border: 1px solid rgba(35, 53, 78, 0.92) !important;
  border-radius: 14px !important;
  background: #101a2a !important;
  color: #dce7f5 !important;
  box-shadow: none !important;
}

.control-button:hover,
.map-button:hover,
.roundNav:hover,
.p-button:hover {
  border-color: rgba(24, 215, 255, 0.75) !important;
  color: #18d7ff !important;
}

.play-button,
.roundNav.active,
.control-button.active {
  border-color: rgba(24, 215, 255, 0.8) !important;
  background: rgba(24, 215, 255, 0.14) !important;
  color: #18d7ff !important;
}

.controls-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
}

.controls-wrapper.compact {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.control-button {
  width: 58px !important;
  height: 58px !important;
  min-width: 58px !important;
  font-size: 28px !important;
}

.play-button {
  width: 68px !important;
  height: 68px !important;
  min-width: 68px !important;
}

.speed-wrapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

.speed-chip {
  border: 1px solid rgba(35, 53, 78, 0.92);
  border-radius: 999px;
  background: #101a2a;
  color: #748199;
  cursor: pointer;
  font: 800 13px/1 var(--font-exo, "Segoe UI", sans-serif);
  min-width: 54px;
  padding: 8px 10px;
  transition: border-color 160ms ease, color 160ms ease, background 160ms ease;
}

.speed-chip:hover {
  border-color: rgba(24, 215, 255, 0.75);
  color: #18d7ff;
}

.speed-chip.active {
  border-color: rgba(24, 215, 255, 0.86);
  background: #18d7ff;
  color: #050a12;
}

.roundNav.T {
  border-color: rgba(255, 154, 162, 0.58) !important;
  background: rgba(255, 154, 162, 0.12) !important;
  color: #ff9aa2 !important;
}

.roundNav.CT {
  border-color: rgba(111, 240, 194, 0.58) !important;
  background: rgba(111, 240, 194, 0.12) !important;
  color: #6ff0c2 !important;
}

.roundNav.T.active {
  border-color: #ff9aa2 !important;
  background: rgba(255, 154, 162, 0.24) !important;
  box-shadow: inset 0 0 0 2px rgba(255, 154, 162, 0.35) !important;
}

.roundNav.CT.active {
  border-color: #6ff0c2 !important;
  background: rgba(111, 240, 194, 0.24) !important;
  box-shadow: inset 0 0 0 2px rgba(111, 240, 194, 0.35) !important;
}

.playerListItemContainer,
.playerListItem {
  background: rgba(16, 26, 42, 0.68);
  border-color: rgba(35, 53, 78, 0.7);
}

.playerListHp {
  background: rgba(5, 10, 18, 0.9) !important;
  border-radius: 999px;
}

.playerListHpValue.T {
  background: linear-gradient(90deg, #ff9aa2, #ff5063) !important;
}

.playerListHpValue.CT {
  background: linear-gradient(90deg, #18d7ff, #6ff0c2) !important;
}

.loading-overlay {
  background: rgba(2, 6, 12, 0.86);
  backdrop-filter: blur(8px);
}

.loading-dialog {
  min-width: 180px;
  border: 1px solid rgba(35, 53, 78, 0.95);
  border-radius: 18px;
  background: #0c1422;
  color: #dce7f5;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.48);
}

.loading-spinner {
  border-color: rgba(24, 215, 255, 0.2);
  border-top-color: #18d7ff;
  border-right-color: #6ff0c2;
}

.progress-bar-container {
  background: #050a12;
  border: 1px solid rgba(35, 53, 78, 0.8);
}

.progress-bar {
  background: linear-gradient(90deg, #18d7ff, #6ff0c2);
}

.killfeedRow {
  border-radius: 12px;
  background: rgba(12, 20, 34, 0.9);
  border: 1px solid rgba(35, 53, 78, 0.8);
}

.map-container {
  filter: saturate(0.92) brightness(0.9);
}

.demo-panel-toggle {
  display: none;
}

@media (max-width: 900px), (pointer: coarse) {
  html,
  body {
    height: 100%;
    overflow-x: hidden;
    overflow-y: hidden;
  }

  .grid-container {
    display: block !important;
    height: 100vh !important;
    min-height: 100vh;
    overflow: hidden;
  }

  .grid-container > div {
    height: 100% !important;
    min-height: 0;
    font-size: 18px;
  }

  .grid-container > .map,
  .map {
    width: 100% !important;
    height: 100vh !important;
    min-height: 100vh;
    overflow: hidden;
  }

  .grid-container > .infoPanel {
    position: fixed !important;
    right: 10px;
    bottom: calc(10px + env(safe-area-inset-bottom));
    left: 10px;
    z-index: 1002;
    width: 100% !important;
    max-width: calc(100vw - 20px);
    height: auto !important;
    min-height: 0;
    max-height: 45vh;
    overflow: hidden;
    border-left: 0;
    border: 1px solid rgba(35, 53, 78, 0.95);
    border-radius: 18px;
    background: rgba(5, 10, 18, 0.92);
    box-shadow: 0 -18px 54px rgba(0, 0, 0, 0.48);
    transform: translateY(0);
    transition: transform 220ms ease;
  }

  body.demo-panel-collapsed .grid-container > .infoPanel {
    transform: translateY(calc(100% + 14px));
  }

  .info-panel-container {
    display: flex !important;
    align-items: stretch;
    gap: 10px;
    max-height: 45vh;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 10px 44px 10px 10px;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
  }

  .info-panel-container > * {
    flex: 0 0 auto;
    scroll-snap-align: start;
  }

  .timer-container,
  .scoreboard-container,
  .round-nav-container,
  .controls-container,
  .player-list-container {
    margin: 0 !important;
    border-radius: 14px;
  }

  .timer-container {
    width: 150px;
  }

  .round-nav-container {
    width: min(420px, 82vw);
    overflow-x: auto;
    overflow-y: hidden;
    padding: 8px;
    -webkit-overflow-scrolling: touch;
  }

  .controls-container {
    width: 250px;
    gap: 8px;
    padding: 10px 12px;
    justify-content: center;
  }

  .controls-wrapper.compact {
    gap: 8px;
  }

  .control-button {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    font-size: 22px !important;
  }

  .play-button {
    width: 54px !important;
    height: 54px !important;
    min-width: 54px !important;
  }

  .speed-chip {
    min-width: 46px;
    padding: 7px 8px;
    font-size: 12px;
  }

  .roundNav {
    min-width: 38px !important;
    height: 38px !important;
    font-size: 15px !important;
  }

  .player-list-container {
    width: min(620px, 86vw);
    max-height: 40vh;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
  }

  .playerListItemContainer,
  .playerListItem {
    min-height: 76px;
  }

  .scoreboard-container {
    width: 230px;
  }

  .demo-panel-toggle {
    position: fixed;
    right: 18px;
    bottom: calc(18px + env(safe-area-inset-bottom));
    z-index: 1004;
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    border: 1px solid rgba(111, 240, 194, 0.65);
    border-radius: 999px;
    background: rgba(16, 26, 42, 0.94);
    color: #6ff0c2;
    font: 900 24px/1 var(--font-exo, "Segoe UI", sans-serif);
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.44);
  }

  body.demo-panel-collapsed .demo-panel-toggle {
    bottom: calc(14px + env(safe-area-inset-bottom));
  }
}

html.demo-mobile,
body.demo-mobile {
  height: 100% !important;
  overflow-x: hidden !important;
  overflow-y: hidden !important;
}

body.demo-mobile .grid-container {
  display: block !important;
  grid-template-columns: none !important;
  grid-template-rows: none !important;
  width: 100vw !important;
  height: 100vh !important;
  min-height: 100vh !important;
  overflow: hidden !important;
}

body.demo-mobile .grid-container > div {
  height: 100% !important;
  min-height: 0 !important;
  font-size: 18px !important;
}

body.demo-mobile .grid-container > .map,
body.demo-mobile .map {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  min-height: 100vh !important;
  overflow: hidden !important;
}

body.demo-mobile .grid-container > .infoPanel {
  position: fixed !important;
  top: auto !important;
  right: 10px !important;
  bottom: calc(10px + env(safe-area-inset-bottom)) !important;
  left: 10px !important;
  z-index: 1002 !important;
  width: auto !important;
  max-width: calc(100vw - 20px) !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: 45vh !important;
  overflow: hidden !important;
  border: 1px solid rgba(35, 53, 78, 0.95) !important;
  border-radius: 18px !important;
  background: rgba(5, 10, 18, 0.92) !important;
  box-shadow: 0 -18px 54px rgba(0, 0, 0, 0.48) !important;
  transform: translateY(0) !important;
  transition: transform 220ms ease !important;
}

body.demo-mobile.demo-panel-collapsed .grid-container > .infoPanel {
  transform: translateY(calc(100% + 14px)) !important;
}

body.demo-mobile .info-panel-container {
  display: flex !important;
  align-items: stretch !important;
  gap: 10px !important;
  max-height: 45vh !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  padding: 10px 44px 10px 10px !important;
  scroll-snap-type: x proximity !important;
  -webkit-overflow-scrolling: touch !important;
}

body.demo-mobile .info-panel-container > * {
  flex: 0 0 auto !important;
  scroll-snap-align: start !important;
}

body.demo-mobile .timer-container,
body.demo-mobile .scoreboard-container,
body.demo-mobile .round-nav-container,
body.demo-mobile .controls-container,
body.demo-mobile .player-list-container {
  margin: 0 !important;
  border-radius: 14px !important;
}

body.demo-mobile .timer-container {
  width: 150px !important;
}

body.demo-mobile .round-nav-container {
  width: min(420px, 82vw) !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  padding: 8px !important;
  -webkit-overflow-scrolling: touch !important;
}

body.demo-mobile .controls-container {
  width: 250px !important;
  gap: 8px !important;
  padding: 10px 12px !important;
  justify-content: center !important;
}

body.demo-mobile .controls-wrapper.compact {
  gap: 8px !important;
}

body.demo-mobile .control-button {
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  font-size: 22px !important;
}

body.demo-mobile .play-button {
  width: 54px !important;
  height: 54px !important;
  min-width: 54px !important;
}

body.demo-mobile .speed-chip {
  min-width: 46px !important;
  padding: 7px 8px !important;
  font-size: 12px !important;
}

body.demo-mobile .roundNav {
  min-width: 38px !important;
  height: 38px !important;
  font-size: 15px !important;
}

body.demo-mobile .player-list-container {
  width: min(620px, 86vw) !important;
  max-height: 40vh !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch !important;
}

body.demo-mobile .playerListItemContainer,
body.demo-mobile .playerListItem {
  min-height: 76px !important;
}

body.demo-mobile .scoreboard-container {
  width: 230px !important;
}

body.demo-mobile .demo-panel-toggle {
  position: fixed !important;
  right: 18px !important;
  bottom: calc(18px + env(safe-area-inset-bottom)) !important;
  z-index: 1004 !important;
  display: grid !important;
  width: 38px !important;
  height: 38px !important;
  place-items: center !important;
  border: 1px solid rgba(111, 240, 194, 0.65) !important;
  border-radius: 999px !important;
  background: rgba(16, 26, 42, 0.94) !important;
  color: #6ff0c2 !important;
  font: 900 24px/1 var(--font-exo, "Segoe UI", sans-serif) !important;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.44) !important;
}

body.demo-mobile.demo-panel-collapsed .demo-panel-toggle {
  bottom: calc(14px + env(safe-area-inset-bottom)) !important;
}