@font-face{font-family:'Orbitron';font-style:normal;font-weight:500;font-display:swap;src:url(/gamescape/orbitron-500.woff2) format('woff2')}
@font-face{font-family:'Orbitron';font-style:normal;font-weight:700;font-display:swap;src:url(/gamescape/orbitron-700.woff2) format('woff2')}
@font-face{font-family:'Orbitron';font-style:normal;font-weight:800;font-display:swap;src:url(/gamescape/orbitron-800.woff2) format('woff2')}
@font-face{font-family:'Rajdhani';font-style:normal;font-weight:500;font-display:swap;src:url(/gamescape/rajdhani-500.woff2) format('woff2')}
@font-face{font-family:'Rajdhani';font-style:normal;font-weight:600;font-display:swap;src:url(/gamescape/rajdhani-600.woff2) format('woff2')}
@font-face{font-family:'Rajdhani';font-style:normal;font-weight:700;font-display:swap;src:url(/gamescape/rajdhani-700.woff2) format('woff2')}
@font-face{font-family:'Exo 2';font-style:normal;font-weight:400 700;font-display:swap;src:url(/gamescape/exo2.woff2) format('woff2')}

/* theme.css */
/* ==========================================================================
   GS - GameScape Online theme for RomM 5.3.x
   Layered on top of RomM's stock UI via /gamescape/theme.css (see index.html).
   Palette pulled from the GameScape "Powered by Cyber Systems" wallpaper.
   ========================================================================== */



:root {
  --gs-cyan: #22e4ff;
  --gs-blue: #4f7bff;
  --gs-violet: #8b3dff;
  --gs-magenta: #e03cff;
  --gs-pink: #ff3ecf;
  --gs-ink: #05040f;
  --gs-ink-2: #0a0820;
  --gs-gradient: linear-gradient(90deg, var(--gs-cyan) 0%, var(--gs-blue) 45%, var(--gs-magenta) 100%);
  --gs-glow-cyan: 0 0 12px rgb(34 228 255 / 45%);
  --gs-glow-magenta: 0 0 14px rgb(224 60 255 / 50%);
  --gs-wallpaper: url(/gamescape/wallpaper.webp);
}

/* ---- Brand tokens (both themes) --------------------------------------- */
html.r-v2 {
  --r-color-brand-primary: #c04dff;
  --r-color-brand-primary-hover: #d680ff;
  --r-color-brand-primary-pressed: #8f2fe0;
  --r-color-brand-secondary: #22d3ee;
  --r-color-brand-secondary-hover: #8cf0ff;
  --r-color-brand-secondary-pressed: #0ea5c6;
  --r-color-brand-accent: #ff3ecf;
  --r-color-brand-accent-hover: #ff8ae3;
  --r-color-avatar-gradient: linear-gradient(135deg, var(--gs-cyan), var(--gs-magenta));
  --r-color-info: #7dd3fc;
  --r-font-family-display: "Orbitron", "Segoe UI", system-ui, sans-serif;
}

/* ---- Squared geometry: hard edges, LaunchBox-style -------------------- */
html.r-v2 {
  --r-radius-xs: 0;
  --r-radius-sm: 2px;
  --r-radius-chip: 2px;
  --r-radius-md: 2px;
  --r-radius-art: 2px;
  --r-radius-lg: 3px;
  --r-radius-card: 3px;
  --r-radius-xl: 4px;
  --r-radius-pill: 3px;
  --r-radius-full: 3px;
}
/* RomM sets some radii inline (cards 12px, buttons 8px) – flatten those too */
html.r-v2 .r-card,
html.r-v2 .r-btn,
html.r-v2 .r-img,
html.r-v2 .r-menu__panel,
html.r-v2 .r-dialog,
html.r-v2 [class*="r-dialog__"],
html.r-v2 .r-text-field__field,
html.r-v2 .r-chip,
html .r-menu__panel {
  border-radius: var(--r-radius-md) !important;
}
html .r-v2-auth .auth-card { border-radius: 4px !important; }
/* Legacy Vuetify screens */
html .v-application .v-btn,
html .v-application .v-card,
html .v-application .v-sheet,
html .v-application .v-chip,
html .v-application .v-field,
html .v-application [class*="rounded"] {
  border-radius: 2px !important;
}

/* ---- Dark theme surfaces: deep navy with neon-tinted edges ------------- */
html.r-v2.r-v2-dark {
  --r-color-bg: #05040f;
  --r-color-bg-elevated: rgb(120 110 255 / 5%);
  --r-color-surface: rgb(130 120 255 / 8%);
  --r-color-surface-hover: rgb(150 120 255 / 15%);
  --r-color-border: rgb(120 140 255 / 14%);
  --r-color-border-strong: rgb(160 120 255 / 30%);
  --r-color-focus: rgb(34 228 255 / 70%);
  --r-color-panel: rgb(10 8 30 / 96%);
  --r-color-panel-border: rgb(140 110 255 / 28%);
  --r-color-tooltip-bg: rgb(6 5 20 / 95%);
  --r-color-tooltip-border: rgb(34 228 255 / 25%);
  --r-color-cover-placeholder: #120e2e;
  --r-color-cover-placeholder-bright: #1d1747;
  --r-color-auth-glass: rgb(8 6 26 / 72%);
  --r-color-toast-bg: rgb(8 6 26 / 94%);
  --r-color-canvas-bg-deep: #05040f;
}

/* Legacy (Vuetify) screens – e.g. the classic UI and the player chrome */
html .v-theme--dark {
  --v-theme-background: 5, 4, 15;
  --v-theme-surface: 12, 10, 34;
  --v-theme-primary: 192, 77, 255;
  --v-theme-secondary: 34, 211, 238;
  --v-theme-accent: 255, 62, 207;
}

/* ---- Wallpaper as the app backdrop ------------------------------------ */
/* RomM paints .r-v2-bg__layer with a default blob SVG and swaps in game art
   via inline style while browsing. This rule only replaces the default –
   inline game art still wins because inline styles beat stylesheet rules. */
html.r-v2 .r-v2-bg__layer {
  background-image: var(--gs-wallpaper);
  background-size: cover;
  background-position: center;
  filter: blur(3px) brightness(.5) saturate(1.15);
}
html.r-v2.r-v2-light .r-v2-bg__layer {
  filter: blur(6px) brightness(1.05) saturate(.8);
}

/* ---- Typography -------------------------------------------------------- */
html.r-v2 h1,
html.r-v2 h2,
html.r-v2 .r-v2-section-title,
html.r-v2 [class*="__title"]:where(h1, h2, h3) {
  font-family: var(--r-font-family-display);
  letter-spacing: .04em;
}

/* ---- Buttons & controls: neon edge ------------------------------------ */
html.r-v2 .r-btn--has-color:not(.r-btn--disabled):not(.r-btn--variant-text):not(.r-btn--variant-plain) {
  box-shadow: 0 0 0 1px rgb(224 60 255 / 35%), 0 0 16px rgb(192 77 255 / 30%);
}
html.r-v2 .r-btn--has-color:not(.r-btn--disabled):hover {
  box-shadow: 0 0 0 1px rgb(34 228 255 / 55%), 0 0 20px rgb(34 228 255 / 35%);
}
html.r-v2 :focus-visible {
  outline-color: var(--gs-cyan);
}
html.r-v2 ::selection {
  background: rgb(192 77 255 / 45%);
}

/* Scrollbars */
html.r-v2 ::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgb(34 228 255 / 45%), rgb(224 60 255 / 45%));
  border-radius: 8px;
}
html.r-v2 { scrollbar-color: rgb(160 90 255 / 50%) transparent; }


/* ==========================================================================
   Login / setup / auth screens
   ========================================================================== */
html .r-v2-auth__bg {
  background-image:
    linear-gradient(to bottom, rgb(5 4 15 / 0%) 45%, rgb(5 4 15 / 88%) 72%, rgb(5 4 15 / 96%) 100%),
    radial-gradient(ellipse at 50% 45%, rgb(5 4 15 / 30%) 0%, rgb(5 4 15 / 78%) 70%),
    var(--gs-wallpaper) !important;
  background-size: cover !important;
  background-position: center !important;
  animation: none !important;
}
html .r-v2-auth__bg > * { display: none; }

html .r-v2-auth .auth-card {
  background: rgb(8 6 26 / 72%) !important;
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border: 1px solid transparent;
    background-clip: padding-box;
  box-shadow:
    0 0 0 1px rgb(34 228 255 / 35%),
    0 0 28px rgb(34 228 255 / 18%),
    0 0 60px rgb(224 60 255 / 18%),
    0 20px 60px rgb(0 0 0 / 60%) !important;
  min-width: min(440px, 92vw);
}

/* Replace the round RomM logo with the GAMESCAPE wordmark + "ONLINE" */
html .r-v2-auth .auth-card__logo {
  position: relative;
  overflow: visible !important;
  width: min(340px, 76vw) !important;
  aspect-ratio: 884 / 104;
  height: auto !important;
  background: url(/gamescape/wordmark.png) center / contain no-repeat;
  filter: drop-shadow(0 0 10px rgb(160 90 255 / 45%));
  margin: 4px auto 34px;
}
html .r-v2-auth .auth-card__logo::after {
  content: "ONLINE";
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 8px);
  text-align: center;
  font-family: "Orbitron", system-ui, sans-serif;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .6em;
  padding-left: .6em;
  color: #fff;
  text-shadow: 0 0 8px rgb(34 228 255 / 80%), 0 0 16px rgb(224 60 255 / 60%);
}
html .r-v2-auth .auth-card__logo img { display: none !important; }

html .r-v2-auth .r-text-field__input::placeholder { color: rgb(200 210 255 / 55%); }
html .r-v2-auth .r-text-field__underline {
  background: linear-gradient(90deg, rgb(34 228 255 / 40%), rgb(224 60 255 / 40%));
}

html .r-v2-auth .r-btn[type="submit"] {
  background: var(--gs-gradient) !important;
  color: #fff !important;
  font-family: var(--r-font-family-display);
  letter-spacing: .12em;
  text-transform: uppercase;
  box-shadow: var(--gs-glow-cyan), var(--gs-glow-magenta) !important;
}
html .r-v2-auth .r-btn[type="submit"].r-btn--disabled {
  opacity: .55;
  box-shadow: none !important;
}
html .r-v2-auth .r-v2-login-form__forgot a { color: var(--gs-cyan) !important; }

/* ==========================================================================
   First-paint splash (index.html #app-loading-logo)
   ========================================================================== */
html #app-loading-logo {
  background: radial-gradient(ellipse at center, #140c3a 0%, #05040f 70%) !important;
}
html #app-loading-logo img {
  opacity: .9 !important;
  width: min(420px, 70vw) !important;
  height: auto !important;
  filter: drop-shadow(0 0 16px rgb(160 90 255 / 55%));
  animation: gs-pulse 1.6s ease-in-out infinite;
}
@keyframes gs-pulse { 50% { opacity: .55; } }


/* ==========================================================================
   LaunchBox-style app chrome
   ========================================================================== */

/* ---- Hard squared corners everywhere (keep true circles only where needed) */
html.r-v2 *:not(.r-avatar):not(.r-avatar *):not([class*="spinner"]):not([class*="progress"]):not([class*="radio"]):not(svg *),
html .r-menu__panel,
html .r-menu__panel * {
  border-radius: 2px !important;
}
html.r-v2 .r-avatar { border-radius: 2px !important; }

/* ---- Readability: slightly larger type, higher contrast ---------------- */
html.r-v2 {
  --r-font-size-xs: 11.5px;
  --r-font-size-sm: 12.5px;
  --r-font-size-md: 14px;
  --r-font-size-lg: 15.5px;
  --r-font-size-xl: 18px;
}
html.r-v2.r-v2-dark {
  --r-color-fg-secondary: rgb(235 238 255 / 85%);
  --r-color-fg-muted: rgb(215 220 255 / 60%);
}

/* ---- Top bar: solid LaunchBox-style toolbar with a neon rule ----------- */
html.r-v2 .r-v2-nav-bar {
  background: linear-gradient(180deg, rgb(10 8 30 / 97%), rgb(6 5 20 / 94%)) !important;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent;
  border-image: var(--gs-gradient) 1;
  box-shadow: 0 4px 24px rgb(0 0 0 / 55%), 0 1px 12px rgb(160 90 255 / 25%);
}
html.r-v2 .r-v2-nav__logo-word {
  width: 150px !important;
  filter: drop-shadow(0 0 6px rgb(160 90 255 / 50%));
}
html.r-v2 .r-v2-nav__logo-mark { filter: drop-shadow(0 0 6px rgb(34 228 255 / 45%)); }

/* Primary nav: flat tabs with an underline instead of a pill slider */
html.r-v2 .r-v2-nav__center .r-slider-btn-group {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
html.r-v2 .r-v2-nav__center .r-slider-btn-group__indicator {
  background: rgb(192 77 255 / 16%) !important;
  border-bottom: 2px solid var(--gs-cyan);
  box-shadow: 0 6px 14px -8px var(--gs-cyan);
}
html.r-v2 .r-v2-nav__center .r-slider-btn-group__btn {
  font-family: "Orbitron", system-ui, sans-serif;
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgb(225 230 255 / 75%) !important;
}
html.r-v2 .r-v2-nav__center .r-slider-btn-group__btn--active,
html.r-v2 .r-v2-nav__center .r-slider-btn-group__btn:hover { color: #fff !important; }

/* Section tabs (Library / Firmware / Settings, Overview / Files / …) */
html.r-v2 .r-tab-nav__btn {
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: 12.5px;
}
html.r-v2 .r-tab-nav__indicator {
  background: var(--gs-gradient) !important;
  height: 2px;
  box-shadow: 0 0 10px rgb(34 228 255 / 60%);
}

/* ---- Page & section headings ------------------------------------------ */
html.r-v2 h1 {
  font-family: "Orbitron", system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: .03em;
  text-shadow: 0 0 18px rgb(160 90 255 / 35%);
}
html.r-v2 h2,
html.r-v2 h3 {
  font-family: "Orbitron", system-ui, sans-serif;
  letter-spacing: .06em;
}

/* ---- Game cards: box-art tiles with neon selection frame --------------- */
html.r-v2 .r-gc .r-gc__art,
html.r-v2 .game-cover {
  border-radius: 2px !important;
  box-shadow: 0 6px 18px rgb(0 0 0 / 55%);
  outline: 1px solid rgb(140 120 255 / 18%);
  outline-offset: -1px;
  transition: box-shadow .15s ease, outline-color .15s ease, transform .15s ease;
}
html.r-v2 .r-gc:hover .r-gc__art,
html.r-v2 .r-gc:focus-visible .r-gc__art {
  outline: 2px solid var(--gs-cyan);
  outline-offset: 0;
  box-shadow: 0 0 0 1px rgb(224 60 255 / 60%), 0 0 22px rgb(34 228 255 / 45%), 0 10px 24px rgb(0 0 0 / 60%);
}

/* Platform tiles */
html.r-v2 [class*="plat-card"],
html.r-v2 [class*="platform-card"] {
  background: linear-gradient(180deg, rgb(20 16 52 / 85%), rgb(8 6 26 / 90%)) !important;
  border: 1px solid rgb(120 140 255 / 16%) !important;
}
html.r-v2 [class*="plat-card"]:hover,
html.r-v2 [class*="platform-card"]:hover {
  border-color: var(--gs-cyan) !important;
  box-shadow: 0 0 18px rgb(34 228 255 / 30%);
}

/* ==========================================================================
   GameScape platform sidebar (built by theme.js)
   ========================================================================== */
:root { --gs-sb-w: 248px; --gs-sb-w-collapsed: 60px; }

#gs-sidebar {
  position: fixed;
  top: var(--r-nav-h, 58px);
  bottom: 0;
  left: 0;
  width: var(--gs-sb-w);
  z-index: 50;
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, rgb(10 8 30 / 96%), rgb(5 4 15 / 97%));
  border-right: 1px solid rgb(120 140 255 / 18%);
  box-shadow: 6px 0 24px rgb(0 0 0 / 45%);
  font-family: "Segoe UI", system-ui, sans-serif;
  color: #e8ebff;
  transition: width .18s ease;
}
#gs-sidebar[hidden] { display: none !important; }
html.gs-sb-collapsed #gs-sidebar { width: var(--gs-sb-w-collapsed); }

html.gs-sb-on .r-v2-app-shell__body > :not(.r-v2-nav-bar):not(#gs-sidebar) {
  margin-left: var(--gs-sb-w);
  transition: margin-left .18s ease;
}
html.gs-sb-on.gs-sb-collapsed .r-v2-app-shell__body > :not(.r-v2-nav-bar):not(#gs-sidebar) {
  margin-left: var(--gs-sb-w-collapsed);
}

.gs-sb__head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 10px 8px 14px;
}
.gs-sb__title {
  flex: 1;
  font-family: "Orbitron", system-ui, sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .24em;
  color: var(--gs-cyan);
  text-shadow: 0 0 8px rgb(34 228 255 / 55%);
}
.gs-sb__toggle {
  all: unset;
  cursor: pointer;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 1px solid rgb(120 140 255 / 25%);
  border-radius: 2px;
  color: #cfd6ff;
  font-size: 16px;
}
.gs-sb__toggle:hover { border-color: var(--gs-cyan); color: #fff; }
.gs-sb__toggle:focus-visible { outline: 2px solid var(--gs-cyan); }

.gs-sb__filter {
  margin: 0 10px 8px 14px;
  padding: 8px 10px;
  background: rgb(255 255 255 / 5%);
  border: 1px solid rgb(120 140 255 / 22%);
  border-radius: 2px;
  color: #fff;
  font: inherit;
  font-size: 13px;
  outline: none;
}
.gs-sb__filter:focus { border-color: var(--gs-cyan); box-shadow: 0 0 10px rgb(34 228 255 / 25%); }

.gs-sb__list {
  flex: 1;
  overflow-y: auto;
  padding: 2px 0 16px;
  scrollbar-width: thin;
  scrollbar-color: rgb(160 90 255 / 45%) transparent;
}
.gs-sb__group {
  padding: 12px 14px 4px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgb(200 205 255 / 45%);
}
.gs-sb__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 12px 7px 11px;
  border-left: 3px solid transparent;
  color: rgb(230 234 255 / 85%);
  text-decoration: none;
  font-size: 13.5px;
  line-height: 1.2;
  cursor: pointer;
}
.gs-sb__item:hover { background: rgb(130 120 255 / 12%); color: #fff; }
.gs-sb__item:focus-visible { outline: 2px solid var(--gs-cyan); outline-offset: -2px; }
.gs-sb__item[aria-current="page"] {
  background: linear-gradient(90deg, rgb(34 228 255 / 18%), rgb(192 77 255 / 8%) 70%, transparent);
  border-left-color: var(--gs-cyan);
  color: #fff;
  font-weight: 600;
}
.gs-sb__icon {
  flex: none;
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  font-size: 18px;
  color: var(--gs-cyan);
}
.gs-sb__icon img { width: 24px; height: 24px; object-fit: contain; }
.gs-sb__name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gs-sb__count {
  flex: none;
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
  color: rgb(200 205 255 / 55%);
}
.gs-sb__item[aria-current="page"] .gs-sb__count { color: var(--gs-cyan); }
.gs-sb__empty { padding: 10px 14px; color: rgb(200 205 255 / 55%); font-size: 13px; }

html.gs-sb-collapsed .gs-sb__title,
html.gs-sb-collapsed .gs-sb__filter,
html.gs-sb-collapsed .gs-sb__group,
html.gs-sb-collapsed .gs-sb__name,
html.gs-sb-collapsed .gs-sb__count { display: none; }
html.gs-sb-collapsed .gs-sb__head { justify-content: center; padding-inline: 0; }
html.gs-sb-collapsed .gs-sb__item { justify-content: center; padding-inline: 0; }

/* Small screens: RomM's own bottom navigation is better there */
@media (width < 1000px) {
  #gs-sidebar { display: none !important; }
  html.gs-sb-on .r-v2-app-shell__body > :not(.r-v2-nav-bar):not(#gs-sidebar) { margin-left: 0 !important; }
}

/* ---- Primary "Play" action: neon gradient ----------------------------- */
html.r-v2 .r-v2-game-btn--emphasized {
  background: var(--gs-gradient) !important;
  border-color: transparent !important;
  color: #fff !important;
  box-shadow: 0 0 14px rgb(34 228 255 / 35%), 0 0 18px rgb(224 60 255 / 30%);
}
html.r-v2 .r-v2-game-btn--emphasized:hover {
  background: linear-gradient(90deg, #5cf0ff 0%, #7d9bff 45%, #ea70ff 100%) !important;
  box-shadow: 0 0 20px rgb(34 228 255 / 55%), 0 0 26px rgb(224 60 255 / 45%);
}
html.r-v2 .r-v2-game-btn--action-play.r-v2-game-btn--labelled .r-v2-game-btn__label {
  font-family: "Orbitron", system-ui, sans-serif;
  letter-spacing: .12em;
  text-transform: uppercase;
}

/* ---- Missing-cover placeholder (RomM draws it inline) ------------------ */
html.r-v2 .cover-ph { background: url(/gamescape/cover-placeholder.svg) center / cover no-repeat; }
html.r-v2 .cover-ph__art { opacity: 0; }

/* ---- Segmented toggles (Saves/States, grid/list, sort…) ---------------- */
html.r-v2 .r-slider-btn-group__indicator {
  background: rgb(34 228 255 / 16%) !important;
  box-shadow: inset 0 0 0 1px rgb(34 228 255 / 65%), 0 0 12px rgb(34 228 255 / 25%) !important;
}
html.r-v2 .r-slider-btn-group__btn--active,
html.r-v2 .r-slider-btn-group__btn--active .r-icon { color: #fff !important; }

/* ==========================================================================
   Uniform box art + user-adjustable size (slider in the sidebar)
   ========================================================================== */
/* Every game tile is the same 2:3 portrait frame; art is fitted inside it. */
html.r-v2 .r-gc:not(.r-gc--hero),
html.r-v2 .r-gc:not(.r-gc--hero) .game-cover {
  --r-cover-ratio: .6667 !important;
}
html.r-v2 .r-gc:not(.r-gc--hero) .game-cover {
  background: radial-gradient(ellipse at 50% 40%, #140e38 0%, #07061a 80%) !important;
}
html.r-v2 .r-gc:not(.r-gc--hero) .game-cover__img {
  object-fit: contain !important;
}
/* Titles: two lines max, same height on every tile so rows line up */
html.r-v2 .r-gc [class*="r-gc__title"],
html.r-v2 .r-gc [class*="r-gc__name"] {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  white-space: normal;
  overflow: hidden;
  min-height: 2.5em;
  line-height: 1.25;
}

/* Desktop: card width follows the user's slider (default 150px) */
@media (width >= 1000px) {
  html.r-v2 { --r-card-art-w: var(--gs-card-w, 150px); }
}

.gs-sb__size {
  border-top: 1px solid rgb(120 140 255 / 18%);
  padding: 10px 14px 14px;
}
.gs-sb__size label {
  display: flex;
  justify-content: space-between;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgb(200 205 255 / 55%);
  margin-bottom: 8px;
}
.gs-sb__size output { color: var(--gs-cyan); letter-spacing: .05em; }
.gs-sb__size input[type="range"] {
  width: 100%;
  accent-color: #c04dff;
  cursor: pointer;
}
html.gs-sb-collapsed .gs-sb__size { display: none; }

/* ==========================================================================
   Wallpaper look: framed neon tiles, neon labels, circuit grid, palette-only
   ========================================================================== */
html.r-v2 {
  --r-font-family-sans: "Exo 2", "Segoe UI", system-ui, sans-serif;
  /* status colours remapped onto the wallpaper palette */
  --r-color-success: #22e4ff;
  --r-color-status-base-success: #22e4ff;
  --r-color-warning: #ff3ecf;
  --r-color-warning-fg: #ff7ee0;
  --r-color-status-base-warning: #ff3ecf;
  --r-color-danger: #ff2d7a;
  --r-color-danger-fg: #ff6fa3;
  --r-color-status-base-danger: #ff2d7a;
  --r-color-info: #4f7bff;
  --r-color-status-base-info: #4f7bff;
  --r-color-fav: #ff3ecf;
  --r-color-romm-red: #ff2d7a;
  --r-color-romm-green: #22e4ff;
  --r-color-romm-blue: #4f7bff;
  --r-color-romm-gold: #e03cff;
  --r-color-overlay-gold: #e03cff;
  --r-color-emphasis: #22e4ff;
}
html.r-v2 body, html.r-v2 .r-v2 { font-family: var(--r-font-family-sans); }

/* Circuit grid over the backdrop, like the wallpaper's data field */
html.r-v2 .r-v2-bg__overlay {
  background-image:
    linear-gradient(rgb(79 123 255 / 6%) 1px, transparent 1px),
    linear-gradient(90deg, rgb(79 123 255 / 6%) 1px, transparent 1px),
    linear-gradient(to right, rgb(5 4 15 / 72%) 0%, rgb(5 4 15 / 45%) 55%, rgb(5 4 15 / 65%) 100%),
    linear-gradient(to bottom, rgb(5 4 15 / 20%) 0%, rgb(5 4 15 / 92%) 85%) !important;
  background-size: 44px 44px, 44px 44px, auto, auto !important;
}

/* ---- Game tiles: always-on neon frame, alternating cyan / magenta ------ */
html.r-v2 .r-gc:not(.r-gc--hero) .r-gc__art {
  outline: 1px solid rgb(34 228 255 / 55%) !important;
  outline-offset: 0 !important;
  box-shadow: 0 0 12px rgb(34 228 255 / 22%), 0 8px 20px rgb(0 0 0 / 55%) !important;
}
html.r-v2 .r-gc:not(.r-gc--hero):nth-child(even) .r-gc__art {
  outline-color: rgb(224 60 255 / 55%) !important;
  box-shadow: 0 0 12px rgb(224 60 255 / 22%), 0 8px 20px rgb(0 0 0 / 55%) !important;
}
html.r-v2 .r-gc:not(.r-gc--hero):hover .r-gc__art,
html.r-v2 .r-gc:not(.r-gc--hero):focus-visible .r-gc__art,
html.r-v2 .r-gc--focused:not(.r-gc--hero) .r-gc__art {
  outline: 2px solid #22e4ff !important;
  box-shadow: 0 0 0 1px rgb(224 60 255 / 70%), 0 0 26px rgb(34 228 255 / 55%), 0 12px 28px rgb(0 0 0 / 65%) !important;
}
/* Neon labels under tiles, like "16-BIT GENESIS" on the wallpaper */
html.r-v2 .r-gc__label {
  font-family: "Exo 2", system-ui, sans-serif;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #a9f3ff !important;
  text-shadow: 0 0 8px rgb(34 228 255 / 45%);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  white-space: normal !important;
  overflow: hidden;
  min-height: 2.6em;
  line-height: 1.3;
  text-align: center;
}
html.r-v2 .r-gc:nth-child(even) .r-gc__label {
  color: #f3b3ff !important;
  text-shadow: 0 0 8px rgb(224 60 255 / 45%);
}

/* ---- Section headers: "── TITLE ──" neon rule like "POWERED BY" -------- */
html.r-v2 .card-row__title,
html.r-v2 .r-v2-widget__title {
  font-family: "Orbitron", system-ui, sans-serif !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 0 10px rgb(34 228 255 / 45%);
}
html.r-v2 .card-row__head { position: relative; }
html.r-v2 .card-row__head::after {
  content: "";
  flex: 1;
  height: 1px;
  margin-left: 14px;
  align-self: center;
  background: linear-gradient(90deg, rgb(34 228 255 / 70%), rgb(224 60 255 / 45%) 60%, transparent);
  box-shadow: 0 0 8px rgb(34 228 255 / 40%);
}

/* ---- Panels & widgets: dark glass with neon edge ---------------------- */
html.r-v2 .r-v2-widget,
html.r-v2 .r-card,
html.r-v2 .r-v2-plat-hero,
html.r-v2 .r-menu__panel,
html.r-menu__panel {
  background: linear-gradient(180deg, rgb(16 12 44 / 92%), rgb(7 6 22 / 94%)) !important;
  border: 1px solid rgb(34 228 255 / 28%) !important;
  box-shadow: 0 0 16px rgb(34 228 255 / 10%), 0 10px 30px rgb(0 0 0 / 50%) !important;
}

/* ---- Platform tiles: framed like the wallpaper's console screens ------- */
html.r-v2 .plat-tile {
  background: linear-gradient(180deg, rgb(18 14 50 / 90%), rgb(7 6 22 / 94%)) !important;
  border: 1px solid rgb(34 228 255 / 40%) !important;
  box-shadow: 0 0 14px rgb(34 228 255 / 14%) !important;
}
html.r-v2 .plat-tile:nth-child(even) {
  border-color: rgb(224 60 255 / 40%) !important;
  box-shadow: 0 0 14px rgb(224 60 255 / 14%) !important;
}
html.r-v2 .plat-tile:hover {
  border-color: #22e4ff !important;
  box-shadow: 0 0 0 1px rgb(224 60 255 / 60%), 0 0 24px rgb(34 228 255 / 40%) !important;
}
html.r-v2 .r-v2-tile__name {
  font-family: "Orbitron", system-ui, sans-serif;
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #a9f3ff;
  text-shadow: 0 0 8px rgb(34 228 255 / 45%);
}
html.r-v2 .plat-tile:nth-child(even) .r-v2-tile__name {
  color: #f3b3ff;
  text-shadow: 0 0 8px rgb(224 60 255 / 45%);
}

/* ---- Inputs ------------------------------------------------------------ */
html.r-v2 .r-text-field__field {
  background: rgb(7 6 22 / 75%) !important;
  box-shadow: inset 0 0 0 1px rgb(34 228 255 / 25%);
}
html.r-v2 .r-text-field__field:focus-within {
  box-shadow: inset 0 0 0 1px #22e4ff, 0 0 12px rgb(34 228 255 / 30%);
}

/* ---- Counters/badges beside titles ------------------------------------- */
html.r-v2 [class*="__count"],
html.r-v2 [class*="-count"]:not(.gs-sb__count) {
  border-color: rgb(34 228 255 / 45%) !important;
  color: #a9f3ff !important;
}
html.r-v2 .r-v2-widget__title { font-size: 11.5px !important; letter-spacing: .14em; }

/* ==========================================================================
   Game tiles: full-bleed art + crisp badges (wallpaper-style screens)
   ========================================================================== */
/* Art fills the whole frame instead of sitting letterboxed inside it */
html.r-v2 .r-gc:not(.r-gc--hero) .game-cover__img {
  object-fit: cover !important;
  object-position: center;
}
/* Soft top/bottom fade so badges stay readable on any artwork */
html.r-v2 .r-gc:not(.r-gc--hero) .game-cover::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(to bottom, rgb(5 4 15 / 70%) 0%, transparent 26%),
    linear-gradient(to top, rgb(5 4 15 / 70%) 0%, transparent 22%);
}
html.r-v2 .r-gc .r-gc__platform-icon,
html.r-v2 .r-gc .sibling-badge,
html.r-v2 .r-gc .r-v2-game-btn--glass,
html.r-v2 .r-gc .card-flags,
html.r-v2 .r-gc .r-gc__overlay,
html.r-v2 .r-gc .r-gc__check { z-index: 2; }

/* Badges: solid dark chip, thin neon edge, white icon */
html.r-v2 .r-gc .r-gc__platform-icon,
html.r-v2 .r-gc .sibling-badge,
html.r-v2 .r-gc .r-v2-game-btn--glass {
  background: rgb(5 4 15 / 88%) !important;
  border: 1px solid rgb(34 228 255 / 60%) !important;
  border-radius: 2px !important;
  box-shadow: 0 0 8px rgb(34 228 255 / 30%), 0 2px 6px rgb(0 0 0 / 60%) !important;
  color: #fff !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
html.r-v2 .r-gc:nth-child(even) .r-gc__platform-icon,
html.r-v2 .r-gc:nth-child(even) .sibling-badge,
html.r-v2 .r-gc:nth-child(even) .r-v2-game-btn--glass {
  border-color: rgb(224 60 255 / 60%) !important;
  box-shadow: 0 0 8px rgb(224 60 255 / 30%), 0 2px 6px rgb(0 0 0 / 60%) !important;
}
html.r-v2 .r-gc .r-v2-game-btn--glass .r-icon,
html.r-v2 .r-gc .sibling-badge .r-icon { color: #fff !important; opacity: 1 !important; }
html.r-v2 .r-gc .sibling-badge__count {
  color: #fff !important;
  font: 700 10.5px/1 "Exo 2", system-ui, sans-serif !important;
}
/* Platform logo inside its chip: full brightness */
html.r-v2 .r-gc .r-platform-icon__img { filter: drop-shadow(0 0 2px rgb(0 0 0 / 80%)); opacity: 1 !important; }
html.r-v2 .r-gc .r-gc__platform-icon:hover,
html.r-v2 .r-gc .r-v2-game-btn--glass:hover,
html.r-v2 .r-gc .sibling-badge:hover {
  border-color: #22e4ff !important;
  box-shadow: 0 0 12px rgb(34 228 255 / 60%) !important;
}
/* Region flags: small framed chips */
html.r-v2 .r-gc .card-flags__chip {
  background: rgb(5 4 15 / 88%) !important;
  border: 1px solid rgb(255 255 255 / 25%) !important;
  border-radius: 2px !important;
  box-shadow: 0 2px 6px rgb(0 0 0 / 60%);
}
/* On a platform's own page every game is that platform: drop the redundant logo chip */
html.gs-route-platform .r-gc .r-gc__platform-icon { display: none !important; }

/* ==========================================================================
   Frutiger Aero pass: glossy glass, soft light, floating bubbles
   (kept square and in the GameScape palette)
   ========================================================================== */
:root {
  --gs-gloss: linear-gradient(180deg, rgb(255 255 255 / 16%) 0%, rgb(255 255 255 / 5%) 48%, rgb(255 255 255 / 0%) 50%);
  --gs-glass: rgb(14 12 40 / 62%);
  --gs-aqua: #5ff3ff;
}

/* Floating light bubbles behind everything (bokeh) */
html.r-v2 .r-v2-bg__overlay::after {
  content: "";
  position: absolute;
  inset: -10%;
  pointer-events: none;
  background:
    radial-gradient(circle at 12% 78%, rgb(95 243 255 / 22%) 0 38px, transparent 40px),
    radial-gradient(circle at 22% 30%, rgb(224 60 255 / 16%) 0 22px, transparent 24px),
    radial-gradient(circle at 38% 88%, rgb(79 123 255 / 18%) 0 60px, transparent 62px),
    radial-gradient(circle at 64% 18%, rgb(95 243 255 / 14%) 0 30px, transparent 32px),
    radial-gradient(circle at 78% 66%, rgb(224 60 255 / 16%) 0 46px, transparent 48px),
    radial-gradient(circle at 90% 34%, rgb(95 243 255 / 18%) 0 18px, transparent 20px),
    radial-gradient(circle at 52% 54%, rgb(255 255 255 / 7%) 0 90px, transparent 92px);
  filter: blur(1.5px);
  animation: gs-bubbles 38s ease-in-out infinite alternate;
}
@keyframes gs-bubbles {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-2%, -4%, 0); }
}

/* Glass panels with a gloss sheen on the top half */
html.r-v2 .r-v2-widget,
html.r-v2 .r-card,
html.r-v2 .plat-tile,
.gsx-hero,
html.r-v2 .r-menu__panel,
html.r-menu__panel {
  background-image: var(--gs-gloss), linear-gradient(180deg, rgb(20 16 56 / 78%), rgb(8 6 26 / 86%)) !important;
  -webkit-backdrop-filter: blur(16px) saturate(1.35);
  backdrop-filter: blur(16px) saturate(1.35);
}
#gs-sidebar {
  background-image: var(--gs-gloss), linear-gradient(180deg, rgb(14 12 40 / 88%), rgb(5 4 15 / 92%));
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  backdrop-filter: blur(18px) saturate(1.3);
}
html.r-v2 .r-v2-nav-bar {
  background-image: var(--gs-gloss), linear-gradient(180deg, rgb(14 12 40 / 94%), rgb(6 5 20 / 90%)) !important;
}

/* Glossy aqua buttons: bright upper band, luminous edge */
html.r-v2 .r-btn--has-color:not(.r-btn--disabled):not(.r-btn--variant-text):not(.r-btn--variant-plain),
.gsx-btn--primary,
html.r-v2 .r-v2-game-btn--emphasized {
  background-image: var(--gs-gloss), var(--gs-gradient) !important;
  text-shadow: 0 1px 2px rgb(0 0 0 / 45%);
}
.gsx-btn,
html.r-v2 .r-v2-game-btn:not(.r-v2-game-btn--emphasized):not(.r-v2-game-btn--glass) {
  background-image: var(--gs-gloss) !important;
}

/* Selected sidebar entry: glossy pill */
.gs-sb__item[aria-current="page"] {
  background-image: var(--gs-gloss), linear-gradient(90deg, rgb(34 228 255 / 24%), rgb(192 77 255 / 12%) 70%, transparent) !important;
  box-shadow: inset 0 0 0 1px rgb(95 243 255 / 22%);
}

/* Friendlier targets and clearer feedback */
html.r-v2 .r-v2-nav__center .r-slider-btn-group__btn { min-height: 40px; padding-inline: 18px; }
.gs-sb__item { min-height: 40px; }
html.r-v2 :focus-visible {
  outline: 2px solid var(--gs-aqua) !important;
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgb(95 243 255 / 20%);
}
html.r-v2 a:hover,
html.r-v2 button:hover { transition: box-shadow .15s ease, border-color .15s ease, color .15s ease; }

/* Size slider tick labels 1..9 */
.gs-sb__ticks {
  display: flex;
  justify-content: space-between;
  margin-top: 4px;
  padding: 0 2px;
  font: 600 10px/1 "Orbitron", system-ui, sans-serif;
  color: rgb(200 205 255 / 45%);
}
.gs-sb__size output::before { content: "SIZE "; color: rgb(200 205 255 / 55%); }

@media (prefers-reduced-motion: reduce) {
  html.r-v2 .r-v2-bg__overlay::after { animation: none; }
}

/* ---- Sidebar quick game search ---------------------------------------- */
.gs-sb__qs { position: relative; margin: 0 10px 8px 14px; }
.gs-sb__qs .gs-sb__qs-input {
  width: 100%;
  margin: 0;
  box-sizing: border-box;
  padding-left: 32px;
  border-color: rgb(34 228 255 / 45%);
  background: rgb(5 4 15 / 80%) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2322e4ff'%3E%3Cpath d='M9.5 3a6.5 6.5 0 0 1 5.18 10.43l5.45 5.44-1.42 1.42-5.44-5.45A6.5 6.5 0 1 1 9.5 3m0 2a4.5 4.5 0 1 0 0 9 4.5 4.5 0 0 0 0-9'/%3E%3C/svg%3E") 9px 50% / 16px no-repeat;
}
.gs-sb__qs-results {
  position: absolute;
  left: 0;
  right: -170px;
  top: calc(100% + 4px);
  z-index: 60;
  max-height: 60vh;
  overflow-y: auto;
  margin: 0;
  padding: 4px;
  list-style: none;
  border: 1px solid rgb(34 228 255 / 45%);
  border-radius: 2px;
  background: rgb(8 6 26 / 97%);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: 0 0 18px rgb(34 228 255 / 20%), 0 14px 34px rgb(0 0 0 / 60%);
}
.gs-sb__qs-results[hidden] { display: none; }
.gs-sb__qs-item {
  display: grid;
  grid-template-columns: 34px 1fr;
  align-items: center;
  gap: 10px;
  padding: 6px 8px;
  border-left: 3px solid transparent;
  cursor: pointer;
}
.gs-sb__qs-item img { width: 34px; height: 46px; object-fit: cover; border-radius: 2px; background: #140e38; }
.gs-sb__qs-text { display: grid; min-width: 0; }
.gs-sb__qs-text b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #fff; font-size: 13.5px; }
.gs-sb__qs-text small { color: rgb(200 205 255 / 60%); font-size: 11.5px; }
.gs-sb__qs-item:hover,
.gs-sb__qs-item[aria-selected="true"] { background: rgb(34 228 255 / 12%); border-left-color: #22e4ff; }
.gs-sb__qs-empty { padding: 10px; color: rgb(200 205 255 / 60%); font-size: 13px; }
html.gs-sb-collapsed .gs-sb__qs { display: none; }

/* Cheats: tournament games hide the cheat menu; toast when a player turns cheats on (theme.js) */
html.gs-no-cheats .ejs_cheat_parent, html.gs-no-cheats .ejs_cheat_rows { display: none !important; }
.gs-cheat-toast {
  position: fixed; left: 50%; bottom: 80px; transform: translateX(-50%); z-index: 99999;
  max-width: min(520px, calc(100vw - 32px)); padding: 12px 16px;
  border: 1px solid rgb(224 60 255 / 60%); border-radius: 2px;
  background: rgb(10 8 30 / 94%); color: #f3b3ff;
  font: 600 14px/1.35 "Exo 2", system-ui, sans-serif; text-align: center;
  box-shadow: 0 0 18px rgb(224 60 255 / 35%);
}

/* ---- Compact top tabs (room for Lobby / Status / Cyber City / AeroX / Dice Night) ----
   Collections is not used on GameScape, so its tab is hidden. Tabs tighten as the window narrows
   and drop to icons only before they could overlap the logo or the right-hand controls. */
html.r-v2 .r-v2-nav__center .r-slider-btn-group > a[href="/collections"] { display: none !important; }
html.r-v2 .r-v2-nav__center { min-width: 0; }
html.r-v2 .r-v2-nav__center .r-slider-btn-group { flex-wrap: nowrap; }
html.r-v2 .r-v2-nav__center .r-slider-btn-group__btn {
  min-height: 34px;
  padding-inline: 10px;
  gap: 6px;
  font-size: 11px;
  letter-spacing: .06em;
  white-space: nowrap;
}
html.r-v2 .r-v2-nav__center .r-slider-btn-group__btn .r-icon { font-size: 15px !important; width: 15px !important; height: 15px !important; }
html.r-v2 .r-v2-nav__center .r-slider-btn-group__label { white-space: nowrap; }
@media (width < 1700px) {
  html.r-v2 .r-v2-nav__center .r-slider-btn-group__btn { padding-inline: 8px; font-size: 10px; letter-spacing: .04em; gap: 5px; }
}
@media (width < 1480px) {
  html.r-v2 .r-v2-nav__center .r-slider-btn-group__label { display: none !important; }
  html.r-v2 .r-v2-nav__center .r-slider-btn-group__btn { padding-inline: 11px; }
}

/* ---- Lighter painting ----
   The home page had ~90 blurred glass layers (RomM puts one on every card button, flag chip and platform
   tile) sitting over a background that never stopped animating, so the browser re-blurred all of them on
   every frame. The background now holds still and the small repeated pieces use a plain tint instead of
   a live blur. The big glass surfaces (top bar, sidebar, panels) keep theirs. */
html.r-v2 .r-v2-bg__overlay, html.r-v2 .r-v2-bg__overlay::before, html.r-v2 .r-v2-bg__overlay::after { animation: none !important; }
html.r-v2 .r-v2-game-btn,
html.r-v2 .card-flags__chip,
html.r-v2 .plat-tile,
html.r-v2 .card-row__arrow {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
html.r-v2 .r-v2-game-btn, html.r-v2 .card-flags__chip, html.r-v2 .card-row__arrow { background-color: rgb(10 8 30 / 82%) !important; }

/* nyd/gamescape-conn.css */
/* Connection status pill and popover (see gamescape-conn.js) */
.gs-conn{position:relative;display:inline-flex;align-items:center;margin-left:10px;font-family:var(--gs-body,"Inter",system-ui,sans-serif)}
.gs-conn__btn{display:inline-flex;align-items:center;gap:9px;padding:6px 13px 6px 11px;border-radius:999px;border:1px solid var(--gs-line-strong,rgba(170,160,255,.34));
  background:rgba(255,255,255,.05);color:var(--gs-ink,#f3f2ff);font:600 12.5px/1 var(--gs-body,system-ui);cursor:pointer;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  transition:background .2s,border-color .2s,transform .15s;white-space:nowrap}
.gs-conn__btn:hover{background:rgba(255,255,255,.1);border-color:rgba(190,180,255,.7)}
.gs-conn__btn:active{transform:scale(.97)}
.gs-conn__btn:focus-visible{outline:2px solid var(--gs-cyan,#3fc3ff);outline-offset:3px}
.gs-conn__label{font-family:var(--gs-display,"Chakra Petch",sans-serif);font-weight:700;letter-spacing:.03em}
.gs-conn__ms{color:var(--gs-mute,#a7a3d6);font-variant-numeric:tabular-nums;font-weight:600}
.gs-conn__ms:empty{display:none}
.gs-conn.is-busy .gs-bars{animation:gs-bars-pulse 1s ease-in-out infinite}

/* signal bars */
.gs-bars{display:inline-flex;align-items:flex-end;gap:2px;height:14px}
.gs-bars i{display:block;width:3px;border-radius:2px;background:rgba(255,255,255,.22)}
.gs-bars i:nth-child(1){height:5px}.gs-bars i:nth-child(2){height:8px}.gs-bars i:nth-child(3){height:11px}.gs-bars i:nth-child(4){height:14px}
.gs-bars[data-q="great"] i{background:#3ddc97}
.gs-bars[data-q="good"] i:nth-child(-n+3){background:#3ddc97}
.gs-bars[data-q="fair"] i:nth-child(-n+2){background:#ffb84d}
.gs-bars[data-q="poor"] i:nth-child(1){background:#ff6b7d}
@keyframes gs-bars-pulse{50%{opacity:.45}}

/* popover */
.gs-conn__panel{position:absolute;top:calc(100% + 12px);right:0;z-index:2600;width:min(92vw,380px);padding:16px;border-radius:20px;
  background:rgb(13,11,34);border:1px solid var(--gs-line-strong,rgba(170,160,255,.34));backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);
  box-shadow:0 30px 70px -20px rgba(0,0,0,.9),0 0 0 1px rgba(255,255,255,.04) inset;color:var(--gs-ink,#f3f2ff);animation:gs-pop .18s ease-out}
.gs-conn__panel[hidden]{display:none}
@keyframes gs-pop{from{opacity:0;transform:translateY(-6px) scale(.98)}to{opacity:1;transform:none}}
.gs-conn__head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.gs-conn__head b{font:700 16px var(--gs-display,sans-serif);letter-spacing:.02em}
.gs-conn__again{border:1px solid var(--gs-line-strong,rgba(170,160,255,.34));background:rgba(255,255,255,.06);color:#fff;border-radius:10px;padding:6px 11px;font:600 12px var(--gs-body,sans-serif);cursor:pointer}
.gs-conn__again:hover{background:rgba(255,255,255,.12)}
.gs-conn__again:focus-visible{outline:2px solid var(--gs-cyan,#3fc3ff);outline-offset:2px}
.gs-conn__sep{margin:14px 0 8px;font:600 10.5px var(--gs-display,sans-serif);letter-spacing:.2em;text-transform:uppercase;color:var(--gs-mute,#a7a3d6)}
.gs-route{display:grid;grid-template-columns:auto 1fr auto;column-gap:11px;row-gap:7px;align-items:center;padding:11px 12px;border-radius:14px;border:1px solid var(--gs-line,rgba(150,140,255,.16));
  background:rgba(255,255,255,.035);margin-bottom:8px}
.gs-route__dot{width:9px;height:9px;border-radius:50%;background:#6c6a92}
.gs-route[data-q="great"] .gs-route__dot,.gs-route[data-q="good"] .gs-route__dot{background:#3ddc97;box-shadow:0 0 10px rgba(61,220,151,.7)}
.gs-route[data-q="fair"] .gs-route__dot{background:#ffb84d;box-shadow:0 0 10px rgba(255,184,77,.6)}
.gs-route[data-q="poor"] .gs-route__dot,.gs-route[data-q="down"] .gs-route__dot{background:#ff6b7d;box-shadow:0 0 10px rgba(255,107,125,.6)}
.gs-route__txt b{display:block;font:600 13.5px var(--gs-body,sans-serif)}
.gs-route__txt small{color:var(--gs-mute,#a7a3d6);font-size:11.5px}
.gs-route__ms{font:700 14px var(--gs-display,sans-serif);font-variant-numeric:tabular-nums}
.gs-route[data-q="down"] .gs-route__ms{color:#ff8a98}
.gs-route__bar{grid-column:1 / -1;height:5px;border-radius:99px;background:rgba(255,255,255,.08);overflow:hidden}
.gs-route__bar i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#3fc3ff,#8a5cff,#e04dff);transition:width .5s cubic-bezier(.2,.7,.2,1)}
.gs-route[data-q="down"] .gs-route__bar i{background:#ff6b7d}
.gs-tag{font-style:normal;font-weight:700;font-size:10px;letter-spacing:.06em;text-transform:uppercase;padding:2px 7px;border-radius:999px;margin-left:4px;
  background:rgba(138,92,255,.25);color:#dcd3ff;border:1px solid rgba(160,140,255,.35)}
.gs-conn__note{margin:12px 2px 6px;color:var(--gs-mute,#a7a3d6);font-size:12px;line-height:1.5}
.gs-conn__foot{color:rgba(167,163,214,.7);font-size:11px;margin:4px 2px 0}
.gs-conn__empty{color:var(--gs-mute,#a7a3d6);font-size:12.5px;padding:8px 2px}

@media (max-width:900px){
  .gs-conn{margin:0 8px 0 0}
  .gs-conn__btn{padding:6px 10px}
  .gs-conn__label{display:none}
  .gs-conn__panel{position:fixed;top:64px;right:12px;left:12px;width:auto}
}
@media (max-width:1180px) and (min-width:901px){.gs-conn__ms{display:none}}
@media (prefers-reduced-motion:reduce){.gs-conn__panel,.gs-conn.is-busy .gs-bars{animation:none}}

/* GameScape Online: square, Orbitron/Exo 2, wallpaper palette */
.gs-conn, .gs-conn * { border-radius: 2px !important; }
.gs-conn__btn { font-family: "Exo 2", system-ui, sans-serif !important; border: 1px solid rgb(34 228 255 / 45%) !important;
  background-image: linear-gradient(180deg, rgb(255 255 255 / 12%) 0%, rgb(255 255 255 / 3%) 48%, transparent 50%), linear-gradient(180deg, rgb(14 12 40 / 90%), rgb(6 5 20 / 90%)) !important; }
.gs-conn__label { font-family: "Orbitron", system-ui, sans-serif !important; letter-spacing: .08em; }
.gs-conn__panel { border: 1px solid rgb(34 228 255 / 40%) !important; background: rgb(8 6 26 / 96%) !important;
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); font-family: "Exo 2", system-ui, sans-serif; }
.gs-conn__head b, .gs-route__txt b { color: #fff !important; }
.gs-route__txt small { color: rgb(215 222 255 / 75%) !important; }
.gs-route__ms { color: #a9f3ff !important; font-family: "Orbitron", system-ui, sans-serif; }

/* experience.css */
/* GS - GameScape Online: login screen, post-login intro and home hero.
   Layout and motion ported from the NewyorkDev Gamescape build; square corners, GameScape fonts. */

/* ==========================================================================
   Login / register / reset
   ========================================================================== */
html.gsx-auth .r-v2-auth { position: relative; overflow: hidden; }

/* Sky: the wallpaper, dimmed, with drifting colour glows */
html.gsx-auth .r-v2-auth__bg { display: none !important; }
html.gsx-auth .gsx-sky {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(900px 520px at 18% 30%, rgb(79 123 255 / 26%), transparent 62%),
    radial-gradient(760px 520px at 82% 18%, rgb(224 60 255 / 22%), transparent 60%),
    radial-gradient(1100px 600px at 50% 120%, rgb(139 61 255 / 34%), transparent 60%),
    linear-gradient(rgb(5 4 15 / 82%) 0%, rgb(5 4 15 / 90%) 55%, rgb(5 4 15 / 98%) 72%, #05040f 100%),
    var(--gs-wallpaper) center / cover no-repeat,
    #05040f;
}
html.gsx-auth .gsx-sky::before {
  /* twinkling data dots */
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(1.5px 1.5px at 12% 22%, #fff, transparent 60%),
    radial-gradient(1.5px 1.5px at 72% 14%, #a9f3ff, transparent 60%),
    radial-gradient(1px 1px at 38% 62%, #f3b3ff, transparent 60%),
    radial-gradient(1.5px 1.5px at 86% 48%, #fff, transparent 60%),
    radial-gradient(1px 1px at 54% 30%, #a9f3ff, transparent 60%),
    radial-gradient(1px 1px at 24% 80%, #f3b3ff, transparent 60%);
  background-size: 520px 420px;
  animation: gsx-twinkle 7s ease-in-out infinite alternate;
}

/* Retro grid floor (canvas, drawn by experience.js) */
html.gsx-auth .gsx-grid {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 28vh;
  z-index: 0;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to top, #000 35%, transparent 100%);
  mask-image: linear-gradient(to top, #000 35%, transparent 100%);
  border-radius: 0 !important;
}

/* Two columns: brand | card */
html.gsx-auth .r-v2-auth__stage {
  z-index: 1;
  display: grid !important;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 440px);
  align-items: center;
  gap: clamp(32px, 6vw, 110px);
  width: min(1200px, 100%);
  margin: 0 auto;
  padding: clamp(24px, 5vh, 64px) clamp(16px, 4vw, 48px);
}
html.gsx-auth .r-v2-auth__stage::after { content: none !important; }

/* ---- Brand panel ---- */
html.gsx-auth .gsx-brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
  animation: gsx-rise .8s cubic-bezier(.2, .7, .2, 1) both;
}
html.gsx-auth .gsx-logo {
  width: min(100%, 520px);
  filter: drop-shadow(0 0 18px rgb(139 61 255 / 55%));
  animation: gsx-float 7s ease-in-out infinite;
}
html.gsx-auth .gsx-logo img { display: block; width: 100%; height: auto; }
html.gsx-auth .gsx-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px;
  border: 1px solid rgb(34 228 255 / 35%);
  border-radius: 2px;
  background: rgb(5 4 15 / 60%);
  font: 600 11px/1 "Orbitron", system-ui, sans-serif;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgb(225 232 255 / 80%);
}
html.gsx-auth .gsx-dot {
  width: 8px;
  height: 8px;
  border-radius: 1px;
  background: #ff3ecf;
}
html.gsx-auth .gsx-status.on .gsx-dot {
  background: #22e4ff;
  box-shadow: 0 0 0 0 rgb(34 228 255 / 60%);
  animation: gsx-pulse 2.2s infinite;
}
html.gsx-auth .gsx-title {
  margin: 0;
  font: 800 clamp(36px, 4.8vw, 64px)/1.02 "Orbitron", system-ui, sans-serif;
  letter-spacing: .01em;
  color: #fff;
  text-shadow: 0 0 22px rgb(139 61 255 / 35%);
}
html.gsx-auth .gsx-title span {
  background: var(--gs-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: none;
  filter: drop-shadow(0 0 14px rgb(34 228 255 / 35%));
}
html.gsx-auth .gsx-lede {
  margin: 0;
  max-width: 34em;
  font: 400 16.5px/1.6 "Exo 2", system-ui, sans-serif;
  color: rgb(215 222 255 / 78%);
}
html.gsx-auth .gsx-feats {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
}
html.gsx-auth .gsx-feats li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  border: 1px solid rgb(120 140 255 / 28%);
  border-radius: 2px;
  background: rgb(10 8 30 / 70%);
  font: 600 13.5px/1 "Exo 2", system-ui, sans-serif;
  color: #e8ecff;
}
html.gsx-auth .gsx-feats li:nth-child(odd) i { color: #22e4ff; }
html.gsx-auth .gsx-feats li:nth-child(even) i { color: #e03cff; }

/* ---- Card ---- */
html.gsx-auth .r-v2-auth .auth-card {
  width: 100% !important;
  min-width: 0 !important;
  animation: gsx-rise .8s .12s cubic-bezier(.2, .7, .2, 1) both;
}
html.gsx-auth .r-v2-auth .auth-card__logo { display: none !important; }
html.gsx-auth .gsx-card-head { margin: 4px 0 22px; }
html.gsx-auth .gsx-card-head h2 {
  margin: 0 0 6px;
  font: 700 24px/1.15 "Orbitron", system-ui, sans-serif;
  letter-spacing: .04em;
  color: #fff;
}
html.gsx-auth .gsx-card-head p {
  margin: 0;
  font: 400 14.5px/1.4 "Exo 2", system-ui, sans-serif;
  color: rgb(215 222 255 / 70%);
}
html.gsx-auth .gsx-card-foot {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 18px;
  font: 500 13px/1 "Exo 2", system-ui, sans-serif;
  color: rgb(215 222 255 / 70%);
}
html.gsx-auth .gsx-card-foot i { color: #22e4ff; }

/* Boxed inputs instead of underlines */
html.gsx-auth .r-v2-auth .r-text-field__field {
  height: 50px;
  padding: 0 14px;
  background: rgb(5 4 15 / 70%) !important;
  box-shadow: inset 0 0 0 1px rgb(120 140 255 / 28%) !important;
}
html.gsx-auth .r-v2-auth .r-text-field__field:focus-within {
  box-shadow: inset 0 0 0 1px #22e4ff, 0 0 14px rgb(34 228 255 / 30%) !important;
}
html.gsx-auth .r-v2-auth .r-text-field__underline { display: none; }
html.gsx-auth .r-v2-auth .r-btn[type="submit"] { height: 50px; margin-top: 6px; }

/* Stack on narrow screens: logo + status above the card */
@media (width < 1000px) {
  html.gsx-auth .r-v2-auth__stage {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
    justify-items: center;
    padding-top: 28px;
  }
  html.gsx-auth .gsx-brand { align-items: center; text-align: center; gap: 12px; }
  html.gsx-auth .gsx-title,
  html.gsx-auth .gsx-lede,
  html.gsx-auth .gsx-feats { display: none; }
  html.gsx-auth .gsx-logo { width: min(100%, 360px); }
  html.gsx-auth .r-v2-auth .auth-card { max-width: 440px; }
}

/* ==========================================================================
   Post-login intro video
   ========================================================================== */
html.gsx-intro-lock,
html.gsx-intro-lock body { overflow: hidden !important; }
.gsx-intro {
  position: fixed;
  inset: 0;
  z-index: 3000;
  background: #05040f;
  opacity: 0;
  transition: opacity .4s ease;
  font-family: "Exo 2", system-ui, sans-serif;
}
.gsx-intro.in { opacity: 1; }
.gsx-intro.out { opacity: 0; }
.gsx-intro-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.gsx-intro-scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgb(5 4 15 / 70%) 0%, transparent 55%),
    linear-gradient(to top, rgb(5 4 15 / 85%) 0%, transparent 28%);
}
.gsx-intro-cap {
  position: absolute;
  left: clamp(20px, 5vw, 72px);
  top: clamp(72px, 12vh, 140px);
  max-width: min(560px, 80vw);
  padding-left: 16px;
  border-left: 3px solid #22e4ff;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .5s, transform .5s;
  pointer-events: none;
}
.gsx-intro-cap.show { opacity: 1; transform: none; }
.gsx-intro-cap h2 {
  margin: 0 0 8px;
  font: 800 clamp(26px, 3.6vw, 46px)/1.05 "Orbitron", system-ui, sans-serif;
  color: #fff;
  text-shadow: 0 0 18px rgb(34 228 255 / 55%);
}
.gsx-intro-cap p { margin: 0; font-size: clamp(15px, 1.5vw, 19px); color: rgb(230 236 255 / 88%); }
.gsx-intro-top {
  position: absolute;
  top: calc(18px + env(safe-area-inset-top, 0px));
  right: 18px;
  display: flex;
  gap: 10px;
}
.gsx-intro-top button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border: 1px solid rgb(34 228 255 / 55%);
  border-radius: 2px;
  background: rgb(5 4 15 / 70%);
  color: #fff;
  font: 600 13px/1 "Orbitron", system-ui, sans-serif;
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
}
.gsx-intro-top button:hover,
.gsx-intro-top button:focus-visible { border-color: #e03cff; box-shadow: 0 0 14px rgb(224 60 255 / 45%); outline: none; }
.gsx-intro-top kbd {
  padding: 2px 5px;
  border: 1px solid rgb(255 255 255 / 30%);
  border-radius: 2px;
  font: 600 10px/1 "Exo 2", system-ui, sans-serif;
}
.gsx-intro-bottom {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  padding: 0 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.gsx-intro-never { display: inline-flex; align-items: center; gap: 8px; color: rgb(230 236 255 / 80%); font-size: 13px; cursor: pointer; }
.gsx-intro-never input { accent-color: #c04dff; }
.gsx-intro-bar { height: 3px; background: rgb(255 255 255 / 12%); }
.gsx-intro-bar i {
  display: block;
  height: 100%;
  background: var(--gs-gradient);
  transform-origin: 0 50%;
  transform: scaleX(0);
  box-shadow: 0 0 10px rgb(34 228 255 / 70%);
}

/* ==========================================================================
   Home hero
   ========================================================================== */
.gsx-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  align-items: center;
  gap: 32px;
  margin: 0 0 28px;
  padding: clamp(22px, 3.5vw, 48px);
  overflow: hidden;
  border: 1px solid rgb(34 228 255 / 35%);
  border-radius: 3px;
  background: linear-gradient(135deg, rgb(16 12 44 / 92%), rgb(7 6 22 / 94%));
  box-shadow: 0 0 22px rgb(34 228 255 / 14%), 0 16px 40px rgb(0 0 0 / 55%);
  animation: gsx-rise .6s cubic-bezier(.2, .7, .2, 1) both;
}
.gsx-hero::before {
  /* circuit grid */
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgb(79 123 255 / 7%) 1px, transparent 1px),
    linear-gradient(90deg, rgb(79 123 255 / 7%) 1px, transparent 1px);
  background-size: 36px 36px;
}
.gsx-hero__bg {
  position: absolute;
  inset: -40px;
  background-size: cover;
  background-position: center;
  filter: blur(40px) saturate(1.3) brightness(.45);
  opacity: .55;
  pointer-events: none;
}
.gsx-hero__body { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.gsx-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: 700 11.5px/1 "Orbitron", system-ui, sans-serif;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: rgb(225 232 255 / 80%);
}
.gsx-hero__eyebrow i {
  width: 8px;
  height: 8px;
  border-radius: 1px;
  background: #22e4ff;
  animation: gsx-pulse 2.2s infinite;
}
.gsx-hero__title {
  margin: 0;
  font: 800 clamp(34px, 4.6vw, 62px)/1.02 "Orbitron", system-ui, sans-serif;
  letter-spacing: .01em;
  word-break: break-word;
}
.gsx-hero__title span {
  background: var(--gs-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 14px rgb(34 228 255 / 35%));
}
.gsx-hero__sub { margin: 0; font: 400 17px/1.5 "Exo 2", system-ui, sans-serif; color: rgb(215 222 255 / 78%); }
.gsx-hero__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.gsx-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 46px;
  padding: 0 18px;
  border: 1px solid rgb(120 140 255 / 30%);
  border-radius: 2px;
  background: rgb(10 8 30 / 75%);
  color: #fff !important;
  font: 600 14.5px/1 "Exo 2", system-ui, sans-serif;
  text-decoration: none;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.gsx-btn i { font-size: 18px; }
.gsx-btn:hover,
.gsx-btn:focus-visible {
  border-color: #22e4ff;
  box-shadow: 0 0 16px rgb(34 228 255 / 35%);
  transform: translateY(-1px);
  outline: none;
}
.gsx-btn--primary {
  max-width: 100%;
  border-color: transparent;
  background: var(--gs-gradient);
  font-family: "Orbitron", system-ui, sans-serif;
  font-size: 13px;
  letter-spacing: .1em;
  text-transform: uppercase;
  box-shadow: 0 0 14px rgb(34 228 255 / 35%), 0 0 18px rgb(224 60 255 / 30%);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.gsx-stats { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.gsx-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 9px 14px;
  border: 1px solid rgb(120 140 255 / 24%);
  border-radius: 2px;
  background: rgb(5 4 15 / 55%);
  font: 500 13.5px/1 "Exo 2", system-ui, sans-serif;
  color: rgb(215 222 255 / 75%);
}
.gsx-chip b { font: 700 18px/1 "Orbitron", system-ui, sans-serif; color: #fff; }
.gsx-hero__art {
  position: relative;
  justify-self: end;
  width: 100%;
  max-width: 520px;
  aspect-ratio: 16 / 10;
  border: 1px solid rgb(224 60 255 / 55%);
  border-radius: 2px;
  overflow: hidden;
  background: #07061a;
  box-shadow: 0 0 22px rgb(224 60 255 / 30%), 0 20px 40px rgb(0 0 0 / 60%);
  animation: gsx-float 7s ease-in-out infinite;
}
.gsx-hero__art img { width: 100%; height: 100%; object-fit: contain; display: block; }
.gsx-hero__tag {
  position: absolute;
  left: 12px;
  bottom: 12px;
  padding: 6px 10px;
  border: 1px solid rgb(34 228 255 / 55%);
  border-radius: 2px;
  background: rgb(5 4 15 / 80%);
  font: 700 11px/1 "Orbitron", system-ui, sans-serif;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #a9f3ff;
}
@media (width < 900px) {
  .gsx-hero { grid-template-columns: minmax(0, 1fr); }
  .gsx-hero__art { justify-self: stretch; max-width: none; }
}

/* ==========================================================================
   Motion
   ========================================================================== */
@keyframes gsx-grid { to { background-position: 0 64px, 0 0; } }
@keyframes gsx-twinkle { from { opacity: .35; } to { opacity: .75; } }
@keyframes gsx-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes gsx-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes gsx-pulse {
  0% { box-shadow: 0 0 0 0 rgb(34 228 255 / 60%); }
  70%, 100% { box-shadow: 0 0 0 8px rgb(34 228 255 / 0%); }
}
@media (prefers-reduced-motion: reduce) {
  html.gsx-auth .gsx-sky::before,
  html.gsx-auth .gsx-logo,
  html.gsx-auth .gsx-brand,
  html.gsx-auth .gsx-status.on .gsx-dot,
  html.gsx-auth .r-v2-auth .auth-card,
  .gsx-hero,
  .gsx-hero__art,
  .gsx-hero__eyebrow i { animation: none !important; }
}

/* ==========================================================================
   Guides & help row on game pages
   ========================================================================== */
.gsx-guides {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 14px 0 6px;
}
.gsx-guides__label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-right: 4px;
  font: 700 11px/1 "Orbitron", system-ui, sans-serif;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgb(200 210 255 / 70%);
}
.gsx-guides__label i { color: #22e4ff; font-size: 16px; }
.gsx-guide {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid rgb(120 140 255 / 30%);
  border-radius: 2px;
  background-image: linear-gradient(180deg, rgb(255 255 255 / 12%) 0%, rgb(255 255 255 / 3%) 48%, transparent 50%), linear-gradient(180deg, rgb(18 14 50 / 85%), rgb(7 6 22 / 90%));
  color: #e8ecff !important;
  font: 600 13px/1 "Exo 2", system-ui, sans-serif;
  text-decoration: none;
  transition: border-color .15s, box-shadow .15s;
}
.gsx-guide i { font-size: 16px; color: #22e4ff; }
a.gsx-guide:nth-of-type(even) i { color: #e03cff; }
a.gsx-guide:hover,
a.gsx-guide:focus-visible { border-color: #22e4ff; box-shadow: 0 0 14px rgb(34 228 255 / 35%); outline: none; }
.gsx-guide--cheats { border-color: rgb(224 60 255 / 45%); color: #f3b3ff !important; }
.gsx-guide--cheats i { color: #ff3ecf; }
.gsx-guide--cheats b { font-weight: 600; }

/* "Request an account" link on the login card */
html.gsx-auth .gsx-join {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 16px;
  padding: 11px 14px;
  border: 1px solid rgb(224 60 255 / 45%);
  border-radius: 2px;
  background-image: linear-gradient(180deg, rgb(255 255 255 / 10%) 0%, rgb(255 255 255 / 3%) 48%, transparent 50%), linear-gradient(180deg, rgb(18 14 50 / 80%), rgb(7 6 22 / 85%));
  color: rgb(230 236 255 / 85%) !important;
  font: 500 14px/1 "Exo 2", system-ui, sans-serif;
  text-decoration: none;
  transition: border-color .15s, box-shadow .15s;
}
html.gsx-auth .gsx-join b { color: #f3b3ff; font-weight: 700; }
html.gsx-auth .gsx-join i { color: #e03cff; font-size: 17px; }
html.gsx-auth .gsx-join:hover,
html.gsx-auth .gsx-join:focus-visible { border-color: #22e4ff; box-shadow: 0 0 14px rgb(34 228 255 / 35%); outline: none; }

/* ==========================================================================
   Curated home shelves
   ========================================================================== */
.gsx-shelves { display: grid; gap: 26px; margin: 0 0 30px; }
.gsx-shelf__head { display: flex; align-items: baseline; gap: 14px; margin-bottom: 12px; }
.gsx-shelf__head h2 {
  margin: 0;
  font: 700 14px/1 "Orbitron", system-ui, sans-serif;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 0 10px rgb(34 228 255 / 45%);
}
.gsx-shelf__head span { font: 500 13px/1 "Exo 2", system-ui, sans-serif; color: rgb(215 222 255 / 60%); }
.gsx-shelf__nav { margin-left: auto; display: flex; gap: 6px; }
.gsx-shelf__nav button {
  width: 34px; height: 30px;
  display: grid; place-items: center;
  border: 1px solid rgb(34 228 255 / 40%);
  border-radius: 2px;
  background: rgb(10 8 30 / 80%);
  color: #fff; font-size: 18px; cursor: pointer;
}
.gsx-shelf__nav button:hover, .gsx-shelf__nav button:focus-visible { border-color: #22e4ff; box-shadow: 0 0 12px rgb(34 228 255 / 40%); outline: none; }
.gsx-shelf__row {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc(var(--gs-card-w, 150px) * .9);
  gap: 14px;
  overflow-x: auto;
  padding: 4px 2px 10px;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
}
.gsx-tile { display: grid; gap: 6px; text-decoration: none; scroll-snap-align: start; min-width: 0; }
.gsx-tile__art {
  display: block;
  aspect-ratio: 2 / 3;
  overflow: hidden;
  border-radius: 2px;
  background: radial-gradient(ellipse at 50% 40%, #140e38 0%, #07061a 80%);
  outline: 1px solid rgb(34 228 255 / 55%);
  box-shadow: 0 0 12px rgb(34 228 255 / 22%), 0 8px 20px rgb(0 0 0 / 55%);
  transition: outline-color .15s, box-shadow .15s, transform .15s;
}
.gsx-tile--alt .gsx-tile__art { outline-color: rgb(224 60 255 / 55%); box-shadow: 0 0 12px rgb(224 60 255 / 22%), 0 8px 20px rgb(0 0 0 / 55%); }
.gsx-tile__art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gsx-tile:hover .gsx-tile__art, .gsx-tile:focus-visible .gsx-tile__art {
  outline: 2px solid #22e4ff;
  box-shadow: 0 0 0 1px rgb(224 60 255 / 60%), 0 0 22px rgb(34 228 255 / 50%);
  transform: translateY(-2px);
}
.gsx-tile:focus-visible { outline: none; }
.gsx-tile b {
  font: 600 12px/1.25 "Exo 2", system-ui, sans-serif;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #a9f3ff;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  text-shadow: 0 0 8px rgb(34 228 255 / 40%);
}
.gsx-tile--alt b { color: #f3b3ff; text-shadow: 0 0 8px rgb(224 60 255 / 40%); }
.gsx-tile small { margin-top: -3px; font: 500 11px/1.2 "Exo 2", system-ui, sans-serif; color: rgb(215 222 255 / 55%); }
@media (prefers-reduced-motion: reduce) { .gsx-tile__art { transition: none; } }

/* social.css */
/* GS - GameScape Online: Lobby chat panel.
   GameScape neon palette, square corners, glossy "Frutiger Aero" glass. */
.gsl,
.gsl-invite,
.gsl-toasts,
.gsl-npstatus {
  --gsl-cyan: #22e4ff;
  --gsl-mag: #e03cff;
  --gsl-ink: #05040f;
  --gsl-grad: linear-gradient(90deg, #22e4ff 0%, #4f7bff 45%, #e03cff 100%);
  --gsl-glass: rgb(12 10 34 / 72%);
}
.gsl {
  --gsl-cyan: #22e4ff;
  --gsl-mag: #e03cff;
  --gsl-ink: #05040f;
  --gsl-grad: linear-gradient(90deg, #22e4ff 0%, #4f7bff 45%, #e03cff 100%);
  --gsl-glass: rgb(12 10 34 / 72%);
  position: fixed;
  right: calc(18px + env(safe-area-inset-right, 0px));
  bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  z-index: 2200;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
  font-family: "Exo 2", "Segoe UI", system-ui, sans-serif;
  color: #eef1ff;
}
.gsl[hidden] { display: none !important; }

/* ---- floating button ---- */
.gsl-fab {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 46px;
  padding: 0 18px 0 14px;
  border: 1px solid rgb(34 228 255 / 55%);
  border-radius: 3px;
  background:
    linear-gradient(180deg, rgb(255 255 255 / 22%) 0%, rgb(255 255 255 / 6%) 48%, transparent 52%),
    linear-gradient(135deg, rgb(34 228 255 / 30%), rgb(224 60 255 / 30%)),
    var(--gsl-glass);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  backdrop-filter: blur(14px) saturate(1.3);
  box-shadow: 0 0 18px rgb(34 228 255 / 30%), 0 8px 24px rgb(0 0 0 / 55%), inset 0 1px 0 rgb(255 255 255 / 35%);
  color: #fff;
  font: 700 12.5px/1 "Orbitron", system-ui, sans-serif;
  letter-spacing: .12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: box-shadow .15s ease, transform .15s ease, border-color .15s ease;
}
.gsl-fab .mdi { font-size: 20px; }
.gsl-fab:hover,
.gsl-fab:focus-visible {
  border-color: var(--gsl-cyan);
  box-shadow: 0 0 26px rgb(34 228 255 / 55%), 0 0 18px rgb(224 60 255 / 35%), 0 8px 24px rgb(0 0 0 / 55%), inset 0 1px 0 rgb(255 255 255 / 45%);
  transform: translateY(-1px);
  outline: none;
}
.gsl.is-open .gsl-fab { border-color: var(--gsl-mag); }
.gsl-badge {
  position: absolute;
  top: -8px;
  right: -8px;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  display: grid;
  place-items: center;
  border-radius: 3px;
  background: linear-gradient(135deg, #ff3ecf, #e03cff);
  box-shadow: 0 0 12px rgb(255 62 207 / 70%);
  color: #fff;
  font: 700 11px/1 "Exo 2", system-ui, sans-serif;
  letter-spacing: 0;
}
.gsl-badge[hidden] { display: none; }

/* ---- panel ---- */
.gsl-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(380px, calc(100vw - 36px));
  height: min(560px, calc(100vh - 120px));
  overflow: hidden;
  border: 1px solid rgb(34 228 255 / 45%);
  border-radius: 3px;
  background:
    linear-gradient(180deg, rgb(255 255 255 / 10%) 0%, rgb(255 255 255 / 0%) 90px),
    radial-gradient(420px 220px at 100% 0%, rgb(224 60 255 / 16%), transparent 70%),
    radial-gradient(420px 260px at 0% 100%, rgb(34 228 255 / 12%), transparent 70%),
    var(--gsl-glass);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  backdrop-filter: blur(20px) saturate(1.4);
  box-shadow: 0 0 30px rgb(34 228 255 / 20%), 0 24px 60px rgb(0 0 0 / 65%), inset 0 1px 0 rgb(255 255 255 / 30%);
  animation: gsl-in .22s cubic-bezier(.2, .7, .2, 1) both;
}
.gsl-panel[hidden] { display: none; }
.gsl-panel::before {
  /* glossy top sheen */
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 46px;
  pointer-events: none;
  background: linear-gradient(180deg, rgb(255 255 255 / 16%), rgb(255 255 255 / 0%));
}

.gsl-head {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 12px 10px 16px;
  border-bottom: 1px solid rgb(120 140 255 / 22%);
}
.gsl-title {
  margin: 0;
  font: 800 15px/1 "Orbitron", system-ui, sans-serif;
  letter-spacing: .18em;
  text-transform: uppercase;
  background: var(--gsl-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.gsl-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-right: auto;
  font-size: 11.5px;
  color: rgb(215 222 255 / 60%);
}
.gsl-status::before { content: ""; width: 7px; height: 7px; border-radius: 1px; background: #ff3ecf; }
.gsl-status.on::before { background: var(--gsl-cyan); box-shadow: 0 0 8px var(--gsl-cyan); }
.gsl-close {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 1px solid rgb(120 140 255 / 30%);
  border-radius: 2px;
  background: rgb(5 4 15 / 45%);
  color: #fff;
  cursor: pointer;
}
.gsl-close:hover,
.gsl-close:focus-visible { border-color: var(--gsl-cyan); outline: none; box-shadow: 0 0 10px rgb(34 228 255 / 40%); }

.gsl-tabs { display: flex; padding: 0 10px; gap: 4px; border-bottom: 1px solid rgb(120 140 255 / 18%); }
.gsl-tab {
  flex: 1;
  padding: 10px 8px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: none;
  color: rgb(215 222 255 / 70%);
  font: 700 11.5px/1 "Orbitron", system-ui, sans-serif;
  letter-spacing: .12em;
  text-transform: uppercase;
  cursor: pointer;
}
.gsl-tab[aria-selected="true"] {
  color: #fff;
  border-bottom-color: var(--gsl-cyan);
  box-shadow: 0 8px 12px -10px var(--gsl-cyan);
}
.gsl-tab:focus-visible { outline: 2px solid var(--gsl-cyan); outline-offset: -2px; }

/* ---- messages ---- */
.gsl-msgs,
.gsl-online {
  flex: 1;
  min-height: 0;
  margin: 0;
  padding: 12px;
  list-style: none;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgb(160 90 255 / 50%) transparent;
}
.gsl-msgs[hidden], .gsl-online[hidden], .gsl-form[hidden] { display: none; }
.gsl-msg {
  margin: 0 0 8px;
  padding: 8px 10px;
  border: 1px solid rgb(120 140 255 / 18%);
  border-left: 3px solid rgb(34 228 255 / 60%);
  border-radius: 2px;
  background: linear-gradient(180deg, rgb(255 255 255 / 6%), rgb(255 255 255 / 1%)), rgb(5 4 15 / 45%);
}
.gsl-msg.is-me { border-left-color: var(--gsl-mag); background: linear-gradient(180deg, rgb(224 60 255 / 12%), rgb(224 60 255 / 3%)), rgb(5 4 15 / 45%); }
.gsl-meta { display: flex; align-items: center; gap: 6px; margin-bottom: 3px; }
.gsl-user { font-weight: 700; font-size: 13px; color: #a9f3ff; }
.gsl-msg.is-me .gsl-user { color: #f3b3ff; }
.gsl-tag {
  padding: 2px 5px;
  border: 1px solid rgb(224 60 255 / 55%);
  border-radius: 2px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #f3b3ff;
}
.gsl-time { margin-left: auto; font-size: 11px; color: rgb(215 222 255 / 50%); }
.gsl-del {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border: 1px solid transparent;
  border-radius: 2px;
  background: none;
  color: rgb(255 111 163 / 80%);
  cursor: pointer;
}
.gsl-del:hover,
.gsl-del:focus-visible { border-color: #ff2d7a; color: #fff; outline: none; }
.gsl-text { margin: 0; font-size: 14px; line-height: 1.45; overflow-wrap: anywhere; white-space: pre-wrap; }
.gsl-notice { margin: 4px 0 10px; text-align: center; font-size: 11.5px; color: rgb(215 222 255 / 55%); }
.gsl-empty { padding: 28px 8px; text-align: center; font-size: 13.5px; color: rgb(215 222 255 / 60%); }

/* ---- online list ---- */
.gsl-person {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px;
  margin-bottom: 6px;
  border: 1px solid rgb(120 140 255 / 18%);
  border-radius: 2px;
  background: rgb(5 4 15 / 40%);
}
.gsl-dot { flex: none; width: 9px; height: 9px; margin-top: 5px; border-radius: 1px; background: var(--gsl-cyan); box-shadow: 0 0 8px var(--gsl-cyan); }
.gsl-who { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-width: 0; flex: 1; }
.gsl-playing,
.gsl-idle { flex-basis: 100%; font-size: 12.5px; }
.gsl-playing { color: #f3b3ff; text-decoration: none; overflow-wrap: anywhere; }
.gsl-playing:hover,
.gsl-playing:focus-visible { color: #fff; text-decoration: underline; outline: none; }
.gsl-idle { color: rgb(215 222 255 / 55%); }

/* ---- composer ---- */
.gsl-form {
  display: flex;
  gap: 8px;
  padding: 10px 12px 12px;
  border-top: 1px solid rgb(120 140 255 / 22%);
  background: rgb(5 4 15 / 35%);
}
.gsl-input {
  flex: 1;
  min-width: 0;
  height: 42px;
  padding: 0 12px;
  border: 1px solid rgb(120 140 255 / 30%);
  border-radius: 2px;
  background: rgb(5 4 15 / 70%);
  box-shadow: inset 0 1px 3px rgb(0 0 0 / 50%);
  color: #fff;
  font: 400 14px/1 "Exo 2", system-ui, sans-serif;
  outline: none;
}
.gsl-input:focus { border-color: var(--gsl-cyan); box-shadow: 0 0 12px rgb(34 228 255 / 30%), inset 0 1px 3px rgb(0 0 0 / 50%); }
.gsl-send {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 42px;
  padding: 0 14px;
  border: 0;
  border-radius: 2px;
  background: linear-gradient(180deg, rgb(255 255 255 / 25%), rgb(255 255 255 / 0%) 55%), var(--gsl-grad);
  box-shadow: 0 0 12px rgb(34 228 255 / 35%), inset 0 1px 0 rgb(255 255 255 / 40%);
  color: #fff;
  font: 700 11.5px/1 "Orbitron", system-ui, sans-serif;
  letter-spacing: .1em;
  text-transform: uppercase;
  cursor: pointer;
}
.gsl-send:hover,
.gsl-send:focus-visible { box-shadow: 0 0 18px rgb(34 228 255 / 60%), inset 0 1px 0 rgb(255 255 255 / 50%); outline: none; }

/* ---- phones: full-width sheet, compact button ---- */
@media (width < 600px) {
  .gsl { right: calc(12px + env(safe-area-inset-right, 0px)); bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
  .gsl-fab__label { display: none; }
  .gsl-fab { padding: 0 13px; }
  .gsl-panel { width: calc(100vw - 24px); height: calc(100vh - 170px); }
  .gsl-send span { display: none; }
}

@keyframes gsl-in { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .gsl-panel { animation: none; }
  .gsl-fab { transition: none; }
}

/* ==========================================================================
   Lobby tab in the top navigation (desktop); floating button is the < 1000px fallback
   ========================================================================== */
.gsl-navtab { position: relative; cursor: pointer; }
.gsl-navtab[hidden] { display: none !important; }
.gsl-navtab.gsl-navtab--open { color: #fff !important; box-shadow: inset 0 -2px 0 #e03cff; }
.gsl-navbadge {
  position: absolute;
  top: 2px;
  right: 2px;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  display: grid;
  place-items: center;
  border: 1px solid #22e4ff;
  border-radius: 2px;
  background: linear-gradient(135deg, #ff3ecf, #e03cff);
  box-shadow: 0 0 10px rgb(224 60 255 / 70%);
  color: #fff;
  font: 700 10px/1 "Exo 2", system-ui, sans-serif;
  letter-spacing: 0;
  text-transform: none;
}
.gsl-navbadge[hidden] { display: none; }

@media (width >= 1000px) {
  html.gsl-has-nav .gsl-fab { display: none; }
  /* Opened from the nav: anchor the panel under the top bar on the right */
  html.gsl-has-nav .gsl.from-nav,
  html.gsl-has-nav .gsl.is-open {
    top: calc(var(--r-nav-h, 58px) + 10px + env(safe-area-inset-top, 0px));
    bottom: auto;
    right: 18px;
  }
  html.gsl-has-nav .gsl .gsl-panel { height: min(600px, calc(100vh - var(--r-nav-h, 58px) - 30px)); }
}
@media (width < 1000px) {
  .gsl-navtab { display: none !important; }
}
.gsl-navtab { gap: 6px; }

/* ==========================================================================
   Direct messages, invite actions, invite modal, netplay status
   ========================================================================== */
.gsl-back {
  display: grid; place-items: center; width: 30px; height: 30px;
  border: 1px solid rgb(120 140 255 / 30%); border-radius: 2px;
  background: rgb(5 4 15 / 45%); color: #fff; cursor: pointer;
}
.gsl-back[hidden] { display: none; }
.gsl-back:hover, .gsl-back:focus-visible { border-color: var(--gsl-cyan); outline: none; box-shadow: 0 0 10px rgb(34 228 255 / 40%); }
.gsl-panel.is-dm .gsl-title { font-size: 13px; letter-spacing: .1em; max-width: 62%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gsl-panel.is-dm .gsl-tabs { display: none; }
.gsl-title__lobby { opacity: .7; }
.gsl-msg--dm { border-left-color: rgb(79 123 255 / 70%); }
.gsl-tab.has-dm::after {
  content: ""; display: inline-block; width: 7px; height: 7px; margin-left: 6px; vertical-align: middle;
  border-radius: 1px; background: #ff3ecf; box-shadow: 0 0 8px #ff3ecf;
}

.gsl-person { flex-wrap: wrap; }
.gsl-acts { display: flex; flex-wrap: wrap; gap: 6px; flex-basis: 100%; padding-left: 19px; }
.gsl-act {
  position: relative; display: inline-flex; align-items: center; gap: 5px; min-height: 32px; padding: 0 10px;
  border: 1px solid rgb(120 140 255 / 32%); border-radius: 2px;
  background: linear-gradient(180deg, rgb(255 255 255 / 10%), rgb(255 255 255 / 0%) 60%), rgb(5 4 15 / 55%);
  color: #fff; font: 600 12px/1 "Exo 2", system-ui, sans-serif; text-decoration: none; cursor: pointer;
}
.gsl-act:hover, .gsl-act:focus-visible { border-color: var(--gsl-cyan); box-shadow: 0 0 10px rgb(34 228 255 / 40%); outline: none; }
.gsl-act--invite { border-color: rgb(224 60 255 / 45%); }
.gsl-act--join { border-color: rgb(34 228 255 / 60%); color: #a9f3ff; }
.gsl-count {
  min-width: 16px; height: 16px; padding: 0 4px; display: grid; place-items: center;
  border-radius: 2px; background: #e03cff; box-shadow: 0 0 8px rgb(224 60 255 / 70%);
  font-size: 10px; font-weight: 700;
}

.gsl-pick {
  flex-basis: 100%; margin: 8px 0 0 19px; padding: 10px;
  border: 1px solid rgb(224 60 255 / 45%); border-radius: 2px; background: rgb(5 4 15 / 80%);
}
.gsl-pick__title { margin: 0 0 6px; font: 700 11px/1.2 "Orbitron", system-ui, sans-serif; letter-spacing: .1em; text-transform: uppercase; color: #f3b3ff; }
.gsl-pick__list { margin: 0 0 8px; padding: 0; list-style: none; }
.gsl-pick__game {
  width: 100%; margin-bottom: 4px; padding: 7px 8px; text-align: left;
  border: 1px solid rgb(120 140 255 / 22%); border-radius: 2px; background: rgb(12 10 34 / 80%);
  color: #fff; font: 500 12.5px/1.3 "Exo 2", system-ui, sans-serif; cursor: pointer;
}
.gsl-pick__game:hover, .gsl-pick__game:focus-visible { border-color: var(--gsl-cyan); outline: none; }

/* toasts */
.gsl-toasts {
  position: fixed; z-index: 2600; left: 50%; top: calc(var(--r-nav-h, 58px) + 14px + env(safe-area-inset-top, 0px));
  transform: translateX(-50%); display: flex; flex-direction: column; gap: 8px; align-items: center;
  width: min(460px, calc(100vw - 24px)); pointer-events: none;
}
.gsl-toast {
  pointer-events: auto; width: 100%; padding: 11px 14px; text-align: left;
  border: 1px solid rgb(34 228 255 / 55%); border-radius: 3px;
  background: linear-gradient(180deg, rgb(255 255 255 / 14%), rgb(255 255 255 / 0%) 55%), rgb(12 10 34 / 92%);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: 0 0 18px rgb(34 228 255 / 30%), 0 10px 28px rgb(0 0 0 / 60%);
  color: #fff; font: 500 13.5px/1.4 "Exo 2", system-ui, sans-serif;
  animation: gsl-in .2s ease both; transition: opacity .3s;
}
button.gsl-toast { cursor: pointer; }
.gsl-toast.out { opacity: 0; }

/* invite modal */
.gsl-invite {
  position: fixed; inset: 0; z-index: 3100; display: grid; place-items: center; padding: 16px;
  background: rgb(5 4 15 / 55%); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.gsl-invite__card {
  position: relative; width: min(440px, 100%); padding: 22px 22px 18px; overflow: hidden;
  border: 1px solid rgb(224 60 255 / 60%); border-radius: 3px;
  background:
    linear-gradient(180deg, rgb(255 255 255 / 16%) 0%, rgb(255 255 255 / 0%) 70px),
    radial-gradient(420px 220px at 100% 0%, rgb(224 60 255 / 22%), transparent 70%),
    radial-gradient(420px 260px at 0% 100%, rgb(34 228 255 / 16%), transparent 70%),
    rgb(12 10 34 / 94%);
  box-shadow: 0 0 34px rgb(224 60 255 / 35%), 0 30px 70px rgb(0 0 0 / 70%), inset 0 1px 0 rgb(255 255 255 / 35%);
  color: #fff; font-family: "Exo 2", system-ui, sans-serif;
  animation: gsl-in .22s cubic-bezier(.2,.7,.2,1) both;
}
.gsl-invite__eyebrow { margin: 0 0 8px; font: 700 11px/1 "Orbitron", system-ui, sans-serif; letter-spacing: .22em; text-transform: uppercase; color: var(--gsl-cyan); }
.gsl-invite__title { margin: 0 0 6px; font: 700 20px/1.25 "Orbitron", system-ui, sans-serif; }
.gsl-invite__who { background: var(--gsl-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.gsl-invite__game { margin: 0 0 12px; font-size: 16px; color: #f3b3ff; }
.gsl-invite__note { margin: 0 0 12px; font-style: italic; color: rgb(230 236 255 / 85%); }
.gsl-invite__reply { width: 100%; margin-bottom: 12px; box-sizing: border-box; }
.gsl-invite__actions { display: flex; gap: 10px; }
.gsl-invite__actions > * { flex: 1; justify-content: center; min-height: 44px; }
.gsl-invite__timer { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgb(255 255 255 / 10%); }
.gsl-invite__timer i { display: block; height: 100%; background: var(--gsl-grad); transform-origin: 0 50%; transition: transform .5s linear; }
.gsl-invite .gsl-act, .gsl-invite .gsl-send { font-size: 12px; }
.gsl-invite .gsl-input { font-family: "Exo 2", system-ui, sans-serif; }

/* netplay status chip on the player */
.gsl-npstatus {
  position: fixed; z-index: 2700; left: 50%; bottom: calc(22px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%);
  padding: 10px 16px; border: 1px solid rgb(34 228 255 / 60%); border-radius: 3px;
  background: linear-gradient(180deg, rgb(255 255 255 / 14%), rgb(255 255 255 / 0%) 55%), rgb(12 10 34 / 92%);
  box-shadow: 0 0 18px rgb(34 228 255 / 35%); color: #fff;
  font: 600 13px/1.2 "Exo 2", system-ui, sans-serif; max-width: calc(100vw - 32px); text-align: center;
}

@media (prefers-reduced-motion: reduce) {
  .gsl-invite__card, .gsl-toast { animation: none; }
  .gsl-invite__timer i { transition: none; }
}

/* ---- Games picker ---- */
.gsl-games { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: 12px; gap: 8px; overflow: hidden; }
.gsl-games[hidden] { display: none; }
.gsl-games__banner {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px;
  border: 1px solid rgb(224 60 255 / 55%); border-radius: 2px; background: rgb(224 60 255 / 12%);
  font: 600 13px/1.3 "Exo 2", system-ui, sans-serif; color: #f3b3ff;
}
.gsl-games__search .gsl-input { width: 100%; box-sizing: border-box; }
.gsl-games__h { margin: 4px 0 0; font: 700 10.5px/1 "Orbitron", system-ui, sans-serif; letter-spacing: .18em; text-transform: uppercase; color: rgb(200 205 255 / 60%); }
.gsl-games__list { flex: 1; min-height: 0; margin: 0; padding: 0; list-style: none; overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgb(160 90 255 / 50%) transparent; }
.gsl-game {
  display: flex; gap: 10px; padding: 8px; margin-bottom: 6px;
  border: 1px solid rgb(120 140 255 / 18%); border-radius: 2px;
  background: linear-gradient(180deg, rgb(255 255 255 / 6%), rgb(255 255 255 / 0%) 60%), rgb(5 4 15 / 45%);
  outline: none;
}
.gsl-game:focus, .gsl-game:focus-within { border-color: var(--gsl-cyan); box-shadow: 0 0 12px rgb(34 228 255 / 30%); }
.gsl-game__cover { flex: none; width: 46px; height: 62px; object-fit: cover; border: 1px solid rgb(120 140 255 / 30%); border-radius: 2px; background: #0a0820; }
.gsl-game__info { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.gsl-game__name { font-weight: 700; font-size: 13.5px; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gsl-game__plat { font-size: 11.5px; color: #a9f3ff; }
.gsl-game__acts { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 3px; }
.gsl-game__acts .gsl-act { min-height: 28px; padding: 0 8px; font-size: 11.5px; }
@media (width < 600px) { .gsl-game__cover { width: 38px; height: 52px; } }

/* ---- more tabs: compact, scrollable strip ---- */
.gsl-tabs { overflow-x: auto; scrollbar-width: none; }
.gsl-tabs::-webkit-scrollbar { display: none; }
.gsl-tab { flex: 1 0 auto; padding: 10px 9px; font-size: 10.5px; letter-spacing: .08em; }
.gsl-ext { flex: 1; min-height: 0; overflow-y: auto; padding: 12px; scrollbar-width: thin; scrollbar-color: rgb(160 90 255 / 50%) transparent; }
.gsl-ext[hidden] { display: none; }
.gsl-userlink { all: unset; cursor: pointer; font-weight: 700; font-size: 13px; color: #a9f3ff; }
.gsl-userlink:hover, .gsl-userlink:focus-visible { text-decoration: underline; outline: none; }
.gsl-msg.is-me .gsl-userlink { color: #f3b3ff; }
.gsl-you { flex-basis: auto !important; }
/* many tabs: wrap onto two rows instead of scrolling out of view */
.gsl-tabs { flex-wrap: wrap; overflow: visible; row-gap: 0; }
.gsl-tab { flex: 1 0 22%; }
.gsl-tab { white-space: nowrap; }
.gsl-msg.is-system { border-left-color: #ffd76a; background: linear-gradient(90deg, rgb(255 215 106 / 12%), rgb(224 60 255 / 6%)), rgb(5 4 15 / 50%); }
.gsl-system { font-weight: 700; color: #ffd76a; }
.gsl-navtab { flex-direction: row !important; flex-wrap: nowrap; white-space: nowrap; }

/* profile.css */
/* GS - GameScape Online: member profile overlay + Friends tab. Square neon glass. */
.gsp-overlay {
  --gsl-cyan: #22e4ff;
  --gsl-mag: #e03cff;
  --gsl-grad: linear-gradient(90deg, #22e4ff 0%, #4f7bff 45%, #e03cff 100%);
  position: fixed;
  inset: 0;
  z-index: 3050;
  display: grid;
  place-items: center;
  padding: 16px;
  background: rgb(5 4 15 / 60%);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  font-family: "Exo 2", system-ui, sans-serif;
  color: #eef1ff;
}
.gsp-card {
  position: relative;
  width: min(620px, 100%);
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  padding: 24px;
  border: 1px solid rgb(34 228 255 / 50%);
  border-radius: 3px;
  background:
    linear-gradient(180deg, rgb(255 255 255 / 14%) 0%, rgb(255 255 255 / 0%) 90px),
    radial-gradient(520px 260px at 100% 0%, rgb(224 60 255 / 18%), transparent 70%),
    radial-gradient(520px 300px at 0% 100%, rgb(34 228 255 / 14%), transparent 70%),
    rgb(12 10 34 / 95%);
  box-shadow: 0 0 34px rgb(34 228 255 / 25%), 0 30px 80px rgb(0 0 0 / 70%), inset 0 1px 0 rgb(255 255 255 / 30%);
  scrollbar-width: thin;
  scrollbar-color: rgb(160 90 255 / 50%) transparent;
  animation: gsl-in .22s cubic-bezier(.2, .7, .2, 1) both;
}
.gsp-close { position: absolute; top: 12px; right: 12px; }
.gsp-head { display: flex; align-items: center; gap: 16px; padding-right: 40px; }
.gsp-avatar {
  flex: none;
  width: 76px;
  height: 76px;
  object-fit: cover;
  border: 2px solid transparent;
  border-radius: 3px;
  background: linear-gradient(#0a0820, #0a0820) padding-box, var(--gsl-grad) border-box;
  box-shadow: 0 0 18px rgb(34 228 255 / 35%);
}
.gsp-name {
  margin: 0 0 6px;
  font: 800 26px/1.1 "Orbitron", system-ui, sans-serif;
  letter-spacing: .03em;
  word-break: break-word;
  background: var(--gsl-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.gsp-line { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; }
.gsp-state { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; color: rgb(215 222 255 / 65%); }
.gsp-state::before { content: ""; width: 8px; height: 8px; border-radius: 1px; background: rgb(215 222 255 / 35%); }
.gsp-state.on { color: #a9f3ff; }
.gsp-state.on::before { background: var(--gsl-cyan); box-shadow: 0 0 8px var(--gsl-cyan); }

.gsp-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; margin: 18px 0 14px; }
.gsp-stats div {
  padding: 10px 12px;
  border: 1px solid rgb(120 140 255 / 22%);
  border-radius: 2px;
  background: linear-gradient(180deg, rgb(255 255 255 / 7%), rgb(255 255 255 / 0%) 60%), rgb(5 4 15 / 45%);
}
.gsp-stats dt { font: 700 10px/1 "Orbitron", system-ui, sans-serif; letter-spacing: .16em; text-transform: uppercase; color: rgb(200 205 255 / 60%); }
.gsp-stats dd { margin: 6px 0 0; font: 700 17px/1.1 "Orbitron", system-ui, sans-serif; color: #fff; }
.gsp-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.gsp-acts .gsl-act { min-height: 36px; padding: 0 12px; font-size: 12.5px; }
.gsp-now {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  padding: 10px 12px;
  border: 1px solid rgb(224 60 255 / 50%);
  border-radius: 2px;
  background: rgb(224 60 255 / 10%);
  color: #f3b3ff;
  text-decoration: none;
  font-weight: 600;
}
.gsp-now:hover, .gsp-now:focus-visible { border-color: var(--gsl-cyan); outline: none; color: #fff; }

.gsp-sec { margin-top: 14px; }
.gsp-h { margin: 0 0 8px; font: 700 11px/1 "Orbitron", system-ui, sans-serif; letter-spacing: .2em; text-transform: uppercase; color: var(--gsl-cyan); }
.gsp-strip { display: flex; gap: 10px; margin: 0; padding: 0 0 6px; list-style: none; overflow-x: auto; scrollbar-width: thin; scrollbar-color: rgb(160 90 255 / 50%) transparent; }
.gsp-game { display: flex; flex-direction: column; gap: 3px; width: 92px; color: #fff; text-decoration: none; }
.gsp-game img {
  width: 92px;
  height: 124px;
  object-fit: cover;
  border: 1px solid rgb(34 228 255 / 40%);
  border-radius: 2px;
  background: #0a0820;
}
.gsp-game:hover img, .gsp-game:focus-visible img { border-color: var(--gsl-cyan); box-shadow: 0 0 12px rgb(34 228 255 / 45%); }
.gsp-game:focus-visible { outline: none; }
.gsp-game__name { font-size: 12px; font-weight: 600; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.gsp-game__plat { font-size: 10.5px; color: #a9f3ff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gsp-muted { margin: 4px 0; font-size: 13px; color: rgb(215 222 255 / 60%); }
.gsp-foot { margin-top: 16px; font-size: 11.5px; }

/* Friends tab */
.gsp-add { display: flex; gap: 8px; margin-bottom: 10px; }
.gsp-add .gsl-input { flex: 1; min-width: 0; height: 38px; }
.gsp-friends { padding: 0; overflow: visible; }
.gsl-dot.is-off { background: rgb(215 222 255 / 30%); box-shadow: none; }

@media (width < 600px) {
  .gsp-card { padding: 18px; }
  .gsp-avatar { width: 58px; height: 58px; }
  .gsp-name { font-size: 20px; }
}
@media (prefers-reduced-motion: reduce) { .gsp-card { animation: none; } }

/* activity.css */
/* GS - GameScape Online: activity feed. */
.gsa-list { margin: 0; padding: 0; list-style: none; }
.gsa-item {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  align-items: start;
  gap: 8px;
  padding: 9px 10px;
  margin-bottom: 6px;
  border: 1px solid rgb(120 140 255 / 18%);
  border-left: 3px solid rgb(34 228 255 / 55%);
  border-radius: 2px;
  background: linear-gradient(180deg, rgb(255 255 255 / 6%), rgb(255 255 255 / 0%) 60%), rgb(5 4 15 / 45%);
  font-family: "Exo 2", system-ui, sans-serif;
}
.gsa-item > .mdi { font-size: 18px; line-height: 1.2; color: #22e4ff; }
.gsa-item--friends { border-left-color: rgb(224 60 255 / 60%); }
.gsa-item--friends > .mdi, .gsa-item--achievement > .mdi { color: #e03cff; }
.gsa-item--new_games { border-left-color: rgb(79 123 255 / 70%); }
.gsa-item--new_games > .mdi { color: #7d9bff; }
.gsa-item--achievement { border-left-color: rgb(255 62 207 / 70%); }
.gsa-text { margin: 0; font-size: 13.5px; line-height: 1.4; color: #e8ebff; overflow-wrap: anywhere; }
.gsa-user { all: unset; cursor: pointer; font-weight: 700; color: #a9f3ff; }
.gsa-user:hover, .gsa-user:focus-visible { text-decoration: underline; outline: none; }
.gsa-game { color: #f3b3ff; font-weight: 600; text-decoration: none; }
.gsa-game:hover, .gsa-game:focus-visible { text-decoration: underline; color: #fff; outline: none; }
.gsa-plat { color: rgb(215 222 255 / 60%); font-size: 12.5px; }
.gsa-time { font-size: 11px; color: rgb(215 222 255 / 50%); white-space: nowrap; }

/* home widget */
.gsa-widget {
  margin: 0 0 26px;
  padding: 16px 18px;
  border: 1px solid rgb(34 228 255 / 35%);
  border-radius: 3px;
  background:
    linear-gradient(180deg, rgb(255 255 255 / 9%) 0%, rgb(255 255 255 / 0%) 60px),
    linear-gradient(135deg, rgb(16 12 44 / 92%), rgb(7 6 22 / 94%));
  box-shadow: 0 0 18px rgb(34 228 255 / 12%), 0 12px 30px rgb(0 0 0 / 45%), inset 0 1px 0 rgb(255 255 255 / 18%);
}
.gsa-widget__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.gsa-widget__title {
  margin: 0;
  font: 700 14px/1 "Orbitron", system-ui, sans-serif;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 0 10px rgb(34 228 255 / 45%);
}
.gsa-list--widget { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 6px; }
.gsa-list--widget .gsa-item { margin: 0; }
.gsa-widget .gsl-act {
  display: inline-flex; align-items: center; gap: 5px; min-height: 32px; padding: 0 12px;
  border: 1px solid rgb(120 140 255 / 32%); border-radius: 2px;
  background: linear-gradient(180deg, rgb(255 255 255 / 10%), rgb(255 255 255 / 0%) 60%), rgb(5 4 15 / 55%);
  color: #fff; font: 600 12px/1 "Exo 2", system-ui, sans-serif; cursor: pointer;
}
.gsa-widget .gsl-act:hover, .gsa-widget .gsl-act:focus-visible { border-color: #22e4ff; box-shadow: 0 0 10px rgb(34 228 255 / 40%); outline: none; }
@media (width < 600px) { .gsa-list--widget { grid-template-columns: 1fr; } }

/* achievements.css */
/* GS - GameScape Online: RetroAchievements profile section + Ranks tab. */
.gsr-top { display: flex; align-items: center; gap: 14px; }
.gsr-pic { width: 56px; height: 56px; object-fit: cover; border: 1px solid rgb(224 60 255 / 55%); border-radius: 2px; background: #0a0820; }
.gsr-nums { flex: 1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0; }
.gsr-nums div { padding: 8px 10px; border: 1px solid rgb(120 140 255 / 22%); border-radius: 2px; background: rgb(5 4 15 / 45%); }
.gsr-nums dt { font: 700 9.5px/1 "Orbitron", system-ui, sans-serif; letter-spacing: .14em; text-transform: uppercase; color: rgb(200 205 255 / 60%); }
.gsr-nums dd { margin: 5px 0 0; font: 700 15px/1.1 "Orbitron", system-ui, sans-serif; color: #fff; }
.gsr-rp { font-style: italic; }
.gsr-recent { margin: 10px 0 6px; padding: 0; list-style: none; }
.gsr-ach {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 6px 8px;
  margin-bottom: 5px;
  border: 1px solid rgb(120 140 255 / 18%);
  border-left: 3px solid rgb(255 62 207 / 60%);
  border-radius: 2px;
  background: rgb(5 4 15 / 45%);
}
.gsr-badge { width: 40px; height: 40px; border-radius: 2px; }
.gsr-ach__t { display: flex; flex-direction: column; min-width: 0; }
.gsr-ach__t strong { font-size: 13px; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gsr-ach__t span { font-size: 11.5px; color: #a9f3ff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gsr-ach__pts { font-size: 11.5px; color: #f3b3ff; white-space: nowrap; }
.gsr-ext { font-size: 12.5px; color: #22e4ff; }
.gsr-help { padding: 10px 12px; border: 1px dashed rgb(34 228 255 / 45%); border-radius: 2px; background: rgb(34 228 255 / 6%); font-size: 13.5px; }
.gsr-help p { margin: 0 0 6px; }
.gsr-help ol { margin: 0 0 10px; padding-left: 20px; color: rgb(230 236 255 / 85%); }
.gsr-help .gsl-act { display: inline-flex; min-height: 32px; text-decoration: none; }

/* Ranks tab */
.gsr-switch { display: flex; gap: 4px; margin-bottom: 10px; border-bottom: 1px solid rgb(120 140 255 / 18%); }
.gsr-switch .gsl-tab[aria-pressed="true"] { color: #fff; border-bottom-color: #22e4ff; box-shadow: 0 8px 12px -10px #22e4ff; }
.gsr-board { margin: 0; padding: 0; list-style: none; }
.gsr-row {
  display: grid;
  grid-template-columns: 36px 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  margin-bottom: 6px;
  border: 1px solid rgb(120 140 255 / 18%);
  border-radius: 2px;
  background: linear-gradient(180deg, rgb(255 255 255 / 6%), rgb(255 255 255 / 0%) 60%), rgb(5 4 15 / 45%);
}
.gsr-row:nth-child(1) { border-color: rgb(34 228 255 / 60%); box-shadow: 0 0 12px rgb(34 228 255 / 25%); }
.gsr-row.is-me { border-left: 3px solid #e03cff; }
.gsr-rank { font: 800 14px/1 "Orbitron", system-ui, sans-serif; color: #22e4ff; }
.gsr-rowpic { width: 34px; height: 34px; object-fit: cover; border-radius: 2px; background: #0a0820; }
.gsr-who { display: flex; flex-direction: column; min-width: 0; }
.gsr-score { font: 700 12.5px/1.2 "Orbitron", system-ui, sans-serif; color: #f3b3ff; text-align: right; }
.gsr-hint { margin-top: 8px; font-size: 12px; }
@media (width < 600px) { .gsr-nums { grid-template-columns: 1fr 1fr; } }

/* events.css */
/* GS - GameScape Online: game nights. */
.gse-new { width: 100%; justify-content: center; margin-bottom: 12px; }
.gse-list { margin: 0; padding: 0; list-style: none; }
.gse-card {
  margin-bottom: 8px;
  padding: 10px 12px;
  border: 1px solid rgb(120 140 255 / 22%);
  border-left: 3px solid #22e4ff;
  border-radius: 2px;
  background: linear-gradient(180deg, rgb(255 255 255 / 7%), rgb(255 255 255 / 0%) 60%), rgb(5 4 15 / 50%);
  font-family: "Exo 2", system-ui, sans-serif;
}
.gse-card.is-live { border-left-color: #e03cff; box-shadow: 0 0 14px rgb(224 60 255 / 30%); }
.gse-top { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; }
.gse-when { color: #a9f3ff; font-weight: 600; }
.gse-until { font: 700 10.5px/1.4 "Orbitron", system-ui, sans-serif; letter-spacing: .1em; color: #f3b3ff; text-transform: uppercase; }
.gse-card.is-live .gse-until { color: #fff; background: linear-gradient(90deg, #22e4ff, #e03cff); padding: 0 6px; border-radius: 2px; }
.gse-title { display: block; margin: 4px 0 2px; font: 700 15px/1.25 "Orbitron", system-ui, sans-serif; color: #fff; text-decoration: none; }
.gse-title:hover, .gse-title:focus-visible { text-decoration: underline; outline: none; }
.gse-meta, .gse-who, .gse-note { margin: 2px 0; font-size: 12.5px; color: rgb(215 222 255 / 72%); }
.gse-note { font-style: italic; color: rgb(230 236 255 / 85%); }
.gse-acts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.gse-acts .gsl-act, .gse-acts .gsl-send { min-height: 32px; padding: 0 12px; font-size: 12px; }
.gse-rsvp[aria-pressed="true"] { border-color: #22e4ff; background: rgb(34 228 255 / 18%); box-shadow: 0 0 10px rgb(34 228 255 / 35%); }
.gse-cancel { border-color: rgb(255 45 122 / 45%) !important; color: #ffb3cf !important; }

.gse-form { display: flex; flex-direction: column; gap: 10px; }
.gse-game {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px;
  border: 1px solid rgb(224 60 255 / 45%); border-radius: 2px; background: rgb(224 60 255 / 8%);
}
.gse-game strong { font-size: 14px; }
.gse-game .gsl-act { margin-left: auto; min-height: 30px; }
.gse-field { display: flex; flex-direction: column; gap: 4px; font-size: 11.5px; color: rgb(215 222 255 / 70%); }
.gse-field .gsl-input { width: 100%; box-sizing: border-box; height: 40px; color-scheme: dark; }
.gse-row { display: flex; gap: 10px; }
.gse-row .gse-field { flex: 1; }

/* tournament.css */
/* GS - GameScape Online: weekly tournament. Square neon glass; gold/silver/bronze/neon tiers. */
.gst-hero { display: flex; gap: 14px; margin-bottom: 12px; }
.gst-cover {
  flex: none; width: 92px; height: 124px; object-fit: cover;
  border: 1px solid rgb(224 60 255 / 60%); border-radius: 2px; background: #0a0820;
  box-shadow: 0 0 16px rgb(224 60 255 / 30%);
}
.gst-hero__t { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.gst-eyebrow { margin: 0; font: 700 10px/1.3 "Orbitron", system-ui, sans-serif; letter-spacing: .16em; text-transform: uppercase; color: #22e4ff; }
.gst-game { margin: 0; font: 800 18px/1.2 "Orbitron", system-ui, sans-serif; color: #fff; }
.gst-plat { margin: 0; font-size: 12.5px; color: #a9f3ff; }
.gst-left { display: flex; align-items: center; gap: 5px; margin: 2px 0 0; font-size: 12.5px; color: #f3b3ff; }
.gst-acts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.gst-acts .gsl-send, .gst-acts .gsl-act { min-height: 32px; padding: 0 12px; font-size: 12px; text-decoration: none; display: inline-flex; align-items: center; gap: 5px; }
.gst-board { margin: 0 0 8px; padding: 0; list-style: none; }
.gst-row {
  display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: 8px;
  padding: 7px 10px; margin-bottom: 5px;
  border: 1px solid rgb(120 140 255 / 18%); border-radius: 2px;
  background: linear-gradient(180deg, rgb(255 255 255 / 6%), rgb(255 255 255 / 0%) 60%), rgb(5 4 15 / 45%);
}
.gst-r1 { border-color: rgb(255 215 106 / 70%); box-shadow: 0 0 12px rgb(255 215 106 / 25%); }
.gst-r2 { border-color: rgb(215 224 240 / 60%); }
.gst-r3 { border-color: rgb(224 160 112 / 60%); }
.gst-row.is-me { border-left: 3px solid #e03cff; }
.gst-rank { font: 800 14px/1 "Orbitron", system-ui, sans-serif; color: #22e4ff; }
.gst-r1 .gst-rank { color: #ffd76a; } .gst-r2 .gst-rank { color: #d7e0f0; } .gst-r3 .gst-rank { color: #e0a070; }
.gst-who { display: flex; flex-direction: column; min-width: 0; }
.gst-pts { font: 700 13px/1 "Orbitron", system-ui, sans-serif; color: #f3b3ff; white-space: nowrap; }
.gst-note { font-size: 12px; }
.gst-link { margin-bottom: 10px; }
.gst-admin { margin-top: 12px; padding-top: 10px; border-top: 1px dashed rgb(120 140 255 / 30%); }
.gst-admin .gsl-act { min-height: 30px; padding: 0 10px; font-size: 12px; }
.gst-upcoming { margin: 8px 0 0; padding: 0; list-style: none; font-size: 12.5px; }
.gst-upcoming li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 5px 0; border-bottom: 1px solid rgb(120 140 255 / 12%); }
.gst-upcoming li .gsl-act { margin-left: auto; }

/* home banner */
.gst-banner {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 18px;
  margin: 0 0 26px; padding: 16px 18px;
  border: 1px solid rgb(224 60 255 / 45%); border-radius: 3px;
  background:
    linear-gradient(180deg, rgb(255 255 255 / 9%) 0%, rgb(255 255 255 / 0%) 60px),
    radial-gradient(600px 240px at 0% 0%, rgb(224 60 255 / 16%), transparent 70%),
    linear-gradient(135deg, rgb(16 12 44 / 92%), rgb(7 6 22 / 94%));
  box-shadow: 0 0 22px rgb(224 60 255 / 18%), 0 12px 30px rgb(0 0 0 / 45%), inset 0 1px 0 rgb(255 255 255 / 18%);
}
.gst-banner .gst-hero { margin: 0; }
.gst-banner .gst-cover { width: 120px; height: 162px; }
.gst-banner .gst-game { font-size: 22px; }
.gst-banner__side .gst-board { max-height: 230px; overflow-y: auto; }
.gst-banner .gsl-send { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 16px; border: 0; border-radius: 2px;
  background: linear-gradient(180deg, rgb(255 255 255 / 25%), rgb(255 255 255 / 0%) 55%), linear-gradient(90deg, #22e4ff, #4f7bff 45%, #e03cff);
  color: #fff; font: 700 12px/1 "Orbitron", system-ui, sans-serif; letter-spacing: .1em; text-transform: uppercase; text-decoration: none; }
.gst-banner .gsl-act { display: inline-flex; align-items: center; min-height: 36px; padding: 0 12px; border: 1px solid rgb(120 140 255 / 32%); border-radius: 2px;
  background: rgb(5 4 15 / 55%); color: #fff; font: 600 12px/1 "Exo 2", system-ui, sans-serif; text-decoration: none; }
.gst-banner .gsl-userlink { all: unset; cursor: pointer; font-weight: 700; font-size: 13px; color: #a9f3ff; }
.gst-banner .gsl-idle { font-size: 11.5px; color: rgb(215 222 255 / 55%); }
.gst-banner .gsl-empty { padding: 16px; text-align: center; color: rgb(215 222 255 / 60%); list-style: none; }
@media (width < 900px) { .gst-banner { grid-template-columns: 1fr; } }

/* trophies */
.gst-cup { margin-left: 4px; font-size: 14px; vertical-align: -1px; }
.gst-gold { color: #ffd76a; filter: drop-shadow(0 0 4px rgb(255 215 106 / 70%)); }
.gst-silver { color: #d7e0f0; filter: drop-shadow(0 0 4px rgb(215 224 240 / 60%)); }
.gst-bronze { color: #e0a070; filter: drop-shadow(0 0 4px rgb(224 160 112 / 60%)); }
.gst-top10 { color: #22e4ff; filter: drop-shadow(0 0 4px rgb(34 228 255 / 70%)); }
.gst-counts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin-bottom: 8px; }
.gst-count { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 4px; border: 1px solid rgb(120 140 255 / 22%); border-radius: 2px; background: rgb(5 4 15 / 45%); }
.gst-count .mdi { font-size: 22px; }
.gst-count b { font: 800 16px/1 "Orbitron", system-ui, sans-serif; color: #fff; }
.gst-count span { font-size: 10.5px; color: rgb(215 222 255 / 65%); text-transform: uppercase; letter-spacing: .1em; }
.gst-count.is-zero { opacity: .4; filter: grayscale(1); }
.gst-trophies { margin: 0; padding: 0; list-style: none; }
.gst-trophy { display: flex; align-items: center; gap: 8px; padding: 6px 8px; margin-bottom: 4px; border: 1px solid rgb(120 140 255 / 18%); border-radius: 2px; background: rgb(5 4 15 / 45%); font-size: 13px; color: #e8ebff; }
.gst-trophy .gsl-idle { margin-left: auto; font-size: 11.5px; color: rgb(215 222 255 / 55%); }
.gst-trophy .mdi { font-size: 18px; }

/* reviews.css */
/* GS - GameScape Online: member ratings & reviews on game pages. */
.gsrv {
  --gsl-cyan: #22e4ff;
  --gsl-grad: linear-gradient(90deg, #22e4ff 0%, #4f7bff 45%, #e03cff 100%);
  margin: 14px 0 18px;
  padding: 16px 18px;
  border: 1px solid rgb(34 228 255 / 35%);
  border-radius: 3px;
  background:
    linear-gradient(180deg, rgb(255 255 255 / 9%) 0%, rgb(255 255 255 / 0%) 60px),
    linear-gradient(135deg, rgb(16 12 44 / 92%), rgb(7 6 22 / 94%));
  box-shadow: 0 0 18px rgb(34 228 255 / 12%), 0 12px 30px rgb(0 0 0 / 40%), inset 0 1px 0 rgb(255 255 255 / 18%);
  font-family: "Exo 2", system-ui, sans-serif;
  color: #e8ebff;
}
.gsrv-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin-bottom: 12px; }
.gsrv-title { margin: 0; font: 700 14px/1 "Orbitron", system-ui, sans-serif; letter-spacing: .2em; text-transform: uppercase; color: #fff; text-shadow: 0 0 10px rgb(34 228 255 / 45%); }
.gsrv-stat { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; font-size: 13.5px; color: rgb(215 222 255 / 75%); }
.gsrv-pct { font: 800 18px/1 "Orbitron", system-ui, sans-serif; color: #fff; }
.gsrv-up { color: #22e4ff; } .gsrv-down { color: #ff6fa3; }
.gsrv-bar { display: inline-block; width: 120px; height: 6px; border-radius: 1px; background: rgb(255 111 163 / 45%); overflow: hidden; }
.gsrv-bar i { display: block; height: 100%; background: var(--gsl-grad); }
.gsrv-form { display: flex; flex-direction: column; gap: 8px; padding: 12px; margin-bottom: 12px; border: 1px solid rgb(120 140 255 / 22%); border-radius: 2px; background: rgb(5 4 15 / 45%); }
.gsrv-votes { display: flex; gap: 8px; }
.gsrv-vote {
  display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 14px;
  border: 1px solid rgb(120 140 255 / 32%); border-radius: 2px; background: rgb(5 4 15 / 55%);
  color: #fff; font: 600 13px/1 "Exo 2", system-ui, sans-serif; cursor: pointer;
}
.gsrv-vote .mdi { font-size: 18px; }
.gsrv-vote:hover, .gsrv-vote:focus-visible { border-color: #22e4ff; outline: none; }
.gsrv-vote--up[aria-pressed="true"] { border-color: #22e4ff; background: rgb(34 228 255 / 18%); box-shadow: 0 0 12px rgb(34 228 255 / 40%); }
.gsrv-vote--down[aria-pressed="true"] { border-color: #ff6fa3; background: rgb(255 111 163 / 16%); box-shadow: 0 0 12px rgb(255 111 163 / 35%); }
.gsrv-text { width: 100%; box-sizing: border-box; height: auto; min-height: 70px; padding: 10px 12px; resize: vertical; line-height: 1.45;
  border: 1px solid rgb(120 140 255 / 30%); border-radius: 2px; background: rgb(5 4 15 / 70%); color: #fff; font: 400 14px/1.45 "Exo 2", system-ui, sans-serif; }
.gsrv-text:focus { border-color: #22e4ff; outline: none; box-shadow: 0 0 12px rgb(34 228 255 / 30%); }
.gsrv-row { display: flex; align-items: center; gap: 8px; }
.gsrv-count { margin-right: auto; font-size: 11.5px; color: rgb(215 222 255 / 50%); }
.gsrv .gsl-send, .gsrv .gsl-act {
  display: inline-flex; align-items: center; min-height: 36px; padding: 0 16px; border-radius: 2px; cursor: pointer;
  font: 700 12px/1 "Orbitron", system-ui, sans-serif; letter-spacing: .08em; text-transform: uppercase; color: #fff;
}
.gsrv .gsl-send { border: 0; background: linear-gradient(180deg, rgb(255 255 255 / 25%), rgb(255 255 255 / 0%) 55%), var(--gsl-grad); }
.gsrv .gsl-send:disabled { opacity: .6; }
.gsrv .gsl-act { border: 1px solid rgb(120 140 255 / 32%); background: rgb(5 4 15 / 55%); font-family: "Exo 2", system-ui, sans-serif; text-transform: none; letter-spacing: 0; }
.gsrv-err { margin: 0; font-size: 12.5px; color: #ff6fa3; }
.gsrv-list { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 8px; }
.gsrv-item { padding: 10px 12px; border: 1px solid rgb(120 140 255 / 18%); border-left: 3px solid #22e4ff; border-radius: 2px; background: rgb(5 4 15 / 45%); }
.gsrv-item--down { border-left-color: #ff6fa3; }
.gsrv-meta { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
.gsrv-meta > .mdi { color: #22e4ff; } .gsrv-item--down .gsrv-meta > .mdi { color: #ff6fa3; }
.gsrv-meta .gsl-userlink { all: unset; cursor: pointer; font-weight: 700; font-size: 13px; color: #a9f3ff; }
.gsrv-meta .gsl-userlink:hover, .gsrv-meta .gsl-userlink:focus-visible { text-decoration: underline; }
.gsrv-time { margin-left: auto; font-size: 11px; color: rgb(215 222 255 / 50%); }
.gsrv .gsl-del { display: grid; place-items: center; width: 26px; height: 26px; border: 1px solid transparent; border-radius: 2px; background: none; color: #ff6fa3; cursor: pointer; }
.gsrv .gsl-del:hover, .gsrv .gsl-del:focus-visible { border-color: #ff2d7a; outline: none; }
.gsrv-body { margin: 0; font-size: 14px; line-height: 1.45; overflow-wrap: anywhere; white-space: pre-wrap; }
@media (width < 600px) { .gsrv { padding: 12px; } .gsrv-list { grid-template-columns: 1fr; } }

/* badges.css */
/* GS - GameScape Online: GameScape badges. Tiers: bronze / silver / gold / neon. */
.gsb-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px; }
.gsb-points { font-size: 12.5px; color: rgb(215 222 255 / 70%); }
.gsb-points b { font: 800 16px/1 "Orbitron", system-ui, sans-serif; color: #fff; text-shadow: 0 0 10px rgb(34 228 255 / 50%); }
.gsb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 6px; margin: 6px 0 8px; padding: 0; list-style: none; }
.gsb {
  --tier: #e0a070;
  display: flex; align-items: center; gap: 10px; padding: 8px 10px;
  border: 1px solid rgb(120 140 255 / 18%); border-radius: 2px; background: rgb(5 4 15 / 45%);
  font-family: "Exo 2", system-ui, sans-serif;
}
.gsb--silver { --tier: #d7e0f0; } .gsb--gold { --tier: #ffd76a; } .gsb--neon { --tier: #22e4ff; }
.gsb-ic {
  flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 3px;
  border: 1px solid var(--tier); color: var(--tier); font-size: 22px;
  background: radial-gradient(circle at 50% 30%, rgb(255 255 255 / 14%), rgb(5 4 15 / 60%));
}
.gsb.is-earned { border-color: color-mix(in srgb, var(--tier) 45%, transparent); }
.gsb.is-earned .gsb-ic { box-shadow: 0 0 12px color-mix(in srgb, var(--tier) 55%, transparent), inset 0 1px 0 rgb(255 255 255 / 30%); }
.gsb--neon.is-earned .gsb-ic { color: #fff; background: linear-gradient(135deg, #22e4ff, #4f7bff 50%, #e03cff); border-color: transparent; }
.gsb.is-locked .gsb-ic { filter: grayscale(1); opacity: .45; }
.gsb.is-locked .gsb-name { color: rgb(215 222 255 / 70%); }
.gsb-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.gsb-name { font-size: 13px; color: #fff; }
.gsb-desc { font-size: 11.5px; color: rgb(215 222 255 / 70%); }
.gsb-meta { font-size: 10.5px; color: var(--tier); }
.gsb.is-locked .gsb-meta { color: rgb(215 222 255 / 50%); }
.gsb-bar { display: block; height: 4px; margin: 3px 0 1px; border-radius: 1px; background: rgb(120 140 255 / 18%); overflow: hidden; }
.gsb-bar i { display: block; height: 100%; background: linear-gradient(90deg, #22e4ff, #e03cff); }
.gsb-tier--bronze { color: #e0a070; } .gsb-tier--silver { color: #d7e0f0; } .gsb-tier--gold { color: #ffd76a; } .gsb-tier--neon { color: #22e4ff; }
.gsa-item--badge { border-left-color: #ffd76a; } .gsa-item--badge > .mdi { color: #ffd76a; }

/* unlock toast */
.gsb-toast {
  position: fixed; z-index: 3200; right: calc(18px + env(safe-area-inset-right, 0px)); top: calc(76px + env(safe-area-inset-top, 0px));
  display: flex; align-items: center; gap: 12px; width: min(380px, calc(100vw - 32px)); padding: 12px 14px;
  border: 1px solid var(--tier); border-radius: 3px; cursor: pointer;
  background: linear-gradient(180deg, rgb(255 255 255 / 16%), rgb(255 255 255 / 0%) 50%), rgb(12 10 34 / 95%);
  box-shadow: 0 0 24px color-mix(in srgb, var(--tier) 45%, transparent), 0 14px 34px rgb(0 0 0 / 60%);
  font-family: "Exo 2", system-ui, sans-serif; color: #fff;
  animation: gsb-in .35s cubic-bezier(.2, .8, .2, 1.2) both; transition: opacity .4s, transform .4s;
}
.gsb-toast .gsb-ic { width: 48px; height: 48px; font-size: 28px; box-shadow: 0 0 14px color-mix(in srgb, var(--tier) 60%, transparent); }
.gsb-toast .gsb-name { font: 800 16px/1.2 "Orbitron", system-ui, sans-serif; }
.gsb-eyebrow { font: 700 10px/1 "Orbitron", system-ui, sans-serif; letter-spacing: .18em; text-transform: uppercase; color: var(--tier); }
.gsb-toast.out { opacity: 0; transform: translateX(20px); }
@keyframes gsb-in { from { opacity: 0; transform: translateX(30px) scale(.96); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .gsb-toast { animation: none; transition: none; } }

/* lounge-home.css */
/* GS - GameScape Online: home-page "Create your Cyber City avatar" card (lounge-home.js) */
.gs-lounge-card {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  margin: 0 0 26px;
  padding: 16px 48px 16px 18px;
  border: 1px solid rgb(34 228 255 / 35%);
  border-radius: 3px;
  background: linear-gradient(100deg, rgb(34 228 255 / 10%), rgb(139 61 255 / 12%) 55%, rgb(224 60 255 / 10%)), rgb(10 8 32 / 88%);
  box-shadow: 0 0 24px rgb(34 228 255 / 12%);
  color: #e9e6ff;
}
.gs-lounge-card__crew { display: flex; align-items: flex-end; gap: 2px; min-width: 120px; min-height: 100px; }
.gs-lounge-card__crew canvas { width: 40px; height: 62.5px; image-rendering: pixelated; }
.gs-lounge-card__eyebrow { display: inline-flex; align-items: center; gap: 6px; color: #22e4ff; font: 700 11px/1 Orbitron, system-ui, sans-serif; letter-spacing: .12em; text-transform: uppercase; }
.gs-lounge-card h2 { margin: 6px 0 4px; font: 700 20px/1.2 Orbitron, system-ui, sans-serif; color: #fff; }
.gs-lounge-card p { margin: 0; color: rgb(233 230 255 / 75%); font-size: 14px; }
.gs-lounge-card__go {
  display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 18px; border-radius: 2px;
  background: linear-gradient(90deg, #22e4ff, #8b3dff 60%, #e03cff); color: #05040f !important; text-decoration: none;
  font: 800 12px/1 Orbitron, system-ui, sans-serif; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap;
  box-shadow: 0 0 16px rgb(34 228 255 / 35%);
}
.gs-lounge-card__go:hover, .gs-lounge-card__go:focus-visible { filter: brightness(1.1); box-shadow: 0 0 24px rgb(224 60 255 / 50%); }
.gs-lounge-card__x {
  position: absolute; top: 8px; right: 8px; width: 30px; height: 30px; display: grid; place-items: center;
  border: 1px solid transparent; border-radius: 2px; background: transparent; color: rgb(233 230 255 / 70%); cursor: pointer; font-size: 18px;
}
.gs-lounge-card__x:hover, .gs-lounge-card__x:focus-visible { border-color: rgb(34 228 255 / 40%); color: #fff; }
@media (width < 700px) {
  .gs-lounge-card { grid-template-columns: minmax(0, 1fr); padding-right: 18px; }
  .gs-lounge-card__crew { min-height: 0; }
  .gs-lounge-card__go { justify-self: start; }
}

/* Cyber City nav tab (lounge-nav.js): keep the two-word label on one line */
.gs-nav-city .r-slider-btn-group__label { white-space: nowrap; }

/* netplay-hud.css */
/* GS - GameScape Online: netplay presence HUD (see netplay-hud.js) */
.gs-np {
  position: fixed;
  top: calc(14px + env(safe-area-inset-top, 0px));
  right: 14px;
  z-index: 2600;
  width: 300px;
  max-width: calc(100vw - 28px);
  border: 1px solid rgb(34 228 255 / 40%);
  border-radius: 3px;
  background-image:
    linear-gradient(180deg, rgb(255 255 255 / 12%) 0%, rgb(255 255 255 / 3%) 46%, transparent 48%),
    linear-gradient(180deg, rgb(14 12 40 / 86%), rgb(5 4 15 / 90%));
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  backdrop-filter: blur(14px) saturate(1.3);
  box-shadow: 0 0 18px rgb(34 228 255 / 16%), 0 12px 30px rgb(0 0 0 / 55%);
  color: #e8ecff;
  font: 500 13px/1.3 "Exo 2", system-ui, sans-serif;
  opacity: .92;
  transition: opacity .2s;
}
.gs-np:hover { opacity: 1; }
.gs-np[hidden] { display: none !important; }

.gs-np__head {
  all: unset;
  box-sizing: border-box;
  display: grid;
  width: 100%;
  gap: 3px;
  padding: 10px 12px 8px;
  cursor: pointer;
  border-bottom: 1px solid rgb(120 140 255 / 18%);
}
.gs-np__head:focus-visible { outline: 2px solid #5ff3ff; outline-offset: -2px; }
.gs-np__top { display: flex; align-items: center; gap: 8px; }
.gs-np__top b {
  font: 700 11px/1 "Orbitron", system-ui, sans-serif;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #fff;
}
.gs-np__live {
  width: 8px;
  height: 8px;
  border-radius: 1px;
  background: #22e4ff;
  box-shadow: 0 0 0 0 rgb(34 228 255 / 60%);
  animation: gs-np-pulse 2s infinite;
}
.gs-np__count {
  margin-left: auto;
  font: 700 12px/1 "Orbitron", system-ui, sans-serif;
  color: #a9f3ff;
}
.gs-np__game { font-weight: 600; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gs-np__game:empty, .gs-np__room:empty { display: none; }
.gs-np__room { font-size: 11.5px; color: rgb(215 222 255 / 60%); }

.gs-np__list { list-style: none; margin: 0; padding: 6px 0; }
.gs-np__slot {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-left: 3px solid var(--slot);
}
.gs-np__slot + .gs-np__slot { margin-top: 2px; }
.gs-np__p { font: 800 11px/1 "Orbitron", system-ui, sans-serif; color: var(--slot); text-shadow: 0 0 8px var(--slot); }
.gs-np__name { display: flex; align-items: center; min-width: 0; font-weight: 600; }
.gs-np__nm { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gs-np__tag { flex: none; }
.gs-np__slot.is-empty { border-left-color: rgb(120 140 255 / 25%); }
.gs-np__slot.is-empty .gs-np__p { color: rgb(200 205 255 / 35%); text-shadow: none; }
.gs-np__slot.is-empty .gs-np__name { font-weight: 400; font-style: italic; color: rgb(200 205 255 / 45%); }
.gs-np__tag {
  margin-left: 6px;
  padding: 1px 5px;
  border: 1px solid rgb(34 228 255 / 45%);
  border-radius: 2px;
  font: 700 9.5px/1.4 "Orbitron", system-ui, sans-serif;
  font-style: normal;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #a9f3ff;
}
.gs-np__tag--you { border-color: rgb(224 60 255 / 50%); color: #f3b3ff; }
.gs-np__state { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: rgb(215 222 255 / 80%); white-space: nowrap; }
.gs-np__state i { width: 7px; height: 7px; border-radius: 1px; background: #8a90b8; }
.gs-np__state--ok i, .gs-np__state--you i { background: #22e4ff; box-shadow: 0 0 6px #22e4ff; }
.gs-np__state--slow i { background: #ff3ecf; }
.gs-np__state--wait i { background: #4f7bff; animation: gs-np-blink 1s infinite; }
.gs-np__state--drop i { background: #ff3ecf; animation: gs-np-blink .6s infinite; }
.gs-np__state--bad i { background: #ff2d7a; }
.gs-np__state--bad { color: #ff6fa3; }

/* Minimised: a small pill */
.gs-np.is-min { width: auto; }
.gs-np.is-min .gs-np__list,
.gs-np.is-min .gs-np__game,
.gs-np.is-min .gs-np__room { display: none; }
.gs-np.is-min .gs-np__head { border-bottom: 0; padding: 8px 12px; }

/* Toasts, bottom-left, Rocket League style */
.gs-np-toasts {
  position: fixed;
  left: 14px;
  bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  z-index: 2600;
  display: flex;
  flex-direction: column;
  gap: 6px;
  pointer-events: none;
}
.gs-np-toast {
  padding: 8px 14px 8px 12px;
  border-left: 3px solid #22e4ff;
  border-radius: 2px;
  background: rgb(8 6 26 / 90%);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 6px 18px rgb(0 0 0 / 50%);
  color: #fff;
  font: 600 13px/1.3 "Exo 2", system-ui, sans-serif;
  opacity: 0;
  transform: translateX(-12px);
  transition: opacity .3s, transform .3s;
}
.gs-np-toast.in { opacity: 1; transform: none; }
.gs-np-toast--leave, .gs-np-toast--warn { border-left-color: #e03cff; }
.gs-np-toast--bad { border-left-color: #ff2d7a; }

@keyframes gs-np-pulse { 70%, 100% { box-shadow: 0 0 0 7px rgb(34 228 255 / 0%); } }
@keyframes gs-np-blink { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) {
  .gs-np__live, .gs-np__state i { animation: none !important; }
  .gs-np-toast { transition: none; }
}
@media (width < 600px) {
  .gs-np { width: 220px; top: auto; bottom: 72px; }
}

/* saves-hub.css */
/* GS - GameScape Online: Saves & resume hub (see saves-hub.js) */
html.gs-sh-open, html.gs-sh-open body { overflow: hidden; }
.gs-sh {
  position: fixed;
  inset: 0;
  z-index: 2450;
  display: grid;
  place-items: center;
  padding: clamp(10px, 3vw, 40px);
  background: rgb(3 2 10 / 72%);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.gs-sh[hidden] { display: none; }
.gs-sh__panel {
  width: min(1180px, 100%);
  max-height: 100%;
  display: flex;
  flex-direction: column;
  border: 1px solid rgb(34 228 255 / 45%);
  border-radius: 3px;
  background-image:
    linear-gradient(180deg, rgb(255 255 255 / 10%) 0%, rgb(255 255 255 / 3%) 8%, transparent 9%),
    linear-gradient(180deg, rgb(16 12 44 / 97%), rgb(6 5 20 / 98%));
  box-shadow: 0 0 30px rgb(34 228 255 / 18%), 0 30px 80px rgb(0 0 0 / 70%);
  color: #e8ecff;
  font-family: "Exo 2", system-ui, sans-serif;
}
.gs-sh__head {
  position: relative;
  display: grid;
  grid-template-columns: 1fr minmax(200px, 320px) auto;
  grid-template-areas: "title filter close" "sub filter close";
  align-items: center;
  gap: 4px 16px;
  padding: 20px 22px 16px;
  border-bottom: 1px solid rgb(120 140 255 / 20%);
}
.gs-sh__head h2 {
  grid-area: title;
  margin: 0;
  font: 800 20px/1.1 "Orbitron", system-ui, sans-serif;
  letter-spacing: .06em;
  color: #fff;
  text-shadow: 0 0 14px rgb(34 228 255 / 45%);
}
.gs-sh__head p { grid-area: sub; margin: 0; font-size: 14px; color: rgb(215 222 255 / 70%); }
.gs-sh__filter {
  grid-area: filter;
  padding: 10px 12px;
  border: 1px solid rgb(34 228 255 / 40%);
  border-radius: 2px;
  background: rgb(5 4 15 / 80%);
  color: #fff;
  font: inherit;
  font-size: 14px;
  outline: none;
}
.gs-sh__filter:focus { border-color: #22e4ff; box-shadow: 0 0 12px rgb(34 228 255 / 30%); }
.gs-sh__close {
  grid-area: close;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 1px solid rgb(120 140 255 / 30%);
  border-radius: 2px;
  background: transparent;
  color: #fff;
  font-size: 20px;
  cursor: pointer;
}
.gs-sh__close:hover, .gs-sh__close:focus-visible { border-color: #e03cff; box-shadow: 0 0 12px rgb(224 60 255 / 40%); outline: none; }

.gs-sh__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 16px;
  padding: 18px 22px 22px;
  overflow-y: auto;
}
.gs-sh__msg { grid-column: 1 / -1; margin: 30px 0; text-align: center; color: rgb(215 222 255 / 70%); }
.gs-sh__empty { grid-column: 1 / -1; display: grid; gap: 8px; place-items: center; text-align: center; padding: 50px 20px; }
.gs-sh__empty b { font: 700 16px/1 "Orbitron", system-ui, sans-serif; letter-spacing: .08em; color: #fff; }
.gs-sh__empty span { max-width: 36em; color: rgb(215 222 255 / 75%); }
.gs-sh__empty em { font-style: normal; color: #a9f3ff; }

.gs-sh__card {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 14px;
  padding: 12px;
  border: 1px solid rgb(34 228 255 / 35%);
  border-radius: 2px;
  background: rgb(10 8 30 / 70%);
  box-shadow: 0 0 12px rgb(34 228 255 / 10%);
}
.gs-sh__card--alt { border-color: rgb(224 60 255 / 35%); box-shadow: 0 0 12px rgb(224 60 255 / 10%); }
.gs-sh__art { position: relative; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 2px; background: #07061a; }
.gs-sh__art > img:first-child { width: 100%; height: 100%; object-fit: cover; display: block; }
.gs-sh__cover {
  position: absolute;
  right: 4px;
  bottom: 4px;
  width: 30%;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  border: 1px solid rgb(255 255 255 / 40%);
  border-radius: 2px;
  box-shadow: 0 4px 10px rgb(0 0 0 / 60%);
}
.gs-sh__body { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.gs-sh__body h3 {
  margin: 0;
  font: 700 15px/1.25 "Exo 2", system-ui, sans-serif;
  color: #fff;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.gs-sh__meta, .gs-sh__counts { margin: 0; font-size: 12.5px; color: rgb(215 222 255 / 65%); }
.gs-sh__actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; padding-top: 6px; }
.gs-sh__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid rgb(120 140 255 / 30%);
  border-radius: 2px;
  background: rgb(5 4 15 / 70%);
  color: #fff !important;
  font: 600 13px/1 "Exo 2", system-ui, sans-serif;
  text-decoration: none;
  cursor: pointer;
}
.gs-sh__btn:hover, .gs-sh__btn:focus-visible { border-color: #22e4ff; box-shadow: 0 0 12px rgb(34 228 255 / 35%); outline: none; }
.gs-sh__btn--primary {
  border-color: transparent;
  background-image: linear-gradient(180deg, rgb(255 255 255 / 14%) 0%, rgb(255 255 255 / 4%) 48%, transparent 50%), linear-gradient(90deg, #22e4ff, #4f7bff 45%, #e03cff);
  font-family: "Orbitron", system-ui, sans-serif;
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-shadow: 0 1px 2px rgb(0 0 0 / 45%);
}
.gs-sh__list { grid-column: 1 / -1; list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 4px; }
.gs-sh__list li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-left: 2px solid rgb(120 140 255 / 30%);
  background: rgb(5 4 15 / 50%);
  font-size: 12.5px;
}
.gs-sh__kind { font: 700 10px/1.4 "Orbitron", system-ui, sans-serif; letter-spacing: .08em; text-transform: uppercase; padding: 1px 5px; border-radius: 2px; }
.gs-sh__kind--state { color: #a9f3ff; border: 1px solid rgb(34 228 255 / 45%); }
.gs-sh__kind--save { color: #f3b3ff; border: 1px solid rgb(224 60 255 / 45%); }
.gs-sh__when { flex: 1; min-width: 0; color: rgb(215 222 255 / 75%); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gs-sh__mini { color: #a9f3ff !important; text-decoration: none; font-weight: 600; }
.gs-sh__mini:hover { text-decoration: underline; }
@media (width < 700px) {
  .gs-sh__head { grid-template-columns: 1fr auto; grid-template-areas: "title close" "sub sub" "filter filter"; }
  .gs-sh__card { grid-template-columns: 110px 1fr; }
  .gs-sh__grid { grid-template-columns: 1fr; }
}

/* controller.css */
/* GS - GameScape Online: controller setup wizard (see controller.js) */
.gs-pad {
  position: fixed;
  inset: 0;
  z-index: 2450;
  display: grid;
  place-items: center;
  padding: 16px;
  background: rgb(3 2 10 / 72%);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.gs-pad[hidden] { display: none; }
.gs-pad__panel {
  width: min(620px, 100%);
  max-height: 100%;
  overflow-y: auto;
  border: 1px solid rgb(34 228 255 / 45%);
  border-radius: 3px;
  background-image:
    linear-gradient(180deg, rgb(255 255 255 / 10%) 0%, rgb(255 255 255 / 3%) 10%, transparent 11%),
    linear-gradient(180deg, rgb(16 12 44 / 97%), rgb(6 5 20 / 98%));
  box-shadow: 0 0 30px rgb(34 228 255 / 18%), 0 30px 80px rgb(0 0 0 / 70%);
  color: #e8ecff;
  font-family: "Exo 2", system-ui, sans-serif;
}
.gs-pad__head { display: flex; align-items: center; padding: 18px 20px; border-bottom: 1px solid rgb(120 140 255 / 20%); }
.gs-pad__head h2 { margin: 0; font: 800 19px/1 "Orbitron", system-ui, sans-serif; letter-spacing: .06em; color: #fff; text-shadow: 0 0 14px rgb(34 228 255 / 45%); }
.gs-pad__close {
  margin-left: auto; width: 38px; height: 38px; display: grid; place-items: center;
  border: 1px solid rgb(120 140 255 / 30%); border-radius: 2px; background: transparent; color: #fff; font-size: 20px; cursor: pointer;
}
.gs-pad__close:hover, .gs-pad__close:focus-visible { border-color: #e03cff; outline: none; box-shadow: 0 0 12px rgb(224 60 255 / 40%); }
.gs-pad__body { display: grid; gap: 14px; padding: 20px; text-align: center; }
.gs-pad__big { font-size: 64px; filter: drop-shadow(0 0 16px rgb(34 228 255 / 60%)); animation: gs-pad-bob 2s ease-in-out infinite; }
.gs-pad__lead { margin: 0; font-size: 16px; color: #fff; }
.gs-pad__hint { margin: 0; font-size: 13px; color: rgb(215 222 255 / 65%); }
.gs-pad__step { margin: 0; font: 700 11px/1 "Orbitron", system-ui, sans-serif; letter-spacing: .2em; text-transform: uppercase; color: #a9f3ff; }
.gs-pad__target {
  justify-self: center;
  min-width: 180px;
  padding: 18px 28px;
  border: 2px solid #22e4ff;
  border-radius: 3px;
  font: 800 34px/1 "Orbitron", system-ui, sans-serif;
  color: #fff;
  text-shadow: 0 0 16px rgb(34 228 255 / 70%);
  box-shadow: 0 0 24px rgb(34 228 255 / 35%), inset 0 0 18px rgb(224 60 255 / 20%);
  animation: gs-pad-pulse 1.4s ease-in-out infinite;
}
.gs-pad__info { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; }
.gs-pad__info b { width: 100%; font-size: 15px; color: #fff; }
.gs-pad__tag { padding: 3px 8px; border: 1px solid rgb(224 60 255 / 50%); border-radius: 2px; font-size: 12px; color: #f3b3ff; }
.gs-pad__tag.ok { border-color: rgb(34 228 255 / 55%); color: #a9f3ff; }
.gs-pad__grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 6px; }
.gs-pad__key {
  padding: 10px 0;
  border: 1px solid rgb(120 140 255 / 30%);
  border-radius: 2px;
  background: rgb(5 4 15 / 70%);
  font: 700 12px/1 "Orbitron", system-ui, sans-serif;
  color: rgb(215 222 255 / 70%);
  transition: background .08s, box-shadow .08s, color .08s;
}
.gs-pad__key.on { background: linear-gradient(90deg, #22e4ff, #e03cff); color: #fff; box-shadow: 0 0 14px rgb(34 228 255 / 60%); border-color: transparent; }
.gs-pad__sticks { display: flex; justify-content: center; gap: 30px; }
.gs-pad__stick { position: relative; width: 70px; height: 70px; border: 1px solid rgb(120 140 255 / 35%); border-radius: 50% !important; display: grid; place-items: center; }
.gs-pad__stick i { width: 18px; height: 18px; border-radius: 50% !important; background: #22e4ff; box-shadow: 0 0 10px #22e4ff; }
.gs-pad__stick small { position: absolute; bottom: -18px; font-size: 11px; color: rgb(215 222 255 / 60%); white-space: nowrap; }
.gs-pad__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 10px; }
.gs-pad__btn {
  display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 16px;
  border: 1px solid rgb(120 140 255 / 30%); border-radius: 2px; background: rgb(5 4 15 / 70%);
  color: #fff; font: 600 14px/1 "Exo 2", system-ui, sans-serif; cursor: pointer;
}
.gs-pad__btn:hover, .gs-pad__btn:focus-visible { border-color: #22e4ff; box-shadow: 0 0 12px rgb(34 228 255 / 35%); outline: none; }
.gs-pad__btn--primary {
  border-color: transparent;
  background-image: linear-gradient(180deg, rgb(255 255 255 / 14%) 0%, rgb(255 255 255 / 4%) 48%, transparent 50%), linear-gradient(90deg, #22e4ff, #4f7bff 45%, #e03cff);
  font-family: "Orbitron", system-ui, sans-serif; font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase;
}
.gs-pad__bar { height: 4px; background: rgb(255 255 255 / 10%); }
.gs-pad__bar i { display: block; height: 100%; background: linear-gradient(90deg, #22e4ff, #e03cff); transition: width .2s; }
.gs-pad__summary { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px 16px; text-align: left; }
.gs-pad__summary li { display: flex; justify-content: space-between; gap: 10px; padding: 5px 8px; border-left: 2px solid rgb(34 228 255 / 45%); background: rgb(5 4 15 / 50%); font-size: 13px; }
.gs-pad__summary b { color: #fff; }
.gs-pad__summary span { color: #a9f3ff; }
@keyframes gs-pad-bob { 50% { transform: translateY(-6px); } }
@keyframes gs-pad-pulse { 50% { box-shadow: 0 0 34px rgb(34 228 255 / 55%), inset 0 0 18px rgb(224 60 255 / 30%); } }
@media (width < 520px) { .gs-pad__grid { grid-template-columns: repeat(4, 1fr); } .gs-pad__summary { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .gs-pad__big, .gs-pad__target { animation: none; } }