@import url("https://fonts.googleapis.com/css2?family=Orbitron:wght@600;700;800;900&family=Rajdhani:wght@500;600;700&display=swap");

html,
body {
  width: 100%;
  min-height: 100%;
  margin: 0 !important;
  padding: 0 !important;
  background: #061b2d;
}

html.gcl-has-session [data-gcl-guest-only],
html.gcl-has-session .gcl-guest-only {
  display: none !important;
}

html.gcl-has-session .gcl-auth-only[hidden] {
  display: revert !important;
}

html.gcl-no-session .gcl-auth-only {
  display: none !important;
}

.gcl-root h1,
.gcl-root h2,
.gcl-root h3,
.gcl-root .gcl-button,
.gcl-root button,
.gcl-root nav a,
.gcl-root .gcl-kicker,
.gcl-root .gcl-site-brand strong {
  font-family: "Orbitron", "Exo 2", "Segoe UI", Arial, sans-serif;
}

.gcl-root p,
.gcl-root li,
.gcl-root input,
.gcl-root select,
.gcl-root textarea,
.gcl-root small {
  font-family: "Rajdhani", "Exo 2", "Segoe UI", Arial, sans-serif;
}

.gcl-root a,
.gcl-root button,
.gcl-root .gcl-site-brand img {
  transition: transform 180ms ease, filter 180ms ease, box-shadow 180ms ease, border-color 180ms ease, color 180ms ease;
}

.gcl-root a:hover,
.gcl-root button:hover {
  filter: brightness(1.08) saturate(1.08);
}

.gcl-root .gcl-site-brand:hover img,
.gcl-root .gcl-site-brand.is-tip-active img {
  transform: translateY(-2px) scale(1.035);
  filter: drop-shadow(0 0 18px rgba(89, 226, 255, 0.38));
}

.gcl-root .gcl-button,
.gcl-root .gcl-package-primary,
.gcl-root .gcl-signin-text,
.gcl-root .gcl-account-avatar,
.gcl-root .gcl-site-menu,
.gcl-root .gcl-link {
  position: relative;
  overflow: hidden;
}

.gcl-root .gcl-button::after,
.gcl-root .gcl-package-primary::after,
.gcl-root .gcl-signin-text::after,
.gcl-root .gcl-account-avatar::after,
.gcl-root .gcl-site-menu::after,
.gcl-root .gcl-link::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 0 38%, rgba(255, 255, 255, 0.2) 48%, transparent 58% 100%);
  transform: translateX(-130%);
  pointer-events: none;
}

.gcl-root .gcl-button:hover::after,
.gcl-root .gcl-package-primary:hover::after,
.gcl-root .gcl-signin-text:hover::after,
.gcl-root .gcl-account-avatar:hover::after,
.gcl-root .gcl-site-menu:hover::after,
.gcl-root .gcl-link:hover::after {
  animation: gclButtonSweep 680ms ease;
}

.gcl-server-grid {
  display: grid;
  gap: 18px;
}

.gcl-server-card {
  display: grid;
  grid-template-columns: minmax(190px, 30%) 1fr;
  min-height: 370px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.1);
  background: #101923;
  border-radius: 8px;
}

.gcl-server-art {
  position: relative;
  min-height: 370px;
  background: #172231;
}

.gcl-server-art::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(16,25,35,0) 45%, #101923 100%);
  pointer-events: none;
}

.gcl-server-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.gcl-server-art strong {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 48px;
  font-weight: 900;
  background: linear-gradient(135deg, #192b38, #5f2734);
}

.gcl-server-body {
  padding: 18px;
  display: grid;
  gap: 12px;
}

.gcl-server-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.gcl-server-head h2 {
  margin: 4px 0 0;
  color: #f8fbff;
  font-size: 24px;
  line-height: 1.1;
}

.gcl-server-status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 10px;
  border-radius: 999px;
  color: #fff;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .08em;
  background: rgba(223,169,64,.22);
  border: 1px solid rgba(223,169,64,.34);
}

.gcl-server-status i,
.gcl-server-signal i {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: #dfa940;
  box-shadow: 0 0 0 4px rgba(223,169,64,.12);
}

.gcl-server-status.is-good {
  background: rgba(54,195,130,.18);
  border-color: rgba(54,195,130,.35);
}

.gcl-server-status.is-good i,
.gcl-server-signal.is-good i {
  background: #36c382;
  box-shadow: 0 0 0 4px rgba(54,195,130,.12), 0 0 20px rgba(54,195,130,.8);
  animation: gcl-heartbeat 1.4s ease-in-out infinite;
}

.gcl-server-signal-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.gcl-server-signal {
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 10px;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 8px;
  color: #dce7f4;
  background: rgba(255,255,255,.035);
  font-size: 12px;
  font-weight: 900;
}

.gcl-server-signal .is-mode {
  background: #59ade4;
  box-shadow: 0 0 0 4px rgba(89,173,228,.12);
}

.gcl-server-signal .is-heart {
  background: #36c382;
  box-shadow: 0 0 0 4px rgba(54,195,130,.12), 0 0 16px rgba(54,195,130,.56);
}

.gcl-server-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.gcl-server-stats span,
.gcl-server-connect label {
  background: rgba(255,255,255,.045);
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 8px;
}

.gcl-server-stats span {
  padding: 10px;
  display: grid;
  gap: 4px;
}

.gcl-server-stats strong {
  color: #fff;
  font-size: 17px;
}

.gcl-server-stats strong.gcl-server-stat-unavailable {
  color: #9fb0c4;
  font-size: 13px;
  line-height: 1.1;
}

.gcl-server-stats small,
.gcl-server-connect small,
.gcl-server-foot {
  color: #9fb0c4;
}

.gcl-server-connect {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.gcl-server-connect label {
  display: grid;
  gap: 6px;
  padding: 10px;
}

.gcl-server-connect input {
  width: 100%;
  border: 0;
  color: #f8fbff;
  background: transparent;
  font-weight: 800;
  font-size: 14px;
  outline: none;
}

.gcl-server-map-flow {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid rgba(54,195,130,.16);
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(54,195,130,.08), rgba(89,173,228,.035));
}

.gcl-server-map-flow-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: #9fb0c4;
  font-size: 12px;
  font-weight: 900;
}

.gcl-server-map-flow-head strong {
  color: #dce7f4;
  font-weight: 900;
}

.gcl-server-map-flow-head b {
  color: #36c382;
}

.gcl-server-timebar {
  height: 9px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.05);
}

.gcl-server-timebar i {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #36c382, #9cffc8);
  box-shadow: 0 0 18px rgba(54,195,130,.85);
  transition: width 420ms ease;
}

.gcl-server-ranking-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.gcl-server-ranking-tabs button {
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 8px;
  color: #9fb0c4;
  background: rgba(9,18,30,.68);
  font: inherit;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
}

.gcl-server-ranking-tabs button.is-active {
  color: #061b2d;
  border-color: rgba(255,211,36,.55);
  background: #ffd324;
}

.gcl-server-inline-panel {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 10px;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 8px;
  background: rgba(255,255,255,.035);
}

.gcl-server-player-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
}

.gcl-server-player-chip,
.gcl-server-mini-button {
  min-height: 36px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 8px;
  color: #f8fbff;
  background: rgba(9,18,30,.76);
  font: inherit;
  font-weight: 900;
  cursor: pointer;
}

.gcl-server-player-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  max-width: 100%;
  padding: 7px 9px;
  font-size: 13px;
}

.gcl-server-player-chip span {
  color: #ffd324;
}

.gcl-server-player-chip em {
  color: #9fb0c4;
  font-style: normal;
  font-size: 12px;
}

.gcl-server-mini-button {
  padding: 0 14px;
  white-space: nowrap;
}

.gcl-server-mini-button.is-accent {
  color: #061b2d;
  background: #ffd324;
  border-color: rgba(255,211,36,.45);
  font-weight: 900;
}

.gcl-server-empty {
  color: #9fb0c4;
  font-size: 13px;
  font-weight: 800;
}

.gcl-server-modal[hidden] {
  display: none;
}

.gcl-server-modal {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(2,10,18,.76);
  backdrop-filter: blur(10px);
}

.gcl-server-modal-panel {
  width: min(620px, 100%);
  max-height: min(720px, calc(100vh - 36px));
  overflow: hidden;
  display: grid;
  gap: 14px;
  padding: 18px;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 8px;
  color: #dce7f4;
  background: #101923;
  box-shadow: 0 22px 70px rgba(0,0,0,.45);
}

.gcl-server-modal-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}

.gcl-server-modal-head h3 {
  margin: 4px 0 0;
  color: #f8fbff;
  font-size: 24px;
}

.gcl-server-modal-head button {
  width: 36px;
  height: 36px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 8px;
  color: #f8fbff;
  background: rgba(255,255,255,.05);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}

.gcl-server-search {
  display: grid;
  gap: 7px;
}

.gcl-server-search span,
.gcl-server-join-command small {
  color: #9fb0c4;
  font-size: 12px;
  font-weight: 800;
}

.gcl-server-search input,
.gcl-server-join-command {
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 8px;
  background: rgba(2,18,31,.9);
}

.gcl-server-search input {
  min-height: 42px;
  padding: 0 12px;
  color: #f8fbff;
  outline: none;
}

.gcl-server-modal-list,
.gcl-server-join-list {
  list-style: none;
  padding: 0;
  margin: 0;
  overflow: auto;
}

.gcl-server-modal-list {
  display: grid;
  gap: 8px;
  max-height: 430px;
}

.gcl-server-modal-list li {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 5px 10px;
  align-items: center;
  padding: 10px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 8px;
  background: rgba(255,255,255,.035);
}

.gcl-server-modal-list li span {
  color: #ffd324;
  font-weight: 900;
}

.gcl-server-modal-list li strong {
  color: #f8fbff;
}

.gcl-server-modal-list li em,
.gcl-server-modal-list li small {
  color: #9fb0c4;
  font-style: normal;
}

.gcl-server-modal-list li small {
  grid-column: 2 / -1;
}

.gcl-server-modal-list li.is-empty {
  grid-template-columns: 1fr;
}

.gcl-server-join-command {
  display: grid;
  gap: 5px;
  padding: 12px;
}

.gcl-server-join-command strong {
  color: #f8fbff;
  word-break: break-word;
}

.gcl-server-join-list {
  counter-reset: gcl-join-step;
  display: grid;
  gap: 10px;
  max-height: 430px;
}

.gcl-server-join-list li {
  counter-increment: gcl-join-step;
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 10px;
  align-items: start;
  line-height: 1.45;
}

.gcl-server-join-list li::before {
  content: counter(gcl-join-step);
  width: 24px;
  height: 24px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #061b2d;
  background: #ffd324;
  font-weight: 900;
  font-size: 12px;
}

.gcl-server-foot {
  margin: 0;
}

@keyframes gcl-heartbeat {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.28);
  }
}

@media (max-width: 820px) {
  .gcl-server-card {
    grid-template-columns: 1fr;
  }

  .gcl-server-art {
    min-height: 230px;
    height: 230px;
  }

  .gcl-server-art::after {
    background: linear-gradient(180deg, rgba(16,25,35,0) 40%, #101923 100%);
  }

  .gcl-server-stats,
  .gcl-server-connect,
  .gcl-server-inline-panel {
    grid-template-columns: 1fr;
  }

  .gcl-server-inline-panel {
    align-items: stretch;
  }

  .gcl-server-map-flow-head {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 540px) {
  .gcl-server-body {
    padding: 12px;
    gap: 9px;
  }

  .gcl-server-head h2 {
    font-size: 21px;
  }

  .gcl-server-art {
    min-height: 150px;
    height: 150px;
  }

  .gcl-server-signal-row {
    flex-wrap: nowrap;
    overflow-x: auto;
  }

  .gcl-server-signal {
    flex: 0 0 auto;
  }

  .gcl-server-stats {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  .gcl-server-map-flow {
    gap: 7px;
    padding: 8px;
  }

  .gcl-server-map-flow-head {
    flex-direction: row;
    align-items: center;
  }

  .gcl-server-connect label {
    padding: 8px;
  }

  .gcl-server-inline-panel {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding: 8px;
  }

  .gcl-server-player-strip {
    grid-column: 1 / -1;
    order: 3;
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 2px;
  }

  .gcl-server-player-chip {
    flex: 0 0 auto;
  }

  .gcl-server-mini-button {
    width: 100%;
    justify-content: center;
    min-height: 34px;
  }

  .gcl-server-modal {
    padding: 10px;
    place-items: end center;
  }

  .gcl-server-modal-panel {
    max-height: calc(100vh - 20px);
    padding: 14px;
  }
}

html {
  margin-top: 0 !important;
}

body {
  overflow-y: auto;
}

html.gcl-game-drawer-scroll-lock,
body.gcl-game-drawer-scroll-lock,
html.gcl-modal-scroll-lock,
body.gcl-modal-scroll-lock {
  overflow: hidden !important;
  overscroll-behavior: none;
}

body:has(.gcl-root) {
  margin: 0 !important;
  padding: 0 !important;
}

body.admin-bar:has(.gcl-root) {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

body:has(.gcl-root) #wpadminbar {
  display: none !important;
}

.gcl-root {
  position: relative;
  isolation: isolate;
  min-height: 100vh;
  margin: 0 !important;
  padding: 0 !important;
  color: #f8fbff;
  background: #061b2d;
  overflow: visible;
  --gcl-header-height: 120px;
}

.gcl-icon-sprite {
  width: 0;
  height: 0;
  position: absolute;
  overflow: hidden;
}

.gcl-shell {
  width: min(1380px, calc(100% - 48px));
  margin: 0 auto;
}

.gcl-site-header {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 500 !important;
  margin: 0 !important;
  background: linear-gradient(180deg, rgba(4, 23, 39, 0.97), rgba(3, 14, 28, 0.95));
  border-bottom: 1px solid rgba(89, 226, 255, 0.18);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 14px 42px rgba(0, 0, 0, 0.18), inset 0 -1px 0 rgba(89, 226, 255, 0.08);
  transform: translateY(0);
  transition: transform 220ms ease, opacity 220ms ease;
  will-change: transform;
}

.gcl-site-header::before {
  display: none;
}

body.admin-bar .gcl-root .gcl-site-header,
body.admin-bar .gcl-site-header {
  top: 0 !important;
}

.gcl-root .gcl-landing {
  padding-top: 0 !important;
}

.gcl-root.is-game-drawer-open .gcl-site-header {
  transform: translateY(-110%);
  opacity: 0;
  pointer-events: none;
}

.gcl-root .gcl-game-drawer {
  position: fixed !important;
  inset: 0 !important;
  display: block !important;
  width: 100vw !important;
  height: 100dvh !important;
  z-index: 2147483500 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  padding: 0 !important;
  background: #020711 !important;
  overscroll-behavior: contain;
}

.gcl-root .gcl-game-drawer-players {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  width: min(980px, 100%);
  padding: 14px 16px;
  border: 1px solid rgba(77, 223, 255, .2);
  border-radius: 12px;
  background: rgba(4, 17, 31, .72);
  color: var(--gcl-text-soft);
  font-size: 12px;
}

.gcl-root .gcl-game-drawer-players .gcl-button { margin-left: auto; }
.gcl-root .gcl-game-player-row { display:grid; grid-template-columns:28px minmax(100px,1fr) auto; align-items:center; gap:9px; width:100%; padding:7px 0; border-top:1px solid rgba(255,255,255,.08); }
.gcl-root .gcl-game-player-row b { color:var(--gcl-warn); font-size:11px; }
.gcl-root .gcl-game-player-row em { overflow:hidden; color:var(--gcl-text); font-style:normal; text-overflow:ellipsis; white-space:nowrap; }
.gcl-root .gcl-game-player-row small { color:var(--gcl-text-soft); font-size:11px; }
@media (max-width: 700px) {
  .gcl-root .gcl-game-drawer { padding: 0 !important; }
  .gcl-root .gcl-game-drawer h2 { font-size: clamp(2rem, 12vw, 3.8rem) !important; overflow-wrap: anywhere; }
  .gcl-root .gcl-game-drawer-players .gcl-button { width: 100%; margin-left: 0; text-align: center; }
  .gcl-root .gcl-game-player-row { grid-template-columns:24px minmax(0,1fr); }
  .gcl-root .gcl-game-player-row small { grid-column:2; }
}

/* Full-screen detail layers must own the viewport without footer/tooltips leaking over them. */
html.gcl-game-drawer-scroll-lock .gcl-site-footer,
html.gcl-server-sheet-lock .gcl-site-footer,
html.gcl-game-drawer-scroll-lock [data-gcl-smart-tip],
html.gcl-server-sheet-lock [data-gcl-smart-tip] {
  visibility: hidden !important;
  pointer-events: none !important;
}

.gcl-root .gcl-game-drawer[hidden] {
  display: none !important;
}

.gcl-site-header-inner {
  position: relative;
  z-index: 1;
  min-height: 86px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.gcl-header-ticker {
  position: relative;
  z-index: 0;
  height: 34px;
  overflow: hidden;
  border-top: 1px solid rgba(72, 255, 123, .22);
  background: linear-gradient(90deg, rgba(0, 0, 0, .98), rgba(5, 14, 9, .92), rgba(0, 0, 0, .98));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
}

.gcl-header-ticker::before,
.gcl-header-ticker::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 2;
  width: min(120px, 16vw);
  pointer-events: none;
}

.gcl-header-ticker::before {
  left: 0;
  background: linear-gradient(90deg, #000, transparent);
}

.gcl-header-ticker::after {
  right: 0;
  background: linear-gradient(270deg, #000, transparent);
}

.gcl-header-ticker-track {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-width: max-content;
  height: 100%;
  padding-left: max(24px, calc((100vw - 1380px) / 2 + 24px));
  animation: gclHeaderTicker 34s linear infinite;
  will-change: transform;
}

.gcl-header-ticker:hover .gcl-header-ticker-track {
  animation-play-state: paused;
}

.gcl-header-ticker a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: max-content;
  color: #fff;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0;
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
}

.gcl-header-ticker a::after {
  content: "";
  width: 6px;
  height: 6px;
  margin-left: 4px;
  border-radius: 50%;
  background: rgba(72, 255, 123, .86);
  box-shadow: 0 0 12px rgba(72, 255, 123, .62);
}

.gcl-header-ticker .gcl-menu-svg {
  width: 15px;
  height: 15px;
  color: #48ff7b;
  filter: drop-shadow(0 0 8px rgba(72, 255, 123, .42));
}

.gcl-header-ticker span {
  color: #48ff7b;
  font-weight: 800;
}

.gcl-header-ticker strong {
  color: #fff;
  font-weight: 900;
}

.gcl-header-ticker em {
  color: rgba(255, 255, 255, .72);
  font-style: normal;
  font-weight: 500;
}

@keyframes gclHeaderTicker {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(-50%, 0, 0);
  }
}

.gcl-site-brand img {
  display: block;
  width: 142px;
  max-height: 58px;
  object-fit: contain;
}

.gcl-main-nav {
  display: flex;
  align-items: center;
  gap: 10px;
}

.gcl-nav-item > a,
.gcl-overflow-panel a,
.gcl-signin-text,
.gcl-account-panel a,
.gcl-account-panel button {
  color: #fff;
  text-transform: uppercase;
  font-weight: 900;
  letter-spacing: 0;
  text-decoration: none;
}

.gcl-nav-item {
  position: relative;
}

.gcl-nav-item > a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  position: relative;
  padding: 36px 18px;
  transition: color 180ms ease, background 180ms ease, text-shadow 180ms ease;
}

.gcl-nav-item > a::after {
  content: "";
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 18px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, #b53eff, #59e2ff, #ffd324);
  box-shadow: 0 0 18px rgba(89, 226, 255, .3);
  opacity: 0;
  transform: scaleX(.25);
  transition: opacity 180ms ease, transform 180ms ease;
}

.gcl-nav-item > a.is-active {
  color: #59e2ff;
  text-shadow: 0 0 18px rgba(89, 226, 255, .22);
}

.gcl-nav-item > a.is-active::after,
.gcl-nav-item:hover > a::after,
.gcl-nav-item:focus-within > a::after {
  opacity: 1;
  transform: scaleX(1);
}

.gcl-nav-item:hover > a,
.gcl-nav-item:focus-within > a {
  background:
    linear-gradient(180deg, rgba(181, 62, 255, .14), rgba(89, 226, 255, .06));
  color: #fff;
  text-shadow: 0 0 18px rgba(89, 226, 255, .28);
}

.gcl-nav-highlight {
  background: #ffd324;
  color: #041624 !important;
  padding: 16px 24px !important;
  border-radius: 8px;
}

.gcl-site-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

@media (max-width: 1380px) {
  .gcl-shell {
    width: min(100% - 28px, 1380px);
  }

  .gcl-site-header-inner {
    gap: 14px;
    min-height: 82px;
  }

  .gcl-site-brand img {
    width: 118px;
  }

  .gcl-main-nav {
    gap: 3px;
    min-width: 0;
  }

  .gcl-nav-item > a {
    gap: 6px;
    padding: 30px 9px;
    font-size: 12px;
    white-space: nowrap;
  }

  .gcl-nav-item > a::after {
    left: 9px;
    right: 9px;
    bottom: 15px;
  }

  .gcl-account-avatar,
  .gcl-site-menu {
    min-height: 42px;
  }

  .gcl-account-avatar {
    width: 42px;
  }

  .gcl-site-menu {
    width: 50px;
  }
}

@media (max-width: 1240px) {
  .gcl-main-nav {
    display: none;
  }

  .gcl-overflow-menu {
    display: block;
  }

  .gcl-site-actions > .gcl-signin-text,
  .gcl-site-actions > .gcl-account-menu {
    display: none !important;
  }
}

.gcl-signin-text {
  border: 0;
  background: transparent;
  color: #fff;
  cursor: pointer;
  font-size: 13px;
  font-weight: 900;
  padding: 12px 4px;
  text-transform: uppercase;
}

.gcl-account-menu {
  position: relative;
}

.gcl-account-avatar {
  min-height: 46px;
  border: 1px solid rgba(89, 226, 255, 0.32);
  background:
    radial-gradient(circle at 50% 0, rgba(181, 62, 255, .2), transparent 58%),
    linear-gradient(180deg, rgba(12, 44, 72, 0.9), rgba(4, 18, 34, 0.94));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06), 0 0 24px rgba(89, 226, 255, 0.12);
  transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.gcl-account-avatar {
  position: relative;
  width: 46px;
  border-radius: 50%;
  padding: 0;
  overflow: hidden;
}

.gcl-account-avatar::before {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: inherit;
  border: 1px solid rgba(255, 211, 36, .24);
  opacity: .72;
  animation: gclChampionLoop 2.4s ease-in-out infinite;
}

.gcl-account-avatar:hover,
.gcl-account-avatar[aria-expanded="true"] {
  border-color: rgba(255, 211, 36, .58);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), 0 0 30px rgba(255, 211, 36, .18), 0 0 26px rgba(89, 226, 255, .12);
  transform: translateY(-1px);
}

.gcl-account-avatar span {
  align-items: center;
  background-position: center;
  background-size: cover;
  display: flex;
  height: 100%;
  justify-content: center;
  width: 100%;
}

.gcl-root .gcl-site-menu {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  width: 44px;
  min-height: 42px;
  padding: 0;
  gap: 5px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: #fff;
  cursor: pointer;
}

.gcl-root .gcl-site-menu:hover,
.gcl-root .gcl-site-menu:focus-visible,
.gcl-root .gcl-site-menu[aria-expanded="true"] {
  border: 0;
  background: transparent;
  box-shadow: none;
  color: #fff;
  outline: none;
  transform: none;
}

.gcl-root .gcl-site-menu span {
  display: block;
  width: 22px;
  height: 2px;
  background: #fff;
  border-radius: 999px;
  transition: transform 180ms ease, opacity 180ms ease, background 180ms ease;
}

.gcl-overflow-menu {
  position: relative;
  display: none;
}

.gcl-overflow-panel,
.gcl-account-panel {
  position: absolute;
  right: 0;
  top: calc(100% + 12px);
  padding: 14px;
  border: 1px solid rgba(89, 173, 228, 0.28);
  border-radius: 8px;
  background: rgba(2, 18, 31, 0.98);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.38);
}

.gcl-root .gcl-overflow-panel {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  max-height: none;
  overflow: hidden;
  display: block;
  padding: 0;
  z-index: 24000;
  background: rgba(0, 0, 0, 0.58);
  border: 0;
  border-radius: 0;
  box-shadow: none;
  animation: gclMenuBackdropIn 220ms ease both;
}

.gcl-root .gcl-overflow-panel.is-closing {
  animation: gclMenuBackdropOut 220ms ease both;
}

.gcl-account-panel {
  width: 290px;
  z-index: 520;
  display: grid;
  gap: 7px;
  padding: 12px;
  border-color: rgba(181, 62, 255, .36);
  background:
    radial-gradient(circle at 14% 0, rgba(181, 62, 255, .2), transparent 32%),
    linear-gradient(180deg, rgba(8, 10, 25, .98), rgba(2, 10, 20, .98));
  box-shadow: 0 26px 70px rgba(0, 0, 0, .52), 0 0 28px rgba(181, 62, 255, .18), inset 0 1px 0 rgba(255, 255, 255, .05);
  overflow: hidden;
  animation: gclMegaOpen 180ms cubic-bezier(.2, .82, .2, 1) both;
}

.gcl-account-panel::after {
  content: "";
  position: absolute;
  top: -7px;
  right: 18px;
  width: 14px;
  height: 14px;
  border-left: 1px solid rgba(181, 62, 255, .36);
  border-top: 1px solid rgba(181, 62, 255, .36);
  background: rgba(8, 10, 25, .98);
  transform: rotate(45deg);
}

.gcl-account-panel[hidden] {
  display: none !important;
}

.gcl-account-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(110deg, transparent 0 34%, rgba(89, 226, 255, .16) 42%, transparent 52%),
    linear-gradient(rgba(89, 226, 255, .06) 1px, transparent 1px);
  background-size: 240px 100%, 100% 9px;
  opacity: .66;
  animation: gclMegaScan 2.8s linear infinite;
}

.gcl-overflow-panel a,
.gcl-account-panel a,
.gcl-account-panel button {
  position: relative;
  z-index: 1;
  background: rgba(3, 13, 28, .7);
  border: 1px solid rgba(89, 226, 255, .12);
  border-radius: 8px;
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  text-align: left;
  width: 100%;
  min-height: 54px;
  padding: 9px 10px;
  transition: border-color 160ms ease, background 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}

.gcl-account-panel a::before,
.gcl-account-panel button::before {
  display: none;
}

.gcl-account-panel a:hover,
.gcl-account-panel button:hover {
  border-color: rgba(255, 211, 36, .42);
  background: linear-gradient(90deg, rgba(68, 21, 99, .72), rgba(4, 34, 54, .78));
  box-shadow: 0 12px 30px rgba(0, 0, 0, .26), 0 0 20px rgba(89, 226, 255, .1);
  transform: translateX(-3px);
}

.gcl-account-panel strong,
.gcl-account-panel small {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gcl-account-panel strong {
  color: #fff;
  font-family: "Orbitron", "Exo 2", "Segoe UI", Arial, sans-serif;
  font-size: 12px;
  font-weight: 900;
  line-height: 1.05;
}

.gcl-account-panel span {
  display: block;
  min-width: 0;
}

.gcl-account-panel small {
  color: rgba(207, 228, 244, .72);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.15;
}

.gcl-menu-svg {
  display: block;
  width: 18px;
  height: 18px;
  color: currentColor;
  flex: 0 0 auto;
}

.gcl-account-panel .gcl-menu-svg,
.gcl-mega-links .gcl-menu-svg {
  width: 34px;
  height: 34px;
  padding: 8px;
  border: 1px solid rgba(181, 62, 255, .34);
  border-radius: 8px;
  color: #59e2ff;
  background: linear-gradient(135deg, rgba(181, 62, 255, .22), rgba(89, 226, 255, .1));
  box-sizing: border-box;
}

.gcl-site-menu[aria-expanded="true"] span {
  background: #fff;
}

.gcl-site-menu[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.gcl-site-menu[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}

.gcl-site-menu[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

html.gcl-menu-open,
body.gcl-menu-open {
  overflow: hidden !important;
}

.gcl-menu-open .gcl-site-header {
  z-index: 25000 !important;
  background: transparent;
  border-bottom-color: transparent;
  backdrop-filter: none;
}

.gcl-menu-open .gcl-site-header-inner > .gcl-site-brand,
.gcl-menu-open .gcl-site-header-inner > .gcl-main-nav,
.gcl-menu-open .gcl-site-actions > .gcl-signin-text,
.gcl-menu-open .gcl-site-actions > .gcl-account-menu {
  opacity: 0;
  pointer-events: none;
}

.gcl-menu-open .gcl-header-ticker {
  opacity: 0;
  pointer-events: none;
}

.gcl-menu-open .gcl-overflow-menu {
  z-index: 25001;
}

@keyframes gclHeaderScan {
  to {
    background-position: 320px 0, 0 10px;
  }
}

.gcl-nav-submenu {
  display: none;
  position: absolute;
  top: calc(100% - 1px);
  left: 50%;
  width: min(360px, calc(100vw - 32px));
  padding: 10px;
  border: 1px solid rgba(94, 226, 255, 0.24);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(7, 25, 42, 0.98), rgba(2, 10, 20, 0.98)),
    radial-gradient(circle at 20% 0, rgba(255, 211, 36, 0.12), transparent 38%);
  box-shadow: 0 26px 68px rgba(0, 0, 0, 0.52), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  overflow: hidden;
  transform: translateX(-50%);
  z-index: 150;
  animation: gclSubmenuIn 140ms ease both;
}

.gcl-nav-submenu::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, transparent, rgba(94, 226, 255, 0.08), transparent),
    linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px);
  background-size: 180px 100%, 100% 8px;
  opacity: 0.62;
}

.gcl-nav-submenu::after {
  content: "";
  position: absolute;
  top: -5px;
  left: 50%;
  width: 10px;
  height: 10px;
  border-left: 1px solid rgba(94, 226, 255, 0.24);
  border-top: 1px solid rgba(94, 226, 255, 0.24);
  background: rgba(7, 25, 42, 0.98);
  transform: translateX(-50%) rotate(45deg);
}

.gcl-nav-item:hover .gcl-nav-submenu,
.gcl-nav-item:focus-within .gcl-nav-submenu {
  display: grid;
  gap: 6px;
}

.gcl-nav-submenu a {
  position: relative;
  z-index: 1;
  min-height: 54px;
  align-items: center;
  border-radius: 8px;
  display: grid !important;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 10px;
  padding: 9px 10px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  background: rgba(0, 13, 26, 0.48);
  color: #fff;
  text-decoration: none;
  transition: transform 150ms ease, border-color 150ms ease, background 150ms ease, box-shadow 150ms ease;
}

.gcl-nav-submenu a::before {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(94, 226, 255, 0.24);
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(89, 226, 255, 0.18), rgba(255, 211, 36, 0.08));
  box-shadow: inset 0 0 18px rgba(94, 226, 255, 0.08);
  color: #59e2ff;
  font-size: 10px;
  font-weight: 1000;
}

.gcl-nav-submenu a:nth-child(1)::before { content: "01"; }
.gcl-nav-submenu a:nth-child(2)::before { content: "02"; }
.gcl-nav-submenu a:nth-child(3)::before { content: "03"; }
.gcl-nav-submenu a:nth-child(4)::before { content: "04"; }
.gcl-nav-submenu a:nth-child(5)::before { content: "05"; }
.gcl-nav-submenu a:nth-child(6)::before { content: "06"; }

.gcl-nav-submenu a > * {
  grid-column: 2;
}

.gcl-nav-submenu a:hover {
  border-color: rgba(94, 226, 255, 0.32);
  background: rgba(9, 46, 72, 0.72);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.22), 0 0 18px rgba(94, 226, 255, 0.08);
  transform: translateX(3px);
}

.gcl-nav-submenu strong {
  color: #fff;
  display: block;
  min-width: 0;
  overflow: hidden;
  font-family: "Orbitron", "Exo 2", "Segoe UI", Arial, sans-serif;
  font-size: 12px;
  font-weight: 900;
  line-height: 1.05;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.gcl-nav-submenu span {
  color: rgba(203, 221, 238, 0.72);
  display: block;
  min-width: 0;
  overflow: hidden;
  font-family: "Rajdhani", "Segoe UI", Arial, sans-serif;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.15;
  text-overflow: ellipsis;
  text-transform: none;
  white-space: nowrap;
}

@keyframes gclSubmenuIn {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(8px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0) scale(1);
  }
}

/* Holo command submenu */
.gcl-main-nav .gcl-nav-item > a {
  position: relative;
  isolation: isolate;
}

.gcl-main-nav .gcl-nav-item {
  position: relative;
}

.gcl-main-nav .gcl-nav-item::before {
  content: "";
  position: absolute;
  left: -12px;
  right: -12px;
  top: 100%;
  height: 42px;
  display: none;
}

.gcl-main-nav .gcl-nav-item:hover::before,
.gcl-main-nav .gcl-nav-item:focus-within::before {
  display: block;
}

.gcl-main-nav .gcl-nav-item[data-gcl-nav-key="leaderboard"] > a {
  display: inline-flex;
  align-items: center;
  gap: 9px;
}

.gcl-main-nav .gcl-nav-item[data-gcl-nav-key="leaderboard"] > a::before {
  display: none;
}

.gcl-main-nav .gcl-nav-submenu {
  top: calc(100% - 1px);
  left: 50%;
  width: min(430px, calc(100vw - 34px));
  padding: 13px;
  border: 1px solid rgba(80, 230, 255, .32);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(3, 20, 34, .96), rgba(3, 9, 22, .94) 52%, rgba(22, 7, 42, .94)),
    radial-gradient(circle at 84% 8%, rgba(255, 211, 36, .16), transparent 28%);
  box-shadow:
    0 28px 80px rgba(0, 0, 0, .58),
    0 0 36px rgba(80, 230, 255, .16),
    inset 0 0 0 1px rgba(255, 255, 255, .045);
  transform: translateX(-50%) perspective(780px) rotateX(-7deg) translateY(8px);
  transform-origin: 50% 0;
  animation: gclHoloDockIn 180ms cubic-bezier(.2, .82, .2, 1) both;
}

.gcl-main-nav .gcl-nav-submenu::before {
  background:
    linear-gradient(110deg, transparent 0 34%, rgba(80, 230, 255, .18) 42%, transparent 52%),
    linear-gradient(rgba(80, 230, 255, .08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
  background-size: 260px 100%, 100% 11px, 34px 100%;
  opacity: .74;
  animation: gclHoloScan 2.4s linear infinite;
}

.gcl-main-nav .gcl-nav-submenu::after {
  top: -7px;
  width: 14px;
  height: 14px;
  border-color: rgba(80, 230, 255, .32);
  background: rgba(4, 20, 34, .98);
  box-shadow: -6px -6px 20px rgba(80, 230, 255, .12);
}

.gcl-main-nav .gcl-nav-item:hover .gcl-nav-submenu,
.gcl-main-nav .gcl-nav-item:focus-within .gcl-nav-submenu {
  display: grid;
  gap: 8px;
}

.gcl-main-nav .gcl-nav-submenu a {
  min-height: 64px;
  grid-template-columns: 46px minmax(0, 1fr) 18px;
  gap: 12px;
  padding: 9px 10px;
  border-color: rgba(80, 230, 255, .13);
  background:
    linear-gradient(90deg, rgba(10, 54, 78, .72), rgba(3, 13, 26, .78)),
    linear-gradient(90deg, rgba(255, 211, 36, calc(.04 + (var(--gcl-sub-index, 0) * .012))), transparent);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .026);
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
}

.gcl-main-nav .gcl-nav-submenu a::before {
  display: none;
}

.gcl-main-nav .gcl-nav-submenu a::after {
  content: "";
  grid-column: 3;
  width: 16px;
  height: 16px;
  border-top: 2px solid rgba(80, 230, 255, .76);
  border-right: 2px solid rgba(80, 230, 255, .76);
  transform: rotate(45deg);
  opacity: .62;
  transition: transform 160ms ease, opacity 160ms ease;
}

.gcl-main-nav .gcl-nav-submenu a > * {
  grid-column: auto;
}

.gcl-main-nav .gcl-nav-submenu a:hover {
  border-color: rgba(255, 211, 36, .42);
  background:
    linear-gradient(90deg, rgba(13, 78, 104, .84), rgba(7, 26, 42, .88)),
    linear-gradient(90deg, rgba(255, 211, 36, .12), transparent);
  box-shadow: 0 16px 36px rgba(0, 0, 0, .3), 0 0 28px rgba(80, 230, 255, .16);
  transform: translateX(7px) scale(1.012);
}

.gcl-main-nav .gcl-nav-submenu a:hover::after {
  opacity: 1;
  transform: translateX(3px) rotate(45deg);
}

.gcl-main-nav .gcl-nav-submenu strong {
  font-size: 13px;
  letter-spacing: .02em;
}

.gcl-main-nav .gcl-nav-submenu span {
  color: rgba(207, 228, 244, .76);
  font-size: 11px;
}

@keyframes gclHoloDockIn {
  from {
    opacity: 0;
    transform: translateX(-50%) perspective(780px) rotateX(-14deg) translateY(18px) scale(.96);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) perspective(780px) rotateX(-7deg) translateY(0) scale(1);
  }
}

@keyframes gclHoloScan {
  to {
    background-position: 260px 0, 0 11px, 34px 0;
  }
}

@keyframes gclChampionLoop {
  0%, 100% {
    transform: translateY(0) rotate(0deg);
    box-shadow: 0 0 16px rgba(255, 211, 36, .24);
  }
  50% {
    transform: translateY(-2px) rotate(12deg);
    box-shadow: 0 0 28px rgba(255, 211, 36, .46);
  }
}

@keyframes gclSubBadgePulse {
  0%, 100% {
    filter: brightness(1);
  }
  50% {
    filter: brightness(1.24);
  }
}

/* Premium desktop mega menu */
.gcl-main-nav .gcl-mega-menu {
  position: fixed;
  top: calc(var(--gcl-header-height, 120px) - 34px);
  left: 50%;
  width: min(1120px, calc(100vw - 44px));
  padding: 18px;
  grid-template-columns: minmax(190px, .78fr) minmax(420px, 1.8fr) minmax(190px, .72fr);
  gap: 14px;
  border: 1px solid rgba(181, 62, 255, .42);
  border-radius: 8px;
  background:
    radial-gradient(circle at 7% 0, rgba(181, 62, 255, .22), transparent 32%),
    radial-gradient(circle at 96% 4%, rgba(89, 226, 255, .16), transparent 30%),
    linear-gradient(180deg, rgba(8, 10, 25, .98), rgba(3, 9, 20, .98));
  box-shadow: 0 30px 90px rgba(0, 0, 0, .62), 0 0 38px rgba(181, 62, 255, .22), inset 0 1px 0 rgba(255, 255, 255, .06);
  transform: translateX(-50%) translateY(-8px);
  animation: gclMegaOpen 180ms cubic-bezier(.2, .82, .2, 1) both;
  z-index: 220;
}

.gcl-main-nav .gcl-mega-menu::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.gcl-main-nav .gcl-mega-menu > * {
  position: relative;
  z-index: 1;
}

.gcl-main-nav .gcl-mega-menu::before {
  background:
    linear-gradient(90deg, transparent, rgba(181, 62, 255, .18), transparent),
    linear-gradient(rgba(89, 226, 255, .055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px);
  background-size: 280px 100%, 100% 11px, 42px 100%;
  opacity: .72;
  animation: gclMegaScan 2.8s linear infinite;
}

.gcl-main-nav .gcl-mega-menu::after {
  top: -7px;
  width: 14px;
  height: 14px;
  border-color: rgba(181, 62, 255, .42);
  background: rgba(8, 10, 25, .98);
  box-shadow: -8px -8px 28px rgba(181, 62, 255, .24);
}

.gcl-main-nav .gcl-nav-item:hover .gcl-mega-menu,
.gcl-main-nav .gcl-nav-item:focus-within .gcl-mega-menu {
  display: grid;
}

.gcl-mega-feature,
.gcl-mega-links,
.gcl-mega-promo {
  position: relative;
  z-index: 1;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 8px;
  background: linear-gradient(145deg, rgba(12, 18, 38, .78), rgba(4, 12, 24, .78));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
}

.gcl-mega-feature {
  display: grid;
  align-content: center;
  min-height: 184px;
  padding: 18px;
  overflow: hidden;
  background:
    var(--gcl-mega-cover-1, linear-gradient(180deg, rgba(7, 11, 24, .88), rgba(4, 10, 20, .92))) center / cover no-repeat,
    linear-gradient(180deg, rgba(7, 11, 24, .88), rgba(4, 10, 20, .92));
}

.gcl-mega-feature::before {
  content: "";
  position: absolute;
  inset: 0;
  width: auto;
  height: auto;
  margin: 0;
  border: 0;
  border-radius: inherit;
  background:
    linear-gradient(90deg, rgba(3, 10, 22, .62), rgba(3, 10, 22, .18)),
    linear-gradient(180deg, rgba(3, 10, 22, .08), rgba(3, 10, 22, .68));
  opacity: 1;
  z-index: 1;
  box-shadow: none;
  animation: none;
}

.gcl-mega-cover-slide {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: var(--gcl-mega-cover-1, none);
  background-position: center;
  background-size: cover;
  opacity: 0;
  transform: scale(1.03);
  animation: gclMegaCoverSlide 16s ease-in-out infinite;
}

.gcl-mega-cover-slide.is-two {
  background-image: var(--gcl-mega-cover-2, var(--gcl-mega-cover-1, none));
  animation-delay: 4s;
}

.gcl-mega-cover-slide.is-three {
  background-image: var(--gcl-mega-cover-3, var(--gcl-mega-cover-1, none));
  animation-delay: 8s;
}

.gcl-mega-cover-slide.is-four {
  background-image: var(--gcl-mega-cover-4, var(--gcl-mega-cover-1, none));
  animation-delay: 12s;
}

.gcl-mega-brand-mark {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 62px;
  height: 62px;
  margin-bottom: 14px;
  padding: 8px;
  border: 1px solid rgba(255, 255, 255, .92);
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 18px rgba(89, 226, 255, .16);
  animation: none;
}

.gcl-mega-brand-mark img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.gcl-mega-feature span,
.gcl-mega-promo span {
  position: relative;
  z-index: 2;
  color: #ff4dff;
  font-size: 10px;
  font-weight: 1000;
  text-transform: uppercase;
}

.gcl-mega-feature strong,
.gcl-mega-promo strong {
  position: relative;
  z-index: 2;
  color: #fff;
  font-family: "Orbitron", "Exo 2", "Segoe UI", Arial, sans-serif;
  font-size: 18px;
  line-height: 1.05;
  text-transform: uppercase;
}

.gcl-mega-feature p,
.gcl-mega-promo small {
  position: relative;
  z-index: 2;
  margin: 8px 0 0;
  color: rgba(214, 226, 242, .72);
  font-size: 12px;
  line-height: 1.35;
}

.gcl-mega-links {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  padding: 12px;
}

.gcl-main-nav .gcl-mega-links a {
  min-height: 62px;
  grid-template-columns: 38px minmax(0, 1fr);
  padding: 10px;
  clip-path: none;
  border-color: rgba(89, 226, 255, .12);
  background: rgba(3, 13, 28, .68);
}

.gcl-main-nav .gcl-mega-links a::after {
  display: none;
}

.gcl-main-nav .gcl-mega-links a::before {
  display: none;
}

.gcl-main-nav .gcl-mega-links a:hover {
  border-color: rgba(255, 211, 36, .45);
  background: linear-gradient(90deg, rgba(68, 21, 99, .72), rgba(4, 34, 54, .78));
  transform: translateY(-2px);
}

.gcl-mega-promo {
  display: grid;
  align-content: end;
  min-height: 184px;
  padding: 18px;
  background:
    linear-gradient(145deg, rgba(78, 20, 110, .72), rgba(4, 14, 28, .82)),
    radial-gradient(circle at 82% 16%, rgba(255, 211, 36, .24), transparent 34%);
}

@keyframes gclMegaOpen {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(8px) scale(.985);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0) scale(1);
  }
}

@keyframes gclMegaCoverCycle {
  0%, 100% {
    filter: hue-rotate(0deg) saturate(1.05);
    transform: scale(1);
  }
  33% {
    filter: hue-rotate(24deg) saturate(1.18);
    transform: scale(1.05) translateX(-2%);
  }
  66% {
    filter: hue-rotate(-18deg) saturate(1.2);
    transform: scale(1.05) translateX(2%);
  }
}

@keyframes gclMegaCoverSlide {
  0%, 100% {
    opacity: 0;
    transform: scale(1.04) translateX(0);
  }
  6%, 24% {
    opacity: .72;
  }
  30% {
    opacity: 0;
    transform: scale(1.1) translateX(-2%);
  }
}

@keyframes gclMegaScan {
  to {
    background-position: 280px 0, 0 11px, 42px 0;
  }
}

.gcl-menu-full {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: min(430px, calc(100% - 24px));
  height: min(66dvh, 560px);
  display: grid;
  grid-template-rows: 34px minmax(0, 1fr) 24px auto;
  gap: 0;
  padding: 10px 0 max(14px, env(safe-area-inset-bottom));
  border: 0;
  border-radius: 34px 34px 0 0;
  background: rgba(3, 4, 8, .78);
  backdrop-filter: blur(22px) saturate(.72);
  -webkit-backdrop-filter: blur(22px) saturate(.72);
  overflow: hidden;
  box-shadow: none;
  animation: gclMenuDrawerIn 260ms cubic-bezier(.2, .82, .2, 1) both;
}

.gcl-menu-full::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(2, 3, 6, .58), rgba(2, 3, 6, .76));
  pointer-events: none;
}

.gcl-menu-full > :not(.gcl-menu-bg-slider) {
  position: relative;
  z-index: 2;
}

.gcl-menu-bg-slider {
  position: absolute;
  inset: -12px;
  z-index: 0;
  overflow: hidden;
  opacity: .33;
  pointer-events: none;
}

.gcl-menu-bg-slider img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0;
  filter: blur(9px) saturate(.72) contrast(.92);
  transform: scale(1.1);
  transition: opacity 900ms ease, transform 5200ms ease;
}

.gcl-menu-bg-slider img.is-active,
.gcl-menu-bg-slider img:only-child {
  opacity: 1;
  transform: scale(1.14);
}

.gcl-overflow-panel.is-closing .gcl-menu-full {
  animation: gclMenuDrawerOut 220ms cubic-bezier(.4, 0, .2, 1) both;
}

.gcl-menu-handle {
  justify-self: center;
  width: 88px;
  height: 24px;
  min-height: 24px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.gcl-menu-handle span {
  width: 88px;
  height: 10px;
  border-radius: 999px;
  background: #fff;
}

.gcl-root .gcl-overflow-panel .gcl-menu-primary {
  position: relative;
  display: block !important;
  min-height: 0;
  width: 100%;
  padding: 10px 42px 0;
  overflow-x: hidden;
  overflow-y: auto;
  cursor: default;
  overscroll-behavior: contain;
  scrollbar-width: none;
  mask-image: linear-gradient(180deg, transparent 0, #000 6%, #000 78%, transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 6%, #000 78%, transparent 100%);
}

.gcl-menu-primary::-webkit-scrollbar {
  display: none;
}

.gcl-menu-loop-track {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 10px 0 54px;
}

.gcl-overflow-panel .gcl-menu-primary a,
.gcl-overflow-panel .gcl-menu-primary .gcl-mobile-main-link {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: auto !important;
  min-height: 0 !important;
  padding: 2px 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: rgba(255, 255, 255, .96);
  font-family: "Segoe UI", Arial, sans-serif !important;
  font-size: 35px;
  font-weight: 400;
  line-height: 1.15;
  text-align: center;
  text-transform: none !important;
  text-decoration: none;
  text-shadow: none;
  outline: 0 !important;
}

.gcl-overflow-panel .gcl-menu-primary a.is-current {
  color: #fff;
  opacity: 1;
}

.gcl-overflow-panel .gcl-menu-primary a:hover,
.gcl-overflow-panel .gcl-menu-primary a:focus-visible {
  color: #fff;
  background: transparent !important;
  filter: none;
  transform: scale(1.025);
}

.gcl-menu-scroll-cue {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  margin-top: -28px;
  color: rgba(255, 255, 255, .88);
  font: 400 26px/1 Arial, sans-serif;
  background: linear-gradient(180deg, transparent, rgba(3, 4, 8, .98));
  pointer-events: none;
}

.gcl-menu-footer {
  position: relative;
  z-index: 3;
  min-height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 20px 14px;
  border: 0;
  background: transparent;
}

.gcl-menu-footer [hidden] {
  display: none !important;
}

.gcl-menu-signin,
.gcl-menu-logout {
  display: grid;
  justify-items: center;
  gap: 2px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #fff;
  font-family: "Segoe UI", Arial, sans-serif;
  font-size: 20px;
  font-weight: 400;
  cursor: pointer;
}

.gcl-menu-logout strong { font-size: 20px; font-weight: 400; }
.gcl-menu-logout small { font-size: 9px; font-weight: 400; }

.gcl-menu-profile {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #fff;
  font-family: "Segoe UI", Arial, sans-serif;
  text-decoration: none;
  width: auto !important;
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.gcl-menu-user-avatar {
  width: 50px;
  height: 50px;
  flex: 0 0 50px;
  overflow: hidden;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, .45);
}

.gcl-menu-user-avatar img { width: 100%; height: 100%; object-fit: cover; }
.gcl-menu-profile strong,
.gcl-menu-profile small { display: block; }
.gcl-menu-profile strong { font-size: 18px; font-weight: 400; line-height: 1.05; }
.gcl-menu-profile small { margin-top: 2px; font-size: 9px; font-weight: 400; }

@media (max-width: 520px) {
  .gcl-menu-full { width: calc(100% - 16px); height: min(66dvh, 560px); }
  .gcl-root .gcl-overflow-panel .gcl-menu-primary { padding-inline: 24px; }
  .gcl-overflow-panel .gcl-menu-primary a,
  .gcl-overflow-panel .gcl-menu-primary .gcl-mobile-main-link { font-size: 33px; line-height: 1.16; }
}

@keyframes gclMenuBackdropIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes gclMenuBackdropOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

@keyframes gclMenuDrawerIn {
  from {
    transform: translate(-50%, 100%);
  }
  to {
    transform: translate(-50%, 0);
  }
}

@keyframes gclMenuDrawerOut {
  from {
    transform: translate(-50%, 0);
  }
  to {
    transform: translate(-50%, 100%);
  }
}

.gcl-vps-page {
  position: relative;
  z-index: 2;
  min-height: calc(100vh - 92px);
  padding-top: var(--gcl-header-height);
}

.gcl-site-footer,
.gcl-modal,
.gcl-toast-stack {
  position: relative;
  z-index: 2;
}

.gcl-site-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background:
    radial-gradient(circle at 78% 8%, rgba(255, 211, 36, 0.18), transparent 24%),
    radial-gradient(circle at 14% 16%, rgba(57, 226, 255, 0.18), transparent 30%),
    linear-gradient(135deg, #041726 0%, #08263d 42%, #03101d 100%);
}

.gcl-root > :not(.gcl-site-bg) {
  position: relative;
  z-index: 2;
}

.gcl-root > .gcl-site-header {
  z-index: 80 !important;
}

.gcl-root .gcl-vps-page,
.gcl-root .gcl-section,
.gcl-root .gcl-modern-landing,
.gcl-root .gcl-landing,
.gcl-root .gcl-games-page,
.gcl-root .gcl-dashboard-page,
.gcl-root .gcl-dashboard-section,
.gcl-root .gcl-community-section,
.gcl-root .gcl-shell,
.gcl-root .gcl-app-window {
  background: transparent !important;
  background-image: none !important;
  box-shadow: none;
}

.gcl-root .gcl-site-footer {
  background: rgba(3, 14, 25, 0.72) !important;
  background-image: none !important;
}

.gcl-root .gcl-landing-hero,
.gcl-root .gcl-reserve-band,
.gcl-root .gcl-game-toolbar,
.gcl-root .gcl-profile-setup,
.gcl-root .gcl-admin-layout,
.gcl-root .gcl-community-copy,
.gcl-root .gcl-community-form,
.gcl-root .gcl-community-card,
.gcl-root .gcl-profile-preview,
.gcl-root .gcl-community-empty {
  background: rgba(4, 22, 38, 0.76) !important;
  background-image: none !important;
  backdrop-filter: blur(10px);
}

.gcl-root .gcl-icon-rail,
.gcl-root .gcl-side-nav,
.gcl-root .gcl-right-panel,
.gcl-root .gcl-dashboard-main,
.gcl-root .gcl-dashboard-menu,
.gcl-root .gcl-dashboard-shell {
  background: rgba(4, 18, 31, 0.56) !important;
  background-image: none !important;
  backdrop-filter: blur(8px);
}

.gcl-root .gcl-dashboard-shell,
.gcl-root .gcl-dashboard-menu,
.gcl-root .gcl-dashboard-main {
  background: transparent !important;
  backdrop-filter: none;
}

.gcl-site-bg-slider {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  opacity: 0.4;
  background: #061b2d;
  mask-image: linear-gradient(0deg, transparent 0%, rgba(0, 0, 0, 0.42) 22%, #000 54%, #000 100%);
  -webkit-mask-image: linear-gradient(0deg, transparent 0%, rgba(0, 0, 0, 0.42) 22%, #000 54%, #000 100%);
}

.gcl-site-bg-slider::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: var(--gcl-fallback-image);
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  opacity: 1;
  filter: saturate(1.08) contrast(1.08);
  transform: scale(1.03);
}

.gcl-site-bg-slider img {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  opacity: 0;
  filter: saturate(1.06) contrast(1.06);
  transform-origin: center center;
  transform: scale(1.035);
  transition: opacity 820ms ease, transform 1100ms ease, filter 1100ms ease;
}

.gcl-site-bg-slider img.is-active,
.gcl-site-bg-slider img:only-child {
  opacity: 1;
  transform: scale(1.08);
}

.gcl-site-bg-slider.is-ready::before {
  opacity: 0.72;
}

.gcl-site-bg.is-game-hovering .gcl-site-bg-slider {
  opacity: 0.62;
}

.gcl-site-bg.is-game-hovering .gcl-site-bg-slider img {
  filter: blur(34px) saturate(1.2) contrast(1.08) brightness(0.82);
  transform: scale(1.12);
}

.gcl-site-bg-gradient,
.gcl-site-bg-mesh {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.gcl-site-bg-gradient {
  z-index: 1;
  background:
    linear-gradient(0deg, #061b2d 0%, rgba(6, 27, 45, 0.9) 22%, rgba(6, 27, 45, 0.5) 58%, rgba(6, 27, 45, 0.25) 100%),
    linear-gradient(90deg, rgba(4, 18, 31, 0.78) 0%, rgba(4, 18, 31, 0.15) 50%, rgba(4, 18, 31, 0.78) 100%);
}

.gcl-site-bg-mesh {
  z-index: 2;
  overflow: hidden;
  background:
    linear-gradient(rgba(89, 226, 255, 0.16) 1px, transparent 1px),
    linear-gradient(90deg, rgba(89, 226, 255, 0.16) 1px, transparent 1px);
  background-size: 92px 92px;
  opacity: 0.72;
  transition: opacity 220ms ease, filter 220ms ease;
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.62) 42%, rgba(0, 0, 0, 0.22) 76%, transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.62) 42%, rgba(0, 0, 0, 0.22) 76%, transparent 100%);
}

.gcl-root .gcl-vps-page,
.gcl-root .gcl-site-header,
.gcl-root .gcl-site-footer,
.gcl-root .gcl-modal,
.gcl-root .gcl-toast-stack {
  font-family: inherit;
}

.gcl-root .gcl-vps-page .gcl-grid:has(.gcl-card:hover) .gcl-card:not(:hover) {
  filter: none;
  opacity: 1;
}

.gcl-root .gcl-vps-page .gcl-card,
.gcl-root .gcl-vps-page .gcl-panel,
.gcl-root .gcl-vps-page .gcl-empty {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid rgba(89, 173, 228, 0.24);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(13, 50, 77, 0.88), rgba(5, 24, 42, 0.94));
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.24);
  color: #f8fbff;
  text-decoration: none;
  transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

.gcl-root .gcl-vps-page .gcl-card:hover {
  z-index: 1;
  transform: translateY(-2px);
  border-color: rgba(255, 211, 36, 0.36);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.28), 0 0 20px rgba(255, 211, 36, 0.08);
}

.gcl-root .gcl-vps-page .gcl-card h3,
.gcl-root .gcl-vps-page .gcl-panel h3,
.gcl-root .gcl-vps-page .gcl-empty h2 {
  color: #fff;
  letter-spacing: 0;
}

.gcl-root .gcl-vps-page .gcl-card p,
.gcl-root .gcl-vps-page .gcl-empty p {
  color: #bfd1e2;
}

.gcl-section {
  padding: 56px 0;
}

.gcl-modern-landing {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: calc(100vh - 92px);
}

.gcl-modern-landing > .gcl-home-shell {
  position: relative;
  z-index: 2;
}

.gcl-home-page .gcl-home-intro {
  padding-top: 18px;
}

.gcl-home-page .gcl-home-shell {
  display: grid;
  gap: 8px;
}

.gcl-home-page .gcl-player-progress-teaser,
.gcl-home-page .gcl-live-arena-feed,
.gcl-home-page .gcl-home-rankings,
.gcl-home-page .gcl-home-featured,
.gcl-home-page .gcl-home-games,
.gcl-home-page .gcl-home-packages,
.gcl-home-page .gcl-home-links {
  margin-top: 0 !important;
}

.gcl-home-page .gcl-player-progress-teaser {
  width: min(100% - 24px, var(--gcl-shell, 1180px));
  margin-inline: auto;
}

.gcl-home-simple {
  background: linear-gradient(160deg, rgba(8, 25, 43, 0.96), rgba(5, 13, 27, 0.94));
  border: 1px solid rgba(89, 226, 255, 0.14);
  border-radius: 22px;
  padding: clamp(22px, 4vw, 40px);
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.22);
}

.gcl-home-simple h1 {
  margin: 10px 0 10px;
  font-size: clamp(32px, 4vw, 56px);
  line-height: 1.02;
}

.gcl-home-simple p {
  color: rgba(210, 229, 244, 0.82);
  margin: 0;
  max-width: 62ch;
}

.gcl-home-stats-inline {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-top: 20px;
}

.gcl-home-stats-inline .gcl-stat-card {
  background: rgba(5, 13, 27, 0.62);
  border: 1px solid rgba(89, 226, 255, 0.12);
  box-shadow: none;
  min-height: 84px;
  padding: 18px 18px 16px;
}

.gcl-home-stats-inline .gcl-stat-card span {
  font-size: 12px;
}

.gcl-home-stats-inline .gcl-stat-card strong {
  font-size: 24px;
}

.gcl-home-stats-inline .gcl-stat-card strong[data-gcl-live-number]::after {
  content: "";
}

.gcl-home-link-card {
  display: grid;
  gap: 6px;
  min-height: 110px;
}

.gcl-home-link-card p {
  margin: 0;
  color: rgba(210, 229, 244, 0.78);
}

.gcl-home-games-grid .gcl-game-cover-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}

.gcl-home-games-grid .gcl-game-cover-card {
  min-height: 162px;
}

.gcl-home-packages-grid .gcl-package-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.gcl-home-packages-grid .gcl-package-card {
  min-height: 100%;
}

.gcl-home-page .gcl-home-games,
.gcl-home-page .gcl-home-packages {
  padding-top: 8px;
}

.gcl-home-page .gcl-home-hero {
  position: relative;
}

.gcl-home-page .gcl-home-hero::after {
  content: "";
  position: absolute;
  inset: auto 18px 18px 18px;
  height: 2px;
  background: linear-gradient(90deg, rgba(89, 226, 255, 0), rgba(89, 226, 255, 0.65), rgba(89, 226, 255, 0));
  pointer-events: none;
}

.gcl-home-page .gcl-section-heading h2 {
  font-size: clamp(28px, 3vw, 52px);
}

.gcl-landing-hero {
  position: relative;
  z-index: 2;
  isolation: isolate;
  overflow: hidden;
  min-height: 620px;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(240px, 0.45fr);
  gap: 34px;
  align-items: center;
  padding: clamp(22px, 4vw, 58px);
  border: 1px solid rgba(89, 173, 228, 0.24);
  border-radius: 8px;
  background: rgba(2, 18, 31, 0.82);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.03), 0 28px 80px rgba(0, 0, 0, 0.28);
}

.gcl-hero-bg-slider {
  position: absolute;
  inset: 0;
  z-index: -2;
  overflow: hidden;
  opacity: 0.62;
  background: #061b2d;
}

.gcl-hero-bg-slider::before,
.gcl-hero-bg-slider::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.gcl-hero-bg-slider::before {
  z-index: 0;
  background-image: var(--gcl-fallback-image);
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  opacity: 1;
  filter: saturate(1.08) contrast(1.08);
  transform: scale(1.03);
}

.gcl-hero-bg-slider::after {
  z-index: 2;
  background:
    linear-gradient(90deg, rgba(2, 18, 31, 0.94) 0%, rgba(2, 18, 31, 0.72) 42%, rgba(2, 18, 31, 0.38) 78%, rgba(2, 18, 31, 0.22) 100%),
    linear-gradient(0deg, rgba(2, 18, 31, 0.82), rgba(2, 18, 31, 0.2) 58%, rgba(2, 18, 31, 0.68));
}

.gcl-hero-bg-slider img {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  opacity: 0;
  filter: saturate(1.08) contrast(1.08);
  transform-origin: center center;
  transform: scale(1.02);
  transition: opacity 900ms ease, transform 5200ms ease;
}

.gcl-hero-bg-slider img.is-active,
.gcl-hero-bg-slider img:only-child {
  opacity: 1;
  transform: scale(1.055);
}

.gcl-landing-copy h1 {
  max-width: 690px;
  margin: 0;
  color: #fff;
  font-size: clamp(48px, 6vw, 98px);
  line-height: 0.92;
  letter-spacing: 0;
  text-transform: uppercase;
}

.gcl-hero-copy-rotator {
  display: grid;
}

.gcl-hero-copy-slide {
  grid-area: 1 / 1;
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity 420ms ease, transform 420ms ease;
}

.gcl-hero-copy-slide.is-active {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.gcl-landing-copy p {
  max-width: 680px;
  font-size: 18px;
  line-height: 1.55;
  color: #bfd1e2;
}

.gcl-action-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
}

.gcl-landing-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 22px;
}

.gcl-landing-stats span {
  min-height: 78px;
  padding: 14px;
  border: 1px solid rgba(89, 173, 228, 0.24);
  border-radius: 8px;
  background: rgba(4, 22, 38, 0.72);
}

.gcl-landing-stats strong,
.gcl-landing-stats small {
  display: block;
}

.gcl-landing-stats strong {
  font-size: 30px;
  color: #fff;
}

.gcl-landing-stats small {
  color: #ffd324;
  font-weight: 900;
}

.gcl-button,
.gcl-link {
  border: 1px solid rgba(89, 173, 228, 0.35);
  background: rgba(14, 47, 75, 0.86);
  color: #fff;
  border-radius: 8px;
  padding: 13px 20px;
  font-weight: 900;
  text-decoration: none;
  cursor: pointer;
}

.gcl-button-primary {
  background: #ffd324;
  color: #061624;
  box-shadow: 0 12px 36px rgba(255, 211, 36, 0.22);
}

.gcl-creator-card {
  text-decoration: none;
}

.gcl-video-card img,
.gcl-creator-card img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid rgba(89, 173, 228, 0.35);
}

.gcl-youtube-grid {
  display: grid;
  gap: 26px 18px;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}

.gcl-youtube-card {
  color: #fff;
  display: block;
  text-decoration: none;
}

.gcl-video-card {
  min-width: 0;
}

.gcl-youtube-thumb {
  background: rgba(2, 14, 24, 0.9);
  border-radius: 8px;
  display: block;
  overflow: hidden;
  position: relative;
}

.gcl-youtube-thumb img,
.gcl-youtube-thumb video,
.gcl-youtube-thumb .gcl-video-thumb {
  aspect-ratio: 16 / 9;
  display: block;
  height: auto;
  object-fit: cover;
  width: 100%;
}

.gcl-youtube-thumb video {
  inset: 0;
  opacity: 0;
  position: absolute;
  transition: opacity 180ms ease;
}

.gcl-youtube-card:hover .gcl-youtube-thumb video {
  opacity: 1;
}

.gcl-youtube-thumb b {
  align-items: center;
  background: rgba(0, 0, 0, 0.62);
  border-radius: 50%;
  display: flex;
  height: 46px;
  justify-content: center;
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 46px;
}

.gcl-youtube-title {
  display: block;
  font-size: 17px;
  font-weight: 900;
  line-height: 1.12;
  margin-top: 10px;
}

.gcl-youtube-card small,
.gcl-creator-count {
  color: var(--gcl-muted);
  display: block;
  font-weight: 800;
  margin-top: 6px;
}

.gcl-player-board-section .gcl-section-title {
  max-width: 920px;
}

.gcl-player-board-list {
  display: grid;
  gap: 0;
  margin-top: 28px;
  max-width: 980px;
}

.gcl-player-board-tools {
  align-items: end;
  display: flex;
  gap: 16px;
  justify-content: space-between;
  margin-top: 24px;
  max-width: 980px;
}

.gcl-player-board-tools label {
  display: grid;
  gap: 7px;
  max-width: 520px;
  width: min(100%, 520px);
}

.gcl-player-board-tools span,
.gcl-player-board-tools small {
  color: rgba(211, 229, 245, .66);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.gcl-player-board-tools input {
  background: rgba(1, 18, 31, .92);
  border: 1px solid rgba(89, 226, 255, .26);
  border-radius: 8px;
  color: #eff7ff;
  min-height: 48px;
  padding: 0 14px;
}

.gcl-player-board-row {
  align-items: center;
  border-bottom: 1px solid rgba(89, 226, 255, .17);
  color: #eff7ff;
  display: grid;
  gap: 18px;
  grid-template-columns: 70px minmax(0, 1fr) 110px 100px auto;
  min-height: 96px;
  padding: 14px 0;
  text-decoration: none;
  transition: background .18s ease, border-color .18s ease, padding .18s ease, transform .18s ease;
}

.gcl-player-board-row:hover,
.gcl-player-board-row:focus {
  background: linear-gradient(90deg, rgba(89, 226, 255, .09), transparent);
  border-color: rgba(255, 213, 34, .45);
  outline: none;
  padding-left: 12px;
  transform: translateX(4px);
}

.gcl-player-board-avatar {
  background: radial-gradient(circle at 28% 18%, #ffffff, #83f1ed 42%, #d9ed5e);
  border: 2px solid rgba(255,255,255,.72);
  border-radius: 50%;
  box-shadow: 0 12px 30px rgba(0,0,0,.24);
  color: #061827;
  display: grid;
  font-size: 19px;
  font-weight: 1000;
  height: 58px;
  overflow: hidden;
  place-items: center;
  width: 58px;
}

.gcl-player-board-avatar img {
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.gcl-player-board-avatar.is-photo {
  background: #061827;
  border-color: rgba(89,226,255,.58);
}

.gcl-player-board-main {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.gcl-player-board-main strong {
  color: #fff;
  font-size: clamp(20px, 1.8vw, 26px);
  line-height: 1.05;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gcl-player-board-main small,
.gcl-player-board-stat small {
  color: rgba(211, 229, 245, .66);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.gcl-player-board-stat {
  display: grid;
  gap: 4px;
}

.gcl-player-board-stat b {
  color: #ffd522;
  font-size: 22px;
}

.gcl-player-board-open {
  border: 1px solid rgba(89, 226, 255, .28);
  border-radius: 999px;
  color: #72edff;
  font-size: 12px;
  font-weight: 1000;
  padding: 10px 13px;
  text-align: center;
  text-transform: uppercase;
}

@media (max-width: 760px) {
  .gcl-player-board-tools {
    align-items: stretch;
    flex-direction: column;
  }

  .gcl-player-board-row {
    grid-template-columns: 58px minmax(0, 1fr);
  }

  .gcl-player-board-stat,
  .gcl-player-board-open {
    grid-column: 2;
  }
}

.gcl-video-card-meta {
  align-items: flex-start;
  display: grid;
  gap: 10px;
  grid-template-columns: 42px minmax(0, 1fr);
  margin-top: 12px;
}

.gcl-video-creator-avatar {
  align-items: center;
  background: rgba(5, 26, 43, 0.94);
  border: 1px solid rgba(89, 173, 228, 0.42);
  border-radius: 50%;
  color: #ffd324;
  display: inline-flex;
  font-family: "Orbitron", sans-serif;
  font-size: 13px;
  font-weight: 900;
  height: 42px;
  justify-content: center;
  overflow: hidden;
  text-decoration: none;
  width: 42px;
}

.gcl-video-creator-avatar img {
  aspect-ratio: auto;
  border: 0;
  border-radius: 50%;
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.gcl-youtube-title,
.gcl-video-creator-name {
  color: #fff;
  display: block;
  font-family: "Orbitron", sans-serif;
  font-weight: 900;
  line-height: 1.16;
  overflow-wrap: anywhere;
  text-decoration: none;
}

.gcl-video-creator-name {
  color: #b8c7d6;
  font-family: "Rajdhani", sans-serif;
  font-size: 14px;
  margin-top: 5px;
}

.gcl-public-profile-hero,
.gcl-public-profile-card {
  background: rgba(4, 23, 38, 0.84);
  border: 1px solid rgba(89, 173, 228, 0.25);
  border-radius: 8px;
  overflow: hidden;
}

.gcl-public-profile-page {
  padding-top: 0;
}

.gcl-public-profile-page > .gcl-shell {
  padding-top: 0;
}

.gcl-public-profile-hero {
  margin: 0 0 22px;
  position: relative;
}

.gcl-public-profile-layout {
  align-items: start;
  display: grid;
  gap: 22px;
  grid-template-columns: minmax(280px, 360px) minmax(0, 1fr);
}

.gcl-public-profile-sidebar {
  display: grid;
  gap: 14px;
  position: sticky;
  top: 92px;
}

.gcl-public-profile-banner {
  background: linear-gradient(135deg, rgba(89, 173, 228, 0.22), rgba(255, 211, 36, 0.12));
  background-position: center;
  background-size: cover;
  height: clamp(210px, 28vw, 340px);
  min-height: 210px;
}

.gcl-public-profile-main {
  align-items: flex-start;
  display: grid;
  gap: 18px;
  grid-template-columns: 86px minmax(0, 1fr);
  bottom: 0;
  left: 0;
  padding: 28px;
  position: absolute;
  right: 0;
  z-index: 2;
}

.gcl-public-profile-hero::after {
  background: linear-gradient(90deg, rgba(2, 13, 24, 0.9), rgba(2, 13, 24, 0.38) 58%, rgba(2, 13, 24, 0.12));
  content: "";
  inset: 0;
  pointer-events: none;
  position: absolute;
  z-index: 1;
}

.gcl-public-profile-main h1 {
  font-size: clamp(22px, 2.2vw, 26px);
  line-height: 1.08;
  overflow-wrap: anywhere;
  max-width: min(620px, 56vw);
}

.gcl-public-avatar {
  border: 2px solid rgba(255, 211, 36, 0.85);
  border-radius: 50%;
  height: 86px;
  object-fit: cover;
  width: 86px;
}

.gcl-public-profile-stats,
.gcl-public-profile-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  padding: 0;
}

.gcl-public-profile-stats {
  bottom: 24px;
  max-width: 420px;
  position: absolute;
  right: 24px;
  width: min(36vw, 420px);
  z-index: 3;
}

.gcl-public-profile-stats strong {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  padding: 14px;
}

.gcl-public-profile-stats small {
  color: var(--gcl-muted);
  display: block;
}

.gcl-public-profile-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 18px;
  padding: 0;
}

.gcl-public-profile-card {
  padding: 18px;
}

.gcl-public-profile-videos {
  min-width: 0;
}

.gcl-public-game-list {
  display: grid;
  gap: 10px;
}

.gcl-dashboard-game-history,.gcl-game-player-area{margin-bottom:18px;padding:18px;border:1px solid rgba(67,143,194,.22);background:#071321}.gcl-dashboard-game-history-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:9px}.gcl-dashboard-game-history-grid article,.gcl-game-player-list article{display:flex;align-items:center;gap:11px;min-width:0;padding:11px;border:1px solid rgba(78,157,210,.16);background:#091a2b}.gcl-dashboard-game-history-grid article>span,.gcl-game-player-list article>b{display:grid;place-items:center;flex:0 0 38px;height:38px;background:#12324a;color:#43dcff;font-size:.75rem}.gcl-dashboard-game-history-grid article div,.gcl-game-player-list article span{display:grid;min-width:0;gap:3px}.gcl-dashboard-game-history-grid strong,.gcl-game-player-list strong{overflow:hidden;color:#eef8ff;text-overflow:ellipsis;white-space:nowrap}.gcl-dashboard-game-history-grid small,.gcl-game-player-list small{color:#8298ac;font-size:.75rem}.gcl-game-player-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:9px}
@media(max-width:640px){.gcl-dashboard-game-history-grid,.gcl-game-player-list{grid-template-columns:1fr}.gcl-dashboard-game-history{padding:13px}}

.gcl-public-game-card {
  align-items: center;
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(89, 173, 228, 0.22);
  border-radius: 8px;
  display: grid;
  gap: 10px;
  grid-template-columns: 54px minmax(0, 1fr);
  min-height: 66px;
  padding: 8px;
}

.gcl-public-game-card img,
.gcl-public-game-card span {
  align-items: center;
  aspect-ratio: 1;
  background: rgba(2, 14, 24, 0.92);
  border-radius: 6px;
  color: #ffd324;
  display: flex;
  font-weight: 900;
  justify-content: center;
  object-fit: cover;
  width: 54px;
}

.gcl-public-game-card strong {
  overflow-wrap: anywhere;
}

.gcl-public-game-card small {
  color: rgba(198, 220, 239, 0.76);
  display: block;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.35;
  margin-top: 3px;
}

.gcl-public-social-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.gcl-public-social-links a {
  background: rgba(14, 47, 75, 0.86);
  border: 1px solid rgba(89, 173, 228, 0.28);
  border-radius: 999px;
  color: #fff;
  font-weight: 900;
  padding: 8px 12px;
  text-decoration: none;
}

.gcl-public-muted {
  color: var(--gcl-muted);
  margin: 0;
}

@keyframes gclHeroKenBurns {
  0%,
  8% {
    opacity: 0;
    transform: scale(1) translate3d(0, 0, 0);
  }
  14%,
  36% {
    opacity: 1;
    transform: scale(1.025) translate3d(0, -0.25%, 0);
  }
  44%,
  100% {
    opacity: 0;
    transform: scale(1.04) translate3d(0, 0.25%, 0);
  }
}

@keyframes gclHeroKenBurnsSingle {
  0%,
  100% {
    opacity: 1;
    transform: scale(1.015) translate3d(0, 0.35%, 0);
  }
  50% {
    opacity: 1;
    transform: scale(1.04) translate3d(0, -0.35%, 0);
  }
}

.gcl-hero-terminal figcaption {
  position: absolute;
  right: -14px;
  bottom: -18px;
  min-width: 190px;
  padding: 16px;
  border: 1px solid rgba(255, 211, 36, 0.42);
  border-radius: 8px;
  background: rgba(3, 18, 31, 0.92);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.32);
}

.gcl-hero-terminal figcaption b,
.gcl-hero-terminal figcaption span {
  display: block;
}

.gcl-hero-terminal figcaption b {
  color: #ffd324;
  font-size: 24px;
}

.gcl-landing-live,
.gcl-card,
.gcl-empty,
.gcl-alert {
  border: 1px solid rgba(89, 173, 228, 0.25);
  background: rgba(9, 38, 63, 0.82);
  border-radius: 8px;
}

.gcl-landing-live {
  padding: 22px;
}

.gcl-landing-live span,
.gcl-kicker {
  color: #59e2ff;
  text-transform: uppercase;
  font-weight: 900;
  letter-spacing: 0.08em;
  font-size: 12px;
}

.gcl-landing-live div {
  padding: 14px 0;
  border-top: 1px solid rgba(148, 190, 221, 0.2);
}

.gcl-landing-live strong,
.gcl-landing-live small {
  display: block;
}

.gcl-landing-strip {
  margin-top: 46px;
  max-width: 100%;
  min-width: 0;
  overflow-x: clip;
}

.gcl-home-rank-banner {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, .9fr);
  gap: 18px;
  align-items: center;
  margin-top: 30px;
  padding: 22px;
  border: 1px solid rgba(89, 173, 228, .26);
  border-radius: 8px;
  background:
    linear-gradient(110deg, rgba(4, 14, 31, .94), rgba(5, 44, 70, .78), rgba(24, 11, 48, .88)),
    var(--gcl-fallback-image) center / cover no-repeat;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .03), 0 18px 56px rgba(0, 0, 0, .28);
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: border-color 180ms ease, transform 180ms ease, box-shadow 180ms ease;
}

.gcl-home-rank-banner:hover {
  border-color: rgba(89, 226, 255, .42);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .04), 0 20px 60px rgba(0, 0, 0, .34), 0 0 22px rgba(89, 226, 255, .12);
  transform: translateY(-2px);
}

.gcl-home-rank-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(255, 211, 36, .12), transparent 34%),
    linear-gradient(rgba(94, 226, 255, .08) 1px, transparent 1px);
  background-size: 100% 100%, 100% 9px;
  opacity: .58;
}

.gcl-home-rank-banner-copy,
.gcl-home-rank-banner-console {
  position: relative;
  z-index: 1;
}

.gcl-home-rank-banner-copy h2 {
  margin: 10px 0 6px;
  color: #fff;
  font-family: "Orbitron", "Exo 2", "Segoe UI", Arial, sans-serif;
  font-size: clamp(30px, 4vw, 58px);
  line-height: .96;
  letter-spacing: 0;
  text-transform: uppercase;
}

.gcl-home-rank-banner-copy p {
  max-width: 560px;
  margin: 0;
  color: #c1d5e7;
  font-size: 15px;
  line-height: 1.45;
}

.gcl-home-rank-banner-console {
  display: grid;
  gap: 10px;
}

.gcl-home-rank-banner-console article,
.gcl-home-rank-banner-stats span {
  display: flex;
  min-height: 54px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 8px;
  background: rgba(5, 10, 24, .72);
}

.gcl-home-rank-banner-console article span,
.gcl-home-rank-banner-stats small {
  color: #92a7bd;
  font-size: 10px;
  font-weight: 1000;
  text-transform: uppercase;
}

.gcl-home-rank-banner-console article strong,
.gcl-home-rank-banner-stats b {
  color: #fff;
  font-size: 16px;
}

.gcl-home-rank-banner-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.gcl-home-rank-banner-stats span {
  display: block;
}

.gcl-home-rank-banner-stats b {
  display: block;
  color: #ffd320;
  font-size: 24px;
  line-height: 1;
}

.gcl-section-heading {
  margin-bottom: 24px;
}

.gcl-section-heading h1,
.gcl-section-heading h2 {
  margin: 10px 0;
  font-size: clamp(26px, 2.6vw, 40px);
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0;
}

.gcl-section-heading p {
  color: #bfd1e2;
  font-size: 16px;
}

.gcl-heading-actions {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 20px;
}

.gcl-grid {
  display: grid;
  gap: 18px;
}

.gcl-grid-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.gcl-package-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.gcl-home-packages-grid .gcl-package-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.gcl-grid-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.gcl-card {
  padding: 22px;
  color: #fff;
}

.gcl-reserve-band,
.gcl-game-toolbar,
.gcl-admin-layout,
.gcl-profile-setup {
  margin-top: 28px;
}

.gcl-reserve-band {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 22px;
  align-items: center;
  padding: 24px;
  border: 1px solid rgba(89, 173, 228, 0.28);
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(10, 58, 92, 0.86), rgba(9, 38, 63, 0.84));
}

.gcl-reserve-modal {
  position: fixed;
  inset: 0;
  z-index: 2147482500;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0;
  background: rgba(1, 9, 18, .72);
  backdrop-filter: blur(12px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .28s ease;
}

/* Keep the reservation UI in the viewport; the global root-child rule must not
   turn this fixed drawer into normal page content below the footer. */
.gcl-root > .gcl-reserve-modal {
  position: fixed !important;
  inset: 0 !important;
  z-index: 2147482500 !important;
}

.gcl-reserve-modal[hidden] {
  display: none;
}

.gcl-reserve-modal.is-open {
  opacity: 1;
  pointer-events: auto;
}

.gcl-reserve-modal-card {
  position: relative;
  width: min(1280px, calc(100% - 32px));
  max-height: min(88dvh, 760px);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 1px solid rgba(94, 226, 255, .28);
  border-bottom: 0;
  border-radius: 18px 18px 0 0;
  background: linear-gradient(145deg, rgba(2, 18, 33, .98), rgba(4, 32, 52, .96));
  box-shadow: 0 -28px 90px rgba(0, 0, 0, .58);
  transform: translateY(105%);
  transition: transform .34s cubic-bezier(.22, 1, .36, 1);
  will-change: transform;
}

.gcl-reserve-modal-card::before {
  content: "";
  display: block;
  position: sticky;
  top: 9px;
  z-index: 3;
  width: 52px;
  height: 4px;
  margin: 9px auto 0;
  border-radius: 999px;
  background: rgba(218, 239, 250, .42);
}

.gcl-reserve-modal.is-open .gcl-reserve-modal-card {
  transform: translateY(0);
}

.gcl-reserve-band.is-modal {
  margin-top: 0;
  border: 0;
  box-shadow: none;
  background: transparent;
  padding: 24px clamp(18px, 3vw, 38px) max(24px, env(safe-area-inset-bottom));
}

.gcl-reserve-modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(94, 226, 255, .24);
  border-radius: 10px;
  background: rgba(1, 12, 24, .76);
  color: #eaf8ff;
  cursor: pointer;
  font-size: 24px;
  font-weight: 900;
}

html.gcl-reserve-modal-open,
html.gcl-reserve-modal-open body {
  overflow: hidden;
}

.gcl-reserve-form {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1.1fr 1fr 0.85fr 0.75fr 0.8fr auto;
  gap: 10px;
}

.gcl-reserve-form.is-highlighted {
  animation: gclReserveHighlight 1.4s ease;
}

@keyframes gclReserveHighlight {
  0%,
  100% {
    filter: none;
  }
  35% {
    filter: drop-shadow(0 0 18px rgba(89, 226, 255, 0.36));
  }
}

@keyframes gclSmartTipIn {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes gclSmartTipOut {
  from {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  to {
    opacity: 0;
    transform: translateY(6px) scale(0.98);
  }
}

@keyframes gclSmartTipSweep {
  from {
    background-position: -120% 0, 0 0;
  }
  to {
    background-position: 120% 0, 0 7px;
  }
}

@keyframes gclButtonSweep {
  to {
    transform: translateX(130%);
  }
}

@keyframes gclBranchModalIn {
  from {
    opacity: 0;
    transform: translateY(18px) scale(0.985);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes gclRouteDash {
  to {
    stroke-dashoffset: -18;
  }
}

@keyframes gclMapPing {
  from {
    opacity: 0.9;
    transform: translate(-50%, -50%) scale(0.72);
  }
  to {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.7);
  }
}

@keyframes gclMapLocateSpin {
  to {
    transform: rotate(360deg);
  }
}

.gcl-reserve-band h2 {
  margin: 8px 0;
  font-size: clamp(28px, 3vw, 46px);
  text-transform: uppercase;
}

.gcl-reserve-band p {
  max-width: 720px;
  margin: 0;
  color: #bfd1e2;
}

.gcl-reserve-metrics {
  display: flex;
  gap: 10px;
}

.gcl-reserve-metrics span,
.gcl-stat-card {
  display: grid;
  gap: 4px;
  min-width: 130px;
  padding: 14px;
  border: 1px solid rgba(255, 211, 36, 0.2);
  border-radius: 8px;
  background: rgba(2, 18, 31, 0.55);
}

.gcl-reserve-metrics strong,
.gcl-stat-card strong {
  font-size: 30px;
  color: #ffd324;
}

.gcl-reserve-metrics small,
.gcl-stat-card span {
  color: #9ec3df;
  font-weight: 900;
}

.gcl-game-toolbar {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) minmax(180px, 240px) minmax(160px, 220px);
  gap: 14px;
  padding: 16px;
  border: 1px solid rgba(89, 173, 228, 0.24);
  border-radius: 8px;
  background: rgba(4, 22, 38, 0.72);
}

.gcl-game-toolbar label {
  display: grid;
  gap: 8px;
  color: #9ec3df;
  font-weight: 900;
}

.gcl-game-cover-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 14px;
  align-items: start;
}

.gcl-root img,
.gcl-root a,
.gcl-root button {
  -webkit-user-drag: none;
}

.gcl-root,
.gcl-root .gcl-vps-page,
.gcl-root .gcl-shell {
  max-width: 100%;
  min-width: 0;
  overflow-x: clip;
}

.gcl-home-carousel {
  position: relative;
  margin-top: 4px;
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  contain: layout paint;
}

.gcl-package-carousel {
  --gcl-carousel-visible: 4;
  --gcl-carousel-gap: 12px;
  --gcl-carousel-card-width: calc((100vw - 28px - (var(--gcl-carousel-gap) * (var(--gcl-carousel-visible) - 1))) / var(--gcl-carousel-visible));
}

.gcl-game-carousel {
  --gcl-carousel-visible: 8;
  --gcl-carousel-gap: 12px;
  --gcl-carousel-card-width: calc((100vw - 28px - (var(--gcl-carousel-gap) * (var(--gcl-carousel-visible) - 1))) / var(--gcl-carousel-visible));
}

.gcl-home-carousel,
.gcl-home-carousel * {
  -webkit-user-drag: none;
  user-select: none;
}

.gcl-home-carousel-viewport {
  overflow: hidden;
  cursor: grab;
  display: block;
  min-width: 0;
  max-width: 100%;
  margin-inline: auto;
  touch-action: pan-y;
  user-select: none;
}

.gcl-home-carousel:not(.is-ready) .gcl-home-carousel-track {
  opacity: 0;
}

.gcl-home-carousel:not(.is-ready) .gcl-home-carousel-viewport {
  position: relative;
  --gcl-skeleton-card-height: calc(var(--gcl-carousel-card-width, 150px) * 1.25);
  min-height: var(--gcl-skeleton-card-height);
}

.gcl-package-carousel:not(.is-ready) .gcl-home-carousel-viewport {
  --gcl-skeleton-card-height: 326px;
  min-height: var(--gcl-skeleton-card-height);
}

.gcl-game-carousel:not(.is-ready) .gcl-home-carousel-viewport {
  --gcl-game-skeleton-card: calc((100% - 72px) / 7);
  --gcl-skeleton-card-height: max(150px, calc(var(--gcl-game-skeleton-card) * 1.25));
}

.gcl-home-carousel:not(.is-ready) .gcl-home-carousel-viewport::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  height: var(--gcl-skeleton-card-height);
  border-radius: 8px;
  background:
    linear-gradient(90deg, transparent, rgba(94, 226, 255, .13), transparent) 0 0 / 180px 100% no-repeat,
    repeating-linear-gradient(90deg,
      rgba(3, 22, 38, .42) 0,
      rgba(3, 22, 38, .42) var(--gcl-carousel-card-width, 150px),
      transparent var(--gcl-carousel-card-width, 150px),
      transparent calc(var(--gcl-carousel-card-width, 150px) + var(--gcl-carousel-gap, 12px)));
  animation: gclCarouselShimmer 1.1s linear infinite;
}

.gcl-package-carousel:not(.is-ready) .gcl-home-carousel-viewport::before {
  background:
    linear-gradient(90deg, transparent, rgba(94, 226, 255, .13), transparent) 0 0 / 180px 100% no-repeat,
    repeating-linear-gradient(90deg,
      rgba(3, 22, 38, .46) 0,
      rgba(3, 22, 38, .46) var(--gcl-carousel-card-width, 232px),
      transparent var(--gcl-carousel-card-width, 232px),
      transparent calc(var(--gcl-carousel-card-width, 232px) + var(--gcl-carousel-gap, 12px)));
}

.gcl-game-carousel:not(.is-ready) .gcl-home-carousel-viewport::before {
  background:
    linear-gradient(90deg, transparent, rgba(94, 226, 255, .13), transparent) 0 0 / 180px 100% no-repeat,
    repeating-linear-gradient(90deg,
      rgba(3, 22, 38, .46) 0,
      rgba(3, 22, 38, .46) var(--gcl-game-skeleton-card),
      transparent var(--gcl-game-skeleton-card),
      transparent calc(var(--gcl-game-skeleton-card) + 12px));
}

@keyframes gclCarouselShimmer {
  to {
    background-position: 100% 0, 0 0;
  }
}

.gcl-home-carousel.is-dragging .gcl-home-carousel-viewport {
  cursor: grabbing;
}

.gcl-home-carousel-track {
  width: max-content;
  max-width: none;
  min-width: 0;
  will-change: transform;
  backface-visibility: hidden;
  transform: translateZ(0);
}

.gcl-game-carousel-stack {
  display: grid;
  gap: 14px;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
}

.gcl-game-carousel .gcl-game-cover-grid {
  display: flex;
  width: max-content;
  gap: var(--gcl-carousel-gap, 12px);
}

.gcl-game-carousel .gcl-game-cover-card {
  width: var(--gcl-carousel-card-width, clamp(118px, 11vw, 158px));
  flex: 0 0 var(--gcl-carousel-card-width, clamp(118px, 11vw, 158px));
  aspect-ratio: 4 / 5;
}

.gcl-game-carousel .gcl-game-cover-body {
  padding: 34px 9px 9px;
}

.gcl-game-carousel .gcl-game-cover-body h3 {
  font-size: 13px;
}

.gcl-game-carousel .gcl-game-cover-body span,
.gcl-game-carousel .gcl-game-multiplayer-badge {
  font-size: 9px;
}

.gcl-package-carousel .gcl-package-grid {
  display: flex;
  width: max-content;
  gap: var(--gcl-carousel-gap, 12px);
}

.gcl-package-carousel .gcl-package-card {
  width: var(--gcl-carousel-card-width, clamp(198px, 19vw, 260px));
  flex: 0 0 var(--gcl-carousel-card-width, clamp(198px, 19vw, 260px));
  min-height: 0;
}

.gcl-package-carousel .gcl-package-inner {
  min-height: 176px;
}

.gcl-package-carousel .gcl-package-image-top {
  min-height: 56px;
}

.gcl-package-carousel .gcl-package-content {
  grid-template-rows: auto auto 1fr 34px;
  padding: 12px;
}

.gcl-package-carousel .gcl-package-card-top {
  min-height: 38px;
  margin-bottom: 8px;
}

.gcl-package-carousel .gcl-package-icon,
.gcl-package-carousel .gcl-package-image-icon {
  width: 32px;
  height: 32px;
  flex-basis: 32px;
  border-radius: 10px;
}

.gcl-package-carousel .gcl-package-card h3 {
  font-size: 15px;
}

.gcl-package-carousel .gcl-package-desc {
  min-height: 0;
  margin-bottom: 8px;
  font-size: 11px;
  -webkit-line-clamp: 1;
}

.gcl-package-carousel .gcl-package-specs {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  margin-bottom: 8px;
}

.gcl-package-carousel .gcl-package-specs span {
  padding: 7px;
}

.gcl-package-carousel .gcl-package-specs span:nth-child(4) {
  display: none;
}

.gcl-package-carousel .gcl-package-primary {
  height: 32px;
}

@media (max-width: 760px) {
  .gcl-reserve-modal {
    padding: 0;
  }

  .gcl-reserve-modal-card {
    width: 100%;
    max-height: 92dvh;
    border-left: 0;
    border-right: 0;
    border-radius: 16px 16px 0 0;
  }

  .gcl-reserve-band.is-modal {
    padding: 18px 14px max(18px, env(safe-area-inset-bottom));
  }

  .gcl-package-carousel {
    --gcl-carousel-visible: 2;
    --gcl-carousel-gap: 8px;
  }

  .gcl-game-carousel {
    --gcl-carousel-visible: 3;
    --gcl-carousel-gap: 8px;
  }

  .gcl-game-carousel:not(.is-ready) .gcl-home-carousel-viewport {
    --gcl-game-skeleton-card: calc((100% - 16px) / 3);
  }

  .gcl-game-carousel-stack {
    gap: 10px;
  }

  .gcl-game-carousel .gcl-game-cover-card {
    width: var(--gcl-carousel-card-width, 116px);
    flex-basis: var(--gcl-carousel-card-width, 116px);
  }

  .gcl-package-carousel .gcl-package-card {
    width: var(--gcl-carousel-card-width, min(78vw, 250px));
    flex-basis: var(--gcl-carousel-card-width, min(78vw, 250px));
    padding: 0 !important;
  }

  .gcl-game-carousel .gcl-game-cover-grid,
  .gcl-package-carousel .gcl-package-grid {
    gap: var(--gcl-carousel-gap, 8px);
  }

  .gcl-game-carousel .gcl-game-cover-body {
    padding: 28px 7px 7px;
  }

  .gcl-game-carousel .gcl-game-cover-body h3 {
    font-size: 11px;
    line-height: 1.18;
  }

  .gcl-game-carousel .gcl-game-cover-body span,
  .gcl-game-carousel .gcl-game-multiplayer-badge {
    font-size: 8px;
  }

  .gcl-package-carousel .gcl-package-inner {
    min-height: 0 !important;
  }

  .gcl-package-carousel .gcl-package-image-top {
    height: 42px !important;
    min-height: 42px !important;
    padding: 7px 8px !important;
    background:
      linear-gradient(180deg, rgba(0, 0, 0, 0.02), rgba(1, 12, 24, 0.68)),
      var(--gcl-package-cover, linear-gradient(135deg, rgba(5, 28, 48, 0.95), rgba(1, 12, 24, 0.98))) center center / cover no-repeat !important;
  }

  .gcl-package-carousel .gcl-package-content {
    gap: 5px !important;
    padding: 8px !important;
    grid-template-rows: auto auto auto 28px !important;
  }

  .gcl-package-carousel .gcl-package-card-top {
    align-items: center !important;
    gap: 7px !important;
    min-height: 30px !important;
    margin-bottom: 0 !important;
  }

  .gcl-package-carousel .gcl-package-icon,
  .gcl-package-carousel .gcl-package-image-icon {
    width: 26px !important;
    height: 26px !important;
    flex-basis: 26px !important;
    border-radius: 8px !important;
  }

  .gcl-package-carousel .gcl-package-card h3 {
    font-size: 11px !important;
    line-height: 1 !important;
  }

  .gcl-package-carousel .gcl-package-title p,
  .gcl-package-carousel .gcl-package-desc,
  .gcl-package-carousel .gcl-package-specs small {
    font-size: 7px !important;
  }

  .gcl-package-carousel .gcl-package-desc {
    margin-bottom: 0 !important;
    min-height: 16px !important;
    line-height: 1.2 !important;
  }

  .gcl-package-carousel .gcl-package-specs strong {
    font-size: 9px !important;
  }

  .gcl-package-carousel .gcl-package-price strong {
    font-size: 14px !important;
  }

  .gcl-package-carousel .gcl-package-primary {
    height: 28px !important;
    font-size: 10px !important;
  }

  .gcl-package-carousel .gcl-package-specs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 5px !important;
    margin-bottom: 0 !important;
  }

  .gcl-package-carousel .gcl-package-specs span {
    border-radius: 8px !important;
    padding: 6px !important;
  }
}

.gcl-game-toolbar + .gcl-game-cover-grid {
  margin-top: 18px;
}

.gcl-game-cover-card {
  position: relative;
  isolation: isolate;
  min-width: 0;
  width: 100%;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border: 1px solid rgba(89, 173, 228, 0.22);
  border-radius: 8px;
  background: rgba(6, 30, 50, 0.84);
  color: #fff;
  cursor: pointer;
  transition: transform 160ms ease, border-color 160ms ease;
}

.gcl-game-cover-card:hover {
  transform: translateY(-3px);
  border-color: rgba(255, 211, 36, 0.45);
}

.gcl-game-cover-card.is-empty {
  display: none;
}

.gcl-game-cover-card.has-fallback {
  background:
    radial-gradient(circle at 50% 18%, rgba(89, 226, 255, 0.28), transparent 34%),
    linear-gradient(155deg, rgba(10, 55, 88, 0.95), rgba(2, 15, 28, 0.98));
}

.gcl-game-cover-fallback {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 8px;
  padding: 18px;
  color: #fff;
  text-align: center;
}

.gcl-game-cover-fallback strong {
  width: 72px;
  height: 72px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(89, 226, 255, 0.3);
  border-radius: 8px;
  background: rgba(2, 18, 31, 0.72);
  color: #ffd324;
  font-size: 30px;
  font-weight: 1000;
}

.gcl-game-cover-fallback span {
  color: #59e2ff;
  font-size: 11px;
  font-weight: 1000;
  text-transform: uppercase;
}

.gcl-game-cover-card > img {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-width: 0;
  max-width: 100%;
  object-fit: cover;
  object-position: center;
  background:
    radial-gradient(circle at center, rgba(31, 108, 155, 0.25), transparent 55%),
    linear-gradient(145deg, #031524, #071c2f);
  transform: translateZ(0);
}

.gcl-game-multiplayer-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 8px;
  background: linear-gradient(135deg, #ffd324, #54e6a5);
  color: #06121f;
  font-size: 11px;
  font-weight: 1000;
  text-transform: uppercase;
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.32);
}

.gcl-game-cover-body {
  position: absolute;
  inset: auto 0 0;
  display: grid;
  gap: 8px;
  padding: 42px 10px 10px;
  background: linear-gradient(180deg, transparent, rgba(1, 11, 22, 0.96));
  pointer-events: none;
  z-index: 1;
}

.gcl-game-cover-body span {
  color: #59e2ff;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.gcl-game-cover-body h3 {
  margin: 0;
  font-size: 15px;
  line-height: 1.25;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.76);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.gcl-game-cover-body small {
  color: rgba(198, 241, 255, 0.82);
  font-size: 10px;
  font-weight: 800;
  line-height: 1.25;
}

.gcl-game-cover-body div {
  display: flex;
  gap: 6px;
  pointer-events: auto;
}

.gcl-mini-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  padding: 0 10px;
  border: 1px solid rgba(89, 173, 228, 0.28);
  border-radius: 8px;
  background: rgba(16, 65, 100, 0.9);
  color: #fff;
  font-size: 12px;
  font-weight: 900;
  text-decoration: none;
}

.gcl-cover-only-card {
  padding: 0;
  min-height: 220px;
  background-image: var(--gcl-card-cover);
  background-size: cover;
  background-position: center;
  box-shadow: inset 0 -80px 90px rgba(0, 0, 0, 0.4);
}

.gcl-cover-only-card.is-empty {
  display: none;
}

.gcl-package-card {
  position: relative;
  overflow: hidden;
  min-height: 390px;
  padding: 0;
  border: 0;
  border-radius: 14px;
  background: rgba(2, 16, 30, 0.94) !important;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.34);
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.4s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.gcl-root .gcl-vps-page .gcl-package-card {
  border: 1px solid rgba(89, 173, 228, 0.18);
  background: rgba(2, 16, 30, 0.94) !important;
  padding: 2px;
}

.gcl-root .gcl-vps-page .gcl-package-card:hover {
  transform: translateY(-6px) scale(1.015);
  border-color: rgba(89, 226, 255, 0.38);
  box-shadow: 0 28px 60px rgba(0, 0, 0, 0.48), 0 0 24px rgba(0, 218, 255, 0.12);
}

.gcl-package-inner {
  min-height: 392px;
  border-radius: 14px;
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, rgba(7, 35, 58, 0.98), rgba(1, 12, 24, 0.98));
}

.gcl-package-inner::before {
  display: none;
}

.gcl-package-image-top {
  height: 112px;
  position: relative;
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(3, 10, 20, 0.14), rgba(1, 12, 24, 0.9)),
    var(--gcl-package-cover, linear-gradient(135deg, rgba(5, 28, 48, 0.95), rgba(1, 12, 24, 0.98))) center 38% / cover no-repeat;
  filter: saturate(0.84) brightness(0.7);
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), filter 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.gcl-package-image-top::after {
  content: "";
  position: absolute;
  left: 22px;
  right: 22px;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(90, 225, 255, 0.95), transparent);
  box-shadow: 0 0 18px rgba(0, 210, 255, 0.8);
}

.gcl-package-image-fade {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 20% 40%, rgba(6, 31, 58, 0.14), transparent 42%),
    linear-gradient(90deg, rgba(1, 8, 18, 0.38) 0%, rgba(1, 8, 18, 0.1) 42%, rgba(1, 8, 18, 0.36) 100%);
  pointer-events: none;
}

.gcl-package-badge {
  display:none;
  position: absolute;
  top: 12px;
  left: 12px;
  padding: 7px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 1px;
  color: #061725;
  background: #ffd320;
  box-shadow: 0 0 24px rgba(255, 211, 32, 0.28);
  text-transform: uppercase;
}

.gcl-package-content {
  position: relative;
  z-index: 1;
  flex: 1;
  display: grid;
  grid-template-rows: auto auto auto 1fr;
  align-content: start;
  padding: 16px 16px 18px;
  gap: 8px;
}

.gcl-spec-card,
.gcl-event-card {
  min-height: 210px;
}

.gcl-package-card::before {
  display: none;
}

.gcl-root .gcl-vps-page .gcl-package-title {
  margin: 0;
  font-size: 24px;
  line-height: 0.92;
  text-transform: uppercase;
  letter-spacing: -0.03em;
  font-weight: 1000;
}

.gcl-root .gcl-vps-page .gcl-package-title p {
  margin: 6px 0 0;
  color: #86aec7;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.gcl-root .gcl-vps-page .gcl-package-desc {
  margin: 0;
  display: -webkit-box;
  overflow: hidden;
  color: #b4cad8;
  font-size: 12px;
  line-height: 1.35;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  min-height: 35px;
}

.gcl-root .gcl-vps-page .gcl-package-icon,
.gcl-root .gcl-vps-page .gcl-package-image-icon {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  border-radius: 0;
  display: block;
  object-fit: contain;
  object-position: center;
  background: transparent;
  border: 0;
  box-shadow: none;
  filter: brightness(0) saturate(100%) invert(96%) sepia(6%) saturate(283%) hue-rotate(171deg) brightness(108%) contrast(108%) drop-shadow(0 0 6px rgba(145, 232, 255, 0.35));
}

.gcl-root .gcl-vps-page .gcl-package-card-top {
  align-items: center;
}

.gcl-root .gcl-vps-page .gcl-package-image-icon {
  object-fit: cover;
}

.gcl-root .gcl-vps-page .gcl-package-price {
  position: absolute;
  right: 16px;
  bottom: 16px;
  padding: 9px 14px;
  border-radius: 16px;
  background: linear-gradient(90deg, rgba(2, 69, 96, 0.92), rgba(12, 176, 94, 0.96));
  border: 1px solid rgba(113, 255, 182, 0.34);
  backdrop-filter: blur(10px);
  text-align: right;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.28);
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), filter 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.gcl-root .gcl-vps-page .gcl-package-price small {
  display: block;
  color: #85adc4;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  margin-bottom: 4px;
}

.gcl-root .gcl-vps-page .gcl-package-price strong {
  color: #ffffff;
  font-size: 22px;
  line-height: 1;
  font-weight: 1000;
}

.gcl-package-title {
  min-width: 0;
  flex: 1;
}

.gcl-package-mini-price {
  display: none;
}

.gcl-root .gcl-vps-page .gcl-package-specs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
  align-self: start;
}

.gcl-root .gcl-vps-page .gcl-package-stat {
  display: block;
  padding: 10px 11px;
  border: 0;
  border-radius: 12px;
  background: transparent;
}

.gcl-root .gcl-vps-page .gcl-package-stat-label {
  display: block;
  color: #789eb8;
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 5px;
}

.gcl-root .gcl-vps-page .gcl-package-stat strong {
  font-size: 20px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #d5ff00;
}

.gcl-package-power {
  display: none;
  height: 7px;
  border-radius: 99px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.07);
  margin-bottom: 12px;
}

.gcl-package-power span {
  display: none;
  width: var(--gcl-package-power, 78%);
  height: 100%;
  border-radius: 99px;
  background: linear-gradient(90deg, #14d8ff, #ffd320);
  box-shadow: 0 0 22px rgba(0, 210, 255, 0.4);
}

.gcl-package-actions {
  display: flex;
  gap: 10px;
  align-self: end;
}

.gcl-package-primary,
.gcl-package-ghost {
  height: 40px;
  border-radius: 12px;
  font-family: "Exo 2", "Segoe UI", Arial, sans-serif;
  font-weight: 1000;
  cursor: pointer;
  transition: transform 0.25s ease, filter 0.25s ease;
}

.gcl-package-primary {
  flex: 1;
  border: 0;
  color: #ffffff;
  background: linear-gradient(90deg, #015c77, #07b54d);
  box-shadow: 0 0 28px rgba(0, 210, 255, 0.2);
}

.gcl-package-ghost {
  display: inline-flex;
  width: auto;
  align-items: center;
  justify-content: center;
  padding: 0 14px;
  color: #96eaff;
  background: rgba(0, 16, 30, 0.72);
  border: 1px solid rgba(106, 228, 255, 0.22);
  font-size: 13px;
  text-decoration: none;
}

.gcl-package-primary:hover,
.gcl-package-ghost:hover {
  transform: translateY(-3px);
  filter: brightness(1.08);
}

.gcl-package-sheet {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 2px;
  min-height: 42px;
  padding: 0 16px;
  border-radius: 13px;
  border: 1px solid rgba(121, 232, 255, 0.16);
  background: rgba(1, 13, 25, 0.82);
  color: #d7faff;
  font-family: "Exo 2", "Segoe UI", Arial, sans-serif;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  transition: opacity 0.35s cubic-bezier(0.22, 1, 0.36, 1), transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s cubic-bezier(0.22, 1, 0.36, 1), background 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.gcl-package-sheet:hover {
  transform: translateY(-2px);
  border-color: rgba(124, 235, 255, 0.42);
  box-shadow: 0 0 0 1px rgba(124, 235, 255, 0.08), 0 0 24px rgba(0, 208, 255, 0.14);
  background: rgba(3, 23, 39, 0.96);
}

.gcl-package-coin {
  width: 16px;
  height: 16px;
  object-fit: contain;
  display: inline-block;
  filter: drop-shadow(0 0 6px rgba(255, 196, 58, 0.22));
}

.gcl-root .gcl-vps-page .gcl-package-card:hover .gcl-package-image-top {
  transform: scale(1.035);
  filter: saturate(1.05) brightness(0.95);
}

.gcl-root .gcl-vps-page .gcl-package-card:hover .gcl-package-price {
  transform: translateY(-1px) scale(1.02);
  filter: brightness(1.03);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.32), 0 0 18px rgba(0, 218, 255, 0.08);
}

.gcl-root .gcl-vps-page .gcl-package-card:hover .gcl-package-sheet {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.gcl-package-sheet-panel {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transform: translateY(10px);
  transition: max-height 0.45s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.35s cubic-bezier(0.22, 1, 0.36, 1), transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), margin-top 0.35s cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}

.gcl-package-card.sheet-open .gcl-package-sheet-panel {
  max-height: 320px;
  opacity: 1;
  transform: translateY(0);
  margin-top: 8px;
  pointer-events: auto;
}

.gcl-package-sheet-divider {
  height: 1px;
  margin: 10px 0 12px;
  background: linear-gradient(90deg, transparent, rgba(84, 219, 255, 0.8), transparent);
  box-shadow: 0 0 16px rgba(0, 210, 255, 0.25);
}

.gcl-package-sheet-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.gcl-package-sheet-grid div {
  padding: 10px 11px;
  border-radius: 12px;
  background: rgba(3, 20, 36, 0.78);
  border: 1px solid rgba(103, 228, 255, 0.12);
}

.gcl-package-sheet-grid span {
  display: block;
  margin-bottom: 5px;
  color: #789eb8;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.gcl-package-sheet-grid strong {
  color: #f2fbff;
  font-size: 13px;
  font-weight: 900;
}

.gcl-package-sheet-desc {
  margin: 10px 0 12px;
  color: #b2c9d8;
  font-size: 12px;
  line-height: 1.45;
}

.gcl-package-start {
  width: 100%;
  min-height: 42px;
  border: 0;
  border-radius: 12px;
  background: linear-gradient(90deg, #0c7480, #10bf57);
  color: #fff;
  font-family: "Exo 2", "Segoe UI", Arial, sans-serif;
  font-size: 13px;
  font-weight: 1000;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
}

.gcl-root .gcl-vps-page .gcl-package-card:hover .gcl-package-icon-cover {
  transform: scale(1.05) translateY(-1px);
  filter: brightness(0) saturate(100%) invert(98%) sepia(8%) saturate(362%) hue-rotate(173deg) brightness(111%) contrast(109%) drop-shadow(0 0 8px rgba(145, 232, 255, 0.48)) drop-shadow(0 0 20px rgba(0, 210, 255, 0.18));
}

.gcl-package-icon-cover {
  position: absolute;
  left: 16px;
  bottom: 16px;
  z-index: 2;
  width: 56px !important;
  height: 56px !important;
  flex: 0 0 44px;
  padding: 0;
  margin: 0;
  filter: brightness(0) saturate(100%) invert(96%) sepia(6%) saturate(283%) hue-rotate(171deg) brightness(108%) contrast(108%) drop-shadow(0 0 8px rgba(145, 232, 255, 0.2));
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), filter 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.gcl-package-specs small,
.gcl-stat-list,
.gcl-mini-list {
  color: #aecaDE;
}

/* Package card template from user */
.game-package-card {
  width: 100%;
  background:
    linear-gradient(180deg, rgba(18, 23, 35, 0.98), rgba(12, 16, 26, 0.99));
  border: 1px solid rgba(255, 255, 255, 0.04);
  border-radius: 12px;
  overflow: hidden;
  position: relative;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.42);
  transition:
    transform 420ms cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 420ms cubic-bezier(0.22, 1, 0.36, 1),
    border-color 420ms ease;
}

.game-package-card:hover {
  transform: translateY(-7px) scale(1.012);
  border-color: rgba(57, 255, 135, 0.25);
  box-shadow: 0 28px 70px rgba(0, 0, 0, 0.55), 0 0 30px rgba(0, 255, 120, 0.06);
}

.game-cover-wrap {
  position: relative;
  height: 145px;
  margin: 10px 8px 0;
  border-radius: 8px;
  overflow: hidden;
  isolation: isolate;
}

.game-cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1);
  filter: brightness(0.7) saturate(0.85);
  transition: transform 700ms cubic-bezier(0.22, 1, 0.36, 1), filter 500ms ease;
}

.game-package-card:hover .game-cover {
  transform: scale(1.055);
  filter: brightness(1) saturate(1.12);
}

.game-cover-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(4, 10, 25, 0.75) 0%, rgba(4, 10, 25, 0.25) 45%, rgba(0, 0, 0, 0.08) 100%);
  z-index: 1;
  transition: opacity 400ms ease;
}

.game-package-card:hover .game-cover-overlay {
  opacity: 0.55;
}

.device-icon {
  position: absolute;
  z-index: 3;
  left: 30px;
  top: 50%;
  width: 56px;
  height: 52px;
  display: grid;
  place-items: center;
  transform: translateY(-50%);
  transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1), filter 420ms ease;
}

.package-device-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
  filter: brightness(0) saturate(100%) invert(100%) drop-shadow(0 0 3px rgba(255, 255, 255, 0.25));
}

.game-package-card:hover .device-icon {
  transform: translateY(calc(-50% - 3px)) scale(1.06);
  filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.9)) drop-shadow(0 0 12px rgba(75, 221, 255, 0.65)) drop-shadow(0 0 25px rgba(75, 221, 255, 0.32));
}

.game-package-card:hover .package-device-image {
  filter: brightness(0) saturate(100%) invert(100%) drop-shadow(0 0 5px rgba(255, 255, 255, 0.9)) drop-shadow(0 0 12px rgba(75, 221, 255, 0.65)) drop-shadow(0 0 25px rgba(75, 221, 255, 0.32));
}

.price-badge {
  position: absolute;
  z-index: 4;
  right: 10px;
  top: 50%;
  bottom: auto;
  min-width: 168px;
  padding: 6px 18px 7px;
  background: linear-gradient(180deg, #0db967, #009b53);
  border-radius: 999px;
  color: #ffffff;
  text-align: center;
  font-size: 22px;
  line-height: 1;
  font-weight: 900;
  letter-spacing: -1px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
  transform: translateY(-50%);
  transition: transform 350ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 350ms ease, filter 350ms ease;
}

.game-package-card:hover .price-badge {
  transform: translateY(-50%) scale(1.035);
  filter: brightness(1.08);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35), 0 0 22px rgba(0, 255, 130, 0.23);
}

.package-body {
  padding: 18px 28px 25px;
}

.package-title {
  margin: 0;
  text-align: center;
  color: #ffffff;
  font-size: 29px;
  font-weight: 1000;
  font-style: italic;
  letter-spacing: -1.5px;
  text-transform: uppercase;
  text-shadow: 0 2px 0 rgba(255, 255, 255, 0.1), 0 5px 12px rgba(0, 0, 0, 0.55);
  transition: text-shadow 350ms ease, transform 350ms ease;
}

.package-device {
  margin-top: 4px;
  color: rgba(255, 255, 255, 0.55);
  text-align: center;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.1px;
  text-transform: uppercase;
}

.game-package-card:hover .package-title {
  transform: translateY(-1px);
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.12), 0 5px 14px rgba(0, 0, 0, 0.65);
}

.package-description {
  max-width: 330px;
  margin: 5px auto 16px;
  color: rgba(255, 255, 255, 0.83);
  text-align: center;
  font-size: 14px;
  line-height: 1.12;
  font-weight: 600;
}

.package-stats {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 15px;
  margin-top: 12px;
}

.stat {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.stat-label {
  color: rgba(255, 255, 255, 0.55);
  font-size: 11px;
  font-weight: 500;
}

.stat strong {
  color: #baff00;
  font-size: 17px;
  line-height: 1;
  font-weight: 900;
  transition: filter 300ms ease, transform 300ms ease;
}

.game-package-card:hover .stat strong {
  filter: drop-shadow(0 0 7px rgba(191, 255, 0, 0.24));
  transform: translateY(-1px);
}

.reveal-button {
  width: 100%;
  height: 42px;
  margin-top: 20px;
  padding: 0 17px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  opacity: 1;
  transform: translateY(0);
  overflow: hidden;
  border: 1px solid rgba(78, 255, 150, 0.27);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.025);
  backdrop-filter: blur(10px);
  color: #ffffff;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.9px;
  cursor: pointer;
  pointer-events: auto;
  transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1), background 300ms ease, border-color 300ms ease, box-shadow 300ms ease, filter 300ms ease;
}

.game-package-card:hover .reveal-button,
.game-package-card.sheet-open .reveal-button {
  transform: translateY(-1px);
  border-color: rgba(78, 255, 150, 0.58);
  filter: brightness(1.03);
}

.reveal-button:hover {
  background: rgba(54, 255, 133, 0.07);
  border-color: rgba(76, 255, 153, 0.65);
  box-shadow: inset 0 0 15px rgba(0, 255, 128, 0.05), 0 0 20px rgba(0, 255, 128, 0.07);
}

.reveal-arrow {
  font-size: 16px;
  transition: transform 300ms ease;
}

.reveal-button:hover .reveal-arrow {
  transform: translate(3px, -3px);
}

.package-sheet {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transform: translateY(-5px);
  transition: max-height 550ms cubic-bezier(0.22, 1, 0.36, 1), opacity 350ms ease, transform 450ms cubic-bezier(0.22, 1, 0.36, 1);
}

.game-package-card.sheet-open .package-sheet {
  max-height: 350px;
  opacity: 1;
  transform: translateY(0);
}

.sheet-divider {
  height: 1px;
  margin: 19px 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.14), transparent);
}

.sheet-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 15px;
}

.sheet-grid > div {
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.02);
}

.sheet-label {
  display: block;
  margin-bottom: 4px;
  color: rgba(255, 255, 255, 0.4);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.8px;
}

.sheet-grid strong {
  color: #ffffff;
  font-size: 13px;
}

.start-button {
  width: 100%;
  margin-top: 16px;
  padding: 13px;
  border: 0;
  border-radius: 8px;
  background: linear-gradient(180deg, #17c56f, #079552);
  color: #ffffff;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.7px;
  cursor: pointer;
  transition: transform 250ms ease, filter 250ms ease, box-shadow 250ms ease;
}

.start-button:hover {
  transform: translateY(-2px);
  filter: brightness(1.08);
  box-shadow: 0 8px 25px rgba(0, 255, 128, 0.16);
}

@media (hover: none) {
  .reveal-button {
    height: 42px;
    margin-top: 20px;
    opacity: 1;
    transform: none;
    pointer-events: auto;
    border-color: rgba(78, 255, 150, 0.27);
  }

  .game-package-card:hover {
    transform: none;
  }

  .game-package-card:hover .game-cover {
    transform: none;
  }
}

@media (max-width: 500px) {
  .game-package-card {
    width: calc(100vw - 28px);
  }

  .price-badge {
    min-width: 170px;
    font-size: 24px;
  }

  .package-body {
    padding-left: 20px;
    padding-right: 20px;
  }
}

@media (max-width: 1100px) {
  .gcl-package-grid,
  .gcl-home-packages-grid .gcl-package-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .gcl-package-grid,
  .gcl-home-packages-grid .gcl-package-grid {
    grid-template-columns: 1fr;
  }
}

.gcl-badge {
  display: inline-block;
  padding: 5px 7px;
  border-radius: 6px;
  background: rgba(255, 211, 36, 0.16);
  color: #ffd324;
  font-size: 10px;
  font-weight: 900;
}

.gcl-stat-list,
.gcl-mini-list {
  list-style: none;
  padding: 0;
  margin: 18px 0 0;
}

.gcl-stat-list li,
.gcl-mini-list li {
  padding: 10px 0;
  border-top: 1px solid rgba(148, 190, 221, 0.18);
}

.gcl-mini-list li {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 12px;
  align-items: center;
}

.gcl-home-rankings {
  width: min(100% - 24px, var(--gcl-shell, 1180px));
  margin-inline: auto;
  margin-top: 16px;
  padding: clamp(16px, 2.2vw, 24px);
  border: 1px solid rgba(72, 255, 123, 0.2);
  border-radius: 10px;
  background:
    linear-gradient(180deg, rgba(2, 8, 15, 0.88), rgba(2, 18, 33, 0.76)),
    linear-gradient(90deg, rgba(72, 255, 123, 0.05), transparent 42%, rgba(255,255,255,.03));
  box-shadow: 0 26px 80px rgba(0, 0, 0, 0.3), inset 0 0 42px rgba(72, 255, 123, 0.035);
  backdrop-filter: blur(12px);
}

.gcl-home-branches {
  width: min(calc(100% - 32px), var(--gcl-shell, 1180px));
  margin: 28px auto 42px;
  padding: clamp(20px, 3vw, 34px);
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(3, 7, 12, .94), rgba(6, 12, 20, .88));
}

.gcl-home-branches-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 24px;
  margin-bottom: 22px;
}

.gcl-home-branches-head h2 {
  max-width: 680px;
  margin: 3px 0 0;
  font-size: clamp(25px, 3vw, 38px);
  line-height: 1.04;
}

.gcl-home-branches-head p {
  color: rgba(191, 209, 226, 0.78);
  margin: 9px 0 0;
  max-width: 62ch;
  font-size: 15px;
  line-height: 1.45;
}

.gcl-home-branches-head .gcl-link {
  align-self: end;
  min-width: 0;
  padding: 0 0 3px;
  border: 0;
  border-bottom: 1px solid currentColor;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  white-space: nowrap;
}

.gcl-home-branch-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 430px), 1fr));
  gap: 14px;
  align-items: stretch;
}

.gcl-root .gcl-home-branch-card {
  position: relative;
  display: grid;
  grid-template-columns: 38px 52px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  min-width: 0;
  min-height: 118px;
  padding: 18px 20px;
  border: 1px solid rgba(255, 255, 255, .075);
  border-radius: 14px;
  background: rgba(255, 255, 255, .025);
  box-shadow: none;
  overflow: hidden;
  cursor: pointer;
}

.gcl-home-branch-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(0, 240, 255, .055), transparent 44%);
  opacity: 1;
  pointer-events: none;
}

.gcl-home-branch-index,
.gcl-home-branch-avatar,
.gcl-home-branch-copy,
.gcl-home-branch-meta {
  position: relative;
  z-index: 1;
}

.gcl-home-branch-index {
  align-self: start;
  color: rgba(255, 255, 255, .4);
  font: 600 11px/1.2 "Rajdhani", sans-serif;
  letter-spacing: .1em;
}

.gcl-home-branch-avatar {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(0, 240, 255, .1);
  color: #4de9ff;
  font: 700 16px/1 "Rajdhani", sans-serif;
  letter-spacing: .05em;
}

.gcl-home-branch-copy {
  min-width: 0;
}

.gcl-home-branch-copy h3 {
  margin: 0;
  overflow-wrap: anywhere;
  color: #f5f8fc;
  font-size: clamp(20px, 2.2vw, 25px);
  line-height: 1.08;
}

.gcl-home-branch-copy p {
  margin: 7px 0 0;
  color: rgba(202, 214, 226, .75);
  font-size: 13px;
  line-height: 1.35;
}

.gcl-home-branch-copy small {
  display: block;
  margin-top: 4px;
  color: rgba(202, 214, 226, .52);
  font-size: 11px;
  line-height: 1.25;
}

.gcl-home-branch-meta {
  display: flex;
  align-items: stretch;
  gap: 0;
}

.gcl-home-branch-meta span {
  display: grid;
  min-width: 58px;
  padding: 3px 12px;
  text-align: center;
}

.gcl-home-branch-meta span + span {
  border-left: 1px solid rgba(255, 255, 255, .09);
}

.gcl-home-branch-meta b {
  color: #fff;
  font-size: 20px;
  line-height: 1.05;
}

.gcl-home-branch-meta small {
  color: rgba(202, 214, 226, .56);
  font-size: 9px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

@media (max-width: 640px) {
  .gcl-home-branches {
    width: calc(100% - 24px);
    margin-block: 20px 30px;
    padding: 18px 16px;
    border-radius: 14px;
  }

  .gcl-home-branches-head {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    margin-bottom: 18px;
  }

  .gcl-home-branches-head h2 {
    font-size: clamp(25px, 8.5vw, 32px);
  }

  .gcl-home-branches-head .gcl-link {
    justify-self: start;
  }

  .gcl-root .gcl-home-branch-card {
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 12px;
    min-height: 0;
    padding: 16px;
  }

  .gcl-home-branch-index {
    position: absolute;
    top: 14px;
    right: 14px;
  }

  .gcl-home-branch-avatar {
    width: 48px;
    height: 48px;
  }

  .gcl-home-branch-copy {
    padding-right: 26px;
  }

  .gcl-home-branch-copy h3 {
    font-size: 22px;
  }

  .gcl-home-branch-meta {
    grid-column: 1 / -1;
    justify-self: stretch;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, .07);
  }

  .gcl-home-branch-meta span {
    flex: 1;
  }
}

.gcl-home-rank-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
}

.gcl-home-rank-command {
  display: grid;
  grid-template-columns: minmax(280px, .9fr) minmax(360px, 1.1fr);
  gap: 12px;
  margin-top: 18px;
}

.gcl-home-rank-leader,
.gcl-home-rank-stats span {
  border: 1px solid rgba(72, 255, 123, .18);
  border-radius: 8px;
  background: rgba(0, 0, 0, .42);
  box-shadow: inset 0 0 24px rgba(72, 255, 123, .035);
}

.gcl-home-rank-leader {
  display: grid;
  gap: 4px;
  padding: 14px 16px;
}

.gcl-home-rank-leader span,
.gcl-ranking-board-head,
.gcl-home-rank-stats small {
  color: rgba(255, 255, 255, .58);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.gcl-home-rank-leader strong {
  color: #fff;
  font-family: "Orbitron", "Exo 2", "Segoe UI", Arial, sans-serif;
  font-size: clamp(20px, 2vw, 30px);
  line-height: 1;
  text-transform: uppercase;
}

.gcl-home-rank-leader small {
  color: #48ff7b;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.gcl-home-rank-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.gcl-home-rank-stats span {
  display: grid;
  align-content: center;
  gap: 2px;
  min-height: 76px;
  padding: 12px;
}

.gcl-home-rank-stats b {
  color: #fff;
  font-family: "Orbitron", "Exo 2", "Segoe UI", Arial, sans-serif;
  font-size: 24px;
  line-height: 1;
}

.gcl-ranking-board {
  display: grid;
  margin-top: 12px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 8px;
  background: rgba(0, 0, 0, .28);
}

.gcl-ranking-board-head,
.gcl-ranking-row {
  display: grid;
  grid-template-columns: 58px minmax(220px, 1fr) 92px 120px 82px 82px;
  align-items: center;
}

.gcl-ranking-board-head {
  min-height: 40px;
  padding: 0 14px;
  background: rgba(0, 0, 0, .52);
}

.gcl-ranking-empty {
  display: grid;
  gap: 5px;
  margin-top: 18px;
  padding: 18px;
  border: 1px dashed rgba(92, 206, 255, 0.24);
  border-radius: 8px;
  background: rgba(1, 12, 24, 0.54);
}

.gcl-ranking-empty strong {
  color: #ffffff;
  font-size: 16px;
}

.gcl-ranking-empty span {
  color: #9eb9cc;
  font-size: 13px;
}

.gcl-ranking-row {
  min-height: 58px;
  padding: 8px 14px;
  border-top: 1px solid rgba(255, 255, 255, .07);
  background: linear-gradient(90deg, rgba(4, 20, 32, .78), rgba(0, 0, 0, .2));
  transition: background 160ms ease, transform 160ms ease;
}

.gcl-ranking-row:hover {
  background: linear-gradient(90deg, rgba(15, 48, 33, .76), rgba(0, 0, 0, .34));
}

.gcl-ranking-place {
  color: #48ff7b;
  font-family: "Exo 2", "Segoe UI", Arial, sans-serif;
  font-size: 16px;
  font-weight: 1000;
}

.gcl-ranking-player {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.gcl-ranking-avatar {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  flex: 0 0 42px;
  border: 1px solid rgba(72, 255, 123, 0.38);
  border-radius: 50%;
  background: rgba(72, 255, 123, 0.1);
  color: #48ff7b;
  font-size: 13px;
  font-weight: 1000;
  font-style: normal;
}

.gcl-ranking-row strong,
.gcl-ranking-row small {
  display: block;
}

.gcl-ranking-row strong {
  overflow: hidden;
  color: #ffffff;
  font-size: 15px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gcl-ranking-row small {
  margin-top: 3px;
  color: #8fb1c8;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.gcl-ranking-row b {
  color: #48ff7b;
  font-size: 14px;
  white-space: nowrap;
}

.gcl-ranking-level {
  display: inline-grid;
  place-items: center;
  width: 44px;
  min-height: 30px;
  border: 1px solid rgba(72, 255, 123, .24);
  border-radius: 8px;
  color: #fff;
  background: rgba(72, 255, 123, .08);
  font-family: "Orbitron", "Exo 2", "Segoe UI", Arial, sans-serif;
  font-size: 13px;
  font-weight: 900;
}

.gcl-ranking-row.is-gold,
.gcl-ranking-row.is-silver,
.gcl-ranking-row.is-bronze {
  background: linear-gradient(90deg, rgba(10, 42, 24, .86), rgba(0, 0, 0, .24));
}

.gcl-ranking-row.is-gold .gcl-ranking-avatar {
  border-color: rgba(72, 255, 123, 0.68);
  background: rgba(72, 255, 123, 0.16);
  color: #fff;
  box-shadow: 0 0 16px rgba(72, 255, 123, .14);
}

.gcl-earn-hero {
  display: grid;
  gap: 18px;
  padding: clamp(24px, 4vw, 42px);
  border-color: rgba(89, 226, 255, 0.26);
  background:
    linear-gradient(135deg, rgba(5, 30, 52, 0.88), rgba(1, 12, 24, 0.94)),
    radial-gradient(circle at 18% 20%, rgba(89, 226, 255, 0.18), transparent 34%),
    radial-gradient(circle at 90% 18%, rgba(255, 211, 36, 0.12), transparent 30%);
}

.gcl-earn-hero h1 {
  max-width: 900px;
  margin: 0;
  font-size: clamp(40px, 7vw, 86px);
  line-height: 0.95;
  text-transform: uppercase;
}

.gcl-earn-hero p {
  max-width: 860px;
  margin: 0;
  color: #c3d6e5;
  font-size: clamp(16px, 2vw, 20px);
  line-height: 1.6;
}

.gcl-earn-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 4px;
}

.gcl-earn-metrics span {
  display: grid;
  gap: 4px;
  padding: 14px 16px;
  border: 1px solid rgba(89, 226, 255, 0.2);
  border-radius: 8px;
  background: rgba(1, 12, 24, 0.56);
}

.gcl-earn-metrics strong {
  color: #ffd324;
  font-size: 24px;
  line-height: 1;
}

.gcl-earn-metrics small {
  color: #98b8ce;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.gcl-earn-block {
  margin-top: 46px;
}

.gcl-earn-steps {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
}

.gcl-earn-step {
  display: grid;
  gap: 10px;
  align-content: start;
  min-height: 240px;
  background: rgba(2, 18, 33, 0.78);
}

.gcl-earn-step span {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(135deg, #2bdcff, #ffd324);
  color: #031524;
  font-weight: 1000;
}

.gcl-earn-step h3 {
  margin: 0;
  font-size: 19px;
  line-height: 1.05;
  text-transform: uppercase;
}

.gcl-earn-step p {
  margin: 0;
  color: #b9ccda;
  line-height: 1.55;
}

.gcl-rank-chip {
  display: inline-flex;
  gap: 8px;
  align-items: center;
}

.gcl-avatar {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, #84f0d0, #ffe256);
  color: #082033;
  font-weight: 1000;
  font-size: 28px;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.gcl-avatar.is-photo,
[data-gcl-account-avatar].is-photo {
  color: transparent;
  text-indent: -999px;
  overflow: hidden;
}

.gcl-form-card label {
  display: grid;
  gap: 8px;
  color: #9ec3df;
  font-weight: 800;
}

.gcl-login-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.gcl-login-fields .gcl-wide {
  grid-column: 1 / -1;
}

.gcl-favorite-game-field {
  min-width: 0;
}

.gcl-game-multiselect {
  position: relative;
  display: grid;
  gap: 8px;
  min-width: 0;
}

.gcl-game-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.gcl-game-chip {
  min-height: 34px;
  max-width: 100%;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(255, 212, 55, 0.34);
  border-radius: 999px;
  background: rgba(255, 212, 55, 0.12);
  color: #fff;
  padding: 6px 10px;
  font: inherit;
  font-weight: 900;
  cursor: pointer;
}

.gcl-game-chip span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gcl-game-chip b {
  color: #ffd437;
  font-size: 16px;
  line-height: 1;
}

.gcl-game-suggestions {
  position: absolute;
  z-index: 20;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  max-height: 240px;
  overflow: auto;
  border: 1px solid rgba(89, 173, 228, 0.32);
  border-radius: 8px;
  background: #041b2d;
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.34);
  padding: 6px;
}

.gcl-game-suggestions button {
  min-height: 38px;
  width: 100%;
  display: block;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #fff;
  padding: 9px 10px;
  text-align: left;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}

.gcl-game-suggestions button:hover,
.gcl-game-suggestions button:focus {
  background: rgba(89, 173, 228, 0.18);
  outline: none;
}

.gcl-profile-form {
  align-items: start;
}

.gcl-dashboard-profile-hero {
  position: relative;
  min-height: 300px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 18px;
  padding: 28px;
  border: 1px solid rgba(89, 226, 255, 0.22);
  border-radius: 8px;
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(2, 13, 24, 0.82), rgba(2, 13, 24, 0.34)),
    var(--gcl-banner-image, linear-gradient(135deg, rgba(6, 34, 56, 0.95), rgba(18, 18, 22, 0.95))),
    linear-gradient(135deg, rgba(6, 34, 56, 0.95), rgba(18, 18, 22, 0.95));
  background-size: cover;
  background-position: center;
}

.gcl-profile-hero-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.45), transparent 56%);
  pointer-events: none;
}

.gcl-profile-hero-content {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
  max-width: min(900px, 76%);
}

.gcl-profile-hero-text {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.gcl-profile-hero-content h2 {
  margin: 5px 0 3px;
  font-size: clamp(34px, 5vw, 64px);
  line-height: 0.95;
}

.gcl-profile-hero-content p {
  margin: 0;
  color: #cfe3f3;
  font-weight: 800;
}

.gcl-profile-hero-bio {
  max-width: 760px;
  color: #d8e7f3 !important;
  font-size: 15px;
  font-weight: 700 !important;
  line-height: 1.45;
}

.gcl-profile-hero-details {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}

.gcl-profile-hero-details span {
  padding: 7px 10px;
  border: 1px solid rgba(89, 226, 255, 0.22);
  border-radius: 999px;
  background: rgba(2, 13, 24, 0.42);
  color: #cfe3f3;
  font-size: 12px;
  font-weight: 900;
}

.gcl-profile-avatar-edit {
  position: relative;
  flex: 0 0 auto;
  width: 94px;
  height: 94px;
  min-height: 94px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
}

.gcl-profile-avatar-edit .gcl-avatar {
  width: 94px;
  height: 94px;
  border: 3px solid rgba(255, 255, 255, 0.72);
  background-position: center;
  background-size: cover;
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.42);
}

.gcl-profile-avatar-edit b {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #ffd324;
  color: #081522;
  font-size: 24px;
  line-height: 1;
}

.gcl-profile-banner-edit,
.gcl-profile-upload-button {
  position: relative;
  z-index: 1;
  min-height: 44px;
  border: 1px solid rgba(255, 211, 36, 0.42);
  border-radius: 8px;
  background: rgba(255, 211, 36, 0.12);
  color: #fff;
  padding: 0 16px;
  font-weight: 1000;
  cursor: pointer;
}

.gcl-profile-image-field {
  gap: 12px;
}

.gcl-username-status {
  min-height: 16px;
  color: #8fa9bd;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.gcl-username-status.is-ok {
  color: #4cf2a1;
}

.gcl-username-status.is-error {
  color: #ff6f91;
}

.gcl-profile-form input.is-invalid {
  border-color: rgba(255, 111, 145, 0.78);
  box-shadow: 0 0 0 3px rgba(255, 111, 145, 0.1);
}

.gcl-profile-form input.is-valid {
  border-color: rgba(76, 242, 161, 0.58);
}

.gcl-profile-crop-modal {
  position: fixed;
  inset: 0;
  z-index: 2147483000 !important;
  display: grid;
  place-items: center;
  padding: 18px;
  isolation: isolate;
}

.gcl-profile-crop-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 6, 12, 0.78);
  backdrop-filter: blur(10px);
}

.gcl-profile-crop-card {
  position: relative;
  z-index: 1;
  width: min(520px, 100%);
  display: grid;
  gap: 16px;
  padding: 18px;
  border: 1px solid rgba(89, 226, 255, 0.28);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(6, 26, 44, 0.98), rgba(2, 12, 22, 0.98));
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.65);
}

.gcl-profile-crop-head,
.gcl-profile-crop-footer,
.gcl-profile-crop-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.gcl-profile-crop-head strong {
  color: #fff;
  font-size: 20px;
}

.gcl-profile-crop-head button,
.gcl-profile-crop-actions button {
  width: 42px;
  height: 42px;
  min-height: 42px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  font-size: 24px;
  font-weight: 1000;
  cursor: pointer;
}

.gcl-profile-crop-stage {
  position: relative;
  width: min(360px, calc(100vw - 74px));
  aspect-ratio: 1;
  justify-self: center;
  overflow: hidden;
  border: 2px solid rgba(255, 255, 255, 0.78);
  border-radius: 50%;
  background:
    radial-gradient(circle at center, rgba(255, 255, 255, 0.08), transparent 62%),
    #06121f;
  cursor: grab;
  touch-action: none;
  user-select: none;
}

.gcl-profile-crop-stage:active {
  cursor: grabbing;
}

.gcl-profile-crop-stage.is-banner {
  width: min(430px, calc(100vw - 74px));
  aspect-ratio: 16 / 7;
  border-radius: 8px;
}

.gcl-profile-crop-stage img {
  position: absolute;
  left: 50%;
  top: 50%;
  max-width: none;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform-origin: center;
  pointer-events: none;
}

.gcl-profile-crop-actions {
  justify-content: center;
}

.gcl-profile-crop-actions span {
  min-width: 64px;
  color: #ffd324;
  font-weight: 1000;
  text-align: center;
}

.gcl-profile-crop-footer {
  justify-content: flex-end;
}

.gcl-profile-form .gcl-favorite-game-field,
.gcl-profile-submit-row {
  grid-column: 1 / -1;
}

.gcl-profile-submit-row {
  display: grid;
}

.gcl-profile-submit-row .gcl-button {
  width: 100%;
}

.gcl-profile-setup .gcl-game-suggestions {
  position: static;
  max-height: 176px;
  margin-top: -2px;
}

.gcl-reward-hero,
.gcl-reward-section,
.gcl-your-rewards-panel {
  margin-top: 18px;
}

.gcl-reward-hero {
  align-items: center;
  background: rgba(10, 18, 30, 0.82);
  border: 1px solid rgba(119, 198, 255, 0.22);
  border-radius: 8px;
  display: flex;
  gap: 18px;
  justify-content: space-between;
  padding: 20px;
}

.gcl-reward-hero span,
.gcl-reward-rule-card span,
.gcl-reward-card span {
  color: var(--gcl-muted);
  display: block;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.gcl-reward-hero h3,
.gcl-reward-card h3 {
  margin: 6px 0;
}

.gcl-reward-hero p,
.gcl-reward-rule-card p,
.gcl-reward-card p {
  color: var(--gcl-muted);
  margin: 0;
}

.gcl-reward-metric-grid,
.gcl-reward-catalog-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  margin-top: 16px;
}

.gcl-reward-rule-card strong,
.gcl-reward-card strong {
  color: var(--gcl-text);
  display: block;
  font-size: 20px;
  margin-top: 8px;
}

.gcl-reward-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 150px;
}

.gcl-reward-card.is-ready {
  border-color: rgba(69, 214, 166, 0.55);
}

.gcl-cod4-rewards {
  display: grid;
  gap: 14px;
}

.gcl-station-rewards {
  display: grid;
  gap: 14px;
}

.gcl-station-reward-hero,
.gcl-cod4-reward-hero {
  align-items: stretch;
  border-radius: 8px;
  display: grid;
  gap: 18px;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 0.72fr);
  padding: 20px;
}

.gcl-station-reward-hero {
  background:
    linear-gradient(135deg, rgba(69, 214, 166, 0.15), rgba(14, 165, 233, 0.14)),
    rgba(10, 18, 30, 0.84);
  border: 1px solid rgba(69, 214, 166, 0.26);
}

.gcl-cod4-reward-hero {
  background:
    linear-gradient(135deg, rgba(45, 212, 191, 0.16), rgba(124, 58, 237, 0.18)),
    rgba(10, 18, 30, 0.84);
  border: 1px solid rgba(45, 212, 191, 0.26);
}

.gcl-station-reward-hero span,
.gcl-station-rules-table span,
.gcl-station-streak-card span,
.gcl-cod4-reward-hero span,
.gcl-cod4-formula span,
.gcl-cod4-source-card span,
.gcl-cod4-rules-table span {
  color: var(--gcl-muted);
  display: block;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}

.gcl-station-reward-hero h3,
.gcl-cod4-reward-hero h3 {
  font-size: clamp(28px, 4vw, 54px);
  line-height: 0.98;
  margin: 8px 0;
}

.gcl-station-reward-hero p,
.gcl-station-rules-table p,
.gcl-station-streak-card p,
.gcl-cod4-reward-hero p,
.gcl-cod4-source-card p,
.gcl-cod4-rules-table p {
  color: var(--gcl-muted);
  margin: 0;
}

.gcl-station-reward-stats,
.gcl-cod4-reward-stats {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.gcl-station-reward-stats strong,
.gcl-cod4-reward-stats strong {
  align-items: center;
  background: rgba(3, 7, 18, 0.52);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  color: var(--gcl-text);
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 110px;
  padding: 12px;
  text-align: center;
}

.gcl-station-reward-stats small,
.gcl-cod4-reward-stats small {
  color: var(--gcl-muted);
  display: block;
  font-size: 11px;
  margin-top: 5px;
  text-transform: uppercase;
}

.gcl-station-rules-table,
.gcl-cod4-formula {
  background: rgba(3, 7, 18, 0.62);
  border: 1px solid rgba(119, 198, 255, 0.18);
  border-radius: 8px;
  padding: 16px;
}

.gcl-station-rules-table,
.gcl-cod4-rules-table {
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 8px;
  overflow: hidden;
}

.gcl-station-rules-table div,
.gcl-cod4-rules-table div {
  align-items: center;
  background: rgba(255, 255, 255, 0.035);
  display: grid;
  gap: 12px;
  grid-template-columns: 160px 180px minmax(0, 1fr);
  padding: 12px 14px;
}

.gcl-station-rules-table div + div,
.gcl-cod4-rules-table div + div {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.gcl-station-rules-table strong,
.gcl-cod4-rules-table strong {
  color: var(--gcl-text);
}

.gcl-station-streak-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}

.gcl-station-streak-card strong {
  color: var(--gcl-text);
  display: block;
  font-size: 20px;
  margin: 8px 0;
}

.gcl-cod4-formula strong {
  color: var(--gcl-text);
  display: block;
  line-height: 1.5;
  margin-top: 8px;
  overflow-wrap: anywhere;
}

.gcl-cod4-source-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.gcl-cod4-source-card strong {
  color: var(--gcl-text);
  display: block;
  font-size: 20px;
  margin: 8px 0;
}

.gcl-cod4-advanced-rules {
  margin-top: 16px;
}

.gcl-cod4-advanced-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.gcl-cod4-advanced-card {
  min-height: 138px;
}

.gcl-cod4-advanced-card small {
  color: rgba(226, 232, 240, .64);
  display: block;
  margin-top: 12px;
}

.gcl-reward-history {
  display: grid;
  gap: 8px;
  margin-top: 16px;
}

.gcl-reward-history-row {
  align-items: center;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 8px;
  display: flex;
  justify-content: space-between;
  padding: 10px 12px;
}

.gcl-verification-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.gcl-verification-card-head span,
.gcl-verification-final-status span {
  color: #8fa9bd;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.gcl-verification-card-head em {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 9px;
  border: 1px solid rgba(143, 169, 189, 0.32);
  border-radius: 999px;
  color: #9fb6ca;
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
  white-space: nowrap;
}

.gcl-verification-card-head em.is-pending {
  border-color: rgba(255, 213, 31, 0.55);
  color: #ffd51f;
  background: rgba(255, 213, 31, 0.08);
}

.gcl-verification-card-head em.is-verified {
  border-color: rgba(61, 230, 151, 0.55);
  color: #55eca5;
  background: rgba(61, 230, 151, 0.1);
}

.gcl-verification-step-card form,
.gcl-verification-review-card form {
  display: grid;
  gap: 10px;
}

.gcl-profile-config-card select {
  width: 100%;
  min-height: 38px;
  padding: 9px 11px;
  border: 1px solid rgba(94, 151, 207, 0.24);
  border-radius: 6px;
  background: rgba(5, 18, 32, 0.82);
  color: #eff7ff;
  font: inherit;
}

.gcl-verification-check {
  display: flex !important;
  align-items: center;
  gap: 8px;
  color: #c7d7e6;
  font-size: 12px;
}

.gcl-verification-check input {
  width: 16px;
  min-height: 16px;
  flex: 0 0 16px;
}

.gcl-verification-actions,
.gcl-verification-final-status {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: auto;
}

.gcl-verification-actions button + button {
  background: #37e697;
}

.gcl-camera-box {
  display: grid;
  gap: 10px;
  padding: 10px;
  border: 1px solid rgba(94, 151, 207, 0.2);
  border-radius: 8px;
  background: rgba(3, 14, 25, 0.46);
}

.gcl-camera-preview {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 150px;
  overflow: hidden;
  border: 1px dashed rgba(143, 169, 189, 0.28);
  border-radius: 8px;
  background: rgba(2, 11, 20, 0.62);
  color: #8fa9bd;
  text-align: center;
}

.gcl-camera-preview::after {
  content: attr(data-instruction);
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 10px;
  min-height: 0;
  padding: 8px 10px;
  border-radius: 8px;
  background: rgba(2, 11, 20, 0.78);
  color: #ffd51f;
  font-weight: 900;
  pointer-events: none;
}

.gcl-camera-preview:not([data-instruction])::after,
.gcl-camera-preview[data-instruction=""]::after {
  display: none;
}

.gcl-camera-preview img,
.gcl-camera-preview video,
.gcl-camera-box > video {
  width: 100%;
  max-height: 220px;
  border-radius: 8px;
  object-fit: cover;
}

.gcl-camera-preview small,
.gcl-selfie-qr small {
  display: block;
  margin-top: 6px;
  color: #9fb6ca;
  font-size: 12px;
}

.gcl-selfie-qr {
  display: grid;
  justify-items: start;
  gap: 8px;
}

.gcl-selfie-qr[hidden] {
  display: none;
}

.gcl-selfie-qr img {
  width: 180px;
  height: 180px;
  padding: 8px;
  border-radius: 8px;
  background: #fff;
}

.gcl-selfie-desktop-flow.is-ready {
  padding: 12px;
  border: 1px solid rgba(61, 230, 151, 0.38);
  border-radius: 8px;
  background: rgba(61, 230, 151, 0.07);
}

.gcl-selfie-status-list {
  display: grid;
  gap: 7px;
  margin: 0;
  padding-left: 18px;
  color: #9fb6ca;
  font-size: 13px;
}

.gcl-selfie-status-list li.is-done {
  color: #55eca5;
  font-weight: 900;
}

[data-gcl-selfie-status="ready"].is-done {
  color: #ffd51f;
  font-size: 14px;
}

[data-gcl-selfie-submit].is-ready {
  background: #37e697 !important;
}

.gcl-device-status {
  min-height: 30px;
  padding: 8px 10px;
  border: 1px solid rgba(143, 169, 189, 0.22);
  border-radius: 8px;
  color: #9fb6ca;
  background: rgba(2, 11, 20, 0.44);
  font-size: 12px;
  font-weight: 800;
}

.gcl-device-status.is-ok {
  border-color: rgba(61, 230, 151, 0.42);
  color: #55eca5;
}

.gcl-selfie-instructions {
  display: grid;
  gap: 5px;
  margin: 0;
  padding-left: 18px;
  color: #c7d7e6;
  font-size: 12px;
}

.gcl-selfie-note {
  display: none !important;
}

input,
select,
textarea {
  min-height: 46px;
  width: 100%;
  box-sizing: border-box;
  border: 1px solid rgba(89, 173, 228, 0.25);
  border-radius: 8px;
  background: #031524;
  color: #fff;
  padding: 10px 12px;
  font: inherit;
}

.gcl-root .gcl-vps-page input,
.gcl-root .gcl-vps-page select,
.gcl-root .gcl-vps-page textarea,
.gcl-root .gcl-modal input {
  min-height: 46px;
  width: 100%;
  box-sizing: border-box;
  border: 1px solid rgba(89, 173, 228, 0.25);
  border-radius: 8px;
  background: #031524;
  color: #fff;
  padding: 10px 12px;
  font: inherit;
  box-shadow: none;
}

.gcl-root .gcl-vps-page .gcl-button,
.gcl-root .gcl-modal .gcl-button,
.gcl-root .gcl-vps-page button.gcl-button {
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  letter-spacing: 0;
  white-space: nowrap;
}

.gcl-smart-tip {
  position: fixed;
  z-index: 4000;
  display: grid;
  gap: 8px;
  max-width: calc(100vw - 24px);
  max-height: calc(100vh - 24px);
  overflow: hidden;
  padding: 14px;
  border: 1px solid rgba(94, 226, 255, 0.36);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(8, 31, 52, 0.96), rgba(2, 12, 24, 0.98)),
    radial-gradient(circle at 16% 0, rgba(255, 211, 36, 0.16), transparent 38%);
  color: #eff8ff;
  box-shadow: 0 18px 46px rgba(0, 0, 0, 0.46), 0 0 24px rgba(89, 226, 255, 0.18);
  pointer-events: none;
  transform-origin: var(--gcl-tip-arrow-x, 24px) 0;
  animation: gclSmartTipIn 150ms ease both;
  font-family: "Rajdhani", "Exo 2", "Segoe UI", Arial, sans-serif;
}

.gcl-smart-tip::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    linear-gradient(90deg, transparent, rgba(89, 226, 255, 0.14), transparent),
    linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px);
  background-size: 160% 100%, 100% 7px;
  opacity: 0.62;
  animation: gclSmartTipSweep 1.7s linear infinite;
  pointer-events: none;
}

.gcl-smart-tip::after {
  content: "";
  position: absolute;
  left: calc(var(--gcl-tip-arrow-x, 24px) - 5px);
  top: -6px;
  width: 10px;
  height: 10px;
  border-left: 1px solid rgba(94, 226, 255, 0.36);
  border-top: 1px solid rgba(94, 226, 255, 0.36);
  background: rgba(8, 31, 52, 0.96);
  transform: rotate(45deg);
}

.gcl-smart-tip.is-above {
  transform-origin: var(--gcl-tip-arrow-x, 24px) 100%;
}

.gcl-smart-tip.is-above::after {
  top: auto;
  bottom: -6px;
  border-top: 0;
  border-left: 0;
  border-right: 1px solid rgba(94, 226, 255, 0.36);
  border-bottom: 1px solid rgba(94, 226, 255, 0.36);
}

.gcl-smart-tip.is-below::after {
  top: -6px;
  bottom: auto;
  border-right: 0;
  border-bottom: 0;
  border-left: 1px solid rgba(94, 226, 255, 0.36);
  border-top: 1px solid rgba(94, 226, 255, 0.36);
}

.gcl-smart-tip.is-hiding {
  animation: gclSmartTipOut 140ms ease both;
}

.gcl-smart-tip span,
.gcl-smart-tip strong,
.gcl-smart-tip p,
.gcl-smart-tip div {
  position: relative;
  z-index: 1;
}

.gcl-smart-tip span {
  width: max-content;
  padding: 4px 7px;
  border: 1px solid rgba(255, 211, 36, 0.38);
  border-radius: 6px;
  color: #ffd324;
  background: rgba(255, 211, 36, 0.08);
  font-size: 10px;
  font-weight: 1000;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.gcl-smart-tip strong {
  color: #fff;
  font-family: "Orbitron", "Exo 2", "Segoe UI", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.15;
}

.gcl-smart-tip p {
  margin: 0;
  color: #b9d0e3;
  font-size: 12px;
  line-height: 1.45;
}

.gcl-smart-tip div {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.gcl-smart-tip b {
  display: inline-flex;
  min-height: 24px;
  align-items: center;
  padding: 0 8px;
  border: 1px solid rgba(89, 226, 255, 0.18);
  border-radius: 6px;
  color: #dff7ff;
  background: rgba(89, 226, 255, 0.08);
  font-size: 11px;
  font-weight: 900;
}

.gcl-root .is-tip-active {
  outline: 1px solid rgba(89, 226, 255, 0.5);
  outline-offset: 3px;
}

.gcl-root .gcl-vps-page [data-gcl-game-card]::after,
.gcl-root .gcl-vps-page .gcl-package-card::after,
.gcl-root .gcl-vps-page .gcl-card::after {
  transition: opacity 180ms ease, transform 180ms ease;
}

.gcl-root .gcl-vps-page [data-gcl-game-card].is-tip-active,
.gcl-root .gcl-vps-page .gcl-package-card.is-tip-active,
.gcl-root .gcl-vps-page .gcl-card.is-tip-active {
  transform: translateY(-4px);
  border-color: rgba(255, 211, 36, 0.46);
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.38), 0 0 24px rgba(89, 226, 255, 0.14);
}

.gcl-root .gcl-vps-page button.is-tip-active,
.gcl-root .gcl-vps-page a.is-tip-active,
.gcl-root .gcl-vps-page input.is-tip-active,
.gcl-root .gcl-vps-page select.is-tip-active,
.gcl-root .gcl-vps-page textarea.is-tip-active {
  box-shadow: 0 0 0 3px rgba(89, 226, 255, 0.12), 0 0 18px rgba(89, 226, 255, 0.12);
}

@media (max-width: 1024px), (hover: none), (pointer: coarse) {
  .gcl-smart-tip {
    display: none !important;
  }

  .gcl-root .is-tip-active {
    outline: 0 !important;
  }

  .gcl-root .gcl-vps-page [data-gcl-game-card].is-tip-active,
  .gcl-root .gcl-vps-page .gcl-package-card.is-tip-active,
  .gcl-root .gcl-vps-page .gcl-card.is-tip-active {
    transform: none;
    border-color: inherit;
    box-shadow: inherit;
  }
}

html.gcl-branch-modal-lock,
body.gcl-branch-modal-lock {
  overflow: hidden;
}

.gcl-branch-modal[hidden] {
  display: none !important;
}

.gcl-branch-modal {
  position: fixed;
  inset: 0;
  z-index: 26000;
  display: grid;
  place-items: center;
  padding: clamp(14px, 3vw, 34px);
  color: #eff8ff;
  font-family: "Rajdhani", "Exo 2", "Segoe UI", Arial, sans-serif;
}

.gcl-branch-modal-backdrop {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 22% 26%, rgba(89, 226, 255, 0.18), transparent 34%),
    rgba(0, 7, 14, 0.82);
  backdrop-filter: blur(12px);
}

.gcl-branch-modal-panel {
  position: relative;
  z-index: 1;
  width: min(1180px, 100%);
  max-height: min(760px, calc(100vh - 28px));
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(320px, 0.88fr);
  overflow: hidden;
  border: 1px solid rgba(89, 226, 255, 0.28);
  border-radius: 10px;
  background:
    linear-gradient(180deg, rgba(7, 26, 45, 0.98), rgba(1, 10, 20, 0.99)),
    radial-gradient(circle at 100% 0, rgba(255, 211, 36, 0.1), transparent 34%);
  box-shadow: 0 30px 95px rgba(0, 0, 0, 0.62), 0 0 42px rgba(89, 226, 255, 0.14);
  animation: gclBranchModalIn 180ms ease both;
}

.gcl-branch-modal-close {
  position: absolute;
  z-index: 6;
  top: 14px;
  right: 14px;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(89, 226, 255, 0.26);
  border-radius: 50%;
  background: rgba(1, 13, 25, 0.78);
  color: #fff;
  cursor: pointer;
  font-size: 22px;
}

.gcl-route-map {
  position: relative;
  min-height: 560px;
  overflow: hidden;
  background: #182028;
  cursor: grab;
}

.gcl-route-map::before {
  content: "";
  position: absolute;
  inset: -20%;
  background:
    linear-gradient(30deg, transparent 48%, rgba(240, 221, 126, 0.12) 49% 51%, transparent 52%),
    linear-gradient(118deg, transparent 45%, rgba(242, 236, 172, 0.1) 47% 49%, transparent 51%),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.03) 0 1px, transparent 1px 40px),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.03) 0 1px, transparent 1px 40px);
  opacity: 0.9;
}

.gcl-route-map-world {
  position: absolute;
  inset: 0;
  transform-origin: center;
  transition: transform 160ms ease;
}

.gcl-route-map-world.is-dragging {
  cursor: grabbing;
  transition: none;
}

.gcl-map-road {
  position: absolute;
  border-radius: 999px;
  background: rgba(235, 226, 161, 0.22);
  box-shadow: 0 0 0 2px rgba(18, 44, 48, 0.5), inset 0 0 0 1px rgba(255, 255, 255, 0.1);
}

.gcl-map-road.is-main {
  left: 5%;
  top: 60%;
  width: 98%;
  height: 22px;
  transform: rotate(-18deg);
}

.gcl-map-road.is-cross {
  left: 44%;
  top: 5%;
  width: 20px;
  height: 92%;
  transform: rotate(24deg);
}

.gcl-map-road.is-loop {
  left: 52%;
  top: 35%;
  width: 210px;
  height: 130px;
  border: 18px solid rgba(235, 226, 161, 0.2);
  background: transparent;
  transform: rotate(-16deg);
}

.gcl-map-districts {
  position: absolute;
  inset: 0;
}

.gcl-map-districts i {
  position: absolute;
  width: 28%;
  height: 20%;
  border: 1px solid rgba(8, 28, 35, 0.38);
  border-radius: 18px;
  background: rgba(91, 139, 82, 0.15);
}

.gcl-map-districts i:nth-child(1) { left: 7%; top: 12%; }
.gcl-map-districts i:nth-child(2) { right: 8%; top: 10%; }
.gcl-map-districts i:nth-child(3) { left: 13%; bottom: 10%; }
.gcl-map-districts i:nth-child(4) { right: 14%; bottom: 15%; }

.gcl-route-line {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  filter: drop-shadow(0 0 9px rgba(255, 211, 36, 0.75));
}

.gcl-route-line path {
  fill: none;
  stroke: #ffd324;
  stroke-width: 1.35;
  stroke-linecap: round;
  stroke-dasharray: 6 3;
  animation: gclRouteDash 1.2s linear infinite;
}

.gcl-route-pin {
  position: absolute;
  z-index: 3;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: #59e2ff;
  box-shadow: 0 0 0 6px rgba(89, 226, 255, 0.18), 0 0 24px rgba(89, 226, 255, 0.8);
}

.gcl-route-pin::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 32px;
  height: 32px;
  border: 1px solid currentColor;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  animation: gclMapPing 1.5s ease-out infinite;
}

.gcl-route-pin b {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 10px);
  min-width: max-content;
  padding: 6px 9px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 6px;
  background: rgba(2, 11, 20, 0.88);
  color: #fff;
  font-size: 11px;
  transform: translateX(-50%);
}

.gcl-route-pin.is-branch {
  background: #ffd324;
  box-shadow: 0 0 0 7px rgba(255, 211, 36, 0.18), 0 0 30px rgba(255, 211, 36, 0.82);
}

.gcl-route-hud {
  position: absolute;
  left: 16px;
  bottom: 16px;
  z-index: 4;
  display: grid;
  gap: 3px;
  min-width: 136px;
  padding: 11px 13px;
  border: 1px solid rgba(89, 226, 255, 0.28);
  border-radius: 8px;
  background: rgba(1, 12, 24, 0.82);
  backdrop-filter: blur(10px);
}

.gcl-route-hud span {
  color: #59e2ff;
  font-size: 10px;
  font-weight: 1000;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.gcl-route-hud strong {
  color: #ffd324;
  font-size: 22px;
}

.gcl-map-controls {
  position: absolute;
  right: 16px;
  bottom: 16px;
  z-index: 4;
  display: grid;
  gap: 8px;
}

.gcl-map-controls button {
  width: 42px;
  height: 42px;
  border: 1px solid rgba(89, 226, 255, 0.28);
  border-radius: 8px;
  background: rgba(1, 12, 24, 0.84);
  color: #fff;
  cursor: pointer;
  font-size: 22px;
}

.gcl-branch-detail {
  display: grid;
  align-content: center;
  gap: 18px;
  padding: clamp(22px, 4vw, 42px);
  background:
    linear-gradient(rgba(89, 226, 255, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(89, 226, 255, 0.045) 1px, transparent 1px),
    rgba(2, 13, 25, 0.78);
  background-size: 34px 34px;
}

.gcl-branch-detail h2 {
  margin: 0;
  font-size: clamp(34px, 5vw, 62px);
  line-height: 0.95;
  text-transform: uppercase;
}

.gcl-branch-detail p {
  margin: 0;
  color: #b9d0e3;
  font-size: 18px;
  line-height: 1.45;
}

.gcl-branch-status-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.gcl-branch-status-grid span,
.gcl-branch-contact-list li {
  padding: 12px;
  border: 1px solid rgba(89, 226, 255, 0.16);
  border-radius: 8px;
  background: rgba(1, 12, 24, 0.64);
}

.gcl-branch-status-grid strong {
  display: block;
  color: #ffd324;
  font-size: 22px;
}

.gcl-branch-status-grid small,
.gcl-branch-contact-list small {
  display: block;
  color: #8fb1c8;
  font-size: 10px;
  font-weight: 1000;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.gcl-branch-contact-list {
  display: grid;
  gap: 8px;
  padding: 0;
  margin: 0;
  list-style: none;
}

.gcl-branch-contact-list strong {
  display: block;
  margin-top: 4px;
  color: #eff8ff;
  word-break: break-word;
}

.gcl-branch-modal-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.gcl-branch-modal .gcl-kicker,
.gcl-branch-modal h2,
.gcl-branch-status-grid strong,
.gcl-route-hud strong,
.gcl-map-controls button,
.gcl-map-marker b {
  font-family: "Orbitron", "Exo 2", "Segoe UI", Arial, sans-serif;
}

.gcl-route-map::before {
  display: none;
}

.gcl-real-map {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: #111315;
}

.gcl-real-map .maplibregl-canvas {
  cursor: url("/assets/images/map-icons/cursor-crosshair.svg") 16 16, crosshair;
  filter: grayscale(1) invert(1) hue-rotate(180deg) contrast(1.22) brightness(0.72) saturate(0.68);
}

.gcl-real-map .maplibregl-canvas:active {
  cursor: move;
}

.gcl-map-vignette {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 50%, transparent 76%, rgba(0, 0, 0, 0.2) 100%),
    linear-gradient(rgba(255, 255, 255, 0.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.022) 1px, transparent 1px);
  background-size: auto, 96px 96px, 96px 96px;
  background-size: auto;
  mix-blend-mode: normal;
}

.gcl-map-marker {
  position: relative;
  width: 34px;
  height: 34px;
  cursor: target;
}

.gcl-map-marker i {
  position: absolute;
  inset: 6px;
  border-radius: 50%;
  background: #ffd324;
  box-shadow: 0 0 0 7px rgba(255, 211, 36, 0.18), 0 0 30px rgba(255, 211, 36, 0.9);
}

.gcl-map-marker::before,
.gcl-map-marker::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid currentColor;
  border-radius: 50%;
  color: #ffd324;
  animation: gclMapPing 1.45s ease-out infinite;
}

.gcl-map-marker::after {
  animation-delay: 0.55s;
}

.gcl-map-marker b {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 10px);
  min-width: max-content;
  padding: 6px 9px;
  border: 1px solid rgba(255, 211, 36, 0.38);
  border-radius: 4px;
  background: rgba(3, 8, 12, 0.86);
  color: #fff;
  font-size: 11px;
  letter-spacing: 0;
  text-transform: uppercase;
  transform: translateX(-50%);
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.44);
}

.gcl-player-marker i {
  inset: 8px;
  background: #4fddff;
  box-shadow: 0 0 0 4px #fff, 0 0 0 8px rgba(79, 221, 255, 0.18), 0 0 26px rgba(79, 221, 255, 0.92);
}

.gcl-player-marker::before,
.gcl-player-marker::after {
  color: #4fddff;
}

.gcl-player-marker i::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 50%;
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 18px solid rgba(255, 255, 255, 0.86);
  transform: translateX(-50%) rotate(var(--gcl-heading, 0deg));
  transform-origin: 50% 100%;
}

.gcl-route-map .maplibregl-control-container,
.gcl-route-map .maplibregl-ctrl-bottom-left,
.gcl-route-map .maplibregl-ctrl-bottom-right,
.gcl-route-map .maplibregl-ctrl-top-left,
.gcl-route-map .maplibregl-ctrl-top-right {
  display: none !important;
}

.gcl-map-controls {
  z-index: 5;
}

.gcl-map-controls button {
  position: relative;
  overflow: hidden;
  width: 54px;
  height: 54px;
  background: rgba(7, 13, 18, 0.82);
  border-color: rgba(220, 226, 214, 0.26);
  color: #e8ece7;
  font-size: 28px;
  line-height: 1;
  backdrop-filter: blur(8px);
}

.gcl-map-controls button:hover {
  border-color: rgba(255, 211, 36, 0.58);
  color: #ffd324;
}

.gcl-map-controls [data-gcl-map-locate] span {
  position: absolute;
  inset: 12px;
  border: 2px solid currentColor;
  border-radius: 50%;
}

.gcl-map-controls [data-gcl-map-locate] span::before,
.gcl-map-controls [data-gcl-map-locate] span::after {
  content: "";
  position: absolute;
  background: currentColor;
}

.gcl-map-controls [data-gcl-map-locate] span::before {
  left: 50%;
  top: -7px;
  width: 2px;
  height: 8px;
  transform: translateX(-50%);
}

.gcl-map-controls [data-gcl-map-locate] span::after {
  left: -7px;
  top: 50%;
  width: 8px;
  height: 2px;
  transform: translateY(-50%);
  box-shadow: 20px 0 0 currentColor;
}

.gcl-map-controls [data-gcl-map-locate].is-loading {
  animation: gclMapLocateSpin 800ms linear infinite;
}

.gcl-map-unavailable {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 8px;
  padding: 24px;
  color: #fff;
  text-align: center;
  background: #111820;
}

.gcl-route-hud {
  z-index: 5;
  background: rgba(5, 9, 12, 0.78);
  border-color: rgba(220, 226, 214, 0.22);
}

.gcl-route-hud small {
  color: #aeb8b1;
  font-size: 11px;
  font-weight: 800;
}

.gcl-branch-detail {
  background:
    linear-gradient(rgba(220, 226, 214, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(220, 226, 214, 0.028) 1px, transparent 1px),
    rgba(5, 10, 15, 0.86);
}

.gcl-branch-status-grid span,
.gcl-branch-contact-list li {
  background: rgba(8, 14, 20, 0.66);
  border-color: rgba(220, 226, 214, 0.14);
}

.gcl-branch-contact-list small,
.gcl-branch-status-grid small {
  color: #58d9ff;
}

.gcl-map-marker {
  width: 46px;
  height: 46px;
}

.gcl-map-marker i {
  position: absolute;
  inset: 0;
  display: block;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.gcl-map-marker i::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #ffd324;
  filter: drop-shadow(0 0 8px rgba(255, 211, 36, 0.95)) drop-shadow(0 0 18px rgba(255, 211, 36, 0.46));
  mask: url("/assets/images/map-icons/branch.svg") center / contain no-repeat;
  -webkit-mask: url("/assets/images/map-icons/branch.svg") center / contain no-repeat;
}

.gcl-player-marker {
  width: 44px;
  height: 44px;
}

.gcl-player-marker i::before {
  inset: 2px;
  background: #ffffff;
  filter: drop-shadow(0 0 7px rgba(255, 255, 255, 0.8)) drop-shadow(0 0 16px rgba(79, 221, 255, 0.68));
  mask: url("/assets/images/map-icons/user.svg") center / contain no-repeat;
  -webkit-mask: url("/assets/images/map-icons/user.svg") center / contain no-repeat;
}

.gcl-player-marker i::after {
  content: "";
  position: absolute;
  inset: 13px;
  border: 0;
  width: auto;
  height: auto;
  background: #4fddff;
  box-shadow: 0 0 0 4px rgba(79, 221, 255, 0.16), 0 0 18px rgba(79, 221, 255, 0.95);
  border-radius: 50%;
  transform: rotate(var(--gcl-heading, 0deg));
}

.gcl-map-marker::before,
.gcl-map-marker::after {
  inset: 4px;
  color: #ffd324;
}

.gcl-player-marker::before,
.gcl-player-marker::after {
  inset: 3px;
  color: #4fddff;
}

.gcl-map-controls [data-gcl-map-locate] span,
.gcl-map-controls [data-gcl-map-compass] span {
  position: absolute;
  inset: 9px;
  display: block;
  border: 0;
  border-radius: 0;
  background: currentColor;
  mask: url("/assets/images/map-icons/user.svg") center / contain no-repeat;
  -webkit-mask: url("/assets/images/map-icons/user.svg") center / contain no-repeat;
}

.gcl-map-controls [data-gcl-map-compass] span {
  inset: 8px;
  mask-image: url("/assets/images/map-icons/compass.svg");
  -webkit-mask-image: url("/assets/images/map-icons/compass.svg");
}

.gcl-map-controls [data-gcl-map-locate] span::before,
.gcl-map-controls [data-gcl-map-locate] span::after {
  display: none;
}

textarea {
  min-height: 110px;
}

.gcl-alert {
  margin-bottom: 18px;
  padding: 14px 16px;
}

.gcl-alert-ok {
  border-color: rgba(46, 224, 144, 0.35);
}

.gcl-alert-warn {
  display: grid;
  gap: 4px;
  margin-bottom: 18px;
  border-color: rgba(255, 211, 36, 0.5);
}

.gcl-alert-warn strong {
  color: #ffd324;
}

.gcl-tournament-card {
  background:
    linear-gradient(180deg, rgba(5, 28, 48, 0.82), rgba(5, 28, 48, 0.98)),
    var(--gcl-event-image);
  background-size: cover;
  background-position: center;
}

.gcl-winner-card {
  border-color: rgba(255, 211, 36, 0.3);
}

.gcl-dashboard-shell {
  display: grid;
  grid-template-columns: 230px minmax(0, 1fr);
  gap: 22px;
}

.gcl-profile-setup-head {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: start;
}

.gcl-profile-setup-head h3 {
  margin: 8px 0;
  font-size: 28px;
}

.gcl-profile-setup-head p {
  margin: 0;
  color: #bfd1e2;
}

.gcl-profile-setup-head strong {
  color: #ffd324;
  font-size: 34px;
}

.gcl-progress {
  height: 10px;
  margin: 16px 0 20px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.32);
}

.gcl-progress span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #2ee090, #ffd324);
  transition: width 180ms ease;
}

.gcl-checklist,
.gcl-todo-list {
  display: grid;
  gap: 10px;
  padding: 0;
  margin: 18px 0 0;
  list-style: none;
}

.gcl-checklist {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.gcl-checklist li,
.gcl-todo-list li {
  padding: 12px;
  border: 1px solid rgba(89, 173, 228, 0.2);
  border-radius: 8px;
  color: #bfd1e2;
  background: rgba(2, 18, 31, 0.48);
}

.gcl-checklist li.is-done,
.gcl-todo-list li.is-done {
  color: #fff;
  border-color: rgba(46, 224, 144, 0.42);
  background: rgba(46, 224, 144, 0.12);
}

.gcl-todo-list li strong,
.gcl-todo-list li span {
  display: block;
}

.gcl-todo-list li span {
  margin-top: 4px;
  color: #9ec3df;
}

.gcl-admin-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(320px, 0.75fr);
  gap: 18px;
}

.gcl-dashboard-menu {
  display: grid;
  gap: 8px;
  align-content: start;
}

.gcl-dashboard-menu a {
  color: #fff;
  text-decoration: none;
  padding: 14px;
  border: 1px solid rgba(89, 173, 228, 0.22);
  border-radius: 8px;
  background: rgba(7, 31, 52, 0.8);
  font-weight: 900;
}

.gcl-dashboard-menu a.is-active {
  color: #ffd324;
  border-color: rgba(255, 211, 36, 0.38);
}

.gcl-empty {
  padding: 34px;
}

.gcl-policy-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.gcl-policy-card {
  min-height: 170px;
}

.gcl-policy-card h3 {
  margin-top: 0;
}

.gcl-policy-blog {
  width: min(920px, 100%);
  margin: 0 auto;
  padding: clamp(18px, 4vw, 42px) 0;
}

.gcl-policy-blog header {
  padding-bottom: 28px;
  border-bottom: 1px solid rgba(89, 226, 255, 0.22);
  margin-bottom: 28px;
}

.gcl-policy-blog header p {
  margin: 0 0 12px;
  color: #59e2ff;
  font-size: 12px;
  font-weight: 1000;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.gcl-policy-blog h1 {
  max-width: 760px;
  margin: 0 0 16px;
  font-size: clamp(42px, 6vw, 76px);
  line-height: 0.95;
  text-transform: uppercase;
}

.gcl-policy-blog header span {
  display: block;
  max-width: 780px;
  color: #c4d7e6;
  font-size: clamp(16px, 2vw, 20px);
  line-height: 1.65;
}

.gcl-policy-blog section {
  padding: 24px 0;
  border-bottom: 1px solid rgba(148, 190, 221, 0.16);
}

.gcl-policy-blog section:last-child {
  border-bottom: 0;
}

.gcl-policy-blog h2 {
  margin: 0 0 10px;
  color: #ffffff;
  font-size: clamp(22px, 2.4vw, 32px);
  line-height: 1.08;
}

.gcl-policy-blog section p {
  max-width: 820px;
  margin: 0;
  color: #b9ccda;
  font-size: 16px;
  line-height: 1.78;
}

.gcl-sitemap-links {
  display: grid;
  gap: 10px;
}

.gcl-sitemap-links a {
  color: #d9efff;
  font-weight: 900;
  text-decoration: none;
}

.gcl-sitemap-links a:hover {
  color: #ffd324;
}

.gcl-site-footer {
  border-top: 1px solid rgba(89, 173, 228, 0.18);
  background:
    linear-gradient(rgba(23, 91, 132, 0.12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(23, 91, 132, 0.12) 1px, transparent 1px),
    radial-gradient(circle at 12% 0, rgba(57, 226, 255, 0.13), transparent 28%),
    #041624;
  background-size: 76px 76px, 76px 76px, auto;
}

.gcl-site-footer-grid {
  display: grid;
  grid-template-columns: minmax(260px, 1.3fr) repeat(auto-fit, minmax(140px, 0.7fr));
  gap: 28px;
  padding: 38px 0 28px;
  border-bottom: 1px solid rgba(89, 173, 228, 0.18);
}

.gcl-footer-brand {
  display: grid;
  gap: 14px;
  align-content: start;
}

.gcl-footer-brand img {
  width: 142px;
  object-fit: contain;
}

.gcl-footer-brand p {
  max-width: 420px;
  margin: 0;
  color: #aecaDE;
  line-height: 1.6;
}

.gcl-footer-column {
  display: grid;
  gap: 9px;
  align-content: start;
}

.gcl-footer-column strong {
  margin-bottom: 6px;
  color: #fff;
  font-size: 14px;
  text-transform: uppercase;
}

.gcl-footer-column a,
.gcl-footer-column span {
  color: #bfe6ff;
  text-decoration: none;
  font-weight: 800;
}

.gcl-footer-column a:hover {
  color: #ffd324;
}

.gcl-footer-branch span {
  display: grid;
  gap: 3px;
}

.gcl-footer-branch small {
  color: #7fa7c4;
  font-weight: 800;
}

.gcl-site-footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 18px 0 26px;
  color: #8faec7;
}

.gcl-site-footer-bottom > div,
.gcl-footer-socials {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.gcl-site-footer-bottom a {
  color: #d9efff;
  text-decoration: none;
  font-weight: 800;
}

.gcl-site-footer-bottom p {
  margin: 0;
}

.gcl-footer-socials a {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(89, 226, 255, 0.28);
  border-radius: 8px;
  background: rgba(3, 21, 36, 0.68);
}

.gcl-modal[hidden],
[hidden] {
  display: none !important;
}

.gcl-root .gcl-modal,
.gcl-modal {
  position: fixed;
  inset: 0 !important;
  z-index: 30000 !important;
  display: grid;
  place-items: center;
  min-height: 100dvh;
  padding: 20px;
  background: transparent;
  isolation: isolate;
}

.gcl-root .gcl-modal-backdrop,
.gcl-modal-backdrop {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: rgba(0, 7, 14, 0.78);
  backdrop-filter: blur(10px);
}

.gcl-root .gcl-modal-panel,
.gcl-modal-panel {
  position: relative;
  z-index: 1;
  width: min(460px, 100%);
  display: grid;
  gap: 14px;
  padding: 26px;
  border-radius: 8px;
  border: 1px solid rgba(89, 173, 228, 0.32);
  background: linear-gradient(180deg, rgba(6, 31, 52, 0.98), rgba(2, 14, 26, 0.98));
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.62), 0 0 0 1px rgba(255, 255, 255, 0.04) inset;
}

.gcl-modal-panel label {
  display: grid;
  gap: 8px;
  color: #aecaDE;
}

.gcl-modal-panel .gcl-login-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 2px 0;
  color: #7f9ab2;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.gcl-modal-panel .gcl-login-divider::before,
.gcl-modal-panel .gcl-login-divider::after {
  content: "";
  height: 1px;
  flex: 1;
  background: rgba(120, 160, 220, .22);
}

.gcl-modal-close {
  position: absolute;
  top: 10px;
  right: 12px;
  border: 0;
  background: transparent;
  color: #fff;
  font-size: 28px;
  cursor: pointer;
}

.gcl-root .gcl-toast-stack,
.gcl-toast-stack {
  position: fixed;
  top: 12px;
  right: 18px;
  bottom: auto;
  left: auto;
  z-index: 2147483000;
  display: grid;
  gap: 10px;
  width: min(380px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  pointer-events: none;
}

.gcl-root .gcl-toast,
.gcl-toast {
  position: relative;
  width: auto;
  min-height: 0;
  max-height: none;
  overflow: hidden;
  padding: 14px 16px 14px 52px;
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(5, 26, 45, 0.98), rgba(2, 13, 25, 0.98)),
    repeating-linear-gradient(90deg, rgba(89, 226, 255, 0.08) 0 1px, transparent 1px 18px);
  border: 1px solid rgba(89, 226, 255, 0.42);
  color: #fff;
  box-shadow:
    0 18px 44px rgba(0, 0, 0, 0.42),
    0 0 0 1px rgba(255, 255, 255, 0.03) inset,
    0 0 28px rgba(0, 194, 255, 0.14);
  animation: gclVpsToastIn 180ms ease-out both;
  pointer-events: auto;
}

.gcl-root .gcl-toast::before,
.gcl-toast::before {
  content: "!";
  position: absolute;
  left: 14px;
  top: 50%;
  width: 26px;
  height: 26px;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: #ff3b7f;
  color: #fff;
  font-weight: 1000;
  box-shadow: 0 0 20px rgba(255, 59, 127, 0.45);
}

.gcl-root .gcl-toast::after,
.gcl-toast::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 2px;
  background: linear-gradient(90deg, #ff3b7f, #59e2ff);
}

.gcl-root .gcl-toast strong,
.gcl-toast strong {
  display: block;
  margin: 0 0 4px;
  color: #fff;
  font-size: 14px;
  line-height: 1.2;
  font-weight: 1000;
  text-transform: uppercase;
  letter-spacing: 0;
}

.gcl-root .gcl-toast span,
.gcl-toast span {
  display: block;
  color: #bfe6ff;
  font-size: 13px;
  line-height: 1.35;
}

.gcl-root .gcl-toast.is-ok,
.gcl-toast.is-ok {
  border-color: rgba(46, 224, 144, 0.58);
  box-shadow:
    0 18px 44px rgba(0, 0, 0, 0.42),
    0 0 28px rgba(46, 224, 144, 0.16);
}

.gcl-root .gcl-toast.is-ok::before,
.gcl-toast.is-ok::before {
  content: "✓";
  background: #2ee090;
  color: #052016;
  box-shadow: 0 0 20px rgba(46, 224, 144, 0.45);
}

.gcl-root .gcl-toast.is-ok::after,
.gcl-toast.is-ok::after {
  background: linear-gradient(90deg, #2ee090, #ffd324);
}

.gcl-root .gcl-toast.is-error,
.gcl-toast.is-error {
  border-color: rgba(255, 59, 127, 0.68);
}

.gcl-root .gcl-toast.is-leaving,
.gcl-toast.is-leaving {
  animation: gclVpsToastOut 220ms ease-in both;
}

@keyframes gclVpsToastIn {
  from {
    opacity: 0;
    transform: translateX(18px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

@keyframes gclVpsToastOut {
  to {
    opacity: 0;
    transform: translateX(18px) scale(0.98);
  }
}

.gcl-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}

.gcl-root {
  font-size: 15px;
}

.gcl-section {
  padding: 42px 0;
}

.gcl-landing-hero {
  min-height: 390px;
  gap: 24px;
  padding: clamp(20px, 3vw, 42px);
}

.gcl-landing-copy h1 {
  max-width: 620px;
  font-size: clamp(42px, 4.9vw, 72px);
  line-height: 0.95;
}

.gcl-landing-copy p {
  max-width: 610px;
  font-size: 16px;
}

.gcl-section-title h2,
.gcl-heading-actions h1 {
  font-size: clamp(30px, 3.1vw, 48px);
  line-height: 1;
}

.gcl-card h2,
.gcl-panel h2 {
  font-size: 24px;
}

.gcl-card h3,
.gcl-panel h3 {
  font-size: 18px;
}

.gcl-card p,
.gcl-panel p,
.gcl-empty p {
  font-size: 14px;
  line-height: 1.5;
}

.gcl-landing-stats strong,
.gcl-stat-card strong,
.gcl-reserve-metrics strong {
  font-size: 24px;
}

@media (max-width: 1240px) {
  .gcl-site-bg-slider img {
    object-position: center center;
    transform-origin: center center;
  }

  .gcl-site-bg-mesh {
    background-size: 80px 80px;
  }

  .gcl-site-footer-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .gcl-footer-brand {
    grid-column: 1 / -1;
  }

  .gcl-root .gcl-vps-page .gcl-grid-4,
  .gcl-grid-4 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .gcl-game-cover-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .gcl-policy-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .gcl-earn-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .gcl-landing-hero {
    grid-template-columns: 1fr 0.75fr;
  }

  .gcl-landing-live {
    grid-column: 1 / -1;
  }

  .gcl-main-nav {
    display: none;
  }

  .gcl-overflow-menu {
    display: block;
  }

  .gcl-overflow-panel .gcl-menu-column {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding: 6px 0 10px;
  }

  .gcl-reserve-band,
  .gcl-admin-layout,
  .gcl-reserve-form,
  .gcl-root .gcl-vps-page .gcl-reserve-band,
  .gcl-root .gcl-vps-page .gcl-admin-layout,
  .gcl-root .gcl-vps-page .gcl-reserve-form {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .gcl-smart-tip,
  .gcl-smart-tip::before,
  .gcl-smart-tip.is-hiding,
  .gcl-branch-modal-panel,
  .gcl-root .gcl-vps-page [data-gcl-game-card],
  .gcl-root .gcl-vps-page .gcl-package-card,
  .gcl-root .gcl-vps-page .gcl-card {
    animation: none !important;
    transition: none !important;
  }
}

/* Fresh-library draggable carousel. */
.gcl-home-page .gcl-new-release-carousel {
  --gcl-carousel-gap: 12px;
  overflow: hidden;
  max-width: 100%;
}

.gcl-home-page .gcl-new-release-carousel .gcl-new-releases-row {
  display: flex !important;
  grid-template-columns: none !important;
  width: max-content !important;
  max-width: none !important;
  gap: var(--gcl-carousel-gap, 12px) !important;
}

.gcl-home-page .gcl-new-release-carousel .gcl-new-release-card {
  width: var(--gcl-carousel-card-width) !important;
  min-width: var(--gcl-carousel-card-width) !important;
  max-width: var(--gcl-carousel-card-width) !important;
  flex: 0 0 var(--gcl-carousel-card-width) !important;
}

@media (max-width: 760px) {
  .gcl-home-page .gcl-new-release-carousel {
    --gcl-carousel-gap: 8px;
  }
}

/* Compact package cards inside the animated Home carousel. */
.gcl-home-page .gcl-package-carousel .game-cover-wrap {
  height: 108px;
  margin: 7px 7px 0;
}

.gcl-home-page .gcl-package-carousel .device-icon {
  left: 18px;
  width: 40px;
  height: 37px;
}

.gcl-home-page .gcl-package-carousel .price-badge {
  right: -9px;
  min-width: 126px;
  padding: 6px 17px 7px 14px;
  border-radius: 999px 0 0 999px;
  font-size: 18px;
}

.gcl-home-page .gcl-package-carousel .package-body {
  position: relative;
  padding: 12px 15px 15px;
}

.gcl-home-page .gcl-package-carousel .package-title {
  font-size: clamp(18px, 1.8vw, 23px);
  letter-spacing: -1px;
}

.gcl-home-page .gcl-package-carousel .package-device {
  margin-top: 2px;
  font-size: 8px;
}

.gcl-home-page .gcl-package-carousel .package-description {
  margin: 3px auto 10px;
  font-size: 10px;
  line-height: 1.15;
}

.gcl-home-page .gcl-package-carousel .package-stats {
  gap: 8px;
  margin-top: 7px;
}

.gcl-home-page .gcl-package-carousel .stat-label {
  font-size: 8px;
}

.gcl-home-page .gcl-package-carousel .stat strong {
  font-size: 13px;
  white-space: nowrap;
}

.gcl-home-page .gcl-package-carousel .reveal-button {
  position: absolute;
  z-index: 8;
  right: 12px;
  bottom: 10px;
  left: 12px;
  width: auto;
  height: 36px;
  margin: 0;
  opacity: 0;
  pointer-events: none;
  transform: translateY(12px);
  background: rgba(3, 18, 29, .94);
  box-shadow: 0 -10px 28px rgba(3, 10, 18, .8);
}

.gcl-home-page .gcl-package-carousel .game-package-card:hover .reveal-button,
.gcl-home-page .gcl-package-carousel .game-package-card:focus-within .reveal-button {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

@media (hover: none), (pointer: coarse) {
  .gcl-home-page .gcl-package-carousel .reveal-button {
    position: static;
    width: 100%;
    height: 36px;
    margin-top: 12px;
    opacity: 1;
    pointer-events: auto;
    transform: none;
  }
}

/* The cinematic library spotlight is desktop-only. */
@media (max-width: 900px) {
  .gcl-home-page .gcl-home-featured {
    display: none !important;
  }
}

/* Home-only draggable, card-snapping infinite carousel overrides. */
.gcl-home-page .gcl-home-carousel {
  overflow: hidden;
  max-width: 100%;
}

.gcl-home-page .gcl-home-carousel-viewport {
  overflow: hidden;
  touch-action: pan-y;
  cursor: grab;
}

.gcl-home-page .gcl-home-carousel.is-dragging .gcl-home-carousel-viewport {
  cursor: grabbing;
}

.gcl-home-page .gcl-game-carousel .gcl-game-cover-grid,
.gcl-home-page .gcl-package-carousel .gcl-package-grid {
  display: flex !important;
  grid-template-columns: none !important;
  width: max-content !important;
  max-width: none !important;
  gap: var(--gcl-carousel-gap, 12px) !important;
}

.gcl-home-page .gcl-game-carousel .gcl-game-cover-card {
  width: var(--gcl-carousel-card-width) !important;
  min-width: var(--gcl-carousel-card-width) !important;
  max-width: var(--gcl-carousel-card-width) !important;
  flex: 0 0 var(--gcl-carousel-card-width) !important;
  aspect-ratio: 4 / 5 !important;
}

.gcl-home-page .gcl-package-carousel .game-package-card {
  width: var(--gcl-carousel-card-width) !important;
  min-width: var(--gcl-carousel-card-width) !important;
  max-width: var(--gcl-carousel-card-width) !important;
  flex: 0 0 var(--gcl-carousel-card-width) !important;
}

@media (max-width: 760px) {
  .gcl-home-page .gcl-game-carousel {
    --gcl-carousel-visible: 2;
    --gcl-carousel-gap: 8px;
  }

  .gcl-home-page .gcl-package-carousel {
    --gcl-carousel-visible: 1;
    --gcl-carousel-gap: 10px;
  }
}

/* Final responsive layout system for Home, Games and Packages. */
.gcl-home-page *,
.gcl-vps-page .gcl-package-grid > *,
.gcl-vps-page .gcl-game-cover-grid > * {
  min-width: 0;
}

.gcl-home-page .gcl-game-cover-grid,
.gcl-home-games-grid .gcl-game-cover-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.gcl-home-packages-grid .gcl-package-grid,
.gcl-vps-page > .gcl-section .gcl-package-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.gcl-home-packages-grid .game-package-card,
.gcl-vps-page .gcl-package-grid .game-package-card {
  width: 100% !important;
  max-width: none;
}

@media (max-width: 1100px) {
  .gcl-home-page .gcl-game-cover-grid,
  .gcl-home-games-grid .gcl-game-cover-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .gcl-home-packages-grid .gcl-package-grid,
  .gcl-vps-page > .gcl-section .gcl-package-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .gcl-home-page .gcl-landing-hero {
    min-height: clamp(340px, 48vw, 500px);
    padding: clamp(22px, 4vw, 38px);
  }

  .gcl-home-page .gcl-landing-copy h1 {
    font-size: clamp(38px, 6vw, 62px);
  }
}

@media (max-width: 820px) {
  .gcl-home-page .gcl-game-cover-grid,
  .gcl-home-games-grid .gcl-game-cover-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
  }

  .gcl-home-page .gcl-home-stats-inline {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .gcl-library-spotlight-layout {
    grid-template-columns: 1fr;
  }

  .gcl-spotlight-main {
    height: clamp(220px, 52vw, 300px);
    min-height: 0;
  }

  .gcl-spotlight-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  body .gcl-root .gcl-home-page .gcl-section {
    padding-block: 22px !important;
  }

  body .gcl-root .gcl-home-page .gcl-shell,
  body .gcl-root .gcl-vps-page > .gcl-section > .gcl-shell {
    width: calc(100% - 24px) !important;
    max-width: calc(100% - 24px) !important;
    margin-inline: auto !important;
  }

  body .gcl-root .gcl-home-page .gcl-landing-hero {
    grid-template-columns: minmax(0, 1fr) !important;
    min-height: 300px !important;
    padding: 18px !important;
  }

  .gcl-home-page .gcl-landing-copy h1 {
    max-width: 14ch;
    font-size: clamp(27px, 9vw, 40px) !important;
    overflow-wrap: anywhere;
  }

  .gcl-home-page .gcl-landing-copy p {
    max-width: 42ch;
    font-size: clamp(11px, 3.4vw, 14px) !important;
  }

  .gcl-home-page .gcl-home-stats-inline {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
    margin-top: 14px;
  }

  .gcl-home-page .gcl-home-stats-inline .gcl-stat-card {
    min-height: 58px;
    padding: 10px;
  }

  .gcl-home-page .gcl-home-stats-inline .gcl-stat-card span {
    font-size: 9px;
  }

  .gcl-home-page .gcl-home-stats-inline .gcl-stat-card strong {
    font-size: clamp(17px, 6vw, 22px);
  }

  .gcl-home-page .gcl-game-cover-grid,
  .gcl-home-games-grid .gcl-game-cover-grid,
  .gcl-vps-page .gcl-game-cover-grid,
  .gcl-vps-page .gcl-game-cover-grid.is-catalog {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  .gcl-home-games-grid .gcl-game-cover-card,
  .gcl-vps-page .gcl-game-cover-card {
    min-height: 0 !important;
    aspect-ratio: 3 / 4;
  }

  .gcl-vps-page .gcl-game-cover-body {
    gap: 4px;
    padding: 32px 8px 8px;
  }

  .gcl-vps-page .gcl-game-cover-body h3 {
    font-size: clamp(11px, 3.7vw, 14px);
    line-height: 1.08;
  }

  .gcl-vps-page .gcl-game-cover-body span,
  .gcl-vps-page .gcl-game-cover-body small {
    font-size: 8px;
  }

  .gcl-home-packages-grid .gcl-package-grid,
  .gcl-vps-page > .gcl-section .gcl-package-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 12px;
  }

  .gcl-home-packages-grid .game-package-card,
  .gcl-vps-page .gcl-package-grid .game-package-card {
    width: 100% !important;
  }

  .game-package-card .game-cover-wrap {
    height: 118px;
  }

  .game-package-card .device-icon {
    left: 18px;
    width: 44px;
    height: 42px;
  }

  .game-package-card .price-badge {
    right: 8px;
    min-width: 112px;
    padding: 7px 12px;
    font-size: 18px;
  }

  .game-package-card .package-body {
    padding: 14px 16px 18px;
  }

  .game-package-card .package-title {
    font-size: clamp(20px, 7vw, 26px);
  }

  .game-package-card .package-description {
    margin-bottom: 12px;
    font-size: 12px;
  }

  .game-package-card .package-stats {
    gap: 7px;
  }

  .game-package-card .stat-label {
    font-size: 9px;
  }

  .game-package-card .stat strong {
    font-size: 14px;
  }

  .gcl-library-spotlight-head,
  .gcl-new-releases-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .gcl-library-spotlight-head h2,
  .gcl-new-releases-head h2,
  .gcl-home-page .gcl-section-title h2 {
    font-size: clamp(23px, 8vw, 32px) !important;
    overflow-wrap: anywhere;
  }

  .gcl-spotlight-main {
    height: clamp(190px, 57vw, 250px);
  }

  .gcl-spotlight-main-copy {
    max-width: 92%;
    padding: 14px;
  }

  .gcl-spotlight-main-copy strong {
    font-size: clamp(22px, 8vw, 32px);
    line-height: .95;
  }

  .gcl-spotlight-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .gcl-spotlight-card {
    display: block;
    height: auto;
    min-height: 0;
    aspect-ratio: 4 / 3;
    padding: 0;
  }

  .gcl-spotlight-card > .gcl-spotlight-card-art {
    position: absolute;
    inset: 0;
  }

  .gcl-spotlight-card > span:last-child {
    position: absolute;
    inset: auto 0 0;
    z-index: 2;
    padding: 28px 9px 9px;
    background: linear-gradient(180deg, transparent, rgba(4,8,14,.92));
  }

  .gcl-spotlight-card strong {
    display: block;
    font-size: clamp(12px, 4vw, 17px);
    line-height: 1.05;
    white-space: normal;
  }

  .gcl-spotlight-card em {
    display: none;
  }

  .gcl-new-releases-row {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 9px;
  }

  .gcl-new-release-card strong {
    font-size: 11px;
  }

  .gcl-action-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 380px) {
  body .gcl-root .gcl-home-page .gcl-shell,
  body .gcl-root .gcl-vps-page > .gcl-section > .gcl-shell {
    width: calc(100% - 16px) !important;
    max-width: calc(100% - 16px) !important;
  }

  .gcl-home-page .gcl-game-cover-grid,
  .gcl-home-games-grid .gcl-game-cover-grid,
  .gcl-vps-page .gcl-game-cover-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px !important;
  }

  .gcl-home-page .gcl-home-stats-inline {
    gap: 5px;
  }

  .gcl-spotlight-grid,
  .gcl-new-releases-row {
    gap: 6px;
  }

  .gcl-action-row .gcl-button {
    font-size: 9px !important;
    padding-inline: 5px !important;
  }
}

/* 2026 arena header, game pulse, and cursor-reactive mosaic layer. */
.gcl-site-header {
  background:
    linear-gradient(90deg, rgba(86, 43, 255, .1), transparent 26%, transparent 74%, rgba(0, 229, 255, .1)),
    linear-gradient(180deg, rgba(3, 14, 29, .96), rgba(2, 9, 20, .94));
  border-bottom-color: rgba(81, 226, 255, .3);
  box-shadow: 0 18px 60px rgba(0, 0, 0, .34), 0 1px 28px rgba(67, 211, 255, .08);
}

.gcl-site-header::after {
  background: linear-gradient(90deg, transparent 4%, #7d43ff 22%, #35dfff 50%, #ffd324 78%, transparent 96%);
  bottom: -1px;
  box-shadow: 0 0 20px rgba(53, 223, 255, .48);
  content: "";
  height: 1px;
  left: 0;
  opacity: .8;
  pointer-events: none;
  position: absolute;
  right: 0;
}

.gcl-site-brand {
  align-items: center;
  background: transparent;
  border: 0;
  clip-path: none;
  display: flex;
  min-height: 58px;
  padding: 0;
}

.gcl-site-brand:hover {
  border-color: rgba(255, 211, 36, .48);
  filter: drop-shadow(0 0 16px rgba(53, 223, 255, .2));
}

.gcl-main-nav {
  background: transparent;
  border: 0;
  border-radius: 0;
  gap: 2px;
  padding-inline: 0;
}

.gcl-nav-item > a {
  min-height: 56px;
  padding: 18px 15px;
}

.gcl-nav-item > a:hover,
.gcl-nav-item > a.is-active {
  background: transparent;
  color: #fff;
  text-shadow: 0 0 16px rgba(80, 225, 255, .42);
}

.gcl-main-nav .gcl-mega-menu {
  border-radius: 14px;
  clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 22px 100%, 0 calc(100% - 22px));
}

.gcl-route-map.has-map-warning::after {
  background: rgba(3, 13, 25, .88);
  border: 1px solid rgba(255, 211, 36, .36);
  bottom: 12px;
  color: #ffd324;
  content: "Map tiles are reconnecting · Open Maps is ready";
  font-size: 11px;
  left: 12px;
  padding: 8px 10px;
  position: absolute;
  z-index: 8;
}

@media (max-width: 760px) {
  .gcl-site-brand { background: transparent; border: 0; clip-path: none; padding: 0; }
}

/* Keep every scroll area usable without showing browser chrome. */
html,
body,
.gcl-root,
.gcl-root * {
  scrollbar-width: none !important;
  -ms-overflow-style: none;
}

html::-webkit-scrollbar,
body::-webkit-scrollbar,
.gcl-root::-webkit-scrollbar,
.gcl-root *::-webkit-scrollbar {
  display: none !important;
  height: 0 !important;
  width: 0 !important;
}

@media (max-width: 620px) {
  .gcl-rank-table-wrap,
  .gcl-home-rankings .gcl-rank-table-wrap.is-home-board,
  .gcl-rank-arena-page .gcl-rank-table-wrap {
    margin-inline: 0;
    overflow: visible;
    padding-inline: 0;
    width: 100%;
  }

  .gcl-rank-table:not(.is-game) {
    min-width: 0 !important;
  }

  .gcl-rank-table:not(.is-game) .is-head {
    display: none !important;
  }

  .gcl-rank-table:not(.is-game) > div:not(.is-head) {
    border: 1px solid rgba(89, 226, 255, .14);
    border-radius: 10px;
    display: grid;
    gap: 9px 12px;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    margin: 10px 0;
    min-height: 0;
    padding: 13px !important;
  }

  .gcl-rank-table:not(.is-game) > div:not(.is-head) span {
    display: flex;
    gap: 8px;
    justify-content: space-between;
    min-width: 0;
  }

  .gcl-rank-table:not(.is-game) > div:not(.is-head) span::before {
    color: rgba(220, 231, 247, .56);
    content: attr(data-label);
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
  }

  .gcl-rank-table:not(.is-game) > div:not(.is-head) span:nth-child(2) {
    grid-column: 1 / -1;
    justify-content: flex-start;
  }

  .gcl-rank-table:not(.is-game) > div:not(.is-head) span:nth-child(2)::before {
    display: none;
  }

  .gcl-rank-table-head,
  .gcl-leaderboard-controls {
    min-width: 0;
    width: 100%;
  }

  .gcl-video-table-row,
  .gcl-video-table-head {
    min-width: 0 !important;
  }
}

@media (max-width: 720px) {
  .gcl-reward-hero,
  .gcl-reward-history-row {
    align-items: stretch;
    flex-direction: column;
  }

  .gcl-station-reward-hero,
  .gcl-cod4-reward-hero {
    grid-template-columns: 1fr;
  }

  .gcl-station-reward-stats,
  .gcl-cod4-reward-stats {
    grid-template-columns: 1fr;
  }

  .gcl-station-reward-stats strong,
  .gcl-cod4-reward-stats strong {
    min-height: 84px;
  }

  .gcl-station-rules-table div,
  .gcl-cod4-rules-table div {
    align-items: start;
    grid-template-columns: 1fr;
  }

  .gcl-root {
    --gcl-header-height: 106px;
  }

  .gcl-modern-landing {
    min-height: calc(100vh - 106px);
  }

  .gcl-site-bg-slider img {
    height: 100%;
    min-width: 100%;
    object-fit: cover;
    object-position: center center;
  }

  .gcl-site-bg-mesh {
    background-size: 64px 64px;
  }

  .gcl-shell {
    width: min(100% - 24px, 1380px);
  }

  .gcl-site-header-inner {
    min-height: 76px;
    gap: 10px;
  }

  .gcl-header-ticker {
    height: 30px;
  }

  .gcl-header-ticker-track {
    gap: 10px;
    padding-left: 14px;
    animation-duration: 28s;
  }

  .gcl-header-ticker a {
    gap: 6px;
    font-size: 10px;
  }

  .gcl-site-brand img {
    width: 110px;
  }

  .gcl-signin-text {
    font-size: 12px;
  }

  .gcl-overflow-menu {
    position: static;
  }

  .gcl-overflow-panel {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    max-height: none;
  }

  .gcl-root .gcl-vps-page .gcl-grid-4,
  .gcl-root .gcl-vps-page .gcl-grid-3,
  .gcl-grid-4,
  .gcl-grid-3,
  .gcl-login-fields,
  .gcl-dashboard-shell,
  .gcl-root .gcl-vps-page .gcl-login-fields,
  .gcl-root .gcl-vps-page .gcl-dashboard-shell {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .gcl-game-cover-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
  }

  .gcl-policy-grid {
    grid-template-columns: 1fr;
  }

  .gcl-game-toolbar,
  .gcl-reserve-band,
  .gcl-reserve-form,
  .gcl-root .gcl-vps-page .gcl-game-toolbar,
  .gcl-root .gcl-vps-page .gcl-reserve-band,
  .gcl-root .gcl-vps-page .gcl-reserve-form {
    grid-template-columns: 1fr;
  }

  .gcl-checklist,
  .gcl-root .gcl-vps-page .gcl-checklist {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .gcl-dashboard-menu,
  .gcl-dashboard-main,
  .gcl-login-fields .gcl-wide,
  .gcl-root .gcl-vps-page .gcl-dashboard-menu,
  .gcl-root .gcl-vps-page .gcl-dashboard-main,
  .gcl-root .gcl-vps-page .gcl-login-fields .gcl-wide {
    grid-column: 1 / -1;
  }

  .gcl-landing-hero {
    min-height: auto;
    grid-template-columns: 1fr;
    padding: 18px;
  }

  .gcl-landing-copy h1 {
    font-size: 38px;
  }

  .gcl-dashboard-profile-hero,
  .gcl-profile-hero-content {
    align-items: flex-start;
    flex-direction: column;
  }

  .gcl-profile-banner-edit {
    width: 100%;
  }

  .gcl-heading-actions,
  .gcl-site-footer-bottom {
    align-items: flex-start;
    flex-direction: column;
  }

  .gcl-earn-metrics,
  .gcl-earn-steps {
    grid-template-columns: 1fr;
  }

  .gcl-earn-step {
    min-height: 0;
  }

  .gcl-ranking-list {
    grid-template-columns: 1fr;
  }

  .gcl-ranking-row {
    grid-template-columns: 44px 38px minmax(0, 1fr);
  }

  .gcl-ranking-row b {
    grid-column: 3;
  }

  .gcl-site-footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .gcl-cover-only-card {
    min-height: 150px;
  }

  .gcl-game-cover-body h3 {
    font-size: 13px;
  }

  .gcl-branch-modal {
    padding: 10px;
  }

  .gcl-branch-modal-panel {
    max-height: calc(100vh - 20px);
    grid-template-columns: 1fr;
    overflow: auto;
  }

  .gcl-route-map {
    min-height: 340px;
  }

  .gcl-branch-detail {
    align-content: start;
    padding: 22px;
  }

  .gcl-branch-status-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 440px) {
  .gcl-site-footer-grid {
    grid-template-columns: 1fr;
  }

  .gcl-game-cover-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .gcl-root .gcl-vps-page .gcl-grid-4,
  .gcl-root .gcl-vps-page .gcl-grid-3,
  .gcl-grid-4,
  .gcl-grid-3,
  .gcl-login-fields,
  .gcl-dashboard-shell,
  .gcl-checklist,
  .gcl-root .gcl-vps-page .gcl-login-fields,
  .gcl-root .gcl-vps-page .gcl-dashboard-shell,
  .gcl-root .gcl-vps-page .gcl-checklist {
    grid-template-columns: 1fr;
  }

  .gcl-site-actions {
    gap: 6px;
  }

  .gcl-site-login,
  .gcl-site-menu {
    min-height: 42px;
    padding: 0 12px;
  }
}

.gcl-root .gcl-account-avatar.is-photo,
.gcl-root [data-gcl-account-avatar].is-photo {
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.gcl-root[data-gcl-page="dashboard"] .gcl-dashboard-section {
  height: calc(100vh - var(--gcl-header-height, 88px));
  min-height: calc(100vh - var(--gcl-header-height, 88px));
  margin: 0;
  overflow: hidden;
  padding: 0 !important;
}

.gcl-root[data-gcl-page="dashboard"] .gcl-dashboard-section > .gcl-shell {
  height: 100%;
  min-height: 0;
  padding: 0;
}

.gcl-root[data-gcl-page="dashboard"] .gcl-app-window {
  height: 100%;
  min-height: 0;
  grid-template-columns: 50px 190px minmax(0, 1fr) 260px;
  overflow: hidden;
}

.gcl-root[data-gcl-page="dashboard"] .gcl-app-window[data-gcl-active-view="gcl-dashboard-videos"] {
  grid-template-columns: 50px 190px minmax(0, 1fr);
}

.gcl-root[data-gcl-page="dashboard"] .gcl-app-window[data-gcl-active-view="gcl-dashboard-videos"] .gcl-right-panel {
  display: none;
}

.gcl-root[data-gcl-page="dashboard"] .gcl-icon-rail,
.gcl-root[data-gcl-page="dashboard"] .gcl-side-nav,
.gcl-root[data-gcl-page="dashboard"] .gcl-right-panel,
.gcl-root[data-gcl-page="dashboard"] .gcl-dashboard-main {
  height: 100%;
  min-height: 0;
}

.gcl-root[data-gcl-page="dashboard"] .gcl-side-nav,
.gcl-root[data-gcl-page="dashboard"] .gcl-right-panel,
.gcl-root[data-gcl-page="dashboard"] .gcl-dashboard-main {
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.gcl-root[data-gcl-page="dashboard"] .gcl-icon-rail {
  padding: 12px 7px;
}

.gcl-root[data-gcl-page="dashboard"] .gcl-side-nav {
  padding: 18px 18px 14px;
}

.gcl-root[data-gcl-page="dashboard"] .gcl-right-panel {
  padding: 18px 20px;
}

.gcl-root[data-gcl-page="dashboard"] .gcl-right-panel .gcl-side-widget {
  padding: 4px 0 18px;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.gcl-root[data-gcl-page="dashboard"] .gcl-right-panel .gcl-side-widget + .gcl-side-widget {
  margin-top: 14px;
  padding-top: 18px;
  border-top: 1px solid rgba(94, 151, 207, 0.16);
}

.gcl-root[data-gcl-page="dashboard"] .gcl-dashboard-main {
  padding: 0 16px 16px;
}

.gcl-root[data-gcl-page="dashboard"] .gcl-dashboard-view {
  padding-top: 0;
}

.gcl-root[data-gcl-page="dashboard"] .gcl-dashboard-hub {
  padding-top: 0;
}

.gcl-root[data-gcl-page="dashboard"] .gcl-dashboard-view-hero,
.gcl-root[data-gcl-page="dashboard"] .gcl-dashboard-profile-hero {
  min-height: 132px;
  margin-bottom: 14px;
  padding: 18px 22px;
}

.gcl-root[data-gcl-page="dashboard"] .gcl-dashboard-profile-hero {
  min-height: 300px;
  padding: 28px;
}

.gcl-root[data-gcl-page="dashboard"] .gcl-dashboard-view-hero h2 {
  font-size: clamp(28px, 4.2vw, 52px);
}

.gcl-root[data-gcl-page="dashboard"] .gcl-dashboard-panel,
.gcl-root[data-gcl-page="dashboard"] .gcl-card {
  border-radius: 7px;
}

@media (max-width: 1180px) {
  .gcl-root[data-gcl-page="dashboard"] .gcl-app-window {
    grid-template-columns: 48px 178px minmax(0, 1fr);
  }

  .gcl-root[data-gcl-page="dashboard"] .gcl-app-window[data-gcl-active-view="gcl-dashboard-videos"] {
    grid-template-columns: 48px 178px minmax(0, 1fr);
  }
}

@media (max-width: 820px) {
  .gcl-public-profile-layout {
    grid-template-columns: 1fr;
  }

  .gcl-public-profile-sidebar {
    position: static;
  }

  .gcl-public-profile-main {
    grid-template-columns: 72px minmax(0, 1fr);
    padding: 18px;
  }

  .gcl-public-avatar {
    height: 72px;
    width: 72px;
  }

  .gcl-public-profile-banner {
    height: 300px;
  }

  .gcl-public-profile-main h1 {
    font-size: clamp(20px, 6vw, 24px);
    max-width: calc(100vw - 126px);
  }

  .gcl-public-profile-stats {
    bottom: 14px;
    left: 18px;
    right: 18px;
    width: auto;
  }

  .gcl-root[data-gcl-page="dashboard"] .gcl-dashboard-section {
    height: auto;
    min-height: calc(100vh - var(--gcl-header-height, 76px));
    overflow: visible;
  }

  .gcl-root[data-gcl-page="dashboard"] .gcl-app-window {
    display: block;
    height: auto;
    min-height: calc(100vh - var(--gcl-header-height, 76px));
    overflow: visible;
  }

  .gcl-root[data-gcl-page="dashboard"] .gcl-dashboard-main {
    height: auto;
    overflow: visible;
    padding: 12px;
  }
}
/* Rewards page redesign */
.gcl-rewards-page .gcl-section{padding-top:28px;padding-bottom:72px}
.gcl-rewards-page .gcl-rewards-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(250px,.42fr);gap:24px;align-items:stretch;margin:0;padding:32px;border:1px solid rgba(42,213,242,.3);border-radius:10px;background:#071522}
.gcl-rewards-page .gcl-rewards-hero-copy{max-width:760px}
.gcl-rewards-page .gcl-rewards-hero h1{max-width:720px;margin:10px 0 12px;color:#f5fbff;font-family:Orbitron,Arial,sans-serif;font-size:48px;line-height:1.05}
.gcl-rewards-page .gcl-rewards-hero p{max-width:650px;margin:0;color:#9eb2c4;font-size:16px;line-height:1.65}
.gcl-rewards-page .gcl-rewards-hero .gcl-action-row{margin-top:22px}
.gcl-rewards-page .gcl-rewards-hero-stats{display:grid;grid-template-columns:1fr;gap:10px;align-content:center}
.gcl-rewards-page .gcl-rewards-hero-stats strong{display:flex;align-items:baseline;justify-content:space-between;padding:16px 18px;border-left:3px solid #2ad5f2;background:#0c2030;color:#f5fbff;font-family:Orbitron,Arial,sans-serif;font-size:24px}
.gcl-rewards-page .gcl-rewards-hero-stats strong:nth-child(2){border-color:#35e58c}
.gcl-rewards-page .gcl-rewards-hero-stats strong:nth-child(3){border-color:#ffca3a}
.gcl-rewards-page .gcl-rewards-hero-stats small{color:#87a0b5;font-family:Inter,Arial,sans-serif;font-size:10px;letter-spacing:.08em;text-transform:uppercase}
.gcl-rewards-page .gcl-your-rewards-panel{margin-top:18px;padding:22px;border:1px solid rgba(255,255,255,.1);border-radius:10px;background:#0b111a}
.gcl-rewards-page .gcl-rewards-account-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
.gcl-rewards-page .gcl-rewards-account-head h2{margin:6px 0;color:#f5fbff;font-family:Orbitron,Arial,sans-serif;font-size:25px}
.gcl-rewards-page .gcl-rewards-account-head p{margin:0;color:#8fa5b8;line-height:1.5}
.gcl-rewards-page .gcl-dashboard-metrics-wide{grid-template-columns:repeat(3,minmax(0,1fr));margin-top:18px}
.gcl-rewards-page .gcl-dashboard-metrics-wide strong{border-top:2px solid #2ad5f2;background:#101b27}
.gcl-rewards-page .gcl-dashboard-metrics-wide strong:nth-child(2){border-color:#35e58c}
.gcl-rewards-page .gcl-dashboard-metrics-wide strong:nth-child(3){border-color:#ffca3a}
.gcl-rewards-page .gcl-member-rank-card{display:grid;grid-template-columns:92px minmax(0,1fr);gap:18px;align-items:center;margin-top:18px;padding:16px;border:1px solid rgba(42,213,242,.24);background:#091a29}
.gcl-rewards-page .gcl-member-rank-placeholder{grid-column:1/-1;padding:18px;color:#8fa5b8;text-align:center}
.gcl-rewards-page .gcl-member-rank-badge{position:relative;display:grid;place-items:center;width:86px;height:86px;border:2px solid #2ad5f2;border-radius:50%;overflow:hidden;background:#102f43}
.gcl-rewards-page .gcl-member-rank-badge img{width:100%;height:100%;object-fit:cover;opacity:.72}
.gcl-rewards-page .gcl-member-rank-badge span{position:absolute;color:#fff;font-family:Orbitron,Arial,sans-serif;font-size:13px;text-shadow:0 2px 8px #000}
.gcl-rewards-page .gcl-member-rank-line{display:flex;align-items:flex-end;justify-content:space-between;gap:14px}
.gcl-rewards-page .gcl-member-rank-line h3{margin:4px 0 0;color:#f5fbff;font-family:Orbitron,Arial,sans-serif;font-size:24px}
.gcl-rewards-page .gcl-member-rank-line>strong{color:#2ad5f2;font-family:Orbitron,Arial,sans-serif;font-size:23px}
.gcl-rewards-page .gcl-member-rank-line>strong small{margin-left:4px;color:#8fa5b8;font-family:Inter,Arial,sans-serif;font-size:10px}
.gcl-rewards-page .gcl-member-rank-track,.gcl-rewards-page .gcl-member-daily-track{height:9px;margin-top:14px;overflow:hidden;border-radius:999px;background:#1c2b38}
.gcl-rewards-page .gcl-member-rank-track span{display:block;height:100%;border-radius:inherit;background:#2ad5f2}
.gcl-rewards-page .gcl-member-rank-meta{display:flex;justify-content:space-between;gap:12px;margin-top:8px;color:#8fa5b8;font-size:11px}
.gcl-rewards-page .gcl-member-daily-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:14px}
.gcl-rewards-page .gcl-member-daily-card{padding:13px;border:1px solid rgba(255,255,255,.08);border-top:2px solid #2ad5f2;background:#101b27}
.gcl-rewards-page .gcl-member-daily-card--play{border-color:rgba(53,229,140,.35);border-top-color:#35e58c}
.gcl-rewards-page .gcl-member-daily-card--streak{border-color:rgba(255,202,58,.35);border-top-color:#ffca3a}
.gcl-rewards-page .gcl-member-daily-card--spend{border-color:rgba(190,88,255,.35);border-top-color:#be58ff}
.gcl-rewards-page .gcl-member-daily-card div{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.gcl-rewards-page .gcl-member-daily-card span{color:#8fa5b8;font-size:10px;text-transform:uppercase}
.gcl-rewards-page .gcl-member-daily-card strong{color:#f5fbff;font-size:14px;text-align:right}
.gcl-rewards-page .gcl-member-daily-card p{min-height:34px;margin:8px 0 0;color:#8fa5b8;font-size:11px;line-height:1.45}
.gcl-rewards-page .gcl-member-daily-track{height:5px;margin-top:10px}
.gcl-rewards-page .gcl-member-daily-track span{display:block;height:100%;border-radius:inherit;background:#2ad5f2}
.gcl-rewards-page .gcl-member-reward-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:16px}
.gcl-rewards-page .gcl-member-reward-list .gcl-reward-card{min-height:132px;margin:0;background:#101b27}
.gcl-rewards-page .gcl-reward-card--rank{border-top:2px solid #ffca3a}
.gcl-rewards-page .gcl-reward-card--rank.is-claimed{border-color:rgba(143,165,184,.35);opacity:.72}
.gcl-rewards-page .gcl-reward-card--rank.is-ready{border-color:rgba(53,229,140,.6)}
.gcl-rewards-page .gcl-rewards-section{margin-top:28px;padding-top:4px}
.gcl-rewards-page .gcl-rewards-section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:14px}
.gcl-rewards-page .gcl-rewards-section-head h2{margin:6px 0;color:#f5fbff;font-family:Orbitron,Arial,sans-serif;font-size:28px}
.gcl-rewards-page .gcl-rewards-section-head p{max-width:680px;margin:0;color:#8fa5b8;line-height:1.5}
.gcl-rewards-page .gcl-section-count{flex:0 0 auto;padding:8px 12px;border:1px solid rgba(42,213,242,.3);color:#2ad5f2;font-size:11px;font-weight:800;text-transform:uppercase}
.gcl-rewards-page .gcl-daily-rewards-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.gcl-rewards-page .gcl-daily-reward-card{min-height:206px;padding:18px;border:1px solid rgba(42,213,242,.26);border-top:4px solid #2ad5f2;background:#0b1c2b}
.gcl-rewards-page .gcl-daily-reward-card--play{border-color:rgba(53,229,140,.3);border-top-color:#35e58c;background:#0b201a}
.gcl-rewards-page .gcl-daily-reward-card--streak{border-color:rgba(255,202,58,.32);border-top-color:#ffca3a;background:#211b0b}
.gcl-rewards-page .gcl-daily-reward-card--spend{border-color:rgba(190,88,255,.32);border-top-color:#be58ff;background:#1b1025}
.gcl-rewards-page .gcl-daily-reward-icon{display:grid;place-items:center;width:42px;height:42px;border:1px solid currentColor;color:#2ad5f2;font-size:11px;font-weight:900}
.gcl-rewards-page .gcl-daily-reward-card--play .gcl-daily-reward-icon{color:#35e58c}
.gcl-rewards-page .gcl-daily-reward-card--streak .gcl-daily-reward-icon{color:#ffca3a}
.gcl-rewards-page .gcl-daily-reward-card--spend .gcl-daily-reward-icon{color:#be58ff}
.gcl-rewards-page .gcl-daily-reward-tag{margin-top:18px;color:#8fa5b8;font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase}
.gcl-rewards-page .gcl-daily-reward-card h3{margin:7px 0;color:#f5fbff;font-size:17px}
.gcl-rewards-page .gcl-daily-reward-card>strong{display:block;color:#fff;font-family:Orbitron,Arial,sans-serif;font-size:22px}
.gcl-rewards-page .gcl-daily-reward-card p{margin:9px 0 0;color:#9eb2c4;font-size:12px;line-height:1.5}
.gcl-rewards-page .gcl-rank-stage-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.gcl-rewards-page .gcl-rank-stage-card{padding:18px;border:1px solid rgba(255,202,58,.25);background:#111923}
.gcl-rewards-page .gcl-rank-stage-head{display:grid;grid-template-columns:72px minmax(0,1fr) auto;gap:14px;align-items:center}
.gcl-rewards-page .gcl-rank-stage-badge{position:relative;display:grid;place-items:center;width:68px;height:68px;border:2px solid #ffca3a;border-radius:50%;overflow:hidden;background:#2b2411}
.gcl-rewards-page .gcl-rank-stage-badge img{width:100%;height:100%;object-fit:cover;opacity:.7}
.gcl-rewards-page .gcl-rank-stage-badge span{position:absolute;color:#fff;font-family:Orbitron,Arial,sans-serif;font-size:12px;text-shadow:0 2px 6px #000}
.gcl-rewards-page .gcl-rank-stage-copy>span{color:#ffca3a;font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase}
.gcl-rewards-page .gcl-rank-stage-copy h3{margin:4px 0;color:#f5fbff;font-family:Orbitron,Arial,sans-serif;font-size:21px}
.gcl-rewards-page .gcl-rank-stage-copy p{margin:0;color:#8fa5b8;font-size:12px;line-height:1.45}
.gcl-rewards-page .gcl-rank-stage-head>strong{color:#ffca3a;font-family:Orbitron,Arial,sans-serif;font-size:18px;text-align:right}
.gcl-rewards-page .gcl-rank-stage-head>strong small{display:block;color:#8fa5b8;font-family:Inter,Arial,sans-serif;font-size:9px;letter-spacing:.1em}
.gcl-rewards-page .gcl-rank-stage-rewards{margin-top:16px;padding-top:13px;border-top:1px solid rgba(255,255,255,.08)}
.gcl-rewards-page .gcl-rank-stage-rewards-title{display:flex;justify-content:space-between;color:#dbe9f5;font-size:11px;font-weight:800;text-transform:uppercase}
.gcl-rewards-page .gcl-rank-stage-rewards-title span{color:#ffca3a}
.gcl-rewards-page .gcl-rank-unlock-row{display:grid;grid-template-columns:34px minmax(0,1fr) auto;gap:10px;align-items:center;margin-top:9px;padding:9px;background:#0b131d}
.gcl-rewards-page .gcl-reward-type-mark{display:grid;place-items:center;width:30px;height:30px;border:1px solid #2ad5f2;color:#2ad5f2;font-size:9px;font-weight:900}
.gcl-rewards-page .gcl-rank-unlock-row strong,.gcl-rewards-page .gcl-rank-unlock-row small{display:block}
.gcl-rewards-page .gcl-rank-unlock-row strong{color:#f5fbff;font-size:12px}
.gcl-rewards-page .gcl-rank-unlock-row small{margin-top:3px;color:#8fa5b8;font-size:10px;line-height:1.35}
.gcl-rewards-page .gcl-rank-unlock-row .gcl-rank-unlock-points{color:#59ef9d;font-size:9px;font-weight:800;text-transform:uppercase}
.gcl-rewards-page .gcl-rank-unlock-row>b{color:#35e58c;font-size:10px}
.gcl-rewards-page .gcl-rank-empty-reward{margin-top:9px;color:#8fa5b8;font-size:11px}
.gcl-rewards-page .gcl-shop-rewards-section .gcl-reward-catalog-grid{grid-template-columns:repeat(3,minmax(0,1fr));margin-top:0}
.gcl-rewards-page .gcl-point-pay-rewards-section .gcl-reward-catalog-grid{grid-template-columns:repeat(3,minmax(0,1fr));margin-top:0}
.gcl-rewards-page .gcl-point-pay-reward-card{min-height:250px;padding:18px;background:linear-gradient(180deg,#102f55,#0d1d3c);border-color:rgba(42,154,255,.36);box-shadow:0 0 22px rgba(22,124,242,.08)}
.gcl-rewards-page .gcl-point-pay-reward-card:nth-child(2){background:linear-gradient(180deg,#123b68,#0d2045);border-color:rgba(55,190,255,.42)}
.gcl-rewards-page .gcl-point-pay-reward-card:nth-child(3){background:linear-gradient(180deg,#162c61,#111b42);border-color:rgba(91,125,255,.45)}
.gcl-rewards-page .gcl-point-pay-reward-image{display:block;width:116px;height:104px;margin:0 auto 10px;object-fit:contain}
.gcl-rewards-page .gcl-point-pay-reward-card h3{color:#eff8ff;font-family:Orbitron,Arial,sans-serif;font-size:16px}
.gcl-rewards-page .gcl-point-pay-reward-card p{min-height:38px;line-height:1.5}
.gcl-rewards-page .gcl-point-pay-reward-card>strong{color:#6fd9ff;font-family:Orbitron,Arial,sans-serif;font-size:19px}

@media (max-width: 900px){
  .gcl-rewards-page .gcl-rewards-hero{grid-template-columns:1fr;padding:24px}
  .gcl-rewards-page .gcl-rewards-hero-stats{grid-template-columns:repeat(3,minmax(0,1fr))}
  .gcl-rewards-page .gcl-daily-rewards-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .gcl-rewards-page .gcl-rank-stage-list{grid-template-columns:1fr}
  .gcl-rewards-page .gcl-member-daily-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width: 620px){
  .gcl-rewards-page .gcl-section{padding-top:16px;padding-bottom:42px}
  .gcl-rewards-page .gcl-rewards-hero h1{font-size:32px}
  .gcl-rewards-page .gcl-rewards-hero p{font-size:14px}
  .gcl-rewards-page .gcl-rewards-hero-stats{gap:6px}
  .gcl-rewards-page .gcl-rewards-hero-stats strong{display:block;padding:11px 8px;font-size:17px}
  .gcl-rewards-page .gcl-rewards-hero-stats small{display:block;margin-top:5px;font-size:8px;line-height:1.2}
  .gcl-rewards-page .gcl-rewards-account-head,.gcl-rewards-page .gcl-rewards-section-head{display:block}
  .gcl-rewards-page .gcl-rewards-account-head .gcl-button{margin-top:14px}
  .gcl-rewards-page .gcl-section-count{display:inline-block;margin-top:10px}
  .gcl-rewards-page .gcl-dashboard-metrics-wide{grid-template-columns:1fr}
  .gcl-rewards-page .gcl-member-rank-card{grid-template-columns:1fr;justify-items:center;text-align:center}
  .gcl-rewards-page .gcl-member-rank-main{width:100%}
  .gcl-rewards-page .gcl-member-rank-line{align-items:center;text-align:left}
  .gcl-rewards-page .gcl-member-rank-meta{font-size:10px;text-align:left}
  .gcl-rewards-page .gcl-member-daily-grid,.gcl-rewards-page .gcl-member-reward-list,.gcl-rewards-page .gcl-daily-rewards-grid,.gcl-rewards-page .gcl-shop-rewards-section .gcl-reward-catalog-grid,.gcl-rewards-page .gcl-point-pay-rewards-section .gcl-reward-catalog-grid{grid-template-columns:1fr}
  .gcl-rewards-page .gcl-rank-stage-head{grid-template-columns:58px minmax(0,1fr);gap:10px}
  .gcl-rewards-page .gcl-rank-stage-badge{width:56px;height:56px}
  .gcl-rewards-page .gcl-rank-stage-head>strong{grid-column:2;text-align:left}
  .gcl-rewards-page .gcl-rank-stage-copy h3{font-size:18px}
}

/* Rank-reward board and seven-day track */
.gcl-rewards-page .gcl-rewards-visual-intro{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;margin:0 0 22px;padding:8px 0 4px}
.gcl-rewards-page .gcl-rewards-visual-intro h1{margin:7px 0 5px;color:#f5fbff;font-family:Orbitron,Arial,sans-serif;font-size:42px;line-height:1}
.gcl-rewards-page .gcl-rewards-visual-intro p{margin:0;color:#9eb2c4;font-size:14px;line-height:1.5}
.gcl-rewards-page .gcl-rank-journey-section{margin-top:0;padding:20px 0 0}
.gcl-rewards-page .gcl-rank-stage-list{display:flex;align-items:stretch;gap:10px;overflow-x:auto;padding:2px 2px 12px;cursor:grab;scrollbar-width:thin;scrollbar-color:#2ad5f2 #111936;overscroll-behavior-x:contain;touch-action:pan-y;user-select:none}
.gcl-rewards-page .gcl-rank-stage-list:active{cursor:grabbing}
.gcl-rewards-page .gcl-rank-stage-card{flex:0 0 clamp(185px,16.4vw,220px);min-width:0;min-height:300px;padding:14px 12px;border:0;border-top:0;border-radius:7px;background:linear-gradient(180deg,rgba(17,27,49,0),rgba(17,27,49,.58) 54%,rgba(17,21,34,.98));box-shadow:0 8px 20px rgba(0,0,0,.18)}
.gcl-rewards-page .gcl-rank-stage-card--bronze{background:linear-gradient(180deg,rgba(51,37,30,0),rgba(51,37,30,.58) 54%,rgba(41,30,27,.98))}
.gcl-rewards-page .gcl-rank-stage-card--silver{background:linear-gradient(180deg,rgba(38,48,68,0),rgba(38,48,68,.58) 54%,rgba(29,35,51,.98))}
.gcl-rewards-page .gcl-rank-stage-card--gold{background:linear-gradient(180deg,rgba(62,50,24,0),rgba(62,50,24,.58) 54%,rgba(35,30,19,.98))}
.gcl-rewards-page .gcl-rank-stage-card--platinum{background:linear-gradient(180deg,rgba(18,55,70,0),rgba(18,55,70,.58) 54%,rgba(13,35,46,.98))}
.gcl-rewards-page .gcl-rank-stage-card--diamond{background:linear-gradient(180deg,rgba(44,27,75,0),rgba(44,27,75,.58) 54%,rgba(27,19,49,.98))}
.gcl-rewards-page .gcl-rank-stage-card--master{background:linear-gradient(180deg,rgba(67,23,45,0),rgba(67,23,45,.58) 54%,rgba(43,18,34,.98))}
.gcl-rewards-page .gcl-rank-stage-badge{width:66px;height:66px;margin:2px auto 12px;border:0;border-radius:18px;background:#19243b;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),0 8px 18px rgba(0,0,0,.35)}
.gcl-rewards-page .gcl-rank-stage-card--bronze .gcl-rank-stage-badge{background:#33251e}
.gcl-rewards-page .gcl-rank-stage-card--silver .gcl-rank-stage-badge{background:#263044}
.gcl-rewards-page .gcl-rank-stage-card--gold .gcl-rank-stage-badge{background:#3e3218}
.gcl-rewards-page .gcl-rank-stage-card--platinum .gcl-rank-stage-badge{background:#123746}
.gcl-rewards-page .gcl-rank-stage-card--diamond .gcl-rank-stage-badge{background:#2c1b4b}
.gcl-rewards-page .gcl-rank-stage-card--master .gcl-rank-stage-badge{background:#43172d}
.gcl-rewards-page .gcl-rank-stage-badge img{border-radius:14px;opacity:.92}
.gcl-rewards-page .gcl-rank-stage-badge span{font-size:11px;text-shadow:0 1px 4px #000}
.gcl-rewards-page .gcl-rank-stage-copy{text-align:center}
.gcl-rewards-page .gcl-rank-stage-copy>span{font-size:9px}
.gcl-rewards-page .gcl-rank-stage-copy h3{margin:4px 0 5px;font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gcl-rewards-page .gcl-rank-stage-copy>strong{display:block;color:#f7d67b;font-family:Orbitron,Arial,sans-serif;font-size:12px}
.gcl-rewards-page .gcl-rank-stage-copy>strong small{color:#8fa5b8;font-family:Inter,Arial,sans-serif;font-size:9px}
.gcl-rewards-page .gcl-rank-discount{display:block;margin-top:5px;color:#63f2b2;font-size:10px;font-style:normal;font-weight:800;letter-spacing:.02em}
.gcl-rank-detail-modal[hidden]{display:none!important}
.gcl-rank-detail-modal{position:fixed;inset:0;z-index:32000;display:grid;place-items:center;padding:22px;background:rgba(2,7,16,.76);backdrop-filter:blur(12px)}
.gcl-rank-detail-backdrop{position:absolute;inset:0;cursor:pointer}
.gcl-rank-detail-panel{position:relative;z-index:1;width:min(780px,100%);max-height:min(760px,calc(100dvh - 36px));overflow:auto;padding:24px;border:0;border-radius:7px;background:linear-gradient(180deg,rgba(17,27,49,0),rgba(17,27,49,.58) 54%,rgba(17,21,34,.98));box-shadow:0 28px 90px rgba(0,0,0,.7)}
.gcl-rank-detail-modal[data-gcl-rank-theme="bronze"] .gcl-rank-detail-panel{background:linear-gradient(180deg,rgba(51,37,30,0),rgba(51,37,30,.58) 54%,rgba(41,30,27,.98))}
.gcl-rank-detail-modal[data-gcl-rank-theme="silver"] .gcl-rank-detail-panel{background:linear-gradient(180deg,rgba(38,48,68,0),rgba(38,48,68,.58) 54%,rgba(29,35,51,.98))}
.gcl-rank-detail-modal[data-gcl-rank-theme="gold"] .gcl-rank-detail-panel{background:linear-gradient(180deg,rgba(62,50,24,0),rgba(62,50,24,.58) 54%,rgba(35,30,19,.98))}
.gcl-rank-detail-modal[data-gcl-rank-theme="platinum"] .gcl-rank-detail-panel{background:linear-gradient(180deg,rgba(18,55,70,0),rgba(18,55,70,.58) 54%,rgba(13,35,46,.98))}
.gcl-rank-detail-modal[data-gcl-rank-theme="diamond"] .gcl-rank-detail-panel{background:linear-gradient(180deg,rgba(44,27,75,0),rgba(44,27,75,.58) 54%,rgba(27,19,49,.98))}
.gcl-rank-detail-modal[data-gcl-rank-theme="master"] .gcl-rank-detail-panel{background:linear-gradient(180deg,rgba(67,23,45,0),rgba(67,23,45,.58) 54%,rgba(43,18,34,.98))}
.gcl-rank-detail-head{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;padding-bottom:18px}
.gcl-rank-detail-head h2{margin:7px 0 0;color:#f5fbff;font-family:Orbitron,Arial,sans-serif;font-size:34px}
.gcl-rank-detail-close{display:grid;place-items:center;width:38px;height:38px;border:1px solid rgba(255,255,255,.2);border-radius:6px;background:#121d31;color:#fff;font-size:26px;line-height:1;cursor:pointer}
.gcl-rank-detail-summary{display:grid;grid-template-columns:128px minmax(0,1fr);gap:22px;align-items:center;padding:22px 0}
.gcl-rank-detail-badge{position:relative;display:grid;place-items:center;width:128px;height:128px;overflow:hidden;border:0;border-radius:18px;background:#19243b;box-shadow:0 12px 26px rgba(0,0,0,.35)}
.gcl-rank-detail-modal[data-gcl-rank-theme="bronze"] .gcl-rank-detail-badge{background:#33251e}
.gcl-rank-detail-modal[data-gcl-rank-theme="silver"] .gcl-rank-detail-badge{background:#263044}
.gcl-rank-detail-modal[data-gcl-rank-theme="gold"] .gcl-rank-detail-badge{background:#3e3218}
.gcl-rank-detail-modal[data-gcl-rank-theme="platinum"] .gcl-rank-detail-badge{background:#123746}
.gcl-rank-detail-modal[data-gcl-rank-theme="diamond"] .gcl-rank-detail-badge{background:#2c1b4b}
.gcl-rank-detail-modal[data-gcl-rank-theme="master"] .gcl-rank-detail-badge{background:#43172d}
.gcl-rank-detail-badge img{width:100%;height:100%;object-fit:cover;opacity:.92}
.gcl-rank-detail-badge span{position:absolute;color:#fff;font-family:Orbitron,Arial,sans-serif;font-size:22px;text-shadow:0 2px 8px #000}
.gcl-rank-detail-copy>p{margin:0 0 16px;color:#a9bbcd;font-size:14px;line-height:1.6}
.gcl-rank-detail-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
.gcl-rank-detail-stats>div{min-height:74px;padding:11px;background:rgba(13,22,40,.58)}
.gcl-rank-detail-stats span{display:block;color:#8096aa;font-size:10px;line-height:1.3;text-transform:uppercase}
.gcl-rank-detail-stats strong{display:block;margin-top:9px;color:#ffd35e;font-family:Orbitron,Arial,sans-serif;font-size:14px}
.gcl-rank-detail-stats>div:nth-child(2) strong{color:#63f2b2}
.gcl-rank-detail-section-title{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:10px}
.gcl-rank-detail-section-title h3{margin:0;color:#f5fbff;font-family:Orbitron,Arial,sans-serif;font-size:20px}
.gcl-rank-detail-section-title span{color:#2ad5f2;font-size:11px;font-weight:800;text-transform:uppercase}
.gcl-rank-detail-reward{display:grid;grid-template-columns:48px minmax(0,1fr);gap:14px;align-items:start;margin-top:9px;padding:14px;background:transparent}
.gcl-rank-detail-reward-number{color:#ffd35e;font-family:Orbitron,Arial,sans-serif;font-size:13px;font-weight:800}
.gcl-rank-detail-reward strong,.gcl-rank-detail-reward span,.gcl-rank-detail-reward p{display:block}
.gcl-rank-detail-reward strong{color:#f5fbff;font-size:14px}
.gcl-rank-detail-reward span{margin-top:3px;color:#2ad5f2;font-size:9px;font-weight:800;letter-spacing:.08em}
.gcl-rank-detail-reward p{margin:7px 0 0;color:#9eb2c4;font-size:12px;line-height:1.5}
.gcl-rewards-page .gcl-rank-detail-rewards{min-height:0}
.gcl-rewards-page .gcl-rank-detail-rewards [data-gcl-rank-detail-rewards-list]{max-height:min(360px,42dvh);overflow-y:auto;padding-right:8px;scrollbar-width:thin;scrollbar-color:#2ad5f2 rgba(8,14,28,.35)}
.gcl-rewards-page .gcl-rank-detail-rewards [data-gcl-rank-detail-rewards-list]::-webkit-scrollbar{width:7px}
.gcl-rewards-page .gcl-rank-detail-rewards [data-gcl-rank-detail-rewards-list]::-webkit-scrollbar-track{background:rgba(8,14,28,.35)}
.gcl-rewards-page .gcl-rank-detail-rewards [data-gcl-rank-detail-rewards-list]::-webkit-scrollbar-thumb{background:#2ad5f2;border-radius:4px}
.gcl-rank-detail-empty{margin:0;padding:16px;color:#8fa5b8;border:1px dashed rgba(255,255,255,.16)}
.gcl-rewards-page .gcl-rank-stage-card:focus-visible{outline:2px solid #fff;outline-offset:3px}
html.gcl-rank-detail-open,body.gcl-rank-detail-open{overflow:hidden}
@media(max-width:620px){
  .gcl-rank-detail-modal{padding:10px}
  .gcl-rank-detail-panel{max-height:calc(100dvh - 20px);padding:18px}
  .gcl-rank-detail-head h2{font-size:26px}
  .gcl-rank-detail-summary{grid-template-columns:82px minmax(0,1fr);gap:13px;padding:18px 0}
  .gcl-rank-detail-badge{width:82px;height:82px;border-radius:14px}
  .gcl-rank-detail-badge span{font-size:16px}
  .gcl-rank-detail-copy>p{margin-bottom:11px;font-size:12px}
  .gcl-rank-detail-stats{grid-template-columns:1fr;gap:6px}
  .gcl-rank-detail-stats>div{min-height:0;padding:8px}
  .gcl-rank-detail-stats strong{margin-top:5px;font-size:12px}
  .gcl-rank-detail-section-title h3{font-size:17px}
  .gcl-rank-detail-reward{grid-template-columns:34px minmax(0,1fr);gap:9px;padding:11px}
  .gcl-rewards-page .gcl-rank-detail-rewards [data-gcl-rank-detail-rewards-list]{max-height:35dvh}
}
.gcl-rewards-page .gcl-rank-stage-rewards{margin-top:13px;padding-top:10px}
.gcl-rewards-page .gcl-rank-stage-rewards-title{font-size:9px;letter-spacing:.04em}
.gcl-rewards-page .gcl-rank-unlock-row{grid-template-columns:20px minmax(0,1fr);gap:6px;margin-top:6px;padding:5px 0;background:transparent}
.gcl-rewards-page .gcl-reward-type-mark{width:20px;height:20px;border:0;color:#ffd35e;font-size:7px}
.gcl-rewards-page .gcl-rank-unlock-row strong{font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gcl-rewards-page .gcl-rank-unlock-row small{font-size:9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gcl-rewards-page .gcl-daily-rewards-section{margin-top:26px;padding:20px 0 0}
.gcl-rewards-page .gcl-daily-track,.gcl-rewards-page .gcl-streak-track{display:flex;align-items:stretch;gap:8px;overflow-x:auto;padding:2px 2px 12px;cursor:grab;scrollbar-width:thin;scrollbar-color:#2ad5f2 #111936;overscroll-behavior-x:contain;touch-action:pan-y;user-select:none}
.gcl-rewards-page .gcl-daily-track:active,.gcl-rewards-page .gcl-streak-track:active{cursor:grabbing}
.gcl-rewards-page .gcl-daily-track-card{position:relative;flex:0 0 clamp(150px,14vw,180px);min-height:178px;padding:12px 9px 10px;border:0;border-radius:6px;background:#111936;text-align:center}
.gcl-rewards-page .gcl-daily-track-card:not(:last-child)::after{content:"›";position:absolute;right:-19px;top:50%;z-index:2;display:grid;place-items:center;width:36px;height:36px;transform:translateY(-50%);border:0;border-radius:50%;background:#167cf2;box-shadow:0 0 16px rgba(22,124,242,.46);color:#fff;font-size:31px;font-weight:900;line-height:1}
.gcl-rewards-page .gcl-daily-track-card--green{border-color:#10da77;background:linear-gradient(180deg,#102d34,#10213a)}
.gcl-rewards-page .gcl-daily-track-card--mint{background:linear-gradient(180deg,#10363b,#102c35)}
.gcl-rewards-page .gcl-daily-track-card--lime{background:linear-gradient(180deg,#26382b,#162d2b)}
.gcl-rewards-page .gcl-daily-track-card--teal{background:linear-gradient(180deg,#103b3b,#102633)}
.gcl-rewards-page .gcl-streak-track-card.gcl-daily-track-card--violet{background:linear-gradient(180deg,#302050,#17162f)}
.gcl-rewards-page .gcl-streak-track-card.gcl-daily-track-card--purple{background:linear-gradient(180deg,#3b1d5b,#1b1736)}
.gcl-rewards-page .gcl-streak-track-card.gcl-daily-track-card--magenta{background:linear-gradient(180deg,#461c50,#21162f)}
.gcl-rewards-page .gcl-daily-track-card--blue{border-color:#516aa8}
.gcl-rewards-page .gcl-daily-track-card--cyan{border-color:#2ad5f2}
.gcl-rewards-page .gcl-daily-track-card--gold{border-color:#f2ba28}
.gcl-rewards-page .gcl-daily-track-card--purple{border-color:#a952ff}
.gcl-rewards-page .gcl-daily-track-card--pink{border-color:#e33cff}
.gcl-rewards-page .gcl-daily-track-card--orange{border-color:#ff6f3c;background:linear-gradient(180deg,#322038,#171b34)}
.gcl-rewards-page .gcl-daily-track-day{display:block;color:#c4d0e2;font-size:10px;font-weight:800}
.gcl-rewards-page .gcl-daily-track-icon{display:grid;place-items:center;width:42px;height:42px;margin:11px auto 7px;border-radius:50%;background:#22335a;color:#ffd35e;font-size:7px;font-weight:900}
.gcl-rewards-page .gcl-daily-track-icon--image{width:76px;height:76px;margin:1px auto 5px;overflow:visible;border-radius:0;background:transparent;box-shadow:none}
.gcl-rewards-page .gcl-daily-track-icon--image img{display:block;width:100%;height:100%;object-fit:contain}
.gcl-rewards-page .gcl-daily-track-card--green .gcl-daily-track-icon{background:#1d663d;color:#ffe06a}
.gcl-rewards-page .gcl-daily-track-card--purple .gcl-daily-track-icon,.gcl-rewards-page .gcl-daily-track-card--pink .gcl-daily-track-icon{background:#4d1b7e;color:#e7b4ff}
.gcl-rewards-page .gcl-daily-track-card--orange .gcl-daily-track-icon{background:#74402c;color:#ffd19a}
.gcl-rewards-page .gcl-daily-track-card .gcl-daily-track-icon--image{background:transparent !important;border-radius:0;box-shadow:none !important}
.gcl-rewards-page .gcl-daily-track-card h3{min-height:24px;margin:0;color:#edf5ff;font-size:11px;line-height:1.2}
.gcl-rewards-page .gcl-daily-track-card>strong{display:block;min-height:17px;margin-top:6px;color:#fff;font-family:Orbitron,Arial,sans-serif;font-size:10px;line-height:1.25}
.gcl-rewards-page .gcl-daily-track-card p{min-height:27px;margin:5px 0;color:#9eb2c4;font-size:9px;line-height:1.3}
.gcl-rewards-page .gcl-daily-track-state{display:block;margin-top:7px;padding:5px 3px;border-radius:4px;background:rgba(9,15,35,.62);color:#9fb5e7;font-size:9px;font-weight:800}
.gcl-rewards-page .gcl-daily-track-card--green .gcl-daily-track-state{color:#59ef9d}
.gcl-rewards-page .gcl-daily-track-card--orange .gcl-daily-track-state{color:#ffbd8e}
.gcl-rewards-page .gcl-daily-streak-summary{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:3px}
.gcl-rewards-page .gcl-daily-streak-summary>div{padding:14px 18px;border:1px solid rgba(42,213,242,.2);border-radius:6px;background:#111936}
.gcl-rewards-page .gcl-daily-streak-summary>div:last-child{border-color:rgba(169,82,255,.3)}
.gcl-rewards-page .gcl-daily-streak-summary span,.gcl-rewards-page .gcl-daily-streak-summary small{display:block;color:#91a8c2;font-size:10px}
.gcl-rewards-page .gcl-daily-streak-summary strong{display:block;margin:5px 0;color:#f5fbff;font-family:Orbitron,Arial,sans-serif;font-size:15px}
.gcl-rewards-page .gcl-streak-rewards-section{margin-top:26px;padding-top:20px}
.gcl-rewards-page .gcl-streak-track{scrollbar-color:#63e6a7 #111936}
.gcl-rewards-page .gcl-streak-track-card{min-height:202px}
.gcl-rewards-page .gcl-streak-track-days{display:block;margin-bottom:3px;color:#8ff2c2;font-size:10px;font-weight:900;letter-spacing:.04em;text-transform:uppercase}
.gcl-rewards-page .gcl-streak-track-card h3{min-height:31px}
.gcl-rewards-page .gcl-streak-track-card .gcl-daily-track-state{color:#8ff2c2}
@media (max-width: 900px){
  .gcl-rewards-page .gcl-rewards-visual-intro{align-items:flex-start;flex-direction:column}
  .gcl-rewards-page .gcl-rank-stage-card{flex-basis:min(29vw,240px)}
  .gcl-rewards-page .gcl-daily-track-card{flex-basis:min(24vw,190px)}
}
@media (max-width: 620px){
  .gcl-rewards-page .gcl-rewards-visual-intro h1{font-size:31px}
  .gcl-rewards-page .gcl-rank-stage-card{flex-basis:76vw}
  .gcl-rewards-page .gcl-daily-track-card{flex-basis:42vw}
  .gcl-rewards-page .gcl-daily-streak-summary{grid-template-columns:1fr}
}

/* Keep the visual carousels stable and center the active card at every width. */
.gcl-rewards-page .gcl-rank-stage-list{
  --gcl-carousel-card-width:220px;
  padding-inline:max(12px,calc((100% - var(--gcl-carousel-card-width))/2));
  scroll-padding-inline:max(12px,calc((100% - var(--gcl-carousel-card-width))/2));
  scroll-snap-type:x mandatory;
}
.gcl-rewards-page .gcl-rank-stage-card{
  flex:0 0 var(--gcl-carousel-card-width);
  width:var(--gcl-carousel-card-width);
  box-sizing:border-box;
  scroll-snap-align:center;
}
.gcl-rewards-page .gcl-daily-track{
  --gcl-carousel-card-width:190px;
  padding-inline:max(12px,calc((100% - var(--gcl-carousel-card-width))/2));
  scroll-padding-inline:max(12px,calc((100% - var(--gcl-carousel-card-width))/2));
  scroll-snap-type:x mandatory;
}
.gcl-rewards-page .gcl-daily-track-card{
  flex:0 0 var(--gcl-carousel-card-width);
  width:var(--gcl-carousel-card-width);
  box-sizing:border-box;
  scroll-snap-align:center;
}
.gcl-rewards-page .gcl-rank-stage-badge{
  width:90px;
  height:90px;
  overflow:visible;
  border:0;
  border-radius:0;
  background:transparent !important;
  box-shadow:none;
}
.gcl-rewards-page .gcl-rank-stage-badge img{
  width:100%;
  height:100%;
  object-fit:contain;
  border:0;
  border-radius:0;
  background:transparent;
  opacity:1;
}
.gcl-rewards-page .gcl-rank-stage-badge span{display:none}
.gcl-rewards-page .gcl-rank-detail-badge{
  width:164px;
  height:164px;
  overflow:visible;
  border:0;
  border-radius:0;
  background:transparent !important;
  box-shadow:none;
}
.gcl-rewards-page .gcl-rank-detail-badge img{
  width:100%;
  height:100%;
  object-fit:contain;
  border:0;
  border-radius:0;
  background:transparent;
  opacity:1;
}
.gcl-rewards-page .gcl-rank-detail-badge span{display:none}
@media (max-width: 620px){
  .gcl-rewards-page .gcl-rank-stage-list{--gcl-carousel-card-width:min(320px,calc(100vw - 32px))}
  .gcl-rewards-page .gcl-daily-track{--gcl-carousel-card-width:min(210px,calc(100vw - 32px))}
  .gcl-rewards-page .gcl-rank-stage-badge{width:82px;height:82px}
  .gcl-rewards-page .gcl-rank-detail-summary{grid-template-columns:104px minmax(0,1fr)}
  .gcl-rewards-page .gcl-rank-detail-badge{width:104px;height:104px}
}

/* Arena ranking page */
.gcl-rank-arena-page {
  min-height: calc(100vh - var(--gcl-header-height, 78px));
}

.gcl-rank-arena {
  min-height: calc(100vh - var(--gcl-header-height, 78px));
  padding: clamp(54px, 8vw, 92px) 0 clamp(72px, 10vw, 118px);
}

.gcl-rank-progress-panel {
  min-height: 210px;
  position: relative;
}

.gcl-rank-progress-track {
  background: rgba(200, 230, 255, 0.18);
  border-radius: 999px;
  height: 10px;
  left: 4%;
  position: absolute;
  right: 16%;
  top: 66px;
}

.gcl-rank-progress-track span {
  background: linear-gradient(90deg, #1f5ca7, #4c86dd);
  border-radius: inherit;
  box-shadow: 0 0 18px rgba(76, 134, 221, 0.7);
  display: block;
  height: 100%;
}

.gcl-rank-current-badge,
.gcl-rank-reward {
  align-items: center;
  display: grid;
  justify-items: center;
  position: absolute;
  text-align: center;
}

.gcl-rank-current-badge {
  background: #593bb2;
  color: #fff;
  font-size: 28px;
  font-weight: 900;
  height: 58px;
  left: 31%;
  line-height: .9;
  top: 82px;
  width: 86px;
}

.gcl-rank-current-badge small {
  font-size: 14px;
}

.gcl-rank-reward {
  background: linear-gradient(180deg, #f9d42c, #c7a316);
  color: #fff;
  height: 70px;
  top: 16px;
  width: 88px;
}

.gcl-rank-reward::after {
  border: 9px solid transparent;
  border-top-color: #c7a316;
  bottom: -18px;
  content: "";
  position: absolute;
}

.gcl-rank-reward b {
  background: #ba215e;
  border-radius: 999px;
  font-size: 11px;
  padding: 3px 14px;
  position: absolute;
  top: -13px;
}

.gcl-rank-reward strong {
  font-size: 24px;
  line-height: .86;
  text-shadow: 0 2px 0 rgba(0,0,0,.22);
}

.gcl-rank-reward small {
  font-size: 12px;
  font-weight: 900;
  line-height: .92;
}

.gcl-rank-reward.is-first {
  left: 51%;
}

.gcl-rank-reward.is-second {
  left: 66%;
}

.gcl-rank-next {
  color: #fff;
  font-weight: 900;
  position: absolute;
  right: 4%;
  top: 44px;
}

.gcl-rank-next strong {
  display: block;
  line-height: .9;
  text-transform: uppercase;
}

.gcl-rank-next span {
  display: block;
  margin-top: 6px;
}

.gcl-rank-board-grid {
  align-items: start;
  display: grid;
  gap: clamp(42px, 6vw, 86px);
  grid-template-columns: minmax(220px, 300px) minmax(260px, 360px);
  margin-top: 10px;
}

.gcl-rank-compact-panel {
  background: transparent;
}

.gcl-rank-compact-panel h2 {
  color: rgba(255,255,255,.62);
  font-size: 18px;
  margin: 0 0 10px;
  text-transform: uppercase;
}

.gcl-rank-compact-panel ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.gcl-rank-compact-panel li {
  align-items: center;
  border-bottom: 1px solid rgba(255,255,255,.28);
  display: grid;
  gap: 8px;
  grid-template-columns: 30px minmax(0, 1fr);
  min-height: 36px;
}

.gcl-rank-compact-panel li.is-empty {
  border: 1px solid rgba(255,255,255,.16);
  color: rgba(255,255,255,.6);
  display: block;
  padding: 14px;
}

.gcl-rank-dot {
  background: #fff;
  border-radius: 50%;
  color: #062033;
  display: grid;
  font-size: 10px;
  font-weight: 900;
  height: 26px;
  place-items: center;
  width: 26px;
}

.gcl-rank-compact-panel strong {
  color: rgba(255,255,255,.78);
  display: block;
  font-size: 13px;
  line-height: .9;
  text-transform: uppercase;
}

.gcl-rank-compact-panel small {
  color: #fff;
  display: block;
  font-size: 12px;
  font-weight: 900;
  line-height: .95;
}

.gcl-rank-compact-panel.is-center ul {
  background: linear-gradient(90deg, rgba(166, 178, 37, .44), rgba(36, 96, 101, .18));
}

.gcl-rank-compact-panel.is-cod4 ul {
  background: linear-gradient(90deg, rgba(91, 159, 64, .52), rgba(36, 96, 101, .14));
}

@media (max-width: 760px) {
  .gcl-rank-progress-panel {
    min-height: 280px;
  }

  .gcl-rank-progress-track {
    left: 0;
    right: 0;
  }

  .gcl-rank-current-badge {
    left: 10%;
    top: 96px;
  }

  .gcl-rank-reward.is-first {
    left: 42%;
  }

  .gcl-rank-reward.is-second {
    left: auto;
    right: 0;
  }

  .gcl-rank-next {
    left: 0;
    right: auto;
    top: 176px;
  }

  .gcl-rank-board-grid {
    grid-template-columns: 1fr;
  }
}

.gcl-rank-arena {
  padding-top: clamp(38px, 5vw, 68px);
}

.gcl-rank-live-summary {
  display: flex;
  gap: 10px;
  left: 4%;
  position: absolute;
  top: 0;
}

.gcl-rank-live-summary span {
  align-items: baseline;
  background: rgba(5, 20, 34, .82);
  border: 1px solid rgba(89, 226, 255, .18);
  border-radius: 8px;
  display: flex;
  gap: 7px;
  padding: 7px 10px;
}

.gcl-rank-live-summary b {
  color: #ffd324;
  font-size: 18px;
}

.gcl-rank-live-summary small {
  color: rgba(221, 236, 250, .72);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.gcl-rank-progress-track {
  height: 12px;
  top: 86px;
}

.gcl-rank-progress-track::after {
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.6), transparent);
  content: "";
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  transform: translateX(-100%);
  width: 120px;
  animation: gclRankSweep 2.8s ease-in-out infinite;
}

.gcl-rank-progress-track span {
  animation: gclRankFill .9s cubic-bezier(.2,.8,.2,1) both;
  background: linear-gradient(90deg, #2d72d9, #5edfff);
}

.gcl-rank-current-badge {
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 8px;
  box-shadow: 0 18px 45px rgba(0,0,0,.34), 0 0 22px rgba(115,83,255,.28);
  height: 70px;
  top: 104px;
  width: 104px;
}

.gcl-rank-current-badge strong {
  font-size: 30px;
  line-height: .86;
}

.gcl-rank-current-badge em {
  color: rgba(255,255,255,.78);
  font-size: 10px;
  font-style: normal;
  max-width: 88px;
  overflow: hidden;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.gcl-rank-reward {
  border-radius: 4px;
  box-shadow: 0 15px 35px rgba(0,0,0,.28), 0 0 18px rgba(255,211,36,.24);
  min-width: 104px;
  top: 25px;
  transform: translateX(-50%);
}

.gcl-rank-reward small {
  max-width: 96px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gcl-rank-next {
  background: rgba(5, 20, 34, .72);
  border-left: 2px solid rgba(255,211,36,.75);
  padding: 10px 0 10px 13px;
  top: 61px;
}

.gcl-rank-board-grid {
  gap: clamp(58px, 7vw, 110px);
  grid-template-columns: minmax(300px, 390px) minmax(360px, 470px);
  justify-content: start;
}

.gcl-rank-compact-panel h2 {
  color: rgba(214,226,240,.72);
  font-size: clamp(19px, 1.8vw, 25px);
  letter-spacing: 0;
}

.gcl-rank-compact-panel ul {
  border: 1px solid rgba(255,255,255,.05);
  border-radius: 0;
  overflow: hidden;
}

.gcl-rank-compact-panel li {
  grid-template-columns: 42px minmax(0, 1fr);
  min-height: 49px;
  padding: 4px 10px 4px 7px;
}

.gcl-rank-dot {
  background: radial-gradient(circle at 30% 25%, hsl(var(--rank-hue, 190), 92%, 82%), hsl(calc(var(--rank-hue, 190) + 45), 72%, 44%));
  border: 2px solid rgba(255,255,255,.72);
  box-shadow: 0 5px 15px rgba(0,0,0,.28);
  color: #031725;
  font-size: 11px;
  height: 32px;
  overflow: hidden;
  width: 32px;
}

.gcl-rank-dot.has-image {
  background: #051422;
  border-color: rgba(89,226,255,.52);
}

.gcl-rank-dot img {
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.gcl-rank-compact-panel strong {
  color: rgba(255,255,255,.9);
  font-size: 14px;
}

.gcl-rank-compact-panel small {
  color: rgba(255,255,255,.82);
  font-size: 12px;
  margin-top: 2px;
}

.gcl-rank-compact-panel.is-center ul {
  background: linear-gradient(90deg, rgba(118, 137, 36, .54), rgba(13, 61, 72, .26));
}

.gcl-rank-compact-panel.is-cod4 ul {
  background: linear-gradient(90deg, rgba(62, 143, 78, .58), rgba(13, 61, 72, .22));
}

@keyframes gclRankFill {
  from { width: 0; }
}

@keyframes gclRankSweep {
  0%, 38% { transform: translateX(-120%); opacity: 0; }
  55% { opacity: .65; }
  100% { transform: translateX(980%); opacity: 0; }
}

.gcl-rank-arena-page {
  background:
    radial-gradient(circle at 72% 18%, rgba(93, 83, 255, .18), transparent 30%),
    radial-gradient(circle at 20% 8%, rgba(0, 216, 255, .16), transparent 28%),
    #061b2c;
  overflow-x: hidden;
}

.gcl-rank-arena-hero {
  border-bottom: 1px solid rgba(89, 226, 255, .18);
  padding: clamp(42px, 6vw, 86px) 0 clamp(24px, 4vw, 44px);
  position: relative;
}

.gcl-rank-arena-hero::before {
  background: linear-gradient(90deg, rgba(6, 27, 44, .96), rgba(6, 27, 44, .64), rgba(6, 27, 44, .96));
  content: "";
  inset: 0;
  pointer-events: none;
  position: absolute;
}

.gcl-rank-arena-hero .gcl-shell {
  align-items: end;
  display: grid;
  gap: 28px;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 520px);
  position: relative;
}

.gcl-rank-hero-copy h1 {
  font-size: clamp(42px, 7vw, 96px);
  line-height: .86;
  margin: 16px 0 14px;
  max-width: 850px;
  text-transform: uppercase;
}

.gcl-rank-hero-copy p {
  color: rgba(223, 237, 250, .78);
  font-size: 16px;
  line-height: 1.55;
  margin: 0;
  max-width: 560px;
}

.gcl-live-pill {
  align-items: center;
  background: rgba(4, 19, 33, .74);
  border: 1px solid rgba(89, 226, 255, .28);
  border-radius: 999px;
  color: #67e9ff;
  display: inline-flex;
  font-size: 12px;
  font-weight: 900;
  gap: 8px;
  padding: 8px 12px;
  text-transform: uppercase;
}

.gcl-live-pill i {
  animation: gclLivePulse 1.6s ease-in-out infinite;
  background: #33ee98;
  border-radius: 50%;
  box-shadow: 0 0 18px rgba(51, 238, 152, .65);
  height: 9px;
  width: 9px;
}

.gcl-rank-hero-stats {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.gcl-rank-hero-stats span,
.gcl-your-performance,
.gcl-podium-card,
.gcl-leaderboard-controls,
.gcl-rank-table-wrap {
  background: linear-gradient(145deg, rgba(9, 32, 53, .88), rgba(9, 24, 39, .72));
  border: 1px solid rgba(89, 226, 255, .22);
  box-shadow: 0 22px 60px rgba(0, 0, 0, .22);
}

.gcl-rank-hero-stats span {
  border-radius: 10px;
  display: grid;
  gap: 3px;
  min-height: 78px;
  padding: 14px;
}

.gcl-rank-hero-stats b {
  color: #ffd522;
  font-size: 28px;
  line-height: .95;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gcl-rank-hero-stats small {
  color: rgba(217, 233, 248, .68);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.gcl-your-performance {
  align-items: center;
  border-radius: 12px;
  display: grid;
  gap: 18px;
  grid-template-columns: auto minmax(0, 1fr) minmax(260px, .55fr);
  margin-bottom: 22px;
  padding: clamp(16px, 2.4vw, 26px);
}

.gcl-your-avatar {
  background: radial-gradient(circle at 30% 20%, #ffffff, #7fe6f7 42%, #774cff);
  border: 3px solid rgba(255,255,255,.8);
  border-radius: 50%;
  color: #061827;
  display: grid;
  font-size: 26px;
  font-weight: 1000;
  height: 88px;
  overflow: hidden;
  place-items: center;
  width: 88px;
}

.gcl-your-avatar img {
  height: 100%;
  object-fit: cover;
  width: 100%;
}

/* One avatar rendering contract across header, dashboard, profiles and ranks. */
.gcl-account-avatar img,
[data-gcl-account-avatar] img,
.gcl-avatar img,
.gcl-public-avatar img,
.gcl-player-board-avatar img,
.gcl-video-creator-avatar img,
.gcl-rank-dot img,
.gcl-rank-chip i img,
.gcl-your-avatar img {
  border-radius: inherit;
  display: block;
  height: 100%;
  max-height: 100%;
  max-width: 100%;
  object-fit: cover;
  width: 100%;
}

.gcl-rank-chip i {
  border-radius: 50%;
  overflow: hidden;
}

.gcl-your-main span,
.gcl-rank-table-head span,
.gcl-leaderboard-controls span {
  color: #7cecff;
  font-size: 11px;
  font-weight: 1000;
  text-transform: uppercase;
}

.gcl-your-main h2 {
  font-size: clamp(28px, 4vw, 54px);
  line-height: .92;
  margin: 8px 0;
  text-transform: uppercase;
}

.gcl-your-main p {
  color: rgba(225, 237, 249, .8);
  font-weight: 900;
  margin: 0 0 12px;
}

.gcl-your-main strong,
.gcl-your-main b {
  color: #ffd522;
  font-size: 22px;
}

.gcl-your-main em {
  color: #34efa1;
  font-style: normal;
}

.gcl-your-progress {
  background: rgba(255,255,255,.13);
  border-radius: 999px;
  height: 12px;
  overflow: hidden;
}

.gcl-your-progress i {
  background: linear-gradient(90deg, #35efa0, #f7dc2b);
  border-radius: inherit;
  box-shadow: 0 0 24px rgba(54, 239, 160, .35);
  display: block;
  height: 100%;
  transition: width .65s cubic-bezier(.2,.8,.2,1);
}

.gcl-your-mini {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.gcl-your-mini span {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 9px;
  display: grid;
  gap: 4px;
  min-height: 74px;
  padding: 12px;
}

.gcl-your-mini b {
  color: #fff;
  font-size: 18px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gcl-your-mini small {
  color: rgba(215, 232, 247, .62);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.gcl-podium {
  align-items: end;
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 22px 0 36px;
}

.gcl-podium-card {
  border-radius: 12px;
  cursor: pointer;
  display: grid;
  justify-items: center;
  min-height: 190px;
  padding: 18px;
  position: relative;
  text-align: center;
  transition: transform .18s ease, border-color .18s ease;
}

.gcl-podium-card:hover,
.gcl-podium-card:focus {
  border-color: rgba(255, 213, 34, .58);
  outline: none;
  transform: translateY(-5px);
}

.gcl-podium-card.is-place-1 {
  min-height: 230px;
}

.gcl-podium-card .gcl-rank-dot {
  height: 64px;
  margin-bottom: 12px;
  width: 64px;
}

.gcl-podium-card strong {
  color: #fff;
  font-size: 17px;
  text-transform: uppercase;
}

.gcl-podium-card small {
  color: #6fe8ff;
  font-weight: 900;
  margin-top: 6px;
}

.gcl-podium-card b {
  color: #ffd522;
  font-size: 22px;
  margin-top: 10px;
}

.gcl-crown {
  background: linear-gradient(90deg, #ffe55d, #ff9d2d);
  border-radius: 999px;
  color: #3b2100;
  font-size: 10px;
  font-weight: 1000;
  padding: 6px 10px;
  position: absolute;
  top: -13px;
}

.gcl-leaderboard-controls {
  align-items: end;
  border-radius: 12px;
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(220px, 1fr) minmax(160px, .45fr) minmax(160px, .45fr) auto;
  margin: 24px 0;
  padding: 14px;
}

.gcl-leaderboard-controls label {
  display: grid;
  gap: 7px;
}

.gcl-leaderboard-controls input,
.gcl-leaderboard-controls select {
  background: rgba(1, 18, 31, .9);
  border: 1px solid rgba(89, 226, 255, .26);
  border-radius: 9px;
  color: #f3f8ff;
  min-height: 46px;
  padding: 0 13px;
}

.gcl-rank-toggle {
  align-items: center;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.11);
  border-radius: 9px;
  display: flex !important;
  gap: 9px !important;
  min-height: 46px;
  padding: 0 12px;
}

.gcl-rank-toggle input {
  min-height: 0;
}

.gcl-rank-table-wrap {
  border-radius: 12px;
  margin: 18px 0 28px;
  overflow: hidden;
}

.gcl-rank-table-head {
  align-items: center;
  border-bottom: 1px solid rgba(89, 226, 255, .14);
  display: flex;
  justify-content: space-between;
  padding: 18px;
}

.gcl-rank-table-head h1,
.gcl-rank-table-head h2 {
  font-size: clamp(22px, 3vw, 36px);
  margin: 0;
}

.gcl-rank-table {
  display: grid;
  min-width: 900px;
}

.gcl-rank-table > div {
  align-items: center;
  border-bottom: 1px solid rgba(255,255,255,.07);
  cursor: pointer;
  display: grid;
  gap: 10px;
  grid-template-columns: 54px minmax(220px, 1.5fr) minmax(110px, .8fr) repeat(7, minmax(70px, .55fr));
  min-height: 58px;
  padding: 9px 18px;
}

.gcl-rank-table.is-game > div {
  grid-template-columns: 54px minmax(220px, 1.5fr) repeat(8, minmax(70px, .55fr));
}

.gcl-rank-table > div:not(.is-head):hover,
.gcl-rank-table > div:not(.is-head):focus {
  background: rgba(89, 226, 255, .08);
  outline: none;
}

.gcl-rank-table .is-head {
  color: rgba(214, 232, 248, .55);
  cursor: default;
  font-size: 11px;
  font-weight: 1000;
  min-height: 42px;
  text-transform: uppercase;
}

.gcl-rank-table span:nth-child(2) {
  align-items: center;
  display: flex;
  gap: 10px;
  min-width: 0;
}

.gcl-rank-table b {
  color: #fff;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gcl-trend {
  color: #ffd522;
  font-weight: 1000;
}

.gcl-rank-empty-row {
  color: rgba(226, 239, 251, .62);
  display: block !important;
  font-weight: 900;
  padding: 28px !important;
  text-align: center;
}

.gcl-player-drawer {
  background: rgba(7, 18, 31, .96);
  border-left: 1px solid rgba(89, 226, 255, .22);
  bottom: 0;
  box-shadow: -30px 0 80px rgba(0,0,0,.38);
  color: #eef7ff;
  max-width: 430px;
  padding: 24px;
  position: fixed;
  right: 0;
  top: 0;
  transform: translateX(110%);
  transition: transform .22s ease;
  width: min(92vw, 430px);
  z-index: 1000;
}

.gcl-player-drawer.is-open {
  transform: translateX(0);
}

.gcl-player-drawer > button {
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 8px;
  color: #fff;
  cursor: pointer;
  font-size: 24px;
  height: 42px;
  position: absolute;
  right: 18px;
  top: 18px;
  width: 42px;
}

.gcl-drawer-head {
  border-bottom: 1px solid rgba(255,255,255,.1);
  display: grid;
  gap: 6px;
  padding: 58px 0 18px;
}

.gcl-drawer-head strong {
  font-size: 32px;
  line-height: .95;
  text-transform: uppercase;
}

.gcl-drawer-head span {
  color: rgba(219,235,249,.62);
  font-size: 12px;
  font-weight: 900;
}

.gcl-drawer-stats {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 18px 0;
}

.gcl-drawer-stats span {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 9px;
  display: grid;
  gap: 4px;
  padding: 13px;
}

.gcl-drawer-stats b {
  color: #ffd522;
  font-size: 22px;
}

.gcl-drawer-stats small {
  color: rgba(221,236,249,.6);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.gcl-drawer-actions {
  display: grid;
  gap: 10px;
}

.gcl-drawer-actions a,
.gcl-drawer-actions button {
  background: linear-gradient(90deg, #ffd522, #33efa0);
  border: 0;
  border-radius: 9px;
  color: #061827;
  cursor: pointer;
  font-weight: 1000;
  padding: 13px;
  text-align: center;
  text-decoration: none;
}

.gcl-drawer-actions button:disabled {
  background: rgba(255,255,255,.08);
  color: rgba(255,255,255,.45);
  cursor: not-allowed;
}

@keyframes gclLivePulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.28); }
}

@media (max-width: 980px) {
  .gcl-rank-arena-hero .gcl-shell,
  .gcl-your-performance,
  .gcl-leaderboard-controls {
    grid-template-columns: 1fr;
  }

  .gcl-podium {
    grid-template-columns: 1fr;
  }

  .gcl-rank-table-wrap {
    overflow-x: auto;
  }
}

@media (max-width: 620px) {
  .gcl-rank-hero-stats,
  .gcl-your-mini {
    grid-template-columns: 1fr;
  }

  .gcl-your-avatar {
    height: 72px;
    width: 72px;
  }
}

/* Leaderboard gaming command UI */
@keyframes gclRankHeroPan {
  0%, 100% { background-position: center, 0% 50%; }
  50% { background-position: center, 100% 50%; }
}

.gcl-rank-arena-page {
  background:
    linear-gradient(180deg, rgba(2, 4, 12, .96), rgba(4, 10, 22, .96)),
    #050711;
  color: #f7fbff;
  position: relative;
}

.gcl-rank-arena-page .gcl-shell {
  position: relative;
  z-index: 1;
}

.gcl-rank-arena-hero {
  background:
    linear-gradient(90deg, rgba(3, 4, 12, .98) 0%, rgba(4, 10, 25, .82) 42%, rgba(6, 13, 31, .95) 100%),
    var(--gcl-rank-bg, linear-gradient(135deg, rgba(6, 34, 56, .95), rgba(18, 18, 22, .95))) center / cover no-repeat;
  animation: gclRankHeroPan 16s ease-in-out infinite;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(22px, 3vw, 40px) 0 clamp(18px, 2.4vw, 30px);
}

.gcl-rank-arena-hero::after {
  background: linear-gradient(180deg, transparent, rgba(5, 7, 17, .92));
  bottom: -1px;
  content: "";
  height: 120px;
  left: 0;
  pointer-events: none;
  position: absolute;
  right: 0;
}

.gcl-rank-arena-hero .gcl-shell {
  align-items: start;
  gap: clamp(18px, 3vw, 34px);
  grid-template-columns: minmax(0, 1fr) minmax(320px, 510px);
}

.gcl-rank-hero-copy h1 {
  color: #fff;
  font-family: var(--gcl-font-display, inherit);
  font-size: clamp(38px, 5vw, 76px);
  letter-spacing: 0;
  line-height: .84;
  margin: 18px 0 10px;
  text-shadow: 0 0 32px rgba(63, 140, 255, .34);
}

.gcl-rank-hero-copy h2 {
  color: #fff;
  font-size: clamp(18px, 1.7vw, 26px);
  line-height: 1;
  margin: 0 0 18px;
}

.gcl-rank-hero-copy h2::first-letter,
.gcl-rank-hero-copy h2 {
  text-shadow: 0 0 24px rgba(125, 61, 255, .52);
}

.gcl-rank-hero-copy p {
  color: rgba(238, 245, 255, .86);
  font-size: 15px;
  max-width: 560px;
}

.gcl-live-pill {
  background: rgba(7, 10, 24, .78);
  border-color: rgba(88, 218, 255, .34);
  box-shadow: 0 0 30px rgba(51, 146, 255, .16);
}

.gcl-rank-hero-console {
  display: grid;
  gap: 12px;
}

.gcl-rank-hero-console article,
.gcl-rank-hero-stats span,
.gcl-rank-tabs,
.gcl-leaderboard-controls,
.gcl-rank-overview-card,
.gcl-rank-season-card,
.gcl-rank-table-wrap,
.gcl-current-rank-strip,
.gcl-rank-feature-strip {
  background: linear-gradient(145deg, rgba(13, 16, 31, .9), rgba(9, 13, 25, .82));
  border: 1px solid rgba(118, 132, 170, .22);
  box-shadow: 0 18px 54px rgba(0, 0, 0, .32), inset 0 1px 0 rgba(255, 255, 255, .04);
}

.gcl-rank-hero-console article {
  align-items: center;
  border-radius: 8px;
  display: flex;
  justify-content: space-between;
  min-height: 64px;
  padding: 12px 16px;
}

.gcl-rank-hero-console article span,
.gcl-rank-filter-title span,
.gcl-rank-overview-card span,
.gcl-rank-card-head span {
  color: rgba(213, 222, 239, .62);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.gcl-rank-hero-console article strong {
  color: #fff;
  font-size: 15px;
  text-align: right;
}

.gcl-rank-hero-console .is-countdown strong {
  color: #b36dff;
  text-shadow: 0 0 20px rgba(179, 109, 255, .55);
}

.gcl-rank-hero-stats {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.gcl-rank-hero-stats b {
  color: #ffd84d;
  font-size: 24px;
}

.gcl-rank-arena {
  padding: 12px 0 70px;
}

.gcl-rank-command-center {
  align-items: start;
  display: grid;
  gap: 18px;
  grid-template-columns: minmax(190px, 230px) minmax(0, 1fr) minmax(260px, 300px);
  margin-top: 0;
}

.gcl-rank-side-rail,
.gcl-rank-overview-rail {
  display: grid;
  gap: 18px;
  position: sticky;
  top: 86px;
}

.gcl-rank-main-board {
  display: grid;
  gap: 14px;
  min-width: 0;
}

.gcl-rank-tabs {
  border-radius: 8px;
  overflow: hidden;
}

.gcl-rank-tabs button {
  align-items: center;
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(255,255,255,.07);
  color: rgba(245, 249, 255, .78);
  cursor: pointer;
  display: flex;
  font-weight: 1000;
  gap: 12px;
  min-height: 56px;
  padding: 0 16px;
  text-align: left;
  text-transform: uppercase;
  width: 100%;
}

.gcl-rank-tabs button:last-child {
  border-bottom: 0;
}

.gcl-rank-tabs button span {
  color: rgba(119, 237, 255, .72);
  font-size: 11px;
}

.gcl-rank-tabs button.is-active,
.gcl-rank-tabs button:hover {
  background: linear-gradient(90deg, #7c2cff, #224fff);
  color: #fff;
  box-shadow: 0 0 26px rgba(86, 71, 255, .28);
}

.gcl-leaderboard-controls {
  align-items: stretch;
  border-radius: 8px;
  display: grid;
  gap: 14px;
  grid-template-columns: 1fr;
  margin: 0;
  padding: 16px;
}

.gcl-rank-filter-title strong,
.gcl-rank-card-head h2,
.gcl-rank-overview-card h2 {
  color: #fff;
  font-size: 16px;
  margin: 0;
  text-transform: uppercase;
}

.gcl-leaderboard-controls label {
  gap: 7px;
}

.gcl-leaderboard-controls input,
.gcl-leaderboard-controls select {
  background: rgba(4, 7, 18, .9);
  border-color: rgba(101, 121, 160, .28);
  border-radius: 7px;
  min-height: 42px;
}

.gcl-leaderboard-controls input:focus,
.gcl-leaderboard-controls select:focus {
  border-color: rgba(86, 224, 255, .7);
  box-shadow: 0 0 0 3px rgba(86, 224, 255, .12);
  outline: none;
}

.gcl-rank-table-wrap {
  border-radius: 8px;
  margin: 0;
  overflow-x: auto;
  position: relative;
}

.gcl-rank-table-wrap.is-primary {
  border-color: rgba(124, 44, 255, .42);
  box-shadow: 0 0 0 1px rgba(124, 44, 255, .16), 0 26px 80px rgba(18, 29, 82, .32);
}

.gcl-rank-table-head {
  padding: 18px 20px;
}

.gcl-rank-table-head h2 {
  color: #fff;
  font-size: clamp(22px, 2.2vw, 34px);
  text-transform: uppercase;
}

.gcl-rank-table {
  min-width: 740px;
}

.gcl-rank-table > div {
  grid-template-columns: 62px minmax(220px, 1.7fr) minmax(84px, .7fr) minmax(92px, .75fr) minmax(74px, .55fr) minmax(74px, .55fr) minmax(88px, .65fr);
  min-height: 64px;
  padding: 8px 20px;
  transition: background .18s ease, box-shadow .18s ease, transform .18s ease;
}

.gcl-rank-table.is-game > div {
  grid-template-columns: 58px minmax(220px, 1.45fr) repeat(8, minmax(76px, .58fr));
}

.gcl-rank-table > div:not(.is-head) {
  background: rgba(255,255,255,.015);
}

.gcl-rank-table > div:not(.is-head):hover,
.gcl-rank-table > div:not(.is-head):focus {
  background: rgba(46, 88, 255, .12);
  box-shadow: inset 3px 0 0 rgba(87, 225, 255, .85), 0 0 28px rgba(82, 74, 255, .18);
  transform: translateX(2px);
}

.gcl-rank-table > div.is-top {
  background: linear-gradient(90deg, rgba(255, 216, 77, .09), rgba(255, 255, 255, .018));
}

.gcl-rank-table > div.is-place-1 {
  box-shadow: inset 0 0 0 1px rgba(255, 216, 77, .32), 0 0 34px rgba(255, 216, 77, .08);
}

.gcl-rank-table .is-head {
  background: rgba(255,255,255,.035);
  color: rgba(232, 240, 255, .62);
}

.gcl-rank-table span:nth-child(2) {
  display: grid;
  gap: 0 12px;
  grid-template-columns: auto minmax(0, 1fr);
}

.gcl-rank-table span:nth-child(2) .gcl-rank-dot {
  grid-row: span 2;
}

.gcl-rank-table span:nth-child(2) small {
  color: rgba(220, 231, 247, .62);
  font-size: 11px;
  font-weight: 800;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gcl-rank-medal,
.gcl-mini-rank {
  align-items: center;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 50%;
  color: #fff;
  display: inline-flex;
  font-style: normal;
  font-weight: 1000;
  height: 34px;
  justify-content: center;
  width: 34px;
}

.is-place-1 .gcl-rank-medal,
.gcl-mini-rank.is-1 {
  background: linear-gradient(145deg, #ffe66d, #ff9b20);
  color: #2b1700;
}

.is-place-2 .gcl-rank-medal,
.gcl-mini-rank.is-2 {
  background: linear-gradient(145deg, #eff5ff, #8f9cb4);
  color: #0b1020;
}

.is-place-3 .gcl-rank-medal,
.gcl-mini-rank.is-3 {
  background: linear-gradient(145deg, #ff9a38, #9c4e15);
  color: #fff7ed;
}

.gcl-level-pill {
  background: rgba(12, 14, 28, .86);
  border: 1px solid rgba(160, 91, 255, .72);
  border-radius: 7px;
  box-shadow: 0 0 18px rgba(119, 48, 255, .22);
  color: #fff;
  display: inline-flex;
  font-style: normal;
  font-weight: 1000;
  justify-content: center;
  min-width: 46px;
  padding: 8px 10px;
}

.gcl-win-rate {
  color: #48ff65;
  font-weight: 1000;
  text-shadow: 0 0 16px rgba(72, 255, 101, .28);
}

.gcl-current-rank-strip {
  align-items: center;
  border-color: rgba(50, 93, 255, .58);
  border-radius: 8px;
  cursor: pointer;
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(70px, .5fr) auto minmax(120px, 1fr) minmax(110px, .75fr) minmax(90px, .65fr) minmax(70px, .45fr) minmax(70px, .45fr);
  min-height: 76px;
  padding: 12px 20px;
}

.gcl-current-rank-strip > span {
  color: #ba69ff;
  font-size: 11px;
  font-weight: 1000;
  text-transform: uppercase;
}

.gcl-current-rank-strip strong {
  color: #fff;
}

.gcl-current-rank-strip small {
  color: rgba(228, 237, 250, .7);
  font-weight: 800;
}

.gcl-current-rank-strip b {
  color: #a6ff72;
}

.gcl-current-rank-strip em,
.gcl-current-rank-strip i {
  color: #fff;
  font-style: normal;
  font-weight: 1000;
}

.gcl-rank-overview-card,
.gcl-rank-season-card {
  border-radius: 8px;
  padding: 20px;
}

.gcl-rank-overview-card {
  background:
    linear-gradient(145deg, rgba(13, 16, 31, .92), rgba(9, 12, 24, .9)),
    radial-gradient(circle at 82% 20%, rgba(177, 77, 255, .18), transparent 38%);
}

.gcl-rank-overview-card > strong {
  color: #fff;
  display: block;
  font-size: 42px;
  line-height: 1;
  margin-top: 22px;
}

.gcl-rank-overview-card p {
  color: rgba(233, 241, 255, .7);
  margin: 6px 0 18px;
}

.gcl-rank-overview-card dl {
  display: grid;
  gap: 12px;
  margin: 0;
}

.gcl-rank-overview-card dl div {
  align-items: center;
  display: flex;
  justify-content: space-between;
}

.gcl-rank-overview-card dt {
  color: rgba(105, 230, 255, .72);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.gcl-rank-overview-card dd {
  color: #fff;
  font-weight: 1000;
  margin: 0;
}

.gcl-overview-progress {
  background: rgba(255,255,255,.1);
  border-radius: 999px;
  height: 8px;
  margin-top: 18px;
  overflow: hidden;
}

.gcl-overview-progress i {
  background: linear-gradient(90deg, #b646ff, #245aff, #2ee7ff);
  border-radius: inherit;
  box-shadow: 0 0 20px rgba(94, 82, 255, .5);
  display: block;
  height: 100%;
}

.gcl-rank-card-head {
  align-items: center;
  display: flex;
  justify-content: space-between;
  margin-bottom: 16px;
}

.gcl-rank-season-card ul {
  display: grid;
  gap: 12px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.gcl-rank-season-card li {
  align-items: center;
  cursor: pointer;
  display: grid;
  gap: 10px;
  grid-template-columns: auto auto minmax(0, 1fr) auto;
}

.gcl-rank-season-card li strong {
  color: #fff;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gcl-rank-season-card li b {
  color: #fff;
  font-size: 12px;
  white-space: nowrap;
}

.gcl-rank-feature-strip {
  border-radius: 8px;
  display: grid;
  gap: 0;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 20px;
  overflow: hidden;
}

.gcl-rank-feature-strip article {
  border-right: 1px solid rgba(255,255,255,.08);
  display: grid;
  gap: 4px;
  min-height: 78px;
  padding: 18px 22px;
}

.gcl-rank-feature-strip article:last-child {
  border-right: 0;
}

.gcl-rank-feature-strip span {
  color: #7cecff;
  font-size: 12px;
  font-weight: 1000;
}

.gcl-rank-feature-strip strong {
  color: #fff;
  text-transform: uppercase;
}

.gcl-rank-feature-strip small {
  color: rgba(229, 239, 252, .65);
}

@media (max-width: 1180px) {
  .gcl-rank-command-center {
    grid-template-columns: minmax(190px, 230px) minmax(0, 1fr);
  }

  .gcl-rank-overview-rail {
    grid-column: 1 / -1;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    position: static;
  }
}

@media (max-width: 900px) {
  .gcl-rank-arena-hero .gcl-shell,
  .gcl-rank-command-center {
    grid-template-columns: 1fr;
  }

  .gcl-rank-side-rail {
    position: static;
  }

  .gcl-rank-tabs {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .gcl-rank-tabs button {
    justify-content: center;
    min-height: 48px;
    padding: 0 8px;
  }

  .gcl-rank-tabs button span {
    display: none;
  }

  .gcl-rank-overview-rail,
  .gcl-rank-feature-strip {
    grid-template-columns: 1fr;
  }

  .gcl-rank-feature-strip article {
    border-bottom: 1px solid rgba(255,255,255,.08);
    border-right: 0;
  }
}

@media (max-width: 680px) {
  .gcl-rank-hero-stats {
    grid-template-columns: 1fr;
  }

  .gcl-current-rank-strip {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .gcl-current-rank-strip > span,
  .gcl-current-rank-strip small,
  .gcl-current-rank-strip b,
  .gcl-current-rank-strip em,
  .gcl-current-rank-strip i {
    grid-column: 1 / -1;
  }
}

.gcl-rank-arena-page .gcl-shell {
  max-width: 1760px;
  width: min(100% - 28px, 1760px);
}

.gcl-rank-arena-page .gcl-rank-arena-hero .gcl-shell {
  max-width: 1760px;
}

.gcl-rank-arena-page .gcl-your-performance {
  display: none !important;
}

.gcl-rank-arena-page .gcl-rank-progress-panel,
.gcl-rank-arena-page .gcl-podium,
.gcl-rank-arena-page .gcl-rank-board-grid {
  display: none !important;
}

.gcl-rank-arena-page .gcl-rank-command-center {
  grid-template-columns: clamp(210px, 14vw, 260px) minmax(0, 1fr) clamp(280px, 18vw, 340px);
}

.gcl-rank-arena-page .gcl-rank-main-board {
  align-content: start;
}

.gcl-rank-arena-page .gcl-rank-table-wrap {
  backdrop-filter: blur(14px);
}

.gcl-rank-arena-page .gcl-current-rank-strip {
  bottom: 12px;
  cursor: default;
  left: 50%;
  max-width: min(1180px, calc(100vw - 28px));
  position: sticky;
  transform: translateX(-50%);
  z-index: 80;
}

.gcl-rank-arena-page .gcl-current-rank-strip .gcl-rank-dot {
  height: 52px;
  width: 52px;
}

.gcl-rank-arena-page .gcl-current-rank-strip .gcl-rank-dot img {
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.gcl-rank-arena-page .gcl-player-drawer {
  border-left-color: rgba(122, 91, 255, .45);
  box-shadow: -34px 0 90px rgba(0,0,0,.62), 0 0 0 9999px rgba(0,0,0,.42);
  max-width: 480px;
  z-index: 2147483000;
}

.gcl-rank-arena-page .gcl-player-drawer.is-open {
  transform: translateX(0);
}

.gcl-rank-arena-page .gcl-rank-arena {
  padding-top: 12px;
  padding-bottom: 112px;
}

.gcl-rank-arena-page .gcl-rank-command-center {
  margin-top: 0;
}

.gcl-overview-user {
  align-items: center;
  display: grid;
  gap: 12px;
  grid-template-columns: auto minmax(0, 1fr);
}

.gcl-overview-user .gcl-rank-dot {
  height: 62px;
  width: 62px;
}

.gcl-overview-user .gcl-rank-dot img {
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.gcl-overview-user h2 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 1320px) {
  .gcl-rank-arena-page .gcl-rank-command-center {
    grid-template-columns: minmax(210px, 250px) minmax(0, 1fr);
  }

  .gcl-rank-arena-page .gcl-rank-overview-rail {
    grid-column: 1 / -1;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    position: static;
  }
}

@media (max-width: 920px) {
  .gcl-rank-arena-page .gcl-shell {
    width: min(100% - 20px, 100%);
  }

  .gcl-rank-arena-page .gcl-rank-command-center {
    grid-template-columns: 1fr;
  }

  .gcl-rank-arena-page .gcl-rank-side-rail {
    position: static;
  }

  .gcl-rank-arena-page .gcl-leaderboard-controls {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .gcl-rank-arena-page .gcl-rank-overview-rail {
    grid-row: 1;
  }

  .gcl-rank-arena-page .gcl-rank-main-board {
    grid-row: 2;
  }

  .gcl-rank-arena-page .gcl-rank-side-rail {
    grid-row: 3;
  }

  .gcl-rank-arena-page .gcl-rank-filter-title,
  .gcl-rank-arena-page .gcl-rank-toggle {
    grid-column: 1 / -1;
  }
}

@media (max-width: 620px) {
  .gcl-rank-arena-page .gcl-rank-arena-hero {
    padding-top: 26px;
  }

  .gcl-rank-arena-page .gcl-rank-hero-copy h1 {
    font-size: clamp(42px, 15vw, 64px);
  }

  .gcl-rank-arena-page .gcl-rank-hero-copy p {
    font-size: 13px;
  }

  .gcl-rank-arena-page .gcl-rank-hero-console {
    display: flex;
    gap: 10px;
    margin-inline: -10px;
    overflow-x: auto;
    padding: 0 10px 8px;
    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
  }

  .gcl-rank-arena-page .gcl-rank-hero-console article,
  .gcl-rank-arena-page .gcl-rank-hero-console .gcl-rank-hero-stats {
    flex: 0 0 190px;
    scroll-snap-align: start;
  }

  .gcl-rank-arena-page .gcl-rank-hero-console article {
    display: grid;
    justify-items: start;
    min-height: 72px;
  }

  .gcl-rank-arena-page .gcl-rank-hero-console article strong {
    max-width: 100%;
    overflow: hidden;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .gcl-rank-arena-page .gcl-rank-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .gcl-rank-arena-page .gcl-leaderboard-controls,
  .gcl-rank-arena-page .gcl-rank-overview-rail {
    grid-template-columns: 1fr;
  }

  .gcl-rank-arena-page .gcl-rank-table {
    min-width: 690px;
  }

  .gcl-rank-arena-page .gcl-rank-table > div {
    grid-template-columns: 52px minmax(190px, 1.6fr) 72px 86px 66px 66px 82px;
    padding: 8px 12px;
  }

  .gcl-rank-arena-page .gcl-current-rank-strip {
    align-items: start;
    bottom: 8px;
    gap: 8px;
    grid-template-columns: auto minmax(0, 1fr) auto;
    max-width: calc(100vw - 16px);
    min-height: 64px;
    padding: 10px 12px;
  }

  .gcl-rank-arena-page .gcl-current-rank-strip > span {
    display: none;
  }

  .gcl-rank-arena-page .gcl-current-rank-strip .gcl-rank-dot {
    height: 42px;
    width: 42px;
  }

  .gcl-rank-arena-page .gcl-current-rank-strip strong,
  .gcl-rank-arena-page .gcl-current-rank-strip small {
    grid-column: 2;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .gcl-rank-arena-page .gcl-current-rank-strip b,
  .gcl-rank-arena-page .gcl-current-rank-strip em,
  .gcl-rank-arena-page .gcl-current-rank-strip i {
    grid-column: 3;
    text-align: right;
    white-space: nowrap;
  }

  .gcl-rank-arena-page .gcl-current-rank-strip em {
    display: none;
  }

  .gcl-rank-arena-page .gcl-player-drawer {
    border-left: 0;
    max-width: none;
    width: 100vw;
  }
}

.gcl-community-page .gcl-section {
  position: relative;
  z-index: 1;
}

/* Leaderboard compact stability overrides */
.gcl-rank-arena-page [data-gcl-login-only][hidden] {
  display: none !important;
}

.gcl-rank-arena-page .gcl-current-rank-strip,
.gcl-rank-arena-page [data-gcl-current-rank-strip] {
  display: none !important;
}

.gcl-rank-arena-page .gcl-rank-tabs:has([data-gcl-login-only][hidden]) {
  grid-auto-rows: minmax(52px, auto);
}

.gcl-rank-arena-page .gcl-rank-overview-rail {
  align-content: start;
}

.gcl-rank-arena-page .gcl-rank-overview-card.is-visible,
.gcl-rank-arena-page .gcl-current-rank-strip.is-visible {
  display: grid;
}

.gcl-rank-arena-page .gcl-rank-switch {
  align-items: center;
  cursor: pointer;
  display: grid !important;
  gap: 10px !important;
  grid-template-columns: auto minmax(0, 1fr);
  min-height: 44px;
}

.gcl-rank-arena-page .gcl-rank-switch input {
  height: 1px;
  opacity: 0;
  position: absolute;
  width: 1px;
}

.gcl-rank-arena-page .gcl-switch-track {
  background: rgba(255, 255, 255, .14);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 999px;
  display: block;
  height: 24px;
  position: relative;
  transition: background .18s ease, border-color .18s ease, box-shadow .18s ease;
  width: 46px;
}

.gcl-rank-arena-page .gcl-switch-track::after {
  background: #d8e5f8;
  border-radius: 50%;
  box-shadow: 0 2px 8px rgba(0,0,0,.35);
  content: "";
  height: 18px;
  left: 2px;
  position: absolute;
  top: 2px;
  transition: transform .18s ease, background .18s ease;
  width: 18px;
}

.gcl-rank-arena-page .gcl-rank-switch input:checked + .gcl-switch-track {
  background: linear-gradient(90deg, #21d387, #22a8ff);
  border-color: rgba(99, 235, 255, .7);
  box-shadow: 0 0 18px rgba(34, 168, 255, .22);
}

.gcl-rank-arena-page .gcl-rank-switch input:checked + .gcl-switch-track::after {
  background: #fff;
  transform: translateX(22px);
}

.gcl-rank-arena-page .gcl-rank-switch strong {
  color: #f4f8ff;
  font-size: 12px;
  line-height: 1.1;
  text-transform: uppercase;
}

@media (max-width: 920px) {
  .gcl-rank-arena-page .gcl-rank-arena-hero .gcl-shell {
    gap: 14px;
  }

  .gcl-rank-arena-page .gcl-rank-overview-rail {
    grid-row: auto;
  }

  .gcl-rank-arena-page .gcl-rank-season-card {
    order: 1;
  }

  .gcl-rank-arena-page .gcl-rank-overview-card {
    order: 0;
  }
}

@media (max-width: 620px) {
  .gcl-rank-arena-page .gcl-rank-arena-hero {
    padding: 20px 0 14px;
  }

  .gcl-rank-arena-page .gcl-rank-hero-copy h1 {
    font-size: clamp(34px, 12vw, 52px);
    margin-top: 12px;
  }

  .gcl-rank-arena-page .gcl-rank-hero-copy h2 {
    font-size: 17px;
    margin-bottom: 10px;
  }

  .gcl-rank-arena-page .gcl-rank-hero-copy p {
    display: none;
  }

  .gcl-rank-arena-page .gcl-rank-hero-console article,
  .gcl-rank-arena-page .gcl-rank-hero-console .gcl-rank-hero-stats {
    flex-basis: 168px;
  }

  .gcl-rank-arena-page .gcl-rank-hero-stats {
    display: grid;
    gap: 8px;
  }

  .gcl-rank-arena-page .gcl-rank-hero-stats span {
    min-height: 58px;
    padding: 10px;
  }

  .gcl-rank-arena-page .gcl-rank-hero-stats b {
    font-size: 20px;
  }
}

.gcl-community-topbar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}

body.gcl-player-drawer-open {
  overflow: hidden;
}

body > .gcl-player-drawer,
.gcl-player-drawer {
  bottom: auto !important;
  height: 100dvh;
  inset: 0 0 auto auto !important;
  max-height: 100dvh;
  overflow-y: auto;
  overscroll-behavior: contain;
  position: fixed !important;
  z-index: 2147483647 !important;
}

body > .gcl-player-drawer::before {
  background: rgba(0, 0, 0, .48);
  content: "";
  inset: 0;
  pointer-events: none;
  position: fixed;
  transform: translateX(-100%);
  width: 100vw;
}

@media (max-width: 620px) {
  body > .gcl-player-drawer,
  .gcl-player-drawer {
    border-left: 0 !important;
    width: 100vw !important;
  }
}

/* Home mobile polish */
@media (max-width: 720px) {
  .gcl-root .gcl-landing,
  .gcl-modern-landing {
    min-height: 0 !important;
  }

  body .gcl-root .gcl-modern-landing > .gcl-home-shell,
  body .gcl-root .gcl-section.gcl-landing > .gcl-shell {
    width: calc(100% - 24px) !important;
    max-width: calc(100% - 24px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .gcl-root .gcl-section.gcl-landing {
    padding: 12px 0 18px !important;
  }

  body .gcl-root .gcl-landing-hero {
    border: 0 !important;
    border-radius: 8px;
    box-shadow: none !important;
    gap: 10px !important;
    grid-template-columns: 1fr !important;
    min-height: 0 !important;
    padding: 18px 20px !important;
    width: 100% !important;
  }

  body .gcl-root .gcl-landing-hero::before,
  body .gcl-root .gcl-landing-hero::after {
    border: 0 !important;
    box-shadow: none !important;
  }

  .gcl-hero-bg-slider {
    opacity: .62;
  }

  .gcl-hero-bg-slider::after {
    background:
      linear-gradient(180deg, rgba(2, 14, 24, .78), rgba(2, 14, 24, .58)),
      linear-gradient(90deg, rgba(2, 18, 31, .74), rgba(2, 18, 31, .24));
  }

  .gcl-landing-copy .gcl-kicker {
    font-size: 9px !important;
    margin-bottom: 6px !important;
  }

  .gcl-landing-copy h1 {
    font-size: clamp(24px, 7.4vw, 32px) !important;
    line-height: .96 !important;
    max-width: 15ch !important;
  }

  .gcl-landing-copy p {
    color: rgba(226, 238, 250, .76);
    font-size: 11px !important;
    line-height: 1.32 !important;
    margin: 8px 0 0 !important;
    max-width: 38ch !important;
  }

  .gcl-action-row {
    display: grid;
    gap: 8px !important;
    grid-template-columns: 1fr 1fr;
    margin-top: 10px !important;
  }

  .gcl-action-row .gcl-button {
    font-size: 11px !important;
    min-height: 36px !important;
    padding: 8px 7px !important;
    text-align: center;
  }

  body .gcl-root .gcl-landing-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 5px !important;
    margin: 10px 0 0 !important;
    overflow: visible !important;
    padding: 0 !important;
    scroll-snap-type: none !important;
  }

  body .gcl-root .gcl-landing-stats span {
    display: block !important;
    grid-column: auto !important;
    min-height: 40px !important;
    min-width: 0 !important;
    padding: 6px !important;
    width: auto !important;
  }

  body .gcl-root .gcl-landing-stats strong {
    font-size: 16px !important;
    line-height: .95 !important;
  }

  body .gcl-root .gcl-landing-stats small {
    font-size: 7px !important;
    line-height: 1 !important;
  }

  .gcl-landing-live,
  .gcl-branch-pulse {
    display: none !important;
  }

  .gcl-reserve-band {
    gap: 12px;
    margin-top: 14px;
    padding: 14px;
  }

  .gcl-reserve-band h2,
  .gcl-section-title h2,
  .gcl-heading-actions h1 {
    font-size: clamp(22px, 7.2vw, 30px) !important;
    line-height: .96 !important;
  }

  .gcl-section-title,
  .gcl-heading-actions {
    margin-bottom: 10px !important;
  }

  .gcl-section-title p {
    font-size: 11px !important;
    line-height: 1.3 !important;
  }

  .gcl-landing-strip,
  .gcl-home-rankings {
    margin-top: 16px !important;
  }

  .gcl-landing-strip {
    padding-top: 4px !important;
  }

  .gcl-home-rank-banner {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    margin-top: 16px !important;
    padding: 14px !important;
  }

  .gcl-home-rank-banner-copy h2 {
    font-size: clamp(22px, 7.2vw, 30px) !important;
    margin: 8px 0 5px !important;
  }

  .gcl-home-rank-banner-copy p {
    font-size: 11px !important;
    line-height: 1.32 !important;
  }

  .gcl-home-rank-banner-console {
    gap: 6px !important;
  }

  .gcl-home-rank-banner-console article {
    min-height: 38px !important;
    padding: 8px 10px !important;
  }

  .gcl-home-rank-banner-console article span,
  .gcl-home-rank-banner-stats small {
    font-size: 7px !important;
  }

  .gcl-home-rank-banner-console article strong {
    font-size: 11px !important;
  }

  .gcl-home-rank-banner-stats {
    gap: 5px !important;
  }

  .gcl-home-rank-banner-stats span {
    min-height: 38px !important;
    padding: 7px !important;
  }

  .gcl-home-rank-banner-stats b {
    font-size: 16px !important;
  }

  .gcl-root .gcl-vps-page .gcl-grid-4,
  .gcl-root .gcl-vps-page .gcl-grid-3,
  .gcl-grid-4,
  .gcl-grid-3 {
    gap: 10px;
  }

  .gcl-card,
  .gcl-panel,
  .gcl-package-card,
  .gcl-cover-only-card {
    border-radius: 8px;
  }

  .gcl-cover-only-card {
    min-height: 132px;
  }

  .gcl-game-cover-body {
    padding: 10px;
  }

  .gcl-game-cover-body h3 {
    font-size: 12px;
    line-height: 1.12;
  }

  .gcl-game-cover-body small {
    font-size: 10px;
  }

  .gcl-package-card,
  .gcl-branch-card,
  .gcl-card {
    padding: 12px;
  }

  .gcl-youtube-grid {
    gap: 12px;
    grid-template-columns: 1fr;
  }

  .gcl-ranking-row {
    min-height: 52px;
    padding: 8px 10px;
  }
}

@media (max-width: 440px) {
  body .gcl-root .gcl-landing-hero {
    padding: 16px 18px !important;
  }

  .gcl-action-row {
    grid-template-columns: 1fr 1fr;
  }

  .gcl-landing-copy h1 {
    font-size: clamp(22px, 7vw, 28px) !important;
    max-width: 15ch !important;
  }

  .gcl-section-title h2,
  .gcl-heading-actions h1 {
    font-size: clamp(20px, 8.5vw, 26px) !important;
  }

  .gcl-landing-copy p {
    font-size: 10px !important;
  }

  body .gcl-root .gcl-landing-stats span {
    min-height: 36px !important;
    padding: 5px !important;
  }

  body .gcl-root .gcl-landing-stats strong {
    font-size: 15px !important;
  }

  body .gcl-root .gcl-landing-stats small {
    font-size: 6.5px !important;
  }

  .gcl-game-cover-grid {
    gap: 8px;
  }
}

@media (max-width: 620px) {
  .gcl-rank-arena-page .gcl-rank-table.is-game {
    min-width: 0 !important;
  }

  .gcl-rank-arena-page .gcl-rank-table.is-game > div {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

.gcl-community-layout {
  align-items: start;
  display: grid;
  gap: 22px;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 320px);
}

.gcl-community-composer,
.gcl-community-post {
  background: rgba(2, 16, 28, .82);
  border: 1px solid rgba(92, 189, 255, .22);
  border-radius: 8px;
  box-shadow: 0 20px 70px rgba(0,0,0,.24);
}

.gcl-community-composer {
  padding: 18px;
  position: relative;
  top: auto;
}

.gcl-community-composer form,
.gcl-community-comment-form {
  display: grid;
  gap: 12px;
}

.gcl-community-composer label,
.gcl-community-comment-form {
  display: grid;
  gap: 7px;
}

.gcl-community-composer input,
.gcl-community-composer select,
.gcl-community-composer textarea,
.gcl-community-comment-form textarea {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 8px;
  color: #eef8ff;
  font: inherit;
  min-width: 0;
  padding: 12px;
}

.gcl-community-composer small {
  color: rgba(221,236,249,.72);
  font-weight: 900;
  text-transform: uppercase;
}

.gcl-community-login-note {
  align-items: center;
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(0, 1fr) auto;
}

.gcl-community-login-note strong {
  color: #ffd522;
  font-size: 18px;
}

.gcl-community-login-note p {
  margin: 0;
}

.gcl-community-sidebar {
  display: grid;
  gap: 14px;
  position: sticky;
  top: 96px;
}

.gcl-community-sidebar section {
  background: rgba(2, 16, 28, .72);
  border: 1px solid rgba(92, 189, 255, .18);
  border-radius: 8px;
  display: grid;
  gap: 10px;
  padding: 16px;
}

.gcl-community-sidebar strong {
  color: #fff;
  font-size: 15px;
  text-transform: uppercase;
}

.gcl-community-sidebar p {
  color: rgba(226, 238, 250, .72);
  font-size: 13px;
  line-height: 1.45;
  margin: 0;
}

.gcl-community-sidebar a {
  color: #6deaff;
  font-weight: 900;
  text-decoration: none;
}

.gcl-community-feed {
  display: grid;
  gap: 18px;
}

.gcl-community-post {
  overflow: hidden;
  padding: 18px;
}

.gcl-community-post-head {
  display: flex;
  gap: 14px;
  justify-content: space-between;
}

.gcl-community-post-head span {
  background: rgba(255,213,34,.12);
  border: 1px solid rgba(255,213,34,.32);
  border-radius: 999px;
  color: #ffe36d;
  display: inline-flex;
  font-size: 12px;
  font-weight: 1000;
  letter-spacing: 0;
  padding: 5px 10px;
  text-transform: uppercase;
}

.gcl-community-post h2 {
  font-size: clamp(24px, 3vw, 38px);
  line-height: 1.02;
  margin: 10px 0 6px;
}

.gcl-community-post h2 a {
  color: #fff;
  text-decoration: none;
}

.gcl-community-post small,
.gcl-community-muted {
  color: rgba(221,236,249,.62);
}

.gcl-community-post-body {
  color: rgba(238,248,255,.84);
  font-size: 16px;
  line-height: 1.7;
  margin: 14px 0;
  white-space: pre-wrap;
}

.gcl-community-post-image {
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 8px;
  display: block;
  margin: 12px 0;
  overflow: hidden;
}

.gcl-community-post-image img {
  aspect-ratio: 16 / 9;
  display: block;
  height: auto;
  object-fit: cover;
  width: 100%;
}

.gcl-community-post-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 16px 0;
}

.gcl-community-post-actions a,
.gcl-community-post-actions button {
  align-items: center;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 8px;
  color: #eef8ff;
  cursor: pointer;
  display: inline-flex;
  font-weight: 900;
  min-height: 40px;
  padding: 0 13px;
  text-decoration: none;
}

.gcl-community-post-actions button.is-liked {
  background: rgba(255,213,34,.18);
  border-color: rgba(255,213,34,.45);
  color: #ffe36d;
}

.gcl-community-comments {
  border-top: 1px solid rgba(255,255,255,.1);
  display: grid;
  gap: 12px;
  padding-top: 14px;
}

.gcl-community-comment {
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 8px;
  padding: 12px;
}

.gcl-community-comment strong {
  color: #fff;
}

.gcl-community-comment p {
  color: rgba(238,248,255,.82);
  margin: 6px 0;
  white-space: pre-wrap;
}

@media (max-width: 980px) {
  .gcl-community-layout {
    grid-template-columns: 1fr;
  }

  .gcl-community-composer,
  .gcl-community-sidebar {
    position: static;
  }
}

@media (max-width: 620px) {
  .gcl-rank-table.is-game {
    min-width: 0 !important;
  }

  .gcl-rank-table.is-game .is-head {
    display: none !important;
  }

  .gcl-rank-table.is-game > div {
    border: 1px solid rgba(89, 226, 255, .14);
    border-radius: 8px;
    display: grid;
    gap: 8px 10px;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    margin: 10px;
    min-height: 0;
    padding: 12px !important;
  }

  .gcl-rank-table.is-game > div span {
    align-items: center;
    display: flex;
    gap: 8px;
    justify-content: space-between;
    min-width: 0;
  }

  .gcl-rank-table.is-game > div span::before {
    color: rgba(220, 231, 247, .54);
    content: attr(data-label);
    font-size: 10px;
    font-weight: 1000;
    text-transform: uppercase;
  }

  .gcl-rank-table.is-game > div span:nth-child(1),
  .gcl-rank-table.is-game > div span:nth-child(2) {
    grid-column: 1 / -1;
  }

  .gcl-rank-table.is-game > div span:nth-child(2) {
    justify-content: flex-start;
  }

  .gcl-rank-table.is-game > div span:nth-child(2)::before {
    display: none;
  }

  .gcl-rank-table.is-game > div span:nth-child(2) b {
    font-size: 16px;
  }

  .gcl-community-page .gcl-section-title h2 {
    font-size: clamp(32px, 11vw, 48px);
  }

  .gcl-community-topbar {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .gcl-community-login-note {
    grid-template-columns: 1fr;
  }

  .gcl-community-composer {
    padding: 14px;
  }

  .gcl-community-composer form {
    gap: 10px;
  }

  .gcl-community-post {
    padding: 14px;
  }

  .gcl-community-post h2 {
    font-size: 22px;
  }

  .gcl-community-post-body {
    font-size: 14px;
    line-height: 1.55;
  }

  .gcl-community-post-actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .gcl-community-post-actions a,
  .gcl-community-post-actions button {
    justify-content: center;
    min-width: 0;
    padding: 0 8px;
  }
}

@media (max-width: 620px) {
  .gcl-community-post,
  .gcl-community-composer {
    padding: 14px;
  }

  .gcl-community-post-actions {
    display: grid;
  }
}

@media (max-width: 900px) {
  .gcl-home-rank-head,
  .gcl-home-rank-command {
    grid-template-columns: 1fr;
  }

  .gcl-home-rank-head {
    display: grid;
  }

  .gcl-ranking-board-head {
    display: none;
  }

  .gcl-ranking-board {
    gap: 8px;
    border: 0;
    background: transparent;
  }

  .gcl-ranking-row {
    grid-template-columns: 42px minmax(0, 1fr) auto;
    gap: 10px;
    min-height: 58px;
    border: 1px solid rgba(72, 255, 123, .16);
    border-radius: 8px;
    background: rgba(0, 0, 0, .34);
  }

  .gcl-ranking-row .gcl-ranking-level,
  .gcl-ranking-row > span:nth-last-child(2),
  .gcl-ranking-row > span:nth-last-child(1) {
    display: none;
  }

  .gcl-ranking-player {
    gap: 9px;
  }

  .gcl-ranking-avatar {
    width: 36px;
    height: 36px;
    flex-basis: 36px;
    font-size: 11px;
  }
}

@media (max-width: 520px) {
  .gcl-home-rankings {
    margin-top: 26px;
    padding: 12px;
  }

  .gcl-home-rank-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
  }

  .gcl-home-rank-stats span {
    min-height: 58px;
    padding: 9px 8px;
  }

  .gcl-home-rank-stats b {
    font-size: 17px;
  }

  .gcl-home-rank-stats small {
    font-size: 8px;
  }

  .gcl-ranking-row {
    grid-template-columns: 34px minmax(0, 1fr) auto;
    padding: 8px;
  }

  .gcl-ranking-place {
    font-size: 13px;
  }

  .gcl-ranking-row strong {
    font-size: 13px;
  }

  .gcl-ranking-row small {
    font-size: 9px;
  }

  .gcl-ranking-row b {
    font-size: 12px;
  }
}

/* Leaderboard page full-scroll board + current player sticky row */
.gcl-rank-arena-page .gcl-rank-table-wrap {
  height: min(560px, calc(100vh - 190px));
  min-height: 360px;
  max-height: 680px;
  overflow: auto !important;
  overscroll-behavior: contain;
  padding-bottom: 72px;
  scrollbar-width: none !important;
}

.gcl-rank-arena-page .gcl-rank-table-wrap::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
  display: none;
}

.gcl-rank-arena-page .gcl-rank-main-board {
  min-height: 0;
}

.gcl-rank-arena-page .gcl-rank-table-head {
  position: sticky;
  top: 0;
  z-index: 5;
  background: rgba(5, 7, 17, .96);
  backdrop-filter: blur(12px);
}

.gcl-rank-arena-page .gcl-rank-table .is-head {
  position: sticky;
  top: 74px;
  z-index: 4;
  background: rgba(9, 12, 24, .96);
}

.gcl-current-rank-sticky {
  position: sticky;
  bottom: 0;
  z-index: 6;
  display: grid;
  grid-template-columns: 62px minmax(220px, 1.7fr) minmax(84px, .7fr) minmax(92px, .75fr) minmax(74px, .55fr) minmax(74px, .55fr) minmax(88px, .65fr);
  gap: 0;
  align-items: center;
  min-height: 64px;
  margin-top: 8px;
  padding: 8px 20px;
  border: 1px solid rgba(72, 255, 123, .36);
  border-radius: 8px;
  background: linear-gradient(90deg, rgba(9, 37, 18, .96), rgba(12, 18, 28, .98));
  box-shadow: 0 -12px 34px rgba(0, 0, 0, .34), 0 0 24px rgba(72, 255, 123, .12);
  cursor: pointer;
}

.gcl-current-rank-sticky[hidden] {
  display: none !important;
}

.gcl-current-rank-sticky::before {
  content: "Your Row";
  position: absolute;
  left: 12px;
  top: -10px;
  padding: 2px 8px;
  border: 1px solid rgba(72, 255, 123, .34);
  border-radius: 999px;
  background: #000;
  color: #48ff7b;
  font-size: 9px;
  font-weight: 1000;
  text-transform: uppercase;
}

.gcl-current-rank-sticky span:nth-child(2) {
  display: grid;
  gap: 0 12px;
  grid-template-columns: auto minmax(0, 1fr);
}

.gcl-current-rank-sticky span:nth-child(2) .gcl-rank-dot {
  grid-row: span 2;
}

.gcl-current-rank-sticky b {
  color: #fff;
}

.gcl-home-rankings .gcl-rank-table-wrap.is-home-board {
  margin-top: 16px;
  border-color: rgba(72, 255, 123, .2);
}

.gcl-home-rankings .gcl-rank-table-wrap.is-home-board .gcl-rank-table-head h2 {
  font-size: clamp(20px, 2.2vw, 30px);
}

.gcl-home-rankings .gcl-rank-table-wrap.is-home-board .gcl-rank-table {
  min-width: 720px;
}

.gcl-home-rankings .gcl-rank-table-wrap.is-home-board {
  overflow-x: auto;
  scrollbar-width: none;
}

.gcl-home-rankings .gcl-rank-table-wrap.is-home-board::-webkit-scrollbar {
  width: 0;
  height: 0;
}

@media (max-width: 720px) {
  .gcl-current-rank-sticky {
    grid-template-columns: 42px minmax(170px, 1fr) 60px 70px;
  }

  .gcl-current-rank-sticky > span:nth-child(n+5) {
    display: none;
  }
}

.gcl-sound-toggle {
  align-items: center;
  background: rgba(7,24,42,.86);
  border: 1px solid rgba(89,226,255,.2);
  border-radius: 50%;
  cursor: pointer;
  display: inline-flex;
  height: 38px;
  justify-content: center;
  min-height: 38px;
  padding: 0;
  position: relative;
  transition: border-color 360ms ease, box-shadow 360ms ease;
  width: 38px;
}

.gcl-sound-toggle span {
  border-color: transparent #8eabbf transparent transparent;
  border-style: solid;
  border-width: 5px 7px 5px 0;
  height: 0;
  margin-left: -3px;
  width: 0;
}

.gcl-sound-toggle span::before {
  background: #8eabbf;
  content: "";
  height: 7px;
  left: 10px;
  position: absolute;
  top: 14px;
  width: 6px;
}

.gcl-sound-toggle i,
.gcl-sound-toggle i::after {
  border: 1px solid #8eabbf;
  border-bottom-color: transparent;
  border-left-color: transparent;
  border-radius: 50%;
  border-top-color: transparent;
  height: 12px;
  position: absolute;
  right: 8px;
  width: 8px;
}

.gcl-sound-toggle i::after { content: ""; height: 6px; right: 2px; top: 2px; width: 4px; }
.gcl-sound-toggle.is-on { border-color: rgba(72,255,123,.55); box-shadow: 0 0 18px rgba(72,255,123,.16); }
.gcl-sound-toggle.is-on span { border-right-color: #48ff7b; }
.gcl-sound-toggle.is-on span::before { background: #48ff7b; }
.gcl-sound-toggle.is-on i, .gcl-sound-toggle.is-on i::after { border-right-color: #48ff7b; }

.gcl-sound-toggle .gcl-svg-icon {
  color: #8eabbf;
  height: 18px;
  transition: color 320ms ease, transform 320ms ease;
  width: 18px;
}

.gcl-sound-toggle .gcl-sound-state {
  background: #ff6b84;
  border: 0;
  border-radius: 50%;
  bottom: 5px;
  box-shadow: 0 0 8px rgba(255,107,132,.42);
  height: 5px;
  margin: 0;
  position: absolute;
  right: 4px;
  width: 5px;
}

.gcl-sound-toggle .gcl-sound-state::before { content: none; }
.gcl-sound-toggle.is-on .gcl-svg-icon { color: #48ff7b; transform: scale(1.06); }
.gcl-sound-toggle.is-on .gcl-sound-state { background: #48ff7b; box-shadow: 0 0 9px rgba(72,255,123,.52); }

.gcl-page-transition {
  display: none !important;
}

.gcl-page-transition.is-active { display: none !important; }
.gcl-page-transition span { background: #59e2ff; box-shadow: 0 0 24px rgba(89,226,255,.55); height: 2px; transform: scaleX(0); transform-origin: left; width: min(240px, 55vw); }
.gcl-page-transition.is-active span { animation: gclPageLoadLine 420ms cubic-bezier(.2,.8,.2,1) both; }
.gcl-page-transition i { border: 2px solid rgba(89,226,255,.2); border-radius: 50%; height: 34px; position: absolute; width: 34px; }

.gcl-button.is-loading {
  color: transparent !important;
  cursor: wait;
  pointer-events: none;
  position: relative;
}

.gcl-button.is-loading::after {
  animation: gclButtonLoading 800ms linear infinite;
  border: 2px solid rgba(255,255,255,.32);
  border-radius: 50%;
  border-top-color: #fff;
  content: "";
  height: 16px;
  left: calc(50% - 8px);
  position: absolute;
  top: calc(50% - 8px);
  width: 16px;
}

.gcl-empty,
.gcl-empty-state {
  background-image: none;
  border-style: dashed;
}

@keyframes gclPageLoadLine { 0% { transform: scaleX(0); } 100% { transform: scaleX(1); } }
@keyframes gclButtonLoading { to { transform: rotate(360deg); } }

/* 2026 gaming atmosphere: slow composited motion with small-device safeguards. */
.gcl-root {
  --gcl-neon-cyan: #59e2ff;
  --gcl-neon-gold: #ffd324;
  --gcl-neon-violet: #9a62ff;
  isolation: isolate;
  overflow-x: clip;
  overflow-clip-margin: 20px;
}

.gcl-home-carousel-viewport,
.gcl-game-cover-grid,
.gcl-trending-game-row,
.gcl-player-board-list,
.gcl-live-arena-grid {
  overflow-clip-margin: 22px;
}

.gcl-home-carousel-viewport {
  overflow: clip;
}

.gcl-vps-page .gcl-section-heading h1,
.gcl-vps-page .gcl-section-heading h2,
.gcl-modern-landing h1 {
  text-wrap: balance;
  text-shadow: 0 0 28px rgba(89, 226, 255, .12);
}

.gcl-vps-page .gcl-card,
.gcl-vps-page [data-gcl-game-card],
.gcl-vps-page .gcl-package-card,
.gcl-vps-page .gcl-player-board-row,
.gcl-vps-page .gcl-video-card,
.gcl-vps-page .gcl-branch-card {
  backface-visibility: hidden;
  transition: border-color 520ms ease, box-shadow 520ms ease, transform 520ms cubic-bezier(.2,.75,.2,1), background-color 520ms ease;
}

@media (hover: hover) and (pointer: fine) {
  .gcl-vps-page .gcl-card:hover,
  .gcl-vps-page [data-gcl-game-card]:hover,
  .gcl-vps-page .gcl-package-card:hover,
  .gcl-vps-page .gcl-video-card:hover,
  .gcl-vps-page .gcl-branch-card:hover {
    border-color: rgba(89, 226, 255, .42);
    box-shadow: 0 22px 52px rgba(0,0,0,.32), 0 0 34px rgba(89,226,255,.08);
    transform: translate3d(0, -4px, 0);
  }

  .gcl-vps-page [data-gcl-game-card]:hover {
    transform: translate3d(0, -4px, 0) scale(1.015);
  }
}

@media (prefers-reduced-motion: reduce) {
  .gcl-site-bg-slider img {
    transition: opacity 180ms ease;
    transform: none;
    filter: none;
  }

  .gcl-site-bg.is-game-hovering .gcl-site-bg-slider img {
    filter: none;
    transform: none;
  }
}

.gcl-motion-item {
  opacity: 1;
  transform: none;
}

.gcl-motion-item.is-visible {
  opacity: 1;
  transform: none;
}

.gcl-button,
.gcl-watch-pill,
.gcl-link {
  transition-duration: 420ms;
}

.gcl-hero-reserve {
  box-shadow: 0 0 0 1px rgba(255,211,36,.18), 0 12px 34px rgba(255,211,36,.14);
  position: relative;
}

.gcl-hero-reserve::after {
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.48), transparent);
  content: "";
  inset: 0;
  position: absolute;
  transform: translateX(-120%);
  animation: gclHeroButtonSweep 4.8s ease-in-out infinite;
}

.gcl-hero-live-console {
  backdrop-filter: blur(14px);
  background: linear-gradient(120deg, rgba(4,18,34,.88), rgba(11,29,52,.68));
  border: 1px solid rgba(89,226,255,.2);
  border-radius: 12px;
  box-shadow: 0 16px 46px rgba(0,0,0,.26), inset 0 1px rgba(255,255,255,.04);
  display: grid;
  gap: 1px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 22px;
  max-width: 760px;
  overflow: hidden;
}

.gcl-hero-live-console > span {
  align-content: center;
  display: grid;
  min-height: 78px;
  padding: 12px 15px;
  position: relative;
}

.gcl-hero-live-console > span + span {
  border-left: 1px solid rgba(255,255,255,.07);
}

.gcl-hero-live-console i {
  background: var(--gcl-neon-cyan);
  border-radius: 50%;
  box-shadow: 0 0 12px currentColor;
  height: 6px;
  position: absolute;
  right: 10px;
  top: 10px;
  width: 6px;
}

.gcl-hero-live-console i.is-online {
  background: #48ff7b;
  animation: gclLiveConsolePulse 2.2s ease-in-out infinite;
}

.gcl-hero-live-console b {
  color: #fff;
  font-family: "Orbitron", sans-serif;
  font-size: clamp(17px, 2vw, 24px);
  line-height: 1;
}

.gcl-hero-live-console small {
  color: rgba(201,225,241,.7);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .08em;
  margin-top: 7px;
  text-transform: uppercase;
}

.gcl-hero-live-console .is-countdown b {
  color: var(--gcl-neon-gold);
  font-size: clamp(14px, 1.6vw, 19px);
}

@keyframes gclHeroButtonSweep {
  0%, 68% { transform: translateX(-120%); }
  86%, 100% { transform: translateX(120%); }
}

@keyframes gclLiveConsolePulse {
  0%, 100% { opacity: .55; transform: scale(.82); }
  50% { opacity: 1; transform: scale(1.2); }
}

.gcl-game-discovery {
  margin-top: clamp(38px, 7vw, 84px);
}

.gcl-library-spotlight {
  display: grid;
  gap: 14px;
}

.gcl-library-spotlight-head {
  align-items: end;
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.gcl-library-spotlight-head h2 {
  color: #f4f8ff;
  font-size: clamp(20px, 2.2vw, 32px);
  margin: 4px 0 6px;
  text-transform: uppercase;
}

.gcl-library-spotlight-head p {
  color: rgba(203,219,236,.7);
  margin: 0;
  max-width: 56ch;
}

.gcl-library-spotlight-layout {
  display: grid;
  gap: 10px;
  grid-template-columns: minmax(0, 1.72fr) minmax(0, 1fr);
}

.gcl-spotlight-main {
  align-items: end;
  background: transparent;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px;
  color: #fff;
  display: grid;
  height: clamp(250px, 26vw, 300px);
  overflow: hidden;
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  position: relative;
  text-decoration: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 12px 30px rgba(0,0,0,.16);
}

.gcl-spotlight-main::before,
.gcl-spotlight-card::before {
  background-image: var(--card-cover);
  background-position: center;
  background-size: cover;
  content: "";
  inset: 0;
  filter: blur(28px) saturate(1.18);
  opacity: .42;
  transform: scale(1.22);
  position: absolute;
}

.gcl-spotlight-main::before {
  mask-image: linear-gradient(90deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.82) 42%, rgba(0,0,0,.2) 100%);
  -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.82) 42%, rgba(0,0,0,.2) 100%);
}

.gcl-spotlight-card::before {
  mask-image: linear-gradient(90deg, rgba(0,0,0,.78) 0%, rgba(0,0,0,.42) 64%, rgba(0,0,0,.05) 100%);
  -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,.78) 0%, rgba(0,0,0,.42) 64%, rgba(0,0,0,.05) 100%);
}

.gcl-spotlight-main::after {
  background: linear-gradient(90deg, rgba(6,10,18,.08) 0%, rgba(6,10,18,.16) 18%, rgba(0,0,0,.08) 44%, rgba(0,0,0,.58) 100%),
              linear-gradient(180deg, rgba(6,10,18,.04) 18%, rgba(0,0,0,.68) 100%);
  content: "";
  inset: 0;
  position: absolute;
}

.gcl-spotlight-main-art,
.gcl-spotlight-card-art {
  inset: 0;
  position: absolute;
}

.gcl-spotlight-main-art img,
.gcl-spotlight-card-art img {
  display: block;
}

.gcl-spotlight-main-art,
.gcl-spotlight-card-art {
  inset: 0;
  position: absolute;
  z-index: 0;
}

.gcl-spotlight-main-art img,
.gcl-spotlight-card-art img {
  height: 100%;
  object-fit: cover;
  object-position: center;
  width: 100%;
  filter: saturate(1.04) contrast(1.04);
  transform: scale(1.01);
}

.gcl-spotlight-main-copy {
  display: grid;
  gap: 4px;
  padding: 20px 22px 22px;
  position: relative;
  z-index: 1;
  align-self: end;
  max-width: 74%;
  min-height: 0;
}

.gcl-spotlight-main-copy strong {
  font-family: "Orbitron", "Rajdhani", sans-serif;
  font-size: clamp(42px, 4vw, 52px);
  font-style: italic;
  font-weight: 900;
  line-height: .88;
  letter-spacing: .02em;
  text-transform: uppercase;
}

.gcl-spotlight-main-copy p {
  color: rgba(220,232,244,.78);
  margin: 0;
  max-width: 32ch;
  font-family: "Rajdhani", "Inter", sans-serif;
  font-size: 15px;
  font-weight: 500;
  opacity: .9;
}

.gcl-spotlight-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: 1fr;
}

.gcl-spotlight-card {
  align-items: center;
  background: rgba(8,12,18,.02);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px;
  color: #fff;
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(0, 35%) minmax(0, 65%);
  height: calc((clamp(250px, 26vw, 300px) - 10px) / 2);
  overflow: hidden;
  padding: 10px;
  text-decoration: none;
  backdrop-filter: blur(14px) saturate(135%);
  -webkit-backdrop-filter: blur(14px) saturate(135%);
  position: relative;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.03), 0 10px 22px rgba(0,0,0,.12);
}

.gcl-spotlight-card img {
  border-radius: 10px;
  height: 100%;
  object-fit: cover;
  width: 100%;
  filter: saturate(1.08) contrast(1.05);
  position: relative;
  z-index: 1;
}

.gcl-spotlight-card span {
  display: grid;
  gap: 5px;
  min-width: 0;
  align-self: center;
  position: relative;
  z-index: 1;
}

.gcl-spotlight-card small {
  color: #ffd324;
  font-size: 8px;
  font-weight: 1000;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.gcl-spotlight-card strong {
  font-family: "Orbitron", "Rajdhani", sans-serif;
  font-size: clamp(25px, 2.5vw, 32px);
  font-style: italic;
  font-weight: 900;
  line-height: 1.08;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  letter-spacing: .01em;
  text-transform: uppercase;
}

.gcl-spotlight-card em {
  color: rgba(198,219,234,.68);
  font-family: "Rajdhani", "Inter", sans-serif;
  font-size: clamp(12px, 1.2vw, 16px);
  font-weight: 500;
  font-style: normal;
  opacity: .82;
}

@media (max-width: 1024px) {
  .gcl-library-spotlight-layout {
    gap: 10px;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, .95fr);
  }

  .gcl-spotlight-main {
    height: auto;
    min-height: 240px;
  }

  .gcl-spotlight-main-copy {
    max-width: 82%;
  }

  .gcl-spotlight-main-copy strong {
    font-size: clamp(30px, 4.8vw, 42px);
  }

  .gcl-spotlight-card {
    height: auto;
    min-height: 108px;
  }

  .gcl-spotlight-card strong {
    font-size: clamp(20px, 3.6vw, 28px);
  }

  .gcl-new-releases-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .gcl-library-spotlight-layout {
    grid-template-columns: 1fr;
  }

  .gcl-spotlight-main {
    height: auto;
    min-height: 240px;
  }

  .gcl-spotlight-grid {
    grid-template-columns: 1fr;
  }

  .gcl-spotlight-main-copy {
    max-width: 88%;
  }

  .gcl-spotlight-main-copy strong {
    font-size: clamp(28px, 7vw, 38px);
  }

  .gcl-spotlight-card strong {
    font-size: clamp(20px, 5vw, 28px);
  }

  .gcl-new-releases-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .gcl-spotlight-card {
    height: auto;
    min-height: 100px;
  }
}

@media (max-width: 640px) {
  .gcl-library-spotlight-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .gcl-spotlight-main-copy {
    max-width: 90%;
    padding: 14px 16px 16px;
  }

  .gcl-spotlight-main-copy strong {
    font-size: clamp(24px, 9vw, 32px);
  }

  .gcl-spotlight-card {
    min-height: 96px;
    height: auto;
  }

  .gcl-spotlight-card strong {
    font-size: clamp(18px, 7vw, 24px);
  }

  .gcl-new-releases-row {
    grid-template-columns: 1fr;
  }
}

.gcl-new-releases {
  display: grid;
  gap: 12px;
}

.gcl-new-releases-head {
  align-items: end;
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.gcl-new-releases-head h2 {
  color: #fff;
  font-size: clamp(20px, 2.4vw, 34px);
  margin: 2px 0 6px;
  text-transform: uppercase;
}

.gcl-new-releases-head p {
  color: rgba(203,219,236,.68);
  margin: 0;
  max-width: 60ch;
}

.gcl-new-releases-row {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.gcl-home-new-releases {
  display: block;
}

.gcl-home-new-releases > .gcl-shell {
  width: min(100% - 24px, var(--gcl-shell, 1180px));
  margin-inline: auto;
}

.gcl-new-release-card {
  color: #fff;
  display: grid;
  gap: 10px;
  text-decoration: none;
}

.gcl-new-release-card img {
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px;
  aspect-ratio: 0.76;
  object-fit: cover;
  width: 100%;
}

.gcl-new-release-card span {
  display: grid;
  gap: 3px;
}

.gcl-new-release-card small {
  color: #ffd324;
  font-size: 8px;
  font-weight: 1000;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.gcl-new-release-card strong {
  font-size: 13px;
  line-height: 1.1;
}

.gcl-player-progress-teaser {
  align-items: center;
  background: linear-gradient(105deg, rgba(11,28,49,.96), rgba(16,17,42,.91));
  border: 1px solid rgba(154,98,255,.28);
  border-radius: 14px;
  box-shadow: 0 22px 60px rgba(0,0,0,.28), inset 0 1px rgba(255,255,255,.05);
  display: grid;
  gap: 22px;
  grid-template-columns: auto minmax(240px, 1fr) minmax(230px, .75fr) auto;
  margin-top: 0;
  overflow: hidden;
  padding: clamp(18px, 3vw, 30px);
  position: relative;
}

.gcl-player-progress-teaser::after {
  background: radial-gradient(circle, rgba(154,98,255,.23), transparent 65%);
  content: "";
  height: 280px;
  pointer-events: none;
  position: absolute;
  right: -90px;
  top: -130px;
  width: 280px;
}

.gcl-progress-emblem { height: 86px; position: relative; width: 86px; }
.gcl-progress-emblem span { border: 3px solid rgba(255,211,36,.7); border-radius: 50%; display: block; height: 100%; overflow: hidden; width: 100%; }
.gcl-progress-emblem img { height: 100%; object-fit: cover; width: 100%; }
.gcl-progress-emblem > i { background: #ffd324; border-radius: 999px; bottom: -3px; color: #081827; font-size: 9px; font-style: normal; font-weight: 1000; padding: 4px 8px; position: absolute; right: -4px; }
.gcl-progress-copy { display: grid; gap: 6px; }
.gcl-progress-copy h2 { color: #fff; font-size: clamp(20px, 2.4vw, 30px); margin: 0; }
.gcl-progress-copy p { color: rgba(204,222,237,.75); margin: 0; }
.gcl-progress-copy small { color: rgba(204,222,237,.72); font-size: 10px; }
.gcl-progress-track { background: rgba(255,255,255,.08); border-radius: 999px; height: 8px; margin-top: 7px; overflow: hidden; }
.gcl-progress-track i { background: linear-gradient(90deg, #59e2ff, #9a62ff, #ffd324); border-radius: inherit; box-shadow: 0 0 16px rgba(89,226,255,.42); display: block; height: 100%; transition: width 1.4s cubic-bezier(.16,1,.3,1); width: 0; }
.gcl-mission-stack { display: grid; gap: 6px; }
.gcl-mission-stack > span { align-items: center; background: rgba(255,255,255,.035); border-radius: 7px; display: grid; gap: 9px; grid-template-columns: 26px 1fr auto; padding: 7px 9px; }
.gcl-mission-stack i { color: #59e2ff; font-size: 9px; font-style: normal; font-weight: 1000; }
.gcl-mission-stack b { color: #fff; font-size: 10px; }
.gcl-mission-stack small { color: rgba(203,219,232,.55); font-size: 8px; }

.gcl-live-arena-feed {
  width: min(100% - 24px, var(--gcl-shell, 1180px));
  margin: 16px auto 28px;
}
.gcl-live-arena-grid { display: grid; gap: 12px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.gcl-live-arena-grid > article { background: linear-gradient(160deg, rgba(8,25,43,.94), rgba(5,13,27,.9)); border: 1px solid rgba(89,226,255,.14); border-radius: 12px; min-width: 0; overflow: hidden; }
.gcl-live-arena-grid header { align-items: center; border-bottom: 1px solid rgba(255,255,255,.06); display: flex; justify-content: space-between; padding: 13px 15px; }
.gcl-live-arena-grid header span { color: #fff; font-size: 11px; font-weight: 1000; letter-spacing: .05em; text-transform: uppercase; }
.gcl-live-arena-grid header span i { animation: gclLiveConsolePulse 2.2s ease infinite; background: #48ff7b; border-radius: 50%; box-shadow: 0 0 10px #48ff7b; display: inline-block; height: 6px; margin-right: 8px; width: 6px; }
.gcl-live-arena-grid header small { color: rgba(199,217,231,.52); font-size: 8px; text-transform: uppercase; }
.gcl-live-arena-grid article > div { display: grid; }
.gcl-live-arena-grid p { align-items: center; border-bottom: 1px solid rgba(255,255,255,.045); display: grid; gap: 9px; grid-template-columns: minmax(0,1fr) auto auto; margin: 0; min-height: 48px; padding: 8px 14px; }
.gcl-live-arena-grid p:last-child { border-bottom: 0; }
.gcl-live-arena-grid p b { color: #fff; font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gcl-live-arena-grid p span, .gcl-live-arena-grid p em { color: rgba(201,221,236,.6); font-size: 9px; font-style: normal; }
.gcl-live-arena-grid p .gcl-rank-dot { height: 30px; width: 30px; }
.gcl-live-arena-grid article:nth-child(2) p { grid-template-columns: auto minmax(0,1fr) auto; }
.gcl-live-arena-grid article:nth-child(3) p { grid-template-columns: auto minmax(0,1fr) auto; }
.gcl-live-arena-grid article:nth-child(3) p > i { color: #ffd324; font-size: 9px; font-style: normal; font-weight: 1000; }

.gcl-reserve-journey {
  display: grid;
  gap: 8px;
  grid-column: 1 / -1;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 6px 0 2px;
}

.gcl-reserve-journey span {
  align-items: center;
  background: rgba(255,255,255,.035);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 8px;
  color: rgba(201,220,234,.58);
  display: flex;
  gap: 8px;
  min-height: 42px;
  padding: 8px 10px;
  transition: border-color 420ms ease, background 420ms ease, color 420ms ease;
}

.gcl-reserve-journey i {
  align-items: center;
  background: rgba(255,255,255,.08);
  border-radius: 50%;
  display: inline-flex;
  flex: 0 0 22px;
  font-size: 9px;
  font-style: normal;
  height: 22px;
  justify-content: center;
}

.gcl-reserve-journey b { font-size: 9px; letter-spacing: .04em; text-transform: uppercase; }
.gcl-reserve-journey .is-active { background: rgba(89,226,255,.08); border-color: rgba(89,226,255,.42); color: #fff; }
.gcl-reserve-journey .is-active i { background: #59e2ff; box-shadow: 0 0 14px rgba(89,226,255,.42); color: #061827; }
.gcl-reserve-journey .is-complete { border-color: rgba(72,255,123,.3); color: #aefbc2; }
.gcl-reserve-journey .is-complete i { background: #48ff7b; color: #052211; }

.gcl-reserve-form > label {
  display: grid;
  gap: 6px;
}

.gcl-reserve-form > label > span {
  color: rgba(197,220,235,.68);
  font-size: 9px;
  font-weight: 1000;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.gcl-tournament-command {
  align-items: center;
  background: linear-gradient(115deg, rgba(16,20,49,.97), rgba(7,27,45,.94));
  border: 1px solid rgba(154,98,255,.3);
  border-radius: 15px;
  box-shadow: 0 24px 68px rgba(0,0,0,.32), inset 0 1px rgba(255,255,255,.05);
  display: grid;
  gap: 24px;
  grid-template-columns: minmax(260px, 1fr) minmax(190px, .42fr) minmax(180px, .38fr);
  margin-bottom: 28px;
  overflow: hidden;
  padding: clamp(20px, 4vw, 38px);
  position: relative;
}

.gcl-tournament-command::after {
  background: radial-gradient(circle, rgba(154,98,255,.23), transparent 68%);
  content: "";
  height: 360px;
  pointer-events: none;
  position: absolute;
  right: -130px;
  top: -180px;
  width: 360px;
}

.gcl-tournament-command > * { min-width: 0; }
.gcl-tournament-command h2 { color: #fff; font-size: clamp(27px, 4vw, 52px); line-height: .98; margin: 12px 0; text-wrap: balance; }
.gcl-tournament-command p { color: rgba(205,224,238,.72); max-width: 620px; }
.gcl-tournament-clock { background: rgba(2,12,24,.62); border: 1px solid rgba(255,211,36,.2); border-radius: 11px; display: grid; gap: 8px; min-width: 0; overflow: hidden; padding: 22px 14px; text-align: center; }
.gcl-tournament-clock span { color: #ffd324; font-size: 9px; font-weight: 1000; letter-spacing: .1em; text-transform: uppercase; }
.gcl-tournament-clock strong { color: #fff; font-family: "Orbitron", sans-serif; font-size: clamp(18px, 1.65vw, 25px); line-height: 1.12; max-width: 100%; overflow-wrap: anywhere; text-wrap: balance; }
.gcl-tournament-clock small { color: rgba(204,221,235,.6); font-size: 9px; }
.gcl-tournament-command-stats { display: grid; gap: 8px; }
.gcl-tournament-command-stats span { background: rgba(255,255,255,.035); border-radius: 8px; display: grid; gap: 3px; padding: 12px; }
.gcl-tournament-command-stats b { color: #59e2ff; font-size: 17px; }
.gcl-tournament-command-stats small { color: rgba(204,221,235,.58); font-size: 8px; letter-spacing: .06em; text-transform: uppercase; }

@media (max-width: 1080px) {
  .gcl-tournament-command { grid-template-columns: minmax(0, 1fr) minmax(210px, .48fr); }
  .gcl-tournament-command-stats { grid-column: 1 / -1; grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.gcl-player-badges { display: flex; flex-wrap: wrap; gap: 5px; justify-content: center; margin-top: 8px; }
.gcl-player-badges span { background: rgba(255,211,36,.1); border: 1px solid rgba(255,211,36,.28); border-radius: 999px; color: #ffe575; font-size: 7px; font-weight: 1000; letter-spacing: .05em; padding: 4px 7px; text-transform: uppercase; }
.gcl-player-badges .is-online { background: rgba(72,255,123,.09); border-color: rgba(72,255,123,.28); color: #7dff9e; }

@media (max-width: 640px) {
  .gcl-shell {
    width: min(100% - 24px, var(--gcl-shell, 1180px));
  }

  .gcl-vps-page .gcl-section {
    padding-block: clamp(34px, 10vw, 58px);
  }

  .gcl-vps-page .gcl-section-heading {
    gap: 8px;
    margin-bottom: 20px;
  }

  .gcl-vps-page .gcl-section-heading h1,
  .gcl-vps-page .gcl-section-heading h2 {
    font-size: clamp(25px, 8vw, 38px);
    line-height: 1.03;
  }

  .gcl-vps-page .gcl-section-heading p {
    font-size: 14px;
    line-height: 1.65;
  }

  .gcl-vps-page .gcl-card,
  .gcl-vps-page .gcl-package-card,
  .gcl-vps-page .gcl-branch-card {
    border-radius: 12px;
    padding: 15px;
  }

  .gcl-button,
  button.gcl-button,
  a.gcl-button {
    min-height: 46px;
    padding-inline: 16px;
  }

  .gcl-motion-item {
    transform: translate3d(0, 14px, 0);
    transition-duration: 680ms, 780ms;
    transition-delay: calc(var(--gcl-motion-order, 0) * 35ms);
  }

  .gcl-rank-table-wrap,
  .gcl-home-rankings .gcl-rank-table-wrap.is-home-board {
    margin-inline: -12px;
    padding-inline: 12px;
    width: calc(100% + 24px);
  }

  .gcl-hero-live-console {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 16px;
  }

  .gcl-hero-live-console > span {
    min-height: 68px;
    padding: 10px 12px;
  }

  .gcl-hero-live-console > span:nth-child(3) {
    border-left: 0;
    border-top: 1px solid rgba(255,255,255,.07);
  }

  .gcl-hero-live-console > span:nth-child(4) {
    border-top: 1px solid rgba(255,255,255,.07);
  }

  .gcl-trending-game-row {
    display: flex;
    margin-inline: -12px;
    overflow-x: auto;
    padding: 2px 12px 12px;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
  }

  .gcl-trending-game {
    flex: 0 0 min(82vw, 292px);
    scroll-snap-align: start;
  }

  .gcl-recent-games {
    grid-template-columns: 1fr;
  }

  .gcl-recent-games nav {
    justify-content: flex-start;
    overflow-x: auto;
  }

  .gcl-player-progress-teaser {
    gap: 15px;
    grid-template-columns: 62px minmax(0, 1fr);
  }

  .gcl-progress-emblem { height: 62px; width: 62px; }
  .gcl-mission-stack, .gcl-player-progress-teaser > .gcl-button { grid-column: 1 / -1; }
  .gcl-live-arena-grid { display: flex; margin-inline: -12px; overflow-x: auto; padding: 0 12px 12px; scroll-snap-type: x proximity; }
  .gcl-live-arena-grid > article { flex: 0 0 min(88vw, 350px); scroll-snap-align: start; }

  .gcl-reserve-journey {
    display: flex;
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: none;
  }

  .gcl-reserve-journey span { flex: 0 0 132px; }

  .gcl-tournament-command { grid-template-columns: 1fr; }
  .gcl-tournament-command-stats { grid-template-columns: repeat(3, minmax(0,1fr)); }
}

@media (max-width: 390px) {
  .gcl-shell {
    width: min(100% - 18px, var(--gcl-shell, 1180px));
  }

  .gcl-site-header-inner {
    min-height: 64px;
  }

  .gcl-site-brand img {
    max-height: 36px;
    max-width: 132px;
  }

  .gcl-site-actions {
    gap: 6px;
  }

  .gcl-sound-toggle {
    height: 36px;
    min-height: 36px;
    width: 36px;
  }

  .gcl-account-avatar {
    height: 42px;
    min-height: 42px;
    width: 42px;
  }

  .gcl-site-menu {
    min-height: 42px;
    width: 46px;
  }

  .gcl-action-row,
  .gcl-heading-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .gcl-action-row .gcl-button,
  .gcl-heading-actions .gcl-button {
    justify-content: center;
    width: 100%;
  }

  .gcl-player-board-row {
    gap: 10px;
    grid-template-columns: 48px minmax(0, 1fr) auto;
    padding: 12px 8px;
  }

  .gcl-player-board-avatar {
    height: 48px;
    width: 48px;
  }

  .gcl-player-board-stat:nth-of-type(n+2),
  .gcl-player-board-open {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .gcl-motion-item,
  .gcl-motion-item.is-visible {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .gcl-page-transition,
  .gcl-empty,
  .gcl-empty-state,
  .gcl-button.is-loading::after {
    animation: none !important;
    transition: none !important;
  }
}

/* Final mobile leaderboard override: later legacy rules must not restore wide tables. */
@media (max-width: 620px) {
  .gcl-rank-arena-page .gcl-rank-table,
  .gcl-home-rankings .gcl-rank-table,
  .gcl-rank-table {
    min-width: 0 !important;
    width: 100% !important;
  }

  .gcl-rank-arena-page .gcl-rank-table:not(.is-game) > div:not(.is-head),
  .gcl-home-rankings .gcl-rank-table:not(.is-game) > div:not(.is-head) {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .gcl-rank-arena-page .gcl-rank-hero-console {
    margin-inline: 0;
    padding-inline: 0;
    width: 100%;
  }
}

.gcl-hero-inline-stats {
  background: rgba(1, 13, 28, .78);
  border: 1px solid rgba(70, 222, 255, .28);
  border-radius: 11px;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin-top: 21px;
  overflow: hidden;
}

.gcl-hero-inline-stats > span {
  align-content: center;
  border-right: 1px solid rgba(70, 222, 255, .14);
  display: grid;
  min-height: 72px;
  padding: 11px 15px;
  position: relative;
}

.gcl-hero-inline-stats > span:last-child { border-right: 0; }
.gcl-hero-inline-stats > span > i { background: #48e8ff; border-radius: 50%; box-shadow: 0 0 12px rgba(72, 232, 255, .7); height: 5px; position: absolute; right: 12px; top: 11px; width: 5px; }
.gcl-hero-inline-stats > span > i.is-online { background: #48ff7b; box-shadow: 0 0 12px rgba(72, 255, 123, .7); }
.gcl-hero-inline-stats b { color: #fff; font-family: "Orbitron", sans-serif; font-size: clamp(18px, 2vw, 25px); line-height: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gcl-hero-inline-stats small { color: rgba(210, 229, 244, .6); font-size: 9px; font-weight: 1000; letter-spacing: .06em; margin-top: 6px; overflow: hidden; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.gcl-hero-inline-stats .is-countdown b { color: #ffd324; font-size: 16px; }

.gcl-library-new-heading {
  align-items: end;
  border-top: 1px solid rgba(89, 226, 255, .15);
  display: flex;
  justify-content: space-between;
  margin-top: clamp(28px, 4vw, 48px);
  padding-top: 24px;
}

.gcl-library-new-heading h3 { color: #fff; font-size: clamp(24px, 3vw, 38px); margin: 3px 0 0; text-transform: uppercase; }
.gcl-trending-game-row.is-new .gcl-trending-game::after { background: linear-gradient(135deg, rgba(181, 62, 255, .3), transparent 52%); content: ""; inset: 0; pointer-events: none; position: absolute; }
.gcl-trending-game-row.is-new .gcl-trending-game span { position: relative; z-index: 1; }

@media (max-width: 760px) {
  .gcl-hero-inline-stats { display: flex; overflow-x: auto; scroll-snap-type: x proximity; }
  .gcl-hero-inline-stats > span { flex: 0 0 142px; scroll-snap-align: start; }
  .gcl-library-new-heading { align-items: flex-start; flex-direction: column; gap: 10px; }
}

/* Cyan/gold arena palette — no purple wash. */
.gcl-root { --gcl-neon-violet: #35dfff; }

/* Reservation drawer: responsive safe-area and no tooltip interference. */
html.gcl-reserve-modal-open [data-gcl-smart-tip],
.gcl-package-card + [data-gcl-smart-tip] {
  display: none !important;
}

.gcl-root > .gcl-reserve-modal .gcl-reserve-modal-card {
  max-height: calc(100dvh - clamp(12px, 3vh, 34px));
  padding-bottom: env(safe-area-inset-bottom);
}

.gcl-root > .gcl-reserve-modal .gcl-reserve-band.is-modal {
  padding-bottom: calc(34px + env(safe-area-inset-bottom));
}

@media (max-width: 900px) {
  .gcl-root > .gcl-reserve-modal .gcl-reserve-modal-card {
    width: calc(100% - 16px);
    max-height: calc(100dvh - 8px);
  }

  .gcl-root > .gcl-reserve-modal .gcl-reserve-band.is-modal {
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 22px 18px calc(38px + env(safe-area-inset-bottom));
  }

  .gcl-root > .gcl-reserve-modal .gcl-reserve-actions,
  .gcl-root > .gcl-reserve-modal .gcl-reserve-metrics {
    width: 100%;
  }

  .gcl-root > .gcl-reserve-modal .gcl-reserve-metrics span {
    min-width: 0;
    flex: 1 1 0;
  }

  .gcl-root > .gcl-reserve-modal .gcl-reserve-form {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .gcl-root > .gcl-reserve-modal .gcl-reserve-form > button[type="submit"] {
    grid-column: 1 / -1;
    min-height: 48px;
  }
}

@media (max-width: 560px) {
  .gcl-root > .gcl-reserve-modal .gcl-reserve-modal-card {
    width: 100%;
    max-height: calc(100dvh - 4px);
    border-left: 0;
    border-right: 0;
    border-radius: 16px 16px 0 0;
  }

  .gcl-root > .gcl-reserve-modal .gcl-reserve-band.is-modal {
    gap: 14px;
    padding: 20px 14px calc(44px + env(safe-area-inset-bottom));
  }

  .gcl-root > .gcl-reserve-modal .gcl-reserve-band h2 {
    padding-right: 44px;
    font-size: clamp(24px, 9vw, 34px);
  }

  .gcl-root > .gcl-reserve-modal .gcl-reserve-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .gcl-root > .gcl-reserve-modal .gcl-reserve-actions > * {
    width: 100%;
  }

  .gcl-root > .gcl-reserve-modal .gcl-reserve-journey {
    display: flex;
    overflow-x: auto;
    padding-bottom: 4px;
    scroll-snap-type: x proximity;
  }

  .gcl-root > .gcl-reserve-modal .gcl-reserve-journey span {
    flex: 0 0 126px;
    scroll-snap-align: start;
  }

  .gcl-root > .gcl-reserve-modal .gcl-reserve-form {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 12px;
  }

  .gcl-root > .gcl-reserve-modal .gcl-reserve-form > button[type="submit"] {
    grid-column: 1;
  }
}

.gcl-site-header {
  background:
    linear-gradient(90deg, rgba(53, 223, 255, .07), transparent 28%, transparent 72%, rgba(255, 211, 36, .045)),
    linear-gradient(180deg, rgba(3, 14, 29, .97), rgba(2, 9, 20, .95));
}

.gcl-site-header::after {
  background: linear-gradient(90deg, transparent 8%, rgba(255, 211, 36, .72) 38%, rgba(255, 211, 36, .72) 62%, transparent 92%);
  box-shadow: 0 0 14px rgba(255, 211, 36, .18);
}

.gcl-alert-warn {
  background: linear-gradient(90deg, rgba(53, 223, 255, .1), rgba(255, 211, 36, .055)) !important;
  border-color: rgba(53, 223, 255, .28) !important;
  color: #cfe7f5;
}

.gcl-alert-warn strong { color: #ffd324; }

.gcl-main-nav .gcl-mega-menu {
  background:
    radial-gradient(circle at 7% 0, rgba(53, 223, 255, .14), transparent 32%),
    radial-gradient(circle at 96% 4%, rgba(255, 211, 36, .07), transparent 30%),
    linear-gradient(180deg, rgba(4, 18, 31, .99), rgba(2, 9, 18, .99));
  border-color: rgba(53, 223, 255, .34);
  box-shadow: 0 30px 90px rgba(0, 0, 0, .62), 0 0 38px rgba(53, 223, 255, .12), inset 0 1px 0 rgba(255, 255, 255, .06);
}

.gcl-main-nav .gcl-mega-menu::before {
  background:
    linear-gradient(90deg, transparent, rgba(53, 223, 255, .13), transparent),
    linear-gradient(rgba(89, 226, 255, .055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px);
}

.gcl-trending-game-row.is-new .gcl-trending-game::after {
  background: linear-gradient(135deg, rgba(53, 223, 255, .14), transparent 52%);
}

.gcl-progress-track i { background: linear-gradient(90deg, #59e2ff, #48ff7b, #ffd324); }

.gcl-game-discovery {
  background: #020912 !important;
  box-shadow: none;
  clip-path: none;
  padding-block: 1px clamp(28px, 4vw, 52px);
}

.gcl-game-discovery .gcl-trending-game,
.gcl-game-discovery .gcl-recent-games {
  background: #040910 !important;
}

/* Remove full-page color effects; retain texture through the base page grid only. */
.gcl-root::before,
.gcl-site-bg-mesh,
.gcl-site-bg-mesh::after {
  display: none !important;
}

.gcl-hero-bg-slider.is-static img {
  animation: none !important;
  transform: none !important;
  transition: none !important;
  will-change: auto !important;
}

/* No page-sized scan/beam overlays. Keep cyan limited to small UI accents. */
.gcl-rank-arena-page::before,
.gcl-rank-arena-hero::before {
  animation: none !important;
  background: none !important;
  content: none !important;
  display: none !important;
  mix-blend-mode: normal !important;
}

.gcl-alert-warn {
  background: #020912 !important;
  border-color: rgba(255, 211, 36, .26) !important;
  box-shadow: none !important;
}

/* Global pages stay neutral; artwork remains inside dedicated hero components. */
.gcl-site-bg,
.gcl-site-bg-slider,
.gcl-site-bg-gradient {
  display: none !important;
}

html,
body,
.gcl-root {
  background: #061522 !important;
}

.gcl-library-new-heading.is-first {
  border-top: 0;
  margin-top: 0;
  padding-top: 0;
}


/* ==========================================================================
   NEXT-GEN ESPORTS DESIGN SYSTEM & LIGHT SWEEP REMOVAL OVERRIDES
   ========================================================================== */

/* 1. Complete Removal of Blue Light Sweep Animations & Moving Shines */
.gcl-root .gcl-button::after,
.gcl-root .gcl-package-primary::after,
.gcl-root .gcl-signin-text::after,
.gcl-root .gcl-account-avatar::after,
.gcl-root .gcl-site-menu::after,
.gcl-root .gcl-link::after,
.gcl-hero-reserve::after,
.gcl-smart-tip::before,
.gcl-smart-tip::after,
.gcl-rank-progress-track::after,
.gcl-header-ticker::after {
  display: none !important;
  animation: none !important;
  opacity: 0 !important;
  content: none !important;
}

@keyframes gclHeroButtonSweep { 0%, 100% { transform: none; opacity: 0; } }
@keyframes gclButtonSweep { 0%, 100% { transform: none; opacity: 0; } }
@keyframes gclSmartTipSweep { 0%, 100% { transform: none; opacity: 0; } }
@keyframes gclRankSweep { 0%, 100% { transform: none; opacity: 0; } }
@keyframes gclHeaderScan { 0%, 100% { background-position: 0 0; } }

/* 2. Deep Spatial Obsidian Background & Typography */
html,
body,
.gcl-root {
  background: #080a10 !important;
  color: #e2e8f0 !important;
  font-family: "Rajdhani", "Inter", -apple-system, BlinkMacSystemFont, sans-serif !important;
}

.gcl-root h1,
.gcl-root h2,
.gcl-root h3 {
  font-family: "Orbitron", sans-serif !important;
  letter-spacing: 0.02em !important;
}

/* 3. Sleek Hero Section Glassmorphism */
.gcl-landing-hero {
  background: linear-gradient(135deg, rgba(12, 16, 26, 0.88), rgba(8, 11, 18, 0.94)) !important;
  border: 1px solid rgba(0, 240, 255, 0.18) !important;
  border-radius: 12px !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
  backdrop-filter: blur(16px) !important;
}

.gcl-hero-bg-slider {
  background: #080a10 !important;
  opacity: 0.45 !important;
}

.gcl-hero-bg-slider::after {
  background: linear-gradient(180deg, rgba(8, 10, 16, 0.85) 0%, rgba(8, 10, 16, 0.95) 100%) !important;
}

/* 4. Sleek Interactive Buttons (Clean Subtle Glow without Moving Light Sweeps) */
.gcl-button,
.gcl-button-primary {
  transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease, border-color 180ms ease !important;
}

.gcl-button-primary,
.gcl-hero-reserve {
  background: linear-gradient(135deg, #00f0ff 0%, #00b4d8 100%) !important;
  color: #060911 !important;
  font-weight: 700 !important;
  border: none !important;
  box-shadow: 0 4px 14px rgba(0, 240, 255, 0.22) !important;
}

.gcl-button-primary:hover,
.gcl-hero-reserve:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 22px rgba(0, 240, 255, 0.38) !important;
  filter: brightness(1.1) !important;
}

.gcl-button:not(.gcl-button-primary) {
  background: rgba(18, 24, 38, 0.72) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: #f1f5f9 !important;
}

.gcl-button:not(.gcl-button-primary):hover {
  transform: translateY(-2px) !important;
  border-color: rgba(0, 240, 255, 0.4) !important;
  box-shadow: 0 4px 14px rgba(0, 240, 255, 0.15) !important;
}

/* 5. Sticky Blurred Main Navigation Bar */
.gcl-site-header {
  background: rgba(8, 11, 18, 0.88) !important;
  backdrop-filter: blur(20px) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.gcl-main-nav a {
  color: rgba(226, 232, 240, 0.85) !important;
  font-weight: 600 !important;
  transition: color 180ms ease, transform 180ms ease !important;
}

.gcl-main-nav a:hover,
.gcl-main-nav a.is-active {
  color: #00f0ff !important;
  text-shadow: 0 0 10px rgba(0, 240, 255, 0.3) !important;
}

/* 6. Clean Glass Cards Across All Pages */
.gcl-card,
.gcl-panel,
.gcl-server-card,
.gcl-package-card {
  background: rgba(14, 19, 31, 0.78) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 10px !important;
  backdrop-filter: blur(12px) !important;
  transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease !important;
}

.gcl-card:hover,
.gcl-panel:hover,
.gcl-server-card:hover,
.gcl-package-card:hover {
  transform: translateY(-4px) !important;
  border-color: rgba(0, 240, 255, 0.32) !important;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4), 0 0 18px rgba(0, 240, 255, 0.12) !important;
}

/* 7. Hide Live Sync Notice when not needed */
.gcl-alert-warn {
  background: rgba(18, 24, 38, 0.85) !important;
  border: 1px solid rgba(255, 211, 36, 0.3) !important;
  color: #f1f5f9 !important;
  border-radius: 8px !important;
}

/* 8. Leaderboard Podium Highlight Cards */
.gcl-podium-card.is-first {
  border: 1px solid rgba(255, 215, 0, 0.45) !important;
  box-shadow: 0 8px 30px rgba(255, 215, 0, 0.2) !important;
}

.gcl-podium-card.is-second {
  border: 1px solid rgba(192, 192, 192, 0.35) !important;
}

.gcl-podium-card.is-third {
  border: 1px solid rgba(205, 127, 50, 0.35) !important;
}


/* ==========================================================================
   PURE DARK OBSIDIAN BACKGROUND OVERRIDES (NO TEAL / BLUE BACKGROUND TINT)
   ========================================================================== */

/* 1. Global & Page Backgrounds - Pure Dark Spatial Obsidian */
html,
body,
.gcl-root,
.gcl-vps-page,
.gcl-section,
.gcl-modern-landing,
.gcl-landing-strip,
.gcl-game-discovery,
.gcl-rank-arena-page,
.gcl-home-rankings,
.gcl-home-rank-banner,
.gcl-reserve-band,
.gcl-admin-layout,
.gcl-reserve-form {
  background: #080a10 !important;
  background-color: #080a10 !important;
  background-image: none !important;
  color: #e2e8f0 !important;
}

/* 2. Container & Section Outer Shells */
.gcl-shell,
.gcl-game-discovery .gcl-trending-game,
.gcl-game-discovery .gcl-recent-games {
  background: #080a10 !important;
  background-image: none !important;
}

/* 3. Cards & Panels - Deep Dark Neutral Glass Panels (No Cyan/Teal Gradient) */
.gcl-root .gcl-vps-page .gcl-card,
.gcl-root .gcl-vps-page .gcl-panel,
.gcl-root .gcl-vps-page .gcl-empty,
.gcl-card,
.gcl-panel,
.gcl-server-card,
.gcl-package-card,
.gcl-video-card,
.gcl-branch-card,
.gcl-hero-live-console,
.gcl-live-arena-grid > article {
  background: rgba(14, 18, 28, 0.92) !important;
  background-image: none !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.5) !important;
}

.gcl-root .gcl-vps-page .gcl-card:hover,
.gcl-root .gcl-vps-page .gcl-panel:hover,
.gcl-card:hover,
.gcl-panel:hover,
.gcl-server-card:hover,
.gcl-package-card:hover,
.gcl-video-card:hover,
.gcl-branch-card:hover {
  background: rgba(20, 26, 40, 0.95) !important;
  border-color: rgba(0, 240, 255, 0.35) !important;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.6), 0 0 20px rgba(0, 240, 255, 0.12) !important;
}

.gcl-home-branch-card:hover {
  transform: none;
}

/* 4. Hero Section - Deep Dark Glass Centerpiece */
.gcl-landing-hero {
  background: rgba(12, 16, 26, 0.95) !important;
  background-image: none !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.6) !important;
}

.gcl-hero-bg-slider {
  background: #080a10 !important;
  opacity: 0.25 !important;
}

.gcl-hero-bg-slider::after {
  background: linear-gradient(180deg, rgba(8, 10, 16, 0.92) 0%, rgba(8, 10, 16, 0.98) 100%) !important;
}

/* 5. Navigation & Footer - Pitch Dark Header/Footer */
.gcl-site-header,
.gcl-site-footer {
  background: #06080e !important;
  background-image: none !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

/* 6. Remove any radial gradient background glow overlays */
.gcl-vps-page::before,
.gcl-vps-page::after,
.gcl-modern-landing::before,
.gcl-modern-landing::after,
.gcl-section::before,
.gcl-section::after {
  display: none !important;
  background: none !important;
}

/* Reservation fields sit directly on the drawer surface—no black form strip. */
.gcl-root > .gcl-reserve-modal .gcl-reserve-band.is-modal,
.gcl-root > .gcl-reserve-modal .gcl-reserve-form,
.gcl-root > .gcl-reserve-modal .gcl-reserve-form > label {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

/* Functional cinematic artwork layers. These final rules intentionally
   override older theme blocks that disabled the background sliders. */
.gcl-root > .gcl-site-bg,
.gcl-root > .gcl-site-bg .gcl-site-bg-slider,
.gcl-root > .gcl-site-bg .gcl-site-bg-gradient {
  display: block !important;
}

.gcl-root > .gcl-site-bg {
  position: fixed !important;
  inset: 0 !important;
  z-index: 0 !important;
  background: #080a10 !important;
}

.gcl-root > .gcl-site-bg .gcl-site-bg-slider {
  position: absolute !important;
  inset: 0 !important;
  opacity: .42 !important;
  mask-image: none !important;
  -webkit-mask-image: none !important;
}

.gcl-root > .gcl-site-bg .gcl-site-bg-slider img {
  opacity: 0;
  filter: saturate(1.08) contrast(1.05);
  transform: scale(1.04);
  transition: opacity 900ms ease, transform 6000ms ease;
}

.gcl-root > .gcl-site-bg .gcl-site-bg-slider img.is-active {
  opacity: 1;
  transform: scale(1.08);
}

.gcl-game-bg-crossfade {
  position: absolute;
  inset: -20px;
  z-index: 1;
  overflow: hidden;
  opacity: 0;
  transition: opacity 820ms ease;
}

.gcl-game-bg-crossfade img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0;
  filter: blur(14px) saturate(1.14) contrast(1.08) brightness(.76);
  transform: scale(1.055);
  transition: opacity 820ms ease, transform 1100ms ease;
  will-change: opacity, transform;
}

.gcl-game-bg-crossfade img.is-active {
  opacity: 1;
  transform: scale(1.075);
}

.gcl-site-bg.is-game-hovering .gcl-game-bg-crossfade {
  opacity: .68;
}

.gcl-root > .gcl-site-bg .gcl-site-bg-gradient {
  z-index: 2;
  background:
    linear-gradient(180deg, rgba(8,10,16,.42), rgba(8,10,16,.62) 58%, rgba(8,10,16,.86)),
    linear-gradient(90deg, rgba(8,10,16,.54), rgba(8,10,16,.12) 50%, rgba(8,10,16,.54));
}

.gcl-root .gcl-vps-page,
.gcl-root .gcl-section,
.gcl-root .gcl-vps-page > .gcl-section > .gcl-shell {
  background-color: transparent !important;
  background-image: none !important;
}

.gcl-root .gcl-landing-hero {
  position: relative;
  isolation: isolate;
  background: rgba(8,10,16,.42) !important;
}

.gcl-root .gcl-landing-hero > :not(.gcl-hero-bg-slider) {
  position: relative;
  z-index: 2;
}

.gcl-root .gcl-hero-bg-slider {
  display: block !important;
  z-index: 0 !important;
  opacity: .78 !important;
  background: #080a10 !important;
}

.gcl-root .gcl-hero-bg-slider::after {
  background:
    linear-gradient(90deg, rgba(8,10,16,.78), rgba(8,10,16,.34) 58%, rgba(8,10,16,.14)),
    linear-gradient(0deg, rgba(8,10,16,.68), rgba(8,10,16,.12) 60%, rgba(8,10,16,.5)) !important;
}

@media (hover: none), (pointer: coarse) {
  .gcl-game-bg-crossfade {
    display: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .gcl-game-bg-crossfade,
  .gcl-game-bg-crossfade img,
  .gcl-site-bg-slider img,
  .gcl-hero-bg-slider img {
    transition-duration: 1ms !important;
  }
}

/* Keep the Home live feed and footer above all fixed background artwork. */
.gcl-home-page .gcl-live-arena-feed {
  position: relative !important;
  z-index: 6 !important;
  isolation: isolate;
  opacity: 1 !important;
  visibility: visible !important;
}

.gcl-home-page .gcl-live-arena-feed .gcl-section-heading,
.gcl-home-page .gcl-live-arena-grid,
.gcl-home-page .gcl-live-arena-grid > article,
.gcl-home-page .gcl-live-arena-grid > article > * {
  position: relative;
  z-index: 2;
  opacity: 1 !important;
  visibility: visible !important;
}

.gcl-home-page .gcl-live-arena-grid > article {
  display: block !important;
  background: rgba(14, 18, 28, .96) !important;
  background-image: none !important;
  transform: none;
}

body > .gcl-site-footer {
  display: block !important;
  position: relative !important;
  z-index: 10 !important;
  width: 100%;
  opacity: 1 !important;
  visibility: visible !important;
  background: #06080e !important;
}

/* Header layout guard: keep desktop navigation on one compact row. */
.gcl-root .gcl-site-header .gcl-site-header-inner {
  display: grid !important;
  grid-template-columns: 150px minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: clamp(12px, 2vw, 28px) !important;
  min-height: 78px !important;
}

.gcl-root .gcl-site-header .gcl-site-brand {
  min-width: 0;
  min-height: 54px;
}

.gcl-root .gcl-site-header .gcl-site-brand img {
  width: 132px;
  max-width: 100%;
  max-height: 48px;
}

.gcl-root .gcl-site-header .gcl-main-nav {
  display: flex;
  flex-flow: row nowrap !important;
  align-items: center;
  justify-content: center;
  gap: clamp(0px, .35vw, 6px);
  min-width: 0;
  white-space: nowrap;
}

.gcl-root .gcl-site-header .gcl-main-nav .gcl-nav-item {
  flex: 0 0 auto;
}

.gcl-root .gcl-site-header .gcl-main-nav .gcl-nav-item > a {
  min-height: 78px;
  padding: 0 clamp(9px, 1vw, 16px);
  font-size: clamp(11px, .72vw, 13px);
}

.gcl-root .gcl-site-header .gcl-main-nav .gcl-nav-item > a::after {
  bottom: 12px;
}

.gcl-root .gcl-site-header .gcl-site-actions {
  flex-wrap: nowrap;
  justify-self: end;
}

@media (max-width: 1360px) {
  .gcl-root .gcl-site-header .gcl-main-nav { display: none !important; }
  .gcl-root .gcl-site-header .gcl-overflow-menu { display: block !important; }
  .gcl-root .gcl-site-header .gcl-site-header-inner { grid-template-columns: minmax(120px, 1fr) auto !important; }
}

@media (max-width: 560px) {
  .gcl-root .gcl-site-header .gcl-site-header-inner {
    min-height: 66px !important;
    grid-template-columns: minmax(92px, 1fr) auto !important;
    gap: 8px !important;
  }
  .gcl-root .gcl-site-header .gcl-site-brand img { width: 108px; max-height: 38px; }
}
html.gcl-session-hydrating .gcl-root{visibility:hidden}html.gcl-session-hydrating body::before{content:"";position:fixed;z-index:50000;inset:0;background:radial-gradient(circle at 50% 44%,rgba(19,74,107,.3),transparent 28%),#030912}html.gcl-session-hydrating body::after{content:"";position:fixed;z-index:50001;left:50%;top:50%;width:clamp(150px,18vw,240px);height:110px;transform:translate(-50%,-50%);background:url('/assets/images/gaming-center-logo.png') center/contain no-repeat;filter:drop-shadow(0 0 22px rgba(42,207,255,.28));animation:gcl-logo-preloader 1.05s ease-in-out infinite alternate}@keyframes gcl-logo-preloader{from{opacity:.45;transform:translate(-50%,-50%) scale(.94)}to{opacity:1;transform:translate(-50%,-50%) scale(1.03)}}

/* GameDetails.jsx design, rendered in the card popup (no iframe/detail-page dependency). */
.gcl-root .gcl-game-drawer.game-page{display:block;position:fixed;inset:0;z-index:10000;overflow-y:auto;overflow-x:hidden;padding:0;background:#050912;color:#eef4fb;font-family:inherit}
.gcl-root .gcl-game-drawer.game-page[hidden]{display:none}
.gcl-root .gcl-game-drawer.game-page .game-background{position:fixed;inset:0;background-position:center;background-size:cover;filter:blur(3px);opacity:.2;transform:scale(1.05);pointer-events:none}
.gcl-root .gcl-game-drawer.game-page .game-background:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#050912d9 0%,#050912f5 70%,#050912 100%)}
.gcl-root .gcl-game-drawer.game-page .close-button{position:fixed;right:28px;top:22px;z-index:4;width:42px;height:42px;border:1px solid #2de2ff;border-radius:50%;background:#071321;color:#fff;font-size:28px;line-height:1;cursor:pointer}
.gcl-root .gcl-game-drawer.game-page .game-container{position:relative;width:min(1400px,calc(100% - 48px));margin:0 auto;padding:40px 0 56px}
.gcl-root .gcl-game-drawer.game-page .player-count{margin:0 0 14px;color:#2de2ff;font-size:12px;font-weight:800;letter-spacing:.16em;text-align:right}
.gcl-root .gcl-game-drawer.game-page .game-hero{position:relative;min-height:320px;overflow:hidden;border:1px solid #1e334a;background:#0b1523;border-radius:10px;box-shadow:0 20px 70px #0008}
.gcl-root .gcl-game-drawer.game-page .hero-gradient{position:absolute;inset:0;background:linear-gradient(90deg,#071321 0%,#071321dc 44%,#07132155 100%)}
.gcl-root .gcl-game-drawer.game-page .hero-content{position:relative;z-index:1;display:flex;align-items:center;gap:28px;min-height:320px;padding:34px}
.gcl-root .gcl-game-drawer.game-page .game-cover{flex:0 0 180px;height:240px;border:1px solid #2de2ff66;border-radius:8px;background:#101e2d center/cover no-repeat;box-shadow:0 12px 30px #0009}
.gcl-root .gcl-game-drawer.game-page .game-info{max-width:700px}.gcl-root .gcl-game-drawer.game-page .game-meta{display:flex;gap:12px;color:#2de2ff;font-size:12px;font-weight:800;letter-spacing:.14em}.gcl-root .gcl-game-drawer.game-page .game-meta [data-gcl-game-badge]{color:#f7c843}
.gcl-root .gcl-game-drawer.game-page h1{margin:10px 0 18px;font-size:clamp(30px,4.5vw,62px);line-height:.98;letter-spacing:.02em;text-transform:uppercase;color:#f3f7fc}.gcl-root .gcl-game-drawer.game-page .description-title,.gcl-root .gcl-game-drawer.game-page .section-kicker{margin:0 0 8px;color:#f7c843;font-size:11px;font-weight:800;letter-spacing:.14em}.gcl-root .gcl-game-drawer.game-page .game-summary{margin:0;color:#a8b8c9;line-height:1.6;font-size:15px}.gcl-root .gcl-game-drawer.game-page .hero-character{margin-left:auto;width:240px;height:260px;background:center/contain no-repeat;opacity:.45;mix-blend-mode:screen}
.gcl-root .gcl-game-drawer.game-page .stats-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin:20px 0}.gcl-root .gcl-game-drawer.game-page .stat-card{display:flex;align-items:center;gap:13px;min-height:90px;padding:16px;border:1px solid #1d3248;border-radius:8px;background:#0a1422}.gcl-root .gcl-game-drawer.game-page .stat-icon{font-size:24px;color:#2de2ff}.gcl-root .gcl-game-drawer.game-page .green-card .stat-icon{color:#40e58e}.gcl-root .gcl-game-drawer.game-page .gold-card .stat-icon{color:#f7c843}.gcl-root .gcl-game-drawer.game-page .purple-card .stat-icon{color:#c895ff}.gcl-root .gcl-game-drawer.game-page .stat-label{display:block;color:#8294a8;font-size:9px;font-weight:800;letter-spacing:.12em}.gcl-root .gcl-game-drawer.game-page .stat-card strong{display:block;margin-top:7px;color:#f5f8fc;font-size:18px;line-height:1.1}
.gcl-root .gcl-game-drawer.game-page .dashboard-section{margin-top:28px;padding:24px;border:1px solid #1a2e43;border-radius:10px;background:#08121fdd}.gcl-root .gcl-game-drawer.game-page .section-heading{display:flex;align-items:end;justify-content:space-between;margin-bottom:18px}.gcl-root .gcl-game-drawer.game-page .section-heading h2{margin:0;font-size:22px;letter-spacing:.08em}.gcl-root .gcl-game-drawer.game-page .section-accent{width:70px;height:2px;background:#2de2ff}.gcl-root .gcl-game-drawer.game-page .branches-layout{display:grid;grid-template-columns:1fr 260px;gap:16px}.gcl-root .gcl-game-drawer.game-page .branch-card,.gcl-root .gcl-game-drawer.game-page .branch-total-card{padding:18px;border:1px solid #1d3b53;border-radius:8px;background:#0b1928}.gcl-root .gcl-game-drawer.game-page .branch-top{display:flex;gap:12px;align-items:center}.gcl-root .gcl-game-drawer.game-page .branch-round-icon{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:#10334b;color:#2de2ff}.gcl-root .gcl-game-drawer.game-page .branch-top strong{display:block}.gcl-root .gcl-game-drawer.game-page .branch-top small,.gcl-root .gcl-game-drawer.game-page .branch-stats small{display:block;color:#778ba0;font-size:9px;letter-spacing:.1em}.gcl-root .gcl-game-drawer.game-page .branch-stats{display:flex;gap:35px;margin-top:18px}.gcl-root .gcl-game-drawer.game-page .branch-stats b{font-size:16px;color:#f7c843}.gcl-root .gcl-game-drawer.game-page .total-label{color:#8294a8;font-size:10px;letter-spacing:.14em}.gcl-root .gcl-game-drawer.game-page .total-pc-row{display:flex;align-items:baseline;gap:10px;margin:18px 0}.gcl-root .gcl-game-drawer.game-page .total-pc-row strong{font-size:42px;color:#2de2ff}.gcl-root .gcl-game-drawer.game-page .total-pc-row span:last-child{font-size:10px;color:#9aabba}.gcl-root .gcl-game-drawer.game-page .branch-total-footer{padding-top:12px;border-top:1px solid #1d3248;color:#9aabba;font-size:10px}
.gcl-root .gcl-game-drawer.game-page .player-table-wrapper{overflow-x:auto}.gcl-root .gcl-game-drawer.game-page .player-table{min-width:680px}.gcl-root .gcl-game-drawer.game-page .player-head,.gcl-root .gcl-game-drawer.game-page .player-row{display:grid;grid-template-columns:70px 1.8fr 1fr 1fr 1fr;align-items:center;gap:14px}.gcl-root .gcl-game-drawer.game-page .player-head{padding:0 16px 10px;color:#71869c;font-size:9px;font-weight:800;letter-spacing:.12em}.gcl-root .gcl-game-drawer.game-page .player-row{padding:13px 16px;border-top:1px solid #162a3d;color:#b4c2d0;font-size:13px}.gcl-root .gcl-game-drawer.game-page .ranking{color:#f7c843;font-weight:800}.gcl-root .gcl-game-drawer.game-page .player-identity{display:flex;align-items:center;gap:10px;color:#f2f6fb}.gcl-root .gcl-game-drawer.game-page .player-avatar{display:grid;place-items:center;width:30px;height:30px;border:1px solid #2de2ff;border-radius:50%;color:#2de2ff;font-size:11px}.gcl-root .gcl-game-drawer.game-page .time-highlight{color:#2de2ff;font-weight:800}.gcl-root .gcl-game-drawer.game-page .last-played{color:#8294a8}.gcl-root .gcl-game-drawer.game-page .player-empty{padding:28px;text-align:center;color:#8294a8}.gcl-root .gcl-game-drawer.game-page .page-footer-note{margin:24px 0 0;text-align:center;color:#63788c;font-size:11px}
@media(max-width:800px){.gcl-root .gcl-game-drawer.game-page .game-container{width:calc(100% - 24px);padding-top:28px}.gcl-root .gcl-game-drawer.game-page .hero-content{align-items:flex-start;gap:16px;padding:22px;min-height:260px}.gcl-root .gcl-game-drawer.game-page .game-cover{flex-basis:100px;height:140px}.gcl-root .gcl-game-drawer.game-page .hero-character{display:none}.gcl-root .gcl-game-drawer.game-page .stats-grid{grid-template-columns:repeat(2,1fr)}.gcl-root .gcl-game-drawer.game-page .branches-layout{grid-template-columns:1fr}.gcl-root .gcl-game-drawer.game-page .dashboard-section{padding:16px}}
@media(max-width:480px){.gcl-root .gcl-game-drawer.game-page .close-button{top:12px;right:12px}.gcl-root .gcl-game-drawer.game-page .hero-content{display:block;padding-top:54px}.gcl-root .gcl-game-drawer.game-page .game-cover{width:104px;margin-bottom:16px}.gcl-root .gcl-game-drawer.game-page h1{font-size:32px}.gcl-root .gcl-game-drawer.game-page .stats-grid{grid-template-columns:1fr}.gcl-root .gcl-game-drawer.game-page .branch-stats{gap:15px}}

/* Exact GameDetails reference geometry/type treatment. */
/* Keep hover interaction subtle: cards retain their normal edge instead of
   switching to a bright cyan outline/glow on pointer hover. */
@media (hover: hover) and (pointer: fine) {
  .gcl-root .gcl-card:hover,
  .gcl-root .gcl-panel:hover,
  .gcl-root .gcl-server-card:hover,
  .gcl-root .gcl-package-card:hover,
  .gcl-root .gcl-video-card:hover,
  .gcl-root .gcl-branch-card:hover,
  .gcl-root [data-gcl-game-card]:hover,
  .gcl-root .gcl-player-board-row:hover,
  .gcl-root .gcl-ranking-row:hover,
  .gcl-root .game-package-card:hover,
  .gcl-root .gcl-home-branch-card:hover {
    border-color: rgba(255, 255, 255, 0.08) !important;
    box-shadow: none !important;
  }

  .gcl-root .gcl-button:hover,
  .gcl-root .gcl-package-primary:hover,
  .gcl-root .gcl-package-ghost:hover,
  .gcl-root .gcl-signin-text:hover,
  .gcl-root .gcl-account-avatar:hover,
  .gcl-root .gcl-site-menu:hover,
  .gcl-root .gcl-link:hover,
  .gcl-root .gcl-game-suggestions button:hover {
    outline: none !important;
  }

  .gcl-root .gcl-button:not(.gcl-button-primary):hover {
    border-color: rgba(255, 255, 255, 0.12) !important;
    box-shadow: none !important;
  }
}

.gcl-root .gcl-videos-minimal-page .gcl-videos-section,
.gcl-root .gcl-videos-minimal-page .gcl-videos-section > .gcl-shell {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.gcl-root .gcl-videos-minimal-page .gcl-videos-section > .gcl-shell {
  padding-block: 18px 42px;
}

.gcl-root .gcl-videos-minimal-page .gcl-youtube-grid {
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 22px 16px;
}

.gcl-root .gcl-videos-minimal-page .gcl-video-card {
  background: transparent;
  border: 0;
  box-shadow: none;
}

@media (max-width: 600px) {
  .gcl-root .gcl-videos-minimal-page .gcl-videos-section > .gcl-shell {
    width: calc(100% - 24px) !important;
    max-width: calc(100% - 24px) !important;
    padding-block: 12px 28px;
  }

  .gcl-root .gcl-videos-minimal-page .gcl-youtube-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 14px 9px;
  }

  .gcl-root .gcl-videos-minimal-page .gcl-youtube-thumb {
    border-radius: 6px;
  }

  .gcl-root .gcl-videos-minimal-page .gcl-youtube-thumb > b {
    width: 30px;
    height: 30px;
    font-size: 11px;
  }

  .gcl-root .gcl-videos-minimal-page .gcl-video-card-meta {
    gap: 7px;
    margin-top: 8px;
  }

  .gcl-root .gcl-videos-minimal-page .gcl-video-creator-avatar {
    width: 26px;
    height: 26px;
    flex: 0 0 26px;
  }

  .gcl-root .gcl-videos-minimal-page .gcl-youtube-title {
    display: -webkit-box;
    overflow: hidden;
    font-size: 11px;
    line-height: 1.25;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .gcl-root .gcl-videos-minimal-page .gcl-video-creator-name,
  .gcl-root .gcl-videos-minimal-page .gcl-video-card-meta small {
    display: block;
    max-width: 100%;
    overflow: hidden;
    font-size: 9px;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

.gcl-root .gcl-game-drawer .avatar{background-position:center;background-size:cover;background-repeat:no-repeat;overflow:hidden}
/* Stable carousel cards */
.gcl-rewards-page .gcl-rank-stage-list{--gcl-carousel-card-width:220px;padding-inline:max(12px,calc((100% - var(--gcl-carousel-card-width))/2));scroll-padding-inline:max(12px,calc((100% - var(--gcl-carousel-card-width))/2));scroll-snap-type:x mandatory}
.gcl-rewards-page .gcl-rank-stage-card{flex:0 0 var(--gcl-carousel-card-width);width:var(--gcl-carousel-card-width);height:334px;min-height:334px;box-sizing:border-box;scroll-snap-align:center}
.gcl-rewards-page .gcl-daily-track{--gcl-carousel-card-width:190px;padding-inline:max(12px,calc((100% - var(--gcl-carousel-card-width))/2));scroll-padding-inline:max(12px,calc((100% - var(--gcl-carousel-card-width))/2));scroll-snap-type:x mandatory}
.gcl-rewards-page .gcl-daily-track-card{flex:0 0 var(--gcl-carousel-card-width);width:var(--gcl-carousel-card-width);height:236px;min-height:236px;box-sizing:border-box;scroll-snap-align:center}
.gcl-rewards-page .gcl-rank-stage-badge{width:90px;height:90px;overflow:visible;border:0;border-radius:0;background:transparent!important;box-shadow:none}
.gcl-rewards-page .gcl-rank-stage-badge img{width:100%;height:100%;object-fit:contain;border:0;border-radius:0;background:transparent;opacity:1}
.gcl-rewards-page .gcl-rank-stage-badge span{display:none}
.gcl-rewards-page .gcl-rank-detail-badge{width:164px;height:164px;overflow:visible;border:0;border-radius:0;background:transparent!important;box-shadow:none}
.gcl-rewards-page .gcl-rank-detail-badge img{width:100%;height:100%;object-fit:contain;border:0;border-radius:0;background:transparent;opacity:1}
.gcl-rewards-page .gcl-rank-detail-badge span{display:none}
.gcl-rewards-page .gcl-rank-stage-list,
.gcl-rewards-page .gcl-daily-track{
  padding-inline:2px;
  scroll-padding-inline:2px;
}
.gcl-rewards-page .gcl-rank-stage-card,
.gcl-rewards-page .gcl-daily-track-card{scroll-snap-align:start}
@media (max-width:620px){
  .gcl-rewards-page .gcl-rank-stage-list{--gcl-carousel-card-width:min(320px,calc(100vw - 32px))}
  .gcl-rewards-page .gcl-daily-track{--gcl-carousel-card-width:min(210px,calc(100vw - 32px))}
  .gcl-rewards-page .gcl-rank-stage-badge{width:82px;height:82px}
  .gcl-rewards-page .gcl-rank-detail-summary{grid-template-columns:104px minmax(0,1fr)}
  .gcl-rewards-page .gcl-rank-detail-badge{width:104px;height:104px}
}
@media(max-width:560px){.gcl-root .gcl-games-page .gcl-game-toolbar{display:block!important;padding:0!important;margin:10px 0 16px!important;border:0!important;background:transparent!important;box-shadow:none!important}.gcl-root .gcl-games-page .gcl-game-toolbar>label{display:block!important}.gcl-root .gcl-games-page .gcl-game-toolbar>label:not(:first-child){display:none!important}.gcl-root .gcl-games-page .gcl-game-toolbar label span{display:block;margin:0 0 6px;color:#8fa4b9;font-size:10px;letter-spacing:.1em}.gcl-root .gcl-games-page .gcl-game-toolbar input[data-gcl-game-search]{width:100%;min-height:44px;padding:11px 13px;border:1px solid rgba(63,132,174,.38);border-radius:8px;background:#061421;color:#f2f6fb;font-size:14px;outline:none}.gcl-root .gcl-games-page .gcl-game-toolbar input[data-gcl-game-search]:focus{border-color:#18dff0;box-shadow:0 0 0 2px rgba(24,223,240,.1)}.gcl-root .gcl-games-page .gcl-section-heading,.gcl-root .gcl-games-page .gcl-page-title{margin-bottom:10px}.gcl-root .gcl-games-page .gcl-section-heading p{display:none}}
.gcl-root .gcl-game-drawer .branches-layout{align-items:stretch}.gcl-root .gcl-game-drawer .branch-grid{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));align-items:stretch}.gcl-root .gcl-game-drawer .branch{min-height:170px;width:100%;box-sizing:border-box}.gcl-root .gcl-game-drawer .branch-stat{min-width:0}.gcl-root .gcl-game-drawer .total{height:100%;box-sizing:border-box}
.gcl-root .gcl-game-drawer .page{width:min(1160px,calc(100% - 40px));margin:auto;padding:20px 0 34px;color:#f2f6fb;font-family:Arial,Helvetica,sans-serif}.gcl-root .gcl-game-drawer .top{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.gcl-root .gcl-game-drawer .player-pill{display:inline-flex;align-items:center;gap:9px;border:1px solid #7a6114;color:#ffd642;border-radius:999px;padding:10px 17px;font-size:11px;font-weight:900;letter-spacing:.08em;background:rgba(94,66,5,.14)}.gcl-root .gcl-game-drawer .close{width:38px;height:38px;border:1px solid #1d3851;border-radius:50%;background:#10263e;color:#fff;font-size:22px;cursor:pointer}.gcl-root .gcl-game-drawer .hero{position:relative;overflow:hidden;height:300px;border:1px solid #15344c;border-radius:8px;background:#061421}.gcl-root .gcl-game-drawer .hero-bg{position:absolute;inset:0;background:center/cover no-repeat;opacity:.48}.gcl-root .gcl-game-drawer .hero-bg:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#061421 0%,#061421e8 40%,#06142144)}.gcl-root .gcl-game-drawer .hero-inner{position:relative;z-index:1;display:flex;align-items:center;gap:25px;height:100%;padding:24px}.gcl-root .gcl-game-drawer .cover{width:185px;height:212px;flex:0 0 185px;border:1px solid #18dff0;border-radius:15px;background:center/cover no-repeat}.gcl-root .gcl-game-drawer .meta{color:#18dff0;font-size:11px;font-weight:800}.gcl-root .gcl-game-drawer .meta .white{color:#fff}.gcl-root .gcl-game-drawer .title{margin:14px 0 18px;max-width:560px;color:#f2f6fb;font-family:Orbitron,Arial,sans-serif;font-size:clamp(30px,3.2vw,52px);line-height:1;overflow-wrap:anywhere}.gcl-root .gcl-game-drawer .desc-label{color:#18dff0;font-size:10px;font-weight:800}.gcl-root .gcl-game-drawer .desc{margin-top:8px;color:#9aaabc;font-size:13px}.gcl-root .gcl-game-drawer .stats{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin:22px 0}.gcl-root .gcl-game-drawer .stat{position:relative;min-height:190px;padding:20px;border:1px solid #3f84ae47;border-radius:10px;background:#061421}.gcl-root .gcl-game-drawer .stat.cyan{border-color:#18dff0}.gcl-root .gcl-game-drawer .stat.green{border-color:#35e58c}.gcl-root .gcl-game-drawer .stat.gold{border-color:#ffca36}.gcl-root .gcl-game-drawer .stat.purple{border-color:#bd61ff}.gcl-root .gcl-game-drawer .stat.blue{border-color:#49a9ff}.gcl-root .gcl-game-drawer .stat-head{display:flex;align-items:center;gap:10px;color:#18dff0}.gcl-root .gcl-game-drawer .stat-name{font-size:9px;letter-spacing:.08em}.gcl-root .gcl-game-drawer .stat-value{margin:22px 0 6px;font-family:Orbitron,Arial,sans-serif;font-size:25px}.gcl-root .gcl-game-drawer .stat-sub,.gcl-root .gcl-game-drawer .dotline{color:#71869a;font-size:10px}.gcl-root .gcl-game-drawer .small-btn{margin-top:18px;padding:8px 10px;border:1px solid currentColor;border-radius:5px;background:none;color:#18dff0;font-size:9px}.gcl-root .gcl-game-drawer .panel{margin-top:20px;padding:18px;border:1px solid #3f84ae47;border-radius:10px;background:rgba(5,20,34,.94)}.gcl-root .gcl-game-drawer .panel-title{margin-bottom:17px;color:#18dff0;font-size:14px;font-weight:800;letter-spacing:.05em}.gcl-root .gcl-game-drawer .branches-layout{display:grid;grid-template-columns:1fr 235px;gap:14px}.gcl-root .gcl-game-drawer .branch-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.gcl-root .gcl-game-drawer .branch{padding:15px;border:1px solid #3f84ae47;border-radius:9px;background:#081b2c}.gcl-root .gcl-game-drawer .branch-head{display:flex;gap:10px;align-items:center}.gcl-root .gcl-game-drawer .branch h3{margin:0;font-size:13px}.gcl-root .gcl-game-drawer .branch p{margin:5px 0 0;color:#90a0b2;font-size:10px}.gcl-root .gcl-game-drawer .branch-stat{display:flex;justify-content:space-between;margin-top:22px}.gcl-root .gcl-game-drawer .branch-stat span,.gcl-root .gcl-game-drawer .total-foot span{display:block;color:#71869a;font-size:8px}.gcl-root .gcl-game-drawer .branch-stat strong{display:block;margin-top:6px;color:#f2f6fb;font-size:14px}.gcl-root .gcl-game-drawer .progress{height:2px;margin-top:16px;background:#15344c}.gcl-root .gcl-game-drawer .progress b{display:block;width:55%;height:100%;background:#35e58c}.gcl-root .gcl-game-drawer .total{padding:17px;border:1px solid #3f84ae47;border-radius:9px;background:#081b2c}.gcl-root .gcl-game-drawer .tiny{color:#71869a;font-size:9px;letter-spacing:.1em}.gcl-root .gcl-game-drawer .total-pcs{display:flex;align-items:center;gap:12px;margin:20px 0}.gcl-root .gcl-game-drawer .total-pcs strong{display:block;font-family:Orbitron;font-size:34px;color:#18dff0}.gcl-root .gcl-game-drawer .total-pcs span{font-size:8px;color:#90a0b2}.gcl-root .gcl-game-drawer .total-foot{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding-top:14px;border-top:1px solid #15344c}.gcl-root .gcl-game-drawer .total-foot strong{display:block;color:#18dff0;font-size:14px}.gcl-root .gcl-game-drawer .table-wrap{overflow-x:auto}.gcl-root .gcl-game-drawer .table{min-width:760px}.gcl-root .gcl-game-drawer .row{display:grid;grid-template-columns:34px 2fr 1fr 1.3fr 1.2fr 1.4fr;align-items:center;gap:10px;padding:11px 8px;border-bottom:1px solid #15344c;font-size:12px}.gcl-root .gcl-game-drawer .row.head{color:#71869a;font-size:8px;letter-spacing:.08em}.gcl-root .gcl-game-drawer .identity{display:flex;align-items:center;gap:9px;min-width:0}.gcl-root .gcl-game-drawer .identity strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.gcl-root .gcl-game-drawer .avatar{width:26px;height:26px;flex:0 0 26px;border:1px solid #18dff0;border-radius:50%;display:grid;place-items:center;color:#18dff0}.gcl-root .gcl-game-drawer .ptime{color:#18dff0;font-weight:800}.gcl-root .gcl-game-drawer .last{color:#90a0b2}.gcl-root .gcl-game-drawer .footer{padding:20px;text-align:center;color:#71869a;font-size:10px}@media(max-width:700px){.gcl-root .gcl-game-drawer .page{width:calc(100% - 24px)}.gcl-root .gcl-game-drawer .hero{height:auto;min-height:285px}.gcl-root .gcl-game-drawer .hero-inner{align-items:flex-start;padding:18px}.gcl-root .gcl-game-drawer .cover{width:96px;height:128px;flex-basis:96px}.gcl-root .gcl-game-drawer .title{font-size:clamp(25px,7vw,36px)}.gcl-root .gcl-game-drawer .stats{grid-template-columns:repeat(2,1fr);gap:9px}.gcl-root .gcl-game-drawer .stat{min-height:150px;padding:13px}.gcl-root .gcl-game-drawer .stat-value{font-size:20px}.gcl-root .gcl-game-drawer .branches-layout{grid-template-columns:1fr}.gcl-root .gcl-game-drawer .branch-grid{grid-template-columns:1fr}.gcl-root .gcl-game-drawer .table{min-width:0}.gcl-root .gcl-game-drawer .row{grid-template-columns:25px minmax(90px,1fr) 48px 68px;gap:6px}.gcl-root .gcl-game-drawer .row>span:nth-child(5),.gcl-root .gcl-game-drawer .row>span:nth-child(6){display:none}}
.gcl-root .gcl-game-drawer.game-page{--bg-main:#020711;--bg-deep:#030914;--panel-bg:rgba(5,20,34,.94);--panel-bg-light:rgba(8,27,44,.88);--panel-hover:rgba(11,38,58,.92);--border-default:rgba(63,132,174,.28);--border-soft:rgba(74,137,177,.18);--text-primary:#f2f6fb;--text-secondary:#9aaabc;--text-muted:#71869a;--cyan:#18dff0;--green:#35e58c;--gold:#ffca36;--purple:#bd61ff;--blue:#49a9ff;--danger:#ff405a}
.gcl-root .gcl-game-drawer.game-page{background:radial-gradient(circle at 78% 8%,rgba(84,38,160,.16),transparent 30%),radial-gradient(circle at 15% 34%,rgba(0,164,255,.06),transparent 28%),#020711;color:var(--text-primary)}
.gcl-root .gcl-game-drawer.game-page .game-container{width:min(1800px,calc(100% - 48px));margin-inline:auto}
.gcl-root .gcl-game-drawer.game-page .game-hero,.gcl-root .gcl-game-drawer.game-page .dashboard-section{background:var(--panel-bg);border-color:var(--border-default);box-shadow:none}
.gcl-root .gcl-game-drawer.game-page .stat-card,.gcl-root .gcl-game-drawer.game-page .branch-card,.gcl-root .gcl-game-drawer.game-page .branch-total-card{background:var(--panel-bg-light);border-color:var(--border-default);box-shadow:none}
.gcl-root .gcl-game-drawer.game-page .game-info h1{font-size:clamp(30px,3.2vw,52px)!important;max-width:560px;overflow-wrap:anywhere}
.gcl-root .gcl-game-drawer.game-page .game-summary{color:var(--text-secondary)}
.gcl-root .gcl-game-drawer.game-page .stats-grid{gap:14px}.gcl-root .gcl-game-drawer.game-page .stat-card{min-height:190px;border-radius:10px}.gcl-root .gcl-game-drawer.game-page .stat-value{font-size:22px!important}.gcl-root .gcl-game-drawer.game-page .stat-subtitle,.gcl-root .gcl-game-drawer.game-page .stat-extra{color:var(--text-muted)}
.gcl-root .gcl-game-drawer.game-page .dashboard-section{border-radius:10px}.gcl-root .gcl-game-drawer.game-page .section-heading{color:var(--cyan);font-size:14px!important}.gcl-root .gcl-game-drawer.game-page .player-row{border-color:var(--border-soft)}
.gcl-root .gcl-game-drawer.game-page h1{font-size:clamp(32px,3.4vw,52px)!important;line-height:1!important}.gcl-root .gcl-game-drawer.game-page .game-meta{font-size:10px}.gcl-root .gcl-game-drawer.game-page .description-title{font-size:9px}.gcl-root .gcl-game-drawer.game-page .game-summary{font-size:13px}.gcl-root .gcl-game-drawer.game-page .stat-title{font-size:9px!important}.gcl-root .gcl-game-drawer.game-page .stat-value{font-size:22px!important}.gcl-root .gcl-game-drawer.game-page .stat-subtitle,.gcl-root .gcl-game-drawer.game-page .stat-extra{font-size:10px}.gcl-root .gcl-game-drawer.game-page .section-heading{font-size:15px!important}.gcl-root .gcl-game-drawer.game-page .branch-top strong{font-size:13px}.gcl-root .gcl-game-drawer.game-page .branch-top small,.gcl-root .gcl-game-drawer.game-page .branch-stats small{font-size:8px}.gcl-root .gcl-game-drawer.game-page .branch-stats b{font-size:14px}.gcl-root .gcl-game-drawer.game-page .player-head{font-size:8px}.gcl-root .gcl-game-drawer.game-page .player-row{font-size:12px}
.gcl-root .gcl-game-drawer.game-page .player-identity{min-width:0;overflow:hidden}.gcl-root .gcl-game-drawer.game-page .player-identity strong{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(max-width:700px){.gcl-root .gcl-game-drawer.game-page .game-container{width:calc(100% - 28px);padding:18px 0 28px}.gcl-root .gcl-game-drawer.game-page .game-hero{height:auto;min-height:0}.gcl-root .gcl-game-drawer.game-page .hero-content{min-height:0;align-items:flex-start;padding:22px 18px}.gcl-root .gcl-game-drawer.game-page .game-info{max-width:calc(100% - 120px)}.gcl-root .gcl-game-drawer.game-page .game-info h1{font-size:clamp(26px,7vw,38px)!important;line-height:1.02!important;overflow-wrap:anywhere}.gcl-root .gcl-game-drawer.game-page .game-summary{display:block;line-height:1.45}.gcl-root .gcl-game-drawer.game-page .stats-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.gcl-root .gcl-game-drawer.game-page .stat-card{min-height:160px;padding:15px 13px}.gcl-root .gcl-game-drawer.game-page .stat-value{font-size:20px!important}.gcl-root .gcl-game-drawer.game-page .stat-subtitle,.gcl-root .gcl-game-drawer.game-page .stat-extra{font-size:9px}.gcl-root .gcl-game-drawer.game-page .dashboard-section{padding:14px 12px}.gcl-root .gcl-game-drawer.game-page .section-heading{font-size:12px!important}.gcl-root .gcl-game-drawer.game-page .player-table{min-width:0;width:100%}.gcl-root .gcl-game-drawer.game-page .player-head,.gcl-root .gcl-game-drawer.game-page .player-row{grid-template-columns:28px minmax(88px,1fr) 48px 70px;gap:7px}.gcl-root .gcl-game-drawer.game-page .player-head span:nth-child(5),.gcl-root .gcl-game-drawer.game-page .player-head span:nth-child(6),.gcl-root .gcl-game-drawer.game-page .player-row>span:nth-child(5),.gcl-root .gcl-game-drawer.game-page .player-row>span:nth-child(6){display:none}.gcl-root .gcl-game-drawer.game-page .player-row{padding:10px 4px;font-size:11px}.gcl-root .gcl-game-drawer.game-page .player-avatar{width:25px;height:25px}.gcl-root .gcl-game-drawer.game-page .branch-list{grid-template-columns:1fr}}
.gcl-root .gcl-game-drawer.game-page .game-container{width:min(1150px,calc(100% - 48px));padding:20px 0 34px}.gcl-root .gcl-game-drawer.game-page .close-button{top:20px;right:24px;width:38px;height:38px;background:#132239;border-color:#1c3a56;font-size:23px}.gcl-root .gcl-game-drawer.game-page .player-count{margin:0 0 28px;padding:9px 18px;border-color:#9b7617;background:#0d1013;color:#ffd347;font-size:11px}.gcl-root .gcl-game-drawer.game-page .game-hero{height:300px;min-height:300px;border-color:#1a405c;background:#061421}.gcl-root .gcl-game-drawer.game-page .hero-gradient{background:linear-gradient(90deg,#061421 0%,#061421dc 42%,#06142122 100%)}.gcl-root .gcl-game-drawer.game-page .hero-content{min-height:300px;padding:25px;gap:26px}.gcl-root .gcl-game-drawer.game-page .game-cover{flex-basis:185px;width:185px;height:212px;border-radius:15px}.gcl-root .gcl-game-drawer.game-page .game-info{min-width:0;max-width:500px}.gcl-root .gcl-game-drawer.game-page h1{margin:12px 0 18px;font-size:clamp(38px,4.2vw,64px);line-height:.95}.gcl-root .gcl-game-drawer.game-page .hero-character{position:absolute;right:0;top:0;width:57%;height:100%;margin:0;background-size:cover;background-position:center;opacity:.9;mix-blend-mode:normal;mask-image:linear-gradient(90deg,transparent 0%,black 32%)}.gcl-root .gcl-game-drawer.game-page .stats-grid{grid-template-columns:repeat(5,1fr);gap:15px;margin:22px 0}.gcl-root .gcl-game-drawer.game-page .stat-card{min-height:220px;padding:22px 20px;border-radius:12px;background:linear-gradient(145deg,#071b2a,#07111e)}.gcl-root .gcl-game-drawer.game-page .stat-icon{width:38px;height:38px;margin-bottom:18px;font-size:25px}.gcl-root .gcl-game-drawer.game-page .stat-title{font-size:11px}.gcl-root .gcl-game-drawer.game-page .stat-value{font-size:29px}.gcl-root .gcl-game-drawer.game-page .stat-subtitle{font-size:12px;line-height:1.45}.gcl-root .gcl-game-drawer.game-page .dashboard-section{margin-top:22px;padding:18px;border-radius:12px;background:rgba(5,20,33,.85)}.gcl-root .gcl-game-drawer.game-page .section-heading{margin-bottom:16px;color:#18dff0;font-size:15px}.gcl-root .gcl-game-drawer.game-page .branches-layout{grid-template-columns:1fr 235px;gap:14px}.gcl-root .gcl-game-drawer.game-page .branch-list{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.gcl-root .gcl-game-drawer.game-page .branch-card{padding:15px;border-radius:10px}.gcl-root .gcl-game-drawer.game-page .branch-stats{justify-content:space-between;gap:8px}.gcl-root .gcl-game-drawer.game-page .branch-total-card{padding:18px}.gcl-root .gcl-game-drawer.game-page .branch-total-footer{display:grid;grid-template-columns:1fr 1fr;gap:10px}.gcl-root .gcl-game-drawer.game-page .branch-total-footer strong,.gcl-root .gcl-game-drawer.game-page .branch-total-footer span{display:block}.gcl-root .gcl-game-drawer.game-page .branch-total-footer strong{color:#18dff0;font-size:15px}.gcl-root .gcl-game-drawer.game-page .branch-total-footer span{font-size:8px;letter-spacing:.08em}.gcl-root .gcl-game-drawer.game-page .player-table{min-width:760px}.gcl-root .gcl-game-drawer.game-page .player-row{padding:11px 10px}.gcl-root .gcl-game-drawer.game-page .player-head{font-size:9px}@media(max-width:850px){.gcl-root .gcl-game-drawer.game-page .game-container{width:calc(100% - 24px)}.gcl-root .gcl-game-drawer.game-page .stats-grid{grid-template-columns:repeat(2,1fr)}.gcl-root .gcl-game-drawer.game-page .branch-list{grid-template-columns:1fr 1fr}.gcl-root .gcl-game-drawer.game-page .branches-layout{grid-template-columns:1fr}.gcl-root .gcl-game-drawer.game-page .hero-character{opacity:.35}}@media(max-width:520px){.gcl-root .gcl-game-drawer.game-page .stats-grid{grid-template-columns:1fr}.gcl-root .gcl-game-drawer.game-page .branch-list{grid-template-columns:1fr}.gcl-root .gcl-game-drawer.game-page .hero-content{padding:18px;gap:14px}.gcl-root .gcl-game-drawer.game-page .game-cover{width:105px;height:140px;flex-basis:105px}.gcl-root .gcl-game-drawer.game-page h1{font-size:34px}.gcl-root .gcl-game-drawer.game-page .player-count{margin-bottom:16px}}
.gcl-root .gcl-game-drawer.game-page{--cyan:#1ee7f0;--green:#31e49a;--gold:#ffc83d;--purple:#bf58ff;--blue:#47a8ff;font-family:Inter,Arial,sans-serif;background:radial-gradient(circle at 75% 15%,rgba(88,45,170,.16),transparent 35%),radial-gradient(circle at 20% 40%,rgba(0,170,255,.08),transparent 36%),#020711}
.gcl-root .gcl-game-drawer.game-page .game-container{width:min(1840px,calc(100% - 60px));padding:32px 0 48px}
.gcl-root .gcl-game-drawer.game-page .player-count{display:flex;width:max-content;align-items:center;gap:10px;margin:0 0 21px;padding:11px 17px;border:1px solid rgba(255,197,44,.55);border-radius:30px;background:linear-gradient(180deg,rgba(119,84,15,.18),rgba(35,25,4,.38));color:#ffd84f;font-family:Orbitron,Inter,sans-serif;font-size:11px;letter-spacing:.7px;text-align:left}
.gcl-root .gcl-game-drawer.game-page .player-count:before{content:'♟';font-size:17px}.gcl-root .gcl-game-drawer.game-page .game-hero{height:340px;min-height:340px;border-radius:8px;background:rgba(5,18,33,.86)}.gcl-root .gcl-game-drawer.game-page .hero-content{min-height:340px;padding:32px 44px}.gcl-root .gcl-game-drawer.game-page .game-cover{flex:0 0 180px;width:180px;height:260px;border-radius:8px}.gcl-root .gcl-game-drawer.game-page h1,.gcl-root .gcl-game-drawer.game-page h2{font-family:Orbitron,Inter,sans-serif}.gcl-root .gcl-game-drawer.game-page h1{font-size:clamp(36px,5vw,78px);letter-spacing:1px}.gcl-root .gcl-game-drawer.game-page .description-title,.gcl-root .gcl-game-drawer.game-page .section-kicker{font-family:Orbitron,Inter,sans-serif}.gcl-root .gcl-game-drawer.game-page .stats-grid{gap:16px;margin:22px 0}.gcl-root .gcl-game-drawer.game-page .stat-card{display:block;position:relative;min-height:190px;padding:24px 22px;border-radius:8px}.gcl-root .gcl-game-drawer.game-page .stat-icon{display:block;width:35px;height:35px;margin-bottom:18px}.gcl-root .gcl-game-drawer.game-page .stat-title{display:block;color:#92a6ba;font-family:Orbitron,Inter,sans-serif;font-size:10px;letter-spacing:.8px}.gcl-root .gcl-game-drawer.game-page .stat-value{display:block;margin:10px 0 5px;color:#fff;font-family:Orbitron,Inter,sans-serif;font-size:26px}.gcl-root .gcl-game-drawer.game-page .stat-subtitle,.gcl-root .gcl-game-drawer.game-page .stat-extra{display:block;color:#748ba1;font-size:11px}.gcl-root .gcl-game-drawer.game-page .mini-action{margin-top:18px;border:0;background:none;color:#2de2ff;font-size:10px;cursor:pointer}.gcl-root .gcl-game-drawer.game-page .mini-graph,.gcl-root .gcl-game-drawer.game-page .bar-graph{position:absolute;right:18px;bottom:18px;display:flex;align-items:end;gap:4px;height:34px}.gcl-root .gcl-game-drawer.game-page .mini-graph i,.gcl-root .gcl-game-drawer.game-page .bar-graph i{display:block;width:5px;height:var(--h,45%);background:currentColor;border-radius:2px}.gcl-root .gcl-game-drawer.game-page .mini-graph i:nth-child(2n){height:70%}.gcl-root .gcl-game-drawer.game-page .bar-graph i:nth-child(3n){height:90%}.gcl-root .gcl-game-drawer.game-page .section-heading{display:flex;align-items:center;gap:12px;margin-bottom:24px;color:#fff;font-family:Orbitron,Inter,sans-serif;font-size:22px;letter-spacing:1px}.gcl-root .gcl-game-drawer.game-page .heading-icon{color:#2de2ff;font-size:22px}.gcl-root .gcl-game-drawer.game-page .dashboard-section{border-radius:8px}.gcl-root .gcl-game-drawer.game-page .player-table{min-width:980px}.gcl-root .gcl-game-drawer.game-page .player-head,.gcl-root .gcl-game-drawer.game-page .player-row{grid-template-columns:70px 2fr 1fr 1.25fr 1.2fr 1.3fr}
/* Prevent reward text from colliding or being clipped inside fixed cards. */
.gcl-rewards-page .gcl-rank-stage-card{
  height:420px;
  min-height:420px;
  overflow:hidden;
}
.gcl-rewards-page .gcl-rank-unlock-row{
  min-width:0;
  min-height:39px;
  padding-block:7px;
  line-height:1.2;
}
.gcl-rewards-page .gcl-rank-unlock-row strong,
.gcl-rewards-page .gcl-rank-unlock-row small{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.gcl-rewards-page .gcl-rank-unlock-row small{line-height:1.2}
.gcl-rewards-page .gcl-rank-more-rewards{
  margin-top:7px;
  color:#2ad5f2;
  font-size:9px;
  font-weight:800;
  letter-spacing:.04em;
  text-align:right;
  text-transform:uppercase;
}
/* Compact point-pay carousel */
.gcl-rewards-page .gcl-point-pay-track{
  display:flex!important;
  align-items:stretch;
  gap:6px;
  margin-top:0!important;
  padding:2px 2px 12px!important;
  overflow-x:auto;
  cursor:grab;
  scrollbar-width:thin;
  scrollbar-color:#2ad5f2 #111936;
  overscroll-behavior-x:contain;
  touch-action:pan-y;
  user-select:none;
  scroll-snap-type:x mandatory;
}
.gcl-rewards-page .gcl-point-pay-track:active{cursor:grabbing}
.gcl-rewards-page .gcl-rank-stage-list.gcl-is-dragging,
.gcl-rewards-page .gcl-daily-track.gcl-is-dragging,
.gcl-rewards-page .gcl-streak-track.gcl-is-dragging,
.gcl-rewards-page .gcl-point-pay-track.gcl-is-dragging{
  scroll-snap-type:none!important;
  scroll-behavior:auto!important;
  cursor:grabbing;
}
.gcl-rewards-page .gcl-rank-stage-list::before,
.gcl-rewards-page .gcl-daily-track::before,
.gcl-rewards-page .gcl-streak-track::before,
.gcl-rewards-page .gcl-point-pay-track::before{
  pointer-events:none;
}
.gcl-rewards-page .gcl-point-pay-track .gcl-point-pay-reward-card{
  position:relative;
  flex:0 0 280px;
  width:280px;
  min-width:280px;
  max-width:280px;
  height:236px;
  min-height:236px;
  box-sizing:border-box;
  scroll-snap-align:start;
}
.gcl-rewards-page .gcl-point-pay-track .gcl-point-pay-reward-card:not(:last-child)::after{
  content:"›";
  position:absolute;
  top:50%;
  z-index:2;
  display:grid;
  place-items:center;
  transform:translateY(-50%);
  border:0;
  border-radius:50%;
  background:#167cf2;
  box-shadow:0 0 16px rgba(22,124,242,.46);
  color:#fff;
  font-weight:900;
  line-height:1;
}
.gcl-rewards-page .gcl-point-pay-track .gcl-point-pay-reward-card:not(:last-child)::after,
.gcl-rewards-page .gcl-daily-track-card:not(:last-child)::after{
  pointer-events:none;
  right:-14px;
  width:26px;
  height:26px;
  font-size:22px;
}
.gcl-rewards-page .gcl-daily-track,
.gcl-rewards-page .gcl-streak-track{gap:6px}
.gcl-rewards-page .gcl-streak-track{--gcl-carousel-card-width:170px;padding-inline:2px;scroll-padding-inline:2px}
.gcl-rewards-page .gcl-streak-track-card{height:220px;min-height:220px;padding:10px 8px 8px}
.gcl-rewards-page .gcl-streak-track-card .gcl-daily-track-icon--image{width:66px;height:66px;margin:0 auto 3px}
.gcl-rewards-page .gcl-streak-track-days{font-size:8px}
.gcl-rewards-page .gcl-streak-track-card h3{font-size:10px;line-height:1.15}
@media (max-width:620px){
  .gcl-rewards-page .gcl-point-pay-track .gcl-point-pay-reward-card{flex-basis:min(280px,calc(100vw - 32px));width:min(280px,calc(100vw - 32px));min-width:min(280px,calc(100vw - 32px));max-width:min(280px,calc(100vw - 32px))}
  .gcl-rewards-page .gcl-streak-track{--gcl-carousel-card-width:min(190px,calc(100vw - 32px))}
}
/* Keep point-pay card copy and price inside the card at every width. */
.gcl-rewards-page .gcl-point-pay-track .gcl-point-pay-reward-card{
  display:flex;
  flex-direction:column;
  height:282px;
  min-height:282px;
  padding:14px 16px 16px;
}
.gcl-rewards-page .gcl-point-pay-track .gcl-point-pay-reward-image{
  flex:0 0 96px;
  width:112px;
  height:96px;
  margin:0 auto 8px;
}
.gcl-rewards-page .gcl-point-pay-track .gcl-point-pay-reward-card>div{
  min-width:0;
  flex:1 1 auto;
}
.gcl-rewards-page .gcl-point-pay-track .gcl-point-pay-reward-card h3{
  margin:3px 0 0;
  overflow-wrap:anywhere;
  line-height:1.2;
}
.gcl-rewards-page .gcl-point-pay-track .gcl-point-pay-reward-card p{
  min-height:0;
  margin:8px 0 0;
  overflow:hidden;
  line-height:1.45;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
}
.gcl-rewards-page .gcl-point-pay-track .gcl-point-pay-reward-card>strong{
  display:block;
  flex:0 0 auto;
  margin-top:10px;
  padding-top:2px;
  line-height:1.2;
}
@media(max-width:620px){
  .gcl-rewards-page .gcl-point-pay-track .gcl-point-pay-reward-card{
    height:270px;
    min-height:270px;
    padding-inline:14px;
  }
  .gcl-rewards-page .gcl-point-pay-track .gcl-point-pay-reward-image{
    flex-basis:88px;
    width:104px;
    height:88px;
  }
}
/* Point-pay cards use drag and auto-rotation, so do not show hover arrows. */
.gcl-rewards-page .gcl-point-pay-track .gcl-point-pay-reward-card::after{
  display:none!important;
  content:none!important;
}

/* Small screens use a compact two-column layout for every reward section. */
@media(max-width:620px){
  .gcl-rewards-page .gcl-rank-stage-list,
  .gcl-rewards-page .gcl-daily-track,
  .gcl-rewards-page .gcl-streak-track,
  .gcl-rewards-page .gcl-point-pay-track{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:10px;
    width:100%;
    padding:2px 0 12px;
    overflow:visible;
    scroll-snap-type:none;
    touch-action:auto;
    cursor:default!important;
  }
  .gcl-rewards-page .gcl-rank-stage-card,
  .gcl-rewards-page .gcl-daily-track-card,
  .gcl-rewards-page .gcl-streak-track-card,
  .gcl-rewards-page .gcl-point-pay-track .gcl-point-pay-reward-card{
    flex:0 0 auto;
    width:100%!important;
    min-width:0!important;
    max-width:none!important;
    scroll-snap-align:none;
  }
  .gcl-rewards-page .gcl-rank-stage-card:not(:last-child)::after,
  .gcl-rewards-page .gcl-daily-track-card:not(:last-child)::after,
  .gcl-rewards-page .gcl-point-pay-reward-card:not(:last-child)::after{
    display:none!important;
    content:none!important;
  }
}

/* On phone-sized screens rank rewards stay available in the detail popup. */
@media(max-width:480px){
  .gcl-rewards-page .gcl-rank-stage-card{
    height:220px;
    min-height:220px;
  }
  .gcl-rewards-page .gcl-rank-stage-rewards{
    display:none;
  }
  .gcl-rewards-page .gcl-daily-track-card,
  .gcl-rewards-page .gcl-streak-track-card{
    min-height:0;
    height:auto;
    padding-block:9px 8px;
  }
  .gcl-rewards-page .gcl-daily-track-card h3,
  .gcl-rewards-page .gcl-streak-track-card h3{
    min-height:0;
    line-height:1.1;
  }
  .gcl-rewards-page .gcl-daily-track-card p{
    min-height:0;
    margin:3px 0;
    line-height:1.2;
  }
  .gcl-rewards-page .gcl-daily-track-card>strong{
    min-height:0;
    margin-top:3px;
    line-height:1.15;
  }
  .gcl-rewards-page .gcl-daily-track-state{
    margin-top:4px;
    padding-block:4px;
  }
}

/* Full-width sticky player progression band. */
.gcl-rewards-page{padding-top:60px!important}
.gcl-rewards-page .gcl-rank-progress-hero{
  position:sticky;
  top:80px;
  z-index:12;
  width:100%;
  min-height:clamp(340px,42vh,500px);
  display:flex;
  align-items:center;
  overflow:hidden;
  background-color:#0a101c;
  background:
    linear-gradient(180deg,#875e0e 0%,#604410 24%,#302719 55%,#171b25 78%,#0a101c 100%);
  border-top:1px solid rgba(255,211,94,.72);
  border-bottom:0;
  box-shadow:0 0 28px rgba(255,188,42,.16),0 16px 28px rgba(0,0,0,.2);
}
.gcl-rewards-page .gcl-rank-progress-hero::before{
  content:"";
  position:absolute;
  inset:0 0 auto;
  height:42%;
  pointer-events:none;
  background:radial-gradient(ellipse at 50% -30%,rgba(255,231,137,.5),transparent 62%);
  animation:gcl-rank-gold-breathe 4.8s ease-in-out infinite;
}
@keyframes gcl-rank-gold-breathe{
  0%,100%{opacity:.6;transform:scaleX(.94)}
  50%{opacity:1;transform:scaleX(1)}
}
.gcl-rewards-page .gcl-rank-progress-hero::after{
  display:none;
  content:none;
}
.gcl-rewards-page .gcl-rank-progress-shell{
  position:relative;
  z-index:1;
  width:min(1500px,calc(100% - 48px));
  margin-inline:auto;
  padding:28px 0 24px;
}
.gcl-rewards-page .gcl-rank-progress-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:24px;
}
.gcl-rewards-page .gcl-rank-progress-head h1{
  margin:5px 0 7px;
  color:#f5fbff;
  font-family:Orbitron,Arial,sans-serif;
  font-size:clamp(22px,3vw,38px);
  line-height:1.1;
}
.gcl-rewards-page .gcl-rank-progress-head p{
  max-width:620px;
  margin:0;
  color:#9eb2c4;
  font-size:12px;
  line-height:1.5;
}
.gcl-rewards-page .gcl-rank-progress-current{
  min-width:180px;
  padding:13px 16px;
  border-left:2px solid #ffc83d;
  background:rgba(4,10,21,.46);
}
.gcl-rewards-page .gcl-rank-progress-current span,
.gcl-rewards-page .gcl-rank-progress-current strong,
.gcl-rewards-page .gcl-rank-progress-current b{display:block}
.gcl-rewards-page .gcl-rank-progress-current span{color:#8fa5b8;font-size:9px;letter-spacing:.1em;text-transform:uppercase}
.gcl-rewards-page .gcl-rank-progress-current strong{margin-top:4px;color:#fff;font-family:Orbitron,Arial,sans-serif;font-size:18px}
.gcl-rewards-page .gcl-rank-progress-current b{margin-top:5px;color:#ffd35e;font-family:Orbitron,Arial,sans-serif;font-size:12px}
.gcl-rewards-page .gcl-rank-progress-bar-wrap{margin-top:28px}
.gcl-rewards-page .gcl-rank-progress-track{
  position:relative;
  height:14px;
  overflow:visible;
  border:1px solid rgba(255,211,94,.38);
  border-radius:999px;
  background:#111a2e;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.25),0 0 18px rgba(255,192,49,.08);
}
.gcl-rewards-page .gcl-rank-progress-track>span{
  display:block;
  width:0;
  height:100%;
  border-radius:inherit;
  background:linear-gradient(90deg,#d89120,#ffd35e 52%,#fff0a0 70%,#35e58c);
  box-shadow:0 0 16px rgba(255,203,67,.68);
  transition:width .65s ease;
}
.gcl-rewards-page .gcl-rank-progress-particles{position:absolute;inset:-16px 0 -12px;pointer-events:none}
.gcl-rewards-page .gcl-rank-progress-particles b{
  position:absolute;
  left:var(--particle-x);
  bottom:2px;
  width:var(--particle-size);
  height:var(--particle-size);
  border-radius:50%;
  background:#ffe38a;
  box-shadow:0 0 9px 2px rgba(255,197,56,.8);
  animation:gcl-rank-particle-rise 2.6s ease-in-out var(--particle-delay) infinite;
}
@keyframes gcl-rank-particle-rise{
  0%,100%{opacity:0;transform:translate3d(0,7px,0) scale(.55)}
  35%{opacity:.95}
  70%{opacity:.25;transform:translate3d(4px,-17px,0) scale(1)}
}
.gcl-rewards-page .gcl-rank-progress-scale{display:flex;justify-content:space-between;gap:12px;margin-top:9px;color:#8fa5b8;font-size:9px}
.gcl-rewards-page .gcl-rank-progress-scale{display:none!important}
.gcl-rewards-page .gcl-rank-progress-scale span:last-child{color:#ffd35e;text-align:right}
.gcl-rewards-page .gcl-rank-progress-milestones{
  position:relative;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:0;
  margin-top:29px;
  overflow-x:auto;
  padding:2px 4px 8px;
  scrollbar-width:thin;
  scrollbar-color:#ffc83d rgba(14,23,41,.7);
}
.gcl-rewards-page .gcl-rank-progress-milestones::before{
  content:"";
  position:absolute;
  top:62px;
  left:8%;
  right:8%;
  height:2px;
  background:linear-gradient(90deg,transparent,#80651f 10%,#ffc83d 50%,#80651f 90%,transparent);
  box-shadow:0 0 10px rgba(255,200,61,.32);
}
.gcl-rewards-page .gcl-rank-progress-milestone{
  position:relative;
  display:flex;
  min-width:0;
  min-height:142px;
  align-items:center;
  flex-direction:column;
  padding:0 8px 6px;
  background:transparent;
  border:0;
  transition:transform .2s ease;
}
.gcl-rewards-page .gcl-rank-progress-milestone-gift{position:relative;z-index:1;display:grid;place-items:center;width:76px;height:59px;margin:0 auto}
.gcl-rewards-page .gcl-rank-progress-milestone-gift img{display:block;width:76px;height:59px;object-fit:contain;opacity:1!important;filter:drop-shadow(0 0 9px rgba(255,194,53,.52))!important}
.gcl-rewards-page .gcl-rank-progress-milestone-node{position:relative;z-index:2;display:block;width:11px;height:11px;margin-top:-2px;border:2px solid #fff0a0;border-radius:50%;background:#ffc83d;box-shadow:0 0 0 4px rgba(255,200,61,.14),0 0 12px rgba(255,200,61,.92)}
.gcl-rewards-page .gcl-rank-progress-milestone-copy{width:100%;min-width:0;margin-top:9px;text-align:center}
.gcl-rewards-page .gcl-rank-progress-milestone-copy strong,
.gcl-rewards-page .gcl-rank-progress-milestone-copy small,
.gcl-rewards-page .gcl-rank-progress-milestone-copy em{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gcl-rewards-page .gcl-rank-progress-milestone-copy strong{color:#f5fbff;font-family:Orbitron,Arial,sans-serif;font-size:10px}
.gcl-rewards-page .gcl-rank-progress-milestone-copy small{margin-top:4px;color:#c5d0dc;font-size:9px;line-height:1.25}
.gcl-rewards-page .gcl-rank-progress-milestone-copy em{margin-top:4px;color:#59ef9d;font-size:8px;font-style:normal;font-weight:800;text-transform:uppercase}
.gcl-rewards-page .gcl-rank-progress-milestone.is-locked .gcl-rank-progress-milestone-node{border-color:#8993a3;background:#667081;box-shadow:0 0 0 4px rgba(130,142,162,.1),0 0 8px rgba(97,108,126,.45)}
.gcl-rewards-page .gcl-rank-progress-milestone.is-locked .gcl-rank-progress-milestone-gift img{filter:grayscale(.45) brightness(.86) drop-shadow(0 0 7px rgba(255,194,53,.2))!important}
.gcl-rewards-page .gcl-rank-progress-milestone.is-locked .gcl-rank-progress-milestone-copy em{color:#a8b1bf}
.gcl-rewards-page .gcl-rank-progress-milestone-line{display:none!important}
.gcl-rewards-page .gcl-reward-type-mark--gift{border:0!important;background:transparent!important}
.gcl-rewards-page .gcl-reward-type-mark--gift img{display:block;width:100%;height:100%;object-fit:contain}
.gcl-rewards-page .gcl-rank-progress-head{position:relative;min-height:86px}
.gcl-rewards-page .gcl-rank-progress-identity{position:absolute;left:50%;top:0;display:flex;align-items:center;gap:12px;transform:translateX(-50%);text-align:left}
.gcl-rewards-page .gcl-rank-progress-identity>div:last-child{min-width:112px}
.gcl-rewards-page .gcl-rank-progress-identity span,
.gcl-rewards-page .gcl-rank-progress-identity strong,
.gcl-rewards-page .gcl-rank-progress-identity b{display:block}
.gcl-rewards-page .gcl-rank-progress-identity span{color:#aeb9c8;font-size:9px;letter-spacing:.1em;text-transform:uppercase}
.gcl-rewards-page .gcl-rank-progress-identity strong{margin-top:4px;color:#fff;font-family:Orbitron,Arial,sans-serif;font-size:18px}
.gcl-rewards-page .gcl-rank-progress-identity b{margin-top:5px;color:#ffd35e;font-family:Orbitron,Arial,sans-serif;font-size:12px}
.gcl-rewards-page .gcl-rank-progress-badge{position:relative;display:grid;place-items:center;width:84px;height:84px;flex:0 0 84px}
.gcl-rewards-page .gcl-rank-progress-badge img{display:block;width:100%;height:100%;object-fit:contain;opacity:1;filter:drop-shadow(0 0 12px rgba(255,199,61,.4))}
.gcl-rewards-page .gcl-rank-progress-badge span{display:none}
.gcl-rewards-page .gcl-rank-progress-journey{width:100%;overflow-x:auto;cursor:grab;scrollbar-width:thin;scrollbar-color:#ffc83d rgba(14,23,41,.7);overscroll-behavior-x:contain;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.gcl-rewards-page .gcl-rank-progress-journey.gcl-is-dragging{cursor:grabbing;scroll-behavior:auto}
.gcl-rewards-page .gcl-rank-progress-journey-inner{width:max(100%,720px);padding-bottom:2px}
.gcl-rewards-page .gcl-rank-progress-journey .gcl-rank-progress-bar-wrap{margin-top:0}
.gcl-rewards-page .gcl-rank-progress-journey .gcl-rank-progress-milestones{overflow:visible}
.gcl-rewards-page .gcl-rank-progress-milestone.is-demo .gcl-rank-progress-milestone-gift img{opacity:1!important}
@media (prefers-reduced-motion:reduce){
  .gcl-rewards-page .gcl-rank-progress-particles b{animation:none;opacity:.5}
  .gcl-rewards-page .gcl-rank-progress-track>span{transition:none}
}
@media (max-width:700px){
  .gcl-rewards-page{padding-top:48px!important}
  .gcl-rewards-page .gcl-rank-progress-hero{top:68px;min-height:clamp(360px,48vh,520px)}
  .gcl-rewards-page .gcl-rank-progress-shell{width:calc(100% - 28px);padding:22px 0 18px}
  .gcl-rewards-page .gcl-rank-progress-head{display:block;min-height:118px}
  .gcl-rewards-page .gcl-rank-progress-identity{position:relative;left:auto;top:auto;width:max-content;margin:17px auto 0;transform:none}
  .gcl-rewards-page .gcl-rank-progress-badge{width:72px;height:72px;flex-basis:72px}
  .gcl-rewards-page .gcl-rank-progress-current{min-width:0;margin-top:15px;padding:10px 12px;border-left-width:1px}
  .gcl-rewards-page .gcl-rank-progress-current strong{font-size:15px}
  .gcl-rewards-page .gcl-rank-progress-bar-wrap{margin-top:7px}
  .gcl-rewards-page .gcl-rank-progress-milestones{grid-template-columns:repeat(3,minmax(165px,1fr));margin-top:24px}
}

/* Point-driven reward states and compact sticky progress behavior. */
.gcl-rewards-page .gcl-rank-progress-milestone.is-locked .gcl-rank-progress-milestone-gift img{opacity:.45;filter:grayscale(1) brightness(.68)}
.gcl-rewards-page .gcl-rank-progress-milestone.is-locked .gcl-rank-progress-milestone-copy strong{color:#a5afbd}
.gcl-rewards-page .gcl-rank-progress-milestone.is-locked .gcl-rank-progress-milestone-copy em{color:#8b96a4}
.gcl-rewards-page .gcl-rank-progress-milestone-copy em{white-space:nowrap}
.gcl-rewards-page .gcl-rank-stage-card.is-rank-locked .gcl-rank-stage-rewards{opacity:.72}
.gcl-rewards-page .gcl-rank-stage-card.is-rank-locked .gcl-rank-stage-rewards-title{color:#9ca7b6}
.gcl-rewards-page .gcl-rank-stage-card.is-rank-locked .gcl-rank-unlock-row strong{color:#a9b3c0}
.gcl-rewards-page .gcl-rank-stage-card.is-rank-locked .gcl-rank-unlock-row small{color:#7f8b99}
.gcl-rewards-page .gcl-rank-stage-card .gcl-reward-type-mark--gift img.is-rank-reward-locked{opacity:.45;filter:grayscale(1) brightness(.68)}
.gcl-rewards-page .gcl-rank-progress-hero.is-compact{min-height:clamp(170px,22vh,240px);transition:min-height .35s ease}
.gcl-rewards-page .gcl-rank-progress-hero.is-compact .gcl-rank-progress-shell{padding:14px 0 12px}
.gcl-rewards-page .gcl-rank-progress-hero.is-compact .gcl-rank-progress-head{min-height:60px}
.gcl-rewards-page .gcl-rank-progress-hero.is-compact .gcl-rank-progress-identity{gap:8px}
.gcl-rewards-page .gcl-rank-progress-hero.is-compact .gcl-rank-progress-badge{width:54px;height:54px;flex-basis:54px}
.gcl-rewards-page .gcl-rank-progress-hero.is-compact .gcl-rank-progress-identity strong{font-size:14px}
.gcl-rewards-page .gcl-rank-progress-hero.is-compact .gcl-rank-progress-identity b{margin-top:2px;font-size:10px}
.gcl-rewards-page .gcl-rank-progress-hero.is-compact .gcl-rank-progress-bar-wrap{margin-top:8px}
.gcl-rewards-page .gcl-rank-progress-hero.is-compact .gcl-rank-progress-milestones{margin-top:12px}
.gcl-rewards-page .gcl-rank-progress-hero.is-compact .gcl-rank-progress-milestone{min-height:94px}
.gcl-rewards-page .gcl-rank-progress-hero.is-compact .gcl-rank-progress-milestone-gift{width:54px;height:42px}
.gcl-rewards-page .gcl-rank-progress-hero.is-compact .gcl-rank-progress-milestone-gift img{width:54px;height:42px}
.gcl-rewards-page .gcl-rank-progress-hero.is-compact .gcl-rank-progress-milestone-copy{margin-top:5px}
.gcl-rewards-page .gcl-rank-progress-hero.is-compact .gcl-rank-progress-milestone-copy strong{font-size:9px}
.gcl-rewards-page .gcl-rank-progress-hero.is-compact .gcl-rank-progress-milestone-copy small,.gcl-rewards-page .gcl-rank-progress-hero.is-compact .gcl-rank-progress-milestone-copy em{font-size:8px}
.gcl-rewards-page .gcl-rewards-section.is-reveal-ready{opacity:0;transform:translateY(24px)}
.gcl-rewards-page .gcl-rewards-section.is-reveal-ready.is-revealed{opacity:1;transform:translateY(0);transition:opacity .65s ease,transform .65s ease}
.gcl-rewards-page .gcl-rank-journey-section.is-revealed .gcl-rank-stage-card{animation:gcl-reward-card-reveal .55s ease both;animation-delay:calc(var(--gcl-motion-order, 0) * 70ms)}
@keyframes gcl-reward-card-reveal{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}

/* Popup rewards keep the gift visible while the text remains easy to scan. */
.gcl-rank-detail-reward{grid-template-columns:48px 76px minmax(0,1fr)}
.gcl-rank-detail-reward-gift{display:block;width:76px;height:62px;object-fit:contain;filter:drop-shadow(0 6px 10px rgba(0,0,0,.38))}
.gcl-rank-detail-reward.is-rank-reward-locked{opacity:.68}
.gcl-rank-detail-reward-gift.is-rank-reward-locked{opacity:.45;filter:grayscale(1) brightness(.7)}
.gcl-rank-detail-reward.is-rank-reward-locked strong{color:#a9b3c0}
@media(max-width:700px){
  .gcl-rewards-page .gcl-rank-progress-hero.is-compact{min-height:clamp(150px,26vh,210px)}
  .gcl-rewards-page .gcl-rank-progress-hero.is-compact .gcl-rank-progress-head{min-height:86px}
}
@media(max-width:620px){
  .gcl-rank-detail-reward{grid-template-columns:34px 62px minmax(0,1fr);gap:9px;padding:11px}
  .gcl-rank-detail-reward-gift{width:62px;height:52px}
}
@media(prefers-reduced-motion:reduce){
  .gcl-rewards-page .gcl-rewards-section.is-reveal-ready{opacity:1;transform:none}
  .gcl-rewards-page .gcl-rank-journey-section.is-revealed .gcl-rank-stage-card{animation:none}
  .gcl-rewards-page .gcl-rank-progress-hero.is-compact{transition:none}
}

/* Keep scroll flow stable while the sticky band changes its visible density. */
.gcl-rewards-page{overflow-anchor:none}
.gcl-rewards-page .gcl-rank-progress-flow-spacer{display:block;height:0;pointer-events:none;overflow-anchor:none;transition:height .42s cubic-bezier(.2,.78,.18,1)}
.gcl-rewards-page .gcl-rank-progress-track{top:auto;left:auto;right:auto}
.gcl-rewards-page .gcl-rank-progress-hero{transition:min-height .42s cubic-bezier(.2,.78,.18,1),opacity .2s ease,transform .2s ease,visibility .2s ease}
.gcl-rewards-page .gcl-rank-progress-journey .gcl-rank-progress-bar-wrap{display:none!important}
.gcl-rewards-page .gcl-rank-progress-milestones::before{
  display:block!important;
  content:""!important;
  position:absolute;
  top:62px;
  left:8%;
  right:8%;
  z-index:0;
  height:4px;
  border:0;
  border-radius:999px;
  background:#1b273c;
  box-shadow:0 0 0 1px rgba(255,255,255,.08),inset 0 0 4px rgba(0,0,0,.4);
}
.gcl-rewards-page .gcl-rank-progress-milestones::after{
  display:block!important;
  content:""!important;
  position:absolute;
  top:62px;
  left:8%;
  z-index:0;
  width:var(--gcl-milestone-line-width,0%);
  height:4px;
  border-radius:999px;
  background:linear-gradient(90deg,#d89120,#ffd35e 52%,#fff0a0 78%,#35e58c);
  box-shadow:none;
  transition:width .65s ease;
}
.gcl-rewards-page .gcl-rank-progress-milestone{z-index:1}
.gcl-rewards-page .gcl-rank-progress-hero.is-compact{min-height:234px;transition:min-height .42s cubic-bezier(.2,.78,.18,1),opacity .2s ease,transform .2s ease,visibility .2s ease}
.gcl-rewards-page .gcl-rank-progress-hero.is-compact .gcl-rank-progress-shell{padding:10px 0 12px}
.gcl-rewards-page .gcl-rank-progress-hero.is-compact .gcl-rank-progress-head{display:block;min-height:18px;height:18px}
.gcl-rewards-page .gcl-rank-progress-hero.is-compact .gcl-rank-progress-head h1,
.gcl-rewards-page .gcl-rank-progress-hero.is-compact .gcl-rank-progress-head p,
.gcl-rewards-page .gcl-rank-progress-hero.is-compact .gcl-rank-progress-identity{display:none!important}
.gcl-rewards-page .gcl-rank-progress-hero.is-compact .gcl-rank-progress-bar-wrap{margin-top:0}
.gcl-rewards-page .gcl-rank-progress-hero.is-compact .gcl-rank-progress-milestones{margin-top:14px;padding-bottom:4px}
.gcl-rewards-page .gcl-rank-progress-hero.is-compact .gcl-rank-progress-milestone{min-height:124px}
.gcl-rewards-page .gcl-rank-progress-hero.is-compact .gcl-rank-progress-milestone-gift{width:64px;height:50px}
.gcl-rewards-page .gcl-rank-progress-hero.is-compact .gcl-rank-progress-milestone-gift img{width:64px;height:50px}
.gcl-rewards-page .gcl-rank-progress-hero.is-compact .gcl-rank-progress-milestone-copy{margin-top:8px}
.gcl-rewards-page .gcl-rank-progress-hero.is-compact .gcl-rank-progress-milestones::before,
.gcl-rewards-page .gcl-rank-progress-hero.is-compact .gcl-rank-progress-milestones::after{top:54px}

@media(max-width:700px){
  .gcl-rewards-page .gcl-rank-progress-hero.is-compact{min-height:214px}
  .gcl-rewards-page .gcl-rank-progress-hero.is-compact .gcl-rank-progress-shell{width:calc(100% - 28px);padding:10px 0 10px}
  .gcl-rewards-page .gcl-rank-progress-hero.is-compact .gcl-rank-progress-milestones{grid-template-columns:repeat(3,minmax(165px,1fr));margin-top:12px}
  .gcl-rewards-page .gcl-rank-progress-hero.is-compact .gcl-rank-progress-milestone{min-height:116px}
}

/* Keep the sticky band out of the way while rank details are open. */
html.gcl-rank-detail-open .gcl-rewards-page .gcl-rank-progress-hero,
body.gcl-rank-detail-open .gcl-rewards-page .gcl-rank-progress-hero{visibility:hidden!important;opacity:0!important;pointer-events:none;transform:none;transition:none!important}

/* Blend the sticky band's bottom edge into the page over the last 50px. */
.gcl-rewards-page .gcl-rank-progress-hero::after{
  display:block!important;
  content:""!important;
  position:absolute;
  right:0;
  bottom:0;
  left:0;
  z-index:0;
  height:50px;
  pointer-events:none;
  background:linear-gradient(180deg,rgba(10,16,28,0),rgba(5,10,19,.96));
}

/* Softer transparent brown wash with no gold halo around the section. */
.gcl-rewards-page .gcl-rank-progress-hero{
  background-color:transparent;
  background:linear-gradient(180deg,rgba(135,94,14,.68) 0%,rgba(96,68,16,.48) 24%,rgba(48,39,25,.25) 55%,rgba(23,27,37,.12) 78%,rgba(10,16,28,0) 100%);
  box-shadow:0 16px 28px rgba(0,0,0,.12);
}
.gcl-rewards-page .gcl-rank-progress-hero::before{opacity:.42}
.gcl-rewards-page .gcl-rank-progress-track{box-shadow:none}
.gcl-rewards-page .gcl-rank-progress-milestones::after{box-shadow:none}
.gcl-rewards-page .gcl-rank-progress-hero::after{background:linear-gradient(180deg,rgba(10,16,28,0),rgba(5,10,19,.22))}

/* Tighten the handoff from the progress hero into the rank journey. */
.gcl-rewards-page .gcl-rank-progress-hero{align-items:flex-start}
.gcl-rewards-page .gcl-rank-progress-shell{padding-top:22px;padding-bottom:20px}
.gcl-rewards-page>.gcl-section{padding-top:12px}
.gcl-rewards-page .gcl-ranking-quote{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  margin:4px 0 8px;
  padding:15px 20px;
  border-top:1px solid rgba(255,211,94,.18);
  border-bottom:1px solid rgba(255,211,94,.12);
  background:linear-gradient(90deg,transparent,rgba(255,190,45,.07) 50%,transparent);
  text-align:center;
}
.gcl-rewards-page .gcl-ranking-quote p{margin:0;color:#f5fbff;font-family:Orbitron,Arial,sans-serif;font-size:12px;letter-spacing:.02em}
.gcl-rewards-page .gcl-ranking-quote span{color:#ffd35e;font-size:9px;font-weight:800;letter-spacing:.12em;text-transform:uppercase}
.gcl-rewards-page.gcl-rank-progress-guest-hidden .gcl-rank-progress-hero,
.gcl-rewards-page.gcl-rank-progress-guest-hidden .gcl-rank-progress-flow-spacer{display:none!important;height:0!important;min-height:0!important}
@media(max-width:620px){
  .gcl-rewards-page .gcl-ranking-quote{flex-direction:column;gap:6px;padding:13px 14px}
  .gcl-rewards-page .gcl-ranking-quote p{font-size:10px;line-height:1.45}
}

/* Rank identity for every profile/avatar preview. */
.gcl-avatar-rank-host{
  --gcl-avatar-rank-color:#8b98aa;
  border-radius:50%!important;
  position:relative!important;
  overflow:visible!important;
  border-color:var(--gcl-avatar-rank-color)!important;
  box-shadow:0 0 0 1px color-mix(in srgb,var(--gcl-avatar-rank-color) 28%,transparent),0 8px 22px color-mix(in srgb,var(--gcl-avatar-rank-color) 18%,transparent);
  transition:border-color .2s ease,box-shadow .2s ease;
}
.gcl-account-avatar.gcl-avatar-rank-host{
  border-color:var(--gcl-avatar-rank-color)!important;
  overflow:visible!important;
}
.gcl-avatar-rank-host[data-gcl-avatar-rank="guest"]{--gcl-avatar-rank-color:#8b98aa}
.gcl-avatar-rank-host[data-gcl-avatar-rank="bronze"]{--gcl-avatar-rank-color:#c78752}
.gcl-avatar-rank-host[data-gcl-avatar-rank="silver"]{--gcl-avatar-rank-color:#c4d0df}
.gcl-avatar-rank-host[data-gcl-avatar-rank="gold"]{--gcl-avatar-rank-color:#ffd35e}
.gcl-avatar-rank-host[data-gcl-avatar-rank="platinum"]{--gcl-avatar-rank-color:#56e4f5}
.gcl-avatar-rank-host[data-gcl-avatar-rank="diamond"]{--gcl-avatar-rank-color:#ba83ff}
.gcl-avatar-rank-host[data-gcl-avatar-rank="master"]{--gcl-avatar-rank-color:#ff68b8}
.gcl-avatar-rank-badge{
  align-items:center;
  background:transparent!important;
  border:0!important;
  border-radius:0!important;
  bottom:-10px;
  box-shadow:none!important;
  display:grid!important;
  height:28px!important;
  justify-content:center;
  left:50%;
  overflow:visible!important;
  padding:0!important;
  place-items:center;
  pointer-events:none;
  position:absolute!important;
  transform:translateX(-50%);
  width:28px!important;
  z-index:6;
}
.gcl-avatar-rank-badge img{
  border-radius:0!important;
  display:block!important;
  height:100%!important;
  object-fit:contain!important;
  opacity:1;
  width:100%!important;
}
.gcl-avatar-rank-badge>span{
  align-items:center!important;
  background:transparent!important;
  color:#fff!important;
  display:none!important;
  font-family:Orbitron,Arial,sans-serif;
  font-size:7px!important;
  font-weight:900;
  justify-content:center!important;
  line-height:1!important;
  position:absolute;
}
.gcl-player-board-avatar .gcl-avatar-rank-badge,
.gcl-video-creator-avatar .gcl-avatar-rank-badge,
.gcl-menu-user-avatar .gcl-avatar-rank-badge,
.gcl-ranking-avatar .gcl-avatar-rank-badge,
.gcl-rank-dot .gcl-avatar-rank-badge,
.gcl-overview-user .gcl-avatar-rank-badge{
  bottom:-7px;
  height:20px!important;
  padding:0!important;
  width:20px!important;
}
.gcl-rank-dot .gcl-avatar-rank-badge{bottom:-5px;height:16px!important;width:16px!important}
.gcl-rank-dot .gcl-avatar-rank-badge img{object-fit:contain!important}
.gcl-your-avatar .gcl-avatar-rank-badge{bottom:-9px;height:27px!important;width:27px!important}
@media(max-width:620px){
  .gcl-avatar-rank-badge{bottom:-8px;height:24px!important;width:24px!important}
  .gcl-player-board-avatar .gcl-avatar-rank-badge,
  .gcl-video-creator-avatar .gcl-avatar-rank-badge,
  .gcl-menu-user-avatar .gcl-avatar-rank-badge,
  .gcl-ranking-avatar .gcl-avatar-rank-badge,
  .gcl-rank-dot .gcl-avatar-rank-badge,
  .gcl-overview-user .gcl-avatar-rank-badge{height:18px!important;width:18px!important}
}

/* Reward tracks keep only real cards. Drag is available only when content overflows. */
.gcl-rewards-page .gcl-rank-stage-list:not(.is-overflowing),
.gcl-rewards-page .gcl-daily-track:not(.is-overflowing),
.gcl-rewards-page .gcl-streak-track:not(.is-overflowing),
.gcl-rewards-page .gcl-point-pay-track:not(.is-overflowing){
  cursor:default!important;
  scrollbar-width:none;
}
.gcl-rewards-page .gcl-rank-stage-list:not(.is-overflowing) .gcl-rank-stage-card::after,
.gcl-rewards-page .gcl-daily-track:not(.is-overflowing) .gcl-daily-track-card::after,
.gcl-rewards-page .gcl-streak-track:not(.is-overflowing) .gcl-streak-track-card::after,
.gcl-rewards-page .gcl-point-pay-track:not(.is-overflowing) .gcl-point-pay-reward-card::after{display:none!important}

/* Keep progress milestones on one horizontal RP timeline. */
.gcl-rewards-page .gcl-rank-progress-journey-inner{
  width:max(100%,var(--gcl-progress-content-width,720px));
}
.gcl-rewards-page .gcl-rank-progress-milestones{
  display:block;
  width:100%;
  min-height:142px;
  box-sizing:border-box;
  overflow:visible;
  grid-template-columns:none;
}
.gcl-rewards-page .gcl-rank-progress-milestone{
  position:absolute;
  top:0;
  left:var(--milestone-position,50%);
  width:min(220px,24%);
  min-width:150px;
  box-sizing:border-box;
  transform:translateX(-50%);
}