/* Match Scoreboard Styles - Redesigned to match bot layout */

:root {
  /* Slimmer columns, columns essentially touching */
  --player-col-w: 96px;         /* slightly narrower player columns */
  --player-gap: 0rem;           /* no visible horizontal gap between player columns */
  --stat-height: 36px;          /* Taller stat boxes for readability */
}

.match-scoreboard {
  background: transparent; /* remove see-through outer box */
  color: var(--text);
  width: 100%;
  max-width: 100vw;
  margin: 0 auto;
  padding: 0; /* let inner header/body handle spacing */
  overflow-x: auto; /* Allow horizontal scroll if needed */
  /* Hide scrollbar / make it non-intrusive */
  scrollbar-width: none;
  scrollbar-color: transparent transparent;
}

.match-scoreboard::-webkit-scrollbar {
  height: 0;
  width: 0;
  background: transparent;
}

.match-scoreboard::-webkit-scrollbar-thumb {
  background: transparent;
}

/* ===== HEADER SECTION ===== */
.scoreboard-header {
  display: grid;
  grid-template-columns: 2fr 1.5fr 2fr; /* left team | center time | right team */
  align-items: stretch;
  background: linear-gradient(90deg,
    rgba(192, 155, 84, 0.95) 0%,   /* amber */
    rgba(20, 20, 20, 0.98) 50%,
    rgba(92, 122, 230, 0.95) 100%  /* sapphire */
  );
  border: none;
  margin-bottom: 1rem;
  min-height: 80px;
}

.header-left,
.header-right {
  padding: 0.75rem 1.5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.25rem;
}

.header-left {
  align-items: flex-start;
  text-align: left;
}

.header-right {
  align-items: flex-end;
  text-align: right;
}

/* Left and right backgrounds fade into center */
.amber-bg {
  background: linear-gradient(90deg, rgba(192,155,84,0.9) 0%, rgba(192,155,84,0.0) 100%);
  border-right: none !important;  /* remove amber divider line */
}

.sapphire-bg {
  background: linear-gradient(270deg, rgba(92,122,230,0.9) 0%, rgba(92,122,230,0.0) 100%);
  border-left: none !important;   /* remove sapphire divider line */
}

.team-name-title {
  font-family: 'TheRumIsGone', serif;
  font-size: 1.4rem;            /* larger team names */
  font-weight: bold;
  letter-spacing: 0.18em;
  color: var(--text);
  text-transform: uppercase;
}

.defeat-text,
.victory-text {
  font-family: 'TheRumIsGone', serif;
  font-weight: bold;
  text-transform: uppercase;
  font-size: 2rem;              /* bigger VICTORY / DEFEAT */
  line-height: 1.1;
}

.defeat-text {
  color: #ff4444;
}

.victory-text {
  color: #4ade80;
}

.header-stats {
  display: flex;
  gap: 2.25rem;
  align-items: center;
  justify-content: center;
  margin-top: 0.25rem;
}

.header-stats-right {
  flex-direction: row-reverse; /* mirror so KILLS sit closest to center */
}

.stat-col {
  text-align: center;
  min-width: 70px;
}

.stat-value {
  font-size: 1.8rem;
  font-weight: bold;
  color: var(--text);
}

.stat-label {
  font-size: 0.7rem;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-top: 0.25rem;
}

.header-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 1.5rem;
  background: transparent;
  border-left: none;
  border-right: none;
  min-width: 180px;
}

.game-time-label {
  font-size: 0.85rem;            /* larger GAME TIME label */
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.16em;
}

.game-time-value {
  font-size: 1.9rem;             /* bigger time */
  font-weight: bold;
  color: var(--purple);
  margin: 0.2rem 0;
  font-family: 'TheRumIsGone', serif;
}

.match-id-label {
  font-size: 0.9rem;             /* larger MATCH #### text */
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.16em;
}

/* ===== MAIN SCOREBOARD BODY ===== */
.scoreboard-body {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* Tabs above the match content */
.match-tabs-container {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
}

.match-tabs-header {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  border-bottom: 1px solid var(--border);
  margin-bottom: 1rem;
}

.match-tab {
  position: relative;
  padding: 0.75rem 2rem; /* bigger click target */
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-dim);
  cursor: pointer;
  font-weight: 600;
  border-radius: 8px;
  transition: color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}

.match-tab:not(:last-child) {
  margin-right: 0.25rem;
}

.match-tab::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: transparent;
}

.match-tab:hover {
  color: var(--text);
  background: var(--bg-hover);
  border-color: var(--purple);
  box-shadow: 0 0 18px rgba(157,78,221,0.6), inset 0 0 6px rgba(157,78,221,0.35);
}

.match-tab.active {
  color: var(--text);
  background: linear-gradient(145deg, rgba(157,78,221,0.18), rgba(157,78,221,0.08));
  border-color: var(--purple);
  box-shadow: 0 0 18px rgba(157,78,221,0.6), inset 0 0 6px rgba(157,78,221,0.35);
}

.match-tab.active::after {
  background: var(--purple);
}

.match-tab-panel {
  display: none;
}

.match-tab-panel.active {
  display: block;
}

.teams-container {
  display: flex;
  gap: 0.1rem;                  /* teams closer together */
  align-items: flex-start;
  justify-content: center;
  padding: 0.35rem 0.2rem;      /* slightly tighter padding */
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 0px;
}

.team-side {
  display: flex;
  gap: var(--player-gap);        /* small horizontal gaps between player columns */
}

.center-divider {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;  /* start so labels can align below */
  padding: 0 0.15rem;           /* pull teams slightly closer to center */
}

.center-logo {
  width: 88px;                  /* slightly larger logo */
  height: 88px;
  opacity: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.25rem;
  position: relative;
  z-index: 20;                   /* ensure logo is above surrounding layers */
}

.center-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: none;                  /* no dimming */
}

/* ===== PLAYER COLUMN (VERTICAL LAYOUT) ===== */
.player-column {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  width: var(--player-col-w);
  background: transparent;      /* remove outer box */
  border: none;                 /* remove border */
  border-radius: 0;
  padding: 0;                   /* remove padding */
  cursor: pointer;
  transition: opacity 0.2s, box-shadow 0.2s;
}

.player-column:hover {
  opacity: 0.85;
  box-shadow: 0 0 16px rgba(157, 78, 221, 0.85);
}

.player-column.active-player {
  /* No glow for selected player - only on hover */
}

/* Player Header Section */
.player-header-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  padding-bottom: 0.35rem;      /* reduced padding for tighter spacing */
  border-bottom: none;          /* remove divider */
  height: 200px;                /* reduced height to leave space for only 2 lines of name */
}

.rank-badge-new {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
}

.rank-icon-img {
  width: 72px;                  /* increased rank badge size */
  height: 72px;
  object-fit: contain;
  cursor: help;                 /* show help cursor for tooltip */
}

.pp-score {
  font-size: 0.8rem;
  font-weight: bold;
}

.hero-portrait-new {
  width: 100%;
  /* Size similar to rank icon */
  height: 72px;
  border-radius: 6px;
  overflow: visible;            /* allow full image to show */
  border: none;                 /* no hard box */
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
}

.hero-portrait-new img {
  width: auto;
  height: 72px;                 /* match rank icon height */
  max-width: 100%;              /* don't exceed column width */
  object-fit: contain;          /* preserve aspect ratio, no cropping */
  border-radius: 6px;
  cursor: help;
}

.player-name-new {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
  text-align: center;
  width: 100%;
  overflow: hidden;
  white-space: normal;            /* allow wrapping to multiple lines */
  overflow-wrap: anywhere;        /* break long words with no spaces */
  word-break: break-word;         /* fallback for older browsers */
  display: block;                 /* simple block container */
  line-height: 1.1;
  max-height: calc(1.1em * 2);    /* visually clamp to ~2 lines */
}

/* Player Stats Section */
.player-stats-section {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;                 /* tighter vertical gap */
}

.stat-row {
  display: flex;
  justify-content: center;      /* values centered (labels hidden elsewhere) */
  align-items: center;
  width: 100%;                  /* same width as souls-by-source bars */
  padding: 0.25rem 0.5rem;      /* match souls-by-source padding */
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border);
  border-radius: 4px;
  height: var(--stat-height);
}

.stat-row-label {
  font-size: 0.75rem;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.stat-row-value {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
}

/* Highlight best stats */
.stat-row.best-souls { 
  background: linear-gradient(90deg, rgba(141,235,197,0.25), rgba(141,235,197,0.05)) !important; 
  border-color: rgba(141,235,197,0.5) !important;
  box-shadow: 0 0 8px rgba(141,235,197,0.3);
}
.stat-row.best-souls .stat-row-value { color: rgb(141,235,197) !important; }

.stat-row.best-kills { 
  background: linear-gradient(90deg, rgba(224,82,82,0.25), rgba(224,82,82,0.05)) !important; 
  border-color: rgba(224,82,82,0.5) !important;
  box-shadow: 0 0 8px rgba(224,82,82,0.3);
}
.stat-row.best-kills .stat-row-value { color: rgb(224,82,82) !important; }

.stat-row.best-deaths { 
  background: linear-gradient(90deg, rgba(255,255,255,0.25), rgba(255,255,255,0.05)) !important; 
  border-color: rgba(255,255,255,0.5) !important;
  box-shadow: 0 0 8px rgba(255,255,255,0.3);
}
.stat-row.best-deaths .stat-row-value { color: #ffffff !important; }

.stat-row.best-assists { 
  background: linear-gradient(90deg, rgba(141,43,179,0.25), rgba(141,43,179,0.05)) !important; 
  border-color: rgba(141,43,179,0.5) !important;
  box-shadow: 0 0 8px rgba(141,43,179,0.3);
}
.stat-row.best-assists .stat-row-value { color: rgb(141,43,179) !important; }

.stat-row.best-damage { 
  background: linear-gradient(90deg, rgba(36,100,224,0.25), rgba(36,100,224,0.05)) !important; 
  border-color: rgba(36,100,224,0.5) !important;
  box-shadow: 0 0 8px rgba(36,100,224,0.3);
}
.stat-row.best-damage .stat-row-value { color: rgb(36,100,224) !important; }

.stat-row.best-damage-taken { 
  background: linear-gradient(90deg, rgba(0,147,163,0.25), rgba(0,147,163,0.05)) !important; 
  border-color: rgba(0,147,163,0.5) !important;
  box-shadow: 0 0 8px rgba(0,147,163,0.3);
}
.stat-row.best-damage-taken .stat-row-value { color: rgb(0,147,163) !important; }

.stat-row.best-objective { 
  background: linear-gradient(90deg, rgba(200,148,44,0.25), rgba(200,148,44,0.05)) !important; 
  border-color: rgba(200,148,44,0.5) !important;
  box-shadow: 0 0 8px rgba(200,148,44,0.3);
}
.stat-row.best-objective .stat-row-value { color: rgb(200,148,44) !important; }

.stat-row.best-healing { 
  background: linear-gradient(90deg, rgba(153,211,100,0.25), rgba(153,211,100,0.05)) !important; 
  border-color: rgba(153,211,100,0.5) !important;
  box-shadow: 0 0 8px rgba(153,211,100,0.3);
}
.stat-row.best-healing .stat-row-value { color: rgb(153,211,100) !important; }

.center-stats-labels {
  position: relative;
  z-index: 10;
  margin-top: 0;
  width: 120px;                 /* slightly slimmer label column to pull teams inward */
  height: 100%;
  display: block;               /* allow absolutely positioned labels to sit correctly */
}

.match-scoreboard .center-stat-label {
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%);
  white-space: nowrap;
  text-align: center;
}

/* Hide center-column labels for Souls by Source / Final Items on match page */
.center-stat-label.section {
  display: none;
}

/* Souls by Source Section */
.souls-section {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  margin-top: 0.5rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--border);
}

/* Player Stats tab layout */
.match-player-panel-placeholder {
  padding: 1.5rem 1rem;
  text-align: center;
  color: var(--text-dim);
  font-size: 0.9rem;
}

.match-player-panel {
  background: var(--bg-card);
  border: 1px solid var(--border);
  padding: 1.25rem 1.5rem;
  border-radius: 0px;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.match-player-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(0,0,0,0.6);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.75rem 0.9rem;
  gap: 0.5rem;
}

.player-nav-arrow {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 4px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--text-dim);
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.player-nav-arrow:hover {
  background: var(--bg-hover);
  border-color: var(--purple);
  color: var(--purple);
  box-shadow: 0 0 18px rgba(157,78,221,0.6), inset 0 0 6px rgba(157,78,221,0.35);
}

.player-nav-arrow:active {
  transform: scale(0.95);
}

.player-nav-arrow svg {
  width: 20px;
  height: 20px;
}

.mph-hero {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex: 1;
}

.mph-name-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.mph-rank-inline {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.mph-rank-inline-icon {
  width: 28px;
  height: 28px;
  object-fit: contain;
  cursor: help;                 /* show help cursor for tooltip */
}

.mph-rank-inline-pp {
  font-size: 0.95rem;
  font-weight: 700;
}

.mph-stats-meta {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  font-size: 0.85rem;
  color: var(--text-dim);
  text-align: right;
  align-items: flex-end;
  margin-right: 1rem;
}

.mph-portrait {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid var(--purple);
  box-shadow: 0 0 18px rgba(157,78,221,0.75);
  display: flex;
  align-items: center;
  justify-content: center;
}

.mph-portrait img {
  width: 110%;
  height: 110%;
  object-fit: cover;
  object-position: center;
  cursor: help;
}

.mph-portrait-no-circle {
  border-radius: 6px !important;
  border: none !important;
  box-shadow: none !important;
  width: auto !important;
  height: 72px !important;
  max-width: 100%;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.mph-portrait-no-circle img {
  width: auto !important;
  height: 72px !important;
  max-width: 100% !important;
  object-fit: contain !important;
  cursor: help !important;
  border-radius: 6px !important;
}

.mph-meta {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.mph-name {
  font-size: 1.3rem;
  font-weight: 700;
}

.mph-name-clickable {
  transition: color 0.2s ease, text-shadow 0.2s ease;
}

.mph-name-clickable:hover {
  color: var(--purple);
  text-shadow: 0 0 8px rgba(157, 78, 221, 0.6);
}

.mph-hero-name {
  font-size: 0.95rem;
  color: var(--text-dim);
}

.mph-team {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-dim);
}

.mph-kda {
  margin-top: 0.5rem;
  font-size: 1.2rem;
  font-weight: 700;
}

.mph-kda-label {
  font-size: 0.75rem;
  margin-left: 0.4rem;
  color: var(--text-dim);
}

.mph-kda-ratio {
  margin-top: 0.2rem;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.mph-kda-ratio span {
  margin-left: 0.4rem;
  color: var(--purple);
  font-weight: 700;
}

.match-player-body {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr) 260px;
  gap: 1.25rem;
}

.mph-column h3 {
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 0.75rem;
  color: var(--text-dim);
  text-align: center;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid rgba(255,255,255,0.12);
}

.mph-column.basic {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  background: rgba(0,0,0,0.6);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.75rem 0.9rem;
}

.mph-basic-kda {
  font-size: 1.6rem;
  font-weight: 700;
}

.mph-basic-kda-sub {
  font-size: 0.75rem;
  color: var(--text-dim);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.mph-basic-kda-ratio {
  margin-top: 0.35rem;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.mph-basic-kda-ratio span {
  margin-left: 0.4rem;
  color: var(--purple);
  font-weight: 700;
}

.mph-basic-divider {
  margin: 0.75rem 0;
  height: 1px;
  background: rgba(255,255,255,0.08);
}

.mph-stat-row {
  display: flex;
  justify-content: space-between;
  font-size: 0.85rem;
}

.mph-stat-row span:last-child {
  font-weight: 600;
}

.mph-column.items,
.mph-column.souls {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  background: rgba(0,0,0,0.6);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.75rem 0.9rem;
}

.mph-detailed-stats {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(255,255,255,0.12);
}

.mph-detailed-stats h3 {
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 0.75rem;
  color: var(--text-dim);
  text-align: center;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid rgba(255,255,255,0.12);
}

.mph-detailed-stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.5rem;
}

.mph-detailed-stat {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.5rem;
  background: linear-gradient(135deg, rgba(157, 78, 221, 0.1), rgba(157, 78, 221, 0.05));
  border: 1px solid rgba(157, 78, 221, 0.2);
  border-radius: 4px;
  transition: all 0.2s ease;
}

.mph-detailed-stat:hover {
  background: linear-gradient(135deg, rgba(157, 78, 221, 0.18), rgba(157, 78, 221, 0.08));
  border-color: rgba(157, 78, 221, 0.35);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(157, 78, 221, 0.2);
}

.mph-detailed-label {
  font-size: 0.7rem;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.mph-detailed-value {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--purple);
}

.match-player-items-grid {
  display: grid;
  grid-template-columns: repeat(6, 72px); /* 2 rows of 6 bigger items */
  grid-auto-rows: 72px;
  row-gap: 0.3rem;
  column-gap: 0.3rem;
  justify-content: flex-start;
}

.match-player-item-slot {
  width: 72px;
  height: 72px;
  border-radius: 4px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
}

.match-player-item-slot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.match-player-item-slot.empty {
  opacity: 0.25;
}

.mph-column.souls {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.match-player-souls-list {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.mph-empty {
  font-size: 0.8rem;
  color: var(--text-dim);
}

.souls-section-title {
  font-size: 0.7rem;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 0.25rem;
  text-align: center;
}

.soul-source-bar {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem 0.75rem;
  border-radius: 4px;
  font-size: 0.85rem;           /* larger text for better readability */
  border: 1px solid rgba(255, 255, 255, 0.15);
  margin-bottom: 0.35rem;
  width: 100%;                  /* fill the container */
  box-sizing: border-box;
  gap: 0.5rem;
  overflow: hidden;
  min-height: 36px;             /* ensure consistent height */
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.soul-source-bar:hover {
  transform: translateY(-1px);
}

/* Fill element that actually represents the amount of souls */
.soul-source-fill {
  position: absolute;
  inset: 0;
  width: var(--fill-pct, 100%);
  max-width: 100%;
  z-index: 0;
}

.soul-source-label,
.soul-source-value {
  position: relative;
  z-index: 1;
}

.soul-source-label {
  color: var(--text);
  text-shadow: 0 1px 3px rgba(0,0,0,0.9);
  font-weight: 600;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.soul-source-value {
  color: var(--text);
  font-weight: 700;
  text-shadow: 0 1px 3px rgba(0,0,0,0.9);
  flex-shrink: 0;
  font-size: 0.9rem;
}

/* Color-coded soul sources (applied to inner fill so width can scale) */
.soul-source-bar.enemy-kills .soul-source-fill { background: linear-gradient(90deg, rgba(224,82,82,0.7), rgba(224,82,82,0.3)); }
.soul-source-bar.troopers .soul-source-fill { background: linear-gradient(90deg, rgba(103,218,211,0.7), rgba(103,218,211,0.3)); }
.soul-source-bar.neutrals .soul-source-fill { background: linear-gradient(90deg, rgba(36,100,224,0.7), rgba(36,100,224,0.3)); }
.soul-source-bar.objective .soul-source-fill { background: linear-gradient(90deg, rgba(200,148,44,0.7), rgba(200,148,44,0.3)); }
.soul-source-bar.urn .soul-source-fill { background: linear-gradient(90deg, rgba(153,211,100,0.7), rgba(153,211,100,0.3)); }
.soul-source-bar.assists .soul-source-fill { background: linear-gradient(90deg, rgba(141,43,179,0.7), rgba(141,43,179,0.3)); }
.soul-source-bar.denies .soul-source-fill { background: linear-gradient(90deg, rgba(158,158,158,0.7), rgba(158,158,158,0.3)); }
.soul-source-bar.team-bonus .soul-source-fill { background: linear-gradient(90deg, rgba(92,122,230,0.7), rgba(92,122,230,0.3)); }
.soul-source-bar.other .soul-source-fill { background: linear-gradient(90deg, rgba(100,100,100,0.7), rgba(100,100,100,0.3)); }
.soul-source-bar.boxes .soul-source-fill { background: linear-gradient(90deg, rgba(79,53,33,0.85), rgba(79,53,33,0.35)); }

/* Hover glow effects - each bar glows with its own color */
.soul-source-bar.enemy-kills:hover {
  box-shadow: 0 0 20px rgba(224,82,82,0.6), 0 0 30px rgba(224,82,82,0.3), inset 0 0 15px rgba(224,82,82,0.2);
  border-color: rgba(224,82,82,0.7);
}
.soul-source-bar.troopers:hover {
  box-shadow: 0 0 20px rgba(103,218,211,0.6), 0 0 30px rgba(103,218,211,0.3), inset 0 0 15px rgba(103,218,211,0.2);
  border-color: rgba(103,218,211,0.7);
}
.soul-source-bar.neutrals:hover {
  box-shadow: 0 0 20px rgba(36,100,224,0.6), 0 0 30px rgba(36,100,224,0.3), inset 0 0 15px rgba(36,100,224,0.2);
  border-color: rgba(36,100,224,0.7);
}
.soul-source-bar.objective:hover {
  box-shadow: 0 0 20px rgba(200,148,44,0.6), 0 0 30px rgba(200,148,44,0.3), inset 0 0 15px rgba(200,148,44,0.2);
  border-color: rgba(200,148,44,0.7);
}
.soul-source-bar.urn:hover {
  box-shadow: 0 0 20px rgba(153,211,100,0.6), 0 0 30px rgba(153,211,100,0.3), inset 0 0 15px rgba(153,211,100,0.2);
  border-color: rgba(153,211,100,0.7);
}
.soul-source-bar.assists:hover {
  box-shadow: 0 0 20px rgba(141,43,179,0.6), 0 0 30px rgba(141,43,179,0.3), inset 0 0 15px rgba(141,43,179,0.2);
  border-color: rgba(141,43,179,0.7);
}
.soul-source-bar.denies:hover {
  box-shadow: 0 0 20px rgba(158,158,158,0.6), 0 0 30px rgba(158,158,158,0.3), inset 0 0 15px rgba(158,158,158,0.2);
  border-color: rgba(158,158,158,0.7);
}
.soul-source-bar.team-bonus:hover {
  box-shadow: 0 0 20px rgba(92,122,230,0.6), 0 0 30px rgba(92,122,230,0.3), inset 0 0 15px rgba(92,122,230,0.2);
  border-color: rgba(92,122,230,0.7);
}
.soul-source-bar.other:hover {
  box-shadow: 0 0 20px rgba(100,100,100,0.6), 0 0 30px rgba(100,100,100,0.3), inset 0 0 15px rgba(100,100,100,0.2);
  border-color: rgba(100,100,100,0.7);
}
.soul-source-bar.boxes:hover {
  box-shadow: 0 0 20px rgba(79,53,33,0.8), 0 0 30px rgba(79,53,33,0.4), inset 0 0 15px rgba(79,53,33,0.3);
  border-color: rgba(79,53,33,0.9);
}

/* Items Section */
.items-section {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 0.5rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--border);
}

.items-section-title {
  font-size: 0.7rem;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  text-align: center;
}

.items-grid-new {
  display: grid;
  /* 4 rows x 3 columns = 12 item slots */
  grid-template-columns: repeat(3, 36px);  /* small fixed item size */
  gap: 0;                        /* item boxes touch each other */
  justify-content: center;       /* center block within player column */
}

.item-slot-new {
  width: 36px;
  height: 36px;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid var(--border);
  border-radius: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
  padding: 0;
}

.item-slot-new img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.item-slot-new.empty {
  opacity: 0.3;
}

.item-slot-new.empty::after {
  content: '—';
  color: var(--text-dim);
  font-size: 1rem;
}

/* Compact Items Grid for Match Stats Tab */
.items-grid-compact {
  display: grid;
  grid-template-columns: repeat(4, 22px);  /* 4 columns x 3 rows = 12 items */
  gap: 2px;
  justify-content: center;
}

.item-slot-compact {
  width: 22px;
  height: 22px;
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid var(--border);
  border-radius: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition: transform 0.15s ease, border-color 0.15s ease;
}

.item-slot-compact:hover {
  transform: scale(1.2);
  border-color: var(--purple);
  z-index: 10;
}

.item-slot-compact img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.item-slot-compact.empty {
  opacity: 0.2;
  background: rgba(0, 0, 0, 0.3);
}

/* Additional Stats Section */
.additional-stats-section {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  margin-top: 0.5rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--border);
}

.additional-stats-title {
  font-size: 0.7rem;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  text-align: center;
  margin-bottom: 0.2rem;
}

.additional-stat-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 0.3rem 0.5rem;
  background: linear-gradient(90deg, rgba(157, 78, 221, 0.12), rgba(157, 78, 221, 0.04));
  border: 1px solid rgba(157, 78, 221, 0.25);
  border-radius: 3px;
  font-size: 0.75rem;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.additional-stat-box:hover {
  background: linear-gradient(90deg, rgba(157, 78, 221, 0.2), rgba(157, 78, 221, 0.08));
  border-color: rgba(157, 78, 221, 0.4);
}

.additional-stat-label {
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.7rem;
}

.additional-stat-value {
  font-weight: 700;
  color: var(--purple);
  font-size: 0.8rem;
}

/* Responsive Design */
@media (max-width: 1600px) {
  .teams-container {
    overflow-x: auto;
  }
}

@media (max-width: 1200px) {
  :root {
    --player-col-w: 130px;
  }
  
  .scoreboard-header {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  
  .header-center {
    order: -1;
  }
}

@media (max-width: 768px) {
  :root {
    --player-col-w: 120px;
  }
  
  .teams-container {
    flex-direction: column;
  }
  
  .team-side {
    overflow-x: auto;
    padding-bottom: 1rem;
  }
}