* {
  box-sizing: border-box;
}

@font-face {
  font-family: "Figtree";
  src: url("/fonts/figtree/Figtree-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Figtree";
  src: url("/fonts/figtree/Figtree-Italic.ttf") format("truetype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Figtree";
  src: url("/fonts/figtree/Figtree-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Figtree";
  src: url("/fonts/figtree/Figtree-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Figtree";
  src: url("/fonts/figtree/Figtree-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Figtree";
  src: url("/fonts/figtree/Figtree-BoldItalic.ttf") format("truetype");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Figtree";
  src: url("/fonts/figtree/Figtree-ExtraBold.ttf") format("truetype");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Figtree";
  src: url("/fonts/figtree/Figtree-Black.ttf") format("truetype");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --bg: #05080f;
  --designer-panel-rgb: 31, 32, 38;
  --designer-panel: rgba(var(--designer-panel-rgb), 0.8);
  --designer-panel-strong: rgba(var(--designer-panel-rgb), 0.92);
  --designer-blue: #0055e9;
  --designer-border: #414246;
  --panel: var(--designer-panel);
  --panel-soft: rgba(var(--designer-panel-rgb), 0.58);
  --border-subtle: rgba(65, 66, 70, 0.42);
  --border-soft: rgba(65, 66, 70, 0.68);
  --border-control: rgba(65, 66, 70, 0.85);
  --border-focus: rgba(238, 245, 255, 0.58);
  --border-accent: rgba(238, 245, 255, 0.38);
  --border-accent-strong: rgba(238, 245, 255, 0.72);
  --border-danger: rgba(255, 108, 108, 0.44);
  --line: var(--border-subtle);
  --text: #fff;
  --muted: #93a8c5;
  --text-neutral: rgb(154, 154, 154);
  --label: #bdd0ea;
  --placeholder: rgba(147, 168, 197, 0.72);
  --accent: #dbe4f0;
  --accent-2: var(--designer-blue);
  --live: #ff4a4a;
  --danger: #ff6c6c;
  --danger-text: #ffe7e7;
  --link: #b9dcff;
  --link-hover: #d5ecff;
  --surface-page: rgba(2, 8, 15, 0.9);
  --surface-card: rgba(var(--designer-panel-rgb), 0.48);
  --surface-card-strong: rgba(var(--designer-panel-rgb), 0.92);
  --surface-popover: rgba(4, 12, 22, 0.98);
  --surface-hover: rgba(0, 85, 233, 0.96);
  --surface-panel: linear-gradient(180deg, var(--panel), var(--panel-soft)), rgba(31, 32, 38, 0.48);
  --surface-control: linear-gradient(180deg, rgba(12, 25, 42, 0.96), rgba(5, 13, 23, 0.96)), rgba(6, 14, 24, 0.94);
  --surface-control-disabled: linear-gradient(180deg, rgba(19, 31, 48, 0.72), rgba(8, 17, 29, 0.72)), rgba(6, 14, 24, 0.72);
  --button-bg: linear-gradient(180deg, rgba(238, 245, 255, 0.2), rgba(238, 245, 255, 0.1)), rgba(15, 29, 46, 0.94);
  --button-bg-hover: linear-gradient(180deg, rgba(238, 245, 255, 0.28), rgba(238, 245, 255, 0.14)), rgba(20, 38, 61, 0.98);
  --button-ghost-bg: rgba(9, 20, 34, 0.82);
  --button-ghost-bg-hover: rgba(16, 34, 53, 0.96);
  --button-danger-bg: linear-gradient(180deg, rgba(255, 108, 108, 0.16), rgba(255, 108, 108, 0.08)), rgba(34, 12, 18, 0.92);
  --button-danger-bg-hover: linear-gradient(180deg, rgba(255, 108, 108, 0.22), rgba(255, 108, 108, 0.12)), rgba(45, 15, 22, 0.96);
  --shadow-soft: 0 10px 28px rgba(2, 8, 15, 0.26);
  --shadow-panel: 0 24px 60px rgba(2, 8, 15, 0.32);
  --shadow-popover: 0 18px 50px rgba(0, 0, 0, 0.35);
  --focus-outline: 2px solid rgba(238, 245, 255, 0.78);
  --focus-ring: 0 0 0 3px rgba(238, 245, 255, 0.11);
  --max: 1280px;
  --page-top: 18px;
  --section-gap: 22px;
  --page-bottom: 56px;
  --radius-xs: 3px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 10px;
  --radius-xl: 12px;
  --radius-sharp: 0;
  --panel-radius: 0;
  --control-radius: var(--radius-md);
  --control-radius-lg: var(--radius-md);
  --admin-button-radius: 0;
  --font-text: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;
  --font-heading: 900;
}

[hidden] {
  display: none !important;
}

.text-neutral {
  color: var(--text-neutral) !important;
}

html {
  min-height: 100%;
  overflow-y: scroll;
  scrollbar-gutter: stable;
  background:
    linear-gradient(90deg, rgba(3, 9, 18, 0.2), rgba(5, 10, 20, 0.82) 15%, rgba(5, 10, 20, 0.82) 85%, rgba(3, 9, 18, 0.2)),
    url("/images/scbw/page-bg.webp") top center / cover fixed no-repeat,
    #02050b;
  color: var(--text);
  font-family: "Figtree", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}

body {
  min-height: 100vh;
  margin: 0;
  color: var(--text);
  display: flex;
  flex-direction: column;
  font-weight: var(--font-text);
}

.page-shell {
  flex: 1 0 auto;
}

.site-footer {
  flex-shrink: 0;
}

a {
  color: inherit;
  text-decoration: none;
}

main a:not(.button):not(.admin-link-button):not(.icon-button):not(.live-pill):not(.home-news-row):not(.home-feature-card__link):not(.home-video-card):not(.player-card):not(.match-card):not(.map-version-tile):not(.home-section__title-link):not(.home-side-panel__title-link):not(.competition-directory-card):not(.season-tab):not(.latest-result-row):hover,
main a:not(.button):not(.admin-link-button):not(.icon-button):not(.live-pill):not(.home-news-row):not(.home-feature-card__link):not(.home-video-card):not(.player-card):not(.match-card):not(.map-version-tile):not(.home-section__title-link):not(.home-side-panel__title-link):not(.competition-directory-card):not(.season-tab):not(.latest-result-row):focus-visible {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

.home-news-row:hover h3,
.home-news-row:focus-visible h3,
.home-section__title-link:hover h2,
.home-section__title-link:focus-visible h2,
.home-side-panel__title-link:hover h2,
.home-side-panel__title-link:focus-visible h2 {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: var(--font-heading);
}

p,
li,
dd,
td,
th,
small,
figcaption {
  font-weight: var(--font-text);
}

strong,
b {
  font-weight: var(--font-bold);
}

button,
input,
select,
textarea {
  font: inherit;
}

input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  display: inline-grid;
  place-content: center;
  flex: 0 0 auto;
  width: 18px;
  min-width: 18px;
  height: 18px;
  min-height: 18px;
  margin: 0;
  padding: 0;
  border: 1px solid rgba(123, 161, 219, 0.52);
  border-radius: 4px;
  background: rgba(4, 11, 20, 0.82);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 0 0 1px rgba(0, 96, 255, 0.12);
  cursor: pointer;
  transition: background 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease, opacity 0.16s ease;
}

input[type="checkbox"]::before {
  content: "";
  width: 10px;
  height: 10px;
  transform: scale(0);
  transform-origin: center;
  background: #fff;
  clip-path: polygon(14% 50%, 0 65%, 39% 100%, 100% 20%, 84% 6%, 36% 68%);
  transition: transform 0.12s ease;
}

input[type="checkbox"]:checked {
  border-color: rgba(119, 184, 255, 0.95);
  background: linear-gradient(180deg, #1778ff, #0054d9);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 0 0 1px rgba(0, 96, 255, 0.28);
}

input[type="checkbox"]:checked::before {
  transform: scale(1);
}

input[type="checkbox"]:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 3px rgba(0, 96, 255, 0.32);
}

input[type="checkbox"]:disabled {
  cursor: not-allowed;
  opacity: 0.48;
}

.button {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 43px;
  border: 1px solid var(--border-accent);
  border-radius: 999px;
  background: var(--button-bg);
  color: var(--text);
  box-shadow: var(--shadow-soft), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  cursor: pointer;
  font-weight: var(--font-semibold);
  letter-spacing: 0.03em;
  line-height: 1;
  padding: 12px 18px;
  text-decoration: none;
  transition: transform 0.16s ease, border-color 0.16s ease, background 0.16s ease, box-shadow 0.16s ease;
}

.button:hover {
  border-color: var(--border-accent-strong);
  background: var(--button-bg-hover);
  box-shadow: 0 14px 34px rgba(2, 8, 15, 0.34), 0 0 0 3px rgba(238, 245, 255, 0.08);
  transform: translateY(-1px);
}

.button:focus-visible {
  outline: var(--focus-outline);
  outline-offset: 3px;
}

.button:active {
  transform: translateY(0);
}

.button:disabled,
.button[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: 0.52;
  transform: none;
}

.button--ghost {
  border-color: var(--border-soft);
  background: var(--button-ghost-bg);
  color: #dbe8ff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.button--ghost:hover {
  border-color: rgba(83, 208, 255, 0.44);
  background: var(--button-ghost-bg-hover);
  box-shadow: 0 10px 26px rgba(2, 8, 15, 0.24), 0 0 0 3px rgba(83, 208, 255, 0.07);
}

.button--danger {
  border-color: var(--border-danger);
  background: var(--button-danger-bg);
  color: var(--danger-text);
}

.button--danger:hover {
  border-color: rgba(255, 108, 108, 0.74);
  background: var(--button-danger-bg-hover);
  box-shadow: 0 12px 30px rgba(2, 8, 15, 0.3), 0 0 0 3px rgba(255, 108, 108, 0.08);
}

.site-footer__inner,
.topline__inner,
.hero__content,
.live-ribbon,
.content-grid,
.page-header,
.detail-hero,
.map-detail-hero,
.player-profile-showcase,
.detail-grid,
.admin-section-grid,
.admin-section-list,
.admin-section-stack,
.admin-notice,
.admin-points-layout,
.page-shell > .admin-actions,
.homepage-top-grid,
.homepage-main-section,
.stream-directory,
.identity-manage-layout,
.player-directory,
.player-directory-stats,
.player-directory-shell,
.news-detail__body {
  width: min(calc(100% - 32px), var(--max));
  margin-inline: auto;
}

.site-shell {
  width: 100%;
}

.topline {
  position: sticky;
  top: 0;
  z-index: 10;
  backdrop-filter: none;
  background: #000;
  border-bottom: 0;
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.42);
}

.topline__inner {
  min-height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.brand {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  white-space: nowrap;
}

.brand img {
  width: min(170px, 38vw);
  height: auto;
  object-fit: contain;
  opacity: 0.95;
}

.main-nav,
.navbar-nav {
  display: flex;
  align-items: center;
  gap: clamp(18px, 3vw, 44px);
}

.brand + .main-nav {
  margin-left: clamp(22px, 4vw, 64px);
}

.navbar-nav {
  list-style: none;
  margin: 0;
  padding: 0;
}

.main-nav a,
.nav-identity-link {
  position: relative;
  color: #fff;
  font-weight: 900;
  text-transform: uppercase;
  font-size: 0.88rem;
  letter-spacing: 0.035em;
  transition: color 160ms ease, text-shadow 160ms ease, transform 160ms ease;
}

.main-nav a {
  padding: 8px 0;
}

.main-nav a:hover,
.main-nav a:focus-visible,
.nav-identity-link:hover {
  color: var(--designer-blue);
  text-shadow: 0 0 18px rgba(0, 85, 233, 0.72);
}

.nav-profile-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.nav-notification-badge {
  display: inline-grid;
  min-width: 1.35rem;
  height: 1.35rem;
  padding: 0 0.35rem;
  place-items: center;
  border-radius: 999px;
  background: #e74848;
  color: white;
  font-size: 0.72rem;
  font-weight: 900;
  line-height: 1;
  box-shadow: 0 0 0 2px rgba(6, 14, 24, 0.92);
}

.language-switcher {
  margin-left: auto;
  position: relative;
}

.language-switcher summary {
  list-style: none;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--button-ghost-bg);
  color: var(--text);
  font-weight: 800;
  padding: 8px 12px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.language-switcher summary::-webkit-details-marker {
  display: none;
}

.language-switcher__menu {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  min-width: 170px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface-popover);
  box-shadow: var(--shadow-popover);
  z-index: 20;
}

.language-switcher__option {
  width: 100%;
  border: 0;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--text);
  display: grid;
  grid-template-columns: 24px 34px 1fr;
  align-items: center;
  gap: 8px;
  padding: 9px 10px;
  text-align: left;
  cursor: pointer;
}

.language-switcher__option:hover,
.language-switcher__option[aria-current="true"] {
  background: rgba(83, 208, 255, 0.14);
}

.language-switcher__option small {
  color: var(--muted);
  font-size: 0.75rem;
}

.flag-icon {
  width: 22px;
  height: 15px;
  display: inline-block;
  border-radius: 3px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.45) inset;
  flex: 0 0 auto;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.hero {
  position: relative;
  min-height: 260px;
  display: grid;
  align-items: end;
  overflow: hidden;
}

.hero::after {
  content: "";
  position: absolute;
  top: 28px;
  right: clamp(24px, 12vw, 190px);
  width: clamp(160px, 24vw, 320px);
  aspect-ratio: 1;
  background: url("/images/scbw/logo-shield.png") center/contain no-repeat;
  opacity: 0.08;
  filter: saturate(0.75) brightness(0.72);
  pointer-events: none;
}

.hero--with-stream {
  min-height: 620px;
}

.hero__backdrop {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 18% 28%, rgba(35, 101, 183, 0.22), transparent 30%),
    linear-gradient(180deg, rgba(3, 7, 14, 0.08), rgba(3, 7, 14, 0.48) 72%, rgba(3, 7, 14, 0.82));
}

.hero__content {
  position: relative;
  z-index: 1;
  padding: 22px 0 30px;
  min-height: 260px;
}

.hero--with-stream .hero__content {
  padding-bottom: 64px;
  min-height: 620px;
}

.hero__eyebrow {
  color: var(--accent);
  letter-spacing: 0.26rem;
  text-transform: uppercase;
  font-weight: 800;
  margin-bottom: 10px;
}

.competition-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.competition-breadcrumb a {
  color: inherit;
  text-decoration: none;
}

.competition-breadcrumb a:hover {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.competition-breadcrumb span:last-child {
  color: rgba(238, 245, 255, 0.78);
}

.hero h1 {
  font-size: clamp(2rem, 4.8vw, 4.8rem);
  line-height: 0.95;
  max-width: none;
  white-space: nowrap;
  text-transform: uppercase;
  margin: 0;
}

.hero__lede {
  margin-top: 18px;
  max-width: 720px;
  font-size: 1.12rem;
  line-height: 1.7;
  color: #d9e7fb;
}

.hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 14px;
}

.hero__meta > span,
.hero__meta > a,
.tag,
.map-chip,
.match-card__meta span {
  border: 1px solid var(--line);
  background: rgba(5, 15, 26, 0.72);
  padding: 10px 14px;
  border-radius: 999px;
  color: var(--muted);
  text-decoration: none;
}

.hero__meta a:hover {
  border-color: rgba(238, 245, 255, 0.48);
  color: var(--accent);
}

.page-header--competition-detail .hero__meta > span,
.page-header--competition-detail .hero__meta > a {
  border-radius: 0;
}

.map-detail-meta-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.map-detail-meta-pill__icon,
.map-detail-meta-pill__unit {
  display: block;
  flex: 0 0 auto;
}

.map-detail-meta-pill__icon {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

.map-detail-meta-pill__unit {
  width: 22px;
  height: 22px;
  object-fit: contain;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.45));
}

.hero-stream-embed {
  width: min(100%, 860px);
  margin: 26px auto 0;
  border: 1px solid rgba(238, 245, 255, 0.3);
  border-radius: var(--radius-lg);
  background: linear-gradient(145deg, rgba(3, 10, 18, 0.92), rgba(12, 27, 44, 0.82));
  box-shadow: 0 26px 70px rgba(0, 0, 0, 0.38);
  overflow: hidden;
}

.hero-stream-embed__header {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  padding: 10px 14px;
  color: var(--text);
  font-size: 0.88rem;
  font-weight: 900;
}

.hero-stream-embed__header > span:not(.stream-status-dot) {
  color: #ffb7aa;
  letter-spacing: 0.08em;
}

.hero-stream-embed__header small {
  min-width: 0;
  overflow: hidden;
  color: var(--muted);
  font-weight: 700;
  letter-spacing: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hero-stream-embed iframe {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  min-height: 260px;
  border: 0;
  background: #050b13;
}

.hero-socials {
  position: absolute;
  top: 18px;
  right: 0;
  display: grid;
  gap: 8px;
  width: 132px;
  margin-top: 0;
  z-index: 2;
}

.hero-social {
  --social-color: #d9e7fb;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  border: 1px solid color-mix(in srgb, var(--social-color), transparent 68%);
  border-radius: 14px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--social-color), transparent 88%), rgba(4, 12, 22, 0.72));
  box-shadow:
    0 12px 26px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  color: var(--text);
  font-size: 0.86rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  min-height: 42px;
  padding: 8px 11px;
  text-decoration: none;
  transition: transform 0.16s ease, border-color 0.16s ease, background 0.16s ease;
}

.hero-social:hover {
  border-color: color-mix(in srgb, var(--social-color), transparent 42%);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--social-color), transparent 78%), rgba(9, 20, 34, 0.88));
  transform: translateY(-1px);
}

.hero-social svg {
  width: 18px;
  height: 18px;
  fill: var(--social-color);
  filter: drop-shadow(0 0 8px color-mix(in srgb, var(--social-color), transparent 58%));
}

.hero-social--twitch {
  --social-color: #9146ff;
}

.hero-social--youtube {
  --social-color: #ff0033;
}

.hero-social--discord {
  --social-color: #5865f2;
}

.live-ribbon {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)) auto;
  gap: 22px;
  margin: 10px auto 0;
  padding-inline: 4px;
  position: relative;
  z-index: 3;
}

.live-pill {
  min-height: 34px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  overflow: hidden;
  padding: 8px 16px;
  border-radius: 7px;
  border: 1px solid var(--designer-border);
  background: var(--designer-panel);
  color: #fff;
}

.live-pill.is-live {
  border-color: #ff0b63;
  background: #ff0066;
}

.live-pill img {
  width: 20px;
  height: 20px;
  filter: brightness(0) saturate(100%) invert(36%) sepia(94%) saturate(2426%) hue-rotate(247deg) brightness(101%) contrast(101%);
}

.live-pill.is-live img {
  filter: brightness(0) invert(1);
}

.live-pill__name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.live-pill__state {
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.78rem;
  font-weight: 900;
}

.live-pill.is-live .live-pill__state {
  color: #fff;
}

.live-pill__title {
  color: var(--muted);
  font-size: 0.92rem;
  display: none;
}

.live-pill:not(.is-live) .live-pill__state {
  color: var(--muted);
}

.live-pill--more {
  justify-self: start;
  align-self: center;
  min-height: auto;
  padding: 2px 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #fff;
  font-size: 0.78rem;
  font-weight: 900;
  text-transform: uppercase;
  white-space: nowrap;
  text-decoration: none;
  text-decoration-color: rgba(255, 255, 255, 0.85);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

.live-pill--more:hover,
.live-pill--more:focus-visible {
  color: #fff;
  text-decoration: underline;
  text-decoration-color: #fff;
  text-shadow: 0 0 14px rgba(255, 255, 255, 0.3);
}

.admin-action-strip {
  width: min(100% - 32px, var(--shell-max));
  margin: 8px auto 0;
  position: relative;
  z-index: 3;
}

.admin-action-strip a {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
  padding: 9px 14px;
  border: 1px solid rgba(255, 72, 72, 0.55);
  border-radius: var(--radius-sm);
  background: linear-gradient(135deg, rgba(150, 18, 18, 0.9), rgba(74, 7, 15, 0.92));
  color: #fff;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.2);
}

.admin-action-strip strong {
  font-size: 0.82rem;
  font-weight: 900;
  text-transform: uppercase;
}

.admin-action-strip span {
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.86rem;
  font-weight: 700;
}

.content-grid,
.detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--section-gap);
  padding: var(--section-gap) 0 var(--page-bottom);
}

.match-report-panel {
  grid-column: 1 / -1;
}

.match-detail-grid {
  grid-template-columns: minmax(0, 1fr);
  margin-top: 0;
  padding: 12px 24px 24px;
  background: rgba(31, 32, 38, 0.8);
  box-shadow: var(--shadow-panel);
}

.match-detail-header {
  padding-top: var(--page-top);
  padding-bottom: 12px;
  background: rgba(31, 32, 38, 0.8);
  box-shadow: none;
}

.match-detail-header h1 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35em;
}

.match-detail-header__player,
.match-detail-header__races {
  display: inline-flex;
  align-items: center;
}

.match-detail-header__player {
  gap: 8px;
}

.match-detail-header__portrait {
  display: inline-flex;
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  background: #fff;
  text-decoration: none;
}

.match-detail-header__portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

main a.match-detail-header__portrait:hover,
main a.match-detail-header__portrait:focus-visible {
  border-color: rgba(255, 255, 255, 0.38);
  text-decoration: none;
}

.match-detail-header__races {
  gap: 3px;
}

.match-detail-header__races .race-icon {
  width: 32px;
  height: 32px;
}

.match-detail-header__player-link {
  color: inherit;
  text-decoration: none;
}

.match-detail-header__player-link:hover,
.match-detail-header__player-link:focus-visible {
  color: #fff;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
}

.match-detail-header__meta,
.match-detail-header__type {
  display: inline-flex;
  align-items: center;
}

.match-detail-header__meta {
  gap: 10px;
  color: var(--text-neutral);
}

.match-detail-header .match-detail-header__meta,
.match-detail-header .match-detail-header__meta > span {
  color: var(--text-neutral);
}

.match-detail-header__meta-link {
  color: var(--text);
  text-decoration: none;
}

.match-detail-header__meta-link:hover,
.match-detail-header__meta-link:focus-visible {
  color: #fff;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

.match-detail-header__type .match-type-icon {
  width: 28px;
  height: 28px;
}

.match-report-panel .panel__header {
  margin-bottom: 8px;
}

.match-report-panel .panel__header p {
  color: var(--text-neutral);
}

.admin-review-alert {
  display: grid;
  gap: 6px;
  margin-top: 18px;
  padding: 16px 18px;
  border: 1px solid rgba(255, 196, 88, 0.58);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(135deg, rgba(255, 184, 68, 0.22), rgba(39, 20, 4, 0.34)),
    rgba(8, 14, 24, 0.86);
  color: #fff7de;
}

.admin-review-alert strong {
  color: #ffe4a8;
  font-size: 0.9rem;
  text-transform: uppercase;
}

.admin-review-alert p {
  margin: 0;
}

.match-series-overview-panel .stack-list {
  gap: 0;
}

.match-series-overview-panel .stack-list__item {
  padding: 14px 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.match-series-overview-panel .stack-list__item + .stack-list__item {
  border-top: 1px solid rgba(170, 210, 255, 0.16);
}

.match-first-map {
  align-items: center;
  gap: 10px;
}

.match-first-map__link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  color: var(--link);
}

.match-first-map__link img {
  width: 64px;
  height: 64px;
  object-fit: contain;
  border-radius: var(--radius-xs);
  background: rgba(2, 8, 15, 0.78);
}

.match-first-map__link strong {
  overflow-wrap: anywhere;
}

.match-map-pool-panel {
  grid-column: 1 / -1;
}

.match-map-pool-grid {
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.match-report-form {
  gap: 14px;
}

.match-report-panel .admin-form label,
.match-report-panel .replay-upload-dropzone small {
  color: var(--text-neutral);
}

.match-report-form__top {
  display: grid;
  grid-template-columns: minmax(220px, 320px) minmax(220px, 280px);
  gap: 12px;
  align-items: end;
}

.match-report-form__top label {
  min-width: 0;
}

.replay-upload-dropzone {
  position: relative;
  display: grid !important;
  min-height: 126px;
  place-items: center;
  align-content: center;
  gap: 7px;
  border: 1px dashed rgba(238, 245, 255, 0.42);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(circle at 50% 0%, rgba(238, 245, 255, 0.12), transparent 54%),
    rgba(5, 15, 26, 0.72);
  color: var(--text) !important;
  cursor: pointer;
  text-align: center;
  transition: border-color 0.16s ease, background 0.16s ease, transform 0.16s ease;
}

.replay-upload-dropzone:hover,
.replay-upload-dropzone.is-dragover {
  border-color: rgba(238, 245, 255, 0.78);
  background:
    radial-gradient(circle at 50% 0%, rgba(238, 245, 255, 0.2), transparent 56%),
    rgba(8, 18, 31, 0.88);
  transform: translateY(-1px);
}

.replay-upload-dropzone.is-uploading {
  opacity: 0.78;
  pointer-events: none;
}

.replay-upload-dropzone span {
  font-weight: 900;
}

.match-dispute-panel {
  grid-column: 1 / -1;
}

.match-dispute-thread {
  display: grid;
  gap: 12px;
}

.match-dispute-comment {
  padding: 14px;
  border: 1px solid rgba(170, 210, 255, 0.18);
  border-radius: var(--radius-md);
  background: rgba(5, 15, 26, 0.54);
}

.match-dispute-comment--action {
  border-color: rgba(255, 196, 88, 0.5);
  background: rgba(65, 39, 9, 0.42);
}

.match-dispute-comment__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  color: var(--text-muted);
  font-size: 0.86rem;
}

.match-dispute-comment__meta strong {
  color: var(--text);
}

.match-dispute-comment__meta em {
  color: #ffe4a8;
  font-style: normal;
  font-weight: 800;
}

.match-dispute-comment p {
  margin: 8px 0 0;
  white-space: pre-wrap;
}

.match-dispute-attachments {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
}

.match-dispute-attachments a {
  display: block;
  width: 128px;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border: 1px solid rgba(170, 210, 255, 0.22);
  border-radius: var(--radius-sm);
  background: rgba(2, 8, 15, 0.72);
}

.match-dispute-attachments img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.match-dispute-form {
  margin-top: 16px;
}

.match-proof-dropzone {
  min-height: 104px;
}

.match-dispute-form__checkbox {
  display: flex !important;
  flex-direction: row !important;
  gap: 10px;
  align-items: center;
}

.match-dispute-form__checkbox input {
  width: auto;
}

.replay-upload-dropzone small {
  color: var(--muted);
}

.replay-upload-dropzone input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.match-report-summary {
  display: grid;
  gap: 14px;
  border: 1px solid rgba(123, 161, 219, 0.2);
  border-radius: var(--radius-lg);
  background: rgba(4, 11, 20, 0.68);
  padding: 18px;
}

.match-report-summary--warning {
  border-color: rgba(255, 119, 119, 0.52);
  box-shadow: inset 0 0 0 1px rgba(255, 119, 119, 0.1), 0 0 28px rgba(255, 84, 84, 0.08);
}

.match-report-summary h3 {
  margin: 0;
}

.match-report-summary__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.match-report-summary__facts span {
  border: 1px solid rgba(123, 161, 219, 0.16);
  border-radius: 999px;
  background: rgba(2, 8, 15, 0.44);
  padding: 8px 12px;
  color: var(--text-neutral);
}

.match-report-summary__facts strong {
  color: var(--text-neutral);
}

.match-report-summary__player-link {
  color: var(--text);
  font-weight: 800;
  text-decoration: none;
}

.match-report-summary__player-link:hover,
.match-report-summary__player-link:focus-visible {
  color: #fff;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

.match-report-game-summary {
  display: grid;
  gap: 10px;
}

.match-report-game-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  border: 1px solid rgba(123, 161, 219, 0.14);
  border-radius: var(--radius-md);
  background: rgba(2, 8, 15, 0.34);
  padding: 10px;
}

.match-report-game-card--ignored {
  border-style: dashed;
  opacity: 0.82;
}

.match-report-game-card--duplicate {
  border-color: rgba(255, 196, 88, 0.5);
  background: rgba(65, 39, 9, 0.22);
}

.match-report-game-card h4,
.match-report-game-card p {
  margin: 0;
}

.match-report-game-card__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px !important;
}

.match-report-status-pill {
  display: inline-flex;
  align-items: center;
  border: 1px solid rgba(238, 245, 255, 0.16);
  border-radius: var(--radius-xs);
  padding: 4px 8px;
  color: var(--text-neutral);
  font-size: 0.78rem;
  font-weight: 800;
  line-height: 1.1;
}

.match-report-status-pill--warning {
  border-color: rgba(255, 196, 88, 0.46);
  background: rgba(65, 39, 9, 0.5);
  color: #ffe4a8;
}

.match-report-game-card__meta,
.match-report-game-card__result {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  margin-top: 6px !important;
  color: var(--text-neutral);
}

.match-report-game-card__result {
  color: var(--text);
  align-items: center;
}

.match-report-player-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text);
  font-weight: 800;
  text-decoration: none;
}

a.match-report-player-chip:hover,
a.match-report-player-chip:focus-visible {
  color: #fff;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

.match-report-player-chip img {
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
  border: 1px solid rgba(238, 245, 255, 0.38);
  border-radius: 50%;
  object-fit: cover;
  background: rgba(2, 8, 15, 0.72);
}

.match-report-player-chip .race-icon {
  width: 18px;
  height: 18px;
}

.replay-result-map-preview--compact img {
  width: 72px;
  height: 72px;
}

.match-report-replay-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: end;
  margin-top: 10px;
}

.match-report-replay-controls label {
  display: grid;
  gap: 5px;
  min-width: min(260px, 100%);
  margin: 0;
  color: var(--text-neutral);
}

.match-report-replay-controls select {
  min-height: 38px;
  border-radius: 0;
}

.match-report-replay-controls .button-link {
  min-height: 38px;
  align-self: end;
}

.match-winner-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.match-winner-line {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.replay-upload-dropzone--below {
  margin-top: 4px;
}

.replay-upload-dropzone--top {
  min-height: 104px;
  border-radius: var(--radius-xs);
}

.match-report-warning {
  border: 1px solid rgba(255, 119, 119, 0.42);
  border-radius: var(--radius-md);
  background: rgba(86, 21, 26, 0.38);
  padding: 12px 14px;
}

.match-report-warning strong {
  color: #ffd0d0;
}

.match-report-warning p {
  margin: 6px 0 0;
}

.match-report-summary__note {
  margin: 0;
}

.match-report-details {
  border: 1px solid rgba(123, 161, 219, 0.14);
  border-radius: var(--radius-lg);
  background: rgba(4, 11, 20, 0.42);
  padding: 14px;
}

.match-report-details summary {
  cursor: pointer;
  color: var(--text-neutral);
  font-weight: 800;
}

.match-report-details .stack-list {
  margin-top: 14px;
}

.match-report-details .stack-list__item {
  color: var(--text-neutral);
}

.match-report-details .stack-list__item strong,
.match-report-details .replay-ingame-player,
.match-report-details .match-winner-line {
  color: var(--text);
}

.privileged-section,
.admin-detail-grid > .panel,
.admin-section-card {
  position: relative;
  outline: 1px solid var(--privileged-outline, rgba(238, 245, 255, 0.34));
  box-shadow:
    inset 0 0 0 1px var(--privileged-inner, rgba(238, 245, 255, 0.08)),
    0 18px 48px rgba(2, 8, 15, 0.28);
}

.privileged-section:not(.admin-link-button)::before,
.admin-detail-grid > .panel::before,
.admin-section-card::before {
  content: var(--privileged-label, "admin");
  position: absolute;
  top: 10px;
  right: 14px;
  border: 1px solid rgba(238, 245, 255, 0.32);
  border-radius: 999px;
  background: rgba(238, 245, 255, 0.11);
  color: var(--accent);
  font-size: 0.66rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  padding: 3px 8px;
  text-transform: uppercase;
  pointer-events: none;
}

.admin-actions.privileged-section {
  border: 1px dashed var(--privileged-outline, rgba(238, 245, 255, 0.34));
  border-radius: var(--radius-lg);
  outline: 0;
  padding: 10px;
}

.admin-actions.privileged-section::before {
  content: none;
}

.replay-timeline {
  margin-top: 12px;
  position: relative;
  --replay-timeline-stage-height: 320px;
}

.replay-timeline summary {
  cursor: pointer;
  color: var(--accent);
  font-weight: 800;
}

.replay-timeline__heading {
  color: var(--accent);
  font-weight: 800;
  margin-bottom: 10px;
}

.replay-timeline__tabs {
  display: flex;
  gap: 8px;
  margin: 12px 0 10px;
}

.replay-timeline__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  margin: 0 0 10px;
  min-height: 26px;
  max-height: 26px;
  overflow: hidden;
  color: var(--muted);
  font-size: 0.82rem;
}

.replay-timeline__players {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  margin: 0 0 10px;
  min-height: 34px;
  max-height: 34px;
  overflow: hidden;
  color: var(--text);
  font-size: 0.82rem;
}

.replay-timeline__metrics {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  margin: 0 0 10px;
  min-height: 24px;
  max-height: 24px;
  overflow: hidden;
  color: var(--muted);
  font-size: 0.82rem;
}

.replay-timeline__players[hidden],
.replay-timeline__legend[hidden],
.replay-timeline__metrics[hidden] {
  display: flex !important;
  visibility: hidden;
  pointer-events: none;
}

.replay-timeline .replay-timeline__players label,
.replay-timeline .replay-timeline__metrics label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  line-height: 1;
  white-space: nowrap;
}

.replay-timeline__players .race-icon,
.replay-timeline__legend .race-icon {
  width: 16px;
  height: 16px;
}

.replay-timeline__legend span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.replay-timeline__metric-group {
  display: inline-flex;
  align-items: center;
  gap: 8px 10px;
  flex-wrap: wrap;
  margin-right: 4px;
  padding-right: 12px;
  border-right: 1px solid rgba(123, 161, 219, 0.18);
}

.replay-timeline .replay-timeline__players input,
.replay-timeline .replay-timeline__metrics input {
  flex: 0 0 auto;
  width: 13px;
  height: 13px;
  margin: 0;
  accent-color: var(--accent);
}

.replay-timeline__player-color {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  display: inline-block;
}

.replay-timeline__legend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.replay-timeline__legend i {
  width: 18px;
  height: 3px;
  border-radius: 999px;
  display: inline-block;
}

.replay-timeline__tabs button {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  border: 1px solid rgba(124, 174, 255, 0.24);
  border-radius: var(--radius-sharp);
  background: rgba(9, 20, 34, 0.7);
  color: var(--text);
  padding: 6px 10px;
  line-height: 1.2;
  text-align: center;
}

.replay-timeline__tabs button.is-active {
  background: rgba(238, 245, 255, 0.18);
  border-color: rgba(238, 245, 255, 0.5);
}

.replay-timeline__stage {
  width: 100%;
  max-width: 1120px;
  height: var(--replay-timeline-stage-height);
  min-height: 260px;
  max-height: min(52vh, 420px);
  position: relative;
  overflow: hidden;
}

.replay-timeline__canvas,
.replay-timeline__content {
  box-sizing: border-box;
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  max-width: none;
  height: 100%;
  border: 1px solid rgba(124, 174, 255, 0.18);
  border-radius: var(--radius-sharp);
}

.replay-timeline__content {
  overflow: auto;
  background: rgba(3, 10, 18, 0.5);
  padding: 12px;
  scrollbar-color: rgba(238, 245, 255, 0.62) rgba(9, 20, 34, 0.62);
  scrollbar-width: thin;
}

.replay-timeline__content::-webkit-scrollbar {
  width: 10px;
}

.replay-timeline__content::-webkit-scrollbar-track {
  background: rgba(9, 20, 34, 0.62);
  border-radius: var(--radius-sharp);
}

.replay-timeline__content::-webkit-scrollbar-thumb {
  border: 2px solid rgba(9, 20, 34, 0.62);
  border-radius: var(--radius-sharp);
  background: rgba(238, 245, 255, 0.72);
}

.replay-timeline__empty {
  margin: 0;
  color: var(--muted);
}

.replay-chat-list {
  display: grid;
  gap: 8px;
}

.replay-chat-row {
  display: grid;
  grid-template-columns: 58px minmax(120px, 190px) minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  border-bottom: 1px solid rgba(124, 174, 255, 0.1);
  padding-bottom: 8px;
}

.replay-chat-row:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.replay-chat-row__time {
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.replay-chat-row__player {
  display: inline-flex;
  gap: 7px;
  align-items: center;
  color: var(--text);
  font-weight: 800;
  min-width: 0;
}

.replay-chat-row__player i {
  flex: 0 0 auto;
  width: 10px;
  height: 10px;
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 3px;
}

.replay-chat-row__message {
  color: var(--muted);
  overflow-wrap: anywhere;
}

.replay-build-order-list {
  display: grid;
  gap: 6px;
}

.replay-build-order-row {
  display: grid;
  grid-template-columns: 58px minmax(120px, 190px) minmax(150px, 1fr) 82px 112px;
  gap: 10px;
  align-items: center;
  border-bottom: 1px solid rgba(124, 174, 255, 0.1);
  padding-bottom: 6px;
  color: var(--text);
}

.replay-build-order-row:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.replay-build-order-row__time,
.replay-build-order-row__kind,
.replay-build-order-row__action {
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.replay-build-order-row__player {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  gap: 7px;
  font-weight: 800;
}

.replay-build-order-row__player i {
  flex: 0 0 auto;
  width: 10px;
  height: 10px;
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 3px;
}

.replay-build-order-row__player .race-icon {
  width: 16px;
  height: 16px;
}

.replay-build-order-row__unit {
  min-width: 0;
  overflow-wrap: anywhere;
  font-weight: 800;
}

.replay-action-share-list {
  display: grid;
  gap: 10px;
}

.replay-action-share {
  display: grid;
  gap: 5px;
}

.replay-action-share__header {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: var(--text);
  font-size: 0.9rem;
}

.replay-action-share__header span {
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.replay-action-share__bar {
  display: block;
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(124, 174, 255, 0.12);
}

.replay-action-share__bar i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(238, 245, 255, 0.95), rgba(255, 126, 87, 0.95));
}

.replay-timeline__tooltip {
  position: absolute;
  z-index: 4;
  min-width: 132px;
  border: 1px solid rgba(238, 245, 255, 0.34);
  border-radius: 10px;
  background: rgba(3, 10, 18, 0.94);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.34);
  color: var(--text);
  font-size: 0.78rem;
  line-height: 1.45;
  padding: 8px 10px;
  pointer-events: none;
}

.button-link {
  border: 0;
  background: transparent;
  color: var(--link);
  cursor: pointer;
  font: inherit;
  font-weight: 800;
  padding: 0;
  text-decoration: none;
}

.button-link:hover,
.button-link:focus-visible {
  color: var(--link-hover);
}

.button-link--danger {
  color: #ff9d8f;
  float: right;
  margin-left: 12px;
}

.replay-timeline__hotkeys {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  color: var(--muted);
  font-size: 0.82rem;
}

.replay-result-map-preview {
  position: relative;
  display: inline-grid;
  width: 128px;
  height: 128px;
  margin-bottom: 0.65rem;
  place-items: stretch;
  overflow: hidden;
  border: 1px solid rgba(238, 245, 255, 0.24);
  border-radius: 10px;
  background: rgba(2, 8, 15, 0.9);
}

.replay-result-map-preview > img {
  display: block;
  width: 128px;
  height: 128px;
  object-fit: contain;
}

.replay-result-map-preview--analysis {
  width: min(100%, 220px);
  height: auto;
  aspect-ratio: 1 / 1;
  margin: 0;
}

.replay-result-map-preview--analysis > img {
  width: 100%;
  height: 100%;
}

.analysis-preview-hover {
  position: fixed;
  inset: 18px;
  z-index: 90;
  display: none;
  place-items: center;
  transform: none;
  border: 0;
  border-radius: 10px;
  background: transparent;
  padding: 0;
  pointer-events: none;
}

.analysis-preview-hover img {
  display: block;
  width: min(calc(100vw - 36px), calc(100vh - 36px));
  height: auto;
  max-width: calc(100vw - 36px);
  max-height: calc(100vh - 36px);
  aspect-ratio: auto;
  object-fit: contain;
  border: 1px solid rgba(238, 245, 255, 0.38);
  border-radius: 10px;
  background: rgba(4, 11, 20, 0.92);
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.48);
}

.replay-result-map-preview--analysis:hover .analysis-preview-hover,
.replay-result-map-preview--analysis:focus-within .analysis-preview-hover,
.analysis-result-card__preview:hover .analysis-preview-hover,
.analysis-result-card__preview:focus-within .analysis-preview-hover {
  display: block;
}

.replay-start-position-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.replay-start-position-marker {
  --replay-start-color: var(--accent);
  position: absolute;
  display: inline-grid;
  width: 18px;
  height: 18px;
  place-items: center;
  transform: translate(-50%, -50%);
  border: 2px solid rgba(238, 245, 255, 0.96);
  border-radius: 999px;
  background: var(--replay-start-color);
  color: #fff;
  box-shadow: 0 0 0 2px rgba(2, 8, 15, 0.92), 0 8px 18px rgba(0, 0, 0, 0.46);
  font-size: 0.68rem;
  font-weight: 950;
  line-height: 1;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.88);
}

.replay-start-position-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 5px 8px;
  margin-top: 6px;
  color: var(--muted);
  font-size: 0.76rem;
  line-height: 1.2;
}

.replay-start-position-legend span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}

.replay-start-position-legend i {
  --replay-start-color: var(--accent);
  width: 15px;
  height: 15px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--replay-start-color);
  border: 1px solid rgba(238, 245, 255, 0.92);
  box-shadow: 0 0 0 1px rgba(2, 8, 15, 0.92);
  color: #fff;
  font-style: normal;
  font-size: 0.62rem;
  font-weight: 950;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.88);
}

.replay-ingame-players,
.replay-ingame-team,
.replay-ingame-player {
  display: inline-flex;
  align-items: center;
}

.replay-ingame-players {
  flex-wrap: wrap;
  gap: 4px 8px;
  margin-left: 4px;
}

.replay-ingame-team {
  flex-wrap: wrap;
  gap: 4px 8px;
}

.replay-ingame-player {
  gap: 5px;
  color: var(--text);
  text-decoration: none;
}

a.replay-ingame-player:hover,
a.replay-ingame-player:focus-visible {
  color: #fff;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

.replay-ingame-player__portrait {
  width: 24px;
  height: 24px;
  flex: 0 0 auto;
  border: 1px solid rgba(238, 245, 255, 0.34);
  border-radius: 50%;
  object-fit: cover;
  background: rgba(2, 8, 15, 0.72);
}

.replay-ingame-players__vs {
  color: var(--text-neutral);
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.replay-player-color-swatch {
  display: inline-block;
  flex: 0 0 auto;
  width: 11px;
  height: 11px;
  border: 1px solid rgba(238, 245, 255, 0.62);
  border-radius: 3px;
  background: var(--replay-player-color, rgba(238, 245, 255, 0.55));
  box-shadow: 0 0 0 1px rgba(2, 8, 15, 0.74), 0 2px 6px rgba(0, 0, 0, 0.28);
}

.replay-hotkey-symbol {
  --hotkey-symbol-color: #73a7ff;
  display: inline-block;
  flex: 0 0 auto;
  width: 12px;
  height: 12px;
  border-radius: 3px;
  vertical-align: middle;
}

.replay-hotkey-symbol--assign {
  background: var(--hotkey-symbol-color);
}

.replay-hotkey-symbol--select {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: rgba(238, 245, 255, 0.72);
}

.replay-hotkey-symbol--add {
  border: 2px solid var(--hotkey-symbol-color);
  background: transparent;
}

.content-grid--single {
  grid-template-columns: 1fr;
}

.donate-hero {
  position: relative;
  overflow: hidden;
}

.donate-hero::after {
  content: "";
  position: absolute;
  inset: auto 8% -120px auto;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(238, 245, 255, 0.2), transparent 68%);
  pointer-events: none;
}

.donate-card {
  display: grid;
  grid-template-columns: minmax(240px, 340px) minmax(0, 1fr);
  grid-template-areas: "qr copy";
  gap: 28px;
  align-items: start;
  border-radius: var(--radius-sharp);
}

.donate-card__copy {
  grid-area: copy;
  justify-self: start;
  text-align: left;
}

.donate-card__copy h2 {
  margin-top: 0;
}

.donate-card__copy p {
  color: var(--text-neutral);
  font-size: 1.05rem;
  line-height: 1.65;
  margin-top: 0;
  max-width: 62ch;
}

.donate-card__account-link {
  color: var(--text-neutral);
  font-weight: var(--font-bold);
}

.donate-card__account-link:hover,
.donate-card__account-link:focus-visible {
  color: var(--text);
}

.donate-card__qr {
  grid-area: qr;
  display: grid;
  justify-items: start;
  gap: 12px;
}

.donate-card__qr img {
  width: min(100%, 320px);
  height: auto;
  border-radius: var(--radius-sharp);
  background: #fff;
  box-shadow: 0 22px 50px rgba(0, 0, 0, 0.32);
}

.donate-card__qr-missing {
  width: min(100%, 320px);
  min-height: 320px;
  border: 1px dashed rgba(238, 245, 255, 0.55);
  border-radius: var(--radius-sharp);
  background: rgba(9, 20, 34, 0.72);
  color: var(--text-neutral);
  display: grid;
  place-items: center;
  padding: 24px;
  text-align: center;
}

.donate-card__qr-missing strong {
  color: var(--text);
  display: block;
  margin-bottom: 8px;
}

@media (max-width: 760px) {
  .donate-card {
    grid-template-columns: 1fr;
    grid-template-areas:
      "qr"
      "copy";
  }
}

.homepage-top-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.75fr) minmax(220px, 0.7fr);
  gap: var(--section-gap);
  padding: var(--page-top) 0 0;
  align-items: start;
}

.homepage-top-grid + .content-grid {
  padding-top: var(--section-gap);
}

.homepage-aside-stack {
  display: grid;
  gap: var(--section-gap);
  align-items: start;
}

.homepage-main-section {
  padding: var(--section-gap) 0 var(--page-bottom);
}

.home-dashboard {
  display: grid;
  grid-template-columns: minmax(0, 2.45fr) minmax(260px, 0.9fr);
  gap: 8px;
  width: min(calc(100% - 32px), var(--max));
  margin: 14px auto var(--page-bottom);
  padding: 0;
}

.home-dashboard__main,
.home-dashboard__aside {
  display: grid;
  gap: 34px;
  align-content: start;
  min-width: 0;
  background:
    radial-gradient(circle at 45% 0%, rgba(255, 255, 255, 0.035), transparent 34%),
    linear-gradient(115deg, var(--designer-panel), rgba(var(--designer-panel-rgb), 0.88) 62%, rgba(7, 9, 16, 0.94));
  box-shadow: 0 34px 90px rgba(0, 0, 0, 0.42);
}

.home-dashboard__main {
  padding: clamp(22px, 3vw, 36px) clamp(22px, 3vw, 40px) 72px;
}

.home-dashboard__aside {
  gap: 30px;
  padding: clamp(24px, 2.4vw, 34px) clamp(16px, 2vw, 26px) 56px;
}

.home-feature-card {
  position: relative;
  min-height: clamp(300px, 37vw, 462px);
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(6, 10, 19, 0.08), rgba(6, 10, 19, 0.78)),
    var(--home-feature-image) center / cover no-repeat,
    var(--home-feature-fallback-image, url("/images/scbw/splash.webp")) center / cover no-repeat,
    #07111f;
}

.home-feature-card__link {
  position: absolute;
  inset: 0;
  display: grid;
  align-content: end;
  gap: 8px;
  padding: clamp(22px, 4vw, 38px);
  color: #fff;
  text-decoration: none;
}

.home-feature-card__link > * {
  max-width: 70%;
}

.home-feature-card__eyebrow {
  color: #dbe4f0;
  font-size: 0.82rem;
  font-weight: 900;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.home-feature-card__link strong {
  font-size: clamp(2rem, 5vw, 4.7rem);
  font-weight: 900;
  letter-spacing: -0.055em;
  line-height: 0.88;
  text-transform: uppercase;
}

.home-feature-card__link span:last-child {
  color: rgba(255, 255, 255, 0.86);
  font-size: 1rem;
  font-weight: 700;
}

.home-feature-card__stream {
  display: grid;
  height: 100%;
  min-height: inherit;
  grid-template-rows: auto 1fr;
  background: #05070d;
}

.home-feature-card__stream iframe {
  width: 100%;
  height: 100%;
  min-height: 300px;
  border: 0;
}

.home-section {
  display: grid;
  gap: 22px;
}

.home-section + .home-section {
  border-top: 1px solid var(--designer-border);
  padding-top: 32px;
}

.home-section__header,
.home-side-panel__header {
  display: flex;
  align-items: center;
  gap: 10px;
}

.home-section__header h2,
.home-side-panel__header h2 {
  margin: 0;
  color: #fff;
  font-size: clamp(1.35rem, 2.1vw, 1.65rem);
  font-weight: 900;
  letter-spacing: -0.025em;
  line-height: 1;
  text-transform: uppercase;
}

.home-section__title-link,
.home-side-panel__title-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #fff;
  text-decoration: none;
}

.home-section__title-link:hover,
.home-side-panel__title-link:hover {
  color: #fff;
}

.home-section__chevron {
  display: inline-block;
  color: #fff;
  font-size: 2.05rem;
  font-weight: 900;
  line-height: 0.8;
  text-decoration: none;
}

.home-section__more {
  display: inline-block;
  color: #fff;
  font-size: 2.05rem;
  font-weight: 900;
  line-height: 0.8;
  text-decoration: none;
}

.home-section__admin-actions {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-left: auto;
}

.home-news-feed {
  display: grid;
  gap: 22px;
}

.home-video-carousel {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.home-video-widget {
  display: grid;
  gap: 22px;
}

.home-video-card {
  display: grid;
  gap: 8px;
  color: #fff;
  text-decoration: none;
}

.home-video-card[hidden] {
  display: none;
}

.home-video-carousel.is-sliding-next .home-video-card.is-video-card-visible {
  animation: home-video-slide-next 0.28s ease-out both;
}

.home-video-carousel.is-sliding-prev .home-video-card.is-video-card-visible {
  animation: home-video-slide-prev 0.28s ease-out both;
}

.home-video-carousel.is-sliding-next .home-video-card.is-video-card-visible:nth-child(3n + 2),
.home-video-carousel.is-sliding-prev .home-video-card.is-video-card-visible:nth-child(3n + 2) {
  animation-delay: 0.035s;
}

.home-video-carousel.is-sliding-next .home-video-card.is-video-card-visible:nth-child(3n),
.home-video-carousel.is-sliding-prev .home-video-card.is-video-card-visible:nth-child(3n) {
  animation-delay: 0.07s;
}

.home-video-card:hover strong {
  color: var(--designer-blue);
}

.home-video-card__thumb {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  background: #05080e center / cover no-repeat;
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.28);
  overflow: hidden;
}

.home-video-card__play {
  position: absolute;
  left: 10px;
  bottom: 10px;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 2px solid rgba(255, 255, 255, 0.88);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  font-size: 0.74rem;
  line-height: 1;
}

.home-video-card__duration {
  position: absolute;
  right: 8px;
  bottom: 8px;
  border-radius: 5px;
  background: rgba(0, 0, 0, 0.82);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 900;
  padding: 3px 6px;
}

.home-video-card strong {
  color: #fff;
  display: -webkit-box;
  font-size: 0.96rem;
  font-weight: 900;
  min-height: 2.4em;
  line-height: 1.2;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.home-video-card time {
  color: rgba(255, 255, 255, 0.86);
  font-size: 0.88rem;
  font-weight: 800;
}

.home-video-pagination {
  display: grid;
  grid-template-columns: minmax(34px, 1fr) auto minmax(34px, 1fr);
  align-items: center;
  justify-content: center;
  column-gap: 18px;
  width: 100%;
  min-height: 34px;
}

.home-video-pagination__pages {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  align-self: center;
}

.home-video-pagination__arrow,
.home-video-pagination__page {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--designer-blue);
  cursor: pointer;
  padding: 0;
}

.home-video-pagination__arrow {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  font-size: 2.05rem;
  line-height: 1;
  font-family: Arial, sans-serif;
  transform: translateY(-1px);
}

.home-video-pagination__arrow:first-child {
  justify-self: end;
}

.home-video-pagination__arrow:last-child {
  justify-self: start;
}

.home-video-pagination__page {
  width: 46px;
  height: 3px;
  background: rgba(255, 255, 255, 0.76);
  transition: background 0.15s ease, transform 0.15s ease, width 0.15s ease;
  transform: translateY(1px);
}

.home-video-pagination__page[aria-current="page"] {
  width: 76px;
  background: var(--designer-blue);
  transform: translateY(1px) scaleY(1.35);
}

.home-video-pagination__arrow:hover,
.home-video-pagination__arrow:focus-visible {
  color: #fff;
}

.home-video-pagination__page:hover,
.home-video-pagination__page:focus-visible {
  background: rgba(255, 255, 255, 0.96);
}

@keyframes home-video-slide-next {
  from {
    opacity: 0;
    transform: translateX(22px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes home-video-slide-prev {
  from {
    opacity: 0;
    transform: translateX(-22px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.home-news-row {
  display: grid;
  grid-template-columns: minmax(180px, 260px) minmax(0, 1fr);
  gap: 20px;
  align-items: center;
  padding: 0 0 22px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.25);
}

.home-news-row__image {
  min-height: 118px;
  background: #08111d center / cover no-repeat;
}

.home-news-row__body {
  display: grid;
  gap: 9px;
}

.home-news-row__body h3,
.home-news-row__body p {
  margin: 0;
}

.home-news-row__body h3 {
  color: #fff;
  font-size: 1rem;
  font-weight: 900;
}

.home-news-row__body p {
  color: rgba(255, 255, 255, 0.88);
  line-height: 1.35;
}

.home-news-row__body time {
  color: #fff;
  font-weight: 900;
}

.home-competition-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.home-competition-tile {
  display: grid;
  gap: 6px;
  min-height: 92px;
  align-content: center;
  border: 1px solid var(--designer-border);
  background: var(--designer-panel);
  color: #fff;
  padding: 14px;
}

.home-competition-tile strong {
  font-size: 1rem;
  font-weight: 900;
}

.home-competition-tile span {
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 800;
}

.home-side-panel {
  display: grid;
  gap: 18px;
  padding-top: 0;
}

.home-side-panel + .home-side-panel {
  margin-top: 22px;
}

.home-side-panel--lower {
  margin-top: 36px;
}

.home-calendar-panel {
  padding-top: 28px;
}

.home-calendar-list {
  display: grid;
  gap: 12px;
}

.home-calendar-item {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) 22px;
  gap: 14px;
  align-items: center;
  min-height: 58px;
  border: 1px solid var(--designer-border);
  border-radius: 7px;
  background: var(--designer-panel);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  color: #fff;
  padding: 10px 14px;
  text-decoration: none;
}

.home-calendar-item:hover,
.home-calendar-item.is-highlighted {
  border-color: var(--designer-blue);
  background: var(--designer-blue);
  color: #fff;
}

.home-calendar-item__date,
.home-calendar-item__body {
  display: grid;
  min-width: 0;
}

.home-calendar-item__date {
  gap: 1px;
  font-size: 0.86rem;
  font-weight: 900;
  line-height: 1.05;
  text-align: left;
}

.home-calendar-item__date span {
  color: rgba(255, 255, 255, 0.86);
}

.home-calendar-item__body {
  gap: 2px;
  line-height: 1.08;
}

.home-calendar-item__body strong,
.home-calendar-item__body span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-calendar-item__body strong {
  font-size: 0.92rem;
  font-weight: 900;
}

.home-calendar-item__body span {
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.82rem;
  font-weight: 700;
}

.home-calendar-item__stream {
  justify-self: end;
  width: 18px;
  height: 18px;
  filter: saturate(1.25);
}

.bnet-ladder-list {
  display: grid;
  gap: 9px;
}

.bnet-ladder-row {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) 78px;
  gap: 7px;
  align-items: center;
  min-height: 38px;
  border: 1px solid var(--designer-border);
  border-radius: 7px;
  background: var(--designer-panel);
  color: #fff;
  padding: 8px 12px;
  text-decoration: none;
}

.bnet-ladder-row:hover {
  border-color: var(--designer-blue);
  background: var(--designer-blue);
  color: #fff;
}

.bnet-ladder-row__rank {
  color: rgba(255, 255, 255, 0.72);
  font-weight: 800;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.bnet-ladder-row__player,
.bnet-ladder-row__mmr {
  min-width: 0;
}

.bnet-ladder-row__player {
  display: grid;
  gap: 2px;
}

.bnet-ladder-row__player strong {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  gap: 6px;
  overflow: hidden;
  font-size: 0.92rem;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bnet-ladder-row__name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bnet-ladder-row:hover .bnet-ladder-row__name,
.bnet-ladder-row:focus-visible .bnet-ladder-row__name {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.bnet-ladder-row__player small,
.bnet-ladder-row__mmr small,
.home-side-panel__note {
  color: rgba(255, 255, 255, 0.68);
  font-size: 0.72rem;
  font-weight: 700;
}

.bnet-ladder-row__mmr {
  display: grid;
  grid-template-columns: 22px 44px;
  justify-content: end;
  align-items: center;
  gap: 4px;
  text-align: right;
}

.bnet-ladder-row__mmr strong {
  display: block;
  font-size: 0.98rem;
  font-weight: 900;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
}

.ladder-rank-icon {
  display: inline-grid;
  width: 19px;
  height: 19px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.34);
  border-radius: 5px;
  color: #fff;
  font-size: 0.62rem;
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 4px 10px rgba(0, 0, 0, 0.22);
}

.ladder-rank-icon--s {
  border-color: rgba(255, 196, 88, 0.72);
  background: linear-gradient(135deg, #fff4bc 0%, #ffc458 48%, #7a4a0a 100%);
}

.ladder-rank-icon--a {
  background: linear-gradient(135deg, #ff6565 0%, #b91935 52%, #550d22 100%);
}

.ladder-rank-icon--b {
  background: linear-gradient(135deg, #d36dff 0%, #8a24c9 52%, #33115e 100%);
}

.ladder-rank-icon--c {
  background: linear-gradient(135deg, #63a7ff 0%, #0055e9 54%, #082f87 100%);
}

.ladder-rank-icon--d {
  background: linear-gradient(135deg, #72e29a 0%, #16884e 52%, #0b3f28 100%);
}

.ladder-rank-icon--e,
.ladder-rank-icon--f,
.ladder-rank-icon--unknown {
  background: linear-gradient(135deg, #aeb5c5 0%, #5c6476 52%, #252a35 100%);
}

.home-side-panel__note {
  margin: -6px 0 0;
}

.home-side-panel .home-side-panel__note {
  text-align: center;
}

.admin-section-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--section-gap);
  padding: var(--section-gap) 0 var(--page-bottom);
}

.admin-section-list {
  display: grid;
  gap: 0;
  margin-bottom: var(--page-bottom);
  border-radius: 0;
  background: rgba(31, 32, 38, 0.8);
}

.admin-dashboard-panel {
  margin-bottom: var(--page-bottom);
}

.admin-section-list__item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
  padding: 18px 0;
  border-bottom: 1px solid rgba(65, 66, 70, 0.9);
}

.admin-section-list__item:first-child {
  padding-top: 0;
}

.admin-section-list__item:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.admin-section-list__item h2 {
  margin: 0 0 4px;
  font-size: 1.18rem;
}

.admin-section-list__item h2 a {
  color: var(--text);
  transition: color 160ms ease;
}

.admin-section-list__item h2 a:hover,
.admin-section-list__item h2 a:focus-visible {
  color: var(--designer-blue);
}

.admin-section-list__item p {
  margin: 0;
  color: var(--muted);
  line-height: 1.5;
}

.admin-section-list__item small {
  color: var(--muted);
  font-weight: 800;
  white-space: nowrap;
}

.admin-pending-review-panel {
  margin-bottom: var(--section-gap);
  padding: 18px;
  border: 1px solid rgba(255, 196, 88, 0.38);
  border-color: rgba(255, 196, 88, 0.38);
  background:
    linear-gradient(135deg, rgba(255, 184, 68, 0.14), rgba(7, 16, 29, 0.92)),
    var(--surface-panel);
}

.admin-backup-panel {
  margin-bottom: var(--section-gap);
  border-color: rgba(66, 144, 255, 0.32);
  background:
    linear-gradient(135deg, rgba(0, 102, 255, 0.12), rgba(7, 16, 29, 0.94)),
    var(--surface-panel);
}

.admin-backup-panel__header {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: flex-start;
}

.admin-backup-status {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 18px;
}

.admin-backup-status > div {
  min-width: 0;
  padding: 12px 14px;
  border: 1px solid rgba(97, 143, 204, 0.2);
  background: rgba(5, 13, 24, 0.48);
}

.admin-backup-status span {
  display: block;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.admin-backup-status strong {
  display: block;
  overflow-wrap: anywhere;
  margin-top: 5px;
  color: var(--text);
  font-size: 0.95rem;
}

.admin-backup-status__error {
  grid-column: 1 / -1;
  border-color: rgba(255, 84, 84, 0.4) !important;
  color: #ffb4b4;
}

.admin-backup-history {
  margin-top: 24px;
  padding-top: 22px;
  border-top: 1px solid rgba(123, 161, 219, 0.14);
}

.admin-backup-history__list {
  display: grid;
  gap: 10px;
}

.admin-backup-history__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 0.9fr);
  gap: 14px;
  align-items: start;
  padding: 12px 14px;
  border: 1px solid rgba(97, 143, 204, 0.2);
  background: rgba(5, 13, 24, 0.48);
}

.admin-backup-history__row.is-success {
  border-color: rgba(105, 214, 143, 0.26);
}

.admin-backup-history__row.is-failure {
  border-color: rgba(255, 84, 84, 0.34);
  background: rgba(47, 12, 18, 0.36);
}

.admin-backup-history__row p {
  margin: 4px 0 0;
}

.admin-backup-history__path {
  color: var(--muted);
  font-size: 0.82rem;
  overflow-wrap: anywhere;
}

@media (max-width: 720px) {
  .admin-backup-panel__header,
  .admin-backup-status,
  .admin-backup-history__row {
    grid-template-columns: 1fr;
  }

  .admin-backup-panel__header {
    flex-direction: column;
  }
}

.admin-pending-review-list {
  display: grid;
  gap: 10px;
}

.admin-pending-review-row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
  padding: 14px 0;
  border-top: 1px solid rgba(255, 196, 88, 0.18);
}

.admin-pending-review-row:first-child {
  border-top: 0;
}

.admin-pending-review-row h3 {
  margin: 0 0 4px;
  color: #fff7de;
}

.admin-pending-review-row p,
.admin-pending-review-row small {
  display: block;
  margin: 0;
  color: var(--muted);
}

.admin-pending-review-row > span {
  color: #ffe4a8;
  font-size: 0.78rem;
  font-weight: 900;
  text-transform: uppercase;
  white-space: nowrap;
}

.admin-match-review-page {
  margin-bottom: var(--page-bottom);
}

.admin-match-review-list {
  display: grid;
  gap: 12px;
}

.admin-match-review-card {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: center;
  padding: 16px;
  border: 1px solid rgba(255, 72, 72, 0.42);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(135deg, rgba(150, 18, 18, 0.18), rgba(4, 11, 20, 0.76)),
    rgba(4, 11, 20, 0.58);
}

.admin-match-review-card h2 {
  margin: 0 0 4px;
  color: var(--text);
  font-size: 1.05rem;
}

.admin-match-review-card p,
.admin-match-review-card small {
  display: block;
  margin: 0;
  color: var(--muted);
}

.admin-match-review-card > span {
  display: grid;
  gap: 4px;
  justify-items: end;
  color: var(--muted);
  white-space: nowrap;
}

.admin-match-review-card > span strong {
  color: #ffc0c0;
}

.admin-detail-grid {
  padding-top: var(--section-gap);
}

.admin-news-edit-grid > .panel {
  grid-column: 1 / -1;
}

.admin-news-edit-header h1 {
  margin: 0;
}

.admin-news-edit-grid .admin-form input,
.admin-news-edit-grid .admin-form select,
.admin-news-edit-grid .admin-form textarea,
.admin-news-edit-grid .admin-form button,
.admin-news-edit-grid .admin-link-button,
.admin-news-edit-grid .button,
.admin-news-edit-grid .news-editor,
.admin-news-edit-grid .editor-toolbar,
.admin-news-edit-grid .editor-toolbar button,
.admin-news-edit-grid .editor-toolbar .editor-toolbar__select,
.admin-news-edit-grid .news-hero-upload,
.admin-news-edit-grid .news-hero-upload img {
  border-radius: 0;
}

.admin-news-panel {
  width: min(calc(100% - 32px), var(--max));
  margin-inline: auto;
  border-radius: 0;
}

.admin-news-panel__header {
  align-items: center;
}

.admin-news-panel__header h1 {
  margin: 0;
}

.admin-news-section {
  display: grid;
  gap: 16px;
}

.admin-news-panel .admin-list__row,
.admin-news-panel .admin-link-button,
.admin-news-panel .danger-button,
.admin-news-panel .admin-actions button {
  border-radius: 0;
}

.admin-player-edit-header p {
  display: none;
}

.admin-player-edit-grid > .panel {
  grid-column: 1 / -1;
}

.admin-player-edit-header + .page-header--notice {
  margin-top: 0;
}

.game-account-editor {
  display: grid;
  gap: 10px;
}

.game-account-editor__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: var(--text);
  font-weight: 850;
}

.game-account-editor__rows {
  display: grid;
  gap: 10px;
}

.game-account-row {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) auto auto;
  align-items: center;
  gap: 10px;
}

.game-account-row__primary {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  margin: 0;
  white-space: nowrap;
  color: var(--muted);
  font-weight: 800;
}

.game-account-row__primary input {
  width: 18px;
  height: 18px;
}

.admin-user-edit-grid > .panel {
  grid-column: 1 / -1;
}

.admin-competition-edit-grid {
  grid-template-columns: 1fr;
}

.admin-competition-edit-grid > .panel {
  grid-column: 1 / -1;
  outline: 0;
}

.admin-competition-edit-grid > .panel::before {
  content: none;
}

.admin-competition-edit-actions {
  margin: 0 0 16px;
}

.admin-competition-editor,
.admin-competition-editor .panel,
.admin-competition-editor .admin-link-button,
.admin-competition-editor button,
.admin-competition-editor input,
.admin-competition-editor select,
.admin-competition-editor textarea,
.admin-competition-editor .admin-fieldset,
.admin-competition-editor .news-editor,
.admin-competition-editor .news-hero-upload,
.admin-competition-editor .editor-toolbar,
.admin-create-templates,
.admin-create-template-card,
.admin-create-existing,
.admin-competition-tool,
.admin-subnav--competitions .admin-subnav__link,
.admin-competition-editor .admin-advanced-settings,
.admin-competition-editor .admin-notice {
  border-radius: 0;
}

.admin-competition-form {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.admin-competition-basic,
.admin-advanced-settings__grid {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.admin-competition-basic__intro {
  grid-column: 1 / -1;
}

.admin-competition-basic__intro h2,
.admin-competition-basic__intro p {
  margin: 0;
}

.admin-competition-basic__intro p,
.admin-advanced-settings summary,
.admin-competition-form .form-hint,
.admin-competition-form label,
.admin-competition-form legend,
.admin-competition-editor .map-filter > span,
.admin-competition-editor .empty-text,
.admin-create-templates .panel__header p,
.admin-map-picker__summary,
.admin-create-template-card p,
.admin-create-template-card__type {
  color: var(--text-neutral);
}

.admin-competition-basic__intro h2,
.admin-create-template-card h3 {
  color: var(--text);
}

.admin-competition-form > label,
.admin-competition-form > fieldset,
.admin-competition-basic > label,
.admin-advanced-settings__grid > label,
.admin-advanced-settings__grid > fieldset {
  min-width: 0;
}

.admin-competition-form__wide,
.admin-competition-form > fieldset,
.admin-competition-basic > .admin-competition-form__wide,
.admin-advanced-settings__grid > .admin-competition-form__wide {
  grid-column: 1 / -1;
}

.admin-competition-form > fieldset {
  margin-top: 8px;
}

.admin-competition-form > fieldset legend,
.admin-advanced-settings__grid > fieldset legend {
  margin-bottom: 10px;
}

.admin-advanced-settings {
  grid-column: 1 / -1;
  border: 1px solid var(--border-soft);
  background: rgba(4, 10, 18, 0.38);
  padding: 0;
}

.admin-advanced-settings summary {
  cursor: pointer;
  font-weight: 850;
  padding: 14px 16px;
}

.admin-advanced-settings__grid {
  border-top: 1px solid var(--border-soft);
  padding: 16px;
}

.admin-advanced-settings__grid > fieldset {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.admin-create-templates {
  width: min(calc(100% - 32px), var(--max));
  margin: var(--section-gap) auto var(--page-bottom);
}

.admin-create-templates--main {
  display: grid;
  gap: 18px;
}

.admin-create-templates--main .panel__header h1 {
  margin: 0;
  color: var(--text);
  font-size: clamp(1.9rem, 2.35vw, 2.35rem);
  line-height: 1.05;
}

.admin-create-templates--main > .admin-subnav {
  width: auto;
  margin: 0;
}

.admin-create-templates--main > .admin-notice {
  margin-top: 0;
}

.admin-create-templates__intro h2 {
  margin: 0;
  color: var(--text);
}

.admin-create-template-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.admin-create-template-card {
  display: grid;
  align-content: space-between;
  gap: 18px;
  min-height: 230px;
  border: 1px solid var(--border-soft);
  background: rgba(7, 16, 28, 0.82);
  padding: 18px;
}

.admin-create-template-card h3 {
  margin: 6px 0 8px;
  font-size: 1.35rem;
}

.admin-create-template-card p {
  margin: 0;
  line-height: 1.55;
}

.admin-create-template-card__type {
  font-size: 0.78rem;
  font-weight: 850;
  text-transform: uppercase;
}

.admin-create-existing {
  display: grid;
  gap: 12px;
  border-top: 1px solid var(--border-soft);
  padding-top: 4px;
}

.admin-create-existing h2 {
  margin: 0;
  color: var(--text);
}

.admin-create-existing__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.admin-season-form,
.admin-event-form,
.admin-map-pack-form {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.admin-season-form > label,
.admin-season-form > fieldset,
.admin-event-form > label,
.admin-event-form > fieldset,
.admin-map-pack-form > label,
.admin-map-pack-form > fieldset {
  min-width: 0;
}

.admin-season-form > label:has(textarea),
.admin-season-form > fieldset,
.admin-season-form > .checkbox-row,
.admin-season-form > button,
.admin-event-form > label:has(textarea),
.admin-event-form > fieldset,
.admin-event-form > .checkbox-row,
.admin-event-form > button {
  grid-column: 1 / -1;
}

.admin-map-pack-form__wide,
.admin-map-pack-form > button {
  grid-column: 1 / -1;
}

.admin-map-pack-edit-grid .panel__header--with-action {
  align-items: center;
}

.admin-map-pack-edit-grid .admin-map-picker {
  width: 100%;
  min-width: 0;
}

.admin-map-pack-edit-grid .admin-map-picker__filters {
  min-width: 0;
}

.admin-competition-tournament-fieldset {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.admin-competition-tournament-fieldset legend {
  grid-column: 1 / -1;
}

.admin-competition-form > button[type="submit"] {
  justify-self: start;
  min-width: 220px;
}

.admin-competition-map-fieldset .admin-map-picker__filters {
  min-width: 0;
}

.admin-round-map-picker {
  display: grid;
  gap: 10px;
}

.admin-round-map-picker h3,
.admin-round-map-picker p {
  margin: 0;
}

.admin-round-map-picker h3 {
  color: var(--text);
}

.admin-round-map-picker__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.admin-round-map-picker__grid label {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.admin-round-map-picker__grid label > span {
  color: var(--text);
  font-weight: 800;
}

.admin-broadcast-index-grid > .panel {
  grid-column: 1 / -1;
}

.admin-broadcast-panel {
  width: min(calc(100% - 32px), var(--max));
  margin-inline: auto;
  border-radius: 0;
}

.admin-broadcast-session-page {
  width: min(calc(100% - 32px), var(--max));
  margin-inline: auto;
  border-radius: 0;
  display: grid;
  gap: 18px;
  min-width: 0;
}

.admin-broadcast-template-page {
  width: min(calc(100% - 32px), var(--max));
  margin-inline: auto;
  border-radius: 0;
  display: grid;
  gap: 18px;
  min-width: 0;
}

.admin-broadcast-panel__header {
  align-items: center;
}

.admin-broadcast-panel__header h1,
.admin-broadcast-session-page__header h1,
.admin-broadcast-template-page h1 {
  margin: 0;
}

.admin-broadcast-panel__header p,
.admin-broadcast-session-page__header p,
.admin-broadcast-template-page .panel__header p,
.admin-broadcast-section-header p,
.admin-broadcast-panel .panel__header p,
.admin-broadcast-panel .admin-list__row p,
.admin-broadcast-panel .admin-meta,
.admin-broadcast-template-page .admin-form label,
.admin-broadcast-session-page .admin-meta,
.admin-broadcast-session-page .broadcast-match-search__meta,
.admin-broadcast-session-page .empty-text,
.admin-broadcast-session-page small {
  color: var(--text-neutral);
}

.admin-broadcast-section,
.admin-broadcast-session-section {
  display: grid;
  gap: 16px;
  min-width: 0;
}

.admin-broadcast-section-header {
  display: grid;
  gap: 6px;
}

.admin-broadcast-section-header h2 {
  margin: 0;
  font-size: 1.7rem;
}

.admin-broadcast-panel .admin-list__row,
.admin-broadcast-panel .admin-link-button,
.admin-broadcast-panel .danger-button,
.admin-broadcast-panel .admin-actions button,
.admin-broadcast-session-page .admin-list__row,
.admin-broadcast-session-page .admin-link-button,
.admin-broadcast-session-page .admin-actions button,
.admin-broadcast-template-page .admin-link-button,
.admin-broadcast-template-page .admin-actions button {
  border-radius: 0;
}

.admin-broadcast-session-grid {
  width: 100%;
  margin: 0;
  grid-template-columns: 1fr;
  gap: 18px;
  padding: 0;
}

.admin-broadcast-session-grid > .panel,
.admin-broadcast-session-grid > .admin-broadcast-session-section {
  grid-column: 1 / -1;
}

.admin-discord-panel {
  width: min(calc(100% - 32px), var(--max));
  margin-inline: auto;
  border-radius: 0;
}

.admin-discord-panel__header h1 {
  margin: 0;
}

.admin-discord-section {
  display: grid;
  gap: 16px;
}

.admin-discord-panel .admin-form input,
.admin-discord-panel .admin-form button {
  border-radius: 0;
}

.admin-broadcast-session-form {
  gap: 18px;
  min-width: 0;
}

.admin-broadcast-basic-settings {
  border: 1px solid rgba(123, 161, 219, 0.18);
  background: rgba(4, 11, 20, 0.32);
  border-radius: 0;
  padding: 0;
  min-width: 0;
}

.admin-broadcast-basic-settings > summary {
  cursor: pointer;
  list-style-position: inside;
  padding: 12px 14px;
  color: var(--text);
  font-weight: 800;
}

.admin-broadcast-basic-settings[open] > summary {
  border-bottom: 1px solid rgba(123, 161, 219, 0.16);
}

.admin-broadcast-basic-settings .admin-broadcast-session-fields,
.admin-broadcast-basic-settings .admin-broadcast-active-toggle {
  margin: 14px;
}

.admin-broadcast-template-form {
  display: grid;
  gap: 18px;
  min-width: 0;
}

.admin-broadcast-template-form > .stream-inspector__grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.admin-broadcast-session-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.admin-broadcast-session-fields > label,
.admin-broadcast-session-fields > .admin-broadcast-canvas-grid {
  min-width: 0;
}

.admin-broadcast-session-page .broadcast-match-fieldset,
.admin-broadcast-session-page .broadcast-match-search,
.admin-broadcast-session-page .broadcast-match-picker,
.admin-broadcast-session-page .broadcast-match-results {
  min-width: 0;
}

.admin-broadcast-canvas-grid {
  grid-template-columns: repeat(2, minmax(120px, 220px));
  align-items: end;
}

.admin-broadcast-description-field {
  grid-column: 1 / -1;
}

.admin-add-scene-form {
  display: grid;
  grid-template-columns: minmax(150px, 0.8fr) minmax(220px, 1.5fr) minmax(180px, 1fr) auto;
  gap: 12px;
  align-items: end;
  margin-bottom: 18px;
  padding: 16px;
  border: 1px solid rgba(123, 161, 219, 0.16);
  background: rgba(4, 11, 20, 0.42);
}

.admin-add-scene-form label {
  min-width: 0;
}

.admin-add-scene-form button {
  white-space: nowrap;
}

.panel {
  background: var(--surface-panel);
  border: 0;
  border-radius: var(--panel-radius);
  padding: 24px;
  box-shadow: var(--shadow-panel);
}

.page-shell > .panel:not(.player-directory-shell) {
  width: min(calc(100% - 32px), var(--max));
  margin-inline: auto;
}

.page-shell > .panel:not(.player-directory-shell) + .panel:not(.player-directory-shell) {
  margin-top: var(--section-gap);
}

.panel__header {
  margin-bottom: 16px;
}

.homepage-aside-stack .panel__header {
  margin-bottom: 12px;
}

.panel__header h1 {
  margin: 0;
  font-size: clamp(1.9rem, 2.35vw, 2.35rem);
  line-height: 1.05;
}

.panel__header h2,
.detail-hero__body h1,
.news-detail__body h1 {
  margin: 0;
  font-size: 1.7rem;
}

.page-header h1 {
  margin: 0;
  font-size: clamp(1.9rem, 2.35vw, 2.35rem);
  line-height: 1.05;
}

.panel__header p,
.page-header p,
.detail-hero__body p,
.empty-text,
.news-detail__summary {
  color: var(--muted);
  line-height: 1.7;
}

.empty-state {
  margin: 0;
  padding: 20px;
  color: var(--muted);
}

.catalog-empty-state {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 28px;
  color: var(--muted);
  text-align: center;
}

.catalog-empty-state strong {
  color: var(--text);
  font-size: 1rem;
}

.form-control,
.form-select,
.form-floating > .form-control,
.form-floating > .form-select {
  width: 100%;
  min-height: 48px;
  border: 1px solid var(--border-control);
  border-radius: var(--control-radius-lg);
  background: var(--surface-control);
  color: var(--text);
  padding: 13px 15px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  color-scheme: dark;
}

:where(input:not([type]),
input[type="date"],
input[type="datetime-local"],
input[type="email"],
input[type="month"],
input[type="number"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="text"],
input[type="time"],
input[type="url"],
input[type="week"],
select,
textarea):not(.form-control, .form-select) {
  width: 100%;
  min-height: 44px;
  border: 1px solid var(--border-control);
  border-radius: var(--control-radius);
  background: var(--surface-control);
  color: var(--text);
  padding: 11px 13px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  color-scheme: dark;
}

.form-control:focus,
.form-select:focus,
.form-floating > .form-control:focus,
.form-floating > .form-select:focus {
  border-color: var(--border-focus);
  box-shadow: var(--focus-ring), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  outline: none;
}

:where(input:not([type]),
input[type="date"],
input[type="datetime-local"],
input[type="email"],
input[type="month"],
input[type="number"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="text"],
input[type="time"],
input[type="url"],
input[type="week"],
select,
textarea):not(.form-control, .form-select):focus {
  border-color: var(--border-focus);
  box-shadow: var(--focus-ring), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  outline: none;
}

.form-control:disabled,
.form-control[readonly],
.form-select:disabled {
  background: var(--surface-control-disabled);
  color: rgba(238, 245, 255, 0.62);
  cursor: not-allowed;
}

.form-control::placeholder {
  color: var(--placeholder);
}

:where(input, textarea)::placeholder {
  color: var(--placeholder);
}

.form-floating {
  position: relative;
  margin-bottom: 14px;
}

.form-floating > label,
.form-label,
label {
  color: var(--label);
  font-weight: 750;
  letter-spacing: 0.01em;
}

.form-floating > label {
  display: block;
  margin: 0 0 7px;
}

.form-text,
.text-muted,
.text-danger,
.validation-summary-errors,
.field-validation-error {
  line-height: 1.55;
}

.form-text,
.text-muted {
  color: var(--muted) !important;
}

.text-danger,
.validation-summary-errors,
.field-validation-error {
  color: #ff9a9a !important;
}

.btn,
.btn-primary,
.btn-secondary,
.btn-danger {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 43px;
  border: 1px solid var(--border-accent);
  border-radius: 999px;
  background: var(--button-bg);
  color: var(--text);
  box-shadow: var(--shadow-soft), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  cursor: pointer;
  font-weight: 850;
  letter-spacing: 0.03em;
  line-height: 1;
  padding: 12px 18px;
  text-decoration: none;
}

.btn:hover,
.btn-primary:hover,
.btn-secondary:hover,
.btn-danger:hover {
  border-color: var(--border-accent-strong);
  transform: translateY(-1px);
}

.btn-danger {
  border-color: var(--border-danger);
  background: var(--button-danger-bg);
}

.nav-pills {
  display: grid;
  gap: 8px;
  margin: 0 0 22px;
  padding: 0;
  list-style: none;
}

.nav-pills .nav-link {
  display: flex;
  align-items: center;
  min-height: 42px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  background: var(--button-ghost-bg);
  color: #dbe9fb;
  padding: 10px 14px;
  font-weight: 800;
}

.nav-pills .nav-link:hover,
.nav-pills .nav-link.active {
  border-color: rgba(238, 245, 255, 0.52);
  background: linear-gradient(135deg, rgba(238, 245, 255, 0.18), rgba(83, 208, 255, 0.1));
  color: var(--text);
}

.row {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.col-md-3 {
  flex: 1 1 220px;
  max-width: 280px;
}

.col-md-6 {
  flex: 999 1 420px;
  max-width: 720px;
}

.w-100 {
  width: 100%;
}

.page-header--notice,
.admin-notice {
  margin-top: 18px;
  margin-inline: auto;
  padding: 14px 18px;
  border: 1px solid rgba(83, 208, 255, 0.28);
  border-radius: var(--radius-lg);
  background: rgba(16, 34, 53, 0.65);
}

.news-list,
.competition-list,
.match-list,
.replay-list,
.game-list,
.stream-admin-list,
.stream-sidebar-list,
.stack-list,
.map-list {
  display: grid;
  gap: 14px;
}

.news-card,
.competition-card,
.match-card,
.replay-row,
.game-row,
.stream-admin-row,
.stack-list__item {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  background: var(--surface-card);
}

.news-card {
  overflow: hidden;
}

.panel--news .news-list {
  gap: 12px;
}

.news-card-shell {
  position: relative;
}

.panel--news .news-card {
  display: grid;
  grid-template-columns: minmax(126px, 220px) minmax(0, 1fr);
}

.news-card__image {
  min-height: 180px;
  background-position: center;
  background-size: cover;
}

.panel--news .news-card__image {
  min-height: 118px;
}

.news-card__body,
.competition-card,
.match-card,
.replay-row,
.game-row,
.stream-admin-row,
.stack-list__item {
  padding: 18px;
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.news-card__body h3,
.competition-card h3,
.match-card h3,
.replay-row h3,
.game-row h3,
.player-card h3 {
  margin: 0 0 8px;
}

.match-card--admin-review,
.admin-list__row--admin-review {
  border-color: rgba(255, 196, 88, 0.46);
  background:
    linear-gradient(135deg, rgba(255, 184, 68, 0.16), rgba(4, 11, 20, 0.66)),
    rgba(4, 11, 20, 0.56);
}

.match-admin-review-badge {
  border-color: rgba(255, 196, 88, 0.58) !important;
  color: #ffe4a8 !important;
  background: rgba(255, 184, 68, 0.12) !important;
}

.competition-player-grid,
.competition-map-grid {
  display: grid;
  gap: 12px;
}

.competition-player-grid {
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
}

.competition-map-grid {
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}

.competition-map-grid--compact {
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}

.competition-final-standings {
  background: linear-gradient(135deg, rgba(10, 28, 49, 0.78), rgba(3, 10, 18, 0.72));
}

.competition-final-standings__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
}

.competition-final-standings__podium {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr) minmax(0, 0.92fr);
  align-items: end;
  gap: 12px;
  margin-top: 22px;
  padding-top: 24px;
}

.competition-final-standings__item {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  align-items: center;
  gap: 6px 10px;
  padding: 12px;
  border: 1px solid rgba(137, 177, 223, 0.12);
  border-radius: var(--radius-sm);
  background: rgba(4, 12, 22, 0.58);
  color: var(--text);
}

.competition-final-standings__podium-item {
  position: relative;
  min-height: 116px;
  align-content: center;
  overflow: hidden;
}

.competition-final-standings__podium-item::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 9px;
  background: rgba(137, 177, 223, 0.26);
}

.competition-final-standings__podium-item--place-1 {
  min-height: 196px;
  border-color: rgba(238, 245, 255, 0.42);
  background: linear-gradient(180deg, rgba(238, 245, 255, 0.18), rgba(4, 12, 22, 0.68));
  transform: translateY(-26px);
}

.competition-final-standings__podium-item--place-1::after {
  height: 24px;
  background: linear-gradient(90deg, rgba(238, 245, 255, 0.55), rgba(238, 245, 255, 0.34));
}

.competition-final-standings__podium-item--place-2 {
  min-height: 146px;
}

.competition-final-standings__podium-item--place-2::after {
  height: 14px;
  background: linear-gradient(90deg, rgba(190, 206, 222, 0.42), rgba(137, 177, 223, 0.28));
}

.competition-final-standings__podium-item--place-3::after {
  height: 11px;
  background: linear-gradient(90deg, rgba(141, 151, 168, 0.44), rgba(238, 245, 255, 0.2));
}

.competition-final-standings__podium-item--place-3 {
  min-height: 104px;
  transform: translateY(18px);
}

.competition-final-standings__item:hover {
  border-color: rgba(238, 245, 255, 0.34);
  background: rgba(11, 30, 52, 0.72);
}

.competition-final-standings__place {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--accent);
  font-weight: 900;
}

.competition-final-standings__portrait {
  width: 46px;
  height: 46px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(238, 245, 255, 0.24);
  background-color: rgba(2, 8, 15, 0.9);
  background-position: center;
  background-size: cover;
}

.competition-final-standings__podium-item .competition-final-standings__portrait {
  width: 62px;
  height: 62px;
}

.competition-final-standings__podium-item--place-1 .competition-final-standings__portrait {
  width: 82px;
  height: 82px;
}

.competition-final-standings__player {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  gap: 7px;
  font-weight: 900;
}

.competition-final-standings__podium-item .competition-final-standings__player {
  font-size: 1.08rem;
}

.competition-final-standings__podium-item--place-1 .competition-final-standings__player {
  font-size: 1.34rem;
  letter-spacing: 0.01em;
}

.competition-final-standings__podium-item--place-1 .competition-final-standings__place {
  font-size: 1.18rem;
}

.competition-final-standings__player > span:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.competition-final-standings__item small {
  grid-column: 3;
  color: var(--muted);
  font-weight: 700;
}

.competition-final-standings__more {
  margin-top: 12px;
}

.competition-final-standings__more summary {
  display: inline-flex;
  list-style: none;
  cursor: pointer;
}

.competition-final-standings__more summary::-webkit-details-marker {
  display: none;
}

.competition-final-standings__more .competition-final-standings__grid {
  margin-top: 12px;
}

@media (max-width: 720px) {
  .form-grid--two {
    grid-template-columns: 1fr;
  }

  .competition-directory-shell,
  .map-directory-shell {
    width: min(100% - 32px, var(--max));
    padding: 22px 16px 80px;
  }

  .map-directory-shell {
    grid-template-columns: 1fr;
  }

  .competition-directory {
    grid-template-columns: 1fr;
  }

  .competition-final-standings__podium {
    grid-template-columns: 1fr;
    margin-top: 4px;
    padding-top: 0;
  }

  .competition-final-standings__podium-item,
  .competition-final-standings__podium-item--place-1,
  .competition-final-standings__podium-item--place-2 {
    min-height: 104px;
    transform: none;
  }

  .competition-final-standings__podium-item--place-1 .competition-final-standings__player {
    font-size: 1.12rem;
  }
}

.panel--bracket-focus {
  padding-top: 18px;
}

.tournament-bracket-board {
  display: grid;
  gap: 18px;
}

.tournament-bracket-section.is-fullscreen {
  position: fixed;
  inset: 16px;
  z-index: 1000;
  overflow: auto;
  padding: 18px;
  border: 1px solid rgba(238, 245, 255, 0.28);
  border-radius: var(--radius-sm);
  background: rgba(3, 10, 18, 0.98);
  box-shadow: var(--shadow-lg);
}

.tournament-bracket-section__tools {
  display: none;
}

.tournament-bracket-section.is-fullscreen .tournament-bracket-section__tools {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 8px 0 12px;
  background: linear-gradient(180deg, rgba(3, 10, 18, 0.98), rgba(3, 10, 18, 0.78));
}

.tournament-bracket-section__tools span {
  margin-right: auto;
  color: var(--muted);
  font-size: 0.9rem;
}

.tournament-bracket-section.is-fullscreen .tournament-bracket {
  max-height: calc(100vh - 130px);
}

.tournament-bracket-section {
  display: grid;
  gap: 10px;
}

.tournament-bracket-section__title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.tournament-bracket-section__title h3 {
  margin: 0;
  color: var(--accent);
  font-size: 0.95rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.tournament-bracket-section--loser {
  padding-top: 14px;
  border-top: 1px solid rgba(137, 177, 223, 0.14);
}

.tournament-bracket-section--final {
  padding-top: 14px;
  border-top: 1px solid rgba(238, 245, 255, 0.18);
}

.tournament-bracket {
  position: relative;
  overflow: auto;
  max-height: 76vh;
  padding: 2px 18px 10px;
  scrollbar-color: rgba(137, 177, 223, 0.45) rgba(4, 12, 22, 0.5);
  cursor: grab;
  --bracket-zoom: 1;
}

.tournament-bracket.is-drag-scrolling {
  cursor: grabbing;
  user-select: none;
}

.tournament-bracket__canvas {
  position: absolute;
  top: 2px;
  left: 18px;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 240px;
  gap: 34px;
  transform: scale(var(--bracket-zoom));
  transform-origin: top left;
}

.tournament-bracket__spacer {
  min-width: 1px;
  min-height: 1px;
  pointer-events: none;
}

.tournament-bracket__connectors {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  overflow: visible;
  pointer-events: none;
}

.tournament-bracket__connector-path {
  fill: none;
  stroke: rgba(137, 177, 223, 0.5);
  stroke-width: 1.25;
  vector-effect: non-scaling-stroke;
  transition: opacity 150ms ease, stroke 150ms ease, stroke-width 150ms ease;
}

.tournament-bracket-board.is-player-path-active .tournament-bracket__connector-path,
.tournament-bracket-section.is-player-path-active .tournament-bracket__connector-path {
  opacity: 0.18;
}

.tournament-bracket-board.is-player-path-active .tournament-bracket__connector-path.is-player-path,
.tournament-bracket-section.is-player-path-active .tournament-bracket__connector-path.is-player-path {
  opacity: 1;
  stroke: rgba(238, 245, 255, 0.96);
  stroke-width: 2.4;
}

.tournament-bracket__round {
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr;
  min-width: 0;
  z-index: 1;
}

.tournament-bracket__round:has(.tournament-bracket__match:hover),
.tournament-bracket__round:has(.tournament-bracket__match:focus-visible) {
  z-index: 80;
}

.tournament-bracket__round-head {
  display: grid;
  gap: 6px;
  min-height: 52px;
  align-content: start;
}

.tournament-bracket__round h4 {
  margin: 0;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.86);
  color: #161b25;
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: 1000;
  line-height: 1;
  letter-spacing: 0.08em;
  overflow: hidden;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.tournament-bracket__round-map {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 7px;
  min-width: 0;
  padding: 5px;
  border: 1px solid rgba(137, 177, 223, 0.12);
  border-radius: var(--radius-xs);
  background: rgba(2, 8, 15, 0.48);
  color: var(--link);
  font-size: 0.72rem;
  font-weight: 800;
}

.tournament-bracket__round-map:hover {
  border-color: rgba(238, 245, 255, 0.38);
  background: rgba(11, 30, 52, 0.68);
}

.tournament-bracket__round-map img {
  width: 34px;
  height: 34px;
  object-fit: contain;
  border-radius: var(--radius-xs);
  background: rgba(2, 8, 15, 0.86);
}

.tournament-bracket__round-map span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tournament-bracket__match-stack {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--round-gap, 14px);
  margin-top: var(--round-offset, 0);
}

.tournament-bracket__connector-vertical {
  position: absolute;
  top: var(--connector-top);
  right: -18px;
  width: 1px;
  height: var(--connector-height);
  background: rgba(137, 177, 223, 0.44);
  pointer-events: none;
}

.tournament-bracket__match {
  position: relative;
  display: grid;
  gap: 0;
  align-content: start;
  height: 120px;
  min-height: 120px;
  overflow: visible;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 0;
  background: #202020;
  color: #fff;
  text-decoration: none;
  transition: border-color 150ms ease, transform 150ms ease, background 150ms ease;
  z-index: 1;
}

.tournament-bracket-board.is-player-path-active .tournament-bracket__match,
.tournament-bracket-section.is-player-path-active .tournament-bracket__match {
  opacity: 0.42;
}

.tournament-bracket-board.is-player-path-active .tournament-bracket__match.is-player-path-match,
.tournament-bracket-section.is-player-path-active .tournament-bracket__match.is-player-path-match,
.tournament-bracket__match:hover {
  opacity: 1;
}

.tournament-bracket__match--feeds-next::after,
.tournament-bracket__match--has-source::before {
  content: "";
  position: absolute;
  top: 50%;
  width: 18px;
  height: 1px;
  background: rgba(137, 177, 223, 0.44);
  display: none;
  pointer-events: none;
}

.tournament-bracket__match--feeds-next::after {
  right: -18px;
}

.tournament-bracket__match--has-source::before {
  left: -18px;
}

.tournament-bracket-section--winner .tournament-bracket__match {
  box-shadow: none;
}

.tournament-bracket-section--loser .tournament-bracket__match {
  box-shadow: none;
}

.tournament-bracket-section--final .tournament-bracket__match {
  box-shadow: none;
}

.tournament-bracket__match:hover {
  transform: translateY(-1px);
  border-color: rgba(38, 128, 255, 0.78);
  background: #202020;
  z-index: 90;
}

.tournament-bracket__match-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
  padding: 7px 12px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.86);
  color: #161b25;
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 1000;
  line-height: 1;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.tournament-bracket__match-head strong {
  color: inherit;
  font-size: inherit;
}

.tournament-bracket__match-head small,
.tournament-bracket__player small,
.tournament-bracket__score {
  color: rgba(255, 255, 255, 0.54);
  font-size: 0.78rem;
}

.tournament-bracket__player {
  position: relative;
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) 24px 44px;
  align-items: center;
  column-gap: 6px;
  row-gap: 1px;
  min-width: 0;
  min-height: 42px;
  padding: 0;
  background: #252525;
  border: 0;
  border-radius: 0;
  color: rgba(255, 255, 255, 0.66);
}

.tournament-bracket__player.is-player-path {
  border-color: rgba(238, 245, 255, 0.76);
  background: linear-gradient(90deg, rgba(238, 245, 255, 0.26), rgba(83, 208, 255, 0.1));
  box-shadow: 0 0 0 1px rgba(238, 245, 255, 0.16), 0 0 18px rgba(238, 245, 255, 0.16);
}

.tournament-bracket__match.is-player-path-match {
  border-color: rgba(238, 245, 255, 0.54);
  background: #202020;
}

.tournament-bracket__player--from-upper {
  margin-left: 8px;
}

.tournament-bracket__player--from-upper::before {
  content: "";
  position: absolute;
  top: 50%;
  left: -13px;
  width: 13px;
  height: 14px;
  border-left: 1px solid rgba(238, 245, 255, 0.54);
  border-bottom: 1px solid rgba(238, 245, 255, 0.54);
  transform: translateY(-50%);
  pointer-events: none;
}

.tournament-bracket__player--winner {
  background: #252525;
  color: #fff;
}

.tournament-bracket__player-portrait {
  width: 28px;
  height: 28px;
  margin-left: 6px;
  overflow: hidden;
  border-radius: 999px;
  background: #fff;
  object-fit: cover;
  object-position: top center;
}

.tournament-bracket__player-name {
  display: grid;
  align-content: center;
  min-width: 0;
  padding: 0 4px 0 2px;
  line-height: 1.05;
}

.tournament-bracket__player-name > span {
  overflow: hidden;
  color: inherit;
  font-family: var(--font-display);
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tournament-bracket__player-name small {
  min-width: 0;
  overflow: hidden;
  color: var(--text-neutral);
  font-size: 0.68rem;
  line-height: 1.08;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-transform: lowercase;
}

.tournament-bracket__player .race-icon {
  width: 22px;
  height: 22px;
  justify-self: center;
}

.tournament-bracket__player .race-icon img {
  width: 100%;
  height: 100%;
  margin: 0;
  border-radius: 0;
  background: transparent;
  object-fit: contain;
}

.tournament-bracket__player-score {
  grid-column: 4;
  grid-row: 1;
  align-self: center;
  display: grid;
  width: 44px;
  height: 100%;
  min-height: 42px;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: rgba(255, 255, 255, 0.09);
  color: #fff;
  font-family: var(--font-display);
  font-size: 1.16rem;
  font-weight: 1000;
  line-height: 1;
  text-align: center;
}

.tournament-bracket__player--winner .tournament-bracket__player-score {
  background: #096df0;
}

.tournament-bracket__match-popover {
  position: absolute;
  left: calc(100% + 10px);
  top: 50%;
  z-index: 120;
  display: none;
  width: min(520px, 82vw);
  max-height: 420px;
  overflow: auto;
  padding: 12px;
  border: 1px solid rgba(238, 245, 255, 0.28);
  border-radius: var(--radius-sm);
  background: rgba(3, 10, 18, 0.96);
  box-shadow: var(--shadow-lg);
  color: var(--text);
  font-size: 0.82rem;
  line-height: 1.45;
  transform: translateY(calc(-50% + var(--bracket-popover-offset-y, 0px)));
  pointer-events: none;
}

.tournament-bracket__match-popover--left {
  right: calc(100% + 10px);
  left: auto;
}

.tournament-bracket__match-popover > strong {
  display: block;
  margin-bottom: 8px;
  color: var(--accent);
}

.tournament-bracket__match-popover span {
  display: block;
  color: var(--muted);
}

.tournament-bracket__match-popover:has(.tournament-bracket__series-table-wrap) > span {
  display: none !important;
}

.tournament-bracket__series-table-wrap {
  display: block;
  max-width: 100%;
  overflow-x: auto;
}

.tournament-bracket__series-table {
  width: 100%;
  min-width: 320px;
  border-collapse: collapse;
  color: var(--text);
  table-layout: fixed;
}

.tournament-bracket__series-table th,
.tournament-bracket__series-table td {
  padding: 7px 8px;
  border: 1px solid rgba(137, 177, 223, 0.14);
  background: rgba(7, 18, 32, 0.72);
  vertical-align: middle;
}

.tournament-bracket__series-table thead th {
  color: var(--muted);
  font-size: 0.72rem;
  line-height: 1.2;
  text-align: center;
  word-break: break-word;
}

.tournament-bracket__series-map-head {
  display: grid !important;
  justify-items: center;
  gap: 5px;
  color: var(--muted) !important;
}

.tournament-bracket__series-map-head img {
  width: 42px;
  height: 42px;
  object-fit: contain;
  border: 1px solid rgba(137, 177, 223, 0.18);
  border-radius: var(--radius-xs);
  background: rgba(2, 8, 15, 0.86);
}

.tournament-bracket__series-map-head span {
  display: block;
  max-width: 100%;
  overflow: hidden;
  color: inherit !important;
  text-overflow: ellipsis;
}

.tournament-bracket__series-table thead th:first-child,
.tournament-bracket__series-table tbody th {
  width: 130px;
  text-align: left;
}

.tournament-bracket__series-table tbody th {
  color: var(--text);
}

.tournament-bracket__series-table tbody th span {
  display: inline;
  color: var(--text);
}

.tournament-bracket__series-table tbody th strong {
  float: right;
  min-width: 24px;
  border: 1px solid rgba(238, 245, 255, 0.34);
  border-radius: var(--radius-xs);
  background: rgba(238, 245, 255, 0.12);
  color: var(--accent);
  text-align: center;
}

.tournament-bracket__series-table td {
  height: 38px;
  color: var(--accent);
  text-align: center;
}

.tournament-bracket__series-winner {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  color: var(--accent) !important;
  font-size: 1rem;
  line-height: 1;
}

.tournament-bracket__popover-game {
  display: grid !important;
  grid-template-columns: 44px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}

.tournament-bracket__popover-game img {
  width: 44px;
  height: 44px;
  object-fit: contain;
  border: 1px solid rgba(137, 177, 223, 0.18);
  border-radius: var(--radius-xs);
  background: rgba(2, 8, 15, 0.86);
}

.tournament-bracket__score {
  color: var(--accent);
  font-weight: 800;
}

.rules-text {
  color: var(--text);
  line-height: 1.7;
  white-space: pre-line;
}

.competition-rules-panel {
  padding: 0;
  overflow: hidden;
}

.competition-map-pool-panel {
  overflow: visible;
}

.competition-rules-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 24px;
  cursor: pointer;
  list-style: none;
}

.competition-map-pool-summary {
  align-items: center;
}

.competition-rules-summary::-webkit-details-marker {
  display: none;
}

.competition-rules-summary span {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--text);
}

.competition-rules-summary small {
  color: var(--muted);
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.competition-map-pool-summary > span {
  display: grid;
  gap: 4px;
}

.competition-map-pool-summary > span strong {
  font-family: var(--font-display);
  font-size: 1.05rem;
  line-height: 1.1;
}

.competition-map-pool-summary > span small {
  letter-spacing: 0;
  text-transform: none;
}

.competition-map-pool-details .competition-map-grid {
  padding: 0 24px 24px;
}

.competition-rules-summary::after {
  content: "";
  width: 10px;
  height: 10px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  color: var(--accent);
  transform: rotate(45deg);
  transition: transform 0.18s ease;
}

.competition-rules-details[open] .competition-rules-summary::after {
  transform: rotate(225deg) translate(-2px, -2px);
}

.competition-rules-details .rules-text {
  padding: 0 24px 24px;
}

.competition-detail-description {
  color: var(--text);
  line-height: 1.7;
}

.competition-detail-description > *:first-child {
  margin-top: 0;
}

.competition-source-link {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-top: 1rem;
  font-size: 0.95rem;
}

.competition-source-link a {
  color: #b9dcff;
  text-decoration: none;
}

.competition-source-link--recording a {
  color: #fff;
  font-weight: 900;
}

.competition-source-link--recording a:hover,
.competition-source-link--recording a:focus-visible {
  color: #ffcccc;
}

.match-game-list {
  display: grid;
  gap: 12px;
}

.match-game-card {
  border: 1px solid rgba(137, 177, 223, 0.12);
  border-radius: var(--radius-sm);
  background: rgba(4, 12, 22, 0.48);
}

.match-game-card summary,
.match-game-card__summary {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 12px;
  cursor: pointer;
  list-style: none;
}

.match-game-card__summary {
  cursor: default;
}

.match-game-card summary::-webkit-details-marker {
  display: none;
}

.match-game-card--expandable summary {
  grid-template-columns: auto minmax(0, 1fr) auto;
}

.match-game-card--expandable summary::after {
  content: "";
  width: 10px;
  height: 10px;
  border-right: 2px solid rgba(226, 238, 255, 0.88);
  border-bottom: 2px solid rgba(226, 238, 255, 0.88);
  transform: rotate(45deg);
  transition: transform 0.16s ease, opacity 0.16s ease;
  opacity: 0.8;
  justify-self: end;
  margin-right: 4px;
}

.match-game-card--expandable[open] summary::after {
  transform: rotate(225deg);
}

.match-game-card summary > span,
.match-game-card__summary > span {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.match-game-card__summary-text {
  grid-column: 2;
}

.match-game-card summary > .match-game-card__summary-text:first-child {
  grid-column: 1 / 3;
}

.match-game-card__map-link {
  display: inline-flex;
  color: inherit;
}

.match-game-card__map-preview {
  width: 56px;
  height: 56px;
  object-fit: contain;
  border: 1px solid rgba(137, 177, 223, 0.18);
  border-radius: var(--radius-xs);
  background: rgba(2, 8, 15, 0.82);
}

.match-game-card__map-placeholder {
  display: block;
  width: 56px;
  height: 56px;
  border: 1px solid rgba(137, 177, 223, 0.14);
  border-radius: var(--radius-xs);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.04), transparent 42%),
    #02060b;
}

.match-game-card summary small {
  color: var(--muted);
  font-weight: 700;
}

.match-game-card__quick-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  color: var(--muted);
  font-size: 0.92rem;
  font-weight: 700;
}

.match-game-card__quick-summary a {
  color: var(--link);
  font-weight: 900;
}

.match-game-card__quick-summary a:hover {
  color: var(--accent);
}

.match-game-card__quick-summary a.match-player-link:hover,
.match-game-card__quick-summary a.match-player-link:focus-visible {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

.match-game-card__race-line,
.match-game-card__race-line > span,
.match-game-card__player-race {
  display: inline-flex;
  align-items: center;
}

.match-game-card__race-line {
  gap: 8px;
}

.match-game-card__race-line > span,
.match-game-card__player-race {
  gap: 5px;
}

.match-game-card__portrait {
  box-sizing: border-box;
  display: inline-flex;
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  background: #fff;
  text-decoration: none;
  vertical-align: middle;
}

.match-game-card__portrait--replay-color {
  border: 2px solid var(--match-game-player-color, rgba(255, 255, 255, 0.14));
}

.match-game-card__portrait--stats {
  width: 30px;
  height: 30px;
}

.match-game-card__portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

main a.match-game-card__portrait:hover,
main a.match-game-card__portrait:focus-visible {
  border-color: rgba(255, 255, 255, 0.34);
  text-decoration: none;
}

main a.match-game-card__portrait--replay-color:hover,
main a.match-game-card__portrait--replay-color:focus-visible {
  border-color: var(--match-game-player-color, rgba(255, 255, 255, 0.34));
}

.match-game-card__race-line .race-icon,
.match-game-card__player-race .race-icon {
  width: 18px;
  height: 18px;
}

.match-game-card__stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 10px;
}

.match-game-card__stats div {
  display: grid;
  gap: 4px;
  padding: 10px;
  background: rgba(2, 8, 15, 0.42);
  border: 1px solid rgba(137, 177, 223, 0.1);
  border-radius: var(--radius-xs);
}

.match-game-card__stats span,
.match-game-card__stats a.match-game-card__player-link {
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-decoration: none;
  text-transform: uppercase;
}

.match-game-card__stats a.match-game-card__player-link:hover,
.match-game-card__stats a.match-game-card__player-link:focus-visible {
  color: var(--text);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.match-game-card__body {
  display: grid;
  gap: 12px;
  padding: 0 12px 12px;
}

.competition-player-chip,
.competition-map-card {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 10px;
  border: 1px solid rgba(137, 177, 223, 0.08);
  border-radius: 0;
  background: rgba(4, 12, 22, 0.58);
  color: var(--text);
  text-decoration: none;
  transition: border-color 150ms ease, transform 150ms ease, background 150ms ease;
}

.competition-player-chip:hover {
  transform: translateY(-1px);
  border-color: rgba(238, 245, 255, 0.42);
  background: rgba(11, 30, 52, 0.76);
}

.competition-map-card:hover {
  border-color: rgba(238, 245, 255, 0.42);
  background: rgba(11, 30, 52, 0.76);
}

.competition-map-card {
  border-radius: 14px;
}

.competition-player-chip__portrait {
  width: 46px;
  height: 46px;
  flex: 0 0 auto;
  border-radius: 0;
  border: 1px solid rgba(238, 245, 255, 0.22);
  background-color: rgba(2, 8, 15, 0.9);
  background-position: center;
  background-size: cover;
}

.competition-player-chip__body,
.competition-map-card__body {
  display: grid;
  gap: 3px;
  align-content: center;
  min-width: 0;
}

.competition-player-chip strong,
.competition-map-card strong {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  line-height: 1.12;
  overflow-wrap: anywhere;
}

.competition-map-card__body strong {
  display: -webkit-box;
  overflow: hidden;
  line-height: 1.18;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.competition-player-chip small,
.competition-map-card small {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
}

.competition-map-card__body small {
  display: flex;
  align-items: center;
  gap: 8px;
  line-height: 1.2;
}

.competition-map-card__preview {
  position: relative;
  width: 58px;
  height: 58px;
  flex: 0 0 auto;
}

.competition-map-card__preview > img {
  width: 58px;
  height: 58px;
  object-fit: contain;
  border-radius: 10px;
  border: 1px solid rgba(137, 177, 223, 0.18);
  background: rgba(2, 8, 15, 0.86);
}

.competition-map-card__hover-preview {
  position: fixed;
  z-index: 400;
  inset: 18px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  background: rgba(0, 0, 0, 0.62);
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px) scale(0.98);
  transition: opacity 0.14s ease, transform 0.14s ease;
}

.competition-map-card__hover-preview img {
  display: block;
  width: auto;
  height: auto;
  max-width: calc(100vw - 36px);
  max-height: calc(100vh - 36px);
  object-fit: contain;
  border: 1px solid rgba(238, 245, 255, 0.38);
  border-radius: 10px;
  background: rgba(4, 11, 20, 0.92);
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.48);
}

.competition-map-card:hover .competition-map-card__hover-preview,
.competition-map-card:focus-visible .competition-map-card__hover-preview,
.match-game-card__map-link:hover .competition-map-card__hover-preview,
.match-game-card__map-link:focus-visible .competition-map-card__hover-preview,
.player-profile-map-link:hover .competition-map-card__hover-preview,
.player-profile-map-link:focus-visible .competition-map-card__hover-preview,
.player-match-card__map-link:hover .competition-map-card__hover-preview,
.player-match-card__map-link:focus-visible .competition-map-card__hover-preview {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.competition-map-card__players {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: inherit;
}

.competition-map-card__players svg {
  display: block;
  width: 14px;
  height: 14px;
  fill: currentColor;
}

@media (max-width: 760px) {
  .competition-map-grid--compact {
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  }

  .competition-map-pool-details .competition-map-grid {
    padding: 0 16px 16px;
  }

  .competition-map-card__hover-preview {
    display: none;
  }
}

.panel--news .news-card__body {
  padding: 14px 16px;
}

.panel--news .news-card__body h3 {
  font-size: 1rem;
}

.panel--news .news-card__body p,
.news-card--archive .news-card__body > p:not(.news-card__meta) {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

.panel--news .news-card__body p {
  -webkit-line-clamp: 2;
}

.news-card-edit-link {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
}

.news-card-admin-actions {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 8px;
}

.player-grid,
.player-directory {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  padding-bottom: var(--page-bottom);
}

.player-directory-shell {
  width: min(calc(100% - 32px), var(--max));
  border-radius: 0;
  background: rgba(31, 32, 38, 0.8);
}

.player-directory-toolbar {
  display: grid;
  gap: 12px;
  margin-bottom: 18px;
}

.player-directory-toolbar .filter-bar {
  width: 100%;
}

.player-directory-toolbar .filter-bar label {
  max-width: none;
  color: var(--text-neutral);
}

.player-directory-toolbar .player-directory-sort-filter {
  flex: 0 1 210px;
}

.filter-bar .player-directory-active-filter {
  display: inline-flex;
  align-items: center;
  align-self: end;
  flex: 0 0 auto;
  gap: 8px;
  min-height: 44px;
  width: fit-content;
  margin-top: 0;
  color: var(--text-neutral);
  font-size: 0.86rem;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
}

.filter-bar .player-directory-active-filter input[type="checkbox"] {
  border-radius: 4px;
  box-shadow: none;
}

.player-directory-search-notice {
  display: grid;
  gap: 4px;
  margin-bottom: 14px;
  padding: 12px 14px;
  border: 1px solid var(--border-subtle);
  background: rgba(31, 32, 38, 0.48);
  color: var(--text-neutral);
}

.player-directory-search-notice strong {
  color: var(--text);
  font-size: 0.95rem;
}

.player-directory-search-notice span {
  font-size: 0.88rem;
}

.player-directory-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  color: var(--text);
  min-height: 44px;
}

.player-directory-footer {
  display: grid;
  grid-template-columns: minmax(160px, 1fr) auto minmax(220px, 1fr);
  gap: 18px;
  align-items: end;
  margin-top: 18px;
}

.player-directory-footer .pagination {
  margin-top: 0;
  justify-self: center;
}

.player-directory-summary--count {
  justify-content: flex-start;
}

.player-directory-summary--races {
  justify-content: flex-end;
}

.player-directory-summary__count {
  display: grid;
  align-items: end;
  gap: 6px;
  white-space: nowrap;
}

.player-directory-summary__count strong {
  font-size: 1.25rem;
  font-weight: 950;
  line-height: 1;
}

.player-directory-summary__count span,
.player-directory-summary__count small,
.player-directory-summary__races > span {
  color: var(--text-neutral);
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
}

.player-directory-summary__count small {
  text-transform: none;
}

.player-directory-summary__races {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

.player-directory-summary .player-race-stat-list {
  margin-top: 0;
}

.player-directory-shell .player-directory {
  width: 100%;
  padding-bottom: 0;
}

.player-directory-shell .pagination {
  margin-top: 18px;
}

.player-directory-footer .pagination {
  margin-top: 0;
}

.player-directory-stats {
  margin-top: var(--section-gap);
  margin-bottom: 18px;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}

.player-stat-card {
  border: 0;
  border-radius: var(--radius-lg);
  background: linear-gradient(145deg, rgba(8, 22, 41, 0.88), rgba(4, 12, 22, 0.72));
  padding: 14px 16px;
  min-width: 0;
}

.player-stat-card > span {
  display: block;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.player-stat-card > strong {
  display: block;
  margin-top: 4px;
  color: var(--text);
  font-size: 1.55rem;
  line-height: 1;
}

.player-race-stat-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 8px;
}

.player-race-stat {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text);
}

.player-card {
  position: relative;
  min-height: 162px;
  display: grid;
  grid-template-columns: 118px minmax(136px, 192px) minmax(310px, 1fr);
  align-items: end;
  gap: 0;
  padding: 0 30px 0 22px;
  overflow: hidden;
  border: 1px solid rgba(0, 85, 233, 0.86);
  border-radius: 0;
  background:
    linear-gradient(90deg, #010307 0 29%, rgba(0, 85, 233, 0.96) 48%, rgba(5, 22, 94, 0.96) 100%),
    url("/images/scbw/player-profile-bg.webp") center / cover no-repeat;
  box-shadow: inset 0 0 42px rgba(0, 0, 0, 0.18);
}

.player-card--directory {
  align-items: end;
  color: #fff;
  transition: border-color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}

.player-card--directory:hover,
.player-card--directory:focus-visible {
  border-color: #54a2ff;
  box-shadow: 0 20px 42px rgba(0, 0, 0, 0.32);
  transform: translateY(-2px);
}

.player-card--inactive {
  filter: grayscale(80%);
}

.player-card__rank {
  align-self: center;
  display: grid;
  justify-items: center;
  gap: 5px;
  z-index: 4;
  margin-bottom: 6px;
}

.player-card__rank > strong {
  display: inline-flex;
  min-width: 78px;
  min-height: 52px;
  align-items: center;
  justify-content: center;
  background: var(--designer-blue);
  color: #fff;
  font-size: clamp(1.72rem, 2.45vw, 2.25rem);
  font-weight: 950;
  line-height: 1;
}

.player-card__rank span {
  width: 100%;
  text-align: center;
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.68rem;
  font-weight: 900;
  text-transform: uppercase;
}

.player-card__rank em {
  width: 100%;
  text-align: center;
  color: #fff;
  font-size: 1.48rem;
  font-style: normal;
  font-weight: 950;
  line-height: 0.9;
}

.player-card__body {
  align-self: center;
  position: relative;
  z-index: 2;
  min-width: 0;
  margin-left: 14px;
  padding: 22px 0 18px;
}

.player-card__title {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 1px 42px;
  align-items: center;
  column-gap: 9px;
  padding-bottom: 7px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.5);
}

.player-card__title::after {
  content: "";
  grid-column: 2;
  grid-row: 1;
  width: 1px;
  height: 32px;
  background: rgba(255, 255, 255, 0.58);
}

.player-card__title h3 {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  color: #fff;
  font-size: clamp(1.18rem, 1.72vw, 1.78rem);
  font-weight: 950;
  line-height: 0.92;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-transform: uppercase;
}

.player-card__inactive-note {
  margin: 5px 0 -1px;
  color: var(--text-neutral);
  font-size: 0.74rem;
  font-weight: 850;
}

.player-card__title .race-icon {
  grid-column: 3;
  grid-row: 1;
  width: 34px;
  height: 34px;
  justify-self: start;
  filter: brightness(0) invert(1);
}

.player-card__title .race-icon--unknown {
  filter: none;
}

.player-card__title .race-icon--unknown img {
  display: none;
}

.player-card__title .race-icon--unknown .race-icon__fallback {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: #fff;
  font-size: 1.45rem;
  font-weight: 950;
  line-height: 1;
}

.player-card__stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(58px, 1fr));
  gap: 8px;
  padding-top: 7px;
}

.player-card__stats span {
  min-width: 0;
}

.player-card__stats small {
  display: block;
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.64rem;
  font-weight: 650;
  line-height: 1;
  text-transform: uppercase;
}

.player-card__stats strong {
  display: block;
  margin-top: 2px;
  color: #fff;
  font-size: clamp(0.92rem, 1.16vw, 1.18rem);
  font-weight: 950;
  line-height: 0.9;
}

.player-detail-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
}

.player-account-tags {
  margin-top: 14px;
}

.player-profile-showcase {
  --player-chart-win: var(--designer-blue);
  --player-chart-loss: #02060e;
  --player-chart-loss-border: #0060ff;
  margin-top: var(--section-gap);
  background: var(--designer-panel);
  box-shadow: 0 28px 90px rgba(0, 0, 0, 0.28);
  overflow: hidden;
}

.player-profile-showcase__top {
  min-height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 18px 24px;
  background: #1f2026;
}

.player-profile-showcase__identity {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
  color: #fff;
  font-size: clamp(1.2rem, 2.1vw, 1.55rem);
  font-weight: 500;
  text-transform: uppercase;
}

.player-profile-showcase__identity h1 {
  margin: 0;
  font-size: inherit;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
}

.player-profile-showcase__identity strong {
  font-weight: 950;
}

.player-profile-showcase__identity > span:last-child {
  color: #fff;
  text-transform: none;
}

.player-profile-showcase__separator {
  width: 1px;
  height: 28px;
  background: #73757f;
  opacity: 0.68;
}

.player-profile-showcase__hero {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  overflow: hidden;
  min-height: clamp(280px, 30vw, 365px);
  background:
    linear-gradient(90deg, rgba(0, 19, 74, 0.82), rgba(0, 85, 233, 0.08) 50%, rgba(0, 18, 70, 0.88)),
    url("/images/scbw/player-profile-bg.webp") center / cover no-repeat;
}

.player-profile-showcase__hero img {
  display: block;
  width: min(45%, 390px);
  max-height: 360px;
  object-fit: contain;
  object-position: top center;
  filter: drop-shadow(0 22px 34px rgba(0, 0, 0, 0.42));
  transform: scale(1.65);
  transform-origin: top center;
}

.player-profile-showcase__stats {
  padding: 20px 32px 72px;
  background: #1f2026;
}

.player-profile-showcase__tabs {
  display: flex;
  align-items: center;
  gap: 13px;
  min-height: 38px;
  margin-bottom: 14px;
  color: rgba(255, 255, 255, 0.58);
  font-size: 1.02rem;
  font-weight: 950;
  text-transform: uppercase;
}

.player-profile-showcase__tabs strong {
  margin-left: auto;
  color: #fff;
  font-weight: 950;
}

.player-profile-tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0;
  border: 0;
  background: transparent;
  color: rgba(255, 255, 255, 0.58);
  cursor: pointer;
  font: inherit;
  font-weight: 950;
  line-height: 1;
  text-transform: inherit;
}

.player-profile-tab + .player-profile-tab {
  padding-left: 16px;
}

.player-profile-tab + .player-profile-tab::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 1px;
  height: 24px;
  transform: translateY(-50%);
  background: #73757f;
}

.player-profile-tab:hover,
.player-profile-tab:focus-visible,
.player-profile-tab.is-active {
  color: #fff;
}

.player-profile-tab.is-active {
  color: #fff;
}

.player-profile-tab-panel {
  display: none;
}

.player-profile-tab-panel.is-active {
  display: block;
}

.player-profile-season-filter.is-hidden {
  display: none;
}

.player-profile-tab-filter {
  margin-left: auto;
  width: min(100%, 340px);
}

.player-profile-tab-filter.is-hidden {
  display: none;
}

.player-profile-tab-filter label {
  display: block;
  margin: 0;
}

.player-profile-tab-filter select {
  width: 100%;
  min-height: 38px;
  padding: 6px 38px 6px 13px;
  border: 1px solid rgba(123, 161, 219, 0.2);
  border-radius: var(--control-radius);
  background-color: rgba(4, 11, 20, 0.76);
  color: var(--text);
  font-size: 0.95rem;
  font-weight: 850;
}

.player-profile-tab-filter select option,
.player-profile-tab-filter select optgroup,
.player-profile-season-filter select option {
  background-color: #050b14;
  color: #fff;
}

.player-profile-tab-filter select option:disabled,
.player-profile-tab-filter select option.player-profile-scope-option--disabled {
  color: rgba(255, 255, 255, 0.42);
  font-style: italic;
}

.player-profile-tab-filter select:focus {
  outline: 1px solid rgba(255, 255, 255, 0.42);
}

.player-profile-info-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.player-profile-info-card {
  border: 1px solid rgba(123, 161, 219, 0.16);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.012)),
    rgba(7, 13, 23, 0.68);
  padding: 18px;
  color: var(--text-neutral);
}

.player-profile-info-card--wide,
.player-profile-info-points {
  grid-column: 1 / -1;
}

.player-profile-info-points {
  margin-top: 14px;
  border-radius: 0;
}

.player-profile-info-card h2 {
  margin: 0 0 14px;
  color: #fff;
  font-size: 1.05rem;
  font-weight: 950;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.player-profile-info-card p {
  margin: 0;
  line-height: 1.65;
}

.player-profile-info-list {
  display: grid;
  gap: 12px;
  margin: 0;
}

.player-profile-info-list div {
  display: grid;
  grid-template-columns: minmax(110px, 0.36fr) minmax(0, 1fr);
  gap: 14px;
  align-items: center;
}

.player-profile-info-list dt {
  color: var(--text-neutral);
  font-size: 0.74rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.player-profile-info-list dd {
  margin: 0;
  min-width: 0;
  color: #fff;
  font-weight: 850;
}

.player-profile-info-list dd a {
  color: #fff;
  text-decoration: none;
}

.player-profile-info-list dd a:hover,
.player-profile-info-list dd a:focus-visible {
  color: var(--accent);
  text-decoration: underline;
}

.player-profile-info-list__race {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.player-profile-info-list__race .race-icon {
  width: 20px;
  height: 20px;
}

.player-profile-account-list {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}

.player-profile-account-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 8px 10px;
  border: 1px solid rgba(123, 161, 219, 0.18);
  background: rgba(2, 7, 14, 0.58);
  color: var(--text-neutral);
}

.player-profile-account-chip strong {
  color: #fff;
  font-weight: 950;
}

.player-profile-account-chip small {
  color: var(--text-neutral);
  font-size: 0.74rem;
  font-weight: 800;
  text-transform: uppercase;
}

.player-profile-account-chip em {
  color: var(--accent);
  font-size: 0.72rem;
  font-style: normal;
  font-weight: 900;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.player-profile-stat-cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.player-profile-stat-cards div {
  min-height: 145px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 8px;
  background:
    radial-gradient(circle at 70% 15%, rgba(46, 156, 255, 0.52), transparent 42%),
    linear-gradient(135deg, rgba(0, 85, 233, 0.9), rgba(5, 17, 76, 0.96));
}

.player-profile-stat-cards span {
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.78rem;
  font-weight: 550;
  text-transform: uppercase;
}

.player-profile-stat-cards strong {
  color: #fff;
  font-size: clamp(2rem, 3vw, 2.8rem);
  font-weight: 950;
  line-height: 0.95;
}

.player-profile-race-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-top: 16px;
  padding: 14px 18px;
  background: rgba(4, 12, 22, 0.54);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.player-profile-race-summary > span {
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.player-profile-race-summary .player-race-stat-list {
  margin-top: 0;
}

.player-profile-race-summary .player-race-stat small {
  color: rgba(255, 255, 255, 0.62);
  font-size: 0.72rem;
  font-weight: 750;
}

.player-profile-chart-grid {
  display: grid;
  grid-template-columns: minmax(240px, 0.72fr) minmax(0, 1.28fr);
  gap: 62px;
  align-items: stretch;
  margin-top: 40px;
  padding: 0 78px;
}

.player-profile-chart-grid h2 {
  margin: 0 0 24px;
  color: #fff;
  font-size: 1.15rem;
  font-weight: 950;
}

.player-profile-donut-card {
  text-align: center;
}

.player-profile-donut {
  position: relative;
  width: 172px;
  height: 172px;
  display: grid;
  place-items: center;
  margin: 0 auto 18px;
  border-radius: 50%;
}

.player-profile-donut::before {
  content: "";
  position: absolute;
  border-radius: 50%;
}

.player-profile-donut::before {
  inset: 34px;
  background: #1f2026;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
  z-index: 1;
}

.player-profile-donut__svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  transform: rotate(-90deg);
  z-index: 0;
}

.player-profile-donut__track,
.player-profile-donut__win,
.player-profile-donut__loss-border,
.player-profile-donut__loss,
.player-profile-donut__loss-cap {
  fill: none;
  stroke-linecap: butt;
}

.player-profile-donut__track {
  stroke: rgba(255, 255, 255, 0.04);
  stroke-width: 13;
}

.player-profile-donut__win {
  stroke: var(--player-chart-win);
  stroke-width: 13;
  stroke-dasharray: var(--win-size) 100;
  stroke-dashoffset: calc(var(--win-offset) * -1);
}

.player-profile-donut__loss-border {
  stroke: var(--player-chart-loss-border);
  stroke-width: 14;
  stroke-dasharray: var(--loss-size) 100;
  stroke-dashoffset: calc(var(--loss-offset) * -1);
}

.player-profile-donut__loss {
  stroke: var(--player-chart-loss);
  stroke-width: 12;
  stroke-dasharray: var(--loss-size) 100;
  stroke-dashoffset: calc(var(--loss-offset) * -1);
}

.player-profile-donut__loss-cap {
  stroke: var(--player-chart-loss-border);
  stroke-width: 1.4;
  opacity: var(--loss-cap-opacity, 0);
  transform-origin: 60px 60px;
  transform-box: view-box;
}

.player-profile-donut__loss-cap--start {
  transform: rotate(var(--loss-start-deg, 0deg));
}

.player-profile-donut__loss-cap--end {
  transform: rotate(var(--loss-end-deg, 0deg));
}

.player-profile-donut strong {
  position: relative;
  z-index: 2;
  display: grid;
  color: #fff;
  font-size: 2.45rem;
  font-weight: 800;
  line-height: 1;
}

.player-profile-donut small {
  color: rgba(255, 255, 255, 0.76);
  font-size: 0.92rem;
  font-weight: 450;
  text-transform: uppercase;
}

.player-profile-donut__left,
.player-profile-donut__right {
  position: absolute;
  z-index: 3;
  top: 10px;
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.82rem;
}

.player-profile-donut__left {
  left: -42px;
}

.player-profile-donut__right {
  right: -42px;
}

.player-profile-legend {
  display: inline-flex;
  gap: 16px;
  color: #fff;
  font-size: 0.84rem;
}

.player-profile-legend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.player-profile-legend i {
  width: 12px;
  height: 12px;
}

.player-profile-legend .is-win {
  background: var(--player-chart-win);
}

.player-profile-legend .is-loss {
  background: var(--player-chart-loss);
  border: 1px solid var(--player-chart-loss-border);
}

.player-profile-matchup-card {
  min-width: 0;
  padding-left: 62px;
  padding-bottom: 52px;
  border-left: 1px solid rgba(255, 255, 255, 0.42);
}

.player-profile-matchup-card h2 {
  margin-left: 62px;
}

.player-profile-matchup-bars {
  display: grid;
  gap: 24px;
}

.player-profile-matchup-row {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
}

.player-profile-matchup-row > strong {
  color: #fff;
  font-size: 0.9rem;
  font-weight: 950;
  text-align: right;
}

.player-profile-matchup-bar {
  display: flex;
  width: 0;
  height: 21px;
  min-width: 0;
  background: var(--player-chart-loss);
  border: 1px solid var(--player-chart-loss-border);
  transition: width 1500ms cubic-bezier(0.16, 1, 0.3, 1);
}

.player-profile-showcase.is-chart-ready .player-profile-matchup-bar {
  width: var(--target-bar-width);
}

.player-profile-volume-track {
  display: block;
  width: 100%;
  min-width: 0;
}

.player-profile-matchup-bar span {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  padding-left: 15px;
  overflow: hidden;
  color: #061022;
  font-size: 0.84rem;
  font-weight: 900;
  white-space: nowrap;
}

.player-profile-matchup-bar .is-win {
  background: var(--player-chart-win);
}

.player-profile-matchup-bar .is-loss {
  background: var(--player-chart-loss);
}

.player-profile-matchup-axis {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  margin-top: 18px;
  color: rgba(255, 255, 255, 0.76);
  font-size: 0.78rem;
  font-weight: 800;
}

.player-profile-matchup-axis > span {
  text-align: right;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.player-profile-matchup-axis > div,
.player-profile-matchup-axis-line {
  display: flex;
  justify-content: space-between;
  min-width: 0;
}

.player-profile-matchup-axis strong {
  color: rgba(255, 255, 255, 0.88);
  font-size: 0.78rem;
  font-weight: 850;
}

.player-profile-matchup-axis-line {
  margin: 5px 0 0 62px;
  border-top: 1px solid rgba(255, 255, 255, 0.3);
}

.player-profile-matchup-axis-line i {
  width: 1px;
  height: 6px;
  background: rgba(255, 255, 255, 0.36);
  transform: translateY(-1px);
}

.player-profile-map-results {
  margin-top: 48px;
  padding: 34px 28px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.42);
}

.player-profile-map-results h2 {
  margin: 0 0 24px;
  padding-left: 16px;
  color: #fff;
  font-size: 1.25rem;
  font-weight: 950;
}

.player-profile-map-table {
  overflow-x: auto;
  color: #fff;
}

.player-profile-map-table__head,
.player-profile-map-table__row {
  display: grid;
  grid-template-columns: minmax(150px, 1.05fr) minmax(56px, 0.32fr) minmax(56px, 0.32fr) minmax(56px, 0.32fr) minmax(72px, 0.38fr) minmax(260px, 1.55fr);
  align-items: stretch;
  min-width: 760px;
}

.player-profile-map-table__head {
  color: rgba(255, 255, 255, 0.76);
  font-size: 0.95rem;
  font-weight: 520;
}

.player-profile-map-table__head > span,
.player-profile-map-table__row > span {
  display: flex;
  align-items: center;
  min-height: 42px;
  padding: 0 12px;
}

.player-profile-map-table__row {
  border-top: 1px solid rgba(255, 255, 255, 0.32);
  font-size: 1rem;
}

.player-profile-map-table__row strong {
  font-weight: 900;
}

.player-profile-map-link {
  position: relative;
  color: #fff;
}

.player-profile-map-table__row > span:not(:first-child) {
  justify-content: center;
  font-weight: 760;
}

.player-profile-map-table[data-active-sort="map"] [data-column="map"],
.player-profile-map-table[data-active-sort="games"] [data-column="games"],
.player-profile-map-table[data-active-sort="wins"] [data-column="wins"],
.player-profile-map-table[data-active-sort="losses"] [data-column="losses"],
.player-profile-map-table[data-active-sort="winrate"] [data-column="winrate"] {
  background: rgba(0, 0, 0, 0.46);
}

.player-profile-sort {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.player-profile-sort__arrows {
  display: inline-grid;
  gap: 1px;
}

.player-profile-sort__arrows button {
  width: 16px;
  height: 12px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  background: transparent;
  color: rgba(255, 255, 255, 0.58);
  cursor: pointer;
  font-size: 0.58rem;
  line-height: 1;
}

.player-profile-sort__arrows button:hover,
.player-profile-sort__arrows button:focus-visible,
.player-profile-map-table[data-active-sort="map"][data-active-direction="asc"] [data-sort-key="map"][data-sort-direction="asc"],
.player-profile-map-table[data-active-sort="map"][data-active-direction="desc"] [data-sort-key="map"][data-sort-direction="desc"],
.player-profile-map-table[data-active-sort="games"][data-active-direction="asc"] [data-sort-key="games"][data-sort-direction="asc"],
.player-profile-map-table[data-active-sort="games"][data-active-direction="desc"] [data-sort-key="games"][data-sort-direction="desc"],
.player-profile-map-table[data-active-sort="wins"][data-active-direction="asc"] [data-sort-key="wins"][data-sort-direction="asc"],
.player-profile-map-table[data-active-sort="wins"][data-active-direction="desc"] [data-sort-key="wins"][data-sort-direction="desc"],
.player-profile-map-table[data-active-sort="losses"][data-active-direction="asc"] [data-sort-key="losses"][data-sort-direction="asc"],
.player-profile-map-table[data-active-sort="losses"][data-active-direction="desc"] [data-sort-key="losses"][data-sort-direction="desc"],
.player-profile-map-table[data-active-sort="winrate"][data-active-direction="asc"] [data-sort-key="winrate"][data-sort-direction="asc"],
.player-profile-map-table[data-active-sort="winrate"][data-active-direction="desc"] [data-sort-key="winrate"][data-sort-direction="desc"] {
  color: #fff;
}

.player-profile-map-result-bar {
  justify-content: stretch !important;
  gap: 0;
  padding-inline: 18px !important;
}

.player-profile-map-result-bar__inner {
  position: relative;
  display: flex;
  width: 0;
  height: 8px;
  min-width: 0;
  transition: width 1500ms cubic-bezier(0.16, 1, 0.3, 1);
}

.player-profile-map-result-bar__inner::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--player-chart-loss-border);
  z-index: 2;
}

.player-profile-showcase.is-chart-ready .player-profile-map-result-bar__inner {
  width: var(--target-bar-width);
}

@media (prefers-reduced-motion: reduce) {
  .player-profile-matchup-bar,
  .player-profile-map-result-bar__inner {
    transition: none;
  }
}

.player-profile-map-result-bar i {
  display: block;
  height: 100%;
}

.player-profile-map-result-bar .is-win {
  background: var(--player-chart-win);
}

.player-profile-map-result-bar .is-loss {
  background: var(--player-chart-loss);
  border: 1px solid var(--player-chart-loss-border);
  border-left: 0;
}

.player-profile-map-axis {
  display: grid;
  grid-template-columns: minmax(150px, 1.05fr) minmax(56px, 0.32fr) minmax(56px, 0.32fr) minmax(56px, 0.32fr) minmax(72px, 0.38fr) minmax(260px, 1.55fr);
  min-width: 760px;
  align-items: center;
  margin-top: 12px;
  color: rgba(255, 255, 255, 0.76);
  font-size: 0.78rem;
  font-weight: 800;
}

.player-profile-map-axis > span {
  grid-column: 5;
  padding-inline: 12px;
  text-align: right;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.player-profile-map-axis > div {
  grid-column: 6;
  display: flex;
  justify-content: space-between;
  min-width: 0;
  padding-inline: 18px;
}

.player-profile-map-axis strong {
  color: rgba(255, 255, 255, 0.88);
  font-size: 0.78rem;
  font-weight: 850;
}

.player-profile-map-axis-line {
  display: grid;
  grid-template-columns: minmax(150px, 1.05fr) minmax(56px, 0.32fr) minmax(56px, 0.32fr) minmax(56px, 0.32fr) minmax(72px, 0.38fr) minmax(260px, 1.55fr);
  min-width: 760px;
  margin-top: 5px;
}

.player-profile-map-axis-line > div {
  grid-column: 6;
  display: flex;
  justify-content: space-between;
  min-width: 0;
  margin-inline: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.3);
}

.player-profile-map-axis-line i {
  width: 1px;
  height: 6px;
  background: rgba(255, 255, 255, 0.36);
  transform: translateY(-1px);
}

.player-detail-grid > .panel {
  grid-column: 1 / -1;
}

.player-profile-filter-bar,
.player-match-filter {
  align-items: end;
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(280px, 1fr) auto auto;
  margin: 0 0 16px;
}

.player-profile-filter-bar .map-filter,
.player-match-filter .map-filter {
  margin: 0;
}

.player-match-filter .map-filter input {
  border-radius: var(--control-radius);
}

.player-match-filter .button {
  border-radius: var(--control-radius);
}

.player-stat-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-top: 16px;
}

.player-stat-summary div {
  border: 1px solid rgba(123, 161, 219, 0.14);
  border-radius: var(--radius-lg);
  background: rgba(4, 11, 20, 0.58);
  padding: 14px;
}

.player-stat-summary span,
.player-stat-table__row span {
  color: var(--muted);
}

.player-stat-summary span {
  display: block;
  font-size: 0.76rem;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.player-stat-summary strong {
  display: block;
  margin-top: 6px;
  color: var(--text);
  font-size: 1.28rem;
}

.player-points-panel .player-stat-summary {
  grid-template-columns: minmax(0, 1fr);
}

.player-points-panel .player-stat-summary div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}

.player-points-panel .player-stat-summary span,
.player-points-panel .player-stat-summary strong {
  display: inline;
  margin-top: 0;
}

.player-points-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.player-points-panel__header h2 {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.player-points-panel__title {
  min-width: 0;
}

.player-points-panel__title p {
  margin: 6px 0 0;
  max-width: 620px;
  color: var(--text-neutral);
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.45;
}

.player-points-balance {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  color: var(--text-neutral);
  font-size: 0.84rem;
  font-weight: 850;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}

.player-points-balance strong {
  color: var(--text);
  font-size: 1.3rem;
  font-weight: 950;
  letter-spacing: 0;
}

.info-tooltip {
  position: relative;
  display: inline-grid;
  width: 19px;
  height: 19px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.34);
  border-radius: 50%;
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.72rem;
  font-weight: 950;
  line-height: 1;
  cursor: help;
}

.info-tooltip::after {
  content: attr(data-tooltip);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 10px);
  z-index: 30;
  width: min(320px, 80vw);
  padding: 10px 12px;
  background: rgba(4, 11, 20, 0.98);
  border: 1px solid rgba(65, 66, 70, 0.9);
  color: var(--text);
  font-size: 0.78rem;
  font-weight: 650;
  letter-spacing: 0;
  line-height: 1.35;
  text-transform: none;
  transform: translate(-50%, 4px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 140ms ease, transform 140ms ease;
}

.info-tooltip:hover::after,
.info-tooltip:focus-visible::after {
  opacity: 1;
  transform: translate(-50%, 0);
}

.player-stat-breakdowns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 18px;
}

.player-stat-breakdowns h3 {
  margin: 0 0 10px;
}

.player-stat-table {
  display: grid;
  gap: 1px;
  overflow: hidden;
  border: 1px solid rgba(123, 161, 219, 0.14);
  border-radius: var(--radius-lg);
  background: rgba(123, 161, 219, 0.1);
}

.player-stat-table__row {
  display: grid;
  grid-template-columns: minmax(150px, 1.5fr) repeat(4, minmax(70px, 0.7fr));
  gap: 10px;
  align-items: center;
  padding: 11px 13px;
  background: rgba(4, 11, 20, 0.78);
  font-size: 0.9rem;
}

.player-stat-table__row strong {
  min-width: 0;
  overflow-wrap: anywhere;
}

.player-card__portrait,
.detail-hero__portrait {
  background-position: center;
  background-size: cover;
  border-radius: var(--radius-lg);
  min-height: 140px;
}

.player-card__portrait {
  align-self: end;
  width: calc(100% + 34px);
  height: 170px;
  min-height: 0;
  display: block;
  justify-self: start;
  margin-left: -24px;
  object-fit: cover;
  object-position: center 24%;
  border-radius: 0;
  filter: drop-shadow(0 18px 22px rgba(0, 0, 0, 0.38));
  position: relative;
  z-index: 1;
}

.map-detail__preview {
  min-height: 320px;
}

.map-detail-hero {
  display: grid;
  grid-template-columns: minmax(320px, 0.9fr) minmax(0, 1fr);
  gap: var(--section-gap);
  align-items: start;
  margin-top: var(--page-top);
  padding: 24px;
  background: var(--surface-panel);
  box-shadow: var(--shadow-panel);
}

.map-detail-hero__preview {
  position: relative;
  border: 1px solid rgba(238, 245, 255, 0.24);
  border-radius: var(--radius-md);
  background: rgba(2, 8, 15, 0.9);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.36);
  overflow: visible;
}

.map-detail-hero__preview img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  border-radius: inherit;
}

.map-detail-path-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: block;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
}

.map-detail-path-overlay[hidden] {
  display: none;
}

.map-detail-path-overlay svg {
  display: block;
  width: 100%;
  height: 100%;
}

.map-detail-hero__hover-preview {
  position: fixed;
  z-index: 80;
  inset: 18px;
  display: grid;
  place-items: center;
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px) scale(0.98);
  transition: opacity 0.16s ease, transform 0.16s ease;
}

.map-detail-hero__hover-preview img {
  display: block;
  width: auto;
  max-width: calc(100vw - 36px);
  max-height: calc(100vh - 36px);
  aspect-ratio: auto;
  object-fit: contain;
  border: 1px solid rgba(238, 245, 255, 0.38);
  border-radius: 10px;
  background: rgba(4, 11, 20, 0.92);
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.48);
}

.map-detail-hero__preview:hover .map-detail-hero__hover-preview,
.map-detail-hero__preview:focus-within .map-detail-hero__hover-preview {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.map-detail-hero__body h1 {
  margin: 0;
  font-size: clamp(2rem, 4.8vw, 4.5rem);
  line-height: 0.95;
  text-transform: uppercase;
}

.map-detail-actions,
.segmented-actions,
.thumbnail-quick-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}

.map-detail-description {
  margin: 16px 0 0;
  color: var(--muted);
  line-height: 1.65;
}

.map-technical-details,
.map-thumbnail-details {
  margin-top: 14px;
}

.map-technical-details summary {
  cursor: pointer;
  color: var(--accent);
  font-weight: 900;
}

.map-technical-details__grid {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 8px 14px;
  margin-top: 10px;
  max-width: 760px;
  color: var(--muted);
  font-size: 0.9rem;
}

.map-technical-details__grid strong {
  min-width: 0;
  color: white;
  overflow-wrap: anywhere;
}

.map-thumbnail-details {
  flex-basis: 100%;
  border: 1px solid rgba(126, 185, 255, 0.16);
  border-radius: var(--radius-lg);
  background: rgba(5, 18, 32, 0.5);
  padding: 14px;
}

.map-thumbnail-details > summary {
  display: inline-flex;
  list-style: none;
  cursor: pointer;
}

.map-thumbnail-details > summary::-webkit-details-marker {
  display: none;
}

.map-thumbnail-details .thumbnail-form {
  margin-top: 14px;
}

.button-badge,
.icon-button__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  border-radius: 999px;
  background: rgba(83, 208, 255, 0.18);
  color: #dff7ff;
  font-size: 0.72rem;
  font-weight: 900;
  padding: 0 6px;
}

.map-directory {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.map-directory-card {
  position: relative;
  display: grid;
  overflow: hidden;
  border: 1px solid rgba(0, 85, 233, 0.82);
  border-radius: 0;
  background:
    linear-gradient(180deg, rgba(0, 85, 233, 0.18), rgba(0, 85, 233, 0.04) 42%, rgba(2, 6, 12, 0.78)),
    rgba(4, 11, 20, 0.78);
  box-shadow: inset 0 0 34px rgba(0, 0, 0, 0.2);
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.map-directory-card:hover,
.map-directory-card:focus-within {
  border-color: #54a2ff;
  box-shadow:
    inset 0 0 38px rgba(0, 0, 0, 0.18),
    0 18px 40px rgba(0, 0, 0, 0.3);
  transform: translateY(-2px);
}

.map-directory-card__preview-link {
  display: block;
  color: inherit;
  text-decoration: none;
  overflow: hidden;
  border-radius: 0;
}

.map-directory-card__preview {
  display: flex;
  position: relative;
  align-items: center;
  justify-content: center;
  height: clamp(150px, 14vw, 220px);
  background-color: rgba(2, 8, 15, 0.9);
  border-radius: 0;
  overflow: hidden;
  contain: paint;
}

.map-directory-card__preview-media {
  display: block;
  width: auto;
  height: 100%;
  max-width: 100%;
  aspect-ratio: var(--map-preview-aspect-ratio, 1 / 1);
}

.map-directory-card__preview-media > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

.map-directory-card__hover-preview {
  position: fixed;
  z-index: 80;
  inset: 18px;
  display: grid;
  place-items: center;
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px) scale(0.98);
  transition: opacity 0.16s ease, transform 0.16s ease;
}

.map-directory-card__hover-preview img {
  display: block;
  max-width: calc(100vw - 36px);
  max-height: calc(100vh - 36px);
  object-fit: contain;
  border: 1px solid rgba(238, 245, 255, 0.38);
  border-radius: 10px;
  background: rgba(4, 11, 20, 0.92);
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.48);
}

.map-directory-card__preview-link:hover .map-directory-card__hover-preview,
.map-directory-card__preview-link:focus-visible .map-directory-card__hover-preview {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.map-directory-card__body {
  display: grid;
  gap: 9px;
  padding: 12px;
}

.map-directory-card__body h2 {
  margin: 0;
  min-width: 0;
  font-size: 0.96rem;
  line-height: 1.05;
  text-transform: uppercase;
}

.map-directory-card__body p {
  margin: 0;
  color: var(--text-neutral);
  font-size: 0.82rem;
}

.map-directory-card__title-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 8px;
  min-width: 0;
}

.map-directory-card__title-row > div {
  min-width: 0;
}

.map-directory-card__title-row h2 a {
  color: var(--text);
  overflow-wrap: anywhere;
}

.map-directory-card__title-row h2 a:hover,
.map-directory-card__title-row h2 a:focus-visible {
  color: var(--accent);
}

.map-download-hint {
  color: var(--text-neutral);
  font-size: 0.82rem;
}

.map-meta-row,
.map-download-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
}

.map-meta-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 6px;
  border: 1px solid rgba(123, 161, 219, 0.12);
  border-radius: 0;
  background: rgba(3, 13, 25, 0.72);
  color: var(--text-neutral);
  font-size: 0.74rem;
}

.map-meta-pill[data-map-rush],
.map-meta-pill[data-map-direct] {
  gap: 4px;
  padding: 2px 3px;
  border: 0;
  background: transparent;
}

.map-meta-pill--button {
  border: 0;
  cursor: pointer;
  font: inherit;
}

.map-meta-pill--button:hover,
.map-meta-pill--button:focus-visible {
  border-color: rgba(84, 162, 255, 0.55);
  background: rgba(0, 85, 233, 0.24);
  color: var(--text);
  outline: none;
}

.map-meta-pill svg,
.map-meta-pill__unit,
.icon-button svg {
  width: 18px;
  height: 18px;
}

.map-meta-pill__unit {
  object-fit: contain;
  image-rendering: auto;
}

.map-meta-pill svg,
.icon-button svg {
  fill: currentColor;
}

.map-description {
  min-height: 3.2em;
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

.map-matchup-summary {
  display: grid;
  gap: 5px;
  min-height: 3.6em;
  margin: 4px 0 0;
}

.map-matchup-summary .empty-text {
  margin: 0;
  align-self: center;
}

.map-matchup-summary__row {
  display: grid;
  grid-template-columns: minmax(68px, 0.72fr) minmax(116px, 1.35fr) minmax(68px, 0.72fr);
  align-items: center;
  gap: 8px;
  color: var(--text-neutral);
  font-size: 0.76rem;
}

.map-matchup-summary__row strong {
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.map-matchup-summary__row span,
.map-matchup-summary__row em {
  font-style: normal;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.map-matchup-summary__side {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  min-width: 0;
}

.map-matchup-summary__side strong {
  width: 2.2ch;
  flex: 0 0 2.2ch;
}

.map-matchup-summary__side em {
  width: 4ch;
  flex: 0 0 4ch;
}

.map-matchup-summary__side--left {
  justify-content: flex-end;
  text-align: right;
}

.map-matchup-summary__side--left strong,
.map-matchup-summary__side--left em {
  text-align: right;
}

.map-matchup-summary__side--right {
  justify-content: flex-start;
  text-align: left;
}

.map-matchup-summary__side--right strong,
.map-matchup-summary__side--right em {
  text-align: left;
}

.map-matchup-summary__side em {
  color: var(--text-neutral);
  font-size: 0.78rem;
}

.map-matchup-summary__chart {
  display: grid;
  grid-template-columns: 18px minmax(58px, 1fr) 18px;
  align-items: center;
  gap: 5px;
  min-width: 0;
}

.map-matchup-summary__race {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.map-matchup-summary__race .race-icon {
  width: 17px;
  height: 17px;
}

.map-matchup-summary__bar {
  display: flex;
  overflow: hidden;
  height: 10px;
  min-width: 58px;
  border: 1px solid rgba(238, 245, 255, 0.18);
  border-radius: 0;
  background: rgba(9, 20, 34, 0.86);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.map-matchup-summary__bar-left,
.map-matchup-summary__bar-right {
  min-width: 2px;
  height: 100%;
  animation: mapMatchupFill 520ms cubic-bezier(0.2, 0.78, 0.16, 1) both;
  transform-origin: left center;
  will-change: transform;
}

.map-matchup-summary__bar-right {
  transform-origin: right center;
}

.map-matchup-summary__bar-left--zerg,
.map-matchup-summary__bar-right--zerg {
  background: linear-gradient(90deg, #b82266, #ef4e9b);
}

.map-matchup-summary__bar-left--protoss,
.map-matchup-summary__bar-right--protoss {
  background: linear-gradient(90deg, #ffcc34, #ffe991);
}

.map-matchup-summary__bar-left--terran,
.map-matchup-summary__bar-right--terran {
  background: linear-gradient(90deg, #2f79c6, #7db8f2);
}

.map-matchup-summary__bar-left--unknown,
.map-matchup-summary__bar-right--unknown {
  background: rgba(238, 245, 255, 0.32);
}

@keyframes mapMatchupFill {
  from {
    transform: scaleX(0);
  }

  to {
    transform: scaleX(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .map-matchup-summary__bar-left,
  .map-matchup-summary__bar-right {
    animation: none;
  }
}

.race-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.45em;
  height: 1.45em;
  vertical-align: -0.22em;
  flex: 0 0 auto;
}

.race-icon img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.45));
}

.race-icon__fallback {
  display: none;
}

.race-pair,
.race-with-text,
.player-card__meta-line {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.race-pair {
  gap: 8px;
}

.race-choice-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(136px, 1fr));
  gap: 10px;
}

.race-choice {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  min-width: 0;
  border: 1px solid var(--border-control);
  border-radius: var(--control-radius);
  background: rgba(5, 14, 25, 0.72);
  color: var(--text);
  cursor: pointer;
  font: inherit;
  padding: 11px 12px;
  text-align: left;
  transition: border-color 0.16s ease, background 0.16s ease, transform 0.16s ease;
}

.race-choice:hover,
.race-choice:focus-visible {
  border-color: rgba(83, 208, 255, 0.45);
  background: rgba(13, 34, 55, 0.82);
  outline: none;
}

.race-choice.is-selected {
  border-color: rgba(238, 245, 255, 0.76);
  background: rgba(238, 245, 255, 0.14);
  box-shadow: inset 0 0 0 1px rgba(238, 245, 255, 0.12);
}

.race-choice:disabled {
  cursor: not-allowed;
  opacity: 0.58;
}

.race-choice__content {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  font-weight: 800;
}

.race-pair__vs {
  color: var(--muted);
  font-weight: 900;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.map-version-strip {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 8px;
  scrollbar-color: rgba(238, 245, 255, 0.42) rgba(4, 11, 20, 0.68);
  scrollbar-width: thin;
}

.map-version-strip::-webkit-scrollbar {
  height: 8px;
}

.map-version-strip::-webkit-scrollbar-track {
  border-radius: 999px;
  background: rgba(4, 11, 20, 0.68);
  box-shadow: inset 0 0 0 1px rgba(123, 161, 219, 0.08);
}

.map-version-strip::-webkit-scrollbar-thumb {
  border: 2px solid rgba(4, 11, 20, 0.68);
  border-radius: 999px;
  background:
    linear-gradient(90deg, rgba(238, 245, 255, 0.78), rgba(83, 208, 255, 0.55));
}

.map-version-strip::-webkit-scrollbar-thumb:hover {
  background:
    linear-gradient(90deg, rgba(238, 245, 255, 0.95), rgba(83, 208, 255, 0.75));
}

.map-version-label {
  margin: 2px 0 -4px;
  color: var(--text-neutral);
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.map-version-tile {
  width: 74px;
  flex: 0 0 auto;
  border: 1px solid rgba(123, 161, 219, 0.16);
  border-radius: 10px;
  background: rgba(12, 24, 40, 0.82);
  color: var(--text);
  cursor: pointer;
  padding: 6px;
  text-align: center;
}

.map-version-tile span {
  display: block;
  aspect-ratio: 1 / 1;
  border-radius: 6px;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  background-color: rgba(2, 8, 15, 0.86);
}

.map-version-tile strong {
  display: block;
  margin-top: 5px;
  font-size: 0.76rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.map-version-tile em,
.map-version-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: max-content;
  margin-top: 4px;
  border: 1px solid rgba(83, 208, 255, 0.34);
  border-radius: 999px;
  background: rgba(83, 208, 255, 0.12);
  color: #92e7ff;
  font-size: 0.58rem;
  font-style: normal;
  font-weight: 900;
  letter-spacing: 0.08em;
  line-height: 1;
  padding: 3px 6px;
  text-transform: uppercase;
}

.map-version-tile em {
  margin-inline: auto;
}

.map-version-badge {
  margin-left: 6px;
  vertical-align: middle;
}

.map-version-tile.is-active {
  border-color: rgba(238, 245, 255, 0.72);
  box-shadow: 0 0 0 2px rgba(238, 245, 255, 0.16);
}

.map-filter {
  display: grid;
  gap: 6px;
  min-width: 0;
  color: var(--text-neutral);
}

.map-filter-panel {
  display: grid;
  grid-template-columns: minmax(190px, 1.5fr) repeat(4, minmax(96px, 0.75fr)) minmax(138px, 0.9fr);
  align-items: end;
  gap: 8px;
  width: 100%;
}

.map-sort-panel {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: end;
  gap: 8px;
  width: 100%;
  margin: 0;
}

.map-sort-panel .map-filter {
  width: 100%;
}

.map-directory-shell > .map-filter-panel .map-filter:not(.map-filter--checkbox) > span,
.map-directory-shell > .map-sort-panel .map-filter > span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

.map-filter input,
.map-filter select {
  width: 100%;
  border: 1px solid rgba(123, 161, 219, 0.2);
  border-radius: var(--control-radius);
  background: rgba(4, 11, 20, 0.76);
  color: var(--text);
  padding: 11px 13px;
}

.map-filter--checkbox {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 43px;
  padding: 0 11px;
  border: 1px solid rgba(123, 161, 219, 0.2);
  border-radius: var(--control-radius);
  background: rgba(4, 11, 20, 0.76);
  color: var(--text);
  font-weight: 800;
  line-height: 1.1;
}

.map-filter--checkbox input[type="checkbox"] {
  width: 18px;
  min-width: 18px;
  max-width: 18px;
  height: 18px;
  min-height: 18px;
  max-height: 18px;
  padding: 0;
  box-shadow: none;
}

.button--compact {
  min-width: 42px;
  min-height: 42px;
  padding: 9px 12px;
  text-align: center;
}

.map-load-more {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 14px;
  padding: 22px;
}

.map-pagination-bar,
.competition-pagination-bar {
  display: grid;
  grid-template-columns: minmax(160px, 1fr) auto minmax(160px, 1fr);
  gap: 18px;
  align-items: center;
  margin-top: 22px;
}

.competition-pagination-bar {
  padding: 22px;
}

.map-pagination-bar .pagination,
.competition-pagination-bar .pagination {
  grid-column: 2;
  margin: 0;
}

.map-pagination-bar #map-results-text,
.competition-pagination-bar #competition-results-text {
  justify-self: start;
  margin: 0;
  color: var(--text-neutral);
}

.map-detail-version-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 14px;
}

.map-detail-version-tile {
  display: grid;
  align-content: start;
  gap: 9px;
  min-width: 0;
  padding: 10px;
  border: 1px solid rgba(123, 161, 219, 0.16);
  border-radius: 12px;
  background: rgba(7, 17, 30, 0.72);
  color: var(--text);
  text-decoration: none;
}

.map-detail-version-tile__preview {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 8px;
  background: rgba(2, 8, 15, 0.88);
}

.map-detail-version-tile__preview > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.map-detail-version-tile strong,
.map-detail-version-tile > span:not(.map-detail-version-tile__preview) {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.map-detail-version-tile__hover-preview {
  position: fixed;
  z-index: 85;
  inset: 18px;
  display: grid;
  place-items: center;
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px) scale(0.98);
  transition: opacity 0.16s ease, transform 0.16s ease;
}

.map-detail-version-tile__hover-preview img {
  display: block;
  max-width: calc(100vw - 36px);
  max-height: calc(100vh - 36px);
  object-fit: contain;
  border: 1px solid rgba(238, 245, 255, 0.38);
  border-radius: 10px;
  background: rgba(4, 11, 20, 0.92);
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.48);
}

.map-detail-version-tile__preview:hover .map-detail-version-tile__hover-preview,
.map-detail-version-tile:focus-visible .map-detail-version-tile__hover-preview {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.map-detail-version-tile span {
  color: var(--muted);
  font-size: 0.82rem;
}

.map-detail-version-tile.is-active,
.segmented-actions .is-active {
  border-color: rgba(238, 245, 255, 0.66);
  box-shadow: 0 0 0 2px rgba(238, 245, 255, 0.12);
}

.map-stat-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: 18px 0;
}

.map-stat-summary div {
  padding: 16px;
  border: 1px solid rgba(123, 161, 219, 0.14);
  border-radius: var(--radius-lg);
  background: rgba(4, 11, 20, 0.58);
}

.map-stat-summary span,
.table-like__head {
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.map-stat-summary strong {
  display: block;
  margin-top: 6px;
  font-size: 1.45rem;
}

.map-distance-summary {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.map-distance-unit {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
}

.map-distance-unit img {
  width: 30px;
  height: 30px;
  object-fit: contain;
  image-rendering: pixelated;
}

.map-stat-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(280px, 0.9fr);
  gap: 18px;
}

.table-like {
  display: grid;
  gap: 1px;
  overflow: hidden;
  border: 1px solid rgba(123, 161, 219, 0.14);
  border-radius: var(--radius-lg);
  background: rgba(123, 161, 219, 0.12);
}

.table-like__head,
.table-like__row {
  display: grid;
  grid-template-columns: 1.1fr 0.7fr 0.9fr 1fr;
  gap: 10px;
  align-items: center;
  padding: 11px 13px;
  background: rgba(4, 11, 20, 0.78);
}

.table-like__row {
  color: var(--text);
}

.table-like__row:hover {
  background: rgba(16, 34, 53, 0.88);
}

.table-like--games .table-like__head,
.table-like--games .table-like__row {
  grid-template-columns: minmax(180px, 1.4fr) minmax(140px, 1fr) 110px 110px 90px minmax(150px, 1fr);
}

.table-like--games .table-like__row--missing-replay > span:nth-child(5),
.table-like--games .table-like__row--missing-replay > span:nth-child(6),
.table-like--games .table-like__row--missing-replay > span:nth-child(7) {
  display: none;
}

.table-like__missing-replay-note {
  grid-column: 4 / 7;
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(238, 245, 255, 0.72);
  font-weight: 700;
  text-align: center;
}

.duration-bars {
  display: grid;
  gap: 10px;
}

.duration-bar {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  padding: 12px 14px;
  overflow: hidden;
  border: 1px solid rgba(123, 161, 219, 0.14);
  border-radius: var(--radius-lg);
  background: rgba(4, 11, 20, 0.62);
}

.duration-bar span,
.duration-bar strong {
  position: relative;
  z-index: 1;
}

.duration-bar i {
  position: absolute;
  inset: auto auto 0 0;
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(238, 245, 255, 0.95), rgba(83, 208, 255, 0.75));
}

.panel--flush {
  padding: 0;
}

.detail-hero {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: var(--section-gap);
  padding: var(--page-top) 0 0;
}

.detail-hero__portrait {
  min-height: 320px;
}

.page-header {
  margin-top: var(--page-top);
  margin-bottom: 0;
  padding: 26px 24px;
  background: var(--surface-panel);
  box-shadow: var(--shadow-panel);
}

.page-header + .content-grid {
  padding-top: 0;
}

.page-header:has(+ .content-grid),
.page-header:has(+ .player-directory-shell),
.page-header:has(+ .competition-directory-shell),
.page-header:has(+ .map-directory-shell),
.page-header:has(+ .map-detail-hero),
.page-header:has(+ .stream-directory),
.page-header:has(+ .legal-document) {
  background: rgba(31, 32, 38, 0.8);
  box-shadow: none;
  padding-bottom: 12px;
}

.page-header:has(+ .map-directory-shell) {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding-top: 18px;
  padding-bottom: 8px;
}

.page-header:has(+ .map-directory-shell) > div:first-child {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 16px;
  min-width: 0;
}

.page-header + .content-grid > .panel:first-child,
.page-header + .player-directory-shell,
.page-header + .competition-directory-shell,
.page-header + .map-directory-shell,
.page-header + .map-detail-hero,
.page-header + .legal-document {
  background: rgba(31, 32, 38, 0.8);
  box-shadow: none;
  padding-top: 12px;
}

.page-header + .player-directory-shell,
.page-header + .competition-directory-shell,
.page-header + .map-directory-shell,
.page-header + .map-detail-hero,
.page-header + .legal-document {
  margin-top: 0;
}

.page-header + .stream-directory {
  padding-top: 0;
}

.page-header--compact {
  padding-top: 26px;
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 18px;
}

.page-header--catalog {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
}

.page-header--catalog .page-header__actions {
  justify-content: flex-end;
  margin-top: 0;
}

.page-header--catalog .map-filter-panel,
.page-header--catalog .admin-notice {
  grid-column: 1 / -1;
}

.page-header--map-directory p,
.page-header--catalog p {
  color: var(--text-neutral);
}

.page-header--competition-detail {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 420px);
  align-items: start;
  gap: 24px;
}

.page-header--competition-detail > .hero__meta {
  grid-column: 1 / -1;
}

.competition-detail-hero-image {
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(55, 128, 255, 0.55);
  background: #000;
  box-shadow: var(--shadow-panel);
}

.competition-detail-hero-image img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 7;
  object-fit: cover;
}

.page-header__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-top: 10px;
}

.page-header > :first-child > h1,
.page-header > h1,
.detail-hero__body > h1,
.map-detail-hero__body > h1 {
  margin-top: 0;
}

.page-header > :first-child > :last-child,
.page-header > :last-child,
.detail-hero__body > :last-child,
.map-detail-hero__body > :last-child,
.panel__header > :last-child {
  margin-bottom: 0;
}

.page-header--notice,
.admin-notice {
  margin-top: 18px;
  margin-inline: auto;
  padding: 14px 18px;
  border: 1px solid rgba(83, 208, 255, 0.28);
  border-radius: var(--radius-lg);
  background: rgba(16, 34, 53, 0.65);
}

.panel > .admin-notice {
  width: auto;
  margin-inline: 0;
}

.page-header--notice p,
.admin-notice p {
  margin: 0;
}

.detail-grid {
  align-items: start;
}

.detail-grid .panel {
  min-width: 0;
}

.competition-card {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 14px;
  color: inherit;
  text-decoration: none;
}

.competition-card:hover {
  border-color: rgba(83, 208, 255, 0.38);
}

.competition-card__badge img {
  width: 48px;
}

.competition-directory-shell,
.map-directory-shell {
  width: min(calc(100% - 32px), var(--max));
  margin: var(--section-gap) auto var(--page-bottom);
  padding: 28px 26px 140px;
  background: rgba(31, 32, 38, 0.8);
  box-shadow: var(--shadow-panel);
}

.map-directory-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, 0.42fr);
  gap: 14px 10px;
  align-items: end;
}

.competition-directory-toolbar {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 18px;
}

.competition-directory-toolbar form {
  width: min(100%, 390px);
}

.competition-directory-filter {
  width: min(100%, 390px);
  flex: 0 1 390px;
}

.competition-directory-toolbar label,
.competition-directory-filter label {
  display: block;
}

.competition-directory-toolbar select,
.competition-directory-filter select {
  width: 100%;
  min-height: 46px;
  border: 1px solid rgba(63, 111, 184, 0.42);
  border-radius: var(--radius-md);
  background: rgba(2, 9, 17, 0.86);
  color: #fff;
  font-weight: 800;
}

.competition-directory-panel {
  overflow: visible;
}

.map-directory-shell > .panel {
  grid-column: 1 / -1;
  padding: 0;
  background: transparent;
  box-shadow: none;
}

.page-header + .map-directory-shell {
  padding-top: 8px;
}

.map-directory-shell > .map-filter-panel {
  margin-bottom: 0;
}

@media (max-width: 720px) {
  .page-header--competition-detail {
    grid-template-columns: 1fr;
  }

  .competition-directory-shell,
  .map-directory-shell {
    width: min(100% - 32px, var(--max));
    padding: 22px 16px 80px;
  }

  .competition-directory-toolbar {
    justify-content: stretch;
  }

  .competition-directory-toolbar form {
    width: 100%;
  }

  .competition-directory {
    grid-template-columns: 1fr;
  }
}

.competition-directory {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.competition-directory-card {
  display: grid;
  min-width: 0;
  min-height: 404px;
  border: 1px solid rgba(38, 122, 255, 0.88);
  background: #000;
  color: #fff;
  text-decoration: none;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.competition-directory-card:hover,
.competition-directory-card:focus-visible {
  border-color: rgba(120, 184, 255, 0.98);
  box-shadow: 0 18px 36px rgba(2, 8, 15, 0.28);
}

.competition-directory-card--draft {
  border-color: rgba(255, 83, 83, 0.82);
}

.competition-directory-card--draft:hover,
.competition-directory-card--draft:focus-visible {
  border-color: rgba(255, 126, 126, 0.98);
}

.competition-directory-card:hover h3,
.competition-directory-card:focus-visible h3 {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

.competition-directory-card__image-wrap {
  display: block;
  aspect-ratio: 16 / 7;
  overflow: hidden;
  background: linear-gradient(135deg, rgba(16, 52, 124, 0.9), rgba(25, 111, 255, 0.72));
}

.competition-directory-card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.competition-directory-card__body {
  display: grid;
  gap: 14px;
  padding: 24px 18px 14px;
}

.competition-directory-card__eyebrow {
  color: rgba(127, 181, 255, 0.92);
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.14em;
  line-height: 1;
  text-transform: uppercase;
}

.competition-directory-card__draft-badge {
  justify-self: start;
  border: 1px solid rgba(255, 83, 83, 0.74);
  background: rgba(96, 15, 22, 0.88);
  color: #ffb8b8;
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  line-height: 1;
  padding: 7px 9px;
  text-transform: uppercase;
}

.competition-directory-card h3 {
  margin: 0;
  color: #fff;
  font-size: clamp(1.48rem, 1.7vw, 2rem);
  line-height: 1.12;
  text-transform: uppercase;
}

.competition-directory-card p {
  display: -webkit-box;
  overflow: hidden;
  margin: 0;
  color: rgba(244, 248, 255, 0.94);
  font-size: 1rem;
  line-height: 1.35;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
}

.competition-directory-card__date {
  align-self: end;
  margin-top: auto;
  color: #fff;
  font-size: 1.02rem;
  font-weight: 400;
}

.competition-directory-card__meta {
  color: var(--text-neutral);
  font-size: 0.9rem;
  font-weight: 800;
}

.competition-season-stage-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.competition-season-stage-card {
  min-height: 360px;
}

.season-page {
  display: grid;
  gap: 0;
  width: min(calc(100% - 32px), var(--max));
  margin: var(--page-top) auto 80px;
}

.season-hero {
  display: grid;
  background: linear-gradient(135deg, rgba(16, 22, 38, 0.98), rgba(7, 12, 24, 0.98));
  box-shadow: 0 26px 70px rgba(0, 0, 0, 0.32);
}

.season-hero__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 26px 24px 12px;
}

.season-hero__eyebrow {
  margin: 0 0 6px;
  color: rgba(155, 188, 238, 0.84);
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.season-hero h1 {
  margin: 0;
  color: #fff;
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 2.35vw, 2.35rem);
  line-height: 1.05;
  text-transform: uppercase;
}

.season-jump-select {
  width: min(100%, 340px);
  min-height: 38px;
  padding: 6px 38px 6px 13px;
  border: 1px solid rgba(120, 158, 210, 0.26);
  border-radius: var(--control-radius);
  background: rgba(4, 11, 20, 0.76);
  color: #fff;
  font-size: 0.95rem;
  font-weight: 850;
}

.season-week-select {
  min-width: 220px;
  height: 42px;
  padding: 6px 34px 6px 12px;
  border: 1px solid rgba(120, 158, 210, 0.26);
  border-radius: var(--control-radius);
  background: #050b13;
  color: #fff;
  font-weight: 800;
}

.season-hero__image {
  position: relative;
  display: grid;
  min-height: clamp(240px, 32vw, 470px);
  overflow: hidden;
  place-items: center;
  background-color: #06142c;
  background-position: center;
  background-size: cover;
}

.season-hero__image span {
  position: relative;
  z-index: 1;
  display: none;
  color: rgba(255, 255, 255, 0.08);
  font-family: var(--font-display);
  font-size: clamp(9rem, 18vw, 18rem);
  font-weight: 1000;
  letter-spacing: -0.08em;
  line-height: 1;
  text-transform: uppercase;
}

.season-hero__logo {
  position: absolute;
  top: 38px;
  left: 38px;
  z-index: 2;
  width: min(260px, 38vw);
  height: auto;
  filter: drop-shadow(0 16px 28px rgba(0, 0, 0, 0.42));
}

.season-tabs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0;
  min-height: 70px;
  padding: 0 34px;
  background: #030405;
}

.season-tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: 70px;
  padding: 0 22px;
  border: 0;
  background: transparent;
  color: rgba(255, 255, 255, 0.64);
  cursor: pointer;
  font-family: var(--font-display);
  font-size: 1.18rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-decoration: none;
  text-transform: uppercase;
}

.season-tab:not(:last-child)::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  width: 1px;
  height: 26px;
  background: rgba(255, 255, 255, 0.28);
  transform: translateY(-50%);
}

.season-tab:first-child {
  padding-left: 0;
}

.season-tab:hover,
.season-tab:focus-visible {
  color: #fff;
  text-decoration: none;
}

.season-tab.is-active {
  color: #fff;
  font-weight: 900;
  text-decoration: none;
}

.season-tab__label {
  display: inline-block;
  min-width: 0;
}

.season-tab__label::after {
  content: attr(data-label);
  display: block;
  height: 0;
  overflow: hidden;
  font-weight: 900;
  visibility: hidden;
}

.season-tab:hover::after,
.season-tab:focus-visible::after {
  content: "";
  position: absolute;
  right: 18px;
  bottom: 14px;
  left: 18px;
  height: 3px;
  background: var(--accent);
}

.season-tab:first-child:hover::after,
.season-tab:first-child:focus-visible::after {
  left: 0;
}

.season-content-card {
  padding: 34px 34px 52px;
  background: linear-gradient(135deg, rgba(16, 22, 38, 0.98), rgba(8, 13, 25, 0.98));
  box-shadow: 0 26px 70px rgba(0, 0, 0, 0.32);
}

.season-week-shell {
  display: grid;
  gap: 34px;
}

.season-week-toolbar {
  display: grid;
  grid-template-columns: 1fr minmax(260px, 1fr) 1fr;
  align-items: center;
  gap: 24px;
  padding-bottom: 26px;
  border-bottom: 1px solid rgba(223, 233, 255, 0.3);
}

.season-week-select {
  justify-self: end;
}

.season-week-map,
.season-week-picker {
  display: grid;
  gap: 8px;
  color: rgba(233, 240, 255, 0.76);
  font-family: var(--font-display);
  font-weight: 900;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.season-week-picker span {
  font-size: 0.78rem;
  color: rgba(173, 192, 224, 0.86);
}

.season-week-picker strong {
  color: #fff;
  font-size: 1.16rem;
}

.season-week-map {
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 12px;
}

.season-week-map__preview {
  display: block;
  width: 58px;
  height: 46px;
  overflow: hidden;
  border: 1px solid rgba(223, 233, 255, 0.24);
  background: #05070d;
}

.season-week-map__preview[hidden] {
  display: none;
}

.season-week-map__preview img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.season-week-map__copy {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.season-week-map__copy > span {
  color: rgba(173, 192, 224, 0.86);
  font-size: 0.78rem;
}

.season-week-map__link {
  color: #fff;
  text-decoration: none;
}

.season-week-map__link strong {
  display: block;
  overflow: hidden;
  color: inherit;
  font-size: 1.16rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.season-week-map__link:not(.is-disabled):hover strong,
.season-week-map__link:not(.is-disabled):focus-visible strong {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

.season-week-map__link.is-disabled {
  cursor: default;
  pointer-events: none;
}

.season-week-picker {
  justify-items: center;
  text-align: center;
}

.season-week-picker div {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.season-week-picker button,
.season-week-nav-button {
  width: 30px;
  height: 30px;
  border: 0;
  background: transparent;
  color: #fff;
  cursor: pointer;
  font: inherit;
  display: inline-grid;
  place-items: center;
  text-decoration: none;
}

.season-week-picker button:disabled,
.season-week-nav-button.is-disabled {
  cursor: default;
  opacity: 0.28;
  pointer-events: none;
}

.season-result-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 34px 34px;
}

.season-result-card {
  position: relative;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 9px;
  align-items: center;
  min-width: 0;
  color: #fff;
  text-decoration: none;
}

.season-result-card:hover,
.season-result-card:focus-visible {
  text-decoration: none;
}

.season-result-card__type {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 82px;
}

.season-result-card__type .match-type-icon {
  width: 31px;
  height: 31px;
}

.season-result-card__players {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 50px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: #202020;
}

.season-result-card__player {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) 26px;
  align-items: center;
  gap: 7px;
  min-width: 0;
  min-height: 44px;
  padding: 4px 9px;
  background: #252525;
  color: rgba(255, 255, 255, 0.72);
  line-height: 1;
}

.season-result-card__players > :nth-child(n + 3) {
  border-top: 1px solid rgba(255, 255, 255, 0.18);
}

.season-result-card__player.is-winner {
  color: #fff;
}

.season-result-card__player > img {
  align-self: center;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  background: #fff;
  object-fit: cover;
  transform: translateY(2px);
}

.season-result-card__player-name {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.season-result-card__player strong {
  overflow: hidden;
  font-family: var(--font-display);
  font-size: 0.94rem;
  font-weight: 900;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.season-result-card__player small {
  color: rgba(255, 255, 255, 0.62);
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
}

.season-result-card__player small.is-positive {
  color: #fff;
}

.season-result-card__player small.is-negative {
  color: rgba(255, 255, 255, 0.52);
}

.season-result-card__player .race-icon {
  align-self: center;
  justify-self: center;
  width: 26px;
  height: 26px;
}

.season-result-card__player .race-icon img {
  border-radius: 0;
  background: transparent;
}

.season-result-card__score {
  display: grid;
  grid-row: span 1;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  background: #151515;
  color: #fff;
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 1000;
}

.season-result-card__score.is-winner {
  background: #096df0;
}

.season-result-card__score.is-loser {
  background: #151515;
  color: rgba(255, 255, 255, 0.82);
}

.season-week-tournament {
  display: grid;
  gap: 28px;
  margin-top: 54px;
  padding-top: 58px;
  border-top: 1px solid rgba(223, 233, 255, 0.32);
}

.season-week-tournament__head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
}

.season-week-tournament__head h2 {
  margin: 0;
  color: #fff;
  font-family: var(--font-display);
  font-size: 1.55rem;
  font-weight: 1000;
  text-transform: uppercase;
}

.season-week-tournament__head h2 a {
  color: #fff;
  text-decoration: none;
}

.season-week-tournament__head h2 a:hover,
.season-week-tournament__head h2 a:focus-visible {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.season-week-tournament__head > span {
  color: rgba(177, 196, 225, 0.78);
  font-size: 0.82rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.season-mini-bracket {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(230px, 1fr);
  gap: 84px;
  overflow-x: auto;
  padding: 0 42px 12px;
}

.season-mini-bracket__round {
  display: grid;
  align-content: start;
  gap: 28px;
}

.season-mini-bracket__round h3 {
  margin: 0;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.85);
  color: #161b25;
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: 1000;
  text-transform: uppercase;
}

.season-mini-bracket__matches {
  display: grid;
  gap: 34px;
}

.season-mini-bracket__match {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  background: transparent;
  color: #fff;
  text-decoration: none;
}

.season-mini-bracket__match--labeled {
  align-items: stretch;
  row-gap: 8px;
}

.season-mini-bracket__match-label {
  grid-column: 2;
  min-width: 0;
  padding: 7px 12px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.86);
  color: #161b25;
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 1000;
  line-height: 1;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.season-mini-bracket__match--labeled .season-mini-bracket__type,
.season-mini-bracket__match--labeled .season-mini-bracket__body {
  grid-row: 2;
}

.season-mini-bracket__match:hover,
.season-mini-bracket__match:focus-visible {
  text-decoration: none;
}

.season-mini-bracket__match:hover .season-mini-bracket__body,
.season-mini-bracket__match:focus-visible .season-mini-bracket__body {
  border-color: rgba(38, 128, 255, 0.78);
}

.season-mini-bracket__type {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 84px;
}

.season-mini-bracket__type .match-type-icon {
  width: 25px;
  height: 25px;
}

.season-mini-bracket__body {
  display: grid;
  min-width: 0;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: #202020;
}

.season-mini-bracket__player {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) 24px 44px;
  align-items: center;
  min-height: 42px;
  background: #252525;
  color: rgba(255, 255, 255, 0.66);
}

.season-mini-bracket__player.is-winner {
  color: #fff;
}

.season-mini-bracket__player > img {
  width: 28px;
  height: 28px;
  margin-left: 6px;
  border-radius: 999px;
  background: #fff;
  object-fit: cover;
}

.season-mini-bracket__player strong {
  overflow: hidden;
  padding: 0 10px;
  font-family: var(--font-display);
  font-size: 0.9rem;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.season-mini-bracket__player .race-icon {
  width: 22px;
  height: 22px;
  justify-self: center;
}

.season-mini-bracket__player .race-icon img {
  width: 100%;
  height: 100%;
  margin: 0;
  border-radius: 0;
  background: transparent;
  object-fit: contain;
}

.season-mini-bracket__player .season-mini-bracket__score {
  display: grid;
  height: 100%;
  place-items: center;
  background: #151515;
  font-family: var(--font-display);
  font-size: 1.16rem;
  font-weight: 1000;
}

.season-mini-bracket__player.is-winner .season-mini-bracket__score {
  background: #096df0;
}

.season-stage-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
}

.season-stage-card {
  display: grid;
  gap: 8px;
  padding: 18px;
  border: 1px solid rgba(120, 158, 210, 0.2);
  background: rgba(0, 0, 0, 0.24);
  color: #fff;
  text-decoration: none;
}

.season-stage-card span,
.season-stage-card small {
  color: rgba(177, 196, 225, 0.82);
  font-weight: 800;
}

.season-stage-card strong {
  font-family: var(--font-display);
  font-size: 1.1rem;
  text-transform: uppercase;
}

.season-stage-card:hover,
.season-stage-card:focus-visible {
  border-color: rgba(36, 126, 255, 0.8);
  text-decoration: none;
}

.season-stage-layout {
  padding-top: 28px;
}

.season-stage-block-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 38px 48px;
  align-items: start;
}

.season-stage-block-grid--dense {
  gap: 34px;
}

.season-stage-block {
  display: grid;
  gap: 18px;
  min-width: 0;
}

.season-stage-block--wide {
  grid-column: 1 / -1;
  justify-self: stretch;
}

.season-stage-block__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.season-stage-block__header h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.02rem;
  font-weight: 1000;
  line-height: 1.1;
  text-transform: uppercase;
}

.season-stage-block__header h2 a {
  color: #fff;
  text-decoration: none;
}

.season-stage-block__header h2 a:hover,
.season-stage-block__header h2 a:focus-visible {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

.season-stage-block__header p {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  margin: 7px 0 0;
  color: rgba(177, 196, 225, 0.72);
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.season-stage-block__recording {
  display: grid;
  flex: 0 0 auto;
  width: 34px;
  height: 26px;
  place-items: center;
  border-radius: 5px;
  background: #ef3333;
  color: #fff;
  font-size: 0.72rem;
  text-decoration: none;
}

.season-stage-block__recording:hover,
.season-stage-block__recording:focus-visible {
  background: #ff4c4c;
  text-decoration: none;
}

.season-stage-standings {
  overflow-x: auto;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(6, 8, 14, 0.42);
}

.season-stage-standings table {
  width: 100%;
  min-width: 420px;
  border-collapse: collapse;
}

.season-stage-standings th,
.season-stage-standings td {
  height: 48px;
  padding: 0 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
  color: rgba(255, 255, 255, 0.86);
  font-family: var(--font-display);
  font-weight: 900;
  text-align: center;
}

.season-stage-standings th {
  height: 36px;
  background: #252525;
  color: rgba(255, 255, 255, 0.58);
  font-size: 0.8rem;
  text-transform: uppercase;
}

.season-stage-standings td:nth-child(2),
.season-stage-standings th:nth-child(2) {
  text-align: left;
}

.season-stage-standings tbody tr:nth-child(-n + 2) {
  background: #096df0;
}

.season-stage-standings tbody tr:last-child td {
  border-bottom: 0;
}

.season-stage-standings__player {
  display: inline-grid;
  grid-template-columns: 30px minmax(0, auto) 22px;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  color: inherit;
  text-decoration: none;
}

.season-stage-standings__player:hover span,
.season-stage-standings__player:focus-visible span {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

.season-stage-standings__player > img {
  width: 30px;
  height: 30px;
  border-radius: 999px;
  background: #fff;
  object-fit: cover;
}

.season-stage-standings__player span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.season-stage-standings__player .race-icon {
  width: 22px;
  height: 22px;
}

.season-stage-standings__player .race-icon img {
  width: 100%;
  height: 100%;
  border-radius: 0;
  background: transparent;
  object-fit: contain;
}

.season-stage-matches-toggle {
  display: grid;
  gap: 16px;
  min-width: 0;
}

.season-stage-standings + .season-stage-matches-toggle {
  margin-top: -18px;
}

.season-stage-matches-toggle > summary {
  display: inline-flex;
  width: 100%;
  min-height: 34px;
  align-items: center;
  padding: 0 16px;
  border: 1px solid rgba(120, 158, 210, 0.34);
  background: rgba(5, 10, 20, 0.42);
  color: #fff;
  cursor: pointer;
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: 900;
  list-style: none;
  text-transform: uppercase;
}

.season-stage-matches-toggle > summary::-webkit-details-marker {
  display: none;
}

.season-stage-matches-toggle > summary::after {
  content: "▾";
  margin-left: auto;
  color: rgba(152, 188, 238, 0.88);
  font-size: 0.9rem;
}

.season-stage-matches-toggle[open] > summary::after {
  transform: rotate(180deg);
}

.season-stage-matches-toggle > summary:hover,
.season-stage-matches-toggle > summary:focus-visible {
  border-color: rgba(38, 128, 255, 0.75);
  background: rgba(17, 34, 62, 0.58);
}

.season-stage-matches-toggle--always-open > summary {
  display: none;
}

.season-stage-matches-toggle__body {
  min-width: 0;
}

.season-mini-bracket--stage {
  grid-auto-flow: row;
  grid-auto-columns: unset;
  grid-template-columns: 1fr;
  gap: 24px;
  overflow-x: visible;
  padding: 10px 0 6px;
}

.season-mini-bracket--stage .season-mini-bracket__round {
  gap: 14px;
}

.season-mini-bracket--stage .season-mini-bracket__round h3 {
  display: none;
}

.season-mini-bracket--stage .season-mini-bracket__matches {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 22px;
}

.season-mini-bracket--stage .season-mini-bracket__match:only-child {
  grid-column: 1 / -1;
  justify-self: center;
  width: min(236px, 100%);
}

.season-stage-block--wide .season-mini-bracket--stage {
  grid-auto-flow: column;
  grid-template-columns: none;
  grid-auto-columns: minmax(220px, 1fr);
  gap: 74px;
  overflow-x: auto;
  padding-inline: 40px;
}

.season-stage-block--wide .season-mini-bracket--stage .season-mini-bracket__matches {
  grid-template-columns: 1fr;
  gap: 34px;
}

.season-stage-block--wide .season-mini-bracket--stage .season-mini-bracket__match:only-child {
  grid-column: auto;
  justify-self: stretch;
  width: auto;
}

.season-stage-block--wide .season-mini-bracket--stage .season-mini-bracket__round h3 {
  display: block;
}

.season-result-grid--stage {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}

.season-stage-block--wide .season-result-grid--stage {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.season-rules-card {
  display: grid;
  gap: 14px;
  color: rgba(244, 248, 255, 0.9);
  font-size: 1.02rem;
  line-height: 1.65;
}

.season-rules-card h2,
.season-rules-card h3 {
  margin: 0;
  color: #fff;
  font-family: var(--font-display);
  text-transform: uppercase;
}

.season-rules-card p {
  margin: 0;
}

.season-rules-card__meta {
  color: rgba(158, 184, 224, 0.76);
  font-weight: 900;
}

.season-hidden-stage-links {
  display: none;
}

.competition-matches-panel {
  overflow: visible;
}

.competition-tabs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
  border-bottom: 1px solid rgba(137, 177, 223, 0.14);
}

.competition-tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 0 12px;
  border: 0;
  background: transparent;
  color: rgba(244, 248, 255, 0.58);
  cursor: pointer;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 900;
  letter-spacing: 0.02em;
}

.competition-tab::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 2px;
  border-radius: 999px;
  background: var(--accent);
  opacity: 0;
  transform: scaleX(0.65);
  transition: opacity 0.14s ease, transform 0.14s ease;
}

.competition-tab:hover,
.competition-tab:focus-visible,
.competition-tab.is-active {
  color: #fff;
}

.competition-tab.is-active::after {
  opacity: 1;
  transform: scaleX(1);
}

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

.competition-tab-panel.is-active {
  display: block;
}

.competition-match-round-list {
  display: grid;
  gap: 18px;
}

.competition-match-round {
  display: grid;
  gap: 10px;
}

.competition-match-round h3 {
  margin: 0;
  color: rgba(244, 248, 255, 0.86);
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.competition-match-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.competition-match-card {
  position: relative;
  display: grid;
  gap: 7px;
  min-width: 0;
  padding: 12px 14px;
  border: 1px solid rgba(137, 177, 223, 0.11);
  border-radius: 14px;
  background: rgba(4, 12, 22, 0.52);
  color: var(--text);
  text-decoration: none;
  transition: border-color 150ms ease, background 150ms ease, transform 150ms ease;
}

.competition-match-card__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  text-decoration: none;
}

.competition-match-card--interactive:hover,
.competition-match-card--interactive:focus-within {
  border-color: rgba(238, 245, 255, 0.42);
  background: rgba(11, 30, 52, 0.76);
  transform: translateY(-1px);
}

.competition-match-card--player-style {
  gap: 0;
  border-color: rgba(137, 177, 223, 0.14);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0)),
    rgba(15, 15, 17, 0.92);
}

.competition-match-card--player-style.competition-match-card--interactive:hover,
.competition-match-card--player-style.competition-match-card--interactive:focus-within {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0)),
    rgba(18, 18, 20, 0.96);
  transform: none;
}

.competition-match-card--admin-review {
  border-color: rgba(255, 93, 93, 0.4);
  background: linear-gradient(135deg, rgba(95, 19, 28, 0.42), rgba(4, 12, 22, 0.58));
}

.competition-match-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}

.competition-match-card__title {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 7px;
  min-width: 0;
  overflow-wrap: anywhere;
  font-family: var(--font-display);
  font-size: 0.98rem;
  font-weight: 900;
  line-height: 1.18;
}

.competition-match-card__player {
  position: relative;
  z-index: 2;
  color: rgba(238, 245, 255, 0.86);
  text-decoration: none;
}

.competition-match-card__player--winner {
  color: #fff;
}

.competition-match-card__player--loser {
  color: rgba(153, 167, 187, 0.62);
}

.competition-match-card__versus {
  color: rgba(181, 197, 220, 0.58);
  font-size: 0.82em;
}

main a.competition-match-card__player:hover,
main a.competition-match-card__player:focus-visible {
  color: #fff;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

.competition-match-card__score {
  flex: 0 0 auto;
  min-width: 44px;
  padding: 4px 8px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.22);
  color: #fff;
  font-size: 0.9rem;
  line-height: 1;
  text-align: center;
}

main a.competition-match-card__score--link:hover,
main a.competition-match-card__score--link:focus-visible {
  color: #fff;
  text-decoration: none;
  border-color: rgba(255, 255, 255, 0.36);
  background: rgba(255, 255, 255, 0.08);
}

.competition-match-card__meta,
.competition-match-card__summary,
.competition-match-card__status {
  color: rgba(244, 248, 255, 0.72);
  font-size: 0.8rem;
  font-weight: 750;
  line-height: 1.35;
}

.competition-match-card__status {
  color: rgba(255, 255, 255, 0.58);
}

.competition-standings-table-wrap {
  overflow-x: auto;
}

.competition-standings-table {
  width: 100%;
  min-width: 720px;
  border-collapse: collapse;
}

.competition-standings-table th,
.competition-standings-table td {
  padding: 12px 14px;
  border-bottom: 1px solid rgba(137, 177, 223, 0.1);
  color: rgba(244, 248, 255, 0.86);
  text-align: left;
  vertical-align: middle;
}

.competition-standings-table th {
  color: rgba(244, 248, 255, 0.58);
  font-size: 0.76rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.competition-standings-table th.sortable-table__header {
  cursor: pointer;
  user-select: none;
}

.competition-standings-table th.sortable-table__header::after {
  content: "↕";
  margin-left: 6px;
  color: rgba(244, 248, 255, 0.36);
  font-size: 0.72em;
}

.competition-standings-table th.sortable-table__header.is-sorted-asc::after {
  content: "↑";
  color: #fff;
}

.competition-standings-table th.sortable-table__header.is-sorted-desc::after {
  content: "↓";
  color: #fff;
}

.competition-standings-table th.sortable-table__header:focus-visible {
  outline: var(--focus-outline);
  outline-offset: 2px;
}

.competition-standings-table tbody tr:hover {
  background: rgba(11, 30, 52, 0.42);
}

.competition-standings-table__rank {
  width: 72px;
  color: #fff;
  font-weight: 950;
}

.competition-standings-table__player {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #fff;
  font-weight: 900;
  text-decoration: none;
}

.competition-standings-table__player:hover,
.competition-standings-table__player:focus-visible {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

.competition-standings-table__history {
  font-weight: 900;
  letter-spacing: 0.08em;
  white-space: nowrap;
}

.season-rating-panel {
  display: grid;
  gap: 22px;
}

.season-rating-panel__intro {
  display: grid;
  gap: 8px;
  margin-bottom: 18px;
}

.season-rating-panel__intro h2 {
  margin: 0;
  color: #fff;
  font-size: clamp(1.45rem, 3vw, 2.2rem);
  letter-spacing: -0.03em;
}

.season-rating-panel__intro p {
  margin: 0;
  max-width: 760px;
  color: rgba(213, 226, 245, 0.72);
}

.season-rating-table {
  min-width: 840px;
}

.season-standings-panel {
  padding: 32px 34px 64px;
  background: linear-gradient(135deg, rgba(19, 25, 43, 0.98), rgba(9, 13, 24, 0.98));
  box-shadow: none;
}

.season-standings-panel .competition-tab-panel {
  display: block;
}

.season-standings-panel .competition-standings-table-wrap {
  overflow-x: auto;
  border-right: 1px solid rgba(223, 233, 255, 0.26);
  border-left: 1px solid rgba(223, 233, 255, 0.26);
}

.season-standings-panel .season-rating-table:not(.season-rating-table--changes) {
  min-width: 980px;
  border-collapse: collapse;
  font-family: var(--font-display);
}

.season-standings-panel .season-rating-table:not(.season-rating-table--changes) th,
.season-standings-panel .season-rating-table:not(.season-rating-table--changes) td {
  height: 70px;
  padding: 0 22px;
  border-bottom: 1px solid rgba(223, 233, 255, 0.22);
  color: #fff;
  font-size: 0.98rem;
  font-weight: 900;
  text-align: center;
  vertical-align: middle;
}

.season-standings-panel .season-rating-table:not(.season-rating-table--changes) th {
  height: 46px;
  background: #252525;
  color: rgba(255, 255, 255, 0.66);
  font-size: 0.92rem;
  letter-spacing: 0;
  text-transform: none;
}

.season-standings-panel .season-rating-table:not(.season-rating-table--changes) th:nth-child(1),
.season-standings-panel .season-rating-table:not(.season-rating-table--changes) td:nth-child(1),
.season-standings-panel .season-rating-table:not(.season-rating-table--changes) th:nth-child(2),
.season-standings-panel .season-rating-table:not(.season-rating-table--changes) td:nth-child(2) {
  text-align: left;
}

.season-standings-panel .season-rating-table:not(.season-rating-table--changes) th:nth-child(2),
.season-standings-panel .season-rating-table:not(.season-rating-table--changes) td:nth-child(2) {
  border-right: 1px solid rgba(223, 233, 255, 0.26);
}

.season-standings-panel .season-rating-table:not(.season-rating-table--changes) tbody tr {
  background: linear-gradient(90deg, rgba(21, 26, 45, 0.98), rgba(13, 17, 30, 0.98));
}

.season-standings-panel .season-rating-table:not(.season-rating-table--changes) tbody tr:hover {
  background: #096df0;
}

.season-standings-table__rank {
  width: 130px;
  white-space: nowrap;
}

.season-standings-table__rank strong {
  display: inline-block;
  min-width: 24px;
  margin-right: 28px;
  font-size: 1.05rem;
}

.season-standings-table__delta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 28px;
  border-radius: 4px;
  background: #252525;
  color: rgba(255, 255, 255, 0.76);
  font-weight: 1000;
}

.season-standings-panel .competition-standings-table__player {
  gap: 16px;
  color: #fff;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 1000;
  text-transform: uppercase;
}

.season-standings-panel .competition-standings-table__player > img {
  width: 42px;
  height: 42px;
  border-radius: 999px;
  background: #fff;
  object-fit: cover;
}

.season-standings-panel .competition-standings-table__player .race-icon {
  width: 22px;
  height: 22px;
}

.season-standings-panel .competition-standings-table__player:hover,
.season-standings-panel .competition-standings-table__player:focus-visible {
  text-decoration-color: #fff;
}

.season-standings-table__score,
.season-standings-table__rating {
  white-space: nowrap;
}

.season-rating-history {
  margin-top: 28px;
}

.season-rating-history summary {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 0 16px;
  border: 1px solid rgba(223, 233, 255, 0.2);
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.86);
  cursor: pointer;
  font-family: var(--font-display);
  font-weight: 900;
}

.season-rating-history[open] summary {
  margin-bottom: 18px;
}

.season-rating-table--changes {
  min-width: 1180px;
}

.season-rating-delta {
  font-weight: 950;
}

.season-rating-delta--positive {
  color: #8ff0b3 !important;
}

.season-rating-delta--negative {
  color: #ff9cae !important;
}

.season-rating-match-link,
.season-rating-map-link {
  color: #fff;
  text-decoration: none;
}

.season-rating-match-link {
  display: inline-grid;
  gap: 3px;
  font-weight: 800;
}

.season-rating-match-link small {
  color: rgba(213, 226, 245, 0.58);
  font-size: 0.78rem;
  font-weight: 700;
}

.season-rating-match-link:hover,
.season-rating-match-link:focus-visible,
.season-rating-map-link:hover,
.season-rating-map-link:focus-visible {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 4px;
}

.competition-stats-table {
  min-width: 820px;
}

.competition-map-stats-table {
  min-width: 980px;
}

.competition-map-stats-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  color: rgba(244, 248, 255, 0.82);
  cursor: pointer;
  font-size: 0.88rem;
  font-weight: 850;
}

.competition-map-stats-toggle input {
  accent-color: var(--accent);
}

.competition-map-stat-table__map {
  display: inline-grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  max-width: 320px;
  color: #fff;
  text-decoration: none;
}

.competition-map-stat-table__map:hover strong,
.competition-map-stat-table__map:focus-visible strong {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

.competition-map-stat-table__map img,
.competition-map-stat-table__map--unknown > span {
  width: 42px;
  height: 42px;
  object-fit: cover;
  background: rgba(2, 8, 15, 0.9);
}

.competition-map-stat-table__map strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.competition-map-stat-table__matchups {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
}

.competition-map-stat-table__matchups > span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: rgba(244, 248, 255, 0.76);
  font-weight: 850;
  white-space: nowrap;
}

.competition-analytics-section {
  display: grid;
  gap: 12px;
}

.competition-analytics-section + .competition-analytics-section {
  margin-top: 22px;
}

.competition-analytics-section h3 {
  margin: 0;
  color: #fff;
  font-size: 1rem;
  font-weight: 900;
}

.competition-matchup-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 10px;
}

.competition-matchup-card,
.competition-map-stat-card {
  border: 1px solid rgba(137, 177, 223, 0.12);
  background: rgba(4, 12, 22, 0.5);
}

.competition-matchup-card {
  display: grid;
  gap: 6px;
  padding: 12px;
}

.competition-matchup-card strong,
.competition-map-stat-card__matchups span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.competition-matchup-card span,
.competition-matchup-card small,
.competition-map-stat-card__facts,
.competition-map-stat-card__matchups {
  color: rgba(244, 248, 255, 0.72);
  font-size: 0.84rem;
  font-weight: 750;
}

.competition-map-stat-list {
  display: grid;
  gap: 10px;
}

.competition-map-stat-card {
  display: grid;
  grid-template-columns: minmax(180px, 1.2fr) minmax(180px, 1fr) minmax(220px, 1.4fr);
  gap: 12px;
  align-items: center;
  padding: 10px;
}

.competition-map-stat-card__map {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  min-width: 0;
}

.competition-map-stat-card__map img,
.competition-map-stat-card__map--unknown > span {
  width: 48px;
  height: 48px;
  object-fit: cover;
  background: rgba(2, 8, 15, 0.9);
}

.competition-map-stat-card__map strong {
  overflow: hidden;
  color: #fff;
  font-size: 0.92rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.competition-map-stat-card__facts,
.competition-map-stat-card__matchups {
  display: flex;
  flex-wrap: wrap;
  gap: 7px 12px;
}

.competition-map-stat-card__facts strong {
  color: #fff;
}

.match-admin-edit-panel {
  margin-top: 8px;
}

.match-admin-edit-panel summary {
  width: fit-content;
  cursor: pointer;
}

.match-report-form--admin-edit {
  margin-top: 16px;
}

.match-card,
.replay-row,
.game-row,
.stream-admin-row,
.stream-sidebar-row {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: center;
}

.replay-filter-panel {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  align-items: end;
}

.replay-filter-panel__wide {
  grid-column: span 2;
}

.replay-save-filter {
  display: flex;
  gap: 10px;
  align-items: end;
}

.competition-advanced-filter {
  grid-column: 1 / -1;
  margin-top: 2px;
}

.competition-advanced-filter[open] {
  display: grid;
  gap: 12px;
}

.competition-advanced-filter__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  align-items: end;
  padding-top: 4px;
}

.replay-map-picker {
  position: relative;
}

.replay-map-picker__button {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 52px;
  padding: 8px 12px 8px 8px;
  border: 1px solid rgba(123, 161, 219, 0.2);
  border-radius: var(--control-radius);
  background: rgba(4, 11, 20, 0.76);
  color: var(--text);
  cursor: pointer;
  font: inherit;
  text-align: left;
}

.replay-map-picker__button:hover,
.replay-map-picker__button:focus-visible {
  border-color: rgba(238, 245, 255, 0.52);
  outline: 0;
}

.replay-map-picker__button img,
.replay-map-picker__option img,
.replay-map-picker__empty {
  width: 42px;
  height: 42px;
  border: 1px solid rgba(238, 245, 255, 0.18);
  border-radius: 10px;
  background: rgba(2, 8, 15, 0.92);
  object-fit: contain;
}

.replay-map-picker__empty {
  display: block;
  background:
    radial-gradient(circle at 50% 50%, rgba(83, 208, 255, 0.22), transparent 52%),
    rgba(2, 8, 15, 0.92);
}

.replay-map-picker__panel {
  position: absolute;
  z-index: 75;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  display: grid;
  gap: 10px;
  min-width: min(520px, calc(100vw - 48px));
  padding: 12px;
  border: 1px solid rgba(123, 161, 219, 0.28);
  border-radius: var(--radius-lg);
  background: rgba(4, 11, 20, 0.98);
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.42);
}

.replay-map-picker__panel[hidden] {
  display: none;
}

.replay-map-picker__search {
  width: 100%;
  border: 1px solid rgba(123, 161, 219, 0.24);
  border-radius: var(--control-radius);
  background: rgba(2, 8, 15, 0.92);
  color: var(--text);
  padding: 10px 12px;
}

.replay-map-picker__list {
  display: grid;
  gap: 6px;
  max-height: 340px;
  overflow: auto;
  padding-right: 2px;
}

.replay-map-picker__option {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 7px;
  border: 1px solid transparent;
  border-radius: 13px;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  font: inherit;
  text-align: left;
}

.replay-map-picker__option:hover,
.replay-map-picker__option:focus-visible {
  border-color: rgba(238, 245, 255, 0.3);
  background: rgba(13, 38, 64, 0.72);
  outline: 0;
}

.replay-map-picker__option[hidden] {
  display: none;
}

.replay-map-picker__option strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.replay-map-picker__option small {
  display: block;
  color: var(--text-neutral);
  font-size: 0.78rem;
  margin-top: 2px;
}

.replay-map-picker__status {
  margin: 4px 2px 0;
  color: var(--text-neutral);
  font-size: 0.82rem;
}

.replay-map-picker__status[hidden] {
  display: none;
}

.replay-player-picker__portrait,
.replay-player-picker__empty {
  border-radius: 50%;
  background: #fff;
  object-fit: cover;
  object-position: top center;
}

.replay-map-picker__button .replay-player-picker__portrait,
.replay-map-picker__option .replay-player-picker__portrait {
  border-radius: 50%;
  object-fit: cover;
  object-position: top center;
}

.replay-matchup-picker__button,
.replay-matchup-picker__option {
  grid-template-columns: 64px minmax(0, 1fr);
}

.replay-matchup-picker__icons {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 42px;
  min-height: 42px;
}

.replay-matchup-picker__icons .race-icon {
  width: 24px;
  height: 24px;
}

.replay-matchup-picker__button .replay-matchup-picker__icons {
  justify-content: flex-start;
  min-width: 58px;
}

.replay-matchup-picker__option .replay-matchup-picker__icons:empty::before {
  content: "";
  width: 42px;
  height: 42px;
  border: 1px solid rgba(238, 245, 255, 0.18);
  border-radius: 10px;
  background:
    radial-gradient(circle at 50% 50%, rgba(83, 208, 255, 0.22), transparent 52%),
    rgba(2, 8, 15, 0.92);
}

.replay-filter-management {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid rgba(123, 161, 219, 0.14);
}

.replay-filter-management[open] {
  display: grid;
  gap: 12px;
}

.replay-filter-management__summary {
  display: flex;
  width: fit-content;
  max-width: 100%;
  align-items: center;
  gap: 10px;
  min-height: 42px;
  padding: 10px 14px;
  border: 1px solid rgba(123, 161, 219, 0.22);
  border-radius: 999px;
  background: rgba(7, 17, 30, 0.72);
  color: var(--text);
  cursor: pointer;
  list-style: none;
}

.replay-filter-management__summary::-webkit-details-marker {
  display: none;
}

.replay-filter-management__summary::after {
  content: "";
  width: 8px;
  height: 8px;
  border-right: 2px solid rgba(238, 245, 255, 0.9);
  border-bottom: 2px solid rgba(238, 245, 255, 0.9);
  transform: rotate(45deg) translateY(-2px);
  transition: transform 0.16s ease;
}

.replay-filter-management[open] .replay-filter-management__summary::after {
  transform: rotate(225deg) translateY(-2px);
}

.replay-filter-management__summary span {
  font-weight: 850;
}

.replay-filter-management__summary small {
  color: var(--text-neutral);
  font-size: 0.78rem;
}

.replay-save-filter {
  margin-top: 0;
}

.replay-save-filter .map-filter {
  flex: 1;
}

.replay-save-filter--selected {
  padding: 12px;
  border: 1px solid rgba(83, 208, 255, 0.16);
  border-radius: var(--radius-lg);
  background: rgba(83, 208, 255, 0.04);
}

.replay-delete-filter {
  display: flex;
  justify-content: flex-end;
}

.replay-card {
  display: grid;
  grid-template-columns: clamp(170px, 18vw, 230px) minmax(0, 1fr);
  gap: 18px;
  align-items: stretch;
  padding: 18px 20px;
  border: 1px solid rgba(123, 161, 219, 0.14);
  border-radius: var(--radius-md);
  background: rgba(4, 11, 20, 0.56);
}

.replay-card--match-style {
  --replay-list-card-height: 128px;
  grid-template-columns: clamp(150px, 16vw, 210px) minmax(0, 1fr);
  gap: 14px;
  height: var(--replay-list-card-height);
  padding: 0;
  border: 0;
  background: transparent;
}

.replay-card--match-style .replay-card__map {
  height: var(--replay-list-card-height);
  min-height: 0;
}

.replay-card--match-style .replay-map-thumb {
  height: var(--replay-list-card-height);
  min-height: 0;
  border-radius: 0;
}

.replay-card--match-style .replay-map-thumb > img {
  border-radius: 0;
  object-fit: contain;
}

.replay-match-card {
  min-width: 0;
  height: var(--replay-list-card-height);
  border: 1px solid rgba(123, 161, 219, 0.14);
}

.replay-match-card .player-match-card__main {
  grid-template-columns: minmax(170px, 0.8fr) minmax(360px, 560px) minmax(92px, auto);
  gap: 18px;
}

.replay-match-card .player-match-card__competition {
  font-size: 0.9rem;
}

.replay-match-card .player-match-card__download {
  width: 46px;
}

.replay-card h2 {
  margin: 0 0 6px;
  font-size: 1.05rem;
}

.replay-card p {
  margin: 0;
  color: var(--text-neutral);
}

.replay-card__map {
  min-height: 178px;
}

.replay-map-thumb {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  min-height: 178px;
  border: 1px solid rgba(238, 245, 255, 0.24);
  border-radius: var(--radius-md);
  background: rgba(2, 8, 15, 0.9);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}

.replay-map-thumb > img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: var(--radius-sm);
  object-fit: contain;
}

.replay-map-thumb__large {
  position: fixed;
  z-index: 90;
  inset: 18px;
  display: grid;
  place-items: center;
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px) scale(0.98);
  transition: opacity 0.16s ease, transform 0.16s ease;
}

.replay-map-thumb__large img {
  display: block;
  max-width: calc(100vw - 36px);
  max-height: calc(100vh - 36px);
  object-fit: contain;
  border: 1px solid rgba(238, 245, 255, 0.38);
  border-radius: var(--radius-lg);
  background: rgba(4, 11, 20, 0.94);
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.48);
}

.replay-map-thumb:hover .replay-map-thumb__large,
.replay-map-thumb:focus-visible .replay-map-thumb__large {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.replay-card__main {
  min-width: 0;
}

.replay-card__header {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 14px;
}

.replay-card__header h2 a {
  color: var(--text);
}

.replay-card__header h2 a:hover,
.replay-card__header h2 a:focus-visible,
.replay-card__header p a:hover,
.replay-card__header p a:focus-visible {
  color: var(--accent);
}

.replay-versus {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(96px, auto) minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  margin-top: 14px;
  padding: 12px;
  border: 1px solid rgba(123, 161, 219, 0.12);
  border-radius: var(--radius-lg);
  background: rgba(8, 18, 31, 0.62);
}

.replay-versus__center {
  display: grid;
  justify-items: center;
  gap: 3px;
  color: var(--text-neutral);
  font-size: 0.76rem;
  font-weight: 750;
  line-height: 1.25;
  text-align: center;
}

.replay-versus__center > strong {
  color: var(--accent);
  font-size: 0.82rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.replay-team {
  display: grid;
  gap: 4px;
  min-height: 28px;
  align-content: center;
  text-align: center;
}

.replay-team--home {
  justify-items: end;
  text-align: right;
}

.replay-team--away {
  justify-items: start;
  text-align: left;
}

.replay-team a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex-wrap: nowrap;
  color: var(--text);
  font-weight: 850;
  text-decoration: none;
}

.replay-player-avatar {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  border: 1px solid rgba(238, 245, 255, 0.28);
  border-radius: 999px;
  background: #fff;
  object-fit: cover;
  object-position: top center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.28);
}

.replay-team__stats {
  color: var(--text-neutral);
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 1.2;
}

.replay-team a:hover,
.replay-team a:focus-visible {
  color: var(--accent);
  text-decoration: none;
}

.replay-team a:hover .replay-player-name,
.replay-team a:focus-visible .replay-player-name {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

.replay-card__scope {
  margin-top: 9px;
  color: var(--text-neutral);
  font-size: 0.74rem;
  font-weight: 750;
  letter-spacing: 0.02em;
}

.replay-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  overflow: hidden;
  margin: 14px 0 0;
  border: 1px solid rgba(123, 161, 219, 0.14);
  border-radius: var(--radius-lg);
  background: rgba(123, 161, 219, 0.12);
}

.winner-trophy {
  display: inline-flex;
  align-items: center;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.42));
  font-size: 0.95em;
  line-height: 1;
}

.replay-card__details {
  margin-top: 14px;
  border-top: 1px solid rgba(123, 161, 219, 0.14);
  padding-top: 12px;
}

.replay-match-card .replay-card__details {
  position: relative;
  z-index: 2;
  margin: 0;
  padding: 12px 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.045);
  background: rgba(0, 0, 0, 0.18);
}

.replay-card__details > summary {
  cursor: pointer;
  color: var(--accent);
  font-weight: 900;
  letter-spacing: 0.02em;
}

.replay-card__details-content {
  margin-top: 14px;
}

.replay-detail-panel {
  display: grid;
  gap: 14px;
}

.replay-detail-panel__analysis-head {
  display: grid;
  grid-template-columns: minmax(112px, 150px) minmax(0, 1fr);
  gap: 14px;
  align-items: center;
}

.replay-detail-panel__notes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
}

.replay-detail-panel__notes > span,
.replay-detail-panel__notes > a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: rgba(8, 18, 31, 0.72);
  border: 1px solid rgba(123, 161, 219, 0.16);
  border-radius: var(--radius-sharp);
  color: var(--label);
  font-size: 0.78rem;
  font-weight: 760;
  padding: 7px 10px;
}

.replay-detail-panel__notes strong {
  color: var(--muted);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.replay-facts div {
  min-width: 0;
  padding: 10px 12px;
  background: rgba(4, 11, 20, 0.78);
}

.replay-facts dt {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 850;
  letter-spacing: 0.08em;
  margin: 0;
  text-transform: uppercase;
}

.replay-facts dd {
  color: #e8f2ff;
  margin: 4px 0 0;
  overflow-wrap: anywhere;
}

.player-match-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: stretch;
  align-items: stretch;
  gap: 0;
  width: 100%;
  padding: 0;
  overflow: hidden;
  border-radius: 0;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0)),
    rgba(15, 15, 17, 0.92);
}

.player-match-card__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.player-match-card__main {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(190px, 1fr) minmax(430px, 560px) minmax(132px, 1fr);
  gap: 22px;
  align-items: center;
  justify-self: stretch;
  box-sizing: border-box;
  width: 100%;
  min-height: 62px;
  min-width: 0;
  padding: 14px 16px;
  overflow-wrap: normal;
  word-break: normal;
}

.player-match-card__competition {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  color: #fff;
  font-size: 0.98rem;
  font-weight: 950;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.player-match-card__competition > span:not(.match-type-icon),
.player-match-card__competition > a {
  position: relative;
  z-index: 3;
  min-width: 0;
  overflow: hidden;
  color: inherit;
  text-decoration: none;
  text-overflow: ellipsis;
}

main a.player-match-card__competition > a:hover,
main a.player-match-card__competition > a:focus-visible,
.player-match-card__competition > a:hover,
.player-match-card__competition > a:focus-visible {
  text-decoration: underline;
}

.match-type-icon {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
}

.match-type-icon img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.download-icon {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  vertical-align: middle;
}

.download-icon img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.icon-button .download-icon,
.news-lightbox__download .download-icon,
.player-match-card__download .download-icon {
  width: 28px;
  height: 28px;
}

.player-match-card__players {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  justify-self: center;
  gap: 18px;
  width: 100%;
  max-width: 560px;
  min-width: 0;
  color: #f8fbff;
  font-size: 1.05rem;
  font-weight: 950;
  white-space: normal;
  overflow-wrap: normal;
  word-break: normal;
}

.player-match-card__player {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  min-width: 0;
}

.player-match-card__player--home {
  justify-content: flex-end;
}

.player-match-card__player--away {
  justify-content: flex-start;
}

.player-match-card__identity {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  max-width: 100%;
  min-width: 0;
}

.player-match-card__portrait {
  position: relative;
  z-index: 3;
  display: inline-flex;
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  background: #fff;
  text-decoration: none;
}

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

main a.player-match-card__portrait:hover,
main a.player-match-card__portrait:focus-visible {
  border-color: rgba(255, 255, 255, 0.38);
  text-decoration: none;
}

.player-match-card__races {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  min-width: 0;
}

.player-match-card__player--home .player-match-card__races {
  order: 1;
}

.player-match-card__player--home .player-match-card__link {
  order: 2;
}

.player-match-card__player--home .player-match-card__portrait {
  order: 3;
}

.player-match-card__player--away .player-match-card__portrait {
  order: 1;
}

.player-match-card__player--away .player-match-card__link {
  order: 2;
}

.player-match-card__player--away .player-match-card__races {
  order: 3;
}

.player-match-card__races .race-icon {
  width: 20px;
  height: 20px;
}

.player-match-card__score {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  justify-self: center;
  gap: 8px;
  min-width: 48px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #fff;
  font-size: 1.08rem;
  font-weight: 950;
  line-height: 1;
}

.player-match-card__winner-mark {
  display: none;
}

main a.player-match-card__link {
  position: relative;
  z-index: 3;
  color: inherit;
  text-decoration: none;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

main a.player-match-card__link:hover,
main a.player-match-card__link:focus-visible {
  text-decoration: underline;
}

.player-match-card__actions {
  position: relative;
  z-index: 2;
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  align-items: stretch;
  justify-self: end;
  width: 100%;
  min-width: 0;
}

.player-match-card__more,
.player-match-card__download {
  position: relative;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.035)),
    rgba(54, 54, 56, 0.92);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
  color: #fff;
  font-weight: 900;
  text-decoration: none;
}

.player-match-card__more {
  min-width: 78px;
  padding: 0 18px;
}

.player-match-card__download {
  width: 42px;
  font-size: 1.35rem;
  line-height: 1;
}

main a.player-match-card__more:hover,
main a.player-match-card__more:focus-visible,
main a.player-match-card__download:hover,
main a.player-match-card__download:focus-visible {
  border-color: rgba(255, 255, 255, 0.28);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.06)),
    rgba(66, 66, 68, 0.96);
  text-decoration: none;
}

.player-match-card__download--disabled {
  cursor: not-allowed;
  opacity: 0.34;
}

.player-match-card__meta {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(190px, 1fr) minmax(430px, 560px) minmax(132px, 1fr);
  column-gap: 22px;
  align-items: center;
  justify-self: stretch;
  box-sizing: border-box;
  width: 100%;
  padding: 8px 16px 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.035);
  background: rgba(0, 0, 0, 0.22);
  color: rgba(255, 255, 255, 0.62);
  font-size: 0.78rem;
  font-weight: 800;
  line-height: 1.3;
  text-align: center;
}

.player-match-card__meta > span:first-child {
  grid-column: 2;
  min-width: 0;
  text-align: center;
}

.player-match-card__meta > span:last-child {
  grid-column: 3;
  margin-left: 0;
  text-align: right;
  white-space: nowrap;
}

.replay-match-card__meta {
  align-items: center;
  color: var(--text-neutral);
}

.replay-match-card__details {
  grid-column: 2;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 10px;
  min-width: 0;
  text-align: center;
}

.replay-match-card__details span,
.replay-match-card__details time {
  display: inline-flex;
  align-items: center;
  min-width: 0;
}

.replay-match-card__details span {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.replay-match-card__details time {
  flex: 0 0 auto;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.player-match-pager {
  margin-top: 18px;
}

.replay-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
  color: var(--muted);
  font-size: 0.86rem;
}

.replay-card__meta span {
  padding: 6px 9px;
  border-radius: 999px;
  background: rgba(16, 34, 53, 0.7);
  border: 1px solid rgba(123, 161, 219, 0.12);
}

.pager {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 14px;
}

.stream-sidebar-row {
  padding: 14px 16px;
  border: 1px solid rgba(123, 161, 219, 0.14);
  border-radius: var(--radius-lg);
  background: rgba(4, 11, 20, 0.56);
}

.stream-sidebar-row.is-featured {
  border-color: rgba(238, 245, 255, 0.35);
  box-shadow: inset 0 0 0 1px rgba(238, 245, 255, 0.08);
}

.stream-sidebar-row.is-live {
  border-color: rgba(255, 74, 74, 0.35);
}

.stream-sidebar-row p {
  margin: 6px 0 0;
  color: var(--muted);
}

.stream-sidebar-row__identity {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.stream-sidebar-row__identity img {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
}

.stream-sidebar-row__identity strong {
  font-size: 0.95rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.stream-status-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  flex: 0 0 auto;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.04);
}

.stream-status-dot.is-live {
  background: #43d66c;
  box-shadow: 0 0 0 3px rgba(67, 214, 108, 0.14);
}

.stream-status-dot.is-offline {
  background: #ff5d5d;
  box-shadow: 0 0 0 3px rgba(255, 93, 93, 0.14);
}

.panel__header--compact-action {
  align-items: center;
  display: flex;
  justify-content: space-between;
  gap: 14px;
}

.panel-more-link {
  border: 0;
  color: #fff;
  font-size: 0.76rem;
  font-weight: var(--font-medium);
  letter-spacing: 0.04em;
  padding: 0;
  text-transform: uppercase;
}

.panel-more-link:hover,
.panel-more-link:focus-visible {
  color: rgba(255, 255, 255, 0.78);
}

.panel-footer-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 14px;
}

.panel-more-link--bottom {
  align-self: flex-end;
  background: transparent;
}

.stream-directory-shell {
  display: grid;
  gap: 18px;
  margin-bottom: var(--page-bottom);
}

.stream-directory-header {
  align-items: end;
  display: flex;
  gap: 18px;
  justify-content: space-between;
}

.stream-directory-header h1 {
  margin: 0;
}

.stream-directory-header p:not(.eyebrow) {
  color: var(--muted);
  margin: 8px 0 0;
}

.stream-directory {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  padding: 0;
}

.stream-directory-shell .stream-directory {
  margin-inline: 0;
  width: auto;
}

.stream-directory-card {
  align-items: center;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.055), rgba(0, 0, 0, 0.28));
  border: 1px solid rgba(238, 245, 255, 0.12);
  box-shadow: inset 0 -28px 44px rgba(0, 0, 0, 0.18);
  display: flex;
  gap: 14px;
  justify-content: space-between;
  min-height: 112px;
  padding: 16px;
  position: relative;
}

.stream-directory-card.is-live {
  border-color: rgba(67, 214, 108, 0.34);
  box-shadow: inset 0 0 0 1px rgba(67, 214, 108, 0.08);
}

.stream-directory-card__main {
  align-items: center;
  display: flex;
  gap: 12px;
  min-width: 0;
  pointer-events: none;
  position: relative;
  z-index: 1;
}

.stream-directory-card__overlay {
  border-radius: inherit;
  inset: 0;
  position: absolute;
  z-index: 0;
}

.stream-directory-card__icon,
.stream-directory-card__channel,
.stream-directory-card__player {
  pointer-events: auto;
}

.stream-directory-card__icon {
  display: inline-flex;
}

.stream-directory-card__channel:hover,
.stream-directory-card__channel:focus-visible,
.stream-directory-card__player:hover,
.stream-directory-card__player:focus-visible {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

.stream-directory-card__main img {
  height: 24px;
  width: 24px;
}

.stream-directory-card__main h2 {
  font-size: 1.05rem;
  margin: 0;
}

.stream-directory-card__main p,
.stream-directory-card__main small {
  color: var(--muted);
  display: block;
  margin: 4px 0 0;
}

.stream-directory-card__badge {
  border: 1px solid rgba(238, 245, 255, 0.32);
  border-radius: 999px;
  color: #dbe4f0;
  font-size: 0.78rem;
  font-weight: 800;
  pointer-events: none;
  position: relative;
  z-index: 1;
  padding: 6px 10px;
  text-transform: uppercase;
}

.stream-notice,
.stream-admin-alert,
.stream-suggestion-form,
.stream-pending-list {
  border: 1px solid rgba(150, 191, 255, 0.18);
  background: rgba(4, 12, 24, 0.42);
  padding: 14px 16px;
}

.stream-admin-alert {
  align-items: center;
  color: #fff;
  display: flex;
  gap: 12px;
  justify-content: space-between;
  text-decoration: none;
}

.stream-admin-alert strong {
  color: #ff9c9c;
  text-transform: uppercase;
}

.stream-admin-alert:hover strong,
.stream-admin-alert:focus-visible strong {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

.stream-suggestion-form {
  align-items: end;
  display: grid;
  gap: 14px;
  grid-template-columns: minmax(220px, 1.3fr) minmax(180px, 1fr) minmax(180px, 1fr) auto;
}

.stream-suggestion-form h2,
.stream-suggestion-form p {
  margin: 0;
}

.stream-suggestion-form p,
.stream-pending-list {
  color: var(--muted);
}

.stream-suggestion-form label {
  display: grid;
  gap: 6px;
}

.stream-suggestion-form label span {
  color: var(--soft);
  font-weight: 800;
}

.stream-suggestion-form input,
.admin-inline-form input {
  background: rgba(2, 8, 16, 0.78);
  border: 1px solid rgba(150, 191, 255, 0.24);
  border-radius: var(--input-radius);
  color: #fff;
  min-height: 42px;
  padding: 0 12px;
}

.stream-pending-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.admin-actions--wrap,
.admin-inline-form {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.admin-inline-form {
  margin-top: 0;
}

.admin-stream-suggestion-row h3 {
  margin-bottom: 4px;
}

.admin-streams-panel {
  width: min(calc(100% - 32px), var(--max));
  margin-inline: auto;
}

.admin-streams-panel__header {
  align-items: center;
}

.admin-streams-panel__header h1 {
  margin: 0;
}

.admin-stream-edit-header h1 {
  margin: 0;
}

.admin-streams-panel__content,
.admin-streams-section {
  display: grid;
  gap: 16px;
}

.admin-streams-section + .admin-streams-section {
  padding-top: 20px;
  border-top: 1px solid rgba(123, 161, 219, 0.14);
}

.admin-streams-panel .admin-list__row {
  border-radius: 0;
}

.admin-streams-panel .admin-link-button,
.admin-streams-panel .danger-button,
.admin-streams-panel .admin-actions button,
.admin-streams-panel .admin-inline-form input {
  border-radius: 0;
}

@media (max-width: 900px) {
  .stream-directory-header,
  .stream-admin-alert {
    align-items: flex-start;
    flex-direction: column;
  }

  .stream-suggestion-form {
    grid-template-columns: 1fr;
  }
}

.panel--streams-compact .panel__header p {
  margin-top: 6px;
}

.panel--streams-compact .stream-sidebar-list {
  gap: 10px;
}

.panel--streams-compact .stream-sidebar-row {
  justify-content: flex-start;
}

.panel--streams-compact .stream-sidebar-row__meta {
  display: none;
}

.panel--aside-compact .stack-list {
  gap: 10px;
}

.panel--aside-compact .stack-list__item {
  padding: 14px 16px;
  font-size: 0.95rem;
  line-height: 1.6;
}

.stream-sidebar-row__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
}

.match-card__meta,
.game-row__stats,
.permission-user__grid,
.tag-row,
.editor-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.editor-toolbar {
  align-items: center;
  border: 1px solid rgba(123, 161, 219, 0.16);
  border-radius: var(--radius-lg);
  background: rgba(4, 11, 20, 0.48);
  padding: 10px;
}

.editor-toolbar button {
  display: inline-grid;
  place-items: center;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 40px;
  padding: 0;
  border: 1px solid rgba(123, 161, 219, 0.18);
  border-radius: 12px;
  background: rgba(19, 35, 55, 0.92);
  line-height: 1;
  font-weight: 900;
}

.editor-toolbar button:hover {
  border-color: rgba(238, 245, 255, 0.62);
  background: rgba(31, 54, 84, 0.98);
  transform: translateY(-1px);
}

.editor-toolbar button.is-active {
  border-color: rgba(238, 245, 255, 0.72);
  background: rgba(238, 245, 255, 0.16);
  color: var(--accent);
}

.editor-toolbar .editor-toolbar__select {
  width: auto;
  min-height: 40px;
  border: 1px solid rgba(123, 161, 219, 0.22);
  border-radius: var(--control-radius);
  background-color: rgba(9, 20, 34, 0.94);
  color: var(--text);
  font-size: 0.82rem;
  font-weight: 850;
  letter-spacing: 0.01em;
  padding: 0 34px 0 12px;
}

.editor-toolbar .editor-toolbar__select:hover,
.editor-toolbar .editor-toolbar__select:focus {
  border-color: rgba(238, 245, 255, 0.62);
  outline: none;
}

.editor-toolbar__select--style {
  min-width: 150px;
}

.editor-toolbar__select--size {
  min-width: 124px;
}

.editor-toolbar__race img {
  display: block;
  width: 24px;
  height: 24px;
  object-fit: contain;
  transform: translateY(-1px);
}

.toolbar-icon {
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  min-height: 20px;
  line-height: 1;
}

.toolbar-icon--mention {
  font-size: 1.05rem;
  font-weight: 900;
}

.toolbar-icon--underline {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.toolbar-icon--link,
.toolbar-icon--image {
  position: relative;
  display: block;
  width: 23px;
  height: 21px;
}

.toolbar-icon--link::before,
.toolbar-icon--link::after {
  content: "";
  position: absolute;
  width: 11px;
  height: 7px;
  border: 2px solid currentColor;
  border-radius: 999px;
  top: 5px;
}

.toolbar-icon--link::before {
  left: 0;
  transform: rotate(-28deg);
}

.toolbar-icon--link::after {
  right: 0;
  transform: rotate(-28deg);
}

.toolbar-icon--image {
  border: 2px solid #7fd4ff;
  border-radius: 5px;
  background: linear-gradient(180deg, rgba(127, 212, 255, 0.12), rgba(38, 93, 140, 0.28));
}

.toolbar-icon--image::before {
  content: "";
  position: absolute;
  width: 5px;
  height: 5px;
  right: 3px;
  top: 3px;
  border-radius: 999px;
  background: #dbe4f0;
}

.toolbar-icon--image::after {
  content: "";
  position: absolute;
  left: 3px;
  right: 3px;
  bottom: 3px;
  height: 7px;
  background: linear-gradient(135deg, transparent 45%, #ef6666 46% 58%, transparent 59%),
              linear-gradient(45deg, transparent 38%, #7fd4ff 39% 58%, transparent 59%);
}

.map-chip {
  display: grid;
  gap: 4px;
  border-radius: var(--radius-lg);
}

.parser-note {
  margin-top: 18px;
  color: #dbe8ff;
  font-weight: 600;
}

.site-footer {
  border-top: 1px solid var(--line);
  background: rgba(1, 5, 10, 0.8);
}

.site-footer__inner {
  padding: 26px 0 38px;
  color: var(--text-neutral);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.site-footer__links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
}

.site-footer__links a {
  color: var(--muted);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 0.8rem;
}

.footer-link-button,
.site-footer__links a:hover {
  color: white;
}

.footer-link-button {
  appearance: none;
  background: transparent;
  border: 0;
  padding: 0;
  color: var(--muted);
  font: inherit;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 0.8rem;
  cursor: pointer;
}

.footer-link-button:hover {
  color: white;
}

.news-detail__hero {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: 14px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  display: flex;
  justify-content: center;
  margin: 32px auto;
  min-height: 0;
  overflow: hidden;
  padding: 0;
  width: min(calc(100% - 32px), var(--max));
}

.news-detail__hero img {
  border-radius: 12px;
  display: block;
  height: auto;
  max-height: 560px;
  max-width: 100%;
  object-fit: contain;
  width: auto;
}

.news-detail__hero a {
  display: inline-flex;
  justify-content: center;
  max-width: 100%;
}

.news-detail__body {
  margin-bottom: var(--page-bottom);
  padding: 30px 28px 60px;
  background: var(--surface-panel);
  box-shadow: var(--shadow-panel);
}

.news-detail-layout .news-detail__hero,
.news-detail-layout .news-detail__body {
  width: 100%;
  margin-inline: 0;
}

.news-detail-layout .news-detail__hero {
  padding: 0;
}

.news-detail-layout .news-detail__body {
  margin-bottom: 0;
  background: transparent;
  box-shadow: none;
  padding: clamp(22px, 2.6vw, 34px) clamp(22px, 3vw, 42px) 64px;
}

.news-detail-layout__main {
  padding: 0;
}

.news-detail__topline {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.news-detail__meta {
  margin: -4px 0 22px;
  color: rgba(148, 155, 170, 0.88);
  font-size: 0.98rem;
  font-weight: 800;
}

.news-detail__content {
  font-size: 1.14rem;
  line-height: 1.72;
}

.legal-grid {
  padding-top: 12px;
}

.legal-page-header {
  width: min(calc(100% - 32px), var(--max));
}

.legal-document {
  box-sizing: border-box;
  width: min(calc(100% - 32px), var(--max));
  margin: 0 auto var(--section-gap);
  padding: 12px 24px 30px;
  color: var(--text);
  line-height: 1.75;
}

.legal-document section + section {
  margin-top: 30px;
}

.legal-document h2 {
  margin: 0 0 10px;
  color: var(--text);
  font-size: clamp(1.25rem, 1rem + 0.8vw, 1.75rem);
}

.legal-document p {
  margin: 0 0 12px;
  color: var(--muted);
}

.legal-note {
  color: var(--muted);
  font-size: 0.95rem;
}

.contact-link-list {
  display: grid;
  gap: 12px;
  max-width: 420px;
}

.contact-link {
  --contact-color: #d9e7fb;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: #fff;
  font-weight: 800;
  text-transform: uppercase;
}

.contact-link svg {
  width: 22px;
  height: 22px;
  fill: var(--contact-color);
}

.contact-link--discord {
  --contact-color: #5865f2;
}

.contact-link--facebook {
  --contact-color: #1877f2;
}

.contact-link--youtube {
  --contact-color: #ff0033;
}

.contact-link--twitch {
  --contact-color: #9146ff;
}

.cookie-banner {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 30;
}

.cookie-banner.is-hidden {
  display: none;
}

.cookie-banner__inner {
  width: min(100%, 1040px);
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: center;
  padding: 18px 20px;
  border: 1px solid rgba(83, 208, 255, 0.25);
  border-radius: var(--radius-lg);
  background: rgba(4, 11, 20, 0.96);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
}

.cookie-banner__content strong {
  display: block;
  margin-bottom: 8px;
}

.cookie-banner__content p {
  margin: 0;
  color: var(--muted);
  line-height: 1.6;
}

.cookie-banner__actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.cookie-banner__actions a {
  color: var(--accent-2);
  font-weight: 700;
}

.cookie-button {
  border: 1px solid var(--border-accent);
  border-radius: 999px;
  background: var(--button-bg);
  color: var(--text);
  padding: 11px 16px;
  font: inherit;
  cursor: pointer;
}

.cookie-button--secondary {
  background: rgba(19, 35, 55, 0.92);
  border: 1px solid var(--line);
}

.permission-user {
  padding: 16px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.permission-toggle,
.admin-form button,
.download-all-button,
.editor-toolbar button,
.admin-link-button,
.danger-button,
.admin-actions button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid var(--border-accent);
  border-radius: var(--admin-button-radius);
  background: var(--button-bg);
  color: var(--text);
  padding: 11px 16px;
  font: inherit;
  cursor: pointer;
  white-space: nowrap;
}

.permission-toggle.is-enabled {
  background: linear-gradient(135deg, #dbe4f0, #8d97a8);
  color: #08111d;
}

.admin-link-button--subtle {
  justify-self: start;
  background: rgba(19, 35, 55, 0.92);
  border: 1px solid var(--line);
  color: #dce8f8;
}

.panel__header--compact {
  padding-bottom: 12px;
}

.admin-section-stack {
  display: grid;
  gap: 22px;
}

.admin-competition-overview {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  padding: 0 0 var(--section-gap);
}

.admin-competition-overview-card {
  display: grid;
  gap: 8px;
  min-width: 0;
  border: 1px solid rgba(123, 161, 219, 0.14);
  background: rgba(4, 11, 20, 0.48);
  color: inherit;
  padding: 16px;
  text-decoration: none;
}

.admin-competition-overview-card:hover {
  border-color: rgba(83, 208, 255, 0.38);
  background: rgba(9, 24, 40, 0.64);
}

.admin-competition-overview-card span {
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 800;
}

.admin-competition-overview-card strong {
  color: var(--text);
  font-size: 1.65rem;
  line-height: 1;
}

.admin-competition-flow {
  display: grid;
  gap: 22px;
  margin-bottom: var(--section-gap);
}

.admin-competition-flow__intro {
  display: grid;
  gap: 8px;
  max-width: 860px;
}

.admin-competition-flow__intro h2 {
  margin: 0;
}

.admin-competition-flow__intro p {
  margin: 0;
  color: var(--muted);
}

.admin-competition-flow__steps {
  display: grid;
  gap: 12px;
}

.admin-competition-flow__step,
.admin-competition-tool {
  display: grid;
  grid-template-columns: auto minmax(160px, 0.34fr) minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  min-width: 0;
  border: 1px solid rgba(65, 66, 70, 0.9);
  background: rgba(31, 32, 38, 0.78);
  color: inherit;
  padding: 15px 18px;
  text-decoration: none;
}

.admin-competition-flow__step:hover,
.admin-competition-tool:hover {
  border-color: rgba(0, 85, 233, 0.82);
  background: rgba(0, 85, 233, 0.16);
}

.admin-competition-flow__order {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  background: var(--accent);
  color: #fff;
  font-weight: 900;
}

.admin-competition-flow__step strong,
.admin-competition-tool strong {
  color: var(--text);
  font-size: 1.05rem;
  text-transform: uppercase;
}

.admin-competition-flow__step small,
.admin-competition-tool span {
  color: var(--muted);
  line-height: 1.45;
}

.admin-competition-flow__step em,
.admin-competition-tool em {
  color: var(--text);
  font-size: 1.4rem;
  font-style: normal;
  font-weight: 900;
}

.admin-competition-tools {
  display: grid;
  gap: 12px;
  margin-bottom: var(--section-gap);
}

.admin-competition-section {
  scroll-margin-top: calc(var(--header-height, 78px) + 20px);
}

.admin-competition-section__title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.admin-competition-section__title span {
  display: inline-flex;
  min-width: 32px;
  justify-content: center;
  border: 1px solid rgba(123, 161, 219, 0.2);
  background: rgba(123, 161, 219, 0.1);
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 900;
  padding: 3px 8px;
}

.admin-form {
  display: grid;
  gap: 12px;
}

.form-grid {
  display: grid;
  gap: 12px;
}

.form-grid--two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.admin-form input,
.admin-form select,
.admin-form textarea,
.news-editor {
  width: 100%;
  max-width: 100%;
  border-radius: var(--control-radius-lg);
  border: 1px solid var(--border-control);
  background: var(--surface-control);
  color: var(--text);
  padding: 14px 16px;
  font: inherit;
  color-scheme: dark;
}

.admin-form input[type="datetime-local"] {
  color-scheme: dark;
  background: var(--surface-control);
  border-color: var(--border-control);
  color: #f4f8ff;
}

.admin-form input[type="datetime-local"]::-webkit-calendar-picker-indicator {
  opacity: 0;
  cursor: pointer;
  width: 2.2rem;
}

.admin-form input[type="datetime-local"]:focus {
  border-color: var(--border-focus);
  box-shadow: var(--focus-ring);
  outline: none;
}

.api-token-panel {
  margin-top: 18px;
}

.api-token-panel--new {
  display: grid;
  gap: 14px;
  border-color: rgba(238, 245, 255, 0.34);
}

.api-token-panel h2 {
  margin-top: 0;
}

.api-token-list {
  display: grid;
  gap: 12px;
}

.api-token-card {
  display: grid;
  grid-template-columns: minmax(180px, 1.1fr) minmax(220px, 1.4fr) auto;
  align-items: center;
  gap: 14px;
  padding: 14px;
  border: 1px solid rgba(124, 174, 255, 0.16);
  border-radius: var(--radius-lg);
  background: rgba(5, 13, 23, 0.48);
}

.api-token-card.is-inactive {
  opacity: 0.62;
}

.api-token-card__main,
.api-token-card__meta,
.api-token-card__actions {
  display: grid;
  gap: 6px;
}

.api-token-card__main code {
  width: fit-content;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(83, 208, 255, 0.08);
  color: #b8eaff;
}

.api-token-card__meta {
  color: var(--muted);
  font-size: 0.9rem;
}

.api-token-card__actions {
  justify-items: end;
}

.api-token-card__actions form {
  margin: 0;
}

.identity-api-tokens-page,
.identity-api-tokens-page .api-token-card,
.identity-api-tokens-page .api-token-card__main code,
.identity-api-tokens-page .status-pill,
.identity-api-tokens-page .button,
.identity-api-tokens-page .code-input,
.identity-api-tokens-page input,
.identity-api-tokens-page pre,
.identity-api-tokens-page .api-token-doc-links a,
.identity-api-tokens-page .empty-text,
.identity-api-tokens-page .notice {
  border-radius: 0;
}

.api-token-create-form {
  max-width: 560px;
}

.api-token-doc-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 0;
}

.api-token-doc-links a {
  color: #b8eaff;
}

.api-token-doc-links a:hover {
  color: var(--accent);
}

@media (max-width: 780px) {
  .api-token-card {
    grid-template-columns: 1fr;
  }

  .api-token-card__actions {
    justify-items: start;
  }
}

.news-editor {
  min-height: 420px;
  line-height: 1.65;
  overflow-wrap: anywhere;
  overflow-anchor: none;
}

.news-editor__surface {
  min-height: 420px;
  outline: none;
}

.news-editor__surface > *:first-child {
  margin-top: 0;
}

.news-editor__surface > *:last-child {
  margin-bottom: 0;
}

[data-news-form] > .editor-toolbar {
  order: 20;
}

[data-news-form] > [data-news-map-popover] {
  order: 20;
}

[data-news-form] > [data-news-editor] {
  order: 21;
}

[data-news-form] > [data-news-mention-popover],
[data-news-form] > [data-news-editor-output],
[data-news-form] > [data-news-mention-players] {
  order: 22;
}

[data-news-form] > [data-publish-date-block] {
  order: 30;
}

[data-news-form] > .checkbox-row {
  order: 31;
}

[data-news-form] > button[type="submit"] {
  order: 40;
}

.news-editor:focus {
  border-color: var(--border-focus);
  box-shadow: var(--focus-ring);
  outline: none;
}

.news-editor:focus-within {
  border-color: var(--border-focus);
  box-shadow: var(--focus-ring);
}

.news-editor-image {
  position: relative;
  display: inline-block;
  min-width: 1.5em;
  min-height: 1.5em;
  margin: 0.25rem 0.45rem 0.25rem 0;
  vertical-align: middle;
  border: 1px solid transparent;
  border-radius: 12px;
  line-height: 0;
  cursor: pointer;
  user-select: none;
}

.news-editor-image.is-loading::before,
.news-editor-image.is-broken::before {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: rgba(6, 14, 24, 0.78);
  color: var(--muted);
  content: attr(data-status);
  font-size: 0.9rem;
  font-weight: 800;
  pointer-events: none;
}

.news-editor-image.is-broken::before {
  color: var(--accent);
}

.news-editor-image:hover,
.news-editor-image.is-selected {
  border-color: rgba(238, 245, 255, 0.86);
  box-shadow: 0 0 0 3px rgba(238, 245, 255, 0.13);
}

.news-editor img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  border-radius: 10px;
}

.news-editor-image-resize {
  position: absolute;
  z-index: 2;
  display: none;
  background: rgba(238, 245, 255, 0.95);
  box-shadow: 0 0 0 2px rgba(5, 13, 24, 0.88);
}

.news-editor-image.is-selected .news-editor-image-resize,
.news-editor-image.is-resizing .news-editor-image-resize {
  display: block;
}

.news-editor-image-resize--right {
  top: 18%;
  right: -5px;
  width: 8px;
  height: 64%;
  border-radius: 999px;
  cursor: ew-resize;
}

.news-editor-image-resize--bottom {
  bottom: -5px;
  left: 18%;
  width: 64%;
  height: 8px;
  border-radius: 999px;
  cursor: ns-resize;
}

.news-editor-image-resize--corner {
  right: -7px;
  bottom: -7px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  cursor: nwse-resize;
}

.news-editor-image-toolbar {
  position: fixed;
  z-index: 1500;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px;
  border: 1px solid rgba(123, 161, 219, 0.32);
  border-radius: 999px;
  background: rgba(5, 13, 24, 0.96);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.32);
}

.news-editor-image-toolbar[hidden] {
  display: none;
}

.news-editor-image-toolbar button {
  min-height: 28px;
  padding: 0 10px;
  border: 0;
  border-radius: 999px;
  background: rgba(31, 72, 116, 0.82);
  color: var(--text);
  font-size: 0.78rem;
  font-weight: 900;
  cursor: pointer;
}

.news-editor-image-toolbar button:hover {
  background: rgba(238, 245, 255, 0.22);
}

.news-editor blockquote {
  margin: 16px 0;
  padding: 12px 16px;
  border-left: 4px solid var(--accent);
  border-radius: 12px;
  background: rgba(238, 245, 255, 0.08);
}

.news-editor a,
.news-detail__content a {
  color: #b9dcff;
  text-decoration: none;
  border-bottom: 0;
  text-shadow: 0 0 18px rgba(127, 212, 255, 0.12);
}

.news-editor a:hover,
.news-editor a:focus-visible,
.news-detail__content a:hover,
.news-detail__content a:focus-visible {
  color: #d5ecff;
}

.news-editor .news-race-icon,
.news-detail__content .news-race-icon {
  display: inline-flex;
  vertical-align: -0.18em;
  margin: 0 0.12em;
}

.toolbar-icon--svg {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.35rem;
  height: 1.35rem;
}

.toolbar-icon--svg svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: currentColor;
}

.toolbar-icon--remove-format {
  width: 1.72rem;
  height: 1.55rem;
  transform: translateY(-1px);
}

.toolbar-icon--remove-format .toolbar-remove-a {
  fill: #f4f8ff;
}

.toolbar-icon--remove-format .toolbar-remove-eraser {
  fill: #d7dde8 !important;
}

.toolbar-icon--remove-format .toolbar-remove-eraser-tip {
  fill: #f0a0b2 !important;
}

.toolbar-icon--map-thumb {
  width: 28px;
  height: 28px;
  border: 1px solid rgba(238, 245, 255, 0.58);
  border-radius: 0;
  background:
    linear-gradient(135deg, rgba(238, 245, 255, 0.22), rgba(127, 212, 255, 0.12)),
    var(--toolbar-map-thumb, url("/images/scbw/hero.jpg"));
  background-position: center;
  background-size: cover;
  box-shadow: inset 0 0 0 1px rgba(4, 11, 20, 0.58);
  transform: translateY(-1px);
}

.news-map-mention {
  position: relative;
  display: inline-grid;
  width: min(190px, 100%);
  margin: 18px 0;
  border: 1px solid rgba(123, 161, 219, 0.24);
  border-radius: 0;
  background:
    linear-gradient(135deg, rgba(19, 47, 83, 0.82), rgba(5, 13, 24, 0.94)),
    rgba(4, 11, 20, 0.74);
  color: var(--text);
  text-decoration: none;
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.24);
  vertical-align: top;
}

.news-map-mention:hover {
  border-color: rgba(238, 245, 255, 0.48);
  color: white;
  transform: translateY(-1px);
}

.news-map-mention__preview {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 0;
  background: rgba(5, 13, 24, 0.6);
}

.news-map-mention__preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.news-map-mention__body {
  display: grid;
  gap: 4px;
  padding: 10px 11px 12px;
  text-align: center;
}

.news-map-mention__body strong {
  overflow: hidden;
  font-size: 0.95rem;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.news-map-mention__body span,
.news-map-mention__body small {
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 800;
}

.news-map-mention__hover {
  position: fixed;
  z-index: 1800;
  left: 50%;
  top: 50%;
  display: none;
  width: min(78vmin, 760px);
  aspect-ratio: 1 / 1;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(238, 245, 255, 0.5);
  border-radius: 0;
  background: rgba(4, 11, 20, 0.92);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.55);
  pointer-events: none;
}

.news-map-mention:hover .news-map-mention__hover {
  display: block;
}

.news-map-popover {
  position: static;
  z-index: auto;
  width: min(100%, 760px);
  margin: -2px 0 4px;
}

.news-map-popover__header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  margin-bottom: 8px;
}

.news-map-popover__search input {
  width: 100%;
}

.news-map-popover__results {
  display: grid;
  max-height: min(520px, calc(100vh - 220px));
  gap: 6px;
  overflow: auto;
  padding-right: 4px;
  scrollbar-color: rgba(238, 245, 255, 0.58) rgba(4, 11, 20, 0.68);
  scrollbar-width: thin;
}

.news-map-popover__results::-webkit-scrollbar {
  width: 9px;
}

.news-map-popover__results::-webkit-scrollbar-track {
  border-radius: 999px;
  background: rgba(4, 11, 20, 0.68);
}

.news-map-popover__results::-webkit-scrollbar-thumb {
  border: 2px solid rgba(4, 11, 20, 0.68);
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(238, 245, 255, 0.82), rgba(127, 212, 255, 0.54));
}

.news-map-popover__close {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  padding: 0;
  font-size: 1.3rem;
  line-height: 1;
}

.news-map-option {
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  width: 100%;
  border: 0;
  border-radius: 14px;
  background: rgba(31, 72, 116, 0.62);
  padding: 8px;
  color: var(--text);
  text-align: left;
  cursor: pointer;
}

.news-map-option:hover,
.news-map-option.is-active {
  background: rgba(238, 245, 255, 0.16);
}

.news-map-option__preview {
  aspect-ratio: 1 / 1;
  border-radius: 0;
  background-position: center;
  background-size: cover;
}

.news-map-option strong,
.news-map-option small {
  display: block;
}

.news-map-option small {
  color: var(--muted);
  font-weight: 800;
}

.news-editor .news-race-icon {
  display: inline-flex;
  width: 1.1em;
  height: 1.1em;
  font-size: inherit;
  line-height: 1;
  margin: 0 0.08em 0 0;
  position: relative;
  vertical-align: -0.16em;
  user-select: all;
}

.news-editor .news-race-icon.has-editor-caret-after::after {
  content: "";
  position: absolute;
  top: 0.08em;
  right: -0.12em;
  bottom: 0.08em;
  width: 1px;
  border-radius: 1px;
  background: currentColor;
  animation: news-editor-caret-blink 1s steps(1, end) infinite;
}

@keyframes news-editor-caret-blink {
  0%,
  49% {
    opacity: 1;
  }

  50%,
  100% {
    opacity: 0;
  }
}

.news-race-icon--protoss img {
  width: 100%;
  height: 100%;
}

.news-editor-caret-spacer {
  display: inline-block;
  width: 0;
  max-width: 0;
  height: 0;
  overflow: hidden;
  line-height: 0;
  font-size: 0;
  vertical-align: baseline;
}

.news-player-mention {
  display: inline;
  gap: 0.16rem;
  color: #d9e8fb;
  font-weight: 650;
  line-height: inherit;
  text-decoration: none;
  vertical-align: baseline;
  white-space: nowrap;
}

.news-player-mention:hover {
  color: var(--accent);
}

.news-player-mention .news-race-icon {
  margin-left: 0;
  margin-right: 0.12em;
  vertical-align: -0.26em;
}

.news-player-mention__nick {
  line-height: inherit;
  vertical-align: baseline;
}

.news-mention-popover {
  display: grid;
  gap: 4px;
  position: fixed;
  width: min(340px, 100%);
  margin-top: 0;
  padding: 8px;
  border: 1px solid rgba(116, 173, 224, 0.25);
  border-radius: 12px;
  background: rgba(4, 12, 24, 0.98);
  box-shadow: 0 18px 38px rgba(0, 0, 0, 0.42);
  z-index: 1000;
}

.news-mention-option {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 10px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-weight: 800;
  text-align: left;
  cursor: pointer;
}

.news-mention-option:hover,
.news-mention-option.is-active {
  background: rgba(238, 245, 255, 0.14);
}

.news-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin-top: 24px;
}

.news-gallery__item {
  display: block;
  aspect-ratio: 13 / 9;
  overflow: hidden;
  border: 1px solid rgba(116, 173, 224, 0.22);
  border-radius: 12px;
  background: rgba(6, 16, 31, 0.65);
}

.news-gallery__item img {
  display: block;
  width: 100%;
  height: 100%;
  max-height: 520px;
  object-fit: cover;
}

.news-lightbox[hidden] {
  display: none;
}

.news-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  padding: 32px 76px;
  background: rgba(1, 8, 18, 0.88);
  backdrop-filter: blur(8px);
}

.news-lightbox img {
  display: block;
  max-width: min(100%, 1800px);
  max-height: calc(100vh - 96px);
  border-radius: 10px;
  box-shadow: 0 26px 80px rgba(0, 0, 0, 0.55);
  object-fit: contain;
}

.news-lightbox__close,
.news-lightbox__download,
.news-lightbox__nav {
  border: 1px solid rgba(116, 173, 224, 0.3);
  border-radius: 999px;
  background: rgba(8, 18, 30, 0.85);
  color: var(--text);
  cursor: pointer;
  font-weight: 900;
  line-height: 1;
  transition: background 0.15s ease, transform 0.15s ease;
}

.news-lightbox__close:hover,
.news-lightbox__download:hover,
.news-lightbox__nav:hover {
  background: rgba(33, 82, 131, 0.92);
  transform: translateY(-1px);
}

.news-lightbox__close,
.news-lightbox__download {
  position: fixed;
  top: 24px;
  width: 44px;
  height: 44px;
  font-size: 1.8rem;
}

.news-lightbox__close {
  right: 24px;
}

.news-lightbox__download {
  right: 78px;
  display: grid;
  place-items: center;
  text-decoration: none;
}

.news-lightbox__nav {
  position: fixed;
  top: 50%;
  width: 52px;
  height: 52px;
  font-size: 2.4rem;
  transform: translateY(-50%);
}

.news-lightbox__nav:hover {
  transform: translateY(calc(-50% - 1px));
}

.news-lightbox__nav--prev {
  left: 18px;
}

.news-lightbox__nav--next {
  right: 18px;
}

.news-lightbox__counter {
  position: fixed;
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%);
  margin: 0;
  border: 1px solid rgba(116, 173, 224, 0.24);
  border-radius: 999px;
  background: rgba(8, 18, 30, 0.78);
  color: var(--muted);
  font-weight: 800;
  padding: 8px 14px;
}

.has-news-lightbox {
  overflow: hidden;
}

@media (max-width: 760px) {
  .news-lightbox {
    padding: 72px 14px 58px;
  }

  .news-lightbox__nav {
    top: auto;
    bottom: 14px;
    width: 44px;
    height: 44px;
    font-size: 2rem;
    transform: none;
  }

  .news-lightbox__nav:hover {
    transform: translateY(-1px);
  }

  .news-lightbox__counter {
    bottom: 20px;
  }
}

.bulk-email-textarea {
  min-height: 240px;
  resize: vertical;
  overflow-y: auto;
  line-height: 1.55;
}

.admin-search-input {
  width: 100%;
  margin-bottom: 18px;
}

.admin-form label {
  display: grid;
  gap: 8px;
  color: var(--muted);
}

.identity-manage-layout {
  display: grid;
  grid-template-columns: minmax(190px, 250px) minmax(0, 1fr);
  gap: 22px;
  align-items: start;
  padding: var(--section-gap) 0 var(--page-bottom);
}

.identity-manage-layout__nav {
  position: sticky;
  top: calc(var(--header-height, 78px) + 18px);
  border: 1px solid var(--line);
  border-radius: 0;
  background: rgba(8, 18, 30, 0.72);
  padding: 12px;
}

.identity-manage-layout__content {
  min-width: 0;
}

.identity-account-form {
  max-width: 760px;
}

.identity-login-shell {
  display: grid;
  min-height: calc(100vh - var(--header-height, 78px) - 120px);
  place-items: center;
  padding: clamp(28px, 7vh, 72px) 0 var(--page-bottom);
}

.identity-login-card {
  width: min(100%, 440px);
  border: 1px solid rgba(137, 177, 223, 0.16);
  border-radius: var(--radius-md);
  background:
    linear-gradient(145deg, rgba(10, 26, 45, 0.88), rgba(4, 12, 22, 0.92)),
    var(--surface-card);
  box-shadow: var(--shadow-lg);
  padding: clamp(22px, 4vw, 32px);
}

.identity-login-card__header {
  margin-bottom: 22px;
  text-align: center;
}

.identity-login-card__header h1 {
  margin: 0 0 8px;
  font-size: clamp(2rem, 5vw, 3rem);
}

.identity-login-card__header p {
  margin: 0;
  color: var(--muted);
}

.identity-login-form {
  max-width: none;
}

.identity-login-submit {
  width: 100%;
}

.identity-account-form .notice,
.identity-account-form .identity-status-pill {
  margin: 0;
}

.identity-status-pill {
  width: fit-content;
  border: 1px solid rgba(112, 255, 180, 0.26);
  border-radius: 999px;
  background: rgba(112, 255, 180, 0.08);
  color: #b8ffd6;
  font-size: 0.88rem;
  font-weight: 800;
  padding: 7px 11px;
}

.identity-email-page,
.identity-password-page,
.identity-email-page input,
.identity-password-page input,
.identity-email-page button,
.identity-password-page button,
.identity-email-page .identity-status-pill {
  border-radius: 0;
}

.identity-email-page label,
.identity-password-page label,
.identity-email-page .identity-status-pill,
.notice.identity-email-page,
.notice.identity-password-page {
  color: var(--text-neutral);
}

.identity-personal-data-page {
  display: grid;
  gap: 12px;
  color: var(--text-neutral);
}

.identity-personal-data-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 4px;
}

.identity-personal-data-page,
.identity-personal-data-page .button {
  border-radius: 0;
}

.profile-section {
  margin-top: 24px;
}

.identity-points-page {
  display: grid;
  gap: 16px;
}

.identity-points-page .player-stat-summary div,
.identity-points-page .points-history-chart,
.identity-points-page .points-transaction-row,
.identity-points-page .empty-text {
  border-radius: 0;
}

.identity-points-page .points-transaction-list {
  gap: 8px;
}

.identity-points-page .points-transaction-row {
  grid-template-columns: minmax(74px, auto) minmax(96px, auto) minmax(0, 1fr) auto;
  gap: 16px;
  min-height: 44px;
  padding: 9px 12px;
}

.identity-match-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  border-radius: 0;
  color: inherit;
  text-decoration: none;
}

.profile-section .admin-list__row {
  border-radius: 0;
}

.identity-match-card > div:first-child {
  min-width: 0;
}

.identity-match-card h3,
.identity-match-card p {
  min-width: 0;
}

.identity-match-card p {
  color: var(--text-neutral);
}

.identity-match-card .match-card__meta {
  justify-content: flex-end;
  min-width: 0;
}

.identity-match-card .match-card__meta span {
  display: inline-flex;
  justify-content: center;
  min-width: max-content;
  border-radius: 0;
  white-space: nowrap;
}

.profile-section .admin-list__row .match-card__meta span {
  border-radius: 0;
}

.identity-manage-layout__nav ul,
.identity-manage-nav {
  display: grid;
  gap: 6px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.identity-manage-layout__nav a {
  display: block;
  border-radius: 0;
  padding: 9px 10px;
  color: var(--muted);
  text-decoration: none;
}

.identity-manage-layout__nav a.active,
.identity-manage-layout__nav a.is-active,
.identity-manage-layout__nav a:hover {
  background: rgba(83, 208, 255, 0.12);
  color: white;
}

.identity-manage-logout {
  margin-top: 12px;
}

.identity-manage-logout button {
  width: 100%;
  border: 1px solid rgba(255, 93, 93, 0.32);
  border-radius: 0;
  background: rgba(255, 93, 93, 0.1);
  color: #ffb7b7;
  cursor: pointer;
  font: inherit;
  font-weight: 800;
  padding: 10px 12px;
  text-align: center;
  transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.identity-manage-logout button:hover {
  border-color: rgba(255, 93, 93, 0.62);
  background: rgba(255, 93, 93, 0.16);
  color: white;
  transform: translateY(-1px);
}

.identity-manage-layout__content .panel__header p,
.identity-manage-layout__content .admin-form small,
.identity-manage-layout__content .empty-text {
  color: var(--text-neutral);
}

@media (max-width: 760px) {
  .identity-manage-layout {
    grid-template-columns: 1fr;
  }

  .identity-manage-layout__nav {
    position: static;
  }

  .identity-manage-nav {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 2px;
    scrollbar-width: thin;
  }

  .identity-manage-nav li {
    flex: 0 0 auto;
  }

  .identity-manage-layout__nav a,
  .identity-manage-logout button {
    white-space: nowrap;
  }

  .identity-manage-logout {
    display: flex;
  }

  .identity-manage-logout button {
    width: auto;
    min-width: max-content;
  }

  .identity-match-card {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
    padding: 14px;
  }

  .identity-match-card h3 {
    margin-bottom: 6px;
    font-size: 1.05rem;
    line-height: 1.15;
  }

  .identity-match-card p {
    margin: 4px 0 0;
    font-size: 0.88rem;
    line-height: 1.35;
  }

  .identity-match-card .match-card__meta {
    justify-content: flex-start;
    gap: 6px;
  }

  .identity-match-card .match-card__meta span {
    min-width: 0;
    padding: 7px 10px;
    font-size: 0.78rem;
    line-height: 1.1;
  }

  .admin-audit-row {
    grid-template-columns: 1fr;
  }

  .admin-audit-row__meta {
    justify-items: start;
    text-align: left;
  }
}

.admin-form .checkbox-line {
  display: flex;
  flex-direction: row;
  gap: 10px;
  align-items: center;
}

.admin-form .checkbox-line input[type="checkbox"] {
  width: 18px;
  height: 18px;
  padding: 0;
  accent-color: var(--accent);
}

.admin-form .match-dispute-form__checkbox {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center;
  gap: 10px;
  max-width: 100%;
  min-width: 0;
  color: var(--text-neutral);
}

.admin-form .match-dispute-form__checkbox input[type="checkbox"] {
  width: 18px;
  min-width: 18px;
  height: 18px;
  padding: 0;
  flex: 0 0 auto;
  accent-color: var(--accent);
}

.admin-form .match-dispute-form__checkbox span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.map-filter--inline {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
}

.map-filter--inline input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--accent);
}

.portrait-upload-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.portrait-upload {
  align-content: start;
  cursor: pointer;
  padding: 14px;
  border: 1px solid rgba(123, 161, 219, 0.16);
  border-radius: var(--radius-lg);
  background: rgba(4, 11, 20, 0.48);
  transition: border-color 0.16s ease, background 0.16s ease, box-shadow 0.16s ease;
}

.portrait-upload.is-dragover {
  border-color: rgba(238, 245, 255, 0.72);
  background: rgba(238, 245, 255, 0.1);
  box-shadow: 0 0 0 3px rgba(238, 245, 255, 0.12);
}

.portrait-upload img,
.portrait-upload__placeholder {
  display: grid;
  width: 100%;
  aspect-ratio: 1 / 1;
  place-items: center;
  border-radius: 12px;
  background: rgba(2, 8, 15, 0.82);
  object-fit: cover;
  color: var(--muted);
}

.portrait-upload--feature img,
.portrait-upload--feature .portrait-upload__placeholder {
  aspect-ratio: 16 / 9;
}

.portrait-upload input[type="file"] {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.portrait-upload__button {
  display: inline-flex;
  justify-self: start;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-accent);
  border-radius: 999px;
  background: var(--button-bg);
  color: var(--text);
  font-weight: 850;
  padding: 9px 13px;
}

.portrait-upload small {
  color: var(--muted);
  line-height: 1.5;
}

.news-hero-upload {
  display: grid;
  gap: 10px;
  padding: 14px;
  border: 1px solid rgba(123, 161, 219, 0.16);
  border-radius: var(--radius-lg);
  background: rgba(4, 11, 20, 0.48);
  color: var(--muted);
  transition: border-color 0.16s ease, background 0.16s ease, box-shadow 0.16s ease;
}

.news-hero-upload.is-dragover {
  border-color: rgba(238, 245, 255, 0.72);
  background: rgba(238, 245, 255, 0.1);
  box-shadow: 0 0 0 3px rgba(238, 245, 255, 0.12);
}

.news-hero-upload img {
  width: 100%;
  max-height: 320px;
  object-fit: cover;
  border-radius: 12px;
  background: rgba(2, 8, 15, 0.82);
}

.news-hero-upload__actions {
  display: grid;
  gap: 8px;
}

.news-hero-upload__actions small,
.checkbox-row small {
  color: var(--muted);
  line-height: 1.45;
}

.publish-date-block {
  align-items: end;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.publish-date-block [data-publish-date-field] {
  display: none;
}

.publish-date-block.is-visible [data-show-publish-date] {
  display: none;
}

.publish-date-block.is-visible [data-publish-date-field] {
  display: grid;
}

.publish-date-field {
  flex: 0 1 auto;
  position: relative;
}

.publish-date-field input[type="datetime-local"] {
  width: 18rem;
  max-width: calc(100vw - 48px);
  padding-right: 3rem;
}

.publish-date-field::after {
  position: absolute;
  right: 1rem;
  bottom: 1.05rem;
  width: 1rem;
  height: 1rem;
  border: 2px solid #d9e7fb;
  border-radius: 3px;
  box-shadow: inset 0 4px 0 rgba(217, 231, 251, 0.28);
  content: "";
  pointer-events: none;
}

.publish-date-field::before {
  position: absolute;
  right: 1.18rem;
  bottom: 1.88rem;
  width: 0.64rem;
  height: 0.22rem;
  border-top: 2px solid #d9e7fb;
  border-bottom: 2px solid #d9e7fb;
  content: "";
  pointer-events: none;
  z-index: 1;
}

.publish-date-block [data-clear-publish-date] {
  display: none;
}

.publish-date-block.is-visible [data-clear-publish-date] {
  display: inline-flex;
}

.thumbnail-form {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: end;
  gap: 12px;
}

.thumbnail-form label {
  display: grid;
  gap: 8px;
  min-width: 0;
  color: var(--muted);
  font-weight: 800;
}

.thumbnail-form .thumbnail-form__check {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 50px;
}

.thumbnail-form .thumbnail-form__check input {
  width: 18px;
  min-width: 18px;
  height: 18px;
  padding: 0;
}

.thumbnail-form input,
.thumbnail-form select {
  width: 100%;
  min-width: 0;
  border-radius: var(--control-radius);
  border: 1px solid var(--border-control);
  background: var(--surface-control);
  color: var(--text);
  padding: 14px 16px;
  font: inherit;
}

.thumbnail-form__actions {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  flex-wrap: wrap;
}

.thumbnail-form__status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #dff7ff;
  font-weight: 800;
}

.thumbnail-form__status[hidden] {
  display: none;
}

.thumbnail-form__status::before {
  content: "";
  width: 14px;
  height: 14px;
  border-radius: 999px;
  border: 2px solid rgba(83, 208, 255, 0.26);
  border-top-color: rgba(238, 245, 255, 0.95);
  animation: thumbnail-spin 0.8s linear infinite;
}

@keyframes thumbnail-spin {
  to {
    transform: rotate(360deg);
  }
}

.thumbnail-quick-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}

.checkbox-row {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
}

.checkbox-row input {
  width: 18px;
  height: 18px;
}

.admin-subnav {
  width: min(calc(100% - 32px), var(--max));
  margin: 18px auto 0;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.admin-subnav__link {
  border: 1px solid var(--line);
  border-radius: var(--admin-button-radius);
  padding: 10px 14px;
  color: var(--muted);
  background: rgba(6, 14, 24, 0.74);
  position: relative;
}

.admin-subnav__link:hover,
.admin-link-button:hover {
  color: white;
}

.admin-subnav__link.is-active {
  border-color: rgba(83, 208, 255, 0.7);
  background: rgba(83, 208, 255, 0.16);
  color: #fff;
  box-shadow: inset 0 -3px 0 var(--accent), 0 0 0 1px rgba(238, 245, 255, 0.08);
  font-weight: 800;
}

.admin-subnav-summary {
  width: min(calc(100% - 32px), var(--max));
  margin: 10px auto 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  padding: 12px 14px;
  border: 1px solid rgba(123, 161, 219, 0.14);
  background: rgba(4, 11, 20, 0.48);
}

.admin-subnav-summary div {
  display: grid;
  gap: 3px;
}

.admin-subnav-summary strong {
  color: var(--text);
}

.admin-subnav-summary span,
.admin-subnav-summary em {
  color: var(--text-neutral);
}

.admin-subnav-summary em {
  font-style: normal;
  font-weight: 800;
  white-space: nowrap;
}

.admin-subnav--hierarchy {
  gap: 8px;
}

.admin-subnav--hierarchy .admin-subnav__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: 0;
}

.admin-subnav--hierarchy .admin-subnav__link span {
  display: inline-grid;
  place-items: center;
  min-width: 22px;
  height: 22px;
  background: rgba(255, 255, 255, 0.08);
  color: var(--text);
  font-size: 0.72rem;
  font-weight: 900;
}

.admin-subnav--hierarchy .admin-subnav__link.is-active span {
  background: var(--accent);
}

.admin-section-card {
  display: grid;
  gap: 18px;
  align-content: space-between;
}

.admin-section-card__meta,
.admin-meta {
  color: var(--muted);
}

.admin-list {
  display: grid;
  gap: 14px;
}

.admin-list__row {
  border: 1px solid rgba(123, 161, 219, 0.14);
  border-radius: var(--radius-lg);
  background: rgba(4, 11, 20, 0.56);
  padding: 18px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
}

.admin-list__row.is-disabled {
  opacity: 0.5;
  filter: grayscale(0.8);
}

.admin-list__row.is-muted {
  opacity: 0.62;
  filter: grayscale(0.65);
}

.admin-list__row.is-disabled h3::after {
  content: "disabled";
  display: inline-flex;
  margin-left: 10px;
  border: 1px solid rgba(238, 245, 255, 0.18);
  border-radius: 999px;
  color: var(--muted);
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  padding: 2px 7px;
  text-transform: uppercase;
}

.status-pill {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: 3px 8px;
  border: 1px solid rgba(238, 245, 255, 0.18);
  color: var(--muted);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.admin-news-row {
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.admin-news-row--disabled {
  border-color: rgba(255, 84, 84, 0.38);
  background:
    linear-gradient(90deg, rgba(255, 84, 84, 0.15), rgba(4, 11, 20, 0.58) 34%),
    rgba(4, 11, 20, 0.64);
  box-shadow: inset 4px 0 0 rgba(255, 84, 84, 0.72);
}

.admin-news-row--disabled h3 {
  color: #ffc8c8;
}

.admin-news-row--disabled .admin-meta {
  color: #d5a3a3;
}

.status-pill--disabled-news {
  margin-left: 10px;
  border-color: rgba(255, 84, 84, 0.54);
  background: rgba(255, 84, 84, 0.14);
  color: #ffdddd;
  vertical-align: middle;
}

.admin-stream-row {
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.admin-stream-row.is-featured {
  border-color: rgba(238, 245, 255, 0.52);
  background:
    linear-gradient(135deg, rgba(238, 245, 255, 0.1), transparent 42%),
    rgba(4, 11, 20, 0.58);
}

.admin-stream-row.is-live {
  box-shadow: inset 3px 0 0 rgba(67, 214, 108, 0.78);
}

.admin-stream-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  margin-top: 10px;
}

.admin-stream-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 25px;
  border: 1px solid rgba(123, 161, 219, 0.18);
  border-radius: var(--radius-sm);
  background: rgba(10, 23, 39, 0.82);
  color: var(--label);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.025em;
  line-height: 1;
  padding: 5px 9px;
}

.admin-stream-tag--channel,
.admin-stream-tag--player,
.admin-stream-tag--regular {
  color: var(--muted);
  font-weight: 700;
}

.admin-stream-tag--featured {
  border-color: rgba(238, 245, 255, 0.7);
  background: linear-gradient(180deg, rgba(238, 245, 255, 0.28), rgba(238, 245, 255, 0.12));
  color: #dbe4f0;
  box-shadow: 0 0 18px rgba(238, 245, 255, 0.12);
}

.admin-stream-tag--live {
  border-color: rgba(67, 214, 108, 0.58);
  background: linear-gradient(180deg, rgba(67, 214, 108, 0.22), rgba(67, 214, 108, 0.1));
  color: #caffd6;
}

.admin-stream-tag--offline {
  border-color: rgba(255, 93, 93, 0.28);
  background: rgba(45, 18, 24, 0.42);
  color: #ffb9b9;
}

.admin-stream-tag--active {
  border-color: rgba(83, 208, 255, 0.44);
  color: #cbefff;
}

.admin-stream-tag--disabled {
  border-color: rgba(238, 245, 255, 0.12);
  background: rgba(238, 245, 255, 0.05);
  color: var(--muted);
}

.admin-stream-tag .stream-status-dot {
  width: 8px;
  height: 8px;
}

.admin-players-panel {
  display: grid;
  grid-template-columns: minmax(260px, 430px) minmax(0, 1fr);
  gap: 16px;
  align-items: end;
  border-radius: 0;
}

.admin-players-panel > .panel__header,
.admin-players-panel > .admin-notice {
  grid-column: 1 / -1;
}

.admin-players-panel > .panel__header--compact {
  display: none;
}

.admin-players-panel > [data-live-search-results] {
  grid-column: 1 / -1;
}

.admin-players-panel .admin-list {
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 10px;
}

.admin-players-panel .admin-list__row {
  align-items: stretch;
  display: grid;
  gap: 10px;
  padding: 12px;
}

.admin-players-toolbar__search {
  margin: 0;
}

.admin-players-toolbar__search label {
  flex: 0 1 430px;
}

.admin-players-toolbar__add {
  justify-self: start;
  align-self: end;
}

.admin-players-panel,
.admin-players-panel .admin-list__row,
.admin-players-panel .admin-player-summary__portrait,
.admin-players-panel .admin-link-button,
.admin-players-panel .danger-button,
.admin-players-panel input,
.admin-players-panel select {
  border-radius: 0;
}

.admin-player-summary {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.admin-player-summary h3 {
  margin-bottom: 2px;
}

.admin-players-panel .player-card__meta-line,
.admin-players-panel .admin-meta {
  margin: 2px 0 0;
}

.admin-player-summary__portrait,
.admin-player-option__portrait {
  flex: 0 0 auto;
  width: 50px;
  height: 50px;
  border: 1px solid rgba(123, 161, 219, 0.2);
  border-radius: 14px;
  background:
    linear-gradient(135deg, rgba(123, 161, 219, 0.18), rgba(4, 11, 20, 0.72)),
    url("/images/scbw/hero.jpg");
  background-position: center;
  background-size: cover;
}

.admin-players-panel .admin-actions {
  align-self: end;
  gap: 6px;
}

.admin-players-panel .admin-link-button,
.admin-players-panel .danger-button {
  min-height: 34px;
  padding: 7px 10px;
}

.admin-form--secondary-action {
  margin-top: 12px;
}

.admin-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.admin-competitions-admin .admin-actions {
  flex: 0 0 190px;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
}

.admin-competitions-admin .admin-actions form {
  display: flex;
  margin: 0;
}

.admin-competitions-admin .admin-actions .admin-link-button,
.admin-competitions-admin .admin-actions .danger-button,
.admin-competitions-admin .admin-actions button {
  justify-content: center;
  width: 100%;
  text-align: center;
}

.admin-actions--news {
  display: grid;
  grid-template-columns: repeat(3, max-content);
  justify-content: end;
  white-space: nowrap;
}

.admin-actions--news form {
  margin: 0;
}

.admin-inline-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: flex-end;
}

.admin-linked-players {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.admin-linked-players__empty {
  color: var(--muted);
  font-size: 0.88rem;
  font-weight: 800;
}

.admin-linked-player-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid rgba(123, 161, 219, 0.2);
  border-radius: 999px;
  background: rgba(31, 72, 116, 0.36);
  padding: 5px 8px;
}

.admin-linked-player-pill a {
  color: var(--text);
  font-weight: 900;
  text-decoration: none;
}

.admin-linked-player-pill form {
  display: inline-flex;
}

.admin-linked-player-pill button {
  display: inline-grid;
  width: 22px;
  height: 22px;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: rgba(238, 88, 88, 0.18);
  color: #ffd7d7;
  cursor: pointer;
}

.admin-inline-link-form {
  display: inline-flex;
  gap: 8px;
  align-items: center;
}

.admin-inline-link-form select {
  min-width: 180px;
  max-width: 260px;
}

.panel__header--with-action {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: flex-start;
}

.panel__header-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.page-header.panel__header--with-action {
  align-items: center;
  gap: var(--section-gap);
}

.permission-checklist {
  display: grid;
  gap: 10px;
}

.role-checklist {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 10px;
}

.permission-section-title {
  margin: 20px 0 10px;
  font-size: 0.95rem;
  text-transform: uppercase;
  color: var(--muted);
}

.permission-group {
  display: grid;
  gap: 10px;
  padding: 14px;
  border: 1px solid rgba(123, 161, 219, 0.12);
  background: rgba(4, 11, 20, 0.28);
}

.permission-group h4 {
  margin: 0;
  font-size: 0.92rem;
  color: var(--text);
  text-transform: uppercase;
}

.stream-template-tools,
.stream-template-save {
  margin: 1rem 0;
  padding: 1rem;
  border: 1px solid rgba(155, 180, 220, 0.22);
  background: rgba(7, 11, 20, 0.28);
}

.stream-template-tools__apply,
.stream-template-save {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto auto;
  gap: 0.8rem;
  align-items: end;
}

.stream-template-save {
  grid-template-columns: minmax(220px, 1fr) minmax(220px, 1fr) auto;
}

.monospace-input {
  font-family: "Cascadia Mono", "Consolas", monospace;
  font-size: 0.9rem;
}

@media (max-width: 760px) {
  .stream-template-tools__apply,
  .stream-template-save {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 980px) {
  .admin-competition-basic,
  .admin-advanced-settings__grid,
  .admin-advanced-settings__grid > fieldset,
  .admin-create-template-grid,
  .admin-create-existing__grid,
  .admin-round-map-picker__grid {
    grid-template-columns: 1fr;
  }

  .admin-map-picker__filters {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 620px) {
  .admin-player-picker__grid,
  .admin-map-picker__grid {
    grid-template-columns: 1fr;
    max-height: none;
  }

  .admin-player-picker-card {
    grid-template-columns: auto 48px minmax(0, 1fr);
  }
}

.permission-checklist__item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: start;
  padding: 14px 16px;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(123, 161, 219, 0.14);
  background: rgba(4, 11, 20, 0.56);
}

.permission-checklist__item input {
  width: 18px;
  height: 18px;
  margin-top: 2px;
}

.permission-checklist__item span {
  display: grid;
  gap: 4px;
}

.permission-checklist__item small {
  color: var(--muted);
}

.panel--subtle {
  padding: 20px;
  background: rgba(6, 14, 24, 0.52);
}

.permission-check {
  grid-template-columns: auto 1fr;
  align-items: start;
  padding: 14px 16px;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(123, 161, 219, 0.14);
  background: rgba(4, 11, 20, 0.56);
}

.permission-check input {
  width: 18px;
  height: 18px;
  margin-top: 2px;
}

.permission-check span {
  display: grid;
  gap: 4px;
}

.permission-check small {
  color: var(--muted);
}

.danger-button,
.admin-actions .danger-button {
  background: linear-gradient(135deg, #8e2c37, #56131d);
  border: 1px solid rgba(255, 122, 122, 0.24);
  box-shadow: 0 10px 24px rgba(107, 23, 35, 0.22);
}

.danger-button:hover,
.admin-actions .danger-button:hover {
  background: linear-gradient(135deg, #aa3340, #661822);
  transform: translateY(-1px);
}

.news-editor.is-dragover {
  outline: 2px dashed var(--accent-2);
}

.form-inline {
  margin: 0;
}

.btn-link {
  background: transparent;
  border: 0;
}

.admin-fieldset {
  display: grid;
  gap: 12px;
  padding: 18px;
  border: 1px solid rgba(123, 161, 219, 0.16);
  border-radius: var(--radius-lg);
}

.admin-fieldset--flat {
  padding: 0;
  border: 0;
  border-radius: 0;
}

.admin-fieldset legend {
  padding: 0 8px;
  color: var(--text);
}

.admin-fieldset--flat legend {
  padding: 0;
}

.checkbox-grid {
  display: grid;
  gap: 10px;
}

.admin-map-picker {
  display: grid;
  gap: 14px;
}

.admin-map-picker__filters {
  grid-template-columns: minmax(220px, 1.35fr) repeat(3, minmax(120px, 0.7fr));
  padding: 0;
}

.admin-map-picker__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: var(--text-neutral);
  font-size: 0.9rem;
}

.admin-map-picker__summary strong {
  color: var(--text-neutral);
}

.admin-map-picker__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 12px;
  max-height: 720px;
  overflow: auto;
  padding: 2px 6px 2px 2px;
  scrollbar-color: rgba(238, 245, 255, 0.7) rgba(4, 11, 20, 0.68);
  scrollbar-width: thin;
}

.admin-map-picker__grid::-webkit-scrollbar {
  width: 10px;
}

.admin-map-picker__grid::-webkit-scrollbar-track {
  border-radius: 999px;
  background: rgba(4, 11, 20, 0.68);
}

.admin-map-picker__grid::-webkit-scrollbar-thumb {
  border: 2px solid rgba(4, 11, 20, 0.68);
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(238, 245, 255, 0.85), rgba(83, 208, 255, 0.58));
}

.admin-map-picker-card {
  position: relative;
  display: grid;
  grid-template-columns: 78px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  border: 1px solid rgba(123, 161, 219, 0.16);
  border-radius: 0;
  background: rgba(4, 11, 20, 0.58);
  cursor: default;
  min-width: 0;
  padding: 10px;
  transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

.admin-map-picker-card:hover {
  border-color: rgba(83, 208, 255, 0.42);
  transform: translateY(-1px);
}

.admin-map-picker-card.is-selected {
  border-color: rgba(238, 245, 255, 0.72);
  box-shadow: 0 0 0 2px rgba(238, 245, 255, 0.14), 0 18px 42px rgba(0, 0, 0, 0.24);
}

.admin-map-picker-card__checkbox {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border: 1px solid rgba(238, 245, 255, 0.48);
  background: rgba(4, 10, 18, 0.9);
}

.admin-map-picker-card__checkbox input {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--accent);
}

.admin-map-picker-card__preview {
  position: relative;
  display: block;
  border-radius: 0;
  overflow: hidden;
  background: rgba(2, 8, 15, 0.9);
}

.admin-map-picker-card__preview > img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
}

.admin-map-picker-card__hover-preview {
  position: fixed;
  z-index: 90;
  inset: 18px;
  display: grid;
  place-items: center;
  opacity: 0;
  pointer-events: none;
  transform: scale(0.985);
  transition: opacity 0.14s ease, transform 0.14s ease;
}

.admin-map-picker-card__hover-preview img {
  display: block;
  max-width: calc(100vw - 36px);
  max-height: calc(100vh - 36px);
  object-fit: contain;
  border: 1px solid rgba(238, 245, 255, 0.35);
  border-radius: 10px;
  background: rgba(2, 8, 15, 0.96);
  box-shadow: 0 26px 80px rgba(0, 0, 0, 0.56);
}

.admin-map-picker-card__preview:hover .admin-map-picker-card__hover-preview,
.admin-map-picker-card__preview:focus-within .admin-map-picker-card__hover-preview {
  opacity: 1;
  transform: scale(1);
}

.admin-map-picker-card__body {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.admin-map-picker-card__body strong,
.admin-map-picker-card__body small,
.admin-map-picker-card__body em {
  overflow: hidden;
  text-overflow: ellipsis;
}

.admin-map-picker-card__body strong {
  color: var(--text);
  line-height: 1.15;
}

.admin-map-picker-card__body small,
.admin-map-picker-card__body em {
  color: var(--text-neutral);
  font-style: normal;
}

.admin-map-picker-card__body em {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-height: 1.35;
}

.admin-map-picker-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.admin-map-picker-card__meta span {
  border: 1px solid rgba(123, 161, 219, 0.14);
  border-radius: 0;
  color: var(--text-neutral);
  font-size: 0.72rem;
  padding: 2px 6px;
}

.admin-player-picker {
  grid-column: 1 / -1;
}

.admin-player-picker__search {
  max-width: 520px;
}

.admin-player-picker__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 12px;
  max-height: 680px;
  overflow: auto;
  padding: 2px 6px 2px 2px;
}

.admin-player-picker-card {
  position: relative;
  display: grid;
  grid-template-columns: auto 54px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  border: 1px solid rgba(123, 161, 219, 0.16);
  border-radius: 0;
  background: rgba(4, 11, 20, 0.58);
  min-width: 0;
  padding: 10px;
}

.admin-player-picker-card.is-selected {
  border-color: rgba(238, 245, 255, 0.72);
  box-shadow: 0 0 0 2px rgba(238, 245, 255, 0.12);
}

.admin-player-picker-card__check {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
}

.admin-player-picker-card__check input {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--accent);
}

.admin-player-picker-card__portrait {
  display: block;
  width: 54px;
  height: 54px;
  object-fit: cover;
  border: 1px solid rgba(238, 245, 255, 0.16);
  border-radius: 0;
  background: rgba(2, 8, 15, 0.9);
}

.admin-player-picker-card__main {
  display: grid;
  gap: 7px;
  min-width: 0;
}

.admin-player-picker-card__title {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.admin-player-picker-card__title strong {
  overflow: hidden;
  color: var(--text);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-player-picker-card__rating {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  color: var(--text-neutral);
  font-size: 0.78rem;
}

.admin-player-picker-card__rating b {
  color: var(--text);
}

.admin-player-picker-card__seed {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: auto minmax(0, 120px);
  align-items: center;
  gap: 10px;
  color: var(--text-neutral);
  font-size: 0.8rem;
}

.admin-player-picker-card__seed input {
  min-height: 36px;
  padding: 7px 9px;
}

.analysis-upload {
  display: grid;
  gap: 14px;
}

.analysis-dropzone {
  position: relative;
  display: grid;
  min-height: 180px;
  place-items: center;
  gap: 8px;
  border: 1px dashed rgba(83, 208, 255, 0.42);
  border-radius: 0;
  background:
    radial-gradient(circle at 50% 0%, rgba(83, 208, 255, 0.12), transparent 48%),
    rgba(4, 11, 20, 0.58);
  color: var(--text);
  cursor: pointer;
  padding: 28px;
  text-align: center;
  transition: border-color 0.16s ease, background 0.16s ease, transform 0.16s ease;
}

.analysis-dropzone:hover,
.analysis-dropzone.is-dragover {
  border-color: rgba(238, 245, 255, 0.7);
  background:
    radial-gradient(circle at 50% 0%, rgba(238, 245, 255, 0.16), transparent 52%),
    rgba(8, 18, 31, 0.84);
  transform: translateY(-1px);
}

.analysis-upload.is-uploading .analysis-dropzone {
  border-color: rgba(238, 245, 255, 0.88);
  background:
    radial-gradient(circle at 50% 0%, rgba(238, 245, 255, 0.2), transparent 54%),
    rgba(8, 18, 31, 0.92);
  cursor: progress;
  opacity: 0.82;
  pointer-events: none;
}

.analysis-dropzone span {
  font-size: 1.1rem;
  font-weight: 900;
}

.analysis-dropzone small,
.analysis-upload__selected,
.analysis-muted {
  color: var(--muted);
}

.analysis-muted a {
  color: var(--text);
  font-weight: 650;
  text-decoration: none;
}

.analysis-muted a:hover,
.analysis-muted a:focus-visible {
  color: var(--accent);
}

.analysis-upload__status {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  justify-self: start;
  padding: 10px 14px;
  border: 1px solid rgba(238, 245, 255, 0.34);
  border-radius: 0;
  background: rgba(238, 245, 255, 0.11);
  color: var(--text);
  font-weight: 800;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
}

.analysis-upload__spinner {
  width: 18px;
  height: 18px;
  border: 3px solid rgba(238, 245, 255, 0.24);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: analysis-spin 0.8s linear infinite;
}

@keyframes analysis-spin {
  to {
    transform: rotate(360deg);
  }
}

.error-panel {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  width: min(100%, 760px);
  margin-top: 18px;
  border: 1px solid rgba(154, 154, 154, 0.2);
  padding: 14px 16px;
  background: rgba(11, 14, 20, 0.5);
}

.error-panel span {
  color: var(--text-neutral);
  font-size: 0.85rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.error-panel code {
  overflow-wrap: anywhere;
  color: var(--text);
  font-size: 0.95rem;
  line-height: 1.45;
}

.analysis-facts {
  display: grid;
  gap: 8px;
  margin: 0;
}

.analysis-fact-row {
  display: grid;
  grid-template-columns: minmax(120px, 0.28fr) minmax(0, 1fr);
  gap: 12px;
  align-items: baseline;
  border-bottom: 1px solid rgba(123, 161, 219, 0.12);
  padding: 0 0 8px;
}

.analysis-fact-row:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.analysis-fact-row dt {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 850;
  letter-spacing: 0.08em;
  margin: 0;
  text-transform: uppercase;
}

.analysis-fact-row dd {
  color: #e8f2ff;
  margin: 0;
  overflow-wrap: anywhere;
}

.thumbnail-form--analysis {
  grid-template-columns: repeat(3, minmax(130px, 1fr));
  margin-top: 8px;
}

.thumbnail-form--analysis input[name="fileName"],
.thumbnail-form--analysis input[name="contentBase64"] {
  display: none;
}

.analysis-similar-map-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
  margin-top: 8px;
}

.analysis-similar-map-grid .map-detail-version-tile {
  border-radius: 0;
  padding: 9px;
}

.analysis-similar-map-grid .map-detail-version-tile img {
  border-radius: 0;
}

.analysis-similar-map-preview {
  display: block;
  position: relative;
}

.analysis-similar-map-preview > img {
  display: block;
  width: 100%;
}

.similarity-score {
  color: rgba(238, 245, 255, 0.88);
  font-size: 0.76rem;
  font-weight: 800;
}

.analysis-dropzone input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.analysis-result-list {
  display: grid;
  gap: 16px;
}

.analysis-result-card {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 18px;
  border: 1px solid rgba(123, 161, 219, 0.14);
  border-radius: 0;
  background: rgba(4, 11, 20, 0.56);
  padding: 18px;
}

.analysis-result-card--replay {
  grid-template-columns: minmax(0, 1fr);
}

.analysis-result-card__summary {
  display: grid;
  grid-template-columns: minmax(150px, 190px) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

.analysis-result-card--map {
  grid-template-columns: minmax(0, 1fr);
  justify-items: stretch;
}

.analysis-result-card__preview {
  min-height: 180px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(238, 245, 255, 0.18);
  border-radius: 0;
  background: rgba(2, 8, 15, 0.9);
  overflow: hidden;
}

.analysis-result-card--map .analysis-result-card__preview {
  width: min(100%, 960px);
  min-height: 0;
  justify-self: center;
  margin: 0 auto;
}

.analysis-result-card--replay .analysis-result-card__preview {
  width: 100%;
  min-height: 0;
  justify-self: stretch;
  margin: 0;
  border-radius: 0;
}

.analysis-upload-panel,
.analysis-results-panel,
.analysis-description,
.thumbnail-form--analysis {
  border-radius: 0;
}

.analysis-result-card--replay .replay-result-map-preview--analysis {
  width: 100%;
}

.analysis-result-card__preview:empty::before {
  content: "No preview";
  color: var(--muted);
  font-size: 0.85rem;
  font-weight: 800;
}

.analysis-result-card__preview img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
}

.analysis-result-card--map .analysis-result-card__preview img {
  max-height: min(76vh, 960px);
}

.analysis-map-preview {
  display: inline-block;
  position: relative;
}

.analysis-map-preview > img {
  display: block;
}

.analysis-map-path-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 2;
}

.analysis-map-path-overlay[hidden] {
  display: none;
}

.analysis-map-path-overlay polyline {
  fill: none;
  stroke: var(--path-color, #20e8ff);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 12px;
  opacity: 0.88;
  filter: drop-shadow(0 0 10px rgba(32, 232, 255, 0.82));
}

.analysis-map-path-overlay text {
  fill: var(--path-color, #20e8ff);
  font-family: "Arial", sans-serif;
  font-size: 46px;
  font-weight: 900;
  paint-order: stroke;
  stroke: #05070d;
  stroke-width: 12px;
}

.analysis-path-toggle {
  justify-self: start;
}

.analysis-map-preview__hover {
  position: fixed;
  z-index: 90;
  left: 50%;
  top: 50%;
  display: block;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%) translateY(10px) scale(0.98);
  transition: opacity 0.16s ease, transform 0.16s ease;
}

.analysis-map-preview__hover img {
  display: block;
  width: min(calc(100vw - 36px), calc(100vh - 36px)) !important;
  height: auto !important;
  max-width: calc(100vw - 36px) !important;
  max-height: calc(100vh - 36px) !important;
  object-fit: contain;
  border: 1px solid rgba(238, 245, 255, 0.38);
  border-radius: 10px;
  background: rgba(4, 11, 20, 0.92);
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.48);
}

.analysis-map-preview:hover .analysis-map-preview__hover,
.analysis-map-preview:focus-within .analysis-map-preview__hover,
.replay-result-map-preview--analysis:hover .analysis-map-preview__hover,
.replay-result-map-preview--analysis:focus-within .analysis-map-preview__hover,
.analysis-similar-map-preview:hover .analysis-map-preview__hover,
.analysis-similar-map-preview:focus-within .analysis-map-preview__hover {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.analysis-map-preview[data-paths-visible="true"] .analysis-map-preview__hover {
  display: none;
}

.analysis-result-card--replay .replay-timeline__canvas {
  max-width: 100%;
}

.analysis-action-details {
  border: 1px solid rgba(65, 66, 70, 0.92);
  background: rgba(31, 32, 38, 0.55);
  padding: 10px 12px;
}

.analysis-action-details summary {
  cursor: pointer;
  color: var(--accent);
  font-weight: var(--font-medium);
}

.analysis-action-details .analysis-muted {
  margin: 10px 0 0;
  overflow-wrap: anywhere;
}

.analysis-result-card__body {
  display: grid;
  gap: 14px;
  min-width: 0;
}

.analysis-description {
  display: grid;
  gap: 6px;
  color: var(--muted);
  line-height: 1.6;
}

.analysis-thumbnail-toggle {
  justify-self: start;
}

.analysis-description p {
  margin: 0;
  overflow-wrap: anywhere;
}

.analysis-page .admin-inline-form {
  margin-top: 18px;
}

.stream-editor-layout {
  width: min(calc(100% - 32px), var(--max));
  margin: 0 auto;
  padding: 0 0 24px;
}

.stream-editor-panel--wide {
  display: grid;
  gap: 18px;
}

.stream-editor-panel--wide > .panel__header {
  margin-bottom: 0;
}

.stream-editor-panel--wide > .panel__header h1 {
  margin: 0;
}

.stream-editor-panel--wide > .panel__header p + p {
  display: none;
}

.stream-scene-form {
  order: 1;
  display: grid;
  gap: 16px;
}

.stream-template-tools {
  order: 2;
}

.stream-editor-topbar {
  display: grid;
  grid-template-columns: minmax(340px, 0.9fr) minmax(0, 1.1fr);
  gap: 16px;
  align-items: start;
}

.stream-scene-meta,
.stream-editor-actions,
.stream-inspector__toolbar,
.stream-inspector__grid,
.broadcast-match-card__grid {
  display: grid;
  gap: 12px;
}

.stream-scene-meta {
  grid-template-columns: 2fr 1fr;
  margin-bottom: 18px;
}

.stream-add-layer-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  padding: 12px 14px;
  border: 1px solid rgba(123, 161, 219, 0.16);
  background: rgba(4, 11, 20, 0.42);
}

.stream-add-layer-toolbar span {
  color: var(--muted);
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.stream-scene-links {
  display: grid;
  gap: 12px;
  margin-bottom: 12px;
}

.stream-scene-link-card {
  padding: 12px 14px;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(123, 161, 219, 0.16);
  background: rgba(4, 11, 20, 0.46);
  display: grid;
  gap: 8px;
}

.stream-scene-link-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 8px;
  align-items: center;
}

.stream-scene-link-row input {
  width: 100%;
}

.stream-scene-upload input {
  cursor: pointer;
}

.stream-canvas-shell {
  position: relative;
  overflow: auto;
  padding: 12px;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(123, 161, 219, 0.16);
  background:
    linear-gradient(45deg, rgba(154, 154, 154, 0.14) 25%, transparent 25%, transparent 75%, rgba(154, 154, 154, 0.14) 75%),
    linear-gradient(45deg, rgba(154, 154, 154, 0.14) 25%, transparent 25%, transparent 75%, rgba(154, 154, 154, 0.14) 75%);
  background-color: #151a20;
  background-position: 0 0, 12px 12px;
  background-size: 24px 24px;
}

.stream-canvas-scaler {
  display: block;
  overflow: hidden;
}

.stream-canvas {
  position: relative;
  width: 1920px;
  height: 1080px;
  background-size: cover;
  background-position: center;
  overflow: hidden;
  outline: 2px solid rgba(238, 245, 255, 0.82);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.74), 0 30px 70px rgba(0, 0, 0, 0.42);
}

.stream-canvas-readout {
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 5;
  padding: 8px 10px;
  border: 1px solid rgba(238, 245, 255, 0.28);
  background: rgba(4, 11, 20, 0.88);
  color: var(--text);
  font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
  font-size: 0.82rem;
  line-height: 1;
  pointer-events: none;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.34);
}

.stream-inspector--inline {
  margin-bottom: 0;
  padding: 12px 14px;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(123, 161, 219, 0.16);
  background: rgba(4, 11, 20, 0.46);
  overflow: visible;
}

.stream-editor-inspector-grid {
  display: grid;
  grid-template-columns: minmax(280px, 0.85fr) minmax(0, 1.15fr);
  gap: 16px;
  align-items: start;
}

.stream-scene-item {
  position: absolute;
  cursor: move;
  user-select: none;
  outline: 1px dashed rgba(83, 208, 255, 0.32);
  display: grid;
  align-content: center;
  box-sizing: border-box;
  padding: 12px;
  backface-visibility: hidden;
  transform: translateZ(0);
}

.stream-scene-item.is-selected {
  outline: 2px solid var(--accent);
  box-shadow: 0 0 0 2px rgba(238, 245, 255, 0.2);
}

.stream-scene-item.is-hidden-layer {
  filter: grayscale(1);
  opacity: 0.28 !important;
  outline-style: dotted;
}

.stream-scene-item.is-locked {
  cursor: not-allowed;
  outline-color: rgba(238, 245, 255, 0.48);
}

.stream-scene-item.is-image {
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  padding: 0;
}

.stream-scene-item.is-fill {
  padding: 0;
}

.stream-scene-item__resize {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 18px;
  height: 18px;
  border-radius: 4px 0 0 0;
  background: rgba(238, 245, 255, 0.95);
  cursor: nwse-resize;
}

.stream-inspector__empty {
  color: var(--muted);
  line-height: 1.7;
}

.stream-inspector__content,
.stream-inspector__stack {
  display: grid;
  gap: 12px;
}

.stream-inspector label,
.stream-scene-meta label {
  display: grid;
  gap: 8px;
  color: var(--muted);
}

.stream-inspector input,
.stream-inspector select,
.stream-inspector textarea,
.stream-scene-meta input {
  border-radius: var(--control-radius-lg);
  border: 1px solid var(--border-control);
  background: var(--surface-control);
  color: var(--text);
  padding: 12px 14px;
  font: inherit;
}

.stream-inspector input[type="color"] {
  min-height: 44px;
  width: 100%;
  padding: 4px;
  cursor: pointer;
}

.stream-inspector input[type="color"]::-webkit-color-swatch-wrapper {
  padding: 0;
}

.stream-inspector input[type="color"]::-webkit-color-swatch {
  border: 0;
  border-radius: calc(var(--control-radius-lg) - 4px);
}

.stream-inspector input[type="color"]::-moz-color-swatch {
  border: 0;
  border-radius: calc(var(--control-radius-lg) - 4px);
}

.stream-advanced-panel {
  display: grid;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid rgba(123, 161, 219, 0.14);
  background: rgba(4, 11, 20, 0.32);
}

.stream-advanced-panel summary {
  cursor: pointer;
  color: var(--text-neutral);
  font-weight: 800;
}

.stream-advanced-panel[open] summary {
  margin-bottom: 10px;
}

.stream-inspector__section {
  display: grid;
  gap: 10px;
  padding: 12px 0;
  border-top: 1px solid rgba(123, 161, 219, 0.12);
}

.stream-inspector__section:first-child {
  border-top: 0;
  padding-top: 0;
}

.stream-inspector__section-header {
  display: grid;
  gap: 4px;
}

.stream-inspector__section-header h3 {
  margin: 0;
  font-size: 1rem;
}

.stream-inspector__section-header small {
  color: var(--muted);
}

.stream-inspector__grid--compact {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.stream-transform-panel {
  background: rgba(9, 21, 35, 0.78);
  border: 1px solid rgba(238, 245, 255, 0.18);
  border-radius: var(--radius-lg);
  padding: 16px;
}

.stream-layer-list {
  display: grid;
  gap: 8px;
  min-height: 360px;
  max-height: min(62vh, 760px);
  overflow: auto;
}

.stream-layer-row {
  position: relative;
  border: 1px solid rgba(123, 161, 219, 0.14);
  border-radius: var(--radius-lg);
  background: rgba(4, 11, 20, 0.56);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 8px 10px;
}

.stream-layer-row::before,
.stream-layer-row::after {
  content: "";
  position: absolute;
  left: 10px;
  right: 10px;
  height: 2px;
  background: var(--accent);
  box-shadow: 0 0 10px rgba(83, 208, 255, 0.45);
  opacity: 0;
  pointer-events: none;
}

.stream-layer-row::before {
  top: -6px;
}

.stream-layer-row::after {
  bottom: -6px;
}

.stream-layer-row.is-drop-before::before,
.stream-layer-row.is-drop-after::after {
  opacity: 1;
}

.stream-layer-row__drag-handle {
  width: 16px;
  height: 30px;
  cursor: grab;
  opacity: 0.7;
  background-image: radial-gradient(circle, var(--text-neutral) 1.3px, transparent 1.5px);
  background-position: 0 1px;
  background-size: 6px 6px;
}

.stream-layer-row.is-dragging .stream-layer-row__drag-handle {
  cursor: grabbing;
}

.stream-layer-row span {
  color: var(--muted);
  font-size: 0.9rem;
}

.stream-layer-row__main {
  border: 0;
  background: transparent;
  color: var(--text);
  text-align: left;
  padding: 0;
  display: grid;
  gap: 3px;
  cursor: pointer;
}

.stream-layer-row__actions {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.stream-layer-row.is-selected {
  border-color: rgba(238, 245, 255, 0.35);
  box-shadow: inset 0 0 0 1px rgba(238, 245, 255, 0.08);
}

.stream-layer-row.is-hidden .stream-layer-row__main,
.stream-layer-row.is-locked .stream-layer-row__main {
  opacity: 0.68;
}

.stream-scene-context-menu {
  position: fixed;
  z-index: 60;
  min-width: 232px;
  padding: 8px;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(123, 161, 219, 0.16);
  background: rgba(4, 11, 20, 0.96);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.38);
  display: grid;
  gap: 6px;
}

.stream-scene-context-group {
  display: grid;
  gap: 6px;
}

.stream-scene-context-group + .stream-scene-context-group {
  margin-top: 4px;
  padding-top: 8px;
  border-top: 1px solid rgba(123, 161, 219, 0.12);
}

.stream-scene-context-label {
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 2px 6px 0;
}

.admin-broadcast-panel :is(.panel__header p, .admin-meta, .empty-text, small),
.admin-broadcast-session-page :is(.panel__header p, .admin-broadcast-section-header p, .admin-meta, .empty-text, small, .checkbox-row span, .admin-form label, .admin-add-scene-form label, .broadcast-match-search__meta),
.stream-editor-panel--wide :is(.panel__header p, .stream-add-layer-toolbar span, .stream-inspector__empty, .stream-inspector label, .stream-scene-meta label, .stream-inspector__section-header small, .stream-layer-row span),
.stream-scene-context-label {
  color: var(--text-neutral);
}

.admin-broadcast-session-page :is(input, select, textarea, button, .admin-link-button, .admin-add-scene-form, .broadcast-match-search, .broadcast-match-result, .broadcast-drag-handle, .admin-list__row) {
  border-radius: 0;
}

.admin-broadcast-template-page :is(input, select, textarea, button, .admin-link-button) {
  border-radius: 0;
}

.stream-scene-context-menu button {
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--text);
  text-align: left;
  padding: 10px 12px;
  cursor: pointer;
}

.stream-scene-context-menu button:hover {
  background: rgba(21, 36, 58, 0.9);
}

.icon-button {
  position: relative;
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(123, 161, 219, 0.18);
  border-radius: 14px;
  background: rgba(12, 24, 40, 0.92);
  color: var(--text);
  display: inline-grid;
  place-items: center;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.16s ease, border-color 0.16s ease, transform 0.16s ease;
}

.icon-button:hover {
  background: rgba(26, 42, 66, 0.95);
  border-color: rgba(238, 245, 255, 0.36);
  transform: translateY(-1px);
}

.icon-button.is-confirmed {
  border-color: rgba(103, 212, 148, 0.5);
  background: rgba(20, 70, 48, 0.94);
}

.icon-button--ghost {
  width: 34px;
  height: 34px;
  border-radius: 11px;
  background: transparent;
  border-color: rgba(123, 161, 219, 0.12);
}

.icon-button--ghost:hover {
  background: rgba(21, 36, 58, 0.9);
}

.icon-button--toggle.is-active {
  border-color: rgba(83, 208, 255, 0.36);
  background: rgba(26, 56, 86, 0.72);
  color: var(--accent);
}

.icon-button--danger:hover {
  border-color: rgba(213, 84, 84, 0.4);
  background: rgba(66, 20, 20, 0.92);
}

.icon-button__badge {
  position: absolute;
  right: -7px;
  top: -7px;
  border: 1px solid rgba(83, 208, 255, 0.28);
  background: rgba(4, 16, 28, 0.96);
}

.icon-button svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}

.stream-binding-list {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid rgba(123, 161, 219, 0.16);
}

.stream-binding-list summary {
  cursor: pointer;
  color: var(--muted);
  font-weight: 700;
}

.stream-binding-list ul {
  list-style: none;
  padding: 0;
  margin: 12px 0 0;
  display: grid;
  gap: 10px;
}

.stream-binding-list li {
  padding: 12px 14px;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(123, 161, 219, 0.14);
  background: rgba(4, 11, 20, 0.46);
}

.broadcast-match-picker {
  display: grid;
  gap: 14px;
}

.broadcast-match-search {
  display: grid;
  gap: 14px;
  margin: 18px 0 24px;
  padding: 16px;
  border: 1px solid rgba(123, 161, 219, 0.16);
  background: rgba(4, 11, 20, 0.34);
}

.broadcast-match-search__meta,
.broadcast-match-search__paging,
.broadcast-match-result {
  display: flex;
  align-items: center;
  gap: 10px;
}

.broadcast-match-search__meta {
  justify-content: space-between;
  color: var(--muted);
  font-size: 0.9rem;
  flex-wrap: wrap;
}

.broadcast-match-search__meta > span {
  min-width: min(100%, 220px);
}

.broadcast-match-search__paging {
  flex-wrap: nowrap;
}

.broadcast-match-search__paging button,
.broadcast-match-result button {
  min-height: 34px;
  padding: 0 12px;
}

.broadcast-match-results {
  display: grid;
  gap: 8px;
}

.broadcast-match-result {
  justify-content: space-between;
  padding: 12px 14px;
  border: 1px solid rgba(123, 161, 219, 0.14);
  background: rgba(11, 22, 36, 0.72);
}

.broadcast-match-result div {
  display: grid;
  gap: 3px;
}

.broadcast-match-result small {
  color: var(--muted);
}

.broadcast-match-picker__title {
  margin: 0;
  font-size: 1rem;
  text-transform: uppercase;
}

.broadcast-match-card {
  padding: 16px 0;
  border-top: 1px solid rgba(123, 161, 219, 0.14);
  background: transparent;
}

.broadcast-match-card.is-selected {
  border-color: rgba(238, 245, 255, 0.34);
}

.broadcast-match-card.is-dragging {
  opacity: 0.45;
}

.broadcast-match-card__header {
  display: flex;
  gap: 16px;
  justify-content: space-between;
  align-items: start;
  margin-bottom: 14px;
}

.broadcast-match-card__title {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.broadcast-match-card__title strong,
.broadcast-match-card__title small {
  overflow-wrap: anywhere;
}

.broadcast-match-card__actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex: 0 0 auto;
}

.broadcast-match-remove {
  min-height: 44px;
  padding-inline: 14px;
}

.broadcast-drag-handle {
  border: 0;
  background: rgba(16, 34, 53, 0.88);
  border-radius: 12px;
  color: var(--muted);
  width: 44px;
  height: 44px;
  cursor: grab;
  font-weight: 900;
}

.broadcast-match-card__grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.broadcast-match-card__grid label:nth-child(1) {
  grid-column: span 2;
}

.broadcast-score-display span {
  min-height: 44px;
  display: flex;
  align-items: center;
  padding: 12px 14px;
  border: 1px solid rgba(123, 161, 219, 0.14);
  background: rgba(4, 11, 20, 0.28);
  color: var(--text);
  font-weight: 900;
}

.broadcast-custom-select {
  position: relative;
  display: block;
}

.broadcast-custom-select__button {
  width: 100%;
  min-height: 44px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  text-align: left;
}

.broadcast-custom-select__button::after {
  content: "";
  justify-self: end;
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid var(--muted);
  grid-column: 3;
}

.broadcast-custom-select__button img,
.broadcast-custom-select__menu img {
  width: 22px;
  height: 22px;
  object-fit: contain;
}

.broadcast-custom-select__menu {
  position: absolute;
  z-index: 40;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  display: none;
  max-height: 260px;
  overflow: auto;
  padding: 6px;
  border: 1px solid rgba(238, 245, 255, 0.28);
  background: rgba(5, 14, 25, 0.98);
  box-shadow: 0 18px 34px rgba(0, 0, 0, 0.42);
}

.broadcast-custom-select.is-open .broadcast-custom-select__menu {
  display: grid;
  gap: 4px;
}

.broadcast-custom-select__menu button {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  width: 100%;
  min-height: 38px;
  padding: 8px 10px;
  border: 0;
  background: transparent;
  color: var(--text);
  text-align: left;
}

.broadcast-custom-select__menu button:hover,
.broadcast-custom-select__menu button.is-selected {
  background: rgba(238, 245, 255, 0.1);
}

.broadcast-color-swatch {
  width: 22px;
  height: 22px;
  border: 1px solid rgba(255, 255, 255, 0.45);
  background: var(--broadcast-color);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.34);
}

.broadcast-map-input {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: 8px;
  align-items: stretch;
}

.broadcast-map-input__preview {
  width: 46px;
  min-height: 44px;
  border: 1px solid rgba(238, 245, 255, 0.2);
  background: rgba(4, 11, 20, 0.55);
  overflow: hidden;
}

.broadcast-map-input__preview[hidden] {
  display: none;
}

.broadcast-map-input__preview[hidden] + input {
  grid-column: 1 / -1;
}

.broadcast-map-input__preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.broadcast-race-select__control {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
}

.broadcast-race-select__control img {
  width: 22px;
  height: 22px;
  object-fit: contain;
}

.broadcast-match-games {
  grid-column: 1 / -1;
  display: grid;
  gap: 12px;
  margin-top: 4px;
  padding: 14px;
  border: 1px solid rgba(123, 161, 219, 0.16);
  background: rgba(4, 11, 20, 0.3);
}

.broadcast-match-games h3 {
  margin: 0;
  font-size: 0.95rem;
  text-transform: uppercase;
}

.broadcast-match-game-row {
  display: grid;
  grid-template-columns: minmax(190px, 1fr) minmax(300px, 2fr) minmax(140px, 0.85fr);
  gap: 10px;
  align-items: end;
}

.broadcast-match-game-players {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  align-items: stretch;
}

.broadcast-match-game-player {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(86px, 0.7fr);
  gap: 8px;
  align-items: end;
  padding: 10px;
  border: 1px solid rgba(123, 161, 219, 0.14);
  background: rgba(4, 11, 20, 0.28);
}

.broadcast-match-game-player > strong {
  grid-column: 1 / -1;
  color: var(--text);
  font-size: 0.9rem;
  overflow-wrap: anywhere;
}

@media (max-width: 760px) {
  .admin-broadcast-session-page {
    width: min(calc(100% - 24px), var(--max));
    padding: 18px;
  }

  .admin-broadcast-session-fields,
  .admin-broadcast-canvas-grid,
  .admin-broadcast-template-form > .stream-inspector__grid,
  .broadcast-match-card__grid,
  .broadcast-match-game-row,
  .broadcast-match-game-players,
  .broadcast-match-game-player {
    grid-template-columns: 1fr;
  }

  .broadcast-match-card__grid label:nth-child(1) {
    grid-column: auto;
  }

  .broadcast-match-search {
    padding: 12px;
  }

  .broadcast-match-search__meta,
  .broadcast-match-result {
    align-items: stretch;
  }

  .admin-subnav-summary {
    grid-template-columns: 1fr;
  }

  .admin-subnav-summary em {
    white-space: normal;
  }
}

.stream-layout-body {
  margin: 0;
  overflow: hidden;
  background: transparent;
}

.stream-scene-public {
  position: relative;
  overflow: hidden;
}

.stream-scene-public__canvas {
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  transform-origin: top left;
  background-position: center;
  background-size: cover;
}

.stream-render-item {
  position: absolute;
}

.stream-render-item--text {
  display: grid;
  align-content: center;
  box-sizing: border-box;
  color: #fff !important;
  padding: 12px;
  line-height: 1.1;
  white-space: pre-wrap;
}

.stream-render-item--html {
  align-content: stretch;
  white-space: normal;
}

.stream-matchup-widget {
  display: grid;
  gap: 14px;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 18px 22px;
  color: #fff;
}

.stream-matchup-widget h3 {
  margin: 0;
  color: #fff !important;
  font-size: 1.18em;
  font-weight: 900;
}

.stream-matchup-widget__rows {
  display: grid;
  gap: 10px;
  min-height: 0;
}

.stream-matchup-widget__row {
  display: grid;
  grid-template-columns: 156px minmax(0, 1fr) 58px;
  gap: 12px;
  align-items: center;
}

.stream-matchup-widget__label {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  min-width: 0;
  color: #fff !important;
  font-size: 0.86em;
  font-weight: 900;
  line-height: 1;
}

.stream-matchup-widget__label img {
  width: 32px;
  height: 32px;
  object-fit: contain;
}

.stream-matchup-widget__label span {
  color: #fff !important;
  font-size: 0.72em;
  font-weight: 800;
}

.stream-matchup-widget__track {
  min-width: 0;
}

.stream-matchup-widget__bar {
  display: flex;
  width: var(--target-bar-width, 0%);
  min-width: 18px;
  height: 22px;
  overflow: hidden;
  background: rgba(96, 118, 148, 0.34);
  border: 1px solid rgba(170, 188, 214, 0.36);
}

.stream-matchup-widget__bar span {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  overflow: hidden;
  color: #fff !important;
  font-size: 0.78em;
  font-weight: 950;
  line-height: 1;
  white-space: nowrap;
}

.stream-matchup-widget__bar .is-win {
  padding-left: 10px;
  background: #8bdc64;
}

.stream-matchup-widget__bar .is-loss {
  background: rgba(96, 118, 148, 0.58);
}

.stream-matchup-widget__row em {
  color: #fff !important;
  font-size: 0.74em;
  font-style: normal;
  font-weight: 850;
  text-align: right;
}

.stream-matchup-widget--empty {
  align-content: center;
}

.stream-matchup-widget--empty p {
  margin: 0;
  color: #fff !important;
  font-size: 0.84em;
  font-weight: 750;
}

.stream-render-item--image {
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.site-header,
.main-nav a,
.topline,
.button,
.admin-link-button,
.danger-button,
.form-actions a,
.pagination a,
.pagination span,
label,
summary,
.tag,
.badge,
.status-pill,
.admin-chip,
.stream-status,
.match-status,
.map-filter-chip,
.news-tag,
.race-select-option,
.live-ribbon__status,
.home-event-card,
.home-score-row,
.home-ladder-row,
.points-sidebar-row,
.bnet-ladder-row {
  font-weight: var(--font-medium);
}

.panel__header h2,
.page-header h1,
.detail-hero__body h1,
.map-detail-hero__body h1,
.news-detail__body h1,
.hero h1,
.home-hero-title,
.home-section__header h2,
.home-side-panel__header h2,
.home-news-row__body h3,
.news-card__body h3,
.competition-card h3,
.match-card h3,
.replay-row h3,
.game-row h3,
.player-card h3,
.player-card__title h3,
.map-directory-card__body h2,
.replay-card h2,
.stream-directory-card__main h2,
.identity-login-card__header h1,
.legal-document h2,
.api-token-panel h2,
.stream-inspector__section-header h3,
.tournament-bracket-section__title h3 {
  font-weight: var(--font-heading);
}

.panel__header p,
.page-header p,
.detail-hero__body p,
.map-detail-hero__body p,
.news-card__body p,
.home-news-row__body p,
.analysis-muted,
.empty-text,
.help-text,
.text-muted,
.metadata,
.admin-list__meta,
.replay-card__meta,
.player-card__meta {
  font-weight: var(--font-text);
}

.home-section__chevron,
.home-section__more,
.hero__eyebrow,
.live-ribbon__name,
.home-video-card__title,
.home-event-card__title,
.home-score-row__name,
.home-ladder-row__name,
.bnet-ladder-row__name,
.points-sidebar-row > span:last-child {
  font-weight: var(--font-bold);
}

@media (max-width: 960px) {
  .topline__inner,
  .main-nav,
  .site-footer__inner {
    flex-wrap: wrap;
  }

  .content-grid,
  .detail-grid,
  .admin-competition-overview,
  .admin-competition-form,
  .admin-competition-tournament-fieldset,
  .admin-add-scene-form,
  .map-detail-hero,
  .map-stat-grid,
  .admin-section-grid,
  .detail-hero,
  .player-grid,
  .player-directory,
  .player-profile-filter-bar,
  .player-match-filter,
  .stream-editor-topbar,
  .stream-editor-inspector-grid,
  .stream-scene-meta,
  .cookie-banner__inner,
  .map-directory {
    grid-template-columns: 1fr;
  }

  .admin-competition-flow__step,
  .admin-competition-tool {
    grid-template-columns: auto 1fr auto;
  }

  .admin-competition-flow__step small,
  .admin-competition-tool span {
    grid-column: 2 / -1;
  }

  .hero {
    min-height: 340px;
  }

  .hero--with-stream {
    min-height: 520px;
  }

  .hero__content {
    padding-top: var(--page-top);
    min-height: 340px;
  }

  .hero--with-stream .hero__content {
    min-height: 520px;
  }

  .hero-socials {
    position: static;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: 100%;
    margin-top: 18px;
  }

  .hero-social {
    justify-content: center;
  }

  .player-card {
    grid-template-columns: 92px minmax(108px, 146px) minmax(236px, 1fr);
    min-height: 150px;
    padding: 0 12px 0 16px;
  }

  .player-directory-toolbar {
    display: grid;
    align-items: stretch;
  }

  .player-directory-summary {
    justify-content: space-between;
    flex-wrap: wrap;
  }

  .player-directory-footer {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .player-directory-footer .pagination,
  .player-directory-summary--count,
  .player-directory-summary--races {
    justify-self: stretch;
    justify-content: center;
  }

  .competition-directory {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .competition-season-stage-list {
    grid-template-columns: 1fr;
  }

  .player-card__portrait {
    width: calc(100% + 34px);
    height: 158px;
    margin-left: -24px;
  }

  .player-card__rank > strong {
    min-width: 68px;
    min-height: 48px;
    font-size: 1.8rem;
  }

  .player-card__stats {
    grid-template-columns: repeat(2, minmax(58px, 1fr));
  }

  .player-card__title {
    grid-template-columns: minmax(0, 1fr) 1px 38px;
    column-gap: 8px;
  }

  .player-card__title::after {
    height: 30px;
  }

  .player-card__title .race-icon {
    width: 32px;
    height: 32px;
  }

  .cookie-banner__inner {
    display: grid;
  }

  .admin-list__row,
  .panel__header--with-action,
  .admin-add-scene-form,
  .admin-broadcast-session-fields,
  .stream-editor-layout,
  .broadcast-match-card__grid,
  .stream-scene-meta,
  .stream-editor-topbar,
  .stream-editor-inspector-grid,
  .homepage-top-grid {
    display: grid;
  }

  .live-ribbon,
  .home-dashboard,
  .home-competition-strip,
  .home-news-row,
  .home-video-carousel {
    grid-template-columns: 1fr;
  }

  .live-ribbon {
    width: min(calc(100% - 24px), var(--max));
    gap: 10px;
  }

  .home-dashboard {
    width: min(calc(100% - 24px), var(--max));
    padding: 0;
  }

  .home-dashboard__main,
  .home-dashboard__aside {
    padding: 18px;
  }

  .home-feature-card__link {
    max-width: none;
  }

  .home-news-row__image {
    min-height: 190px;
  }

  .homepage-top-grid {
    grid-template-columns: 1fr;
    padding-top: var(--page-top);
  }

  .panel--news .news-card {
    grid-template-columns: 1fr;
  }

  .panel--news .news-card__image {
    min-height: 150px;
  }

  .thumbnail-form {
    grid-template-columns: 1fr;
  }

  .page-header--compact,
  .map-filter-panel,
  .replay-filter-panel,
  .replay-save-filter,
  .replay-card {
    display: grid;
  }

  .map-filter-panel,
  .replay-filter-panel,
  .admin-broadcast-canvas-grid,
  .competition-advanced-filter__grid {
    grid-template-columns: 1fr;
  }

  .broadcast-match-card__grid label:nth-child(1) {
    grid-column: auto;
  }

  .admin-actions--news {
    grid-template-columns: 1fr;
    justify-content: stretch;
  }

  .admin-actions--news .admin-link-button,
  .admin-actions--news .danger-button {
    width: 100%;
    text-align: center;
  }

  .map-stat-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .player-stat-summary,
  .player-stat-breakdowns,
  .player-stat-table__row {
    grid-template-columns: 1fr;
  }

  .analysis-fact-row {
    grid-template-columns: 1fr;
    gap: 3px;
  }

  .analysis-result-card__summary {
    grid-template-columns: 1fr;
  }

  .analysis-result-card--replay .analysis-result-card__preview {
    width: min(100%, 240px);
    justify-self: center;
  }

  .table-like,
  .table-like__head,
  .table-like__row,
  .table-like--games .table-like__head,
  .table-like--games .table-like__row {
    display: grid;
    grid-template-columns: 1fr;
  }

  .replay-card,
  .player-profile-filter-bar,
  .player-match-filter,
  .player-match-card {
    grid-template-columns: 1fr;
  }

  .replay-card__header,
  .player-match-card {
    display: grid;
  }

  .replay-facts {
    grid-template-columns: 1fr;
  }

  .replay-versus {
    grid-template-columns: 1fr;
  }

  .replay-team,
  .replay-team--home,
  .replay-team--away {
    justify-items: center;
    text-align: center;
  }

  .replay-detail-panel__analysis-head {
    grid-template-columns: 1fr;
    justify-items: center;
  }

  .replay-detail-panel__notes {
    justify-content: center;
  }

  .replay-map-thumb__large {
    display: none;
  }

  .replay-filter-panel__wide {
    grid-column: auto;
  }

  .match-report-form__top {
    grid-template-columns: 1fr;
  }

  .map-directory-card__hover-preview {
    display: none;
  }

  .homepage-main-section {
    padding-top: var(--section-gap);
  }

  .brand {
    font-size: 1.2rem;
    letter-spacing: 0.16rem;
    gap: 10px;
  }

  .brand img {
    width: min(150px, 42vw);
    height: auto;
  }

  .hero h1 {
    font-size: clamp(1.35rem, 6vw, 2.6rem);
  }
}

@media (max-width: 1280px) and (min-width: 961px) {
  .map-directory {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 1100px) {
  .map-directory-shell {
    grid-template-columns: 1fr;
  }
}

.admin-maps-upload-grid > .panel {
  grid-column: 1 / -1;
}

.admin-maps-panel {
  width: min(calc(100% - 32px), var(--max));
  margin-inline: auto;
  border-radius: 0;
}

.admin-maps-panel__header {
  align-items: center;
}

.admin-maps-panel__header h1 {
  margin: 0;
}

.admin-maps-section {
  display: grid;
  gap: 16px;
}

.admin-maps-section + .admin-maps-section {
  padding-top: 22px;
  border-top: 1px solid rgba(123, 161, 219, 0.14);
}

.admin-maps-panel .admin-link-button,
.admin-maps-panel .danger-button,
.admin-maps-panel button,
.admin-maps-panel input,
.admin-maps-panel select,
.admin-maps-panel .analysis-dropzone,
.admin-maps-panel .admin-map-row,
.admin-maps-panel .admin-map-row__preview {
  border-radius: 0;
}

.admin-map-table {
  display: grid;
  gap: 12px;
}

.admin-map-row {
  align-items: center;
  background: rgba(7, 19, 38, 0.72);
  border: 1px solid rgba(137, 177, 223, 0.18);
  border-radius: 12px;
  display: grid;
  gap: 14px;
  grid-template-columns: 72px minmax(0, 1fr) minmax(260px, 420px);
  padding: 12px;
}

.admin-map-row__actions {
  align-items: center;
  display: grid;
  gap: 10px;
  justify-items: stretch;
}

.admin-map-row__preview {
  border-radius: 8px;
  display: block;
  overflow: hidden;
}

.admin-map-row__preview img {
  aspect-ratio: 1;
  display: block;
  object-fit: contain;
  width: 72px;
}

.admin-map-row__body h3 {
  margin: 0 0 4px;
}

.admin-map-row__body p,
.admin-map-row__body small {
  color: var(--muted);
  margin: 0;
}

.admin-map-row__form {
  align-items: center;
  display: grid;
  gap: 10px;
  grid-template-columns: minmax(0, 1fr) auto;
}

.stack-form select,
.admin-map-row__form select {
  appearance: none;
  background:
    linear-gradient(45deg, transparent 50%, #d8e7f7 50%) calc(100% - 18px) 50% / 7px 7px no-repeat,
    var(--surface-control);
  border: 1px solid var(--border-control);
  border-radius: var(--control-radius);
  color: #f4f8ff;
  font: inherit;
  min-height: 44px;
  padding: 10px 38px 10px 12px;
  width: 100%;
}

.stack-form select:focus,
.admin-map-row__form select:focus {
  border-color: var(--border-focus);
  box-shadow: var(--focus-ring);
  outline: 0;
}

@media (max-width: 860px) {
  .replay-filter-panel {
    grid-template-columns: 1fr;
  }

  .replay-filter-panel__saved,
  .replay-filter-panel__wide {
    grid-column: auto;
  }

  .replay-map-picker__panel {
    min-width: 0;
  }

  .player-directory-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .player-match-card__main {
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 12px;
  }

  .replay-card--match-style,
  .replay-match-card {
    height: auto;
  }

  .replay-card--match-style .replay-card__map,
  .replay-card--match-style .replay-map-thumb {
    height: 150px;
  }

  .player-match-card__players {
    grid-template-columns: 1fr auto 1fr;
    gap: 10px;
  }

  .player-match-card__players,
  .player-match-card__actions,
  .player-match-card__meta {
    justify-content: flex-start;
  }

  .player-match-card__meta {
    grid-template-columns: 1fr;
    flex-wrap: wrap;
    row-gap: 4px;
    padding-inline: 12px;
  }

  .player-match-card__meta > span:first-child,
  .player-match-card__meta > span:last-child,
  .replay-match-card__details {
    grid-column: 1;
    margin-left: 0;
    text-align: center;
  }

  .replay-match-card__details {
    justify-content: center;
  }

  .admin-map-row,
  .admin-map-row__form,
  .admin-map-row__actions {
    grid-template-columns: 1fr;
  }
}

.news-archive {
  margin-bottom: 18px;
}

.news-archive-shell {
  padding-top: var(--page-top);
}

.news-archive-page {
  overflow: hidden;
  border-radius: 0;
  background: rgba(31, 32, 38, 0.8);
  box-shadow: none;
}

.news-archive-page__header {
  margin-bottom: 22px;
}

.news-archive-page__header h1 {
  margin: 0;
  font-size: clamp(1.9rem, 2.5vw, 2.35rem);
}

.news-archive-page [data-live-search-results] {
  min-width: 0;
}

.news-archive-page .news-card,
.news-archive-page .news-card__image,
.news-archive-page .filter-bar input,
.news-archive-page .filter-bar select,
.news-archive-page .filter-chip,
.news-archive-page .tag-pill {
  border-radius: var(--radius-sharp);
}

.news-archive-page .news-card__meta,
.news-archive-page .filter-bar label,
.news-archive-page .filter-chip,
.news-archive-page .tag-pill {
  color: var(--text-neutral);
}

.filter-bar {
  align-items: end;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.filter-bar label {
  color: var(--muted);
  display: grid;
  flex: 1 1 210px;
  font-size: 0.9rem;
  font-weight: 700;
  gap: 7px;
  letter-spacing: 0.01em;
}

.filter-bar input,
.filter-bar select {
  appearance: none;
  background: var(--surface-control);
  border: 1px solid var(--border-control);
  border-radius: var(--control-radius);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  color: var(--text);
  min-height: 44px;
  padding: 10px 13px;
}

.filter-bar select {
  background-image:
    linear-gradient(45deg, transparent 50%, #dbe4f0 50%),
    linear-gradient(135deg, #dbe4f0 50%, transparent 50%);
  background-position:
    calc(100% - 18px) 19px,
    calc(100% - 12px) 19px;
  background-repeat: no-repeat;
  background-size: 6px 6px;
  padding-right: 38px;
}

.filter-bar input:focus,
.filter-bar select:focus {
  border-color: var(--border-focus);
  box-shadow: var(--focus-ring);
  outline: none;
}

.filter-bar button {
  background: var(--button-bg);
  border: 1px solid var(--border-accent);
  border-radius: 999px;
  color: var(--text);
  cursor: pointer;
  font-weight: 900;
  min-height: 44px;
  padding: 10px 18px;
}

.filter-bar button:hover {
  filter: brightness(1.08);
}

.news-list--archive {
  display: grid;
  gap: 18px;
}

.filter-chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

.filter-chip {
  border: 1px solid rgba(134, 178, 230, 0.22);
  border-radius: 999px;
  background: rgba(6, 14, 24, 0.62);
  color: var(--muted);
  font-size: 0.88rem;
  font-weight: 800;
  padding: 7px 11px;
  text-decoration: none;
}

.filter-chip:hover,
.filter-chip.is-active {
  border-color: rgba(238, 245, 255, 0.48);
  background: rgba(238, 245, 255, 0.13);
  color: var(--accent);
}

.mineral-amount {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.mineral-icon {
  width: 1.2em;
  height: 1.2em;
  flex: 0 0 auto;
  object-fit: contain;
  vertical-align: -0.18em;
}

.mineral-amount--large .mineral-icon {
  width: 1.35em;
  height: 1.35em;
}

.points-sidebar-list,
.rating-sidebar-list,
.rating-leaderboard,
.points-leaderboard,
.points-transaction-list,
.admin-points-list {
  display: grid;
  gap: 0.65rem;
}

.points-sidebar-row,
.rating-sidebar-row,
.rating-row,
.points-row,
.points-transaction-row,
.admin-points-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.8rem;
  padding: 0.75rem 0.9rem;
  color: inherit;
  text-decoration: none;
  border: 1px solid rgba(126, 185, 255, 0.18);
  border-radius: 14px;
  background: rgba(5, 18, 32, 0.54);
}

.points-sidebar-list--home .points-sidebar-row,
.rating-sidebar-list .rating-sidebar-row,
.bnet-ladder-list .bnet-ladder-row,
.latest-results-list--home .latest-result-row {
  min-height: 38px;
  border-color: var(--designer-border);
  background: var(--designer-panel);
  color: #fff;
  padding: 8px 12px;
}

.points-sidebar-list--home .points-sidebar-row,
.rating-sidebar-list .rating-sidebar-row,
.bnet-ladder-list .bnet-ladder-row {
  grid-template-columns: 34px minmax(0, 1fr) auto;
  border-radius: 7px;
  font-size: 0.92rem;
}

.points-sidebar-list--home .points-sidebar-row:hover,
.rating-sidebar-list .rating-sidebar-row:hover,
.bnet-ladder-list .bnet-ladder-row:hover,
.latest-results-list--home .latest-result-row:hover {
  border-color: var(--designer-blue);
  background: var(--designer-blue);
  transform: none;
}

.points-sidebar-list--home .points-sidebar-row > span:last-child {
  font-weight: 900;
}

.player-profile-info-points .points-history-chart,
.player-profile-info-points .points-transaction-row,
.player-profile-info-points .info-tooltip {
  border-radius: 0;
}

.player-profile-info-points .points-transaction-list {
  gap: 8px;
}

.player-profile-info-points .empty-text {
  color: var(--text-neutral);
}

.player-profile-info-points .points-transaction-row {
  grid-template-columns: minmax(84px, auto) minmax(96px, auto) minmax(0, 1fr) auto;
  gap: 16px;
  min-height: 44px;
  padding: 9px 12px;
  background: rgba(5, 18, 32, 0.42);
}

.points-transaction-row__delta,
.points-transaction-row__balance {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  white-space: nowrap;
}

.points-transaction-row__delta small,
.points-transaction-row__balance small {
  color: var(--text-neutral);
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.points-transaction-row__delta strong,
.points-transaction-row__balance strong {
  color: inherit;
  font-size: 0.98rem;
  font-weight: 950;
}

.points-transaction-row__balance strong {
  color: var(--text);
}

.points-transaction-row__reason {
  min-width: 0;
  overflow: hidden;
  color: var(--text-neutral);
  font-weight: 750;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.player-profile-info-points .points-transaction-row time {
  color: var(--text-neutral);
  font-size: 0.82rem;
  font-weight: 800;
  white-space: nowrap;
}

.rating-sidebar-list .rating-sidebar-row > span:last-child,
.rating-row__rating {
  color: #fff;
  font-weight: 900;
}

.rating-leaderboard__header,
.rating-row {
  grid-template-columns: 62px minmax(0, 1fr) 112px 92px 104px;
}

.rating-leaderboard__header {
  display: grid;
  align-items: center;
  gap: 0.8rem;
  padding: 0 0.9rem 0.15rem;
  color: rgba(168, 205, 255, 0.78);
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.rating-leaderboard__header span:nth-child(n + 3),
.rating-row__rating,
.rating-row__matches,
.rating-row__record {
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.rating-row__player {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rating-row__matches,
.rating-row__record {
  color: rgba(238, 245, 255, 0.84);
  font-weight: 850;
}

.rating-row__rank {
  color: rgba(238, 245, 255, 0.72);
  font-weight: 900;
}

@media (max-width: 640px) {
  .page-header,
  .page-header--compact,
  .panel__header,
  .panel__header--with-action,
  .home-dashboard,
  .home-dashboard__main,
  .home-dashboard__aside,
  .home-section,
  .home-feature-card,
  .home-feature-card__link,
  .home-video-widget,
  .home-video-carousel,
  .player-directory-toolbar,
  .competition-directory-toolbar,
  .map-filter-panel,
  .replay-filter-panel,
  .competition-advanced-filter__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .page-header,
  .page-header--compact,
  .panel__header--with-action {
    align-items: stretch;
  }

  .home-dashboard {
    width: min(100% - 20px, var(--max));
  }

  .home-dashboard__main,
  .home-dashboard__aside {
    min-width: 0;
    padding-inline: 14px;
  }

  .home-feature-card__link > * {
    max-width: 100%;
  }

  .home-video-pagination {
    grid-template-columns: 34px minmax(0, 1fr) 34px;
  }

  .home-video-pagination__pages {
    min-width: 0;
  }

  .home-video-pagination__page {
    width: min(34px, 11vw);
  }

  .home-video-pagination__page[aria-current="page"] {
    width: min(54px, 17vw);
  }

  .page-header__actions,
  .admin-actions,
  .competition-directory-toolbar,
  .player-directory-toolbar .filter-bar {
    flex-wrap: wrap;
    justify-content: stretch;
  }

  .page-header__actions > *,
  .admin-actions > *,
  .competition-directory-toolbar form,
  .player-directory-toolbar .filter-bar > *,
  .player-directory-toolbar select,
  .competition-directory-filter,
  .competition-directory-filter select {
    min-width: 0;
    width: 100%;
  }

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

  .replay-detail-panel,
  .replay-timeline,
  .match-game-card__body,
  .match-game-card__stats {
    min-width: 0;
  }

  .replay-detail-panel__analysis-head {
    grid-template-columns: minmax(0, 1fr);
    justify-items: stretch;
  }

  .replay-result-map-preview--analysis {
    justify-self: center;
    width: min(100%, 220px);
  }

  .replay-detail-panel__notes {
    justify-content: stretch;
  }

  .replay-detail-panel__notes > span,
  .replay-detail-panel__notes > a {
    width: 100%;
    min-width: 0;
    flex-wrap: wrap;
  }

  .replay-timeline {
    --replay-timeline-stage-height: min(260px, 68vw);
    overflow: hidden;
  }

  .replay-timeline__heading {
    margin-bottom: 8px;
  }

  .replay-timeline__tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
  }

  .replay-timeline__tabs button {
    min-width: 0;
    width: 100%;
    min-height: 40px;
    padding-inline: 8px;
    white-space: normal;
  }

  .replay-timeline__players,
  .replay-timeline__metrics,
  .replay-timeline__legend {
    max-height: none;
    min-height: 0;
    overflow: visible;
  }

  .replay-timeline__players,
  .replay-timeline__metrics {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 7px;
  }

  .replay-timeline__metric-group {
    margin-right: 0;
    padding-right: 0;
    border-right: 0;
  }

  .replay-timeline .replay-timeline__players label,
  .replay-timeline .replay-timeline__metrics label,
  .replay-timeline__legend span {
    min-width: 0;
    white-space: normal;
  }

  .replay-timeline__stage {
    max-height: none;
    min-height: 220px;
    border-radius: var(--radius-sharp);
  }

  .replay-timeline__canvas,
  .replay-timeline__content {
    border-radius: var(--radius-sharp);
  }

  .replay-chat-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;
  }

  .replay-build-order-row {
    grid-template-columns: 52px minmax(0, 1fr);
    gap: 4px 8px;
    align-items: start;
  }

  .replay-build-order-row__unit,
  .replay-build-order-row__kind,
  .replay-build-order-row__action {
    grid-column: 2;
  }

  .replay-build-order-row__kind,
  .replay-build-order-row__action {
    font-size: 0.82rem;
  }

  .replay-chat-row__player,
  .replay-chat-row__message,
  .replay-build-order-row__player,
  .replay-build-order-row__unit {
    min-width: 0;
  }

  .replay-action-share__header {
    align-items: flex-start;
    flex-direction: column;
    gap: 2px;
  }

  .replay-timeline__tooltip {
    max-width: calc(100vw - 44px);
  }

  .match-game-card summary,
  .match-game-card__summary,
  .match-game-card--expandable summary {
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
  }

  .match-game-card--expandable summary {
    position: relative;
    padding-right: 34px;
  }

  .match-game-card--expandable summary::after {
    position: absolute;
    top: 20px;
    right: 16px;
  }

  .match-game-card summary > .match-game-card__summary-text,
  .match-game-card__summary > .match-game-card__summary-text,
  .match-game-card__summary-text {
    grid-column: 1;
    min-width: 0;
  }

  .match-game-card summary > .match-game-card__map-link,
  .match-game-card__summary > .match-game-card__map-link,
  .match-game-card summary > .match-game-card__map-placeholder,
  .match-game-card__summary > .match-game-card__map-placeholder {
    display: none;
  }

  .match-game-card__quick-summary {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 7px;
  }

  .match-game-card__race-line {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
  }

  .match-game-card__race-line > span {
    min-width: 0;
    flex-wrap: wrap;
  }

  .match-game-card__race-line > span:nth-child(2) {
    color: var(--text-neutral);
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .player-card {
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
    padding: 0;
    background:
      linear-gradient(180deg, rgba(0, 85, 233, 0.92) 0, rgba(5, 22, 94, 0.94) 52%, #010307 100%),
      url("/images/scbw/player-profile-bg.webp") center / cover no-repeat;
  }

  .player-card__portrait {
    grid-row: auto;
    width: 100%;
    height: 180px;
    margin-left: 0;
    object-position: center 18%;
    filter: none;
  }

  .player-card__rank {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    justify-items: start;
    gap: 8px;
    margin: 0;
    padding: 12px 14px 0;
  }

  .player-card__rank > strong {
    min-width: 58px;
    min-height: 40px;
    font-size: 1.45rem;
  }

  .player-card__rank span {
    text-align: left;
  }

  .player-card__rank em {
    width: auto;
    text-align: right;
    font-size: 1.25rem;
  }

  .player-card__body,
  .player-card__stats {
    min-width: 0;
  }

  .player-card__body {
    margin-left: 0;
    padding: 12px 14px 16px;
  }

  .player-card__title {
    grid-template-columns: minmax(0, 1fr) 34px;
    column-gap: 8px;
  }

  .player-card__title::after {
    content: none;
  }

  .player-card__title .race-icon {
    grid-column: 2;
    width: 30px;
    height: 30px;
    justify-self: end;
  }

  .player-card__stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .player-match-card__main,
  .replay-match-card .player-match-card__main {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }

  .player-match-card__competition {
    max-width: 100%;
    white-space: normal;
  }

  .player-match-card__players {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    justify-items: stretch;
    max-width: none;
  }

  .player-match-card__score {
    order: 2;
    justify-self: center;
  }

  .player-match-card__player {
    width: 100%;
  }

  .player-match-card__player--home,
  .player-match-card__player--away {
    justify-content: center;
  }

  .player-match-card__player--home .player-match-card__portrait,
  .player-match-card__player--away .player-match-card__portrait {
    order: 1;
  }

  .player-match-card__player--home .player-match-card__link,
  .player-match-card__player--away .player-match-card__link {
    order: 2;
  }

  .player-match-card__player--home .player-match-card__races,
  .player-match-card__player--away .player-match-card__races {
    order: 3;
  }

  .player-match-card__actions {
    justify-content: stretch;
  }

  .player-match-card__more {
    flex: 1 1 auto;
  }

  .player-profile-info-points .points-transaction-row {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 6px 10px;
    align-items: start;
  }

  .player-profile-info-points .points-transaction-row time,
  .points-transaction-row__reason {
    grid-column: 1 / -1;
    white-space: normal;
  }

  .points-transaction-row__balance {
    justify-self: end;
  }

  .pagination {
    gap: 6px;
    margin-block: 18px;
    max-width: 100%;
  }

  .pagination a,
  .pagination button,
  .pagination__ellipsis {
    min-width: 34px;
    padding: 7px 10px;
  }

  .pagination__jump {
    flex-wrap: wrap;
    justify-content: center;
  }

  .pagination__jump input {
    max-width: 64px;
  }

  .season-mini-bracket,
  .season-mini-bracket--stage,
  .season-stage-block--wide .season-mini-bracket--stage {
    grid-auto-flow: row;
    grid-auto-columns: minmax(0, 1fr);
    grid-template-columns: minmax(0, 1fr);
    gap: 26px;
    overflow-x: visible;
    padding-inline: 0;
  }

  .season-mini-bracket__round,
  .season-mini-bracket--stage .season-mini-bracket__round {
    min-width: 0;
  }

  .season-mini-bracket__matches,
  .season-mini-bracket--stage .season-mini-bracket__matches,
  .season-stage-block--wide .season-mini-bracket--stage .season-mini-bracket__matches {
    grid-template-columns: minmax(0, 1fr);
  }

  .season-mini-bracket__match {
    min-width: 0;
  }

  .rating-leaderboard__header {
    display: none;
  }

  .rating-row {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
  }

  .rating-row__rank {
    grid-column: 1;
    grid-row: 1 / span 2;
  }

  .rating-row__player {
    grid-column: 2;
    grid-row: 1;
  }

  .rating-row__rating {
    grid-column: 3;
    grid-row: 1;
  }

  .rating-row__matches,
  .rating-row__record {
    grid-row: 2;
    text-align: left;
  }

  .rating-row__matches {
    grid-column: 2;
  }

  .rating-row__record {
    grid-column: 3;
    text-align: right;
  }
}

.latest-results-list--home {
  gap: 9px;
}

.latest-results-list--home .latest-result-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 92px;
  grid-template-rows: auto auto;
  gap: 4px 10px;
  border-radius: 7px;
}

.latest-results-list--home .latest-result-row__players {
  display: flex;
  align-items: center;
  gap: 6px;
  grid-column: 1;
  grid-row: 1;
  font-size: 0.78rem;
  min-width: 0;
  white-space: nowrap;
}

.latest-results-list--home .latest-result-row__players span {
  display: inline;
  flex: 0 0 auto;
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.68rem;
}

.latest-results-list--home .latest-result-row__meta {
  display: flex;
  flex-wrap: nowrap;
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.78rem;
  grid-column: 1;
  grid-row: 2;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
}

.latest-results-list--home .latest-result-row__players strong,
.latest-results-list--home .latest-result-row__meta span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.latest-results-list--home .latest-result-row__meta time {
  flex: 0 0 auto;
}

.latest-results-list--home .latest-result-row__score,
.latest-results-list--home .latest-result-row__spoiler {
  align-self: center;
  grid-column: 2;
  grid-row: 1 / span 2;
  justify-self: end;
  font-size: 0.76rem;
  font-weight: 900;
  text-align: center;
  white-space: nowrap;
  width: 100%;
}

.points-row:hover,
.rating-row:hover,
.points-sidebar-row:hover {
  border-color: rgba(238, 245, 255, 0.5);
  transform: translateY(-1px);
}

.points-sidebar-list--home .points-sidebar-row:hover {
  border-color: var(--designer-blue);
  background: var(--designer-blue);
  transform: none;
}

.admin-seed-input {
  width: 110px;
  margin-left: auto;
  padding: 8px 10px;
}

.player-stat-summary--inline div {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.8rem;
}

.admin-audit-list {
  display: grid;
  gap: 0.8rem;
}

.admin-audit-filter {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 12px;
  margin-bottom: 18px;
}

.admin-audit-filter label {
  display: grid;
  gap: 8px;
  min-width: min(100%, 320px);
  color: var(--muted);
}

.admin-audit-filter select {
  appearance: none;
  background:
    linear-gradient(45deg, transparent 50%, #d8e7f7 50%) calc(100% - 18px) 50% / 7px 7px no-repeat,
    var(--surface-control);
  border: 1px solid var(--border-control);
  border-radius: 0;
  color: #f4f8ff;
  font: inherit;
  min-height: 44px;
  padding: 10px 38px 10px 12px;
}

.admin-audit-filter select:focus {
  border-color: var(--border-focus);
  box-shadow: var(--focus-ring);
  outline: 0;
}

.admin-audit-panel,
.admin-audit-list,
.admin-audit-row,
.admin-audit-row pre,
.admin-audit-panel .admin-link-button {
  border-radius: 0;
}

.admin-audit-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1rem;
  align-items: start;
  border: 1px solid rgba(126, 185, 255, 0.18);
  background: rgba(5, 18, 32, 0.54);
  padding: 0.9rem 1rem;
}

.admin-audit-row details {
  margin-top: 0.6rem;
}

.admin-audit-row summary {
  cursor: pointer;
  color: var(--accent);
  font-weight: 800;
}

.admin-audit-row pre {
  max-height: 220px;
  overflow: auto;
  border: 1px solid rgba(126, 185, 255, 0.18);
  background: rgba(0, 8, 15, 0.62);
  color: var(--muted);
  padding: 0.8rem;
  white-space: pre-wrap;
  word-break: break-word;
}

.admin-audit-row__meta {
  display: grid;
  justify-items: end;
  gap: 0.35rem;
  color: var(--muted);
  font-size: 0.86rem;
  font-weight: 800;
  text-align: right;
}

.latest-results-list {
  display: grid;
  gap: 0.65rem;
}

.latest-result-row {
  display: grid;
  gap: 0.45rem;
  padding: 0.8rem 0.9rem;
  color: inherit;
  text-decoration: none;
  border: 1px solid rgba(126, 185, 255, 0.18);
  border-radius: 14px;
  background: rgba(5, 18, 32, 0.54);
}

.latest-result-row:hover {
  border-color: rgba(238, 245, 255, 0.5);
  text-decoration: none;
  transform: translateY(-1px);
}

.latest-result-row:hover .latest-result-row__players strong,
.latest-result-row:focus-visible .latest-result-row__players strong,
.latest-result-row:hover .latest-result-row__meta span,
.latest-result-row:focus-visible .latest-result-row__meta span {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

.latest-result-row:has(.latest-result-row__spoiler:hover) .latest-result-row__players strong,
.latest-result-row:has(.latest-result-row__spoiler:hover) .latest-result-row__meta span {
  text-decoration: none;
}

.latest-result-shell.is-spoiler-hidden .latest-result-row {
  border-color: rgba(238, 245, 255, 0.22);
  background: linear-gradient(135deg, rgba(5, 18, 32, 0.7), rgba(26, 19, 7, 0.46));
}

.latest-result-row__players {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: center;
  min-width: 0;
  font-size: 0.94rem;
}

.latest-result-row__players span {
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 800;
  text-transform: uppercase;
}

.latest-result-row__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.55rem;
  color: var(--muted);
  font-size: 0.78rem;
}

.latest-result-row__score {
  justify-self: start;
  color: var(--accent);
  font-size: 1.05rem;
  font-weight: 900;
  letter-spacing: 0.03em;
}

.latest-result-row__score.is-hidden {
  display: none;
}

.latest-result-row__spoiler {
  justify-self: start;
  border: 1px solid rgba(238, 245, 255, 0.32);
  border-radius: 0;
  padding: 0.25rem 0.55rem;
  color: var(--accent);
  font-size: 0.74rem;
  font-weight: 900;
  text-transform: uppercase;
}

.latest-result-row__spoiler[data-reveal-result] {
  cursor: pointer;
}

.latest-result-row__spoiler:not([data-reveal-result]),
.latest-result-reveal {
  display: none;
}

.latest-result-shell.is-result-revealed .latest-result-row__spoiler {
  display: none;
}

.latest-result-shell.is-result-revealed .latest-result-row__score {
  display: inline-block;
}

.latest-results-list--full {
  gap: 0.75rem;
}

.latest-results-list--full .latest-result-row {
  grid-template-rows: auto auto;
  gap: 0.42rem;
  padding: 0.72rem 0.9rem;
  border-radius: 0;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0)),
    rgba(15, 15, 17, 0.92);
}

.latest-results-list--full .latest-result-row__summary {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 0.75rem;
  align-items: center;
  min-width: 0;
}

.latest-results-list--full .latest-result-row__type {
  display: inline-grid;
  place-items: center;
}

.latest-results-list--full .latest-result-row__type .match-type-icon {
  width: 28px;
  height: 28px;
}

.latest-results-list--full .latest-result-row__players {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 0.85rem;
  align-items: center;
  min-width: 0;
  font-size: 1rem;
}

.latest-results-list--full .latest-result-row__player {
  display: inline-flex;
  align-items: center;
  gap: 0.42rem;
  min-width: 0;
}

.latest-results-list--full .latest-result-row__player--home {
  justify-content: flex-end;
}

.latest-results-list--full .latest-result-row__player--away {
  justify-content: flex-start;
}

.latest-results-list--full .latest-result-row__player strong {
  min-width: 0;
  overflow: hidden;
  color: #fff;
  font-weight: 950;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.latest-results-list--full .latest-result-row__portrait {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 50%;
  background: #fff;
}

.latest-results-list--full .latest-result-row__portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

.latest-results-list--full .latest-result-row__races {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 0.16rem;
}

.latest-results-list--full .latest-result-row__races .race-icon {
  width: 20px;
  height: 20px;
}

.latest-results-list--full .latest-result-row__score,
.latest-results-list--full .latest-result-row__spoiler {
  justify-self: center;
  white-space: nowrap;
}

.latest-results-list--full .latest-result-row__score {
  color: #fff;
  font-size: 1.12rem;
}

.latest-results-list--full .latest-result-row__meta {
  justify-content: center;
  padding-left: 42px;
  text-align: center;
}

.latest-results-list--full .latest-result-row:hover .latest-result-row__player strong,
.latest-results-list--full .latest-result-row:focus-visible .latest-result-row__player strong {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

.latest-results-list--full .latest-result-row:hover .latest-result-row__meta span,
.latest-results-list--full .latest-result-row:focus-visible .latest-result-row__meta span {
  text-decoration: none;
}

@media (max-width: 760px) {
  .latest-results-list--full .latest-result-row__summary {
    grid-template-columns: 1fr;
    justify-items: center;
  }

  .latest-results-list--full .latest-result-row__players {
    grid-template-columns: 1fr;
    justify-items: center;
  }

  .latest-results-list--full .latest-result-row__player,
  .latest-results-list--full .latest-result-row__player--home,
  .latest-results-list--full .latest-result-row__player--away {
    justify-content: center;
  }

  .latest-results-list--full .latest-result-row__meta {
    padding-left: 0;
  }
}

.points-row__rank {
  color: #dbe4f0;
  font-weight: 800;
}

.admin-points-row {
  grid-template-columns: minmax(180px, 1fr) minmax(320px, 2fr);
}

.admin-points-layout,
.admin-points-grid {
  display: grid;
  grid-template-columns: minmax(280px, 0.9fr) minmax(360px, 1.4fr);
  gap: var(--section-gap);
}

.admin-points-layout {
  padding: 0 0 var(--page-bottom);
}

.admin-points-panel {
  width: min(calc(100% - 32px), var(--max));
  margin-inline: auto;
}

.admin-points-history-panel {
  grid-column: 1 / -1;
}

.admin-points-section {
  min-width: 0;
}

.admin-points-picker-panel,
.admin-points-adjust-panel {
  align-self: start;
}

.admin-points-history-panel {
  padding-top: 20px;
  border-top: 1px solid rgba(123, 161, 219, 0.14);
}

.admin-player-pick {
  display: grid;
  gap: 14px;
}

.admin-player-pick__results {
  display: grid;
  gap: 10px;
}

.admin-player-option {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  border: 1px solid rgba(126, 185, 255, 0.18);
  border-radius: var(--radius-lg);
  background: rgba(5, 18, 32, 0.54);
  color: inherit;
  cursor: pointer;
  font: inherit;
  padding: 10px;
  text-align: left;
}

.admin-player-option:hover,
.admin-player-option.is-selected {
  border-color: rgba(238, 245, 255, 0.5);
  background: rgba(238, 245, 255, 0.1);
}

.admin-player-option strong,
.admin-player-option small {
  display: block;
}

.admin-player-option small {
  color: var(--muted);
  margin-top: 3px;
}

.analysis-import-map-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
}

.analysis-import-map-form small {
  color: var(--muted);
}

.admin-points-adjust {
  display: grid;
  grid-template-columns: 110px 1fr auto;
  gap: 0.6rem;
}

.admin-points-adjust--single {
  grid-template-columns: minmax(130px, 180px) minmax(220px, 1fr) auto;
  align-items: end;
}

.admin-points-adjust--single label {
  display: grid;
  gap: 8px;
  color: var(--muted);
}

.admin-points-adjust input,
.admin-points-adjust button {
  min-width: 0;
}

.admin-points-adjust input {
  border: 1px solid rgba(126, 185, 255, 0.24);
  border-radius: var(--control-radius);
  background: rgba(3, 12, 22, 0.88);
  color: var(--text);
  font: inherit;
  min-height: 42px;
  padding: 10px 12px;
}

.admin-points-adjust input:focus {
  border-color: var(--border-focus);
  box-shadow: var(--focus-ring);
  outline: none;
}

.admin-points-adjust button {
  border: 1px solid var(--border-accent);
  border-radius: 999px;
  background: var(--button-bg);
  color: var(--text);
  cursor: pointer;
  font: inherit;
  font-weight: 800;
  min-height: 42px;
  padding: 10px 16px;
}

.admin-points-adjust button:hover {
  filter: brightness(1.08);
}

.points-history-chart {
  min-height: 180px;
  margin: 0.5rem 0 1rem;
  padding: 0.75rem;
  border: 1px solid rgba(126, 185, 255, 0.16);
  border-radius: 14px;
  background: rgba(2, 10, 18, 0.44);
}

.points-history-chart svg {
  width: 100%;
  height: auto;
  display: block;
}

.points-history-chart circle {
  fill: #dbe4f0;
  stroke: #06101d;
  stroke-width: 2;
}

.player-rating-panel {
  display: grid;
  gap: 14px;
}

.player-rating-panel__header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  min-height: 0;
  padding-block: 10px;
}

.player-rating-panel__description {
  min-width: 0;
}

.player-rating-panel__header p {
  margin: 0;
  color: rgba(255, 255, 255, 0.62);
  line-height: 1.45;
}

.player-rating-panel__current {
  display: flex;
  align-items: baseline;
  gap: 10px;
  min-width: max-content;
  justify-content: flex-end;
  color: rgba(255, 255, 255, 0.72);
  text-transform: uppercase;
}

.player-rating-panel__current strong {
  color: #fff;
  font-size: clamp(1.45rem, 2.4vw, 2rem);
  line-height: 1;
}

.player-rating-panel__current small {
  color: var(--accent);
  font-size: 1rem;
  font-weight: 950;
}

@media (max-width: 640px) {
  .player-rating-panel__header {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }

  .player-rating-panel__current {
    justify-content: flex-start;
  }
}

.player-rating-chart {
  position: relative;
  min-height: 320px;
  padding: 16px 16px 8px;
  border: 1px solid rgba(126, 185, 255, 0.16);
  background: rgba(2, 10, 18, 0.44);
  overflow: hidden;
}

.player-rating-chart svg {
  display: block;
  width: 100%;
  height: auto;
}

.player-rating-chart__summary {
  position: absolute;
  top: 20px;
  right: 22px;
  display: grid;
  justify-items: end;
  z-index: 1;
  color: rgba(255, 255, 255, 0.62);
  text-transform: uppercase;
}

.player-rating-chart__summary strong {
  color: #fff;
  font-size: 1.75rem;
  line-height: 1;
}

.player-rating-chart__plot-bg {
  fill: rgba(255, 255, 255, 0.018);
}

.player-rating-chart__grid line {
  stroke: rgba(162, 194, 240, 0.14);
  stroke-width: 1;
}

.player-rating-chart__grid text,
.player-rating-chart__x-label {
  fill: rgba(255, 255, 255, 0.54);
  font-size: 14px;
  font-weight: 800;
}

.player-rating-chart__grid text {
  text-anchor: end;
}

.player-rating-chart__x-label {
  text-anchor: middle;
}

.player-rating-chart__line {
  fill: none;
  stroke: #dbe4f0;
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 9px rgba(34, 119, 255, 0.34));
  transition: stroke-dashoffset 0.85s cubic-bezier(0.2, 0.82, 0.22, 1);
}

.player-rating-chart__point {
  fill: var(--accent);
  stroke: #06101d;
  stroke-width: 3;
  transform-box: fill-box;
  transform-origin: center;
  transition: r 0.15s ease, fill 0.15s ease;
}

.player-rating-chart.is-animating .player-rating-chart__point {
  animation: player-rating-point-pop 0.32s ease both;
}

.player-rating-chart__point:hover {
  r: 6px;
  fill: #fff;
}

@keyframes player-rating-point-pop {
  from {
    opacity: 0;
    transform: scale(0.35);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

.points-positive {
  color: #7df2a0;
  font-weight: 800;
}

.points-negative {
  color: #ff8f8f;
  font-weight: 800;
}

.admin-list__row--scheduled {
  border-color: rgba(238, 245, 255, 0.5);
  background: linear-gradient(135deg, rgba(238, 245, 255, 0.1), rgba(6, 16, 29, 0.62));
}

.scheduled-news-icon {
  display: inline-grid;
  place-items: center;
  width: 1.6rem;
  height: 1.6rem;
  margin-right: 0.35rem;
  color: #06101d;
  background: #dbe4f0;
  border-radius: 999px;
  font-weight: 900;
}

.scheduled-news-note {
  display: inline-flex;
  margin: 0.35rem 0 0;
  padding: 0.35rem 0.6rem;
  border-radius: 999px;
  color: var(--text);
  background: rgba(238, 245, 255, 0.14);
}

@media (max-width: 760px) {
  .admin-points-layout,
  .admin-points-grid {
    grid-template-columns: 1fr;
  }

  .points-row,
  .points-transaction-row,
  .admin-points-row,
  .admin-points-adjust {
    grid-template-columns: 1fr;
  }
}

.news-card--archive {
  display: grid;
  grid-template-columns: minmax(180px, 280px) 1fr;
  overflow: hidden;
}

.news-card--archive .news-card__image {
  min-height: 170px;
}

.news-card__meta,
.news-detail__meta {
  color: var(--muted);
  font-size: 0.9rem;
}

.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 10px 0;
}

.tag-pill {
  border: 1px solid rgba(238, 245, 255, 0.28);
  border-radius: 999px;
  color: #dbe4f0;
  font-size: 0.85rem;
  padding: 4px 10px;
  text-decoration: none;
}

.tag-pill:hover,
.tag-pill.is-active {
  background: rgba(238, 245, 255, 0.14);
}

.news-archive-page .filter-chip:hover,
.news-archive-page .filter-chip.is-active,
.news-archive-page .tag-pill:hover,
.news-archive-page .tag-pill.is-active {
  color: var(--text-neutral);
}

.responsive-embed {
  aspect-ratio: 16 / 9;
  border-radius: 12px;
  margin: 18px 0;
  overflow: hidden;
}

.responsive-embed iframe {
  border: 0;
  height: 100%;
  width: 100%;
}

.pagination {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin: 22px 0;
}

.pagination a,
.pagination button,
.pagination__ellipsis {
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 10px;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  font: inherit;
  min-width: 38px;
  padding: 8px 12px;
  text-align: center;
  text-decoration: none;
}

.pagination a.is-disabled,
.pagination button.is-disabled,
.pagination button:disabled {
  cursor: default;
  opacity: 0.45;
  pointer-events: none;
}

.pagination a.is-active,
.pagination a:hover,
.pagination button.is-active,
.pagination button:hover,
.pagination__ellipsis:hover,
.pagination__ellipsis:focus-visible {
  background: rgba(238, 245, 255, 0.14);
  border-color: rgba(238, 245, 255, 0.5);
}

.pagination__ellipsis {
  color: var(--muted);
}

.pagination__ellipsis.is-hidden,
.pagination__jump-slot.is-jump-active > .pagination__ellipsis {
  display: none;
}

.pagination__jump-slot {
  display: inline-flex;
  align-items: center;
}

.pagination__jump.is-hidden {
  display: none;
}

.pagination__jump {
  align-items: center;
  display: inline-flex;
  gap: 8px;
}

.pagination__jump input {
  max-width: 76px;
  min-height: 38px;
  padding: 8px 10px;
  text-align: center;
}

.pagination__jump button {
  min-height: 38px;
}

@media (max-width: 760px) {
  .map-pagination-bar,
  .competition-pagination-bar {
    grid-template-columns: 1fr;
    justify-items: center;
  }

  .map-pagination-bar .pagination,
  .competition-pagination-bar .pagination {
    grid-column: 1;
  }

  .map-pagination-bar #map-results-text,
  .competition-pagination-bar #competition-results-text {
    justify-self: center;
    text-align: center;
  }

  .news-card--archive {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 960px) {
  .player-profile-showcase__top,
  .player-profile-showcase__identity {
    align-items: flex-start;
    flex-direction: column;
  }

  .player-profile-showcase__separator {
    display: none;
  }

  .player-profile-showcase__hero img {
    width: min(76%, 340px);
  }

  .player-profile-showcase__stats {
    padding: 18px 18px 44px;
  }

  .player-profile-stat-cards,
  .player-profile-chart-grid {
    grid-template-columns: 1fr;
  }

  .player-profile-chart-grid {
    gap: 30px;
    padding: 0;
  }

  .player-profile-matchup-card {
    padding-left: 0;
    padding-bottom: 0;
    border-left: 0;
  }

  .player-profile-matchup-card h2 {
    margin-left: 0;
  }

  .player-profile-map-results {
    padding-inline: 0;
  }

  .player-profile-showcase__tabs {
    flex-wrap: wrap;
  }

  .player-profile-showcase__tabs strong {
    width: 100%;
    margin-left: 0;
  }

  .player-profile-tab-filter,
  .player-profile-season-filter {
    width: 100%;
    margin-left: 0;
  }

  .player-profile-tab-filter select,
  .player-profile-season-filter select {
    max-width: 100%;
  }

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

  .player-profile-info-list div {
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;
  }

  .player-points-panel__header {
    align-items: flex-start;
    flex-direction: column;
  }

  .player-profile-matchup-axis-line {
    margin-left: 0;
  }
}

@media (max-width: 1180px) {
  .season-page {
    width: min(100%, calc(100vw - 28px));
  }

  .season-week-toolbar {
    grid-template-columns: 1fr;
    justify-items: stretch;
  }

  .season-week-picker {
    justify-items: start;
    text-align: left;
  }

  .season-result-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
  }

  .season-stage-block-grid,
  .season-stage-block-grid--dense {
    grid-template-columns: 1fr;
  }

  .season-stage-block--wide {
    grid-column: auto;
  }

  .season-stage-block--wide .season-result-grid--stage {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .season-hero__top,
  .season-week-tournament__head {
    align-items: stretch;
    flex-direction: column;
  }

  .season-hero__top,
  .season-tabs,
  .season-content-card {
    padding-inline: 18px;
  }

  .season-tabs {
    flex-wrap: wrap;
    min-height: 0;
    padding-block: 10px;
  }

  .season-tab {
    height: 46px;
    padding: 0 14px;
    font-size: 0.95rem;
  }

  .season-result-grid {
    grid-template-columns: 1fr;
  }

  .season-result-grid--stage,
  .season-stage-block--wide .season-result-grid--stage {
    grid-template-columns: 1fr;
  }

  .season-mini-bracket {
    gap: 28px;
    padding-inline: 0;
  }

  .season-stage-block--wide .season-mini-bracket--stage {
    gap: 28px;
    padding-inline: 0;
  }

  .season-mini-bracket--stage .season-mini-bracket__matches,
  .season-stage-block--wide .season-mini-bracket--stage .season-mini-bracket__matches {
    grid-template-columns: 1fr;
  }

  .season-jump-select,
  .season-week-select {
    width: 100%;
    min-width: 0;
  }
}