/* Sidebar-led AIM/WARMUP shell based on the approved Ember concept. */
html[data-site-theme="dark"] {
  color-scheme: dark;
  --bg: #0c0a0a;
  --panel: #151110;
  --panel-2: #1c1513;
  --line: #4b342c;
  --text: #f6f0ee;
  --muted: #b2a49e;
  --lime: #ff825b;
  --cyan: #ffad82;
  --amber: #ff9a70;
  --red: #fa665d;
}

html[data-site-theme="dark"] body {
  background: radial-gradient(ellipse at 72% -10%, #35180f 0, transparent 44%), #0c0a0a;
}

html[data-site-theme="dark"] .theme-swatch-blackgreen {
  background: linear-gradient(135deg, #16d6ec 0 34%, #52616b 34% 67%, #111820 67%);
}
/* Shared shell palette tokens: Ember is the reference; each other theme owns its surfaces and accents. */
html[data-site-theme="dark"] {
  --shell-bg:#0c0a0a; --shell-surface:#151110; --shell-surface-2:#1c1513; --shell-topbar-start:#17100f; --shell-topbar-end:#0e0c0c;
  --shell-frame:#4b342c; --shell-frame-soft:#56392d; --shell-frame-strong:#704531;
  --shell-hover:#261610; --shell-hover-edge:#70453188; --shell-hover-text:#fff6f1;
  --shell-accent:#ff825b; --shell-accent-2:#ff865d; --shell-accent-3:#ff744e;
  --shell-accent-soft:#ff966d; --shell-accent-warm:#ffad82; --shell-accent-gold:#ffad62;
  --shell-active-text:#170d09; --shell-text:#f3eae5; --shell-muted:#b2a49e;
  --shell-secondary:#e7dfdc; --shell-divider:#382923; --shell-track:#604238;
  --shell-shadow:#ff75422c; --shell-wash:#ff825b22; --shell-grid:#ff825b22;
  --shell-hero:#171111; --shell-hero-2:#100e0e; --shell-hero-3:#090a0c; --shell-promo:#391d16; --shell-ink:#05080b;
}
html[data-site-theme="arena"] {
  --shell-bg:#06131f; --shell-surface:#0a1b29; --shell-surface-2:#0d2233; --shell-topbar-start:#0a1b29; --shell-topbar-end:#06131f;
  --shell-frame:#244258; --shell-frame-soft:#28516b; --shell-frame-strong:#08bdf4;
  --shell-hover:#102a3a; --shell-hover-edge:#08bdf477; --shell-hover-text:#f2f7fb;
  --shell-accent:#08bdf4; --shell-accent-2:#25c8f5; --shell-accent-3:#008fc4;
  --shell-accent-soft:#83e4ff; --shell-accent-warm:#9af64b; --shell-accent-gold:#ffc83d;
  --shell-active-text:#06131f; --shell-text:#f2f7fb; --shell-muted:#a5b5c2;
  --shell-secondary:#c3d1dc; --shell-divider:#244258; --shell-track:#28516b;
  --shell-shadow:#08bdf433; --shell-wash:#08bdf422; --shell-grid:#08bdf422;
  --shell-hero:#0a1b29; --shell-hero-2:#081724; --shell-hero-3:#06131f; --shell-promo:#0d2d40; --shell-ink:#06131f;
}
html[data-site-theme="blackgreen"] {
  --shell-bg:#050706; --shell-surface:#0b0e0c; --shell-surface-2:#111512; --shell-topbar-start:#0b100c; --shell-topbar-end:#080b09;
  --shell-frame:#303832; --shell-frame-soft:#39483b; --shell-frame-strong:#9af64b;
  --shell-hover:#111b12; --shell-hover-edge:#9af64b66; --shell-hover-text:#f0f4f0;
  --shell-accent:#9af64b; --shell-accent-2:#a8ff61; --shell-accent-3:#72bf31;
  --shell-accent-soft:#b8ff7e; --shell-accent-warm:#9af64b; --shell-accent-gold:#c1f77d;
  --shell-active-text:#071006; --shell-text:#f0f4f0; --shell-muted:#a0aaa2;
  --shell-secondary:#d5dfdc; --shell-divider:#27342b; --shell-track:#425247;
  --shell-shadow:#9af64b22; --shell-wash:#9af64b20; --shell-grid:#9af64b20;
  --shell-hero:#101711; --shell-hero-2:#080b09; --shell-hero-3:#050706; --shell-promo:#152719; --shell-ink:#050706;
}
html[data-site-theme="vandal"] {
  --shell-bg:#151518; --shell-surface:#151518; --shell-surface-2:#2b2a2f; --shell-topbar-start:#1b1a1e; --shell-topbar-end:#151518;
  --shell-frame:#3b3a40; --shell-frame-soft:#4a484f; --shell-frame-strong:#ff2b3d;
  --shell-hover:#242328; --shell-hover-edge:#ff2b3d88; --shell-hover-text:#f3f1f3;
  --shell-accent:#ff2b3d; --shell-accent-2:#ff4352; --shell-accent-3:#d91f30;
  --shell-accent-soft:#ff6570; --shell-accent-warm:#ff8189; --shell-accent-gold:#ff8189;
  --shell-active-text:#151518; --shell-text:#f3f1f3; --shell-muted:#b5b2b7;
  --shell-secondary:#d5d2d6; --shell-divider:#343338; --shell-track:#4a484f;
  --shell-shadow:#ff2b3d2c; --shell-wash:#ff2b3d22; --shell-grid:#ff2b3d20;
  --shell-hero:#1b1a1e; --shell-hero-2:#151518; --shell-hero-3:#101013; --shell-promo:#242328; --shell-ink:#101013;
}

.app-shell {
  width: calc(100% - 24px);
  max-width: none;
  display: grid;
  grid-template-columns: clamp(238px, 14.45vw, 272px) minmax(0, 1fr) clamp(120px, 8vw, 160px);
  grid-template-rows: 68px minmax(0, 1fr) auto;
  align-items: start;
  column-gap: 20px;
  row-gap: 14px;
  margin: 20px auto;
}

.topbar {
  display: flex;
  grid-column: 2;
  grid-row: 1;
  width: 100%;
  min-width: 0;
  height: 68px;
  padding: 7px 12px;
  justify-content: flex-start;
  gap: 14px;
  border: 1px solid var(--shell-frame);
  background: linear-gradient(110deg, var(--shell-topbar-start), var(--shell-topbar-end) 68%);
  box-shadow: 0 8px 30px rgba(0,0,0,.25);
}

/* Earlier HUD rules keep the header as a two-row grid; restore the intended
   single-row layout so language follows Home and login stays at the far edge. */
html[data-site-theme] .app-shell > .topbar {
  display: flex !important;
  grid-template-columns: none !important;
  grid-template-rows: none !important;
  height: 68px !important;
  min-height: 68px !important;
  flex-wrap: nowrap;
  justify-content: flex-start;
}

.top-nav {
  min-width: 0;
  height: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-inline-end: 0;
}

.topbar .top-nav .nav-link {
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 9px 16px;
  border: 1px solid var(--shell-frame);
  background: var(--shell-surface);
  color: var(--shell-text);
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  transition: border-color .18s, background .18s, color .18s, transform .18s;
}

html[data-site-theme] .app-shell > .topbar .top-nav {
  order: 0;
  flex: 0 0 auto;
  margin-inline-end: 0 !important;
}

.topbar .top-nav .nav-link:hover,
.topbar .top-nav .nav-link:focus-visible,
.topbar .top-nav .nav-link[aria-current="page"] {
  border-color: var(--shell-accent);
  background: linear-gradient(180deg, var(--shell-surface-2), var(--shell-surface));
  color: var(--shell-accent-soft);
}

.top-nav-icon {
  color: var(--amber);
  font-size: 16px;
  line-height: 1;
}

.topbar .account-open-button {
  flex: 0 0 210px;
  min-width: 50px;
  width: 210px;
  margin-inline-start: auto;
  min-height: 42px;
  padding: 7px 10px;
  border-color: var(--shell-frame);
  background: var(--shell-surface);
}

.topbar .language-control {
  flex: 0 1 188px;
  min-width: 132px;
  min-height: 42px;
  justify-content: space-between;
  border-color: var(--shell-frame);
  border-radius: 0;
  background: var(--shell-surface);
}

.app-sidebar {
  grid-column: 1;
  grid-row: 1 / 4;
  position: sticky;
  top: 20px;
  width: 100%;
  height: calc(100dvh - 40px);
  min-height: 700px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 20px 11px 13px;
  border: 1px solid var(--shell-frame-soft);
  background:
    radial-gradient(ellipse at 0 0, color-mix(in srgb,var(--shell-accent) 16%,transparent) 0, transparent 32%),
    linear-gradient(155deg, var(--shell-surface-2) 0%, var(--shell-surface) 58%, var(--shell-bg) 100%);
  box-shadow: 0 18px 48px rgba(0,0,0,.32);
  clip-path: polygon(0 0, calc(100% - 23px) 0, 100% 23px, 100% 100%, 19px 100%, 0 calc(100% - 19px));
}

.sidebar-brand {
  min-height: 66px;
  flex: 0 0 auto;
  padding: 4px 9px 18px;
  border-bottom: 1px solid var(--shell-frame);
  font-size: 17px;
  letter-spacing: .035em;
  color: var(--shell-text);
}

.sidebar-brand .brand-mark {
  width: 35px;
  height: 35px;
  border: 1px solid var(--shell-accent);
}

.sidebar-brand .brand-mark span {
  width: 12px;
  height: 12px;
  background: var(--shell-accent);
  box-shadow: 0 0 16px var(--shell-accent);
}

.sidebar-nav {
  min-height: 0;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--shell-track) transparent;
}

.sidebar-group {
  padding: 13px 0 15px;
  border-bottom: 1px solid var(--shell-divider);
}

.sidebar-settings-group {
  margin-top: auto;
  border-top: 1px solid var(--shell-divider);
  border-bottom: 0;
}

.sidebar-group-title {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  padding: 0 9px 9px;
  color: var(--shell-accent);
  font: 700 10px/1.2 var(--display);
  letter-spacing: .14em;
}

.sidebar-group-title::after {
  content: "";
  height: 1px;
  flex: 1;
  background: linear-gradient(90deg, var(--shell-frame-soft), transparent);
}

.sidebar-link {
  width: 100%;
  min-height: 51px;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 14px;
  align-items: center;
  gap: 8px;
  padding: 9px 10px;
  border: 1px solid transparent;
  border-radius: 0;
  background: transparent;
  color: var(--shell-secondary);
  text-align: start;
  font-size: 13px;
  font-weight: 550;
  line-height: 1.25;
  transition: color .16s, background .16s, border-color .16s, box-shadow .16s;
}

/* Reset legacy top-navigation cues now that these controls live in the rail. */
.app-sidebar .sidebar-nav .sidebar-link[data-page-link] {
  border-color: transparent;
  border-radius: 0;
  background: transparent;
  color: var(--shell-secondary);
  box-shadow: none;
}

.app-sidebar .sidebar-nav .sidebar-link[data-page-link]:hover,
.app-sidebar .sidebar-nav .sidebar-link[data-page-link]:focus-visible {
  border-color: var(--shell-hover-edge);
  background: var(--shell-hover);
  color: var(--shell-hover-text);
}

.app-sidebar .sidebar-nav .sidebar-link[data-page-link="practice"],
.app-sidebar .sidebar-nav .sidebar-link[data-page-link="flashes"] {
  border-color: transparent;
  background: transparent;
  color: var(--shell-secondary);
}

.app-sidebar .sidebar-nav .sidebar-link[data-page-link="practice"]:hover,
.app-sidebar .sidebar-nav .sidebar-link[data-page-link="practice"]:focus-visible,
.app-sidebar .sidebar-nav .sidebar-link[data-page-link="flashes"]:hover,
.app-sidebar .sidebar-nav .sidebar-link[data-page-link="flashes"]:focus-visible {
  border-color: var(--shell-hover-edge);
  background: var(--shell-hover);
  color: var(--shell-hover-text);
}

.app-sidebar .sidebar-nav .sidebar-link[data-page-link][aria-current="page"] {
  border-color: var(--shell-accent);
  background: linear-gradient(105deg, var(--shell-accent-2), var(--shell-accent-3));
  color: var(--shell-active-text);
  font-weight: 750;
  box-shadow: 0 7px 20px var(--shell-shadow);
}

.app-sidebar .sidebar-nav .sidebar-link[data-page-link][aria-current="page"] .sidebar-icon,
.app-sidebar .sidebar-nav .sidebar-link[data-page-link][aria-current="page"] .sidebar-chevron {
  color: var(--shell-active-text);
}

.sidebar-icon {
  display: grid;
  place-items: center;
  color: var(--shell-accent);
  font: 700 22px/1 var(--display);
  text-align: center;
}

.sidebar-chevron {
  color: var(--shell-accent-soft);
  font-size: 19px;
  line-height: 1;
  opacity: .82;
}

.sidebar-link:hover,
.sidebar-link:focus-visible {
  border-color: var(--shell-hover-edge);
  background: var(--shell-hover);
  color: var(--shell-hover-text);
}

.sidebar-link[aria-current="page"],
body:has(#page-home.active) .sidebar-link[data-page-link="warmup"] {
  border-color: var(--shell-accent);
  background: linear-gradient(105deg, var(--shell-accent-2), var(--shell-accent-3));
  color: var(--shell-active-text);
  font-weight: 750;
  box-shadow: 0 7px 20px var(--shell-shadow);
}

.sidebar-link[aria-current="page"] .sidebar-icon,
body:has(#page-home.active) .sidebar-link[data-page-link="warmup"] .sidebar-icon,
.sidebar-link[aria-current="page"] .sidebar-chevron,
body:has(#page-home.active) .sidebar-link[data-page-link="warmup"] .sidebar-chevron {
  color: var(--shell-active-text);
}

.sidebar-theme-panel {
  flex: 0 0 auto;
  margin-top: 13px;
  padding: 15px 9px 14px;
  border: 1px solid var(--shell-frame-soft);
  background: linear-gradient(145deg, var(--shell-surface-2), var(--shell-surface) 72%);
}

.sidebar-theme-panel .sidebar-group-title {
  padding: 0 2px 12px;
}

.sidebar-theme-panel .sidebar-group-title::after {
  display: none;
}

.sidebar-theme-panel .theme-switch {
  width: 100%;
  justify-content: space-between;
  gap: 8px;
}

.sidebar-theme-panel .theme-swatch {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  border-color: var(--shell-frame);
}

.sidebar-theme-panel .theme-swatch[aria-pressed="true"] {
  border-color: var(--shell-accent);
  box-shadow: 0 0 0 3px var(--shell-bg), 0 0 0 4px var(--shell-accent);
}

main {
  grid-column: 2;
  grid-row: 2;
  width: 100%;
  min-width: 0;
}

.page {
  padding: 7px 0 32px;
}

#page-home .hero {
  min-height: clamp(470px, 59vh, 565px);
  grid-template-columns: minmax(0, .78fr) minmax(0, 1fr);
  border: 1px solid var(--shell-frame-soft);
  border-radius: 4px;
  background: linear-gradient(125deg, var(--shell-hero), var(--shell-surface) 58%, var(--shell-hero-3));
  box-shadow: 0 18px 48px rgba(0,0,0,.25);
}

#page-home .hero-copy {
  padding: clamp(30px, 3.6vw, 52px);
}

#page-home .hero h1 {
  color: var(--shell-text);
  font-size: clamp(43px, 4.2vw, 62px);
  font-style: italic;
  font-weight: 700;
  letter-spacing: -.055em;
  text-transform: uppercase;
}

#page-home .hero h1 span {
  color: var(--shell-accent);
}

/* Keep the selected red theme visible in the Home hero title. */
html[data-site-theme="vandal"] #page-home .hero h1 span {
  color: #ff2b3d !important;
}

/* Crosshair Library surfaces follow the active theme instead of the old navy palette. */
html[data-site-theme] #page-crosshairs .crosshair-library-feature {
  border-color: var(--shell-frame) !important;
  background:
    radial-gradient(ellipse at 92% 0, var(--shell-wash), transparent 52%),
    linear-gradient(120deg, var(--shell-surface-2), var(--shell-surface) 72%) !important;
  box-shadow: 0 18px 48px var(--shell-shadow) !important;
}

html[data-site-theme] #page-crosshairs .crosshair-library-feature h1 {
  color: var(--shell-text) !important;
}

html[data-site-theme] #page-crosshairs .crosshair-library-feature .form-intro {
  color: var(--shell-muted) !important;
}

html[data-site-theme] #page-crosshairs .crosshair-library-hero-art {
  border-color: var(--shell-frame-soft) !important;
  background-color: var(--shell-surface) !important;
}

html[data-site-theme] #page-crosshairs .crosshair-count-badge {
  border-color: var(--shell-frame-soft) !important;
  background: var(--shell-surface-2) !important;
}

html[data-site-theme] #page-crosshairs .crosshair-count-badge > strong {
  color: var(--shell-accent-soft) !important;
  text-shadow: 0 0 14px var(--shell-shadow) !important;
}

html[data-site-theme] #page-crosshairs .crosshair-filters button,
html[data-site-theme] #page-crosshairs .crosshair-search {
  border-color: var(--shell-frame) !important;
  background: var(--shell-surface-2) !important;
  color: var(--shell-muted) !important;
}

html[data-site-theme] #page-crosshairs .crosshair-filters button:hover,
html[data-site-theme] #page-crosshairs .crosshair-filters button[aria-pressed="true"] {
  border-color: var(--shell-accent) !important;
  background: var(--shell-wash) !important;
  color: var(--shell-accent-soft) !important;
}

html[data-site-theme] #page-crosshairs .crosshair-search input {
  color: var(--shell-text) !important;
}

html[data-site-theme] #page-crosshairs .crosshair-search input::placeholder {
  color: var(--shell-muted) !important;
}

html[data-site-theme] #page-crosshairs .crosshair-preset-card {
  border-color: var(--shell-frame) !important;
  background: linear-gradient(150deg, var(--shell-surface-2), var(--shell-surface)) !important;
}

html[data-site-theme] #page-crosshairs .crosshair-preset-card:hover {
  border-color: var(--shell-accent) !important;
  box-shadow: 0 12px 30px var(--shell-shadow) !important;
}

/* Fixed game identity colors, independent of the selected site theme. */
html[data-site-theme] #page-crosshairs .crosshair-game-tabs,
html[data-site-theme] #page-random-crosshair .crosshair-game-tabs {
  border-color: #56392d !important;
  background: #17100f !important;
  box-shadow: inset 0 1px 0 #ff825b12;
}

html[data-site-theme] #page-crosshairs .crosshair-game-tabs button[data-library-game="valorant"],
html[data-site-theme] #page-random-crosshair .crosshair-game-tabs button[data-random-crosshair-game="valorant"] {
  border: 1px solid #ff465566 !important;
  background: linear-gradient(115deg, #ff46551c, #bd39441c 55%, #30202b1c) !important;
  color: #ffd9dc !important;
  transition: background .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease;
}

html[data-site-theme] #page-crosshairs .crosshair-game-tabs button[data-library-game="cs2"],
html[data-site-theme] #page-random-crosshair .crosshair-game-tabs button[data-random-crosshair-game="cs2"] {
  border: 1px solid #f0ad3d66 !important;
  background: linear-gradient(115deg, #f0ad3d1c, #d77a281c 55%, #3539431c) !important;
  color: #ffe5ae !important;
}

html[data-site-theme] #page-crosshairs .crosshair-game-tabs button[data-library-game="valorant"].is-active,
html[data-site-theme] #page-random-crosshair .crosshair-game-tabs button[data-random-crosshair-game="valorant"].is-active {
  border-color: #ff4655 !important;
  background: linear-gradient(115deg, #ff4655, #bd3944 60%, #34212b) !important;
  color: #fff !important;
  box-shadow: 0 4px 16px #ff46552b !important;
}

html[data-site-theme] #page-crosshairs .crosshair-game-tabs button[data-library-game="cs2"].is-active,
html[data-site-theme] #page-random-crosshair .crosshair-game-tabs button[data-random-crosshair-game="cs2"].is-active {
  border-color: #f0ad3d !important;
  background: linear-gradient(115deg, #f0ad3d, #d77a28 60%, #343943) !important;
  color: #fff !important;
  box-shadow: 0 4px 16px #f0ad3d2b !important;
}

html[data-site-theme] #page-crosshairs .crosshair-game-tabs button[data-library-game]:hover,
html[data-site-theme] #page-random-crosshair .crosshair-game-tabs button[data-random-crosshair-game]:hover {
  filter: brightness(1.12);
}

#page-home .eyebrow {
  color: var(--shell-muted);
}

#page-home .status-dot {
  background: var(--shell-accent);
  box-shadow: 0 0 10px var(--shell-accent);
}

#page-home .hero-description {
  max-width: 410px;
  color: var(--shell-muted);
}

#page-home .button-primary {
  border-color: var(--shell-accent);
  border-radius: 0;
  background: var(--shell-accent);
  color: var(--shell-active-text);
  box-shadow: none;
}

#page-home .button-primary:hover {
  background: var(--shell-accent-2);
}

#page-home .button-secondary {
  border-color: var(--shell-frame);
  border-radius: 0;
  background: var(--shell-surface);
  color: var(--shell-text);
}

#page-home .button-secondary:hover {
  border-color: var(--shell-accent);
}

#page-home .hero-visual {
  min-height: 100%;
  background: var(--shell-ink);
}

#page-home .hero-visual:not([data-demo-playing="true"]) .visual-grid {
  opacity: .18;
  background-image: linear-gradient(color-mix(in srgb,var(--shell-accent) 13%,transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb,var(--shell-accent) 13%,transparent) 1px, transparent 1px);
}

#page-home .hero-visual .visual-ring {
  border-color: color-mix(in srgb,var(--shell-accent-warm) 40%,transparent);
  box-shadow: 0 0 32px var(--shell-wash), inset 0 0 40px color-mix(in srgb,var(--shell-accent) 8%,transparent);
}

#page-home .hero-promo {
  min-height: 104px;
  padding: 25px 24px 17px;
  border-top: 1px solid color-mix(in srgb,var(--shell-accent) 16%,transparent);
  background: linear-gradient(180deg, color-mix(in srgb,var(--shell-surface) 88%,transparent), color-mix(in srgb,var(--shell-bg) 96%,transparent));
}

#page-home .hero-promo-kicker,
#page-home .hero-promo-sequence {
  color: var(--shell-accent-gold);
}

#page-home .home-flash-announcement,
#page-home .home-crosshair-announcement {
  min-height: 230px;
  margin-top: 19px;
  overflow: hidden;
  border: 1px solid var(--shell-frame-soft);
  border-radius: 4px;
  background: linear-gradient(115deg, var(--shell-promo), var(--shell-surface) 48%, var(--shell-hero-3) 100%);
}

#page-home .home-flash-announcement {
  grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
}

#page-home .home-flash-art,
#page-home .home-crosshair-art {
  min-height: 230px;
}

#page-home .home-flash-copy,
#page-home .home-crosshair-copy {
  padding: clamp(23px, 3.2vw, 42px);
}

#page-home .home-flash-kicker,
#page-home .home-crosshair-kicker {
  color: var(--shell-accent-warm);
}

#page-home .home-flash-copy h2,
#page-home .home-crosshair-copy h2 {
  color: var(--shell-text);
}

.footer {
  grid-column: 2;
  grid-row: 3;
  width: 100%;
  margin-top: 0;
}

/* Keep the independence notice at the bottom, leaving the right ad rail empty. */
.site-legal-notice {
  grid-column: 2;
  grid-row: 4;
  width: 100%;
  margin: 0;
}

#page-about .page-heading {
  justify-content: flex-start;
  gap: 18px;
}

#page-about .page-heading .step-label {
  min-height: 42px;
  padding: 8px 14px;
  border: 1px solid var(--shell-frame-strong);
  background: linear-gradient(110deg, var(--shell-surface-2), var(--shell-surface));
  color: var(--shell-accent-warm);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .12em;
}

html[data-site-theme="arena"] .app-sidebar,
html[data-site-theme="blackgreen"] .app-sidebar,
html[data-site-theme="vandal"] .app-sidebar {
  background: linear-gradient(155deg, color-mix(in srgb, var(--panel) 94%, var(--lime) 6%), var(--bg));
  border-color: var(--line);
}

html[data-site-theme="arena"] .sidebar-group-title,
html[data-site-theme="blackgreen"] .sidebar-group-title,
html[data-site-theme="vandal"] .sidebar-group-title,
html[data-site-theme="arena"] .sidebar-icon,
html[data-site-theme="blackgreen"] .sidebar-icon,
html[data-site-theme="vandal"] .sidebar-icon {
  color: var(--lime);
}

html[data-site-theme="arena"] .sidebar-link[aria-current="page"],
html[data-site-theme="blackgreen"] .sidebar-link[aria-current="page"],
html[data-site-theme="vandal"] .sidebar-link[aria-current="page"] {
  border-color: var(--lime);
  background: var(--lime);
  color: #101414;
}

html[data-site-theme="arena"] .sidebar-link[aria-current="page"] .sidebar-icon,
html[data-site-theme="blackgreen"] .sidebar-link[aria-current="page"] .sidebar-icon,
html[data-site-theme="vandal"] .sidebar-link[aria-current="page"] .sidebar-icon {
  color: #101414;
}

html[data-site-theme="light"] .app-sidebar,
html[data-site-theme="light"] .topbar {
  border-color: #d5dfdc;
  background: linear-gradient(155deg, #fff, #f5f8f7);
}

html[data-site-theme="light"] .sidebar-brand,
html[data-site-theme="light"] .sidebar-group,
html[data-site-theme="light"] .sidebar-theme-panel {
  border-color: #d5dfdc;
}

html[data-site-theme="light"] .sidebar-brand,
html[data-site-theme="light"] .sidebar-link,
html[data-site-theme="light"] .topbar .top-nav .nav-link {
  color: #25312e;
}

@media (max-width: 1080px) {
  .app-shell {
    width: calc(100% - 24px);
    grid-template-columns: 211px minmax(0, 1fr) clamp(120px, 8vw, 140px);
    column-gap: 14px;
  }

  .topbar { gap: 8px; padding-inline: 8px; }
  html[data-site-theme] .app-shell > .topbar { flex-wrap: nowrap; }
  html[data-site-theme] .app-shell > .topbar .top-nav { order: 0; flex: 0 0 auto; }
  .topbar .account-open-button { flex-basis: 148px; width: 148px; }
  .topbar .top-nav .nav-link { padding-inline: 10px; }
  .topbar .language-control { flex-basis: 150px; }
  .sidebar-link { grid-template-columns: 28px minmax(0, 1fr) 12px; gap: 6px; font-size: 12px; }
}

@media (max-width: 850px) {
  .app-shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    gap: 10px;
    margin: 12px auto;
  }

  html[data-site-theme] .app-shell > .topbar { grid-column: 1; grid-row: 1; height: auto !important; min-height: 62px !important; flex-wrap: wrap; }
  .app-sidebar {
    grid-column: 1;
    grid-row: 2;
    position: relative;
    top: auto;
    height: auto;
    min-height: 0;
    padding: 9px;
    clip-path: none;
  }
  .sidebar-brand { display: none; }
  .sidebar-nav {
    flex: 0 0 auto;
    flex-direction: row;
    overflow-x: auto;
    overflow-y: hidden;
  }
  .sidebar-group {
    min-width: max-content;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 0 8px;
    border-bottom: 0;
    border-inline-end: 1px solid var(--shell-divider);
  }
  .sidebar-group-title { display: none; }
  .sidebar-settings-group { margin: 0; border-top: 0; }
  .sidebar-link {
    width: auto;
    min-height: 44px;
    display: inline-flex;
    gap: 7px;
    padding: 7px 10px;
    white-space: nowrap;
  }
  .sidebar-icon { font-size: 18px; }
  .sidebar-chevron { display: none; }
  .sidebar-theme-panel {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 9px;
    padding: 7px 9px;
  }
  .sidebar-theme-panel .sidebar-group-title { display: block; padding: 0; }
  .sidebar-theme-panel .theme-switch { width: auto; justify-content: flex-start; }
  main { grid-column: 1; grid-row: 3; }
  .footer { grid-column: 1; grid-row: 4; }
  .site-legal-notice { grid-column: 1; grid-row: 5; }
  #page-home .hero { min-height: 0; grid-template-columns: minmax(0, .85fr) minmax(0, 1fr); }
  #page-home .hero-copy { padding: 28px; }
  #page-home .hero h1 { font-size: clamp(36px, 5vw, 50px); }
}

@media (max-width: 620px) {
  .app-shell { width: calc(100% - 16px); }
  .topbar { flex-wrap: wrap; height: auto; min-height: 60px; }
  .top-nav { flex: 1 1 100%; order: 3; justify-content: flex-start; overflow-x: auto; }
  .topbar .top-nav .nav-link { min-height: 40px; padding: 6px 9px; font-size: 11px; }
  .topbar .account-open-button { margin-inline-start: auto; }
  html[data-site-theme] .app-shell > .topbar .account-open-button { flex-basis: 116px; width: 116px; min-width: 0; }
  html[data-site-theme] .app-shell > .topbar .top-nav { order: 0; flex: 0 0 auto; }
  .topbar .language-control { flex: 0 1 140px; min-width: 118px; min-height: 38px; }
  .sidebar-group { padding-inline: 3px; }
  .sidebar-link { min-height: 39px; padding: 6px 8px; font-size: 11px; }
  .sidebar-theme-panel .theme-swatch { width: 27px; height: 27px; flex-basis: 27px; }
  #page-home .hero { grid-template-columns: 1fr; }
  #page-home .hero-copy { padding: 27px 22px 22px; }
  #page-home .hero h1 { font-size: clamp(38px, 10vw, 48px); }
  #page-home .hero-visual { min-height: 260px; }
  #page-home .hero-promo { min-height: 100px; padding: 25px 15px 14px; }
  #page-home .home-flash-announcement,
  #page-home .home-crosshair-announcement { grid-template-columns: 1fr; }
  #page-home .home-flash-art,
  #page-home .home-crosshair-art { min-height: 175px; }
}

@media (prefers-reduced-motion: reduce) {
  .sidebar-link,
  .topbar .top-nav .nav-link { transition: none; }
}