/* ==========================================================================
   GGARENA — Lobby Dashboard (v2 — refined)
   --------------------------------------------------------------------------
   Sekcijos: FONT / TOKENS / RESET / LAYOUT / HEADER / SIDE-NAV / CONTENT /
             HERO / MATCH-CARD / TOOLBAR / STACK-BUILDER / LOBBIES /
             TOURNAMENTS / RIGHT-PANEL / VERSUS / FOOTER / RESPONSIVE
   ========================================================================== */


/* ==========================================================================
   0. FONT — Inter (visi reikalingi svoriai)
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');


/* ==========================================================================
   1. TOKENS
   ========================================================================== */

:root {
  /* Background layers */
  --bg:          #07090b;
  --bg-2:        #0b0e11;
  --surface:     #10141a;
  --surface-2:   #131820;
  --surface-3:   #171c25;

  /* Cards & lines */
  --card-bg:        rgba(255, 255, 255, .025);
  --card-bg-hover:  rgba(255, 255, 255, .04);
  --line:           rgba(255, 255, 255, .06);
  --line-strong:    rgba(255, 255, 255, .12);

  /* Text */
  --text:        #ecf0f4;
  --text-soft:   #c8cfd7;
  --muted:       #828a94;
  --muted-2:     #5a626c;

  /* Accents */
  --orange:        #ff7a1a;
  --orange-2:      #ff8c2e;
  --orange-dark:   #d95c00;
  --orange-soft:   rgba(255, 122, 26, .14);
  --green:         #2ed27a;
  --red:           #ff4d6d;
  --yellow:        #ffc24a;

  /* Radii */
  --radius-sm:  6px;
  --radius:     10px;
  --radius-lg:  14px;

  /* Layout */
  --header-h:   60px;
  --footer-h:   42px;
  --sidebar-w:  72px;
  --right-w:    320px;

  /* Spacing scale */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 28px;

  /* Type scale */
  --text-xxs:   10px;
  --text-xs:    11px;
  --text-sm:    12px;
  --text-md:    13px;
  --text-base:  14px;
  --text-lg:    16px;
  --text-xl:    19px;
  --text-title: 22px;

  --font: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
          "Segoe UI", Roboto, Arial, sans-serif;

  /* Shadows */
  --shadow-card: 0 1px 0 rgba(255, 255, 255, .03) inset,
                 0 8px 24px rgba(0, 0, 0, .28);
}


/* ==========================================================================
   2. RESET
   ========================================================================== */

* { box-sizing: border-box }
html, body { height: 100%; margin: 0 }

body {
  color: var(--text);
  font-family: var(--font);
  font-size: var(--text-base);
  font-weight: 500;
  letter-spacing: -.005em;
  background:
    radial-gradient(900px 500px at 60% -10%, rgba(255, 122, 26, .06), transparent 60%),
    radial-gradient(700px 380px at 5% 95%,  rgba(255, 122, 26, .025), transparent 65%),
    linear-gradient(180deg, #0a0d11 0%, #07090b 100%);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

button, a, input { font: inherit; color: inherit }
a { text-decoration: none }
button {
  border: 0;
  background: none;
  cursor: pointer;
  padding: 0;
  font-family: inherit;
}
button:disabled { cursor: not-allowed }
img { display: block; max-width: 100% }

.svg-sprite { position: absolute; width: 0; height: 0; overflow: hidden }

/* Default inline SVG: stroke-based icons */
svg {
  width: 18px;
  height: 18px;
  display: block;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
  flex-shrink: 0;
}
svg * { vector-effect: non-scaling-stroke }

h1, h2, h3, p { margin: 0 }


/* ==========================================================================
   3. LAYOUT — dashboard grid + card primitives
   ========================================================================== */

.dashboard {
  height: 100vh;
  display: grid;
  grid-template-columns: var(--sidebar-w) minmax(0, 1fr) var(--right-w);
  grid-template-rows:
    var(--header-h)
    minmax(0, calc(100vh - var(--header-h) - var(--footer-h)))
    var(--footer-h);
}

.card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card-bg);
  box-shadow: var(--shadow-card);
}
.card-secondary {
  background: rgba(255, 255, 255, .018);
}


/* ==========================================================================
   4. HEADER
   ========================================================================== */

.topbar {
  grid-column: 1 / 4;
  grid-row: 1;
  height: var(--header-h);
  display: flex;
  align-items: center;
  gap: var(--s-5);
  padding: 0 var(--s-6);
  border-bottom: 1px solid var(--line);
  background: rgba(10, 12, 16, .85);
  backdrop-filter: blur(14px);
  z-index: 10;
}

.brand-block {
  display: flex;
  align-items: center;
  gap: 22px;
  min-width: 240px;
}

.brand {
  font-size: 20px;
  font-weight: 900;
  letter-spacing: -.04em;
  text-transform: uppercase;
  line-height: 1;
  color: #fff;
}
.brand span {
  color: var(--orange);
  text-shadow: 0 0 18px rgba(255, 122, 26, .4);
}

.game-select {
  height: 32px;
  padding: 0 10px 0 8px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, .03);
  border: 1px solid var(--line);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text);
}
.game-select:hover { background: rgba(255, 255, 255, .055) }
.game-select img {
  width: 22px;
  height: 22px;
  border-radius: 4px;
  object-fit: cover;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .08);
}
.game-select svg { width: 13px; height: 13px; color: var(--muted); margin-left: 2px }

.main-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
  flex: 1;
  height: 100%;
}
.main-nav a {
  font-size: var(--text-md);
  font-weight: 500;
  color: #98a0aa;
  height: 100%;
  display: flex;
  align-items: center;
  position: relative;
}
.main-nav a.active { color: #fff }
.main-nav a:hover { color: #fff }
.main-nav a.active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--orange);
  border-radius: 2px 2px 0 0;
}

.top-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 200px;
  justify-content: flex-end;
}

.icon-alert {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  position: relative;
  color: #d5dae0;
  border-radius: 8px;
  background: rgba(255, 255, 255, .03);
  border: 1px solid var(--line);
}
.icon-alert:hover { background: rgba(255, 255, 255, .055) }
.icon-alert svg { width: 17px; height: 17px }
.icon-alert span {
  position: absolute;
  right: 7px;
  top: 7px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--orange);
  box-shadow: 0 0 0 2px rgba(255, 122, 26, .16);
}

.user-menu {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 3px 8px 3px 3px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, .025);
}
.user-menu:hover { background: rgba(255, 255, 255, .045) }
.avatar-placeholder {
  display: inline-grid;
  place-items: center;
  border-radius: 50%;
  flex: 0 0 auto;
  color: #d9dee5;
  font-weight: 800;
  font-size: 12px;
  line-height: 1;
  background:
    radial-gradient(circle at 35% 25%, rgba(255, 255, 255, .13), transparent 38%),
    linear-gradient(145deg, #252b34 0%, #11161d 100%);
  border: 1px solid rgba(255, 255, 255, .13);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
}
.avatar-sm { width: 28px; height: 28px; font-size: 13px }
.avatar-md { width: 32px; height: 32px; font-size: 14px }
.avatar-lg { width: 56px; height: 56px; font-size: 24px }
.avatar-xs { width: 20px; height: 20px; font-size: 10px }
.user-menu > .avatar-placeholder {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .08),
    0 0 0 2px rgba(255, 122, 26, .08);
}
.user-meta {
  display: flex;
  flex-direction: column;
  gap: 1px;
  line-height: 1;
}
.user-meta strong {
  font-size: var(--text-sm);
  font-weight: 700;
}
.user-meta small {
  font-size: 10px;
  font-weight: 700;
  color: var(--orange);
  display: flex;
  align-items: center;
  gap: 3px;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.user-meta small svg { width: 10px; height: 10px }
.user-arrow { width: 12px; height: 12px; color: var(--muted) }


/* ==========================================================================
   5. SIDE NAV
   ========================================================================== */

.side-nav {
  grid-column: 1;
  grid-row: 2;
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 14px 0;
  background: rgba(10, 12, 16, .35);
  overflow: visible;
  z-index: 6;
}

.nav-icons {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.side-btn {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  color: #a5adb8;
  background: rgba(255, 255, 255, .015);
  border: 1px solid transparent;
  position: relative;
  transition: background-color .14s, color .14s, border-color .14s;
}
.side-btn svg { width: 20px; height: 20px; stroke-width: 2.15 }
.side-btn.active {
  color: #fff;
  background: linear-gradient(180deg, rgba(255, 122, 26, .92), rgba(239, 96, 0, .92));
  border-color: rgba(255, 154, 64, .44);
  box-shadow: 0 8px 18px rgba(255, 122, 26, .18);
}
.side-btn.active::before {
  content: "";
  position: absolute;
  left: -16px;
  width: 3px;
  height: 22px;
  border-radius: 0 99px 99px 0;
  background: var(--orange);
  box-shadow: 0 0 12px rgba(255, 122, 26, .65);
}
.side-btn::after {
  content: attr(data-label);
  position: absolute;
  left: calc(100% + 10px);
  top: 50%;
  transform: translateY(-50%);
  opacity: 0;
  pointer-events: none;
  white-space: nowrap;
  padding: 7px 9px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(12, 15, 20, .96);
  color: var(--text-soft);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .02em;
  box-shadow: var(--shadow-card);
  transition: opacity .12s, transform .12s;
}
.side-btn:not(.active):hover {
  background: rgba(255, 255, 255, .045);
  border-color: rgba(255, 255, 255, .08);
  color: #fff;
}
.side-btn:hover::after {
  opacity: 1;
  transform: translate(2px, -50%);
}

.side-bottom {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.side-separator {
  width: 32px;
  height: 1px;
  background: var(--line);
  margin: 8px 0;
}


/* ==========================================================================
   6. MAIN CONTENT — scrollable region
   ========================================================================== */

.content {
  grid-column: 2;
  grid-row: 2;
  overflow-y: auto;
  overflow-x: hidden;
  min-width: 0;
  padding: var(--s-4) var(--s-5);
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 122, 26, .35) transparent;
}
.content::-webkit-scrollbar,
.right-panel::-webkit-scrollbar { width: 6px }
.content::-webkit-scrollbar-thumb,
.right-panel::-webkit-scrollbar-thumb { background: rgba(255, 122, 26, .3); border-radius: 99px }
.content::-webkit-scrollbar-track,
.right-panel::-webkit-scrollbar-track { background: transparent }


/* ==========================================================================
   7. HERO GRID — ELO + match-search
   ========================================================================== */

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: var(--s-4);
}

.elo-card {
  padding: var(--s-4);
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr) 168px;
  gap: var(--s-3);
}

/* ---------- Division tile (left) ---------- */
.division-card {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  padding: var(--s-4);
  background:
    radial-gradient(160px 120px at 90% 0%, rgba(255, 122, 26, .14), transparent 70%),
    linear-gradient(155deg, #1d2128 0%, #131820 60%, #0f131a 100%);
  border: 1px solid rgba(255, 122, 26, .14);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 200px;
}
.division-card::before {
  content: "";
  position: absolute;
  inset: auto -20px -50px 30%;
  height: 120px;
  background: linear-gradient(135deg, rgba(255, 122, 26, .08), transparent 60%);
  transform: rotate(-22deg);
  border-top: 1px solid rgba(255, 122, 26, .12);
  pointer-events: none;
}
.division-top {
  display: flex;
  align-items: center;
  gap: 12px;
  position: relative;
  z-index: 1;
}
.division-card img {
  width: 48px;
  height: 48px;
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .5));
}
.division-title {
  display: flex;
  flex-direction: column;
  gap: 2px;
  line-height: 1.1;
}
.division-title b {
  font-size: var(--text-md);
  font-weight: 800;
  letter-spacing: .02em;
}
.division-title span {
  font-size: var(--text-xxs);
  color: var(--muted);
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.division-bottom {
  position: relative;
  z-index: 1;
}
.division-card strong {
  display: block;
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1;
  margin-bottom: 4px;
}
.division-card small {
  font-size: var(--text-xxs);
  color: var(--muted);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.elo-counter {
  font-variant-numeric: tabular-nums;
}
.honours-row {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 15px;
}
.honour-item {
  width: 32px;
  height: 30px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, .028);
  display: grid;
  place-items: center;
  position: relative;
  color: var(--text-soft);
  transition: transform .15s ease, border-color .15s ease, background .15s ease;
}
.honour-item svg { width: 15px; height: 15px }
.honour-item span {
  position: absolute;
  right: -5px;
  top: -5px;
  min-width: 15px;
  height: 15px;
  display: grid;
  place-items: center;
  border-radius: 99px;
  background: #151a22;
  border: 1px solid var(--line-strong);
  color: #fff;
  font-size: 8px;
  font-weight: 900;
}
.honour-item.gold   { color: #ffc24a; border-color: rgba(255, 194, 74, .22) }
.honour-item.silver { color: #cfd7e2; border-color: rgba(207, 215, 226, .18) }
.honour-item.bronze { color: #cf8751; border-color: rgba(207, 135, 81, .2) }
.honour-item:hover {
  transform: translateY(-2px);
  background: rgba(255, 122, 26, .055);
  border-color: rgba(255, 122, 26, .34);
}
.honour-item::after {
  content: attr(data-tooltip);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 10px);
  width: max-content;
  max-width: 240px;
  padding: 8px 10px;
  border-radius: 8px;
  background: rgba(12, 15, 20, .97);
  border: 1px solid rgba(255, 122, 26, .23);
  color: var(--text);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .4);
  font-size: 10px;
  line-height: 1.35;
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0;
  white-space: normal;
  opacity: 0;
  transform: translate(-50%, 6px);
  pointer-events: none;
  transition: opacity .14s ease, transform .14s ease;
  z-index: 20;
}
.honour-item:hover::after {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* ---------- ELO main column ---------- */
.elo-main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}

.section-title-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--s-3);
}
.eyebrow {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--orange);
  display: block;
  margin-bottom: 4px;
}
.section-title-row h1 {
  font-size: var(--text-xl);
  line-height: 1.2;
  font-weight: 800;
  letter-spacing: -.02em;
}
.section-title-row p {
  font-size: var(--text-xs);
  color: var(--muted);
  margin-top: 4px;
}

.text-link,
.section-heading a,
.panel-title-row a {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--muted);
  text-transform: uppercase;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.text-link:hover,
.section-heading a:hover,
.panel-title-row a:hover { color: #fff }
.text-link svg,
.section-heading a svg {
  width: 12px;
  height: 12px;
}

/* ---------- ELO chart ---------- */
.elo-chart-wrap {
  position: relative;
  flex: 1;
  min-height: 130px;
  border-radius: 8px;
  background: rgba(255, 255, 255, .02);
  border: 1px solid var(--line);
  overflow: hidden;
}
.chart-labels {
  position: absolute;
  left: 8px;
  top: 12px;
  bottom: 24px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  color: var(--muted-2);
  font-size: 9px;
  font-weight: 600;
  z-index: 2;
}
.chart-grid {
  position: absolute;
  left: 40px;
  right: 8px;
  top: 12px;
  bottom: 24px;
  background:
    repeating-linear-gradient(to bottom, rgba(255, 122, 26, .075) 0 1px, transparent 1px 28px),
    repeating-linear-gradient(to right,  rgba(130, 138, 148, .075) 0 1px, transparent 1px 60px);
  opacity: 0;
  transform: translateY(5px);
  transition: opacity .55s ease, transform .55s ease;
  pointer-events: none;
}
body.is-loaded .chart-grid {
  opacity: .72;
  transform: translateY(0);
}
.elo-graph {
  position: absolute;
  left: 40px;
  right: 8px;
  top: 8px;
  bottom: 20px;
  width: calc(100% - 48px);
  height: calc(100% - 28px);
}
.elo-graph .elo-area {
  stroke: none;
  opacity: 0;
  transform: scaleY(.68);
  transform-origin: center bottom;
  transition: opacity .45s ease .12s, transform .75s cubic-bezier(.2, .8, .2, 1) .12s;
}
.elo-graph .elo-line {
  fill: none;
  stroke: var(--orange);
  stroke-width: 2.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 10px rgba(255, 122, 26, .22));
  stroke-dasharray: var(--elo-line-length, 1200);
  stroke-dashoffset: var(--elo-line-length, 1200);
  transition: stroke-dashoffset 1.05s cubic-bezier(.2, .8, .2, 1);
}
.elo-graph .marker-line {
  stroke: rgba(255, 122, 26, .18);
  stroke-width: 1;
  stroke-dasharray: 3 5;
}
.elo-points .elo-dot {
  stroke-width: 2;
  stroke: #12171e;
  fill: var(--orange);
  opacity: 0;
  transform: scale(.2);
  transform-box: fill-box;
  transform-origin: center;
  transition: opacity .25s ease, transform .25s ease, r .15s ease, fill .15s ease;
}
.elo-points .elo-dot.win  { fill: var(--green) }
.elo-points .elo-dot.loss { fill: var(--red) }
.elo-points .elo-dot.active {
  opacity: 1 !important;
  transform: scale(1.45) !important;
  stroke: #fff;
}
body.is-loaded .elo-graph .elo-area {
  opacity: 1;
  transform: scaleY(1);
}
body.is-loaded .elo-graph .elo-line {
  stroke-dashoffset: 0;
}
body.is-loaded .elo-points .elo-dot {
  opacity: .95;
  transform: scale(1);
}
.chart-tooltip {
  position: absolute;
  z-index: 8;
  min-width: 172px;
  max-width: 230px;
  padding: 9px 10px;
  border-radius: 9px;
  background: rgba(12, 15, 20, .96);
  border: 1px solid rgba(255, 122, 26, .24);
  box-shadow: 0 12px 32px rgba(0, 0, 0, .42), 0 0 0 1px rgba(255, 255, 255, .03) inset;
  color: var(--text);
  pointer-events: none;
  opacity: 0;
  transform: translateY(6px) scale(.98);
  transition: opacity .14s ease, transform .14s ease;
}
.chart-tooltip.visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.chart-tooltip b,
.chart-tooltip span,
.chart-tooltip small { display: block }
.chart-tooltip b {
  font-size: var(--text-xs);
  font-weight: 800;
  letter-spacing: -.01em;
  margin-bottom: 3px;
}
.chart-tooltip span,
.chart-tooltip small {
  font-size: 10px;
  color: var(--muted);
  line-height: 1.35;
}
.chart-tooltip div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 7px 0 4px;
}
.chart-tooltip strong {
  font-size: var(--text-sm);
  font-weight: 800;
}
.chart-tooltip em {
  font-style: normal;
  font-size: var(--text-xs);
  font-weight: 900;
}
.chart-tooltip em.up { color: var(--green) }
.chart-tooltip em.down { color: var(--red) }
.chart-note {
  position: absolute;
  top: 12px;
  color: var(--muted-2);
  font-size: 9px;
  font-weight: 600;
}
.chart-note.one { left: 28% }
.chart-note.two { right: 8% }

.recent-form {
  position: absolute;
  left: 40px;
  right: 8px;
  bottom: 8px;
  height: 6px;
  display: flex;
  gap: 4px;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity .45s ease .55s, transform .45s ease .55s;
}
body.is-loaded .recent-form {
  opacity: 1;
  transform: translateY(0);
}
.recent-form i {
  height: 3px;
  flex: 1;
  max-width: 18px;
  border-radius: 99px;
  background: #3a4049;
  cursor: help;
  opacity: .9;
  transition: transform .15s ease, opacity .15s ease, box-shadow .15s ease;
}
.recent-form i.win  { background: var(--green); color: var(--green) }
.recent-form i.loss { background: var(--red); color: var(--red) }
.recent-form i:hover,
.recent-form i.active {
  transform: translateY(-2px) scaleX(1.18);
  opacity: 1;
  box-shadow: 0 0 12px currentColor;
}

/* ---------- ELO summary (right) ---------- */
.elo-summary {
  border-radius: var(--radius);
  background: rgba(255, 255, 255, .015);
  border: 1px solid var(--line);
  padding: var(--s-3);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--s-3);
  min-height: 200px;
}
.summary-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.summary-top span {
  font-size: var(--text-xxs);
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .1em;
}
.summary-top b {
  font-size: var(--text-lg);
  font-weight: 800;
  color: var(--green);
}

.rank-scale {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px;
}
.rank-scale span {
  font-size: 9px;
  color: var(--muted-2);
  font-weight: 700;
}
.rank-scale i {
  height: 4px;
  border-radius: 99px;
  background: rgba(255, 255, 255, .06);
  overflow: hidden;
}
.rank-scale em {
  display: block;
  height: 100%;
  width: 46%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--orange), var(--yellow));
}

.elo-summary dl {
  display: grid;
  gap: 7px;
  margin: 0;
}
.elo-summary dl div {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: var(--text-xs);
}
.elo-summary dt {
  color: var(--muted);
  font-weight: 600;
}
.elo-summary dd {
  margin: 0;
  font-weight: 700;
  color: var(--text);
}
.green { color: var(--green) }
.red   { color: var(--red) }


/* ==========================================================================
   8. MATCH SEARCH CARD
   ========================================================================== */

.match-card {
  padding: var(--s-4);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--s-3);
  min-height: 232px;
}
.match-card h2 {
  font-size: var(--text-title);
  line-height: 1.1;
  font-weight: 800;
  letter-spacing: -.025em;
  margin-top: 6px;
}
.match-card p {
  font-size: var(--text-xs);
  line-height: 1.5;
  color: var(--muted);
}

.match-actions {
  display: grid;
  gap: 6px;
}

.button {
  height: 36px;
  padding: 0 14px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: var(--text-sm);
  font-weight: 700;
  border: 1px solid transparent;
  transition: background-color .15s, border-color .15s;
  white-space: nowrap;
}
.button svg { width: 14px; height: 14px; stroke-width: 2.2 }
.button-primary {
  color: #fff;
  background: linear-gradient(180deg, var(--orange-2), var(--orange-dark));
  border-color: rgba(255, 122, 26, .55);
  box-shadow: 0 4px 12px rgba(255, 122, 26, .18);
}
.button-primary:hover {
  background: linear-gradient(180deg, #ff9a3a, #e8650a);
}
.button-neutral {
  background: rgba(255, 255, 255, .04);
  color: var(--text);
  border-color: var(--line);
}
.button-neutral:hover {
  background: rgba(255, 255, 255, .07);
  border-color: var(--line-strong);
}

.match-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.match-meta span {
  height: 22px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .025);
  border: 1px solid var(--line);
  font-size: 10px;
  font-weight: 700;
  color: var(--text-soft);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  display: inline-block;
}
.green-dot  { background: var(--green);  box-shadow: 0 0 8px rgba(46, 210, 122, .6) }
.orange-dot { background: var(--orange); box-shadow: 0 0 8px rgba(255, 122, 26, .55) }


/* ==========================================================================
   9. TOOLBAR
   ========================================================================== */

.toolbar {
  margin-top: var(--s-4);
  padding: 6px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  background: rgba(255, 255, 255, .02);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.tabs {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-wrap: wrap;
}
.tab-btn {
  height: 32px;
  padding: 0 10px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: var(--text-sm);
  font-weight: 600;
}
.tab-btn svg { width: 14px; height: 14px }
.tab-btn span {
  height: 16px;
  min-width: 16px;
  padding: 0 4px;
  border-radius: 99px;
  background: var(--orange-soft);
  color: var(--orange);
  display: grid;
  place-items: center;
  font-size: 10px;
  font-weight: 800;
}
.tab-btn.active {
  color: #fff;
  background: rgba(255, 122, 26, .08);
  box-shadow: inset 0 0 0 1px rgba(255, 122, 26, .25);
}
.tab-btn:not(.active):hover {
  background: rgba(255, 255, 255, .035);
  color: var(--text);
}
.create-btn { height: 32px; padding: 0 14px }


/* ==========================================================================
  10. SECTION BLOCK
   ========================================================================== */

.section-block { margin-top: var(--s-5) }

.section-heading {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin-bottom: var(--s-3);
}
.section-heading h2 {
  font-size: var(--text-xs);
  font-weight: 800;
  letter-spacing: .14em;
  color: var(--text-soft);
  text-transform: uppercase;
}
.section-heading::before {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
  order: 2;
}
.section-heading h2     { order: 1 }
.section-heading small,
.section-heading a      { order: 3 }
.section-heading small {
  color: var(--muted);
  font-size: var(--text-xs);
  font-weight: 600;
}


/* ==========================================================================
  11. STACK BUILDER
   ========================================================================== */

.builder-card {
  padding: var(--s-4);
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: var(--s-4);
}
.builder-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--s-3);
}

.status-pill {
  height: 22px;
  width: max-content;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, .025);
  border-radius: 999px;
  padding: 0 8px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-soft);
}
.status-pill.open     { color: var(--green) }
.status-pill.live     { color: var(--orange) }
.status-pill.soon     { color: var(--yellow) }
.status-pill.finished { color: var(--muted) }

.builder-info h3 {
  font-size: var(--text-lg);
  line-height: 1.2;
  font-weight: 800;
  letter-spacing: -.015em;
}
.builder-info p {
  font-size: var(--text-xs);
  line-height: 1.5;
  color: var(--muted);
}

.builder-metrics {
  display: flex;
  gap: 6px;
  margin-top: 4px;
  flex-wrap: wrap;
}
.builder-metrics span {
  min-width: 56px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, .018);
  border-radius: 6px;
  padding: 6px 8px;
  color: var(--muted);
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.builder-metrics b {
  display: block;
  color: #fff;
  font-size: var(--text-sm);
  margin-bottom: 1px;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 700;
}

/* ---------- 5 slot cards (compact) ---------- */
.lobby-slots {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}
.slot-card {
  min-height: 148px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, .015);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 12px;
  transition: background-color .15s, border-color .15s;
}
.slot-card.empty {
  border-style: dashed;
  border-color: rgba(255, 255, 255, .085);
}
.slot-card.empty svg,
.slot-card.locked svg {
  width: 24px;
  height: 24px;
  color: var(--muted-2);
  margin-bottom: 10px;
}
.slot-card strong {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--text);
}
.slot-card span {
  display: block;
  margin-top: 4px;
  font-size: var(--text-xxs);
  font-weight: 600;
  color: var(--muted);
  letter-spacing: .04em;
  text-transform: uppercase;
}
.slot-card.empty:hover {
  background: rgba(255, 255, 255, .03);
  border-color: rgba(255, 255, 255, .14);
}
.slot-card.captain {
  background:
    radial-gradient(60% 60% at 50% 0%, rgba(255, 122, 26, .14), transparent 70%),
    linear-gradient(180deg, rgba(255, 122, 26, .04), rgba(255, 122, 26, .015));
  border-color: rgba(255, 122, 26, .35);
  border-style: solid;
}
.slot-card.captain .avatar-placeholder {
  width: 56px;
  height: 56px;
  margin-bottom: 10px;
  border: 2px solid rgba(255, 122, 26, .48);
  box-shadow: 0 4px 16px rgba(255, 122, 26, .20);
}
.slot-card.captain strong { color: #fff; font-size: var(--text-base) }
.slot-card.locked {
  opacity: .55;
}


/* ==========================================================================
  12. LOBBIES
   ========================================================================== */

.lobbies-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-3);
}
.lobby-card {
  padding: var(--s-3);
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  gap: var(--s-3);
  align-items: center;
}
.lobby-card > img {
  width: 42px;
  height: 42px;
  border-radius: 8px;
  background: rgba(255, 255, 255, .025);
  border: 1px solid var(--line);
  padding: 3px;
}
.lobby-copy { min-width: 0 }
.lobby-copy h3 {
  font-size: var(--text-sm);
  font-weight: 700;
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: flex;
  align-items: center;
  gap: 6px;
}
.lobby-copy h3 span {
  font-size: 9px;
  font-weight: 700;
  color: var(--muted);
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 2px 5px;
  background: rgba(255, 255, 255, .045);
  border-radius: 3px;
}
.lobby-copy p {
  font-size: var(--text-xs);
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.avatar-stack {
  display: flex;
  align-items: center;
  margin-top: 6px;
}
.avatar-stack .avatar-placeholder,
.avatar-stack .avatar-count {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid var(--bg);
  margin-left: -6px;
  background: #242a31;
}
.avatar-stack .avatar-placeholder:first-child { margin-left: 0 }
.avatar-stack .avatar-count {
  display: grid;
  place-items: center;
  color: var(--text-soft);
  font-size: 9px;
  font-weight: 800;
}

.lobby-card button,
.tournament-card button,
.versus-panel button {
  height: 28px;
  border-radius: 6px;
  padding: 0 12px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, .035);
  color: var(--text);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: .02em;
}
.lobby-card button:hover,
.tournament-card button:hover,
.versus-panel button:hover {
  background: rgba(255, 255, 255, .065);
  border-color: var(--line-strong);
}
.lobby-card button:disabled,
.tournament-card button:disabled {
  opacity: .4;
}
.disabled-card { opacity: .65 }


/* ==========================================================================
  13. TOURNAMENTS
   ========================================================================== */

.tournament-list {
  display: grid;
  gap: 6px;
}
.tournament-card {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) 112px 80px;
  align-items: center;
  gap: var(--s-3);
  padding: 10px var(--s-3);
}
.cup-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  background: var(--orange-soft);
  border: 1px solid rgba(255, 122, 26, .2);
  color: var(--orange);
}
.cup-icon svg { width: 16px; height: 16px }

.tournament-card h3 {
  font-size: var(--text-sm);
  font-weight: 700;
  margin: 3px 0 2px;
}
.tournament-card p {
  font-size: var(--text-xs);
  color: var(--muted);
}
.tournament-pricing {
  display: grid;
  gap: 2px;
  justify-items: end;
  text-align: right;
}
.tournament-pricing strong {
  font-size: var(--text-sm);
  font-weight: 800;
  color: #fff;
}
.tournament-pricing span {
  font-size: 9px;
  font-weight: 800;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .06em;
}
.tournament-pricing.points span,
.tournament-pricing.mixed span {
  color: var(--yellow);
}
.active-tournament { border-color: rgba(255, 122, 26, .22) }
.live-tournament   { border-color: rgba(255, 194, 74, .18) }


/* ==========================================================================
  14. RIGHT PANEL — Activity / Online tabs
   ========================================================================== */

.right-panel {
  grid-column: 3;
  grid-row: 2;
  min-width: 0;
  overflow-y: auto;
  overflow-x: hidden;
  border-left: 1px solid var(--line);
  padding: var(--s-4);
  background: rgba(10, 12, 16, .25);
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 122, 26, .3) transparent;
}

.right-panel-head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  padding: 3px;
  background: rgba(255, 255, 255, .025);
  border: 1px solid var(--line);
  border-radius: 8px;
  margin-bottom: var(--s-4);
  position: sticky;
  top: 0;
  z-index: 3;
  backdrop-filter: blur(10px);
}
.right-tab {
  height: 28px;
  border-radius: 5px;
  color: var(--muted);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.right-tab.active {
  color: #fff;
  background: rgba(255, 122, 26, .14);
  box-shadow: inset 0 0 0 1px rgba(255, 122, 26, .22);
}
.right-tab-panel {
  display: none;
  opacity: 0;
  transform: translateY(8px);
}
.right-tab-panel.active {
  display: block;
  animation: panelFadeIn .26s cubic-bezier(.2, .8, .2, 1) both;
}
@keyframes panelFadeIn {
  from { opacity: 0; transform: translateY(10px) }
  to   { opacity: 1; transform: translateY(0) }
}

.panel-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--s-2);
}

.activity-list {
  display: grid;
  gap: 6px;
}
.activity-item {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) 30px;
  align-items: center;
  gap: 10px;
  padding: 8px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, .015);
  position: relative;
}
.activity-item .avatar-placeholder,
.activity-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, .03);
}
.activity-icon {
  display: grid;
  place-items: center;
  color: var(--orange);
}
.activity-icon svg { width: 15px; height: 15px }

.online-dot {
  position: absolute;
  left: 32px;
  top: 32px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 2px var(--bg-2);
}

.activity-item div { min-width: 0 }
.activity-item p {
  font-size: 9px;
  color: var(--muted);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.activity-item b {
  display: block;
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--text);
  margin-top: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.activity-item small {
  display: block;
  font-size: 10px;
  color: var(--muted-2);
  margin-top: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.activity-item time {
  font-size: 10px;
  color: var(--muted-2);
  font-weight: 700;
  text-align: right;
}
.activity-item.green .activity-icon { color: var(--green) }


/* ==========================================================================
  15. ONLINE PANEL
   ========================================================================== */

.online-summary {
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(255, 122, 26, .06), transparent);
  border: 1px solid rgba(255, 122, 26, .14);
  padding: 12px 14px;
  margin-bottom: var(--s-3);
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 12px;
  align-items: center;
}
.online-summary strong {
  grid-row: 1 / 3;
  font-size: 28px;
  line-height: 1;
  font-weight: 800;
}
.online-summary span {
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--text);
}
.online-summary em {
  font-style: normal;
  color: var(--muted);
  font-size: 10px;
  font-weight: 600;
}

.online-filter {
  height: 32px;
  display: flex;
  align-items: center;
  gap: 6px;
  border-radius: 7px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, .02);
  padding: 0 10px;
  color: var(--muted);
  margin-bottom: var(--s-2);
}
.online-filter svg { width: 14px; height: 14px }
.online-filter input {
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--muted);
  width: 100%;
  font-size: var(--text-xs);
}

.roster-tabs {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  margin-bottom: var(--s-3);
}
.roster-filter {
  height: 24px;
  padding: 0 9px;
  border-radius: 99px;
  background: rgba(255, 255, 255, .025);
  border: 1px solid var(--line);
  color: var(--muted);
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.roster-filter.active {
  color: #fff;
  background: rgba(255, 122, 26, .12);
  border-color: rgba(255, 122, 26, .25);
}

.roster-section { margin-top: var(--s-2) }
.roster-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--muted);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.roster-title b {
  min-width: 18px;
  height: 16px;
  padding: 0 5px;
  border-radius: 99px;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, .05);
  color: var(--text-soft);
  letter-spacing: 0;
  font-size: 10px;
}

.online-list {
  display: grid;
  gap: 4px;
}
.online-user {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 7px;
  background: rgba(255, 255, 255, .015);
  border: 1px solid var(--line);
  position: relative;
}
.online-user .avatar-placeholder {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .12);
}
.online-user > i {
  position: absolute;
  left: 30px;
  bottom: 7px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 2px var(--bg-2);
}
.online-user.busy > i    { background: var(--orange) }
.online-user.idle > i    { background: var(--yellow) }
.online-user.offline     { opacity: .55 }
.online-user.offline > i { background: var(--muted-2) }

.online-user b {
  font-size: var(--text-xs);
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.online-user span {
  display: block;
  color: var(--muted);
  font-size: 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 1px;
}
.online-user small {
  font-size: 9px;
  color: var(--text-soft);
  font-weight: 700;
  text-align: right;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.offline-section {
  border-top: 1px solid var(--line);
  padding-top: var(--s-3);
  margin-top: var(--s-3);
}
.roster-hidden { display: none !important }
.right-panel.is-online { scroll-behavior: smooth }
.versus-panel {
  transition: opacity .22s ease, transform .22s ease, max-height .26s ease, margin .22s ease, padding .22s ease, border-color .22s ease;
  max-height: 320px;
  overflow: hidden;
}
.right-panel.is-online .versus-panel {
  opacity: 0;
  transform: translateY(10px);
  max-height: 0;
  margin-top: 0;
  padding-top: 0;
  border-top-color: transparent;
  pointer-events: none;
}


/* ==========================================================================
  16. VERSUS panel
   ========================================================================== */

.versus-panel {
  margin-top: var(--s-4);
  padding-top: var(--s-4);
  border-top: 1px solid var(--line);
}
.versus-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--s-2);
}
.versus-head h2 {
  font-size: var(--text-xs);
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.versus-head span {
  font-size: 9px;
  font-weight: 800;
  color: var(--orange);
  text-transform: uppercase;
  letter-spacing: .08em;
}

.versus-list {
  display: grid;
  gap: 4px;
}
.versus-list article {
  display: grid;
  grid-template-columns: 1fr 40px 1fr;
  align-items: center;
  gap: 4px;
  padding: 7px 8px;
  border-radius: 7px;
  background: rgba(255, 255, 255, .015);
  border: 1px solid var(--line);
}
.versus-list span {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  font-weight: 800;
  color: var(--text-soft);
  min-width: 0;
  letter-spacing: .04em;
}
.versus-list span:last-child { justify-content: flex-end }
.versus-list img {
  width: 20px;
  height: 20px;
  border-radius: 50%;
}
.versus-list strong {
  text-align: center;
  font-size: var(--text-xs);
  font-weight: 800;
  color: #fff;
}
.versus-panel button {
  width: 100%;
  height: 32px;
  margin-top: var(--s-2);
}


/* ==========================================================================
  17. FOOTER
   ========================================================================== */

.footer {
  grid-column: 1 / 4;
  grid-row: 3;
  height: var(--footer-h);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--s-4);
  padding: 0 var(--s-6);
  border-top: 1px solid var(--line);
  background: rgba(7, 9, 11, .9);
  font-size: var(--text-xs);
  color: var(--muted);
}
.footer-left,
.footer-right {
  display: flex;
  align-items: center;
  gap: 14px;
}
.footer-left a,
.footer-right a,
.footer-right button {
  color: var(--text-soft);
  font-weight: 600;
}
.footer-left a:hover,
.footer-right a:hover,
.footer-right button:hover { color: #fff }
.footer-right { justify-self: end }
.footer-right button,
.footer-right a {
  display: flex;
  align-items: center;
  gap: 4px;
}
.footer-right svg { width: 12px; height: 12px }

.footer-status {
  height: 24px;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, .02);
  color: var(--text-soft);
  font-weight: 600;
  font-size: var(--text-xs);
  white-space: nowrap;
}
.footer-status i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 10px rgba(46, 210, 122, .65);
}
.footer-status em {
  font-style: normal;
  color: var(--muted-2);
  border-left: 1px solid var(--line);
  padding-left: 7px;
}


/* ==========================================================================
  18. RESPONSIVE
   ========================================================================== */

@media (max-width: 1500px) {
  :root { --right-w: 296px }
  .elo-card     { grid-template-columns: 168px minmax(0, 1fr) 160px }
  .hero-grid    { grid-template-columns: minmax(0, 1fr) 260px }
}

@media (max-width: 1280px) {
  body { overflow: auto }
  .dashboard {
    height: auto;
    min-height: 100vh;
    grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
    grid-template-rows: var(--header-h) auto auto var(--footer-h);
  }
  .topbar      { grid-column: 1 / 3 }
  .content     { grid-column: 2; grid-row: 2; overflow: visible }
  .right-panel {
    grid-column: 2;
    grid-row: 3;
    border-left: 0;
    border-top: 1px solid var(--line);
    overflow: visible;
  }
  .footer       { grid-column: 1 / 3; grid-row: 4 }
  .hero-grid    { grid-template-columns: 1fr }
  .elo-card     { grid-template-columns: 170px minmax(0, 1fr) 160px }
  .lobbies-grid { grid-template-columns: 1fr }
  .main-nav     { display: none }
}

@media (max-width: 860px) {
  :root { --sidebar-w: 0; --header-h: auto }
  .dashboard { display: block; height: auto }
  .topbar {
    position: sticky;
    top: 0;
    min-height: 56px;
    padding: 8px 14px;
    flex-wrap: wrap;
  }
  .brand-block { min-width: 0; width: 100%; justify-content: space-between }
  .top-actions { min-width: 0; margin-left: auto }
  .side-nav {
    position: sticky;
    top: 56px;
    z-index: 4;
    height: 52px;
    display: flex;
    flex-direction: row;
    border-right: 0;
    border-bottom: 1px solid var(--line);
    padding: 6px 10px;
    overflow-x: auto;
  }
  .nav-icons   { flex-direction: row }
  .side-bottom { display: none }
  .side-btn    { width: 38px; height: 38px; flex: 0 0 auto }
  .side-btn::after, .side-btn.active::before { display: none }
  .content     { padding: 12px }
  .right-panel { padding: 12px }
  .elo-card      { grid-template-columns: 1fr }
  .builder-card  { grid-template-columns: 1fr }
  .lobby-slots   { grid-template-columns: repeat(2, minmax(0, 1fr)) }
}

@media (max-width: 520px) {
  .lobby-slots { grid-template-columns: 1fr }
  .lobby-card  { grid-template-columns: 36px minmax(0, 1fr); gap: 10px }
  .lobby-card button { grid-column: 1 / 3; width: 100% }
  .lobby-card > img  { width: 36px; height: 36px }
  .user-meta { display: none }
}


@media (max-width: 720px) {
  .tournament-card {
    grid-template-columns: 36px minmax(0, 1fr) 76px;
  }
  .tournament-pricing {
    grid-column: 2 / 3;
    justify-items: start;
    text-align: left;
  }
  .tournament-card button {
    grid-column: 3;
    grid-row: 1 / span 2;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================================
   19. CLEAN LOBBY LAYOUT UPDATE
   ========================================================================== */

.hero-grid {
  grid-template-columns: 1fr;
}

.elo-card {
  grid-template-columns: 180px minmax(0, 1fr);
  align-items: stretch;
}

.elo-main {
  min-height: 220px;
}

.elo-chart-wrap {
  min-height: 144px;
}

.elo-inline-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.elo-inline-stats span {
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, .018);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
  padding: 7px 10px;
}

.elo-inline-stats small {
  color: var(--muted);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.elo-inline-stats b {
  color: var(--text);
  font-size: var(--text-sm);
  font-weight: 800;
}

.elo-inline-stats em {
  font-style: normal;
}

.lobby-center-card {
  padding: var(--s-4);
}

.lobby-builder {
  padding: 0;
  box-shadow: none;
  border: 0;
  background: transparent;
}

.lobby-center-divider {
  height: 1px;
  background: var(--line);
  margin: var(--s-4) 0 var(--s-3);
}

.lobbies-inline-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: var(--s-3);
  margin-bottom: var(--s-3);
}

.lobbies-inline-head h3 {
  margin: 0;
  font-size: var(--text-base);
  font-weight: 800;
  letter-spacing: -.01em;
  color: #fff;
}

.lobbies-inline-head > span {
  color: var(--muted);
  font-size: var(--text-xs);
  font-weight: 700;
  white-space: nowrap;
}

.slot-card.captain .avatar-placeholder {
  display: inline-grid;
  place-items: center;
  margin-top: 0;
  margin-bottom: 10px;
  font-size: 29px;
  line-height: 1;
  letter-spacing: 0;
  text-transform: none;
  color: #e9edf2;
}

@media (max-width: 1500px) {
  .hero-grid { grid-template-columns: 1fr }
  .elo-card  { grid-template-columns: 168px minmax(0, 1fr) }
}

@media (max-width: 1280px) {
  .elo-card { grid-template-columns: 170px minmax(0, 1fr) }
}

@media (max-width: 860px) {
  .elo-card { grid-template-columns: 1fr }
  .elo-inline-stats { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .lobby-builder { grid-template-columns: 1fr }
}

@media (max-width: 520px) {
  .elo-inline-stats { grid-template-columns: 1fr }
}

/* ========================================================================== 
   FINAL PRO TEMPLATE OVERRIDES — matches the provided mockup style
   ========================================================================== */

body {
  background:
    radial-gradient(circle at 18% 24%, rgba(255,255,255,.035) 0 1px, transparent 1.4px),
    radial-gradient(circle at 72% 42%, rgba(255,255,255,.026) 0 1px, transparent 1.35px),
    radial-gradient(circle at 36% 82%, rgba(255,255,255,.022) 0 1px, transparent 1.3px),
    radial-gradient(circle at 85% 78%, rgba(255,122,26,.026) 0 1px, transparent 1.35px),
    radial-gradient(980px 520px at 60% -10%, rgba(255, 122, 26, .055), transparent 62%),
    linear-gradient(180deg, #090c10 0%, #06080a 100%);
  background-size: 9px 9px, 13px 13px, 17px 17px, 21px 21px, auto, auto;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .34;
  background-image:
    radial-gradient(circle, rgba(255,255,255,.075) .45px, transparent .55px),
    radial-gradient(circle, rgba(255,122,26,.04) .35px, transparent .55px);
  background-size: 6px 6px, 19px 19px;
  mix-blend-mode: screen;
  z-index: 0;
}

.dashboard { position: relative; z-index: 1; }

.content { padding: 16px 20px 72px; }

.hero-grid { grid-template-columns: minmax(0, 1fr); }

.elo-card {
  grid-template-columns: 190px minmax(0, 1fr);
  gap: 18px;
  padding: 14px;
  min-height: 304px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.031), rgba(255,255,255,.015)),
    radial-gradient(700px 220px at 72% 18%, rgba(255,122,26,.035), transparent 70%);
}

.division-card { min-height: 276px; }

.division-card .honours-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}

.honour-item {
  min-width: 0;
  height: 46px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  position: relative;
  background: rgba(255,255,255,.028);
  border: 1px solid rgba(255,255,255,.075);
}
.honour-item svg { width: 18px; height: 18px; }
.honour-item span {
  position: absolute;
  top: -5px;
  right: 8px;
  min-width: 16px;
  height: 16px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  font-size: 9px;
  font-weight: 900;
  background: #0c1016;
  border: 1px solid rgba(255,255,255,.12);
}
.honour-item.gold svg, .medal-gold svg { color: #ffc14d; }
.honour-item.silver svg, .medal-silver svg { color: #ccd5df; }
.honour-item.bronze svg, .medal-bronze svg { color: #c98347; }

.elo-main { min-width: 0; }

.elo-chart-wrap {
  height: 156px;
  margin-top: 10px;
  overflow: hidden;
  border: none;
  border-radius: 0;
  background:
    linear-gradient(180deg, rgba(255,255,255,.012), rgba(0,0,0,.03));
  box-shadow: none;
}

.chart-grid {
  inset: 12px 0 30px 52px;
  border: none !important;
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 100% 34%, 9.09% 100%;
  opacity: .55;
}

.chart-labels { left: 10px; top: 18px; height: 106px; }
.chart-labels span { color: #68727e; font-size: 11px; }
.elo-graph { left: 52px; right: 14px; top: 10px; bottom: 28px; width: calc(100% - 66px); height: calc(100% - 38px); }
.elo-line {
  stroke: var(--orange);
  stroke-width: 2.8;
  filter: drop-shadow(0 0 9px rgba(255,122,26,.26));
}
.elo-area { opacity: .86; }
.marker-line { stroke: rgba(255,122,26,.32); stroke-dasharray: 3 6; }

.elo-dot {
  fill: #ff7a1a;
  stroke: rgba(11,14,18,.95);
  stroke-width: 2px;
  opacity: .88;
  transform-box: fill-box;
  transform-origin: center;
  filter: drop-shadow(0 0 4px rgba(255,122,26,.35));
  transition: transform .16s ease, opacity .16s ease, stroke .16s ease;
}
.elo-dot.loss { fill: #ff4d6d; opacity: .76; }
.elo-dot.win { fill: #2ed27a; opacity: .72; }
.elo-dot.active { transform: scale(1.7); opacity: 1; stroke: #fff; }

.recent-form {
  left: 52px;
  right: 14px;
  bottom: 10px;
  height: 5px;
  display: flex;
  gap: 14px;
  align-items: center;
}
.recent-form i {
  width: 18px;
  height: 3px;
  border-radius: 999px;
  opacity: .9;
  box-shadow: none;
}
.recent-form i.win { background: #28d17b; }
.recent-form i.loss { background: #ff4365; }
.recent-form i.active { height: 5px; box-shadow: 0 0 10px currentColor; }

.chart-tooltip {
  border-color: rgba(255,122,26,.25);
  background: rgba(9, 12, 16, .96);
  box-shadow: 0 18px 48px rgba(0,0,0,.45), 0 0 0 1px rgba(255,122,26,.08) inset;
}

.elo-inline-stats {
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-top: 10px;
}
.elo-inline-stats span {
  min-height: 42px;
  padding: 9px 12px;
  border-radius: 7px;
  background: rgba(255,255,255,.018);
  border: 1px solid rgba(255,255,255,.06);
}

/* Separate honours strip under the ELO panel */
.honors-strip {
  margin-top: 10px;
  min-height: 72px;
  padding: 0 12px;
  display: grid;
  grid-template-columns: 92px repeat(5, minmax(0, 1fr)) 82px;
  align-items: center;
  gap: 0;
  background:
    linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,.012));
}
.honors-label {
  height: 44px;
  display: flex;
  align-items: center;
  border-right: 1px solid rgba(255,255,255,.08);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .12em;
}
.honors-item {
  height: 58px;
  padding: 0 16px;
  display: flex;
  align-items: center;
  gap: 11px;
  border-left: 1px solid rgba(255,255,255,.055);
  color: var(--text);
  position: relative;
}
.honors-item:hover { background: rgba(255,255,255,.025); }
.honors-item::after {
  content: attr(data-honor);
  position: absolute;
  left: 18px;
  bottom: calc(100% + 8px);
  min-width: 220px;
  opacity: 0;
  pointer-events: none;
  transform: translateY(4px);
  transition: .14s ease;
  padding: 9px 11px;
  border-radius: 8px;
  background: rgba(8,11,15,.97);
  border: 1px solid rgba(255,122,26,.2);
  color: #dbe1e7;
  font-size: 11px;
  font-weight: 700;
  box-shadow: 0 16px 40px rgba(0,0,0,.42);
  z-index: 50;
}
.honors-item:hover::after { opacity: 1; transform: translateY(0); }
.medal {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 35% 25%, rgba(255,255,255,.16), transparent 36%),
    linear-gradient(145deg, rgba(255,255,255,.055), rgba(0,0,0,.18));
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 8px 18px rgba(0,0,0,.25);
}
.medal svg { width: 22px; height: 22px; }
.honors-item b {
  display: block;
  font-size: 11px;
  letter-spacing: .08em;
  color: #ccd5df;
}
.honors-item small {
  display: block;
  margin-top: 3px;
  font-size: 11px;
  line-height: 1.22;
  color: #7f8995;
}
.honors-all {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 5px;
  height: 44px;
  color: #9ca6b2;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}
.honors-all svg { width: 13px; height: 13px; }
.honors-all:hover { color: var(--orange); }

.toolbar { margin-top: 10px; }

.lobby-center-card { padding: 12px; }
.lobby-builder {
  border: 0;
  background: transparent;
  box-shadow: none;
  padding: 0;
}
.lobby-center-divider {
  height: 1px;
  margin: 14px 0 12px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.09), transparent);
}
.lobbies-inline-head { margin-bottom: 10px; }

.avatar-placeholder,
.avatar-placeholder.avatar-md,
.avatar-placeholder.avatar-lg,
.avatar-placeholder.avatar-sm,
.avatar-placeholder.avatar-xs {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center;
  line-height: 1 !important;
  padding: 0 !important;
  font-family: var(--font);
}
.avatar-md { width: 34px; height: 34px; font-size: 15px; }
.avatar-lg { width: 64px; height: 64px; font-size: 28px; border-color: rgba(255,122,26,.65); box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 0 0 1px rgba(255,122,26,.12), 0 0 24px rgba(255,122,26,.16); }
.avatar-xs { width: 19px; height: 19px; font-size: 9px; }

.side-btn svg { stroke-width: 1.85; opacity: .96; }
.side-btn { border-radius: 10px; }

.right-panel { background: rgba(7,9,12,.42); }
.right-switch-panel, .versus-panel { background: transparent; }
.right-tab-panel { animation: panelSwitch .22s ease both; }
@keyframes panelSwitch { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }

@media (max-width: 1350px) {
  .honors-strip { grid-template-columns: 80px repeat(3, minmax(0, 1fr)) 70px; }
  .honors-item:nth-of-type(n+4) { display: none; }
}
@media (max-width: 1100px) {
  .elo-card { grid-template-columns: 1fr; }
  .division-card { min-height: auto; }
  .honors-strip { grid-template-columns: 1fr; padding: 12px; }
  .honors-label { border: 0; height: auto; margin-bottom: 8px; }
  .honors-item { border-left: 0; border-top: 1px solid rgba(255,255,255,.055); }
}


/* --------------------------------------------------------------------------
   Final polish pass: cleaner professional chart, solid cards, Steam-ready UI
   -------------------------------------------------------------------------- */

/* CS2 logo inside the selector must be a perfect circle */
.game-select img {
  width: 26px !important;
  height: 26px !important;
  border-radius: 999px !important;
  object-fit: cover !important;
  overflow: hidden;
  background: #121820;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.12), 0 0 0 1px rgba(0,0,0,.35);
}

/* Division card only shows rank + ELO now; trophies live in the HONORS strip */
.division-bottom .honours-row { display: none !important; }
.division-bottom { justify-content: flex-end; gap: 4px; }
.division-card {
  background:
    linear-gradient(158deg, rgba(25,31,39,.98), rgba(12,16,22,.98) 62%, rgba(255,122,26,.055));
  border-color: rgba(255,255,255,.10);
}

/* Less transparent / more premium cards */
.card,
.toolbar,
.honors-strip,
.lobby-center,
.available-lobbies,
.right-panel,
.status-pill,
.lobby-card,
.slot-card,
.event-card,
.match-row,
.elo-inline-stats span {
  background-color: rgba(15, 20, 27, .88) !important;
  border-color: rgba(255,255,255,.085) !important;
}
.elo-card {
  background:
    linear-gradient(180deg, rgba(17,22,30,.94), rgba(11,15,21,.94)) !important;
}
.slot-card.captain {
  background:
    radial-gradient(180px 140px at 50% 35%, rgba(255,122,26,.14), transparent 75%),
    linear-gradient(180deg, rgba(22,22,22,.95), rgba(13,16,21,.95)) !important;
}

/* Premium chart: no point dots, no white border, no awkward start/end padding */
.elo-chart-wrap {
  border: 0 !important;
  border-radius: 0 !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.014), rgba(0,0,0,.035)) !important;
  box-shadow: none !important;
}
.chart-grid {
  inset: 12px 0 30px 52px !important;
  background-image:
    linear-gradient(rgba(255,255,255,.032) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.026) 1px, transparent 1px) !important;
  background-size: 100% 34%, 8.333% 100% !important;
  opacity: .44 !important;
  mask-image: linear-gradient(90deg, transparent 0, #000 3%, #000 97%, transparent 100%);
}
.elo-graph {
  left: 52px !important;
  right: 0 !important;
  width: calc(100% - 52px) !important;
}
.elo-graph .elo-line,
.elo-line {
  stroke-width: 2.55 !important;
  filter: drop-shadow(0 0 8px rgba(255,122,26,.22));
}
.elo-graph .elo-area,
.elo-area { opacity: .82 !important; }
.elo-points,
.elo-dot { display: none !important; }
.marker-line { opacity: .42; }
.recent-form {
  right: 0 !important;
  gap: 13px !important;
}
.recent-form i {
  height: 3px !important;
  border-radius: 999px !important;
  opacity: .92;
  box-shadow: none !important;
}
.recent-form i.active {
  height: 4px !important;
  transform: translateY(-1px) scaleX(1.18);
}

/* Honors strip should read as its own line, not part of the ELO card */
.honors-strip {
  margin-top: 10px !important;
  min-height: 82px;
  background:
    linear-gradient(180deg, rgba(17,22,30,.92), rgba(11,15,21,.92)) !important;
}
.honors-item {
  background: transparent !important;
}
.honors-item .honor-icon {
  background: rgba(255,255,255,.045) !important;
  border-color: rgba(255,255,255,.10) !important;
}

/* Center every question-mark placeholder exactly */
.avatar-placeholder {
  display: inline-grid !important;
  place-items: center !important;
  text-align: center !important;
  line-height: 1 !important;
  font-family: Inter, system-ui, sans-serif !important;
}
.avatar-placeholder.avatar-md,
.avatar-placeholder.avatar-lg,
.slot-card.captain .avatar-placeholder {
  align-items: center !important;
  justify-items: center !important;
}
.slot-card.captain .avatar-placeholder {
  font-size: 31px !important;
  line-height: 1 !important;
}

/* Keep the stone-dust background subtle, not overly transparent/noisy */
body::before {
  opacity: .58 !important;
}


/* =======================================================================
   FINAL PATCH — polished chart + assets-ready SVG look
   ======================================================================= */
:root {
  --surface-solid: rgba(14, 20, 27, .92);
  --surface-solid-2: rgba(16, 23, 31, .86);
}
body {
  background-color: #070b10;
  background-image:
    radial-gradient(circle at 20% 10%, rgba(255,122,26,.035), transparent 26%),
    radial-gradient(circle at 82% 12%, rgba(63,97,127,.045), transparent 24%),
    radial-gradient(circle at 1px 1px, rgba(255,255,255,.055) 1px, transparent 1.7px),
    linear-gradient(180deg, #080d13 0%, #05070a 100%) !important;
  background-size: auto, auto, 9px 9px, auto !important;
}
.card,
.toolbar,
.section-block,
.right-panel,
.side-nav,
.topbar,
.footer,
.division-card,
.slot-card,
.available-card,
.event-card,
.versus-row {
  background-color: var(--surface-solid) !important;
  backdrop-filter: blur(10px) saturate(115%);
}
.elo-card { background-color: rgba(12,18,25,.94) !important; }
.division-card { background: linear-gradient(150deg, rgba(17,25,34,.96), rgba(9,13,18,.96)) !important; }
.division-bottom { justify-content: flex-end !important; gap: 5px !important; }
.division-bottom .honours-row,
.division-card .honours-row,
.division-card .mini-honors,
.division-card .division-awards { display: none !important; }
.game-select img {
  width: 26px !important;
  height: 26px !important;
  min-width: 26px !important;
  border-radius: 50% !important;
  aspect-ratio: 1 / 1 !important;
  object-fit: cover !important;
  overflow: hidden !important;
  display: block !important;
  box-shadow: 0 0 0 1px rgba(255,255,255,.13), 0 0 18px rgba(255,122,26,.10);
}
.elo-chart-wrap {
  overflow: visible !important;
  padding-bottom: 29px !important;
}
.chart-grid {
  left: 52px !important;
  right: 0 !important;
  background-image:
    linear-gradient(rgba(255,255,255,.036) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.032) 1px, transparent 1px) !important;
  background-size: 100% 33.333%, 8.333% 100% !important;
  opacity: .58 !important;
  mask-image: linear-gradient(90deg, transparent 0, #000 3%, #000 98%, transparent 100%) !important;
}
.elo-graph {
  left: 52px !important;
  right: 0 !important;
  width: calc(100% - 52px) !important;
  overflow: visible !important;
}
.elo-graph .elo-line,
.elo-line {
  stroke-width: 2.65px !important;
  stroke: #ff7416 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  filter: drop-shadow(0 0 9px rgba(255,122,26,.26)) !important;
}
.elo-line.elo-line-ready,
body.is-loaded .elo-line.elo-line-ready {
  stroke-dasharray: none !important;
  stroke-dashoffset: 0 !important;
}
.elo-area {
  opacity: .92 !important;
}
.elo-points,
.elo-dot { display: none !important; }
.recent-form {
  left: 52px !important;
  right: 0 !important;
  bottom: 8px !important;
  height: 8px !important;
  display: grid !important;
  grid-auto-flow: column !important;
  grid-auto-columns: minmax(14px, 1fr) !important;
  gap: 9px !important;
  align-items: center !important;
  justify-content: stretch !important;
  width: auto !important;
}
.recent-form i {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  height: 3px !important;
  border-radius: 999px !important;
  opacity: .96 !important;
  box-shadow: none !important;
}
.recent-form i.active,
.recent-form i:hover {
  height: 4px !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 0 10px currentColor !important;
}
.avatar-placeholder {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  line-height: 1 !important;
  font-family: inherit !important;
}
.avatar-md, .avatar-lg { position: relative; }
.avatar-md::before, .avatar-lg::before { content: none !important; }
.honors-strip {
  background: linear-gradient(90deg, rgba(13,18,24,.96), rgba(14,20,28,.91)) !important;
  border-color: rgba(255,255,255,.085) !important;
}
.side-btn svg,
.tab-btn svg,
.icon-alert svg,
.honors-item svg,
.event-icon svg,
.versus-logo svg {
  stroke-width: 1.8;
  shape-rendering: geometricPrecision;
}