:root {
  --site-bg: #08070d;
  --site-panel: rgba(20, 17, 28, .9);
  --site-panel-strong: rgba(27, 21, 34, .96);
  --site-line: rgba(236, 202, 180, .13);
  --site-text: #f8f4f6;
  --site-soft: #d0c6ce;
  --site-muted: #918792;
  --site-red: #d9474f;
  --site-orange: #f09a67;
  --site-gold: #e8ba76;
  --site-green: #5bc991;
  --site-shadow: 0 24px 70px rgba(0, 0, 0, .45);
  --site-radius: 16px;
}

html { min-width: 0; background: var(--site-bg); scroll-behavior: smooth; }
body { min-width: 0 !important; background: #08070d !important; color: var(--site-soft) !important; }
body::before {
  background:
    radial-gradient(circle at 20% 12%, rgba(217, 71, 79, .11), transparent 34rem),
    radial-gradient(circle at 80% 35%, rgba(232, 186, 118, .07), transparent 28rem),
    linear-gradient(90deg, rgba(255, 255, 255, .017) 1px, transparent 1px),
    linear-gradient(rgba(255, 255, 255, .014) 1px, transparent 1px) !important;
  background-size: auto, auto, 52px 52px, 52px 52px !important;
}

.wrapper {
  width: min(1500px, 100%) !important;
  min-width: 0 !important;
  margin: 0 auto !important;
  background-position: center 72px !important;
  background-size: min(1900px, 130vw) auto !important;
  overflow: clip;
}

.header {
  position: relative;
  height: clamp(390px, 46vw, 610px) !important;
  min-height: 390px;
  background-position: center top !important;
}
.header::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(to bottom, rgba(8, 7, 13, .12), transparent 48%, #08070d 100%),
    linear-gradient(90deg, rgba(8, 7, 13, .44), transparent 28%, transparent 72%, rgba(8, 7, 13, .44));
}
.header::after { bottom: 7px !important; }

.menu-top {
  position: fixed !important;
  inset: 0 0 auto !important;
  z-index: 100;
  width: 100% !important;
  max-width: none !important;
  height: 74px !important;
  display: grid !important;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0 max(18px, calc((100vw - 1420px) / 2)) !important;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  background: rgba(8, 7, 13, .76) !important;
  box-shadow: 0 15px 45px rgba(0, 0, 0, .18);
  backdrop-filter: blur(18px) saturate(1.15);
}
.is-scrolled .menu-top { background: rgba(8, 7, 13, .94) !important; }
.menu-top::before {
  content: "FROGMARE RISING" !important;
  display: block !important;
  position: static !important;
  inset: auto !important;
  transform: none !important;
  grid-column: 2;
  grid-row: 1;
  width: auto !important;
  height: auto !important;
  margin: 0 32px;
  background: none !important;
  color: #fff;
  font: 800 13px/1 ui-sans-serif, system-ui, sans-serif;
  letter-spacing: .2em;
  white-space: nowrap;
}
.menu-top ul {
  position: static !important;
  width: auto !important;
  height: auto !important;
  display: flex !important;
  align-items: center;
  gap: 4px;
  margin: 0 !important;
}
.menu-top-left { grid-column: 1; grid-row: 1; justify-self: start; }
.menu-top-right { grid-column: 3; grid-row: 1; justify-self: end; }
.menu-top li { float: none !important; height: auto !important; }
.menu-top li a {
  height: auto !important;
  padding: 12px 13px !important;
  border: 1px solid transparent;
  border-radius: 9px;
  background: none !important;
  color: #c7bdc6 !important;
  font: 700 11px/1.2 ui-sans-serif, system-ui, sans-serif !important;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.menu-top li a:hover,
.menu-top li.active a {
  border-color: rgba(240, 154, 103, .25);
  background: rgba(217, 71, 79, .11) !important;
  color: #fff !important;
}
.server-load {
  position: fixed !important;
  right: 16px !important;
  bottom: 16px !important;
  top: auto !important;
  z-index: 85;
  width: auto !important;
  height: auto !important;
  display: flex !important;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border: 1px solid var(--site-line);
  border-radius: 12px;
  background: rgba(12, 10, 17, .84) !important;
  box-shadow: 0 10px 35px rgba(0, 0, 0, .32);
  backdrop-filter: blur(14px);
}
.server-load div { color: var(--site-muted); font-size: 8px; line-height: 1.15; letter-spacing: .08em; text-transform: uppercase; }
.server-load span { color: var(--site-gold); font: 700 12px ui-monospace, monospace; }
.legacy-logo { z-index: 3; }

.site-menu-toggle {
  display: none;
  grid-column: 3;
  grid-row: 1;
  justify-self: end;
  width: 42px;
  height: 42px;
  place-items: center;
  border: 1px solid var(--site-line);
  border-radius: 11px;
  background: rgba(24, 17, 29, .9);
  color: #fff;
  font-size: 20px;
}

.container {
  position: relative;
  z-index: 5;
  width: min(1400px, calc(100% - 36px)) !important;
  max-width: 1400px !important;
  min-width: 0 !important;
  display: grid !important;
  grid-template-columns: minmax(215px, 255px) minmax(0, 1fr) minmax(215px, 255px) !important;
  gap: 18px !important;
  margin: -42px auto 0 !important;
  padding: 0 0 54px !important;
  background: transparent !important;
}
.sidebar,
.content,
.right-sidebar {
  width: auto !important;
  min-width: 0 !important;
  float: none !important;
  margin: 0 !important;
}
.content { grid-column: 2; }
.right-sidebar { grid-column: 3; }

.sidebar > div,
.right-sidebar > div,
.content > div,
.page-block {
  border: 1px solid var(--site-line) !important;
  border-radius: var(--site-radius) !important;
  background: linear-gradient(155deg, rgba(25, 19, 31, .94), rgba(12, 10, 18, .93)) !important;
  box-shadow: var(--site-shadow) !important;
  backdrop-filter: blur(12px);
}
.sidebar > div,
.right-sidebar > div { margin-bottom: 17px !important; }
.page-block,
.content > div { padding: clamp(20px, 3vw, 34px) !important; }
.content > .news-block { padding: 0 !important; overflow: hidden; }

.sidebar-title,
.login-title,
.content-title {
  min-height: 55px !important;
  display: flex !important;
  align-items: center !important;
  padding: 0 18px !important;
  border-bottom: 1px solid var(--site-line) !important;
  background: rgba(255, 255, 255, .025) !important;
  color: #fff !important;
  font: 750 12px ui-sans-serif, system-ui, sans-serif !important;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.sidebar-title::before,
.login-title::before { top: 16px !important; left: 10px !important; height: 22px !important; }

.login-form,
.lk-form,
.block-p,
.block-l { padding: 17px !important; }
.login-form input,
.register-form input,
.support-form input,
.support-form select,
.support-form textarea,
.resend-form input,
.unstuck-panel input {
  width: 100%;
  min-height: 43px;
  border: 1px solid rgba(255, 255, 255, .1) !important;
  border-radius: 9px !important;
  background: rgba(5, 5, 10, .72) !important;
  color: #fff !important;
}

.blue-a,
.green-a,
.login-button,
.register-form button,
.support-form button,
.ticket-player-reply button,
.resend-form button,
.unstuck-panel button {
  min-height: 42px !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  padding: 10px 16px !important;
  border: 1px solid rgba(240, 154, 103, .34) !important;
  border-radius: 9px !important;
  background: linear-gradient(145deg, rgba(217, 71, 79, .95), rgba(154, 39, 55, .95)) !important;
  color: #fff !important;
  font-weight: 750 !important;
  text-decoration: none !important;
  box-shadow: 0 9px 24px rgba(126, 28, 42, .24);
}
.blue-a:hover,
.login-button:hover { filter: brightness(1.1); transform: translateY(-1px); }

.shop-block { display: grid !important; gap: 12px; }
.shop {
  min-height: 150px !important;
  display: flex !important;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  padding: 19px !important;
  border: 1px solid var(--site-line) !important;
  border-radius: 13px !important;
  background: linear-gradient(145deg, rgba(70, 24, 43, .92), rgba(14, 11, 20, .96)) !important;
}
.shop p { margin: 0 0 4px !important; color: #fff !important; font: 800 14px ui-sans-serif, system-ui, sans-serif !important; letter-spacing: .08em; }
.shop span { margin-bottom: 12px; color: #b6abb5 !important; }

.last-news-block {
  display: grid !important;
  grid-template-columns: minmax(190px, 33%) minmax(0, 1fr) !important;
  gap: 0 !important;
}
.news-img { min-height: 100%; }
.news-img img { width: 100% !important; height: 100% !important; min-height: 300px; object-fit: cover; }
.last-news-info { padding: clamp(22px, 4vw, 42px) !important; }
.last-news-info h2 { margin: 8px 0 16px !important; color: #fff !important; font-size: clamp(24px, 3vw, 36px) !important; line-height: 1.12; }
.news-text { color: var(--site-soft); line-height: 1.7; }
.news-actions { margin-top: 24px; }
.inline-news-archive { margin: 0 !important; padding: 23px clamp(20px, 4vw, 42px) 32px !important; }
.inline-patchnote { padding: 17px 18px !important; border-radius: 9px !important; }

.ranking-table {
  display: table;
  width: 100%;
  border: 1px solid var(--site-line);
  border-radius: 11px;
  border-spacing: 0;
  overflow: hidden;
}
.ranking-table th { background: rgba(217, 71, 79, .12) !important; color: #fff; font-size: 11px; text-transform: uppercase; letter-spacing: .08em; }
.ranking-table th,
.ranking-table td { padding: 12px 14px !important; }
.ranking-table tr:last-child td { border-bottom: 0; }
.site-table-tools {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) auto auto auto;
  gap: 9px;
  align-items: center;
  margin: 15px 0 10px;
}
.site-table-tools input,
.site-table-tools select {
  min-height: 42px;
  padding: 9px 11px;
  border: 1px solid var(--site-line);
  border-radius: 9px;
  background: rgba(5, 5, 10, .7);
  color: #fff;
}
.site-table-count { color: var(--site-muted); font: 11px ui-monospace, monospace; white-space: nowrap; }
.site-table-pager { display: flex; align-items: center; gap: 7px; }
.site-table-pager button {
  width: 38px;
  min-height: 38px;
  border: 1px solid var(--site-line);
  border-radius: 9px;
  background: rgba(217, 71, 79, .1);
  color: #fff;
}
.site-table-pager button:disabled { opacity: .35; cursor: default; }

.calendar-scroll { border: 1px solid var(--site-line); border-radius: 12px; background: rgba(4, 4, 8, .34); }
.calendar-grid { padding: 8px; }
.calendar-day { border-radius: 9px !important; }
.calendar-event { border: 1px solid rgba(240, 154, 103, .16); }

footer {
  width: min(1400px, calc(100% - 36px));
  margin: 0 auto;
  padding: 36px 0 46px !important;
  border-top: 1px solid var(--site-line) !important;
  background: transparent !important;
}
.footer-nav { display: flex; align-items: center; gap: 28px; }
.f-menu ul { gap: 8px !important; }
.f-menu a { display: block; padding: 8px 10px; border-radius: 7px; }
.f-menu a:hover { background: rgba(255, 255, 255, .04); color: #fff !important; }

@media (max-width: 1120px) {
  .menu-top { grid-template-columns: 1fr auto !important; }
  .menu-top::before { grid-column: 1; justify-self: start; margin: 0 20px 0 0; }
  .menu-top > .menu-top-left,
  .menu-top > .menu-top-right { display: none !important; }
  .site-menu-toggle { display: inline-grid; }
  .site-nav-open .menu-top > .menu-top-left,
  .site-nav-open .menu-top > .menu-top-right {
    position: fixed !important;
    left: 16px;
    right: 16px;
    z-index: 110;
    display: grid !important;
    grid-template-columns: repeat(3, 1fr);
    width: calc(100vw - 32px) !important;
    max-width: none !important;
    height: auto !important;
    justify-self: stretch !important;
    gap: 7px;
    padding: 12px !important;
    border: 1px solid var(--site-line);
    background: rgba(12, 10, 17, .98);
  }
  .site-nav-open .menu-top > .menu-top-left { top: 70px; border-radius: 13px 13px 0 0; border-bottom: 0; }
  .site-nav-open .menu-top > .menu-top-right { top: 132px; border-radius: 0 0 13px 13px; }
  .site-nav-open .menu-top li a { display: block; text-align: center; }
  .container {
    grid-template-columns: minmax(210px, 250px) minmax(0, 1fr) !important;
  }
  .content { grid-column: 2; }
  .right-sidebar {
    grid-column: 1 / -1;
    display: grid !important;
    grid-template-columns: 2fr 1fr !important;
    gap: 17px;
  }
  .right-sidebar .shop-block { grid-template-columns: repeat(3, 1fr) !important; }
}

@media (max-width: 760px) {
  .wrapper { background-position: center 70px !important; background-size: auto 420px !important; }
  .header { height: 390px !important; min-height: 390px !important; }
  .menu-top { height: 66px !important; padding: 0 13px !important; }
  .menu-top::before { font-size: 11px !important; letter-spacing: .14em; }
  .site-nav-open .menu-top > .menu-top-left { top: 62px; }
  .site-nav-open .menu-top > .menu-top-right { top: 124px; }
  .server-load { display: none !important; }
  .container {
    width: min(100% - 22px, 720px) !important;
    display: flex !important;
    flex-direction: column;
    margin-top: -27px !important;
    padding: 0 0 35px !important;
  }
  .content { order: 1; }
  .sidebar { order: 2; }
  .right-sidebar { order: 3; display: block !important; }
  .sidebar .best-players { display: none; }
  .sidebar .shop-block { display: none !important; }
  .right-sidebar .shop-block { grid-template-columns: 1fr !important; }
  .last-news-block { grid-template-columns: 1fr !important; }
  .news-img img { min-height: 180px; max-height: 230px; }
  .support-heading,
  .ranking-heading { align-items: flex-start !important; flex-direction: column; }
  .support-form { grid-template-columns: 1fr !important; }
  .support-form label { grid-column: 1 !important; }
  .calendar-grid { min-width: 680px !important; }
  .site-table-tools { grid-template-columns: 1fr; }
  .ranking-table { display: block; overflow-x: auto; }
  footer { width: calc(100% - 24px); }
  .footer-nav { align-items: flex-start; flex-direction: column; }
  .f-menu ul { flex-wrap: wrap; gap: 3px !important; }
}

@media (max-width: 460px) {
  .site-nav-open .menu-top li a { padding-inline: 6px !important; font-size: 9px !important; }
  .site-nav-open .menu-top > .menu-top-right { top: 137px; }
  .page-block,
  .content > div { padding: 18px !important; }
  .content > .news-block { padding: 0 !important; }
  .last-news-info { padding: 22px 18px !important; }
  .inline-news-archive { padding: 20px 18px 25px !important; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}