/* Visual tokens from elopub.ru. Layout and interaction styles live with each view. */
@font-face {
  font-family: Manrope;
  src: url("/assets/fonts/manrope-cyrillic.woff2") format("woff2");
  font-weight: 200 800;
  font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: Manrope;
  src: url("/assets/fonts/manrope-latin.woff2") format("woff2");
  font-weight: 200 800;
  font-display: swap;
  unicode-range: U+0000-00FF, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: Unbounded;
  src: url("/assets/fonts/unbounded-cyrillic.woff2") format("woff2");
  font-weight: 200 900;
  font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: Unbounded;
  src: url("/assets/fonts/unbounded-latin.woff2") format("woff2");
  font-weight: 200 900;
  font-display: swap;
  unicode-range: U+0000-00FF, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --elo-bg: #0b0b0e;
  --elo-surface: #141419;
  --elo-raised: #1b1b22;
  --elo-control: #23232c;
  --elo-line: rgb(255 255 255 / 7%);
  --elo-line-strong: rgb(255 255 255 / 12%);
  --elo-text: #f4f4f6;
  --elo-muted: #a6a6b2;
  --elo-orange: #ff781c;
  --elo-orange-hi: #ffa05a;
  --elo-on-orange: #120a04;
  --elo-orange-line: rgb(255 120 28 / 35%);
  --elo-orange-tint: rgb(255 120 28 / 10%);
  --elo-action: linear-gradient(180deg, #ff8a35, #ff781c 55%, #f06a10);
  --elo-card: linear-gradient(180deg, var(--elo-raised), var(--elo-surface));
  --elo-promo: radial-gradient(ellipse at 95% 30%, rgb(255 120 28 / 18%), transparent 68%), var(--elo-card);
  --elo-body-font: Manrope, system-ui, sans-serif;
  --elo-heading-font: Unbounded, Manrope, system-ui, sans-serif;
}

html { background-color: var(--elo-bg); }
body {
  color: var(--elo-text);
  background: radial-gradient(ellipse 820px 470px at 72% 0, rgb(255 120 28 / 7%), transparent), var(--elo-bg);
  font-family: var(--elo-body-font);
  -webkit-font-smoothing: antialiased;
}
h1, .section-title h2, .slide-copy h2, .match-detail-title, .cap-copy h3, dialog h2 {
  font-family: var(--elo-heading-font);
  letter-spacing: -.025em;
}
:where(button, a, input, textarea):focus-visible {
  outline-color: var(--elo-orange-hi);
}
:where(.countdown, .slots, .mt-bank, .mt-score, .player-balance, #roulette-bank) {
  font-variant-numeric: tabular-nums;
}

.sidebar, .topbar {
  background: rgb(11 11 14 / 90%);
  border-color: var(--elo-line-strong);
}
.topbar { border-bottom: 0; backdrop-filter: saturate(140%) blur(14px); }

@media (min-width: 651px) {
  .app {
    --content-width: 1600px;
    --content-gutter: 29px;
  }
  .app > main {
    max-width: var(--content-width);
    padding-inline: var(--content-gutter);
  }
  .app > .topbar {
    padding-inline: max(var(--content-gutter), calc((100% - var(--content-width)) / 2 + var(--content-gutter)));
  }
}

.sidebar .nav { border-radius: 12px; color: var(--elo-muted); }
.sidebar .nav:hover { color: var(--elo-text); background-color: rgb(255 255 255 / 5%); }
.sidebar .nav.active {
  color: var(--elo-orange-hi);
  background: var(--elo-orange-tint);
  box-shadow: inset 0 0 0 1px var(--elo-orange-line);
}
.sidebar .nav.active::before { background-color: var(--elo-orange); }
.header-launch .countdown > div, .nav small, .section-title small {
  background: var(--elo-raised);
  border-color: var(--elo-line-strong);
  border-radius: 8px;
}
.header-launch .countdown b { font-family: var(--elo-heading-font); }
.header-launch .countdown > div:last-child b { color: var(--elo-orange-hi); }

.play-first-row .recovery-slider, .compact-servers, .server-grid .server-card,
.cap-card, .home-match, .match-card, .match-bet-panel, .match-form-grid article,
.match-mine-row, .new-game-card, .restore, dialog {
  border-color: var(--elo-line-strong);
  border-radius: 16px;
}
.compact-servers, .server-grid .server-card, .cap-card, .match-card,
.match-bet-panel, .match-form-grid article, .match-mine-row, .restore, dialog {
  background: var(--elo-card);
}
.compact-servers .server-card { border-radius: 12px; background: var(--elo-bg); }
.home-match, .frag-promo { background: var(--elo-promo); }
.frag-promo { border-color: var(--elo-orange-line); border-radius: 16px; }
.server-grid .server-card:hover, .cap-card:hover, .match-card:hover, .new-game-card:hover {
  border-color: var(--elo-orange-line);
}
.section-title h2 > svg, .cap-kicker, .slide-copy > span, .game-more { color: var(--elo-orange-hi); }
.breadcrumbs, .card-sub, .compact-servers .card-sub, .server-caption, .games-intro {
  color: var(--elo-muted);
}

.primary, .card-actions .primary, .hero-actions .primary,
.roulette-bet-form .primary, .chat-input-area #chat-send:not(:disabled),
.match-tabs button.active, .match-stream-tabs button.active, .cap-filters .active,
.filters .selected, .roulette-tabs .active {
  background: var(--elo-action);
  color: var(--elo-on-orange);
}
.primary:hover, .card-actions .primary:hover, .hero-actions .primary:hover {
  background: var(--elo-action) !important;
  color: var(--elo-on-orange);
  filter: brightness(1.08) saturate(1.05);
}
.frag-promo-actions .primary:not(:focus-visible), .game-landing .cta:not(:focus-visible) {
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
}
.compact-servers .card-actions .primary { border-radius: 9px; }
.top-actions .vk-login, .chat-login-block .vk-login {
  background: linear-gradient(180deg, #2a3446, #171d29);
  border-radius: 12px;
  color: var(--elo-text);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 16%);
}
.top-actions .vk-login:hover, .chat-login-block .vk-login:hover {
  background: linear-gradient(180deg, #33405a, #1d2533);
}
.vk-login .steam-login-icon { filter: brightness(0) invert(1); }
.frag-promo-vk, .square-button, .icon-btn, .match-tabs button:not(.active),
.cap-filters button:not(.active), .match-pagination button, .mt-open button,
.roulette-tabs button:not(.active), .chat-input-area > button:not(#chat-send) {
  background-color: rgb(255 255 255 / 4%);
  border-color: var(--elo-line-strong);
  border-radius: 9px;
  color: var(--elo-muted);
}
.match-free, .roulette-footer .ready {
  background: var(--elo-orange-tint);
  color: var(--elo-orange-hi);
  border-color: var(--elo-orange-line);
}
.search, .match-amount input, .home-inline-bet > label, .roulette-amount,
.chat-input-area textarea, .nickname-input {
  background: rgb(0 0 0 / 25%);
  border-color: var(--elo-line-strong);
  border-radius: 12px;
  color: var(--elo-text);
}
.match-table-wrap, .match-team, .home-team-picks label, .detail-team-picks label {
  background: var(--elo-surface);
  border-color: var(--elo-line-strong);
  border-radius: 12px;
}
.match-table th { background: var(--elo-raised); color: var(--elo-muted); }
.match-table td { border-color: var(--elo-line); }
.match-table tbody tr:hover { background-color: rgb(255 255 255 / 3%); }
.match-state, .home-team-picks label:has(input:checked),
.detail-team-picks label:has(input:checked:not(:disabled)) {
  background: var(--elo-orange-tint);
  border-color: var(--elo-orange-line);
}
.match-state.is-live { color: #70e5a4; background: rgb(49 211 130 / 10%); }

.chat-panel, .chat-messages { background: #111116; border-color: var(--elo-line-strong); }
.chat-input-area, .chat-login-block, .chat-rules { border-color: var(--elo-line); }
.message-body { color: #cfcfd8; }
.message-name { color: #e7e7ee; }
.message-avatar, .message-avatar img, .roulette-avatar, .roulette-reel-cell img {
  border-radius: 9px;
}
.message-time, .message-day, .chat-rules, .roulette-note, .roulette-subline {
  color: var(--elo-muted);
}
.message-quote, #chat-reply, #emoji-picker {
  background: var(--elo-raised);
  border-color: var(--elo-line-strong);
}
.roulette { background: var(--elo-card); border-color: var(--elo-line-strong); }
#roulette-bank, .roulette-winner strong, .player-balance { font-family: var(--elo-heading-font); color: var(--elo-orange-hi); }
.roulette-spin, .roulette-empty { background: #0c0c10; border-color: var(--elo-line); border-radius: 14px; }
.roulette-spin::after { background: linear-gradient(90deg, #0c0c10dd, transparent 22%, transparent 78%, #0c0c10dd); }
.roulette-pointer { background: var(--elo-orange); box-shadow: 0 0 12px var(--elo-orange); }
.roulette-winner {
  background: radial-gradient(ellipse at 0 0, rgb(255 120 28 / 25%), rgb(255 120 28 / 5%) 70%);
  border-color: var(--elo-orange-line);
  border-radius: 14px;
}
.toast { background: var(--elo-raised); color: var(--elo-text); border-color: var(--elo-line-strong); }

.game-landing .logo { font-family: var(--elo-heading-font); }
.game-landing .hero { background: var(--elo-promo); border-color: var(--elo-orange-line); border-radius: 22px; }
.game-landing article { background: var(--elo-card); border-color: var(--elo-line-strong); border-radius: 16px; }
.game-landing p, .game-landing footer { color: var(--elo-muted); }
.game-landing small, .game-landing article b { color: var(--elo-orange-hi); }
.game-landing .cta { background: var(--elo-action); color: var(--elo-on-orange); }

.compact-servers .slots {
  gap: 6px;
  white-space: nowrap;
}
.compact-servers .server-card { column-gap: 10px; }
@media (max-width: 540px) { .compact-servers .server-card { column-gap: 8px; } }

.message-actions .reaction-trigger {
  display: inline-grid;
  place-items: center;
  width: 28px;
  min-height: 28px;
  padding: 3px;
  border-radius: 7px;
  color: var(--elo-muted);
}
.reaction-trigger svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
}
.message-actions .reaction-trigger:hover,
.message-actions .reaction-trigger[aria-expanded="true"] {
  color: var(--elo-orange-hi);
  background: var(--elo-orange-tint);
}
.message-reactions { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; }
.reaction-chip {
  padding: 2px 7px;
  border: 1px solid var(--elo-line-strong);
  border-radius: 999px;
  background: var(--elo-raised);
  color: var(--elo-text);
  font: inherit;
  font-size: 12px;
  line-height: 1.5;
}
button.reaction-chip:hover,
.reaction-chip[aria-pressed="true"] {
  border-color: var(--elo-orange-line);
  background: var(--elo-orange-tint);
}
.chat-reaction-picker {
  position: fixed;
  z-index: 80;
  padding: 4px;
  border: 1px solid var(--elo-line-strong);
  border-radius: 18px;
  background: var(--elo-raised);
  box-shadow: 0 5px 20px #0008;
}
.reaction-options { display: flex; gap: 1px; }
.reaction-options + .reaction-options { margin-top: 3px; }
.reaction-options button {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border-radius: 50%;
  font-size: 19px;
}
.reaction-options button:hover,
.reaction-options button:focus-visible,
.reaction-options button[aria-pressed="true"] { background: var(--elo-orange-tint); }
.reaction-options .reaction-more { color: var(--elo-muted); background: var(--elo-card); }