/* Delta Warzone theme bridge for Chronos stats.
   Uses the live site variables from /assets/css/theme-runtime.php when deployed under
   https://delta-warzone.devilishservices.com/stats/ and falls back to the current
   Delta Warzone dark metallic gold palette if the runtime stylesheet is unavailable. */
:root {
  --dw-bg: var(--theme-bg, #101510);
  --dw-surface: var(--theme-surface, #181e1a);
  --dw-surface-alt: var(--theme-surface-alt, #23281f);
  --dw-inner: var(--theme-inner-card-bg, #0b0f0c);
  --dw-text: var(--theme-text, #ffffff);
  --dw-muted: var(--theme-muted, #bfae6a);
  --dw-accent: var(--theme-accent, #e2c96c);
  --dw-primary: var(--theme-primary, #bfae6a);
  --dw-button-bg: var(--theme-button-bg, #e2c96c);
  --dw-button-text: var(--theme-button-text, #181e1a);
  --dw-header-bg: var(--theme-header-bg, #181e1a);
  --dw-header-text: var(--theme-header-text, #ffffff);
  --dw-radius: var(--theme-radius, 14px);
  --dw-radius-lg: var(--theme-radius-lg, 22px);
  --dw-border-width: var(--theme-border-width, 1px);
  --dw-panel-shadow: var(--theme-panel-shadow, 0 12px 34px rgba(0,0,0,0.28));
}

* {
  box-sizing: border-box;
}

html,
body {
  min-height: 100%;
  margin: 0;
}

body,
body[style] {
  background:
    radial-gradient(1200px circle at -10% 0%, rgba(226, 201, 108, 0.12) 0%, rgba(16,21,16,0) 42%),
    radial-gradient(900px circle at 100% 10%, rgba(191,174,106,0.12) 0%, rgba(16,21,16,0) 48%),
    var(--dw-bg) !important;
  color: var(--dw-text) !important;
  font-family: "Sora", "Segoe UI", Tahoma, Verdana, Arial, sans-serif !important;
  scrollbar-color: var(--dw-accent) var(--dw-bg);
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background:
    linear-gradient(rgba(255,255,255,0.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.018) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,0.65), transparent 70%);
}

.site-header {
  left: 50% !important;
  right: auto !important;
  width: 98% !important;
  max-width: none !important;
  transform: translateX(-50%) !important;
  background: rgba(24, 30, 26, 0.94) !important;
  background: color-mix(in srgb, var(--dw-header-bg) 94%, transparent) !important;
  border-bottom: var(--dw-border-width) solid color-mix(in srgb, var(--dw-accent) 42%, transparent) !important;
  border-radius: 0 0 var(--dw-radius-lg) var(--dw-radius-lg) !important;
  box-shadow: 0 14px 34px rgba(0,0,0,0.34) !important;
  backdrop-filter: blur(14px);
}

.nav-inner {
  width: 98% !important;
  min-height: 72px;
  padding: 12px 0 !important;
}

.logo a {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--dw-header-text) !important;
}

.logo a::after {
  content: "Stats";
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 4px 12px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--dw-accent) 38%, transparent);
  background: rgba(255,255,255,0.04);
  color: var(--dw-accent);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 800;
}

.logo img {
  max-height: 56px !important;
  width: auto;
  filter: drop-shadow(0 8px 18px rgba(0,0,0,0.42));
}

.nav-links,
.nav-admin-links {
  gap: 9px !important;
}

.nav-button,
.nav-search input[type="submit"],
input[type="submit"],
input[type="button"],
button,
.button {
  border: 0 !important;
  border-radius: var(--dw-radius) !important;
  background: linear-gradient(180deg, var(--dw-button-bg) 0%, var(--dw-primary) 100%) !important;
  color: var(--dw-button-text) !important;
  box-shadow: 0 10px 22px rgba(0,0,0,0.28), inset 0 1px 0 rgba(255,255,255,0.25) !important;
  font-family: "Sora", "Segoe UI", Tahoma, Verdana, Arial, sans-serif !important;
  font-weight: 800 !important;
  letter-spacing: 0.02em;
  text-decoration: none !important;
  transition: transform .16s ease, filter .16s ease, box-shadow .16s ease;
}

.nav-button {
  padding: 8px 13px !important;
  font-size: 11px !important;
}

.nav-button:hover,
.nav-search input[type="submit"]:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
button:hover,
.button:hover {
  transform: translateY(-1px);
  filter: brightness(1.08);
  text-decoration: none !important;
}

.nav-button.active,
.nav-button.active:hover {
  background: linear-gradient(180deg, #ffffff 0%, var(--dw-accent) 100%) !important;
  color: #101510 !important;
  outline: 1px solid rgba(255,255,255,0.35);
}

.nav-button.admin {
  background: linear-gradient(180deg, #2b342d 0%, #0b0f0c 100%) !important;
  color: var(--dw-accent) !important;
  border: 1px solid color-mix(in srgb, var(--dw-accent) 42%, transparent) !important;
}

.nav-button.admin:hover {
  color: #fff !important;
  background: linear-gradient(180deg, #343d34 0%, #101510 100%) !important;
}

.nav-search input[type="text"],
input,
option,
textarea,
select {
  background: color-mix(in srgb, var(--dw-bg) 92%, #000 8%) !important;
  color: var(--dw-text) !important;
  border: 1px solid color-mix(in srgb, var(--dw-muted) 48%, transparent) !important;
  border-radius: calc(var(--dw-radius) - 4px) !important;
  padding: 8px 10px !important;
  font-family: "Sora", "Segoe UI", Tahoma, Verdana, Arial, sans-serif !important;
}

.nav-search input[type="text"]::placeholder {
  color: color-mix(in srgb, var(--dw-muted) 75%, transparent);
}

.server-nav {
  background: rgba(10, 14, 11, 0.86) !important;
  border-top: 1px solid color-mix(in srgb, var(--dw-accent) 18%, transparent) !important;
}

.server-nav-links {
  width: 98% !important;
}

.server-nav-item {
  background: linear-gradient(180deg, color-mix(in srgb, var(--dw-surface-alt) 88%, #000 12%), color-mix(in srgb, var(--dw-surface) 88%, #000 12%)) !important;
  border: 1px solid color-mix(in srgb, var(--dw-accent) 22%, transparent) !important;
  border-radius: 999px !important;
  color: var(--dw-text) !important;
  min-height: 28px !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
}

.server-nav-item:hover {
  border-color: color-mix(in srgb, var(--dw-accent) 55%, transparent) !important;
  background: linear-gradient(180deg, color-mix(in srgb, var(--dw-surface-alt) 94%, #fff 6%), var(--dw-surface)) !important;
}

.page-wrap {
  padding-top: 126px !important;
}

.main,
.main td,
td[style*="background-color"] {
  background: transparent !important;
  color: var(--dw-text) !important;
}

.main > td,
.page-wrap > table,
.nav-card,
.stat-table-wrapper,
.player-profile-card,
.map-detail-image,
.map-detail-stats {
  color: var(--dw-text) !important;
}

.pagetitle,
.title,
h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--dw-accent) !important;
  letter-spacing: 0.02em;
}

.text,
.multipage,
.playermedals,
.player-section-note,
.player-rank-label span,
.usage-bar,
.stat-bar-cell small {
  color: var(--dw-muted) !important;
}

.main a,
.header a,
.tableheader a,
.navigation a,
a {
  color: var(--dw-accent) !important;
}

.main a:hover,
.header a:hover,
.tableheader a:hover,
.navigation a:hover,
a:hover {
  color: #ffffff !important;
}

.nav-card,
.player-profile-card,
.player-metric,
.stat-table,
.stat-table-wrapper--centered,
table:not(.pagination),
.security-modal,
.admin-modal {
  background: linear-gradient(180deg, var(--dw-surface-alt) 0%, var(--dw-surface) 100%) !important;
  border: var(--dw-border-width) solid color-mix(in srgb, var(--dw-accent) 34%, transparent) !important;
  border-radius: var(--dw-radius) !important;
  box-shadow: var(--dw-panel-shadow) !important;
  color: var(--dw-text) !important;
}

.stat-table {
  overflow: hidden;
  border-collapse: separate !important;
  border-spacing: 0;
}

.stat-table thead th,
.tableheader,
.selectedasc,
.selecteddesc,
.unselected,
.header {
  background: linear-gradient(180deg, color-mix(in srgb, var(--dw-accent) 30%, #111 70%) 0%, color-mix(in srgb, var(--dw-surface) 85%, #000 15%) 100%) !important;
  color: var(--dw-text) !important;
  border-color: color-mix(in srgb, var(--dw-accent) 34%, transparent) !important;
  text-shadow: 0 1px 1px rgba(0,0,0,0.5);
}

.tablerow1,
.stat-table tbody tr:nth-child(odd) {
  background: rgba(255,255,255,0.035) !important;
  color: var(--dw-text) !important;
}

.tablerow2,
.stat-table tbody tr:nth-child(even) {
  background: rgba(255,255,255,0.065) !important;
  color: var(--dw-text) !important;
}

.stat-table tbody td,
td,
th {
  border-color: rgba(226,201,108,0.13) !important;
}

.stat-table tbody tr:hover,
tr.tablerow1:hover,
tr.tablerow2:hover {
  background: color-mix(in srgb, var(--dw-accent) 13%, transparent) !important;
}

.player-metric {
  background: rgba(0,0,0,0.22) !important;
  box-shadow: none !important;
}

.player-metric span {
  color: var(--dw-muted) !important;
}

.player-metric strong,
.player-rank-label strong {
  color: var(--dw-text) !important;
}

.modern-pagination .pagination li a span,
.modern-pagination .pagination li span.page-badge,
.modern-pagination .pagination li.arrow span,
.modern-pagination .pagination li.arrow a span {
  border-color: color-mix(in srgb, var(--dw-accent) 45%, transparent) !important;
  background: rgba(16,21,16,0.82) !important;
  color: var(--dw-accent) !important;
}

.modern-pagination .pagination li span.page-badge.active {
  background: linear-gradient(180deg, var(--dw-accent), var(--dw-primary)) !important;
  color: #101510 !important;
}

.nav-card {
  width: 98% !important;
  margin-top: 18px !important;
  padding: 18px 22px !important;
}

.nav-card span[style*="background-color"] {
  background: var(--dw-badge-bg, rgba(226,201,108,0.16)) !important;
  color: var(--dw-badge-text, var(--dw-accent)) !important;
  border: 1px solid color-mix(in srgb, var(--dw-accent) 30%, transparent);
}

.error {
  color: var(--theme-danger, #ff7373) !important;
}

.green,
.none {
  color: var(--theme-success, #4caf50) !important;
}

img {
  max-width: 100%;
  height: auto;
}

@media (max-width: 980px) {
  .nav-inner {
    flex-direction: column;
    align-items: stretch !important;
  }

  .logo a {
    justify-content: center;
  }

  .nav-links,
  .nav-admin-links,
  .nav-search form {
    justify-content: center;
  }

  .nav-search input[type="text"] {
    width: min(100%, 320px) !important;
  }

  .page-wrap {
    padding-top: 220px !important;
  }
}

@media (max-width: 560px) {
  .nav-button {
    width: 100%;
    text-align: center;
  }

  .nav-links {
    width: 100%;
  }

  .page-wrap {
    padding-top: 330px !important;
  }
}

/* Home page logo.gif sizing */
.home-logo-gif {
  width: 800px !important;
  max-width: 100% !important;
  height: auto !important;
  aspect-ratio: 800 / 533;
  object-fit: contain;
  display: block;
  margin: 0 auto;
}