:root {
  --elo-bg: #211916;
  --elo-surface: #2c201d;
  --elo-raised: #382723;
  --elo-control: #44302a;
  --elo-text: #fff4eb;
  --elo-muted: #c5b1a8;
  --elo-orange: #ee514b;
  --elo-orange-hi: #ff8778;
  --elo-on-orange: #220c0b;
  --elo-orange-line: rgb(255 104 91 / 43%);
  --elo-orange-tint: rgb(255 104 91 / 11%);
  --elo-action: linear-gradient(180deg, #ff7264, #ed5148);
  --elo-heading-font: Manrope, system-ui, sans-serif;
}

body {
  background: radial-gradient(ellipse at 93% 62%, #572820 0, transparent 73%),
    linear-gradient(138deg, #211916, #2c1d19 58%, #3b211a);
  background-attachment: fixed;
}

body .sidebar {
  background: #211c19;
  border-color: rgb(255 233 213 / 10%);
}

.sidebar .brand { color: #fff6ed; letter-spacing: -.055em; }
.sidebar .brand b { color: #ff7564; }
.sidebar .nav {
  color: #e4d4cc;
  border-radius: 8px;
}
.sidebar .nav.active {
  color: #fff5ef;
  background: linear-gradient(90deg, #79302b, #452522 46%, #3b2420);
  box-shadow: inset 2px 0 0 #ff5d52, -7px 0 16px -11px #ff5d52;
}
.sidebar .nav.active::before { box-shadow: 0 0 12px #ff5d52; }
.sidebar .side-label, .sidebar .side-footer { color: #aa948a; }

body .app > .topbar { background: rgb(34 25 22 / 88%); }
.quick-search {
  display: flex;
  align-items: center;
  flex: 1 1 250px;
  min-width: 110px;
  max-width: 490px;
  border: 1px solid rgb(255 233 213 / 11%);
  background: rgb(255 233 213 / 5%);
  border-radius: 999px;
  margin-right: auto;
  color: var(--elo-muted);
}
.quick-search label { display: flex; align-items: center; flex: 1; min-width: 0; gap: 10px; padding-left: 14px; }
.quick-search svg { width: 17px; height: 17px; flex: none; }
.quick-search input { width: 100%; min-width: 0; height: 41px; background: transparent; border: 0; color: var(--elo-text); font: inherit; font-size: 14px; }
.quick-search input::placeholder { color: var(--elo-muted); }
.quick-search input:focus { outline: 0; }
.quick-search:focus-within { border-color: #ff8778; }
.quick-search button { flex: none; padding: 8px 12px; color: var(--elo-muted); }
.app .topbar .breadcrumbs { display: none; }

body .play-first-row { gap: 14px; }
body .play-first-row .recovery-slider {
  height: clamp(364px, 33vw, 490px);
  border-radius: 18px;
  border-color: rgb(255 233 213 / 19%);
  background: #231a17;
}
.play-first-row .recovery-slide { position: relative; display: flex; align-items: end; }
.play-first-row .recovery-slide[hidden] { display: none; }
body .play-first-row .recovery-slide.status > img {
  width: 100%;
  opacity: .93;
  object-position: center 29%;
}
body .play-first-row .recovery-slide.status::after {
  background: linear-gradient(0deg, #130e0dee, #1c131055 66%, transparent),
    linear-gradient(90deg, #1c13106e, transparent 83%);
}
body .play-first-row .recovery-slide.feature::after {
  background: linear-gradient(0deg, #17100eee, #22171122 84%),
    linear-gradient(90deg, #2217119e, transparent 76%);
}
body .play-first-row .slide-copy { max-width: 100%; width: 100%; padding: 24px 24px 57px; }
body .play-first-row .slide-copy > span {
  display: inline-flex;
  background: #2a1c19c7;
  border: 1px solid #fff2e330;
  border-radius: 999px;
  padding: 7px 10px;
  color: #fff3eb;
  font-size: 10px;
  letter-spacing: .06em;
}
body .play-first-row .slide-copy h2 {
  color: #fff7f0;
  font: 800 clamp(32px, 4vw, 58px)/1.04 Manrope, system-ui, sans-serif;
  letter-spacing: -.052em;
  margin: 10px 0;
}
body .play-first-row .slide-copy p { max-width: 39ch; font-size: 13px; line-height: 1.55; color: #f0dbd0; }
.arcade-hero-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.arcade-hero-actions > :is(button, a) {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
}
.arcade-hero-actions > button { background: #fff5ee; color: #261b16; }
.arcade-hero-actions > button:hover { background: #ffe2d2; }
.arcade-hero-actions > a { background: #30211ee0; color: #fff3eb; border: 1px solid #fff2e330; }
.arcade-hero-actions > a:hover { background: #49322b; }

body .compact-servers { background: linear-gradient(150deg, #4b2c25, #3c2520); padding: 17px; border-radius: 18px; }
body .compact-servers .server-card { background: #ffffff08; border-color: #fff2e311; }
body .compact-servers .server-card:hover { border-color: var(--elo-orange-line); }
body .frag-promo { background: radial-gradient(ellipse at 95% 15%, #be45425e, transparent 65%), linear-gradient(130deg, #672e26, #412520); }
body .home-match { background: linear-gradient(135deg, #45302a, #382421); }
body .quests-top h2, body .section-title h2 { letter-spacing: -.035em; }

body .chat-panel {
  background: #171c21;
  color: #eff3f6;
  border-color: #34383c;
  --elo-muted: #b5bec9;
}
body .chat-panel .roulette { background: linear-gradient(130deg, #342628, #20262c 85%); }
.arcade-chat-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: none;
  margin: 9px 10px 3px;
  padding: 11px 12px;
  border: 1px solid #f8e5d41d;
  border-radius: 11px;
  background: linear-gradient(110deg, #55312e, #2b262d 75%);
}
.arcade-chat-title h2 { margin: 0; font: 800 17px/1.2 Manrope, system-ui, sans-serif; }
.arcade-chat-title > span { color: #f8c8b5; font-size: 11px; font-weight: 800; }
body .chat-panel .chat-messages { padding: 4px 10px 8px; }
body .chat-panel .message {
  margin: 0 0 6px;
  gap: 9px;
  padding: 9px;
  background: #232a31;
  border: 1px solid #ffffff0a;
  border-radius: 10px;
}
body .chat-panel .message.mine { background: #29313b; }
body .chat-panel .message-avatar { width: 29px; height: 29px; border-radius: 8px; }
body .chat-panel .message-name { color: #ccd5df; font-size: 11px; font-weight: 800; }
body .chat-panel .mine .message-name { color: #b6d4ff; }
body .chat-panel .message.admin .message-name { color: #ffc19f; }
body .chat-panel .message-time { color: #b5bec9; font: 10px/1.25 Manrope, system-ui, sans-serif; }
body .chat-panel .message-body { color: #f1f3f6; font-size: 13px; line-height: 1.4; margin-top: 3px; }
body .chat-panel .message-actions { margin-top: 0; }
body .chat-panel .message-actions button { font-size: 10px; color: #b5bec9; }
body .chat-panel .chat-input-area { background: #171c21; border-color: #ffffff13; }

@media (min-width: 1350px) {
  body .sidebar { width: 198px; padding: 30px 15px 18px; }
  body .app { margin-left: 198px; }
  .sidebar .brand { justify-content: start; margin: 0 5px 32px; gap: 9px; font-size: 21px; }
  .sidebar .brand img { width: 34px; height: 34px; }
  .sidebar .brand > span, .sidebar .side-label, .sidebar .side-footer { display: block; }
  .sidebar .nav:not(.mobile-chat-nav) { width: 100%; justify-content: start; gap: 9px; padding-inline: 11px; text-align: left; }
  body .sidebar .nav span:not(.nav-features-short) { display: inline; font-size: 13px; }
  body .sidebar .nav .nav-features-short { display: none; }
  .sidebar .nav small { display: inline-block; margin-left: auto; }
  body .play-first-row { grid-template-columns: minmax(0, 1.65fr) minmax(290px, 1fr); }
}
@media (min-width: 1070px) and (max-width: 1349px) {
  body .play-first-row { grid-template-columns: minmax(0, 1.45fr) minmax(280px, 1fr); }
}
@media (min-width: 651px) {
  body .app > .topbar { height: 72px; }
  body .app > main { padding-top: 14px; }
}
@media (max-width: 650px) {
  body .app > .topbar { height: auto; min-height: 58px; flex-wrap: wrap; padding-block: 7px; }
  .quick-search { order: 9; flex-basis: 100%; max-width: none; }
  .quick-search input { height: 33px; }
  .quick-search button { padding-block: 5px; }
  body .play-first-row .recovery-slider { height: 362px; }
  body .play-first-row .slide-copy { padding: 20px 16px 53px; }
}

.arcade-side { min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.arcade-side .compact-servers { flex: 1; }
.arcade-promo-link {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  padding: 11px 13px;
  border: 1px solid #ff9b8b55;
  border-radius: 15px;
  background: linear-gradient(108deg, #b63532, #762c28 73%, #4f2821);
  color: #fff3e9;
}
.arcade-promo-link:hover { background: linear-gradient(108deg, #c23d39, #862f29 73%, #5c2d23); }
.arcade-promo-link img { width: 44px; height: 42px; object-fit: contain; }
.arcade-promo-link strong, .arcade-promo-link small { display: block; }
.arcade-promo-link strong { font-size: 15px; line-height: 1.2; }
.arcade-promo-link small { color: #ffe0d5; font-size: 11px; margin-top: 4px; }
.servers-only .arcade-promo-link { display: none; }
#frag-promo-title { scroll-margin-top: 150px; }

@media (max-width: 650px) {
  .arcade-side { gap: 10px; }
  .arcade-promo-link { order: 1; }
}

body .compact-servers .server-card {
  grid-template-columns: 36px minmax(0, 1fr) 28px 33px;
  grid-template-rows: minmax(18px, auto) 15px;
  gap: 2px 6px;
  padding: 8px;
}
body .compact-servers .card-art { width: 36px; height: 36px; }
body .compact-servers .card-title h3 {
  font-size: 13px;
  line-height: 1.2;
  white-space: normal;
  overflow-wrap: anywhere;
}
body .compact-servers .card-sub { display: none; }
body .compact-servers .slots { grid-area: 2 / 2; justify-content: start; text-align: left; font-size: 11px; }
body .compact-servers .card-actions .square-button:not(.detail-button) { grid-column: 3; width: 28px; }
body .compact-servers .card-actions .primary { grid-column: 4; width: 33px; background: var(--elo-action); }

@media (min-width: 1070px) {
  body .play-first-row .recovery-slider { height: auto; min-height: clamp(364px, 33vw, 490px); }
  .play-first-row .recovery-slider #slides { position: absolute; inset: 0; }
}