/* ==========================================================================
   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.
   ========================================================================== */

@import url(/gamescape/fonts.css);

: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; }