/* PARAZIT-Clan Stats 1.0 - custom additions */
:root{
  --prz-bg: rgba(0,0,0,0.70);
  --prz-panel: rgba(18,10,8,0.62);
  --prz-border: rgba(145,101,74,0.55);
  --prz-gold: rgba(210,185,155,0.95);
  --prz-text: #C8C7C7;

  /* mini design-system tokens */
  --ds-2: 2px;
  --ds-4: 4px;
  --ds-8: 8px;
  --ds-12: 12px;
  --ds-16: 16px;
  --ds-20: 20px;
  --ds-24: 24px;
  --ds-r12: 12px;
  --ds-r16: 16px;
  --ds-shadow-1: 0 12px 28px rgba(0,0,0,0.25);
  --ds-shadow-2: 0 20px 55px rgba(0,0,0,0.35);
  --ds-shadow-3: 0 24px 70px rgba(0,0,0,0.42);
  --ds-focus: rgba(210,185,155,0.55);
}

/* Theme variants */
html[data-theme="modern"]{
  --prz-bg: rgba(0,0,0,0.62);
  --prz-panel: rgba(22,22,26,0.70);
  --prz-border: rgba(180,180,190,0.22);
  --prz-gold: rgba(160,220,255,0.95);
  --ds-focus: rgba(160,220,255,0.55);
}
/* Modern Clean: keep the same ET background, but with a cleaner blue/steel wash */
html[data-theme="modern"] body{
  background-image:
    radial-gradient(1200px 600px at 20% 0%, rgba(40,60,90,.55), rgba(0,0,0,.85)),
    url("../images/background.jpg");
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}

/* Subtle ET texture overlay (works for both themes, stronger in classic) */
body{ position: relative; }
body::before{
  content:"";
  position: fixed;
  inset: 0;
  pointer-events:none;
  background:
    radial-gradient(800px 450px at 10% 10%, rgba(255,255,255,0.05), transparent 60%),
    radial-gradient(700px 420px at 90% 20%, rgba(255,255,255,0.03), transparent 55%),
    repeating-linear-gradient(0deg, rgba(255,255,255,0.018) 0, rgba(255,255,255,0.018) 1px, transparent 1px, transparent 6px),
    repeating-linear-gradient(90deg, rgba(0,0,0,0.02) 0, rgba(0,0,0,0.02) 1px, transparent 1px, transparent 10px);
  opacity: .55;
  mix-blend-mode: overlay;
  z-index: 0;
}
html[data-theme="modern"] body::before{ opacity: .35; }

.container, .navbar-wrap, #main-content{ position: relative; z-index: 1; }
*{ box-sizing:border-box; }

/* Accessibility: visible focus */
:focus{ outline: none; }
:focus-visible{
  outline: 2px solid var(--ds-focus);
  outline-offset: 2px;
  border-radius: 10px;
}

/* Baseline grid feel */
body{ line-height: 1.4; }
.container{ max-width:960px; margin:0 auto; padding:0 15px; }
#theme-banner{ margin:0; padding:0; }
#theme-banner img{ width:100%; height:auto; display:block; }

.navbar-wrap{
  /* Boxed navbar (the background is applied to .navbar-wrap .container below) */
  position: sticky;
  top: 0;
  z-index: 50;
}
.navbar-wrap.is-stuck{ box-shadow: 0 14px 35px rgba(0,0,0,0.62); }
.navbar{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap: 6px;
  margin:0;
  padding:0;
  list-style:none;
}
.navbar a{
  display:block;
  font: 12px "oswaldregular", Arial, Helvetica, Sans-serif;
  color: rgba(242,232,220,0.92);
  line-height: 40px;
  padding: 0 16px;
  text-transform: uppercase;
}
.navbar a:hover, .navbar a.active{
  color: var(--prz-gold);
  text-shadow: 0 0 12px rgba(188,143,109,0.22);
}
html[data-theme="modern"] .navbar a:hover, html[data-theme="modern"] .navbar a.active{ text-shadow: 0 0 12px rgba(160,220,255,0.20); }

/* Small ET icons */
.class-ico{ width:16px; height:16px; vertical-align:-3px; margin-right:8px; flex: 0 0 auto; }
.clan-tag{ font-family: "oswaldregular", Arial, Helvetica, Sans-serif; letter-spacing:1px; color: rgba(242,232,220,0.92); }
html[data-theme="modern"] .clan-tag{ color: rgba(230,245,255,0.92); }

/* Dog-tag profile card */
.dogtag{
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(34,23,17,0.75), rgba(12,10,10,0.60));
  border: 1px solid rgba(145,101,74,0.35);
  box-shadow: var(--ds-shadow-2);
}
.dogtag::after{
  content:"";
  position:absolute;
  top:-80px; right:-120px;
  width:260px; height:260px;
  background: radial-gradient(circle at 30% 30%, rgba(210,185,155,0.24), transparent 60%);
  transform: rotate(15deg);
}
.dogtag .dogtag-inner{ position:relative; z-index:1; padding: 16px; display:flex; gap: 14px; align-items:center; }
.dogtag .avatar{
  width:54px; height:54px; border-radius: 999px;
  background: rgba(0,0,0,0.25);
  border: 1px solid rgba(145,101,74,0.35);
  display:flex; align-items:center; justify-content:center;
  font: 18px "oswaldregular", Arial, Helvetica, Sans-serif;
  color: rgba(242,232,220,0.92);
  overflow:hidden;
  position: relative;
}

/* Player card logo inside the avatar circle */
.dogtag .avatar-logo{
  width: 100%;
  height: 100%;
  display:block;
  object-fit: contain;
  padding: 2px;
}
.dogtag .avatar-fallback{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  opacity: 0;
}
.dogtag .meta{ flex:1; min-width:0; }
.dogtag .pname{ margin:0; font: 22px "oswaldregular", Arial, Helvetica, Sans-serif; text-transform: uppercase; letter-spacing: 1px; }
.dogtag .sub{ margin-top:4px; opacity:.9; display:flex; gap: 10px; flex-wrap:wrap; }
.chip{ display:inline-flex; align-items:center; gap:8px; padding: 6px 10px; border-radius: 999px; border: 1px solid rgba(145,101,74,0.28); background: rgba(0,0,0,0.16); }

html[data-theme="modern"] .dogtag{ background: linear-gradient(180deg, rgba(25,32,40,0.78), rgba(10,12,16,0.64)); border-color: rgba(180,180,190,0.24); }
html[data-theme="modern"] .chip{ border-color: rgba(180,180,190,0.20); }

/* Console-like blocks for Records/Maps */
.console{
  border-radius: 16px;
  background: rgba(0,0,0,0.28);
  border: 1px solid rgba(145,101,74,0.25);
  padding: 10px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}
.console .table th{ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; }

/* Share card */
.share-card{
  border-radius: 18px;
  border: 1px solid rgba(145,101,74,0.28);
  background: rgba(0,0,0,0.22);
  padding: 12px;
}

.panel{
  background: var(--prz-panel);
  border: 1px solid rgba(145,101,74,0.28);
  margin: 0 0 20px 0;
  box-shadow: 0 20px 55px rgba(0,0,0,0.35);
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.panel:hover{ transform: translateY(-2px); box-shadow: 0 24px 70px rgba(0,0,0,0.42); }
.panel-head{
  background: #221711;
  border-bottom: 1px solid rgba(145,101,74,0.28);
  padding: 10px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
}
.panel-head h2{
  margin:0;
  font: 16px "oswaldregular", Arial, Helvetica, Sans-serif;
  color:#fff;
  text-transform: uppercase;
}
.pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid rgba(145,101,74,0.35);
  background: rgba(0,0,0,0.18);
  color: rgba(242,232,220,0.92);
  font: 11px "oswaldregular", Arial, Helvetica, Sans-serif;
  text-transform: uppercase;
  letter-spacing: 1px;
  white-space: nowrap;
}

/* Dashboard toolbar */
.dash-toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  margin: 0 0 12px 0;
  padding: 10px 12px;
  background: rgba(18,10,8,0.55);
  border: 1px solid rgba(145,101,74,0.28);
  box-shadow: 0 18px 40px rgba(0,0,0,0.30);
}
.dash-breadcrumb{
  font: 12px "oswaldregular", Arial, Helvetica, Sans-serif;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: rgba(242,232,220,0.92);
}
.dash-breadcrumb a{ color: rgba(242,232,220,0.92); }
.dash-breadcrumb a:hover{ color: var(--prz-gold); }
.dash-breadcrumb .sep{ opacity: .55; margin: 0 8px; }
.dash-controls{ display:flex; align-items:center; gap: 10px; flex-wrap:wrap; justify-content:flex-end; }
.control{ display:flex; align-items:center; gap: 8px; }
.control-label{ font: 11px "oswaldregular", Arial, Helvetica, Sans-serif; text-transform: uppercase; opacity: .85; }
.control-select{
  background: rgba(0,0,0,0.22);
  border: 1px solid rgba(145,101,74,0.35);
  color: rgba(242,232,220,0.92);
  padding: 7px 10px;
  border-radius: 10px;
}
.control-btn{
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 7px 12px;
  border-radius: 10px;
  border: 1px solid rgba(145,101,74,0.35);
  background: rgba(0,0,0,0.18);
  color: rgba(242,232,220,0.92);
  font: 12px "oswaldregular", Arial, Helvetica, Sans-serif;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.control-btn:hover{ filter: brightness(1.05); box-shadow: 0 10px 24px rgba(0,0,0,0.28); }
.control-btn.is-on{ border-color: rgba(210,185,155,0.55); color: var(--prz-gold); }
.control-btn .ico{ opacity: .9; }

@media (max-width: 980px){
  .dash-toolbar{ flex-direction:column; align-items:flex-start; }
  .dash-controls{ width:100%; justify-content:flex-start; }
}
.panel-body{ padding: 10px; }

.table{
  width:100%;
  border-collapse: collapse;
}
.table th, .table td{
  padding:8px 6px;
  border-bottom: 1px solid rgba(145,101,74,0.20);
  text-align:left;
  font-size: 12px;
}
.table th{
  text-transform: uppercase;
  font-family: "oswaldregular", Arial, Helvetica, Sans-serif;
  font-size: 11px;
  color: rgba(242,232,220,0.92);
}
.table tr:hover td{ background: rgba(0,0,0,0.18); }
.table tbody tr:nth-child(even) td{ background: rgba(0,0,0,0.10); }

/* Premium "podium" top 3 rows */
.podium td{ padding-top: 10px; padding-bottom: 10px; }
.podium .podium-medal{ font-size: 14px; margin-right: 6px; }
.podium .podium-name{ font-weight: 900; }
.xpbar{
  margin-top: 6px;
  height: 8px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(0,0,0,0.25);
  border: 1px solid rgba(145,101,74,0.18);
}
.xpbar > span{ display:block; height:100%; width:0%; background: rgba(210,185,155,0.55); }

/* Search highlight */
.hit{ background: rgba(210,185,155,0.14) !important; }
.hit .podium-name{ text-shadow: 0 0 12px rgba(210,185,155,0.25); }

/* Top 3 highlights */
tr.rank-1 td{ background: rgba(210,185,155,0.12) !important; }
tr.rank-2 td{ background: rgba(200,200,210,0.10) !important; }
tr.rank-3 td{ background: rgba(180,140,110,0.10) !important; }
tr.rank-1 td:first-child{ color: #ffd98a; font-weight: 900; }
tr.rank-2 td:first-child{ color: #d7d7df; font-weight: 800; }
tr.rank-3 td:first-child{ color: #d3a07e; font-weight: 800; }

/* ---- Dashboard (rank/competitiv) layout ---- */
.dash-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-bottom: 20px;
}
@media (max-width: 980px){
  .dash-grid{ grid-template-columns: 1fr; }
}

.dash-card{ position: relative; overflow:hidden; }

/* Equal heights for top row cards */
.dash-grid .panel{ height:100%; display:flex; flex-direction:column; }
.dash-grid .panel .panel-body{ flex:1; }
.dash-card::before{
  content:"";
  position:absolute;
  left:0; top:0;
  height:3px; width:100%;
  background: rgba(210,185,155,0.75);
}
.dash-card.dash-red::before{ background: rgba(220,70,60,0.75); }
.dash-card.dash-blue::before{ background: rgba(70,160,255,0.75); }
.dash-card.dash-gold::before{ background: rgba(210,185,155,0.85); }

.dash-card .panel-head{
  background: rgba(14,10,10,0.90);
}

.table.table-compact th, .table.table-compact td{
  padding: 6px 6px;
  font-size: 11.5px;
}

.dash-subtitle{
  font: 12px "oswaldregular", Arial, Helvetica, Sans-serif;
  text-transform: uppercase;
  color: rgba(242,232,220,0.92);
  margin: 0 0 6px;
}

.dash-skill-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
@media (max-width: 980px){
  .dash-skill-grid{ grid-template-columns: 1fr; }
}

.dash-skill-card{
  border: 1px solid rgba(145,101,74,0.22);
  background: rgba(0,0,0,0.18);
}
.dash-skill-head{
  padding: 8px 10px;
  background: rgba(14,10,10,0.85);
  border-bottom: 1px solid rgba(145,101,74,0.22);
  font: 13px "oswaldregular", Arial, Helvetica, Sans-serif;
  color: #fff;
  text-transform: uppercase;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
}
.dash-skill-head::after{
  content:"TOP 10";
  opacity: .92;
  font-size: 11px;
  letter-spacing: 1px;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid rgba(145,101,74,0.28);
  background: rgba(0,0,0,0.18);
}

/* TOP PLAYER hero (Dashboard) */
.top-player-hero{ text-align:center; position:relative; overflow:hidden; }
.top-player-hero::before{
  content:"";
  position:absolute;
  inset: -2px;
  background: radial-gradient(600px 160px at 50% 0%, rgba(210,185,155,0.18), transparent 60%);
  pointer-events:none;
}
.top-player-title{
  font: 14px "oswaldregular", Arial, Helvetica, Sans-serif;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: rgba(242,232,220,0.92);
}
.top-player-name{
  font: 40px "oswaldregular", Arial, Helvetica, Sans-serif;
  font-weight: 900;
  margin-top: 6px;
  margin-bottom: 10px;
}
.top-player-avatar{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  margin-right: 8px;
  border: 1px solid rgba(145,101,74,0.40);
  background: rgba(0,0,0,0.22);
  font-size: 16px;
  vertical-align: middle;
  box-shadow: 0 12px 28px rgba(0,0,0,0.30);
}
.top-player-name img{ vertical-align: middle; }

.top-player-rank{
  display:inline-block;
  margin-right: 8px;
  padding: 2px 10px;
  border-radius: 999px;
  border: 1px solid rgba(210,185,155,0.55);
  background: rgba(0,0,0,0.22);
  font-size: 14px;
  letter-spacing: 1px;
  vertical-align: middle;
}
.top-player-crown{ margin-right: 6px; vertical-align: middle; filter: drop-shadow(0 0 10px rgba(210,185,155,0.20)); }

/* TOP PLAYER name pulse */
@keyframes pulseGlow{
  0%{ filter: drop-shadow(0 0 0 rgba(210,185,155,0.0)); transform: scale(1); }
  50%{ filter: drop-shadow(0 0 10px rgba(210,185,155,0.55)); transform: scale(1.02); }
  100%{ filter: drop-shadow(0 0 0 rgba(210,185,155,0.0)); transform: scale(1); }
}
.top-player-name a{ display:inline-block; animation: pulseGlow 1.6s ease-in-out infinite; }

.top-player-meta{ display:flex; gap:8px; justify-content:center; flex-wrap:wrap; }
.top-player-meta .badge{ padding:6px 10px; font-weight:700; }
.top-player-meta .badge{ min-width: 110px; text-align:center; }
.badge{
  display:inline-block;
  padding:2px 8px;
  border:1px solid rgba(145,101,74,0.35);
  background: rgba(0,0,0,0.18);
  border-radius: 999px;
  font-size: 11px;
}

/* Server Stats mini-bar */
.stats-mini{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
.stats-mini .stat{
  background: rgba(0,0,0,0.18);
  border: 1px solid rgba(145,101,74,0.22);
  padding: 10px;
}
.stats-mini .label{
  font: 12px "oswaldregular", Arial, Helvetica, Sans-serif;
  color: rgba(242,232,220,0.92);
  text-transform: uppercase;
  display:flex;
  align-items:center;
  gap: 8px;
}
.stats-mini .ico{ filter: drop-shadow(0 0 10px rgba(0,0,0,0.35)); }

/* Tooltips */
[data-tooltip]{ position: relative; }
[data-tooltip]::after{
  content: attr(data-tooltip);
  position:absolute;
  left: 50%;
  bottom: calc(100% + 10px);
  transform: translateX(-50%);
  background: rgba(0,0,0,0.85);
  border: 1px solid rgba(145,101,74,0.35);
  color: rgba(242,232,220,0.92);
  padding: 8px 10px;
  border-radius: 10px;
  font-size: 11px;
  white-space: nowrap;
  opacity: 0;
  pointer-events:none;
  transition: opacity .12s ease, transform .12s ease;
  box-shadow: 0 18px 38px rgba(0,0,0,0.45);
  z-index: 20;
}
[data-tooltip]:hover::after{ opacity: 1; transform: translateX(-50%) translateY(-2px); }

/* Compact mode */
html.compact .table.table-compact th,
html.compact .table.table-compact td{ padding: 4px 6px; }
html.compact .dash-skill-head{ padding: 7px 10px; }

/* Skeleton loading (premium) */
html.loading .panel .panel-body{ position:relative; }
html.loading .panel .panel-body > *{ opacity: 0; }
html.loading .panel .panel-body::before{
  content:"";
  display:block;
  height: 130px;
  border-radius: 12px;
  background: linear-gradient(90deg, rgba(255,255,255,0.06), rgba(255,255,255,0.12), rgba(255,255,255,0.06));
  background-size: 250% 100%;
  animation: shimmer 1.1s ease infinite;
}
@keyframes shimmer{ 0%{ background-position: 0% 0; } 100%{ background-position: 100% 0; } }

/* Print / export */
@media print{
  #theme-banner, .navbar-wrap, .dash-toolbar, .control-btn{ display:none !important; }
  body{ background:#fff !important; }
  .panel{ box-shadow:none !important; }
  a{ color:#000 !important; text-shadow:none !important; }
  .panel, .dash-skill-card, .stats-mini .stat{ background:#fff !important; border:1px solid #ddd !important; }
  .panel-head{ background:#fff !important; }
  .panel-head h2, .dash-skill-head{ color:#000 !important; }
}
.stats-mini .value{ font-size: 22px; margin-top: 8px; color:#fff; font-weight: 900; }
.stats-foot{ display:flex; justify-content:space-between; gap: 10px; flex-wrap:wrap; margin-top: 10px; }

/* Dashboard skills accents */
.dash-skill-card{ position:relative; overflow:hidden; }
.dash-skill-card::before{
  content:"";
  position:absolute;
  left:0; top:0;
  height:3px; width:100%;
  background: rgba(210,185,155,0.55);
}
.dash-skill-card.skill-battle::before{ background: rgba(210,185,155,0.75); }
.dash-skill-card.skill-eng::before{ background: rgba(255,160,80,0.70); }
.dash-skill-card.skill-medic::before{ background: rgba(100,220,140,0.70); }
.dash-skill-card.skill-field::before{ background: rgba(70,160,255,0.75); }
.dash-skill-card.skill-heavy::before{ background: rgba(220,70,60,0.75); }
.dash-skill-card.skill-covert::before{ background: rgba(170,110,255,0.70); }

/* Subtle appear animation */
@keyframes panelIn{ from{ opacity:0; transform: translateY(6px);} to{ opacity:1; transform: translateY(0);} }
.panel{ animation: panelIn .35s ease both; }
.kpi-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:12px;
}
@media (max-width: 820px){
  .kpi-grid{ grid-template-columns: 1fr; }
}
.kpi{
  background: rgba(0,0,0,0.20);
  border: 1px solid rgba(145,101,74,0.22);
  padding: 12px;
}
.kpi .label{
  font: 12px "oswaldregular", Arial, Helvetica, Sans-serif;
  color: rgba(242,232,220,0.92);
  text-transform: uppercase;
}
.kpi .value{
  font-size: 22px;
  margin-top: 8px;
  color: #fff;
}

.progress{
  width:100%;
  height:10px;
  background: rgba(0,0,0,0.25);
  border: 1px solid rgba(145,101,74,0.22);
}
.progress > span{
  display:block;
  height:100%;
  background: rgba(210,185,155,0.55);
}

.skill-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
@media (max-width: 820px){
  .skill-grid{ grid-template-columns: 1fr; }
}

.circle{
  width: 92px;
  height: 92px;
  border-radius: 999px;
  border: 2px solid rgba(145,101,74,0.40);
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(0,0,0,0.20);
  margin-right: 12px;
  flex: 0 0 92px;
}
.circle .circle-val{ font-size: 18px; color:#fff; font-family: "oswaldregular", Arial, Helvetica, Sans-serif; }

.profile-top{
  display:flex;
  align-items:center;
  gap: 12px;
  flex-wrap: wrap;
}
.muted{ color: rgba(200,199,199,0.78); font-size: 12px; }

/* Modal / drawer (Compare) */
.modal-backdrop{
  position:fixed;
  inset:0;
  background: rgba(0,0,0,0.65);
  display:none;
  z-index: 120;
}
.modal{
  position:fixed;
  right: 14px;
  top: 70px;
  width: min(520px, calc(100vw - 28px));
  max-height: calc(100vh - 90px);
  overflow:auto;
  background: rgba(18,10,8,0.92);
  border: 1px solid rgba(145,101,74,0.35);
  box-shadow: var(--ds-shadow-3);
  border-radius: var(--ds-r16);
  display:none;
  z-index: 121;
}
.modal .modal-head{
  padding: 12px 14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom: 1px solid rgba(145,101,74,0.22);
}
.modal .modal-head h3{
  margin:0;
  font: 15px "oswaldregular", Arial, Helvetica, Sans-serif;
  text-transform: uppercase;
  color:#fff;
  letter-spacing: 1px;
}
.modal .modal-body{ padding: 12px 14px; }
.modal .row2{ display:grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 560px){ .modal .row2{ grid-template-columns: 1fr; } }
.compare-bars .bar{
  margin: 10px 0;
}
.compare-bars .bar .label{ display:flex; justify-content:space-between; font-size: 12px; }
.compare-bars .meter{ height: 10px; border-radius: 999px; overflow:hidden; background: rgba(0,0,0,0.25); border:1px solid rgba(145,101,74,0.18); }
.compare-bars .meter > span{ display:block; height:100%; width:0%; background: rgba(70,160,255,0.55); }
.compare-bars .meter.alt > span{ background: rgba(210,185,155,0.55); }

/* Empty / error state */
.empty{
  padding: 18px;
  border: 1px dashed rgba(145,101,74,0.35);
  background: rgba(0,0,0,0.18);
  border-radius: var(--ds-r16);
}
.empty .t{ font: 16px "oswaldregular", Arial, Helvetica, Sans-serif; text-transform: uppercase; color:#fff; }
.empty .d{ margin-top: 6px; color: rgba(242,232,220,0.85); font-size: 12px; }

.searchbar{
  display:flex;
  gap: 8px;
  flex-wrap:wrap;
  margin-bottom: 10px;
}
.searchbar input{
  flex: 1 1 240px;
  padding: 8px;
  background: #191919;
  color:#dbdbdb;
  border: 1px solid rgba(145,101,74,0.35);
}
.searchbar button, .btn{
  padding: 8px 12px;
  background: #221711;
  color:#fff;
  border: 1px solid rgba(145,101,74,0.35);
  cursor:pointer;
  font: 12px "oswaldregular", Arial, Helvetica, Sans-serif;
  text-transform: uppercase;
}
.searchbar button:hover, .btn:hover{ background: rgba(145,101,74,0.65); }

.pager{
  display:flex;
  justify-content:center;
  gap: 6px;
  margin-top: 12px;
  flex-wrap: wrap;
}
.pager a{
  display:inline-block;
  padding: 6px 10px;
  border: 1px solid rgba(145,101,74,0.35);
  background: rgba(0,0,0,0.18);
  color: rgba(242,232,220,0.92);
}
.pager a.active{
  background: #221711;
  color:#fff;
}




/* ---- Parazit.ro-like boxed banner + boxed navbar ---- */
body{
  background-image: url('../images/background.jpg') !important;
  background-repeat: no-repeat !important;
  background-position: center top !important;
  background-attachment: fixed !important;
  background-size: cover !important;
}

/* Banner boxed (like parazit.ro) */
#theme-banner.container{
  max-width: 1000px !important;
  margin: 0 auto !important;
  padding: 0 15px !important;
}
#theme-banner img{
  width: 100% !important;
  height: auto !important;
  display:block !important;
}

/* Navbar boxed to same width as banner */
.navbar-wrap{
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
.navbar-wrap .container{
  max-width: 1000px !important;
  margin: 0 auto !important;
  padding: 0 15px !important;
  background: rgba(18,10,8,0.88);
  border-top: 1px solid rgba(145,101,74,0.28);
  border-bottom: 2px solid rgba(145,101,74,0.55);
  box-shadow: 0 10px 25px rgba(0,0,0,0.55);
}

/* Content boxed similar */
#main-content.container{ max-width: 1000px !important; }

/* Flag icons */
.flag{ width:18px; height:12px; border-radius:2px; border:1px solid rgba(145,101,74,0.35); vertical-align:-2px; margin-right:6px; }
.flag-emoji{ margin-right:6px; font-size:14px; vertical-align:-1px; }

.flag, .flag-emoji{ cursor: help; }

/* Keep a boxed desktop look without making the navbar wider than the banner */
html, body { min-width: 1020px; }
.wrapper, .boxed { width: 1000px !important; }
.table-wrap { overflow: visible !important; }

/* Hide the vertical decorative lines by soft-masking the outer edges */
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:0;
  background:
    linear-gradient(to right, rgba(34,23,17,0.85) 0, rgba(34,23,17,0) 260px, rgba(34,23,17,0) calc(100% - 260px), rgba(34,23,17,0.85) 100%),
    radial-gradient(ellipse at center, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 55%, rgba(0,0,0,0.35) 78%, rgba(0,0,0,0.60) 100%);
}
body > *{ position:relative; z-index:1; }



/* Server stats mini-bar (Dashboard) */
.stats-mini{
  display:flex;
  gap: 12px;
  justify-content: space-between;
  flex-wrap: wrap;
}
.stats-mini .stat{
  flex: 1 1 120px;
  padding: 10px 10px;
  border: 1px solid rgba(145,101,74,0.22);
  background: rgba(0,0,0,0.18);
  text-align:center;
}
.stats-mini .label{
  font: 12px "oswaldregular", Arial, Helvetica, Sans-serif;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: rgba(242,232,220,0.92);
}
.stats-mini .value{
  margin-top: 6px;
  font-size: 18px;
  font-weight: 800;
  color: #fff;
}

/* Navbar tools (Season selector) */
.navbar-row{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.nav-tools{display:flex;align-items:center;gap:10px}
.season-form{margin:0}
.season-select{background:rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.15);color:#eee;border-radius:10px;padding:6px 10px;font-weight:600;font-size:12px;outline:none}
.season-select:focus{border-color:rgba(255,255,255,.35)}

/* Global search + watchlist */
.nav-search{position:relative;min-width:190px;}
.nav-search input{width:190px;max-width:36vw;padding:7px 10px;border-radius:10px;border:1px solid rgba(145,101,74,0.35);background:rgba(10,8,7,0.85);color:#fff;outline:none}
.nav-search input:focus{border-color:rgba(255,185,120,0.6);box-shadow:0 0 0 2px rgba(255,185,120,0.12)}
.search-dd{position:absolute;top:38px;right:0;left:0;background:rgba(12,10,9,0.98);border:1px solid rgba(145,101,74,0.35);border-radius:12px;box-shadow:0 14px 35px rgba(0,0,0,0.5);overflow:hidden;z-index:9999}
.search-dd a{display:flex;gap:10px;align-items:center;padding:10px 12px;color:#e8e8e8;text-decoration:none;border-bottom:1px solid rgba(255,255,255,0.06)}
.search-dd a:hover{background:rgba(255,185,120,0.08)}
.search-dd .dd-h{padding:8px 12px;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#bdb6b0;background:rgba(255,255,255,0.03)}
.search-dd .dd-empty{padding:10px 12px;color:#bdb6b0}

.watchlist{position:relative}
.watch-btn{height:34px;min-width:36px;border-radius:10px;border:1px solid rgba(145,101,74,0.35);background:rgba(10,8,7,0.85);color:#ffcf7a;cursor:pointer}
.watch-btn:hover{background:rgba(255,185,120,0.08)}
.watch-dd{position:absolute;top:38px;right:0;width:260px;background:rgba(12,10,9,0.98);border:1px solid rgba(145,101,74,0.35);border-radius:12px;box-shadow:0 14px 35px rgba(0,0,0,0.5);overflow:hidden;z-index:9999}
.watch-dd .dd-empty{padding:10px 12px;color:#bdb6b0}
.watch-dd a{display:flex;gap:10px;align-items:center;padding:10px 12px;color:#e8e8e8;text-decoration:none;border-bottom:1px solid rgba(255,255,255,0.06)}
.watch-dd a:hover{background:rgba(255,185,120,0.08)}
.watch-dd .dd-h{padding:8px 12px;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#bdb6b0;background:rgba(255,255,255,0.03)}

.health-ok{color:#76ff9a}

/* Badges + mini charts */
.badge-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.pbadge{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;border:1px solid rgba(145,101,74,0.35);background:rgba(0,0,0,0.25);color:#fff;font-size:12px}
.pbadge i{opacity:.85}
.mini-chart{margin-top:10px}

/* Highlight current player in tables */
.table tr.row-me{outline:1px solid rgba(255,215,0,.35);background:rgba(255,215,0,.06)}