:root {
  --elo-bg: #101110;
  --elo-surface: #171a16;
  --elo-raised: #21251c;
  --elo-control: #242820;
  --elo-text: #fafbf5;
  --elo-muted: #b4baac;
  --elo-orange: #ff6026;
  --elo-orange-hi: #ff9268;
  --elo-orange-line: #ff602655;
  --elo-orange-tint: #ff602620;
  --elo-action: #ff6026;
  --elo-card: linear-gradient(135deg,#1c2018,#151713 78%);
  --elo-promo: linear-gradient(120deg,#452315,#1c1813);
  --dashboard-line: #d5e5c229;
  --dashboard-gold: #ff9e61;
  --arena-lime: #a8ed43;
  --arena-panel: #181b16;
  --client-header: 68px;
}
html { scroll-behavior: smooth; scrollbar-color: #ff6026 #151612; }
html, body { background: var(--elo-bg); }
body .launcher-shell {
  width: min(100%,1800px);
  margin-inline: auto;
  background: radial-gradient(ellipse at 4% 16%,#28140b 0%,transparent 28%), radial-gradient(ellipse at 99% 5%,#202b14,transparent 42%), #101110;
}
body .launcher-shell .sidebar {
  align-items: stretch;
  background: #090a08f5;
  border-color: #c3cfad23;
  padding-inline: clamp(12px,2.5vw,36px);
}
body .launcher-shell .sidebar nav { justify-content: center; gap: clamp(0px,1vw,12px); }
body .launcher-shell .sidebar .nav:not(.mobile-chat-nav), body .launcher-shell .sidebar .mobile-chat-nav {
  padding-inline: clamp(7px,1.05vw,14px);
  color: #d8ddce;
}
body .launcher-shell .sidebar .nav span { font-size: 12px; text-transform: none; letter-spacing: 0; }
body .launcher-shell .sidebar .nav.active {
  color: var(--arena-lime);
  background: transparent;
  box-shadow: inset 0 -2px var(--arena-lime);
}
body .launcher-shell .sidebar .nav:hover { color: var(--arena-lime); }
.dashboard-wordmark { font: 900 20px/1 Unbounded,Manrope,sans-serif; }
.dashboard-wordmark b { color: var(--arena-lime); }
.dashboard-wordmark img { width: 35px; height: 35px; }
body .launcher-shell .app > .topbar { background: transparent; border-color: transparent; }
.launcher-shell .quick-search { background: #0d100d; border-color: var(--dashboard-line); border-radius: 99px; }
.launcher-shell .site-online { background: #253417; color: #e2f3d1; border-radius: 99px; }
.site-online-dot, .roulette-dot { background: var(--arena-lime); box-shadow: 0 0 10px #a8ed4380; }
.launcher-shell .top-actions .vk-login, .launcher-rail .chat-login-block .vk-login {
  background: #3e2014;
  border: 1px solid #ff602659;
  color: #fff4eb;
  border-radius: 99px;
}
.arena-scroll { position: fixed; z-index: 70; pointer-events: none; inset: 0 0 auto; height: 2px; background: linear-gradient(90deg,#ff6026,var(--arena-lime)); transform: scaleX(0); transform-origin: left; }
body .launcher-shell .play-first-row { gap: 22px; }
.client-lobby { display: block; min-height: auto; background: none; border: 0; }
.arena-banner {
  min-height: clamp(330px,32vw,480px);
  overflow: hidden;
  isolation: isolate;
  display: flex;
  align-items: center;
  position: relative;
  border: 1px solid #ff9e4936;
  border-radius: 26px;
  background: #1c120c;
}
.arena-art { position: absolute; z-index: -3; inset: -24px 0 -48px; background: url('/assets/img/overpro-arena.webp') 70% center/cover no-repeat; }
.arena-banner::before, .arena-banner::after { content: ''; position: absolute; inset: 0; z-index: -2; pointer-events: none; }
.arena-banner::before {
  background: linear-gradient(90deg,#0b0807ee, #120d0ab8 39%,transparent 74%),
              linear-gradient(0deg,#0a0a06a6,transparent 65%);
}
.arena-banner::after {
  background: radial-gradient(circle at var(--light-x,65%) var(--light-y,50%),#ff793723,transparent 210px),
              repeating-linear-gradient(0deg,transparent 0 71px,#efffda17 72px 73px),
              repeating-linear-gradient(90deg,transparent 0 71px,#efffda17 72px 73px);
}
.client-lobby-content { width: min(100%,660px); padding: clamp(16px,3.8vw,58px); }
.client-lobby-kicker { display: flex; align-items: center; gap: 9px; color: #f7f9f0; font-size: 12px; letter-spacing: .14em; }
.client-lobby-kicker span { width: 5px; height: 5px; border-radius: 50%; background: var(--elo-orange); box-shadow: 0 0 10px var(--elo-orange); }
.client-lobby h1 { margin: 13px 0; font: 850 clamp(32px,5vw,80px)/1.04 Unbounded,Manrope,sans-serif; letter-spacing: -.058em; }
.client-lobby h1 em { font-style: normal; color: var(--elo-orange); }
.client-lobby p { max-width: 270px; margin-block: 0 21px; font-size: clamp(13px,1.3vw,16px); color: #f0e9e1; }
.client-launch { gap: 10px 15px; }
.client-selection { order: 2; background: #15100ce0; padding: 5px 12px; border: 1px solid #ebd2bc25; border-radius: 9px; }
.client-selection span { color: #cbc2b5; }
.client-play { min-width: 125px; padding: 11px 19px; border: 1px solid #ff9e7655; border-radius: 99px; background: var(--elo-orange); color: #17100a; }
.client-play:hover { background: #ff8b5c; }
.client-modes { margin: 20px 0 0; }
.client-modes legend { color: #fbfaf4; margin-bottom: 10px; font: 750 clamp(15px,1.75vw,21px)/1.2 Unbounded,Manrope,sans-serif; text-transform: none; }
.client-mode-grid { gap: clamp(5px,1vw,13px); }
.client-mode { min-height: clamp(63px,7vw,105px); border: 1px solid var(--dashboard-line); border-radius: 14px; overflow: hidden; padding: 8px 10px; }
.client-mode img { transition: transform .4s ease; }
.client-mode:hover img, .client-mode:has(input:focus-visible) img { transform: scale(1.075); }
.client-mode strong { font-size: clamp(11px,1.2vw,15px); }
.client-mode:has(input:checked) { border-color: var(--arena-lime); box-shadow: inset 0 -2px var(--arena-lime); color: #d7ff9b; }
.client-mode:has(input:focus-visible) { outline-color: var(--arena-lime); }
.launcher-shell .arcade-side { gap: 14px; }
body .launcher-shell :is(.pass-panel,.home-match,#quest-section,.cap-card,.match-card,.match-bet-panel,.restore,.arcade-side .frag-promo,.compact-servers .server-card),
body #quest-section .quest, body dialog { background: var(--elo-card); border: 1px solid var(--dashboard-line); border-radius: 17px; }
body .launcher-shell .arcade-side .frag-promo { background: var(--elo-promo); border-color: #ff60264d; }
.launcher-shell .launcher-promo-summary strong { color: #ffab7e; }
.launcher-shell .launcher-promo-summary small { color: #d5c6bb; }
body .launcher-shell .compact-servers .card-actions .primary, body #quest-section .quest-vk,
body .launcher-rail .roulette .roulette-bet-form .primary { background: var(--elo-orange); color: #1b100c; border-radius: 99px; }
body #quest-section .reward-opt.is-active { background: #2e421a; border-color: #a8ed4361; color: #d5ffa2; }
.launcher-shell :is(.pass-head h2,.section-title h2,.partner-quests-heading h2) { font-family: Unbounded,Manrope,sans-serif; letter-spacing: -.04em; }
.pass-overview :is(.pass-progress,.pass-stat), .pass-missions li, .track-reward, .track-labels, .track-controls button { background: #10140e; border-radius: 10px; }
.track-labels > b { background: #26331c; }
.track-labels > b:last-child, .track-reward:last-child, .pass-premium { background: #3d2518; }
.track-level.track-next > b { background: var(--arena-lime); color: #16200a; }
.track-reward > span, .track-reward .dash-icon { color: #ffa66d; }
.pass-progress progress::-webkit-progress-value { background: var(--arena-lime); }
.pass-progress progress::-webkit-progress-bar { background: #333d2b; }
.pass-progress progress::-moz-progress-bar { background: var(--arena-lime); }
body .launcher-rail .chat-panel { background: var(--arena-panel); border-radius: inherit; }
.launcher-community-head,.dashboard-chat-title { background: #181c15; }
.launcher-community-head svg,.dashboard-chat-title svg { color: var(--elo-orange); }
body .launcher-rail .chat-panel .roulette {
  background: radial-gradient(ellipse at 90% 0%,#442819,transparent 86%),#1d2119;
  border: 1px solid #ff602639;
  border-radius: 14px;
  scrollbar-color: #646951 #1d2119;
}
.roulette #roulette-bank { color: var(--arena-lime); }
body .launcher-rail .chat-messages { background: #111410; scrollbar-color: #59614c #111410; }
body .launcher-rail .chat-panel .message,
body .launcher-rail .chat-panel .message:nth-of-type(even) { background: #21261d; border: 1px solid #d0e6b715; border-radius: 11px; }
body .launcher-rail .chat-panel .message.mine { background: #2e3a20; border-color: #a8ed4342; }
body .launcher-rail .chat-panel .message-name { color: #bde98b; }
body .launcher-rail .chat-panel .message-time { color: #b5bcae; }
body .launcher-rail .chat-panel .message-body { color: #f2f5ee; }
body .launcher-rail .chat-panel .message-avatar { background: #473323; }
body .launcher-rail .chat-panel .message-quote, .launcher-rail .chat-input-area textarea { background: #10140e; border-color: #cde4a12c; }
body .launcher-rail .chat-panel .chat-input-area, .launcher-rail .chat-login-block { background: #181c15; }
@media (min-width: 651px) {
  body .launcher-shell { grid-template-columns: minmax(0,1fr) clamp(220px,24vw,355px); padding-inline-end: var(--launcher-gutter); }
  body .launcher-shell .sidebar { width: calc(100% + var(--launcher-gutter)); }
  body .launcher-shell .launcher-rail { top: calc(var(--client-header) + 13px); height: calc(100dvh - var(--client-header) - 26px); margin-top: 13px; border: 1px solid var(--dashboard-line); border-radius: 20px; background: var(--arena-panel); }
}
@media (max-width: 650px) {
  :root { --client-header: 52px; }
  .dashboard-wordmark img { width: 25px; height: 25px; }
  body .launcher-shell .sidebar nav { justify-content: start; }
  body .launcher-shell .sidebar .nav span { font-size: 11px; }
  .arena-banner { border-radius: 17px; min-height: 285px; }
  .arena-art { background-position: 66% center; }
  .client-mode { min-height: 60px; padding-inline: 5px; border-radius: 9px; }
  .client-lobby h1 { font-size: clamp(28px,8vw,45px); }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .client-mode img { transition: none; }
}

.arena-menu-toggle { display: none; }
@media (min-width: 651px) {
  body .launcher-shell {
    --column-gap: clamp(8px,1.15vw,20px);
    grid-template-columns: clamp(136px,14vw,210px) minmax(0,1fr) clamp(195px,23vw,340px);
    align-items: start;
    padding: var(--column-gap);
    gap: var(--column-gap);
  }
  body .launcher-shell .sidebar {
    grid-column: 1;
    grid-row: 1;
    width: 100%;
    height: calc(100dvh - var(--column-gap) * 2);
    inset: var(--column-gap) auto auto;
    flex-direction: column;
    padding: clamp(8px,1vw,14px);
    margin: 0;
    border: 1px solid var(--dashboard-line);
    border-radius: 10px 23px;
    overflow-y: auto;
  }
  body .launcher-shell .sidebar nav { flex: 0 0 auto; display: grid; gap: 7px; justify-content: stretch; overflow: visible; }
  body .launcher-shell .sidebar .nav:not(.mobile-chat-nav) {
    display: flex; justify-content: flex-start; width: 100%;
    gap: 8px; padding: 9px; min-height: 43px;
    border-radius: 7px 14px; text-align: left;
  }
  body .launcher-shell .sidebar .nav span { font-size: clamp(11px,1vw,14px); white-space: normal; }
  body .launcher-shell .sidebar .nav svg { width: 17px; height: 17px; flex: none; }
  body .launcher-shell .sidebar-bottom { display: grid; margin-top: auto; padding-top: 12px; }
  body .launcher-shell .sidebar-bottom .nav span { display: inline; }
  body .launcher-shell .dashboard-wordmark { margin: 4px 0 22px; display: flex; justify-content: start; font-size: clamp(12px,1.45vw,20px); }
  body .launcher-shell .dashboard-wordmark span { display: inline; }
  body .launcher-shell .dashboard-wordmark img { width: clamp(24px,2.7vw,38px); height: auto; }
  body .launcher-shell .app { grid-column: 2; grid-row: 1; }
  body .launcher-shell .launcher-rail {
    grid-column: 3; grid-row: 1;
    top: var(--column-gap);
    height: calc(100dvh - var(--column-gap) * 2);
    margin: 0;
    border-radius: 10px 23px;
  }
  body .launcher-shell .app > .topbar { padding: 0; }
  body .launcher-shell .app > main { padding-inline: 0; }
}
@media (max-width: 650px) {
  body .launcher-shell .sidebar { align-items: center; gap: 10px; }
  body .launcher-shell .dashboard-wordmark { margin-right: auto; }
  body .launcher-shell .dashboard-wordmark span { display: inline; }
  body .launcher-shell .sidebar .arena-menu-toggle { display: flex; align-items: center; gap: 5px; color: #f5e8db; font-size: 12px; min-height: 40px; padding-inline: 6px; }
  .arena-menu-toggle svg { width: 17px; height: 17px; }
  body .launcher-shell .sidebar nav {
    display: none; position: absolute; top: 100%; left: 8px; right: 8px;
    padding: 8px; border: 1px solid var(--dashboard-line);
    background: #1a1b15; border-radius: 12px; box-shadow: 0 16px 30px #080905d9;
  }
  body .launcher-shell .sidebar:has(.arena-menu-toggle[aria-expanded="true"]) nav { display: grid; grid-template-columns: 1fr 1fr; }
  body .launcher-shell .sidebar nav .nav:not(.mobile-chat-nav) { justify-content: start; min-height: 40px; padding-inline: 8px; border-radius: 6px 11px; }
  .arena-banner { min-height: 280px; }
  .client-lobby h1 { font-size: clamp(27px,7vw,48px); }
}

/* Keep the controls for joining a match together above the fold. */
body .launcher-shell .play-first-row { gap: 14px; }
.arena-banner {
  min-height: 0;
  border-radius: 16px;
}
.arena-art { inset: -30px 0 -50px; background-position: 65% 37%; }
.arena-banner::before { background: linear-gradient(90deg,#090805f7,#100a07be 42%,transparent 81%); }
.client-lobby-content { width: 100%; padding: clamp(14px,2vw,27px); }
.client-lobby-kicker { font-size: 10px; color: #f2cfac; }
.client-lobby h1 { margin: 6px 0 13px; font-size: clamp(28px,3.6vw,54px); }
.client-launch { gap: 8px 12px; }
.client-play { min-height: 38px; padding: 8px 15px; font-size: 12px; }
.client-selection { background: #160f0aca; }
.client-modes { margin-top: 11px; }
.client-modes legend { margin-bottom: 7px; font-size: 14px; }
.client-mode-grid { gap: 8px; }
.client-mode { min-height: 56px; border-radius: 10px; }
body .launcher-shell .arcade-side { display: grid; grid-template-columns: minmax(0,1fr); gap: 10px; }
body .launcher-shell .arcade-side .frag-promo[hidden] { display: none; }
body .launcher-shell .compact-servers .server-grid { gap: 7px; }
body .launcher-shell .compact-servers .server-card { min-height: 0; border-radius: 11px; }
.launcher-shell .launcher-promo-summary { min-height: 45px; }
.launcher-shell .arcade-side .frag-promo { margin: 0; }
.launcher-shell .launcher-promo-summary img { width: 43px; }
body .launcher-shell .sidebar {
  background: linear-gradient(170deg,#141610,#10110e 70%);
}
body .launcher-shell .sidebar .nav.active {
  color: #d3ff98;
  background: linear-gradient(90deg,#35441d,#202819);
  box-shadow: inset 0 0 0 1px #b4eb5b4d;
}
body .launcher-shell .sidebar .nav.active svg { color: var(--arena-lime); }
body .launcher-shell .sidebar .nav:hover { background-color: #262a1c; }
body .launcher-shell .app :is(a,button).primary,
body .launcher-rail .chat-input-area button[type="submit"] {
  border-radius: 99px;
  background: var(--elo-orange);
  color: #1a1009;
}
body .launcher-shell .app :is(.square-button,.pass-open,.pass-return,.reward-opt),
body .launcher-rail :is(.roulette-footer button,.message-actions button) {
  border-radius: 99px;
  color: #e4ead9;
  border-color: #cde4ad38;
}
body .launcher-shell .app :is(.square-button,.pass-open,.pass-return,.reward-opt):hover,
body .launcher-rail .roulette-footer button:hover { background-color: #343c24; color: #efffd3; }
body .launcher-rail .roulette .roulette-progress > div { background: linear-gradient(90deg,#ff6026,#a8ed43); }
body .launcher-rail .chat-panel .message { padding: 7px; }
:where(.launcher-shell,.launcher-rail) :focus-visible { outline: 2px solid #b8ed70; outline-offset: 2px; }

@media (min-width: 651px) {
  body .launcher-shell { grid-template-columns: clamp(126px,13vw,196px) minmax(0,1fr) clamp(190px,22vw,325px); }
  body .launcher-shell .app > .topbar { height: 43px; }
  body .launcher-shell .app > main { padding-top: 8px; }
}
@media (max-width: 650px) {
  .arena-banner { min-height: 0; }
  .client-lobby h1 { font-size: clamp(25px,7vw,35px); }
  .client-selection { min-width: 0; padding-inline: 7px; }
  .client-selection strong { font-size: 12px; }
  .client-mode { min-height: 49px; }
  .client-mode-grid { gap: 4px; }
}