@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')}

/* themes.css */
/* MediaScape: colour themes. A member picks one (theme-pick.js); the choice is the data-theme attribute of <html>.
   The stylesheets name the theme's colours as rgb(var(--k-cy, 34 228 255)): three numbers per colour, so one colour
   serves at every strength. What is written after the comma is the Retro Neon look the site began with, used where a
   theme sets nothing. scripts/theme-vars.py turns newly written colours into these names.

     --k-bg0 .. --k-bg5   the page, darkest first (bg5 is the soft light behind a page)
     --k-cy  --k-cy-hi    the main colour: links, edges, buttons that are switched on; and its light tint
     --k-bl               the second colour (the middle of a gradient)
     --k-mg  --k-mg-hi    the third colour (the end of a gradient, badges); and its light tint
     --k-vi  --k-vi-hi    between the second and the third
     --k-ln               thin lines and edges
     --k-tx               text that is not plain white
     --k-fd               the letters of titles and buttons                                                      */

/* Text that stands on the main colour (a button that is the one to press, a count in a badge): dark in every theme.
   White on the bright colours was hard to read. */
:root { --k-on: 8 10 16; }
:root .gsx-btn--primary, :root .gsx-welcome__next, :root.gsx-auth .gsx-cta__main, :root .r-v2-auth .r-btn[type="submit"], :root.r-v2 .r-v2-game-btn--emphasized,
:root .gs-homebar__set, :root .gm-btn--primary, :root .hw-btn--main, :root .dl-btn--main, :root .cn-btn--go, :root .cs-btn--primary, :root .gs-sh__btn--primary,
:root .gs-pad__btn--primary, :root .gs-pad__key.on, :root .gst-banner .gsl-send, :root .gse-card.is-live .gse-until, :root .gsl-badge, :root .gsl-navbadge,
:root .gsl-count, :root .cs-badge, :root .ms-on, :root .dn-btn--primary {
  color: rgb(var(--k-on)) !important; text-shadow: none !important; -webkit-text-fill-color: currentColor;
}
:root .gsx-btn--primary .mdi, :root .gs-homebar__set .mdi, :root .gm-btn--primary .mdi, :root .cs-btn--primary .mdi, :root .hw-btn--main .mdi, :root .dl-btn--main .mdi,
:root .cn-btn--go .mdi, :root.r-v2 .r-v2-game-btn--emphasized .mdi, :root .r-v2-auth .r-btn[type="submit"] * { color: inherit !important; filter: none !important; }

/* a main button that cannot be pressed yet (the sign-in form is still empty) is faint, so its letters are light */
:root .r-v2-auth .r-btn[type="submit"].r-btn--disabled, :root .r-v2-auth .r-btn[type="submit"]:disabled { color: rgb(255 255 255 / 78%) !important; }

/* the main button of the Home page is filled, like the other main buttons */
:root .gsx-btn--primary { background-image: var(--gs-gloss, none), var(--gs-gradient) !important; }
/* the name is MediaScape: no "ONLINE" under the logo of RomM's own sign-in card */
:root .r-v2-auth .auth-card__logo::after { content: none; }
:root .r-v2-auth .auth-card__logo { aspect-ratio: 951 / 190; }

/* the icon and the name at the top left of RomM's pages, by an address of their own: a browser that still holds the
   old GAMESCAPE lettering under RomM's address shows the new one at once */
:root .r-v2-nav__logo-mark img { content: url(/gamescape/mediascape-icon.svg?v=2); }
:root .r-v2-nav__logo-word img { content: url(/gamescape/wordmark-text.png?v=2); object-fit: contain !important; }

/* MediaScape (the one every member starts with): slate and one calm blue */
:root, :root[data-theme="mediascape"] {
  --k-bg0: 9 11 16; --k-bg1: 13 16 23; --k-bg2: 18 22 31; --k-bg3: 24 29 41; --k-bg4: 31 38 54; --k-bg5: 27 37 64;
  --k-cy: 106 168 255; --k-cy-hi: 196 220 255; --k-bl: 86 144 250; --k-mg: 132 146 255; --k-mg-hi: 214 220 255;
  --k-vi: 112 140 255; --k-vi-hi: 226 232 248; --k-ln: 148 163 184; --k-tx: 226 232 240;
  --k-fd: "Exo 2", "Segoe UI", system-ui;
  --k-name: "MediaScape";
}
/* Cinema: black with warm amber, like the lights going down */
:root[data-theme="cinema"] {
  --k-bg0: 7 7 7; --k-bg1: 12 11 10; --k-bg2: 18 17 15; --k-bg3: 26 24 21; --k-bg4: 36 32 27; --k-bg5: 48 34 18;
  --k-cy: 245 184 80; --k-cy-hi: 252 226 170; --k-bl: 240 150 60; --k-mg: 232 96 70; --k-mg-hi: 255 214 200;
  --k-vi: 236 124 64; --k-vi-hi: 250 236 222; --k-ln: 168 152 132; --k-tx: 240 234 224;
  --k-fd: "Exo 2", "Segoe UI", system-ui;
}
/* Emerald: deep green, easy on the eyes */
:root[data-theme="emerald"], :root[data-theme="emerald-light"] {
  --k-bg0: 6 12 11; --k-bg1: 9 17 16; --k-bg2: 13 24 22; --k-bg3: 18 32 30; --k-bg4: 24 43 40; --k-bg5: 16 56 48;
  --k-cy: 74 222 168; --k-cy-hi: 190 245 222; --k-bl: 45 196 170; --k-mg: 132 214 90; --k-mg-hi: 216 244 196;
  --k-vi: 80 205 140; --k-vi-hi: 226 244 236; --k-ln: 128 168 156; --k-tx: 224 238 232;
  --k-fd: "Exo 2", "Segoe UI", system-ui;
}
/* Midnight: deep navy with starlight gold */
:root[data-theme="midnight"] {
  --k-bg0: 6 9 20; --k-bg1: 9 13 28; --k-bg2: 13 18 38; --k-bg3: 18 25 52; --k-bg4: 25 34 68; --k-bg5: 30 40 84;
  --k-cy: 246 205 110; --k-cy-hi: 252 234 184; --k-bl: 226 178 96; --k-mg: 150 170 240; --k-mg-hi: 216 224 252;
  --k-vi: 190 176 190; --k-vi-hi: 236 234 244; --k-ln: 140 152 196; --k-tx: 226 230 246;
  --k-fd: "Exo 2", "Segoe UI", system-ui;
}
/* Crimson: charcoal with deep red */
:root[data-theme="crimson"] {
  --k-bg0: 10 7 8; --k-bg1: 15 11 12; --k-bg2: 22 16 17; --k-bg3: 31 22 24; --k-bg4: 43 29 32; --k-bg5: 62 24 30;
  --k-cy: 244 96 108; --k-cy-hi: 252 198 202; --k-bl: 226 72 88; --k-mg: 246 150 96; --k-mg-hi: 252 220 200;
  --k-vi: 236 110 100; --k-vi-hi: 248 232 232; --k-ln: 176 140 144; --k-tx: 242 230 230;
  --k-fd: "Exo 2", "Segoe UI", system-ui;
}
/* Ocean: deep sea blue with aqua */
:root[data-theme="ocean"], :root[data-theme="ocean-light"] {
  --k-bg0: 4 12 18; --k-bg1: 6 17 26; --k-bg2: 9 24 36; --k-bg3: 12 33 49; --k-bg4: 17 45 66; --k-bg5: 12 58 84;
  --k-cy: 64 208 232; --k-cy-hi: 186 238 248; --k-bl: 56 168 226; --k-mg: 96 226 190; --k-mg-hi: 204 246 234;
  --k-vi: 76 196 214; --k-vi-hi: 224 242 248; --k-ln: 120 164 186; --k-tx: 222 236 244;
  --k-fd: "Exo 2", "Segoe UI", system-ui;
}
/* Sunset: warm plum with orange and pink */
:root[data-theme="sunset"] {
  --k-bg0: 14 8 14; --k-bg1: 20 12 20; --k-bg2: 28 17 28; --k-bg3: 39 23 37; --k-bg4: 54 31 49; --k-bg5: 78 36 52;
  --k-cy: 255 158 92; --k-cy-hi: 255 218 186; --k-bl: 250 124 104; --k-mg: 240 104 160; --k-mg-hi: 252 206 226;
  --k-vi: 246 116 132; --k-vi-hi: 250 232 236; --k-ln: 184 148 160; --k-tx: 246 232 232;
  --k-fd: "Exo 2", "Segoe UI", system-ui;
}
/* Graphite: neutral greys, no colour but a touch of white */
:root[data-theme="graphite"], :root[data-theme="graphite-light"] {
  --k-bg0: 10 10 11; --k-bg1: 16 16 18; --k-bg2: 23 23 26; --k-bg3: 32 32 36; --k-bg4: 44 44 49; --k-bg5: 40 40 46;
  --k-cy: 226 228 234; --k-cy-hi: 246 247 250; --k-bl: 190 194 204; --k-mg: 150 156 170; --k-mg-hi: 226 228 236;
  --k-vi: 172 176 188; --k-vi-hi: 238 239 243; --k-ln: 150 152 160; --k-tx: 232 232 236;
  --k-fd: "Exo 2", "Segoe UI", system-ui;
}
/* Lavender: dusk violet with soft lilac */
:root[data-theme="lavender"], :root[data-theme="lavender-light"] {
  --k-bg0: 13 10 18; --k-bg1: 17 14 24; --k-bg2: 25 22 32; --k-bg3: 35 32 41; --k-bg4: 47 44 53; --k-bg5: 48 42 67;
  --k-cy: 183 156 255; --k-cy-hi: 230 220 255; --k-bl: 154 132 240; --k-mg: 240 168 224; --k-mg-hi: 250 229 246;
  --k-vi: 143 180 255; --k-vi-hi: 233 240 255; --k-ln: 132 123 161; --k-tx: 233 228 246;
  --k-fd: "Exo 2", "Segoe UI", system-ui;
}
/* Arctic: cold blue-grey with ice white */
:root[data-theme="arctic"] {
  --k-bg0: 8 12 16; --k-bg1: 11 16 22; --k-bg2: 20 24 30; --k-bg3: 29 34 39; --k-bg4: 42 46 51; --k-bg5: 41 53 65;
  --k-cy: 191 230 255; --k-cy-hi: 233 246 255; --k-bl: 140 196 240; --k-mg: 168 240 230; --k-mg-hi: 229 250 248;
  --k-vi: 154 176 216; --k-vi-hi: 235 239 247; --k-ln: 125 144 160; --k-tx: 234 241 246;
  --k-fd: "Exo 2", "Segoe UI", system-ui;
}
/* Copper: dark teal with warm copper */
:root[data-theme="copper"] {
  --k-bg0: 6 12 11; --k-bg1: 8 16 15; --k-bg2: 17 24 23; --k-bg3: 27 34 33; --k-bg4: 39 46 45; --k-bg5: 51 43 33;
  --k-cy: 240 160 96; --k-cy-hi: 250 222 199; --k-bl: 224 128 72; --k-mg: 88 200 184; --k-mg-hi: 205 238 234;
  --k-vi: 216 176 112; --k-vi-hi: 247 239 226; --k-ln: 150 123 105; --k-tx: 242 229 218;
  --k-fd: "Exo 2", "Segoe UI", system-ui;
}
/* Royal: deep purple with gold */
:root[data-theme="royal"] {
  --k-bg0: 11 8 18; --k-bg1: 15 10 24; --k-bg2: 23 19 32; --k-bg3: 33 28 41; --k-bg4: 45 41 53; --k-bg5: 55 44 38;
  --k-cy: 242 201 76; --k-cy-hi: 250 236 192; --k-bl: 216 168 56; --k-mg: 180 140 240; --k-mg-hi: 232 220 250;
  --k-vi: 230 176 240; --k-vi-hi: 250 239 252; --k-ln: 150 133 103; --k-tx: 243 236 215;
  --k-fd: "Exo 2", "Segoe UI", system-ui;
}
/* Lime: near black with lime and yellow */
:root[data-theme="lime"] {
  --k-bg0: 8 10 6; --k-bg1: 10 13 8; --k-bg2: 19 21 17; --k-bg3: 28 31 27; --k-bg4: 41 43 39; --k-bg5: 40 53 24;
  --k-cy: 182 240 60; --k-cy-hi: 229 250 187; --k-bl: 143 214 44; --k-mg: 240 224 64; --k-mg-hi: 250 246 198;
  --k-vi: 90 214 160; --k-vi-hi: 222 247 236; --k-ln: 126 149 93; --k-tx: 233 242 212;
  --k-fd: "Exo 2", "Segoe UI", system-ui;
}
/* Rose Gold: dark mauve with rose gold and cream */
:root[data-theme="rosegold"] {
  --k-bg0: 15 10 12; --k-bg1: 20 14 16; --k-bg2: 28 22 24; --k-bg3: 38 32 34; --k-bg4: 49 44 46; --k-bg5: 61 44 44;
  --k-cy: 240 176 160; --k-cy-hi: 250 227 222; --k-bl: 224 144 136; --k-mg: 244 216 184; --k-mg-hi: 252 243 234;
  --k-vi: 216 152 184; --k-vi-hi: 247 234 241; --k-ln: 155 127 126; --k-tx: 243 232 229;
  --k-fd: "Exo 2", "Segoe UI", system-ui;
}
/* Cobalt: deep blue with electric blue */
:root[data-theme="cobalt"] {
  --k-bg0: 5 8 20; --k-bg1: 7 11 26; --k-bg2: 16 20 34; --k-bg3: 26 29 43; --k-bg4: 38 42 55; --k-bg5: 25 37 69;
  --k-cy: 92 156 255; --k-cy-hi: 198 220 255; --k-bl: 60 120 244; --k-mg: 124 224 255; --k-mg-hi: 216 246 255;
  --k-vi: 140 140 255; --k-vi-hi: 232 232 255; --k-ln: 98 118 163; --k-tx: 217 228 246;
  --k-fd: "Exo 2", "Segoe UI", system-ui;
}
/* Desert: dark earth with sand and terracotta */
:root[data-theme="desert"], :root[data-theme="desert-light"] {
  --k-bg0: 14 10 8; --k-bg1: 18 14 10; --k-bg2: 26 22 19; --k-bg3: 36 32 28; --k-bg4: 48 44 41; --k-bg5: 58 46 34;
  --k-cy: 232 200 144; --k-cy-hi: 247 236 216; --k-bl: 216 160 104; --k-mg: 224 120 80; --k-mg-hi: 246 214 202;
  --k-vi: 200 176 112; --k-vi-hi: 244 239 226; --k-ln: 151 132 113; --k-tx: 242 236 226;
  --k-fd: "Exo 2", "Segoe UI", system-ui;
}
/* Aurora: night sky with green and violet */
:root[data-theme="aurora"] {
  --k-bg0: 6 9 15; --k-bg1: 8 12 20; --k-bg2: 17 21 28; --k-bg3: 27 30 38; --k-bg4: 39 42 49; --k-bg5: 27 51 59;
  --k-cy: 94 240 176; --k-cy-hi: 199 250 227; --k-bl: 72 200 216; --k-mg: 176 136 255; --k-mg-hi: 231 219 255;
  --k-vi: 120 168 255; --k-vi-hi: 228 238 255; --k-ln: 102 144 152; --k-tx: 217 242 232;
  --k-fd: "Exo 2", "Segoe UI", system-ui;
}
/* Terminal: black with amber, like an old monitor */
:root[data-theme="terminal"] {
  --k-bg0: 7 6 4; --k-bg1: 9 8 6; --k-bg2: 18 17 15; --k-bg3: 27 27 25; --k-bg4: 40 39 37; --k-bg5: 53 40 15;
  --k-cy: 255 176 0; --k-cy-hi: 255 227 166; --k-bl: 232 152 0; --k-mg: 255 208 96; --k-mg-hi: 255 241 207;
  --k-vi: 200 138 32; --k-vi-hi: 244 232 210; --k-ln: 153 128 79; --k-tx: 245 232 201;
  --k-fd: "Exo 2", "Segoe UI", system-ui;
}
/* Sakura: soft pink and mint on dark plum */
:root[data-theme="sakura"], :root[data-theme="sakura-light"] {
  --k-bg0: 14 9 13; --k-bg1: 20 13 19; --k-bg2: 28 19 27; --k-bg3: 38 26 37; --k-bg4: 52 36 50; --k-bg5: 70 40 62;
  --k-cy: 255 158 196; --k-cy-hi: 255 220 234; --k-bl: 244 132 180; --k-mg: 140 226 196; --k-mg-hi: 214 246 234;
  --k-vi: 226 150 214; --k-vi-hi: 248 232 244; --k-ln: 186 152 174; --k-tx: 246 232 240;
  --k-fd: "Exo 2", "Segoe UI", system-ui;
}
/* Retro Neon: the look the site began with. Nothing is set, so every colour is the one written in the stylesheets. */
:root[data-theme="retro"] {
  --k-bg0: initial; --k-bg1: initial; --k-bg2: initial; --k-bg3: initial; --k-bg4: initial; --k-bg5: initial;
  --k-cy: initial; --k-cy-hi: initial; --k-bl: initial; --k-mg: initial; --k-mg-hi: initial;
  --k-vi: initial; --k-vi-hi: initial; --k-ln: initial; --k-tx: initial; --k-fd: initial;
}

/* The picker: a card per theme, each painted in its own colours */
.ms-themes { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin: 0; padding: 0; }
.ms-theme { display: block; padding: 0; border: 2px solid rgb(255 255 255 / 16%); border-radius: 6px; background: var(--t-bg); color: #fff; cursor: pointer; text-align: left; overflow: hidden; font: 600 13px/1.2 "Exo 2", "Segoe UI", system-ui, sans-serif; }
.ms-theme:hover, .ms-theme:focus-visible { border-color: rgb(255 255 255 / 55%); outline: none; }
.ms-theme[aria-pressed="true"] { border-color: #fff; box-shadow: 0 0 0 2px var(--t-a); }
.ms-theme__art { display: block; height: 54px; background: linear-gradient(90deg, var(--t-a), var(--t-b) 55%, var(--t-c)); }
.ms-theme__name { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 9px 10px 3px; }
.ms-theme__name i { font-style: normal; font-size: 11px; opacity: .8; }
.ms-theme__what { display: block; padding: 0 10px 10px; font-weight: 400; font-size: 12px; opacity: .72; }
.ms-themebox { position: fixed; inset: 0; z-index: 100000; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgb(0 0 0 / 66%); }
.ms-themebox__card { width: min(860px, 100%); max-height: 92vh; overflow: auto; padding: 18px; border: 1px solid rgb(var(--k-ln, 120 140 255) / 40%); border-radius: 6px; background: rgb(var(--k-bg2, 10 8 30)); color: #fff; font: 400 14px/1.45 "Exo 2", "Segoe UI", system-ui, sans-serif; }
.ms-themebox__card h2 { margin: 0 0 4px; font: 700 19px/1.2 var(--k-fd, "Orbitron"), sans-serif; }
.ms-themebox__card p { margin: 0 0 14px; color: rgb(var(--k-tx, 215 222 255) / 75%); }
.ms-themebox__foot { display: flex; justify-content: flex-end; margin-top: 14px; }
.ms-themebox__foot button { padding: 9px 18px; border: 0; border-radius: 4px; background: rgb(var(--k-cy, 34 228 255)); color: #0a0c12; font: 700 14px/1 "Exo 2", "Segoe UI", system-ui, sans-serif; cursor: pointer; }

/* BETA: a red tag on the MediaScape logo */
:root .r-v2-nav__logo-word { position: relative; overflow: visible; }
:root .r-v2-nav__logo-word::after { content: "BETA"; position: absolute; right: -6px; top: -7px; padding: 2px 5px 1px; border: 2px solid #ef2b2b; border-radius: 4px; background: rgb(20 4 6 / 88%); color: #ff4a4a; font: 900 9px/1 "Exo 2", sans-serif; letter-spacing: .16em; transform: rotate(-7deg); pointer-events: none; }

/* Phones: the top bar's row of places scrolls inside itself; the page never scrolls sideways */
@media (max-width: 900px) {
  body { overflow-x: clip; }
  :root .r-v2-nav-bar, :root .r-v2-nav, :root .r-v2-bg, :root .r-v2-bg__overlay { max-width: 100vw; }
  :root .r-v2-nav { overflow-x: auto; scrollbar-width: none; }
  :root .r-v2-nav::-webkit-scrollbar { display: none; }
}

/* ---- Light themes -----------------------------------------------------------------------------------------
   A light theme is its dark partner turned over: every surface and every letter is inverted and the hues are turned
   back, so dark panels become light ones, white text becomes dark text and the accent keeps its colour. Pictures,
   films, games and the Messenger (which has skins of its own) are turned back so they look as they are. This reaches
   every page at once, RomM's own included. */
:root[data-theme$="-light"] { filter: invert(1) hue-rotate(180deg); }
:root[data-theme$="-light"] :is(img, video, canvas, picture, iframe, .ms-theme, .ms-rep, .gs-rc-bar), :root[data-theme$="-light"] .ym > * { filter: invert(1) hue-rotate(180deg) !important; }
/* the red BETA stamps and tick boxes keep their own colours (a tick box turned over is a black square) */
:root[data-theme$="-light"] :is(.gs-beta, .gsx-beta, .cs-beta, .ad-beta, input[type="checkbox"], input[type="radio"]) { filter: invert(1) hue-rotate(180deg) !important; }
:root[data-theme$="-light"] .ym :is(img, video, canvas, input[type="checkbox"], input[type="radio"]) { filter: none !important; }
/* a picture that is greyed out (a scape not set up, its owner away, a closed store) stays grey, a little lighter than on the dark themes */
:root[data-theme$="-light"] :is(.gs-street__front.is-unset, .gs-street__front.is-away, .cs-front.is-unset, .cs-front.is-away) img,
:root[data-theme$="-light"] :is(.gs-street__front, .sh-front, .cs-front) img.is-off { filter: grayscale(1) brightness(.85) invert(1) hue-rotate(180deg) !important; }
/* the name beside the icon is white lettering: it stays turned over, so it reads dark on the light bar */
:root[data-theme$="-light"] :is(.r-v2-nav__logo-word img, .hw-logo, .gsx-logo img, .logo) { filter: none !important; }
:root[data-theme$="-light"] .gm-storehead::before { filter: blur(16px) brightness(.4) saturate(1.2) invert(1) hue-rotate(180deg); }
:root[data-theme$="-light"] .gm-storehead::after { filter: drop-shadow(0 0 22px rgb(0 0 0 / 70%)) invert(1) hue-rotate(180deg); }

/* a light theme's card in the picker has dark lettering on its light ground */
.ms-theme--light { color: #14161c; border-color: rgb(0 0 0 / 22%); } .ms-theme--light .ms-theme__what { color: rgb(20 22 28 / 75%); }

/* 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: rgb(var(--k-cy, 34 228 255));
  --gs-blue: rgb(var(--k-bl, 79 123 255));
  --gs-violet: rgb(var(--k-vi, 139 61 255));
  --gs-magenta: rgb(var(--k-mg, 224 60 255));
  --gs-pink: rgb(var(--k-mg, 255 62 207));
  --gs-ink: rgb(var(--k-bg1, 5 4 15));
  --gs-ink-2: rgb(var(--k-bg2, 10 8 32));
  --gs-gradient: linear-gradient(90deg, var(--gs-cyan) 0%, var(--gs-blue) 45%, var(--gs-magenta) 100%);
  --gs-glow-cyan: 0 0 12px rgb(var(--k-cy, 34 228 255) / 45%);
  --gs-glow-magenta: 0 0 14px rgb(var(--k-mg, 224 60 255) / 50%);
  --gs-wallpaper: url(/gamescape/wallpaper.webp?v=2);
}

/* ---- Brand tokens (both themes) --------------------------------------- */
html.r-v2 {
  --r-color-brand-primary: rgb(var(--k-vi, 192 77 255));
  --r-color-brand-primary-hover: rgb(var(--k-vi, 214 128 255));
  --r-color-brand-primary-pressed: rgb(var(--k-vi, 143 47 224));
  --r-color-brand-secondary: rgb(var(--k-cy, 34 211 238));
  --r-color-brand-secondary-hover: rgb(var(--k-cy-hi, 140 240 255));
  --r-color-brand-secondary-pressed: rgb(var(--k-cy, 14 165 198));
  --r-color-brand-accent: rgb(var(--k-mg, 255 62 207));
  --r-color-brand-accent-hover: rgb(var(--k-mg, 255 138 227));
  --r-color-avatar-gradient: linear-gradient(135deg, var(--gs-cyan), var(--gs-magenta));
  --r-color-info: rgb(var(--k-cy, 125 211 252));
  --r-font-family-display: var(--k-fd, "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: rgb(var(--k-bg1, 5 4 15));
  --r-color-bg-elevated: rgb(var(--k-ln, 120 110 255) / 5%);
  --r-color-surface: rgb(var(--k-ln, 130 120 255) / 8%);
  --r-color-surface-hover: rgb(var(--k-vi, 150 120 255) / 15%);
  --r-color-border: rgb(var(--k-ln, 120 140 255) / 14%);
  --r-color-border-strong: rgb(var(--k-vi, 160 120 255) / 30%);
  --r-color-focus: rgb(var(--k-cy, 34 228 255) / 70%);
  --r-color-panel: rgb(var(--k-bg2, 10 8 30) / 96%);
  --r-color-panel-border: rgb(var(--k-vi, 140 110 255) / 28%);
  --r-color-tooltip-bg: rgb(var(--k-bg1, 6 5 20) / 95%);
  --r-color-tooltip-border: rgb(var(--k-cy, 34 228 255) / 25%);
  --r-color-cover-placeholder: rgb(var(--k-bg3, 18 14 46));
  --r-color-cover-placeholder-bright: rgb(var(--k-bg4, 29 23 71));
  --r-color-auth-glass: rgb(var(--k-bg2, 8 6 26) / 72%);
  --r-color-toast-bg: rgb(var(--k-bg2, 8 6 26) / 94%);
  --r-color-canvas-bg-deep: rgb(var(--k-bg1, 5 4 15));
}

/* 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(var(--k-mg, 224 60 255) / 35%), 0 0 16px rgb(var(--k-vi, 192 77 255) / 30%);
}
html.r-v2 .r-btn--has-color:not(.r-btn--disabled):hover {
  box-shadow: 0 0 0 1px rgb(var(--k-cy, 34 228 255) / 55%), 0 0 20px rgb(var(--k-cy, 34 228 255) / 35%);
}
html.r-v2 :focus-visible {
  outline-color: var(--gs-cyan);
}
html.r-v2 ::selection {
  background: rgb(var(--k-vi, 192 77 255) / 45%);
}

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


/* ==========================================================================
   Login / setup / auth screens
   ========================================================================== */
html .r-v2-auth__bg {
  background-image:
    linear-gradient(to bottom, rgb(var(--k-bg1, 5 4 15) / 0%) 45%, rgb(var(--k-bg1, 5 4 15) / 88%) 72%, rgb(var(--k-bg1, 5 4 15) / 96%) 100%),
    radial-gradient(ellipse at 50% 45%, rgb(var(--k-bg1, 5 4 15) / 30%) 0%, rgb(var(--k-bg1, 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(var(--k-bg2, 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(var(--k-cy, 34 228 255) / 35%),
    0 0 28px rgb(var(--k-cy, 34 228 255) / 18%),
    0 0 60px rgb(var(--k-mg, 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(var(--k-vi, 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: var(--k-fd, "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(var(--k-cy, 34 228 255) / 80%), 0 0 16px rgb(var(--k-mg, 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(var(--k-tx, 200 210 255) / 55%); }
html .r-v2-auth .r-text-field__underline {
  background: linear-gradient(90deg, rgb(var(--k-cy, 34 228 255) / 40%), rgb(var(--k-mg, 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, rgb(var(--k-bg4, 20 12 58)) 0%, rgb(var(--k-bg1, 5 4 15)) 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(var(--k-vi, 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(var(--k-tx, 235 238 255) / 85%);
  --r-color-fg-muted: rgb(var(--k-tx, 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(var(--k-bg2, 10 8 30) / 97%), rgb(var(--k-bg1, 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(var(--k-vi, 160 90 255) / 25%);
}
html.r-v2 .r-v2-nav__logo-word {
  width: 150px !important;
  filter: drop-shadow(0 0 6px rgb(var(--k-vi, 160 90 255) / 50%));
}
html.r-v2 .r-v2-nav__logo-mark { filter: drop-shadow(0 0 6px rgb(var(--k-cy, 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(var(--k-vi, 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: var(--k-fd, "Orbitron"), system-ui, sans-serif;
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgb(var(--k-tx, 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(var(--k-cy, 34 228 255) / 60%);
}

/* ---- Page & section headings ------------------------------------------ */
html.r-v2 h1 {
  font-family: var(--k-fd, "Orbitron"), system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: .03em;
  text-shadow: 0 0 18px rgb(var(--k-vi, 160 90 255) / 35%);
}
html.r-v2 h2,
html.r-v2 h3 {
  font-family: var(--k-fd, "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(var(--k-ln, 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(var(--k-mg, 224 60 255) / 60%), 0 0 22px rgb(var(--k-cy, 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(var(--k-bg4, 20 16 52) / 85%), rgb(var(--k-bg2, 8 6 26) / 90%)) !important;
  border: 1px solid rgb(var(--k-ln, 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(var(--k-cy, 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(var(--k-bg2, 10 8 30) / 96%), rgb(var(--k-bg1, 5 4 15) / 97%));
  border-right: 1px solid rgb(var(--k-ln, 120 140 255) / 18%);
  box-shadow: 6px 0 24px rgb(0 0 0 / 45%);
  font-family: "Segoe UI", system-ui, sans-serif;
  color: rgb(var(--k-tx, 232 235 255));
  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: var(--k-fd, "Orbitron"), system-ui, sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .24em;
  color: var(--gs-cyan);
  text-shadow: 0 0 8px rgb(var(--k-cy, 34 228 255) / 55%);
}
.gs-sb__toggle {
  all: unset;
  cursor: pointer;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 1px solid rgb(var(--k-ln, 120 140 255) / 25%);
  border-radius: 2px;
  color: rgb(var(--k-tx, 207 214 255));
  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(var(--k-ln, 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(var(--k-cy, 34 228 255) / 25%); }

.gs-sb__list {
  flex: 1;
  overflow-y: auto;
  padding: 2px 0 16px;
  scrollbar-width: thin;
  scrollbar-color: rgb(var(--k-vi, 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(var(--k-tx, 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(var(--k-tx, 230 234 255) / 85%);
  text-decoration: none;
  font-size: 13.5px;
  line-height: 1.2;
  cursor: pointer;
}
.gs-sb__item:hover { background: rgb(var(--k-ln, 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(var(--k-cy, 34 228 255) / 18%), rgb(var(--k-vi, 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(var(--k-tx, 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(var(--k-tx, 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(var(--k-cy, 34 228 255) / 35%), 0 0 18px rgb(var(--k-mg, 224 60 255) / 30%);
}
html.r-v2 .r-v2-game-btn--emphasized:hover {
  background: linear-gradient(90deg, rgb(var(--k-cy, 92 240 255)) 0%, rgb(var(--k-ln, 125 155 255)) 45%, rgb(var(--k-mg, 234 112 255)) 100%) !important;
  box-shadow: 0 0 20px rgb(var(--k-cy, 34 228 255) / 55%), 0 0 26px rgb(var(--k-mg, 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: var(--k-fd, "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(var(--k-cy, 34 228 255) / 16%) !important;
  box-shadow: inset 0 0 0 1px rgb(var(--k-cy, 34 228 255) / 65%), 0 0 12px rgb(var(--k-cy, 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%, rgb(var(--k-bg4, 20 14 56)) 0%, rgb(var(--k-bg2, 7 6 26)) 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(var(--k-ln, 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(var(--k-tx, 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: rgb(var(--k-vi, 192 77 255));
  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: rgb(var(--k-cy, 34 228 255));
  --r-color-status-base-success: rgb(var(--k-cy, 34 228 255));
  --r-color-warning: rgb(var(--k-mg, 255 62 207));
  --r-color-warning-fg: rgb(var(--k-mg, 255 126 224));
  --r-color-status-base-warning: rgb(var(--k-mg, 255 62 207));
  --r-color-danger: #ff2d7a;
  --r-color-danger-fg: #ff6fa3;
  --r-color-status-base-danger: #ff2d7a;
  --r-color-info: rgb(var(--k-bl, 79 123 255));
  --r-color-status-base-info: rgb(var(--k-bl, 79 123 255));
  --r-color-fav: rgb(var(--k-mg, 255 62 207));
  --r-color-romm-red: #ff2d7a;
  --r-color-romm-green: rgb(var(--k-cy, 34 228 255));
  --r-color-romm-blue: rgb(var(--k-bl, 79 123 255));
  --r-color-romm-gold: rgb(var(--k-mg, 224 60 255));
  --r-color-overlay-gold: rgb(var(--k-mg, 224 60 255));
  --r-color-emphasis: rgb(var(--k-cy, 34 228 255));
}
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(var(--k-bl, 79 123 255) / 6%) 1px, transparent 1px),
    linear-gradient(90deg, rgb(var(--k-bl, 79 123 255) / 6%) 1px, transparent 1px),
    linear-gradient(to right, rgb(var(--k-bg1, 5 4 15) / 72%) 0%, rgb(var(--k-bg1, 5 4 15) / 45%) 55%, rgb(var(--k-bg1, 5 4 15) / 65%) 100%),
    linear-gradient(to bottom, rgb(var(--k-bg1, 5 4 15) / 20%) 0%, rgb(var(--k-bg1, 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(var(--k-cy, 34 228 255) / 55%) !important;
  outline-offset: 0 !important;
  box-shadow: 0 0 12px rgb(var(--k-cy, 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(var(--k-mg, 224 60 255) / 55%) !important;
  box-shadow: 0 0 12px rgb(var(--k-mg, 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 rgb(var(--k-cy, 34 228 255)) !important;
  box-shadow: 0 0 0 1px rgb(var(--k-mg, 224 60 255) / 70%), 0 0 26px rgb(var(--k-cy, 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: rgb(var(--k-cy-hi, 169 243 255)) !important;
  text-shadow: 0 0 8px rgb(var(--k-cy, 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: rgb(var(--k-mg-hi, 243 179 255)) !important;
  text-shadow: 0 0 8px rgb(var(--k-mg, 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: var(--k-fd, "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(var(--k-cy, 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(var(--k-cy, 34 228 255) / 70%), rgb(var(--k-mg, 224 60 255) / 45%) 60%, transparent);
  box-shadow: 0 0 8px rgb(var(--k-cy, 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(var(--k-bg3, 16 12 44) / 92%), rgb(var(--k-bg1, 7 6 22) / 94%)) !important;
  border: 1px solid rgb(var(--k-cy, 34 228 255) / 28%) !important;
  box-shadow: 0 0 16px rgb(var(--k-cy, 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(var(--k-bg3, 18 14 50) / 90%), rgb(var(--k-bg1, 7 6 22) / 94%)) !important;
  border: 1px solid rgb(var(--k-cy, 34 228 255) / 40%) !important;
  box-shadow: 0 0 14px rgb(var(--k-cy, 34 228 255) / 14%) !important;
}
html.r-v2 .plat-tile:nth-child(even) {
  border-color: rgb(var(--k-mg, 224 60 255) / 40%) !important;
  box-shadow: 0 0 14px rgb(var(--k-mg, 224 60 255) / 14%) !important;
}
html.r-v2 .plat-tile:hover {
  border-color: rgb(var(--k-cy, 34 228 255)) !important;
  box-shadow: 0 0 0 1px rgb(var(--k-mg, 224 60 255) / 60%), 0 0 24px rgb(var(--k-cy, 34 228 255) / 40%) !important;
}
html.r-v2 .r-v2-tile__name {
  font-family: var(--k-fd, "Orbitron"), system-ui, sans-serif;
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgb(var(--k-cy-hi, 169 243 255));
  text-shadow: 0 0 8px rgb(var(--k-cy, 34 228 255) / 45%);
}
html.r-v2 .plat-tile:nth-child(even) .r-v2-tile__name {
  color: rgb(var(--k-mg-hi, 243 179 255));
  text-shadow: 0 0 8px rgb(var(--k-mg, 224 60 255) / 45%);
}

/* ---- Inputs ------------------------------------------------------------ */
html.r-v2 .r-text-field__field {
  background: rgb(var(--k-bg1, 7 6 22) / 75%) !important;
  box-shadow: inset 0 0 0 1px rgb(var(--k-cy, 34 228 255) / 25%);
}
html.r-v2 .r-text-field__field:focus-within {
  box-shadow: inset 0 0 0 1px rgb(var(--k-cy, 34 228 255)), 0 0 12px rgb(var(--k-cy, 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(var(--k-cy, 34 228 255) / 45%) !important;
  color: rgb(var(--k-cy-hi, 169 243 255)) !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(var(--k-bg1, 5 4 15) / 70%) 0%, transparent 26%),
    linear-gradient(to top, rgb(var(--k-bg1, 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(var(--k-bg1, 5 4 15) / 88%) !important;
  border: 1px solid rgb(var(--k-cy, 34 228 255) / 60%) !important;
  border-radius: 2px !important;
  box-shadow: 0 0 8px rgb(var(--k-cy, 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(var(--k-mg, 224 60 255) / 60%) !important;
  box-shadow: 0 0 8px rgb(var(--k-mg, 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: rgb(var(--k-cy, 34 228 255)) !important;
  box-shadow: 0 0 12px rgb(var(--k-cy, 34 228 255) / 60%) !important;
}
/* Region flags: small framed chips */
html.r-v2 .r-gc .card-flags__chip {
  background: rgb(var(--k-bg1, 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(var(--k-bg3, 14 12 40) / 62%);
  --gs-aqua: rgb(var(--k-cy, 95 243 255));
}

/* 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(var(--k-cy, 95 243 255) / 22%) 0 38px, transparent 40px),
    radial-gradient(circle at 22% 30%, rgb(var(--k-mg, 224 60 255) / 16%) 0 22px, transparent 24px),
    radial-gradient(circle at 38% 88%, rgb(var(--k-bl, 79 123 255) / 18%) 0 60px, transparent 62px),
    radial-gradient(circle at 64% 18%, rgb(var(--k-cy, 95 243 255) / 14%) 0 30px, transparent 32px),
    radial-gradient(circle at 78% 66%, rgb(var(--k-mg, 224 60 255) / 16%) 0 46px, transparent 48px),
    radial-gradient(circle at 90% 34%, rgb(var(--k-cy, 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(var(--k-bg4, 20 16 56) / 78%), rgb(var(--k-bg2, 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(var(--k-bg3, 14 12 40) / 88%), rgb(var(--k-bg1, 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(var(--k-bg3, 14 12 40) / 94%), rgb(var(--k-bg1, 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(var(--k-cy, 34 228 255) / 24%), rgb(var(--k-vi, 192 77 255) / 12%) 70%, transparent) !important;
  box-shadow: inset 0 0 0 1px rgb(var(--k-cy, 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(var(--k-cy, 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 var(--k-fd, "Orbitron"), system-ui, sans-serif;
  color: rgb(var(--k-tx, 200 205 255) / 45%);
}
.gs-sb__size output::before { content: "SIZE "; color: rgb(var(--k-tx, 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(var(--k-cy, 34 228 255) / 45%);
  background: rgb(var(--k-bg1, 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(var(--k-cy, 34 228 255) / 45%);
  border-radius: 2px;
  background: rgb(var(--k-bg2, 8 6 26) / 97%);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: 0 0 18px rgb(var(--k-cy, 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: rgb(var(--k-bg4, 20 14 56)); }
.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(var(--k-tx, 200 205 255) / 60%); font-size: 11.5px; }
.gs-sb__qs-item:hover,
.gs-sb__qs-item[aria-selected="true"] { background: rgb(var(--k-cy, 34 228 255) / 12%); border-left-color: rgb(var(--k-cy, 34 228 255)); }
.gs-sb__qs-empty { padding: 10px; color: rgb(var(--k-tx, 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(var(--k-mg, 224 60 255) / 60%); border-radius: 2px;
  background: rgb(var(--k-bg2, 10 8 30) / 94%); color: rgb(var(--k-mg-hi, 243 179 255));
  font: 600 14px/1.35 "Exo 2", system-ui, sans-serif; text-align: center;
  box-shadow: 0 0 18px rgb(var(--k-mg, 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; }
/* Platforms left the top bar when the tenth tab arrived (PoG): the home page and the sidebar still lead there. */
html.r-v2 .r-v2-nav__center .r-slider-btn-group > a[href="/platforms"] { 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 < 1740px) {
  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 < 1680px) {
  html.r-v2 .r-v2-nav__center .r-slider-btn-group__btn { padding-inline: 5px; letter-spacing: 0; gap: 3px; }
}
/* Narrower than that the label goes under the icon instead of disappearing: nine unlabelled icons were a guessing game. */
@media (width < 1760px) {
  html.r-v2 .r-v2-nav__center .r-slider-btn-group__btn { flex-direction: column; gap: 3px; padding-inline: 7px; min-width: 58px; min-height: 40px; font-size: 9px; letter-spacing: .02em; line-height: 1; }
  html.r-v2 .r-v2-nav__center .r-slider-btn-group__label { display: block !important; }
}
@media (width < 1180px) {
  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; min-width: 0; }
}

/* ---- 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(var(--k-bg2, 10 8 30) / 82%) !important; }

/* Sidebar: the two platform groups fold */
#gs-sidebar .gs-sb__group--toggle { display: flex; align-items: center; width: 100%; background: none; border: 0; cursor: pointer; text-align: left; font-family: inherit; }
#gs-sidebar .gs-sb__group--toggle::after { content: "▾"; margin-left: auto; opacity: .7; }
#gs-sidebar .gs-sb__group--toggle.is-closed::after { content: "▸"; }
#gs-sidebar .gs-sb__group--toggle:hover { color: #fff; }

/* a member among the quick-search results */
.gs-sb__qs-face { width: 34px; height: 34px; flex: none; display: grid; place-items: center; font-size: 26px; color: rgb(var(--k-cy, 34 228 255)); }

/* RomM's "new version available" notice is not for this site (see theme.js) */
.r-v2-new-version { display: none !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,rgb(var(--k-ln, 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:rgb(var(--k-tx, 190 180 255) / .7)}
.gs-conn__btn:active{transform:scale(.97)}
.gs-conn__btn:focus-visible{outline:2px solid var(--gs-cyan,rgb(var(--k-cy, 63 195 255)));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(var(--k-bg3, 13 11 34));border:1px solid var(--gs-line-strong,rgb(var(--k-ln, 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,rgb(var(--k-ln, 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,rgb(var(--k-cy, 63 195 255)));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,rgb(var(--k-ln, 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,rgb(var(--k-cy, 63 195 255)),rgb(var(--k-vi, 138 92 255)),rgb(var(--k-mg, 224 77 255)));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:rgb(var(--k-vi, 138 92 255) / .25);color:rgb(var(--k-vi-hi, 220 211 255));border:1px solid rgb(var(--k-vi, 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(var(--k-cy, 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(var(--k-bg3, 14 12 40) / 90%), rgb(var(--k-bg1, 6 5 20) / 90%)) !important; }
.gs-conn__label { font-family: var(--k-fd, "Orbitron"), system-ui, sans-serif !important; letter-spacing: .08em; }
.gs-conn__panel { border: 1px solid rgb(var(--k-cy, 34 228 255) / 40%) !important; background: rgb(var(--k-bg2, 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(var(--k-tx, 215 222 255) / 75%) !important; }
.gs-route__ms { color: rgb(var(--k-cy-hi, 169 243 255)) !important; font-family: var(--k-fd, "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(var(--k-bl, 79 123 255) / 26%), transparent 62%),
    radial-gradient(760px 520px at 82% 18%, rgb(var(--k-mg, 224 60 255) / 22%), transparent 60%),
    radial-gradient(1100px 600px at 50% 120%, rgb(var(--k-vi, 139 61 255) / 34%), transparent 60%),
    linear-gradient(rgb(var(--k-bg1, 5 4 15) / 82%) 0%, rgb(var(--k-bg1, 5 4 15) / 90%) 55%, rgb(var(--k-bg1, 5 4 15) / 98%) 72%, rgb(var(--k-bg1, 5 4 15)) 100%),
    var(--gs-wallpaper) center / cover no-repeat,
    rgb(var(--k-bg1, 5 4 15));
}
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%, rgb(var(--k-cy-hi, 169 243 255)), transparent 60%),
    radial-gradient(1px 1px at 38% 62%, rgb(var(--k-mg-hi, 243 179 255)), transparent 60%),
    radial-gradient(1.5px 1.5px at 86% 48%, #fff, transparent 60%),
    radial-gradient(1px 1px at 54% 30%, rgb(var(--k-cy-hi, 169 243 255)), transparent 60%),
    radial-gradient(1px 1px at 24% 80%, rgb(var(--k-mg-hi, 243 179 255)), 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(var(--k-vi, 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(var(--k-cy, 34 228 255) / 35%);
  border-radius: 2px;
  background: rgb(var(--k-bg1, 5 4 15) / 60%);
  font: 600 11px/1 var(--k-fd, "Orbitron"), system-ui, sans-serif;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgb(var(--k-tx, 225 232 255) / 80%);
}
html.gsx-auth .gsx-dot {
  width: 8px;
  height: 8px;
  border-radius: 1px;
  background: rgb(var(--k-mg, 255 62 207));
}
html.gsx-auth .gsx-status.on .gsx-dot {
  background: rgb(var(--k-cy, 34 228 255));
  box-shadow: 0 0 0 0 rgb(var(--k-cy, 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 var(--k-fd, "Orbitron"), system-ui, sans-serif;
  letter-spacing: .01em;
  color: #fff;
  text-shadow: 0 0 22px rgb(var(--k-vi, 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(var(--k-cy, 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(var(--k-tx, 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(var(--k-ln, 120 140 255) / 28%);
  border-radius: 2px;
  background: rgb(var(--k-bg2, 10 8 30) / 70%);
  font: 600 13.5px/1 "Exo 2", system-ui, sans-serif;
  color: rgb(var(--k-tx, 232 236 255));
}
html.gsx-auth .gsx-feats li:nth-child(odd) i { color: rgb(var(--k-cy, 34 228 255)); }
html.gsx-auth .gsx-feats li:nth-child(even) i { color: rgb(var(--k-mg, 224 60 255)); }

/* ---- 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 var(--k-fd, "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(var(--k-tx, 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(var(--k-tx, 215 222 255) / 70%);
}
html.gsx-auth .gsx-card-foot i { color: rgb(var(--k-cy, 34 228 255)); }

/* Boxed inputs instead of underlines */
html.gsx-auth .r-v2-auth .r-text-field__field {
  height: 50px;
  padding: 0 14px;
  background: rgb(var(--k-bg1, 5 4 15) / 70%) !important;
  box-shadow: inset 0 0 0 1px rgb(var(--k-ln, 120 140 255) / 28%) !important;
}
html.gsx-auth .r-v2-auth .r-text-field__field:focus-within {
  box-shadow: inset 0 0 0 1px rgb(var(--k-cy, 34 228 255)), 0 0 14px rgb(var(--k-cy, 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: rgb(var(--k-bg1, 5 4 15));
  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(var(--k-bg1, 5 4 15) / 70%) 0%, transparent 55%),
    linear-gradient(to top, rgb(var(--k-bg1, 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 rgb(var(--k-cy, 34 228 255));
  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 var(--k-fd, "Orbitron"), system-ui, sans-serif;
  color: #fff;
  text-shadow: 0 0 18px rgb(var(--k-cy, 34 228 255) / 55%);
}
.gsx-intro-cap p { margin: 0; font-size: clamp(15px, 1.5vw, 19px); color: rgb(var(--k-tx, 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(var(--k-cy, 34 228 255) / 55%);
  border-radius: 2px;
  background: rgb(var(--k-bg1, 5 4 15) / 70%);
  color: #fff;
  font: 600 13px/1 var(--k-fd, "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: rgb(var(--k-mg, 224 60 255)); box-shadow: 0 0 14px rgb(var(--k-mg, 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(var(--k-tx, 230 236 255) / 80%); font-size: 13px; cursor: pointer; }
.gsx-intro-never input { accent-color: rgb(var(--k-vi, 192 77 255)); }
.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(var(--k-cy, 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(var(--k-cy, 34 228 255) / 35%);
  border-radius: 3px;
  background: linear-gradient(135deg, rgb(var(--k-bg3, 16 12 44) / 92%), rgb(var(--k-bg1, 7 6 22) / 94%));
  box-shadow: 0 0 22px rgb(var(--k-cy, 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(var(--k-bl, 79 123 255) / 7%) 1px, transparent 1px),
    linear-gradient(90deg, rgb(var(--k-bl, 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 var(--k-fd, "Orbitron"), system-ui, sans-serif;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: rgb(var(--k-tx, 225 232 255) / 80%);
}
.gsx-hero__eyebrow i {
  width: 8px;
  height: 8px;
  border-radius: 1px;
  background: rgb(var(--k-cy, 34 228 255));
  animation: gsx-pulse 2.2s infinite;
}
.gsx-hero__title {
  margin: 0;
  font: 800 clamp(34px, 4.6vw, 62px)/1.02 var(--k-fd, "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(var(--k-cy, 34 228 255) / 35%));
}
.gsx-hero__sub { margin: 0; font: 400 17px/1.5 "Exo 2", system-ui, sans-serif; color: rgb(var(--k-tx, 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(var(--k-ln, 120 140 255) / 30%);
  border-radius: 2px;
  background: rgb(var(--k-bg2, 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: rgb(var(--k-cy, 34 228 255));
  box-shadow: 0 0 16px rgb(var(--k-cy, 34 228 255) / 35%);
  transform: translateY(-1px);
  outline: none;
}
.gsx-btn--primary {
  max-width: 100%;
  border-color: transparent;
  background: var(--gs-gradient);
  font-family: var(--k-fd, "Orbitron"), system-ui, sans-serif;
  font-size: 13px;
  letter-spacing: .1em;
  text-transform: uppercase;
  box-shadow: 0 0 14px rgb(var(--k-cy, 34 228 255) / 35%), 0 0 18px rgb(var(--k-mg, 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(var(--k-ln, 120 140 255) / 24%);
  border-radius: 2px;
  background: rgb(var(--k-bg1, 5 4 15) / 55%);
  font: 500 13.5px/1 "Exo 2", system-ui, sans-serif;
  color: rgb(var(--k-tx, 215 222 255) / 75%);
}
.gsx-chip b { font: 700 18px/1 var(--k-fd, "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(var(--k-mg, 224 60 255) / 55%);
  border-radius: 2px;
  overflow: hidden;
  background: rgb(var(--k-bg2, 7 6 26));
  box-shadow: 0 0 22px rgb(var(--k-mg, 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(var(--k-cy, 34 228 255) / 55%);
  border-radius: 2px;
  background: rgb(var(--k-bg1, 5 4 15) / 80%);
  font: 700 11px/1 var(--k-fd, "Orbitron"), system-ui, sans-serif;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgb(var(--k-cy-hi, 169 243 255));
}
@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(var(--k-cy, 34 228 255) / 60%); }
  70%, 100% { box-shadow: 0 0 0 8px rgb(var(--k-cy, 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 var(--k-fd, "Orbitron"), system-ui, sans-serif;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgb(var(--k-tx, 200 210 255) / 70%);
}
.gsx-guides__label i { color: rgb(var(--k-cy, 34 228 255)); font-size: 16px; }
.gsx-guide {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid rgb(var(--k-ln, 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(var(--k-bg3, 18 14 50) / 85%), rgb(var(--k-bg1, 7 6 22) / 90%));
  color: rgb(var(--k-tx, 232 236 255)) !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: rgb(var(--k-cy, 34 228 255)); }
a.gsx-guide:nth-of-type(even) i { color: rgb(var(--k-mg, 224 60 255)); }
a.gsx-guide:hover,
a.gsx-guide:focus-visible { border-color: rgb(var(--k-cy, 34 228 255)); box-shadow: 0 0 14px rgb(var(--k-cy, 34 228 255) / 35%); outline: none; }
.gsx-guide--cheats { border-color: rgb(var(--k-mg, 224 60 255) / 45%); color: rgb(var(--k-mg-hi, 243 179 255)) !important; }
.gsx-guide--cheats i { color: rgb(var(--k-mg, 255 62 207)); }
.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(var(--k-mg, 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(var(--k-bg3, 18 14 50) / 80%), rgb(var(--k-bg1, 7 6 22) / 85%));
  color: rgb(var(--k-tx, 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: rgb(var(--k-mg-hi, 243 179 255)); font-weight: 700; }
html.gsx-auth .gsx-join i { color: rgb(var(--k-mg, 224 60 255)); font-size: 17px; }
html.gsx-auth .gsx-join:hover,
html.gsx-auth .gsx-join:focus-visible { border-color: rgb(var(--k-cy, 34 228 255)); box-shadow: 0 0 14px rgb(var(--k-cy, 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 var(--k-fd, "Orbitron"), system-ui, sans-serif;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 0 10px rgb(var(--k-cy, 34 228 255) / 45%);
}
.gsx-shelf__head span { font: 500 13px/1 "Exo 2", system-ui, sans-serif; color: rgb(var(--k-tx, 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(var(--k-cy, 34 228 255) / 40%);
  border-radius: 2px;
  background: rgb(var(--k-bg2, 10 8 30) / 80%);
  color: #fff; font-size: 18px; cursor: pointer;
}
.gsx-shelf__nav button:hover, .gsx-shelf__nav button:focus-visible { border-color: rgb(var(--k-cy, 34 228 255)); box-shadow: 0 0 12px rgb(var(--k-cy, 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%, rgb(var(--k-bg4, 20 14 56)) 0%, rgb(var(--k-bg2, 7 6 26)) 80%);
  outline: 1px solid rgb(var(--k-cy, 34 228 255) / 55%);
  box-shadow: 0 0 12px rgb(var(--k-cy, 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(var(--k-mg, 224 60 255) / 55%); box-shadow: 0 0 12px rgb(var(--k-mg, 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 rgb(var(--k-cy, 34 228 255));
  box-shadow: 0 0 0 1px rgb(var(--k-mg, 224 60 255) / 60%), 0 0 22px rgb(var(--k-cy, 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: rgb(var(--k-cy-hi, 169 243 255));
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  text-shadow: 0 0 8px rgb(var(--k-cy, 34 228 255) / 40%);
}
.gsx-tile--alt b { color: rgb(var(--k-mg-hi, 243 179 255)); text-shadow: 0 0 8px rgb(var(--k-mg, 224 60 255) / 40%); }
.gsx-tile small { margin-top: -3px; font: 500 11px/1.2 "Exo 2", system-ui, sans-serif; color: rgb(var(--k-tx, 215 222 255) / 55%); }
@media (prefers-reduced-motion: reduce) { .gsx-tile__art { transition: none; } }

/* login hero: the price line and the two ways on (Learn more, Guided setup) */
html.gsx-auth .gsx-price { margin: 0; color: rgb(var(--k-tx, 230 236 255) / 82%); font: 500 15px/1.5 "Exo 2", system-ui, sans-serif; }
html.gsx-auth .gsx-price b { color: #ffd36b; font-weight: 700; }
html.gsx-auth .gsx-cta { display: flex; flex-wrap: wrap; gap: 10px; }
html.gsx-auth .gsx-cta a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px; border-radius: 2px; text-decoration: none;
  font: 700 13px/1 var(--k-fd, "Orbitron"), system-ui, sans-serif; letter-spacing: .1em; text-transform: uppercase; color: #fff !important; transition: box-shadow .15s, border-color .15s; }
html.gsx-auth .gsx-cta__main { background-image: linear-gradient(180deg, rgb(255 255 255 / 14%) 0%, rgb(255 255 255 / 3%) 48%, transparent 50%), linear-gradient(90deg, rgb(var(--k-cy, 34 228 255)), rgb(var(--k-bl, 79 123 255)) 45%, rgb(var(--k-mg, 224 60 255))); text-shadow: 0 1px 2px rgb(0 0 0 / 45%); }
html.gsx-auth .gsx-cta__alt { border: 1px solid rgb(var(--k-cy, 34 228 255) / 55%); background: rgb(var(--k-bg1, 8 6 24) / 70%); }
html.gsx-auth .gsx-cta a:hover, html.gsx-auth .gsx-cta a:focus-visible { box-shadow: 0 0 18px rgb(var(--k-cy, 34 228 255) / 45%); outline: none; }
html.gsx-auth .gsx-cta i { font-size: 18px; }
html.gsx-auth .gsx-eyebrow { margin: 0 0 -8px; font: 700 12.5px/1.2 var(--k-fd, "Orbitron"), system-ui, sans-serif; letter-spacing: .26em; text-transform: uppercase; color: rgb(var(--k-cy, 34 228 255)); text-shadow: 0 0 12px rgb(var(--k-cy, 34 228 255) / 55%); }

/* Welcome to GameScape: the walk-through for a new member (experience.js) */
.gsx-welcome { position: fixed; inset: 0; z-index: 4000; display: grid; place-items: center; padding: 16px; background: rgb(var(--k-bg0, 3 2 10) / 86%); backdrop-filter: blur(6px); }
.gsx-welcome__box { position: relative; width: min(620px, 100%); padding: 30px 28px 22px; border: 1px solid rgb(var(--k-ln, 120 140 255) / 50%); border-radius: 6px; background: rgb(var(--k-bg2, 10 8 32)); color: rgb(var(--k-tx, 233 236 255)); text-align: center; box-shadow: 0 0 50px rgb(var(--k-cy, 34 228 255) / 22%), 0 24px 70px rgb(0 0 0 / 70%); font: 16px/1.5 "Exo 2", sans-serif; }
.gsx-welcome__icon { display: block; font-size: 54px; color: rgb(var(--k-cy, 34 228 255)); filter: drop-shadow(0 0 14px rgb(var(--k-cy, 34 228 255) / 60%)); }
.gsx-welcome__box h2 { margin: 8px 0 10px; font: 800 clamp(20px, 3.4vw, 28px)/1.15 var(--k-fd, "Orbitron"), sans-serif; letter-spacing: .04em; text-transform: uppercase; background: linear-gradient(90deg, rgb(var(--k-cy, 34 228 255)), rgb(var(--k-bl, 79 123 255)) 45%, rgb(var(--k-mg, 224 60 255))); -webkit-background-clip: text; background-clip: text; color: transparent; }
.gsx-welcome__text { margin: 0 auto 12px; max-width: 520px; min-height: 7.5em; color: rgb(var(--k-tx, 215 222 255) / 90%); }
.gsx-welcome__more { display: inline-block; margin-bottom: 12px; color: rgb(var(--k-cy, 34 228 255)); font-weight: 700; } .gsx-welcome__more[hidden] { display: none; }
.gsx-welcome__dots { display: flex; gap: 7px; justify-content: center; margin: 4px 0 16px; } .gsx-welcome__dots i { width: 9px; height: 9px; border-radius: 50%; background: rgb(var(--k-ln, 120 140 255) / 35%); } .gsx-welcome__dots i.on { background: rgb(var(--k-cy, 34 228 255)); box-shadow: 0 0 8px rgb(var(--k-cy, 34 228 255)); }
.gsx-welcome__row { display: flex; gap: 12px; justify-content: center; }
.gsx-welcome__row button { min-width: 120px; min-height: 44px; padding: 8px 18px; border: 1px solid rgb(var(--k-ln, 120 140 255) / 55%); border-radius: 4px; background: rgb(var(--k-bg1, 5 4 15) / 70%); color: #fff; cursor: pointer; font: 700 15px/1 "Exo 2", sans-serif; }
.gsx-welcome__next { border-color: transparent !important; background: linear-gradient(90deg, rgb(var(--k-cy, 34 228 255)), rgb(var(--k-bl, 79 123 255)) 50%, rgb(var(--k-mg, 224 60 255))) !important; text-shadow: 0 1px 2px rgb(0 0 0 / 60%); }
.gsx-welcome__row button:disabled { opacity: .4; cursor: default; } .gsx-welcome__row button:focus-visible, .gsx-welcome__x:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.gsx-welcome__x { position: absolute; top: 10px; right: 10px; width: 36px; height: 36px; border: 1px solid rgb(var(--k-ln, 120 140 255) / 45%); border-radius: 4px; background: none; color: #fff; cursor: pointer; font: 700 20px/1 sans-serif; }

/* Beta: the tag on the logo of the sign-in page, and the line about payments */
html.gsx-auth .gsx-logo-wrap { position: relative; display: inline-block; }
html.gsx-auth .gsx-beta { position: absolute; top: -6px; right: -18px; padding: 3px 8px; border: 1px solid #ffd36b; border-radius: 10px; background: rgb(var(--k-bg2, 10 8 32)); color: #ffd36b; font: 800 11px/1 var(--k-fd, "Orbitron"), sans-serif; letter-spacing: .14em; box-shadow: 0 0 12px rgb(255 211 107 / 45%); transform: rotate(8deg); }
html.gsx-auth .gsx-beta-note { margin: 10px 0 0; padding: 8px 10px; border: 1px solid rgb(255 211 107 / 45%); border-radius: 4px; background: rgb(255 211 107 / 8%); color: #ffe9b0; font-size: 13.5px; text-align: center; }
html.gsx-auth .gsx-beta-note b { color: #ffd36b; }

/* Retro Neon keeps its neon lettering */
:root[data-theme="retro"] .gsx-logo img { content: url(/gamescape/mediascape-wordmark-full.webp); }

.gsx-legal { margin: 10px 0 0; font-size: 12.5px; line-height: 1.45; opacity: .8; } .gsx-legal a { color: inherit; text-decoration: underline; }

/* the public front page: play the free DOS games without an account */
html.gsx-auth .gsx-cta__dos { border: 1px solid rgb(93 255 160 / 70%); background: rgb(10 40 26 / 80%); color: #5dffa0 !important; }
html.gsx-auth .gsx-cta__dos:hover, html.gsx-auth .gsx-cta__dos:focus-visible { box-shadow: 0 0 18px rgb(93 255 160 / 45%) !important; }
/* Cyber City as a guest (no account): the game's own gold on night purple */
html.gsx-auth .gsx-cta__city { border: 1px solid rgb(255 210 58 / 75%); background: rgb(26 14 52 / 85%); color: #ffd23a !important; }
html.gsx-auth .gsx-cta__city:hover, html.gsx-auth .gsx-cta__city:focus-visible { box-shadow: 0 0 18px rgb(255 210 58 / 45%) !important; }

/* Home's shelves: a shelf scrolls sideways inside itself. Without this the grid let a long shelf stretch the whole
   page to its width, and Home slid sideways on a desktop. */
.gsx-shelves { grid-template-columns: minmax(0, 1fr); }
.gsx-shelf { min-width: 0; max-width: 100%; }

/* 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: rgb(var(--k-cy, 34 228 255));
  --gsl-mag: rgb(var(--k-mg, 224 60 255));
  --gsl-ink: rgb(var(--k-bg1, 5 4 15));
  --gsl-grad: linear-gradient(90deg, rgb(var(--k-cy, 34 228 255)) 0%, rgb(var(--k-bl, 79 123 255)) 45%, rgb(var(--k-mg, 224 60 255)) 100%);
  --gsl-glass: rgb(var(--k-bg3, 12 10 34) / 72%);
}
.gsl {
  --gsl-cyan: rgb(var(--k-cy, 34 228 255));
  --gsl-mag: rgb(var(--k-mg, 224 60 255));
  --gsl-ink: rgb(var(--k-bg1, 5 4 15));
  --gsl-grad: linear-gradient(90deg, rgb(var(--k-cy, 34 228 255)) 0%, rgb(var(--k-bl, 79 123 255)) 45%, rgb(var(--k-mg, 224 60 255)) 100%);
  --gsl-glass: rgb(var(--k-bg3, 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(var(--k-cy, 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(var(--k-cy, 34 228 255) / 30%), rgb(var(--k-mg, 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(var(--k-cy, 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 var(--k-fd, "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(var(--k-cy, 34 228 255) / 55%), 0 0 18px rgb(var(--k-mg, 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, rgb(var(--k-mg, 255 62 207)), rgb(var(--k-mg, 224 60 255)));
  box-shadow: 0 0 12px rgb(var(--k-mg, 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(var(--k-cy, 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(var(--k-mg, 224 60 255) / 16%), transparent 70%),
    radial-gradient(420px 260px at 0% 100%, rgb(var(--k-cy, 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(var(--k-cy, 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(var(--k-ln, 120 140 255) / 22%);
}
.gsl-title {
  margin: 0;
  font: 800 15px/1 var(--k-fd, "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(var(--k-tx, 215 222 255) / 60%);
}
.gsl-status::before { content: ""; width: 7px; height: 7px; border-radius: 1px; background: rgb(var(--k-mg, 255 62 207)); }
.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(var(--k-ln, 120 140 255) / 30%);
  border-radius: 2px;
  background: rgb(var(--k-bg1, 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(var(--k-cy, 34 228 255) / 40%); }

.gsl-tabs { display: flex; padding: 0 10px; gap: 4px; border-bottom: 1px solid rgb(var(--k-ln, 120 140 255) / 18%); }
.gsl-tab {
  flex: 1;
  padding: 10px 8px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: none;
  color: rgb(var(--k-tx, 215 222 255) / 70%);
  font: 700 11.5px/1 var(--k-fd, "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(var(--k-vi, 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(var(--k-ln, 120 140 255) / 18%);
  border-left: 3px solid rgb(var(--k-cy, 34 228 255) / 60%);
  border-radius: 2px;
  background: linear-gradient(180deg, rgb(255 255 255 / 6%), rgb(255 255 255 / 1%)), rgb(var(--k-bg1, 5 4 15) / 45%);
}
.gsl-msg.is-me { border-left-color: var(--gsl-mag); background: linear-gradient(180deg, rgb(var(--k-mg, 224 60 255) / 12%), rgb(var(--k-mg, 224 60 255) / 3%)), rgb(var(--k-bg1, 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: rgb(var(--k-cy-hi, 169 243 255)); }
.gsl-msg.is-me .gsl-user { color: rgb(var(--k-mg-hi, 243 179 255)); }
.gsl-tag {
  padding: 2px 5px;
  border: 1px solid rgb(var(--k-mg, 224 60 255) / 55%);
  border-radius: 2px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgb(var(--k-mg-hi, 243 179 255));
}
.gsl-time { margin-left: auto; font-size: 11px; color: rgb(var(--k-tx, 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(var(--k-tx, 215 222 255) / 55%); }
.gsl-empty { padding: 28px 8px; text-align: center; font-size: 13.5px; color: rgb(var(--k-tx, 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(var(--k-ln, 120 140 255) / 18%);
  border-radius: 2px;
  background: rgb(var(--k-bg1, 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: rgb(var(--k-mg-hi, 243 179 255)); text-decoration: none; overflow-wrap: anywhere; }
.gsl-playing:hover,
.gsl-playing:focus-visible { color: #fff; text-decoration: underline; outline: none; }
.gsl-idle { color: rgb(var(--k-tx, 215 222 255) / 55%); }

/* ---- composer ---- */
.gsl-form {
  display: flex;
  gap: 8px;
  padding: 10px 12px 12px;
  border-top: 1px solid rgb(var(--k-ln, 120 140 255) / 22%);
  background: rgb(var(--k-bg1, 5 4 15) / 35%);
}
.gsl-input {
  flex: 1;
  min-width: 0;
  height: 42px;
  padding: 0 12px;
  border: 1px solid rgb(var(--k-ln, 120 140 255) / 30%);
  border-radius: 2px;
  background: rgb(var(--k-bg1, 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(var(--k-cy, 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(var(--k-cy, 34 228 255) / 35%), inset 0 1px 0 rgb(255 255 255 / 40%);
  color: #fff;
  font: 700 11.5px/1 var(--k-fd, "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(var(--k-cy, 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 rgb(var(--k-mg, 224 60 255)); }
.gsl-navbadge {
  position: absolute;
  top: 2px;
  right: 2px;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  display: grid;
  place-items: center;
  border: 1px solid rgb(var(--k-cy, 34 228 255));
  border-radius: 2px;
  background: linear-gradient(135deg, rgb(var(--k-mg, 255 62 207)), rgb(var(--k-mg, 224 60 255)));
  box-shadow: 0 0 10px rgb(var(--k-mg, 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(var(--k-ln, 120 140 255) / 30%); border-radius: 2px;
  background: rgb(var(--k-bg1, 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(var(--k-cy, 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(var(--k-bl, 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: rgb(var(--k-mg, 255 62 207)); box-shadow: 0 0 8px rgb(var(--k-mg, 255 62 207));
}

.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(var(--k-ln, 120 140 255) / 32%); border-radius: 2px;
  background: linear-gradient(180deg, rgb(255 255 255 / 10%), rgb(255 255 255 / 0%) 60%), rgb(var(--k-bg1, 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(var(--k-cy, 34 228 255) / 40%); outline: none; }
.gsl-act--invite { border-color: rgb(var(--k-mg, 224 60 255) / 45%); }
.gsl-act--join { border-color: rgb(var(--k-cy, 34 228 255) / 60%); color: rgb(var(--k-cy-hi, 169 243 255)); }
.gsl-count {
  min-width: 16px; height: 16px; padding: 0 4px; display: grid; place-items: center;
  border-radius: 2px; background: rgb(var(--k-mg, 224 60 255)); box-shadow: 0 0 8px rgb(var(--k-mg, 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(var(--k-mg, 224 60 255) / 45%); border-radius: 2px; background: rgb(var(--k-bg1, 5 4 15) / 80%);
}
.gsl-pick__title { margin: 0 0 6px; font: 700 11px/1.2 var(--k-fd, "Orbitron"), system-ui, sans-serif; letter-spacing: .1em; text-transform: uppercase; color: rgb(var(--k-mg-hi, 243 179 255)); }
.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(var(--k-ln, 120 140 255) / 22%); border-radius: 2px; background: rgb(var(--k-bg3, 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(var(--k-cy, 34 228 255) / 55%); border-radius: 3px;
  background: linear-gradient(180deg, rgb(255 255 255 / 14%), rgb(255 255 255 / 0%) 55%), rgb(var(--k-bg3, 12 10 34) / 92%);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: 0 0 18px rgb(var(--k-cy, 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(var(--k-bg1, 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(var(--k-mg, 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(var(--k-mg, 224 60 255) / 22%), transparent 70%),
    radial-gradient(420px 260px at 0% 100%, rgb(var(--k-cy, 34 228 255) / 16%), transparent 70%),
    rgb(var(--k-bg3, 12 10 34) / 94%);
  box-shadow: 0 0 34px rgb(var(--k-mg, 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 var(--k-fd, "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 var(--k-fd, "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: rgb(var(--k-mg-hi, 243 179 255)); }
.gsl-invite__note { margin: 0 0 12px; font-style: italic; color: rgb(var(--k-tx, 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(var(--k-cy, 34 228 255) / 60%); border-radius: 3px;
  background: linear-gradient(180deg, rgb(255 255 255 / 14%), rgb(255 255 255 / 0%) 55%), rgb(var(--k-bg3, 12 10 34) / 92%);
  box-shadow: 0 0 18px rgb(var(--k-cy, 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(var(--k-mg, 224 60 255) / 55%); border-radius: 2px; background: rgb(var(--k-mg, 224 60 255) / 12%);
  font: 600 13px/1.3 "Exo 2", system-ui, sans-serif; color: rgb(var(--k-mg-hi, 243 179 255));
}
.gsl-games__search .gsl-input { width: 100%; box-sizing: border-box; }
.gsl-games__h { margin: 4px 0 0; font: 700 10.5px/1 var(--k-fd, "Orbitron"), system-ui, sans-serif; letter-spacing: .18em; text-transform: uppercase; color: rgb(var(--k-tx, 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(var(--k-vi, 160 90 255) / 50%) transparent; }
.gsl-game {
  display: flex; gap: 10px; padding: 8px; margin-bottom: 6px;
  border: 1px solid rgb(var(--k-ln, 120 140 255) / 18%); border-radius: 2px;
  background: linear-gradient(180deg, rgb(255 255 255 / 6%), rgb(255 255 255 / 0%) 60%), rgb(var(--k-bg1, 5 4 15) / 45%);
  outline: none;
}
.gsl-game:focus, .gsl-game:focus-within { border-color: var(--gsl-cyan); box-shadow: 0 0 12px rgb(var(--k-cy, 34 228 255) / 30%); }
.gsl-game__cover { flex: none; width: 46px; height: 62px; object-fit: cover; border: 1px solid rgb(var(--k-ln, 120 140 255) / 30%); border-radius: 2px; background: rgb(var(--k-bg2, 10 8 32)); }
.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: rgb(var(--k-cy-hi, 169 243 255)); }
.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(var(--k-vi, 160 90 255) / 50%) transparent; }
.gsl-ext[hidden] { display: none; }
.gsl-userlink { all: unset; cursor: pointer; font-weight: 700; font-size: 13px; color: rgb(var(--k-cy-hi, 169 243 255)); }
.gsl-userlink:hover, .gsl-userlink:focus-visible { text-decoration: underline; outline: none; }
.gsl-msg.is-me .gsl-userlink { color: rgb(var(--k-mg-hi, 243 179 255)); }
.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(var(--k-mg, 224 60 255) / 6%)), rgb(var(--k-bg1, 5 4 15) / 50%); }
.gsl-system { font-weight: 700; color: #ffd76a; }
.gsl-navtab { flex-direction: row !important; flex-wrap: nowrap; white-space: nowrap; }

/* a note that waits for an answer (a friend request) */
.gsl-toast--stay { border-color: #ffd36b; box-shadow: 0 0 0 1px #ffd36b, 0 0 22px rgb(255 211 107 / 45%), 0 10px 30px rgb(0 0 0 / 55%); }

/* profile.css */
/* GS - GameScape Online: member profile overlay + Friends tab. Square neon glass. */
.gsp-overlay {
  --gsl-cyan: rgb(var(--k-cy, 34 228 255));
  --gsl-mag: rgb(var(--k-mg, 224 60 255));
  --gsl-grad: linear-gradient(90deg, rgb(var(--k-cy, 34 228 255)) 0%, rgb(var(--k-bl, 79 123 255)) 45%, rgb(var(--k-mg, 224 60 255)) 100%);
  position: fixed;
  inset: 0;
  z-index: 3050;
  display: grid;
  place-items: center;
  padding: 16px;
  background: rgb(var(--k-bg1, 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(var(--k-cy, 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(var(--k-mg, 224 60 255) / 18%), transparent 70%),
    radial-gradient(520px 300px at 0% 100%, rgb(var(--k-cy, 34 228 255) / 14%), transparent 70%),
    rgb(var(--k-bg3, 12 10 34) / 95%);
  box-shadow: 0 0 34px rgb(var(--k-cy, 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(var(--k-vi, 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(rgb(var(--k-bg2, 10 8 32)), rgb(var(--k-bg2, 10 8 32))) padding-box, var(--gsl-grad) border-box;
  box-shadow: 0 0 18px rgb(var(--k-cy, 34 228 255) / 35%);
}
.gsp-name {
  margin: 0 0 6px;
  font: 800 26px/1.1 var(--k-fd, "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(var(--k-tx, 215 222 255) / 65%); }
.gsp-state::before { content: ""; width: 8px; height: 8px; border-radius: 1px; background: rgb(var(--k-tx, 215 222 255) / 35%); }
.gsp-state.on { color: rgb(var(--k-cy-hi, 169 243 255)); }
.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(var(--k-ln, 120 140 255) / 22%);
  border-radius: 2px;
  background: linear-gradient(180deg, rgb(255 255 255 / 7%), rgb(255 255 255 / 0%) 60%), rgb(var(--k-bg1, 5 4 15) / 45%);
}
.gsp-stats dt { font: 700 10px/1 var(--k-fd, "Orbitron"), system-ui, sans-serif; letter-spacing: .16em; text-transform: uppercase; color: rgb(var(--k-tx, 200 205 255) / 60%); }
.gsp-stats dd { margin: 6px 0 0; font: 700 17px/1.1 var(--k-fd, "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(var(--k-mg, 224 60 255) / 50%);
  border-radius: 2px;
  background: rgb(var(--k-mg, 224 60 255) / 10%);
  color: rgb(var(--k-mg-hi, 243 179 255));
  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 var(--k-fd, "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(var(--k-vi, 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(var(--k-cy, 34 228 255) / 40%);
  border-radius: 2px;
  background: rgb(var(--k-bg2, 10 8 32));
}
.gsp-game:hover img, .gsp-game:focus-visible img { border-color: var(--gsl-cyan); box-shadow: 0 0 12px rgb(var(--k-cy, 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: rgb(var(--k-cy-hi, 169 243 255)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gsp-muted { margin: 4px 0; font-size: 13px; color: rgb(var(--k-tx, 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(var(--k-tx, 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; } }

/* the signs of the scapes a member is approved for (profile card) */
.gsp-scapes { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 0; }
.gsp-scape { display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px 3px 6px; border: 1px solid currentColor; border-radius: 2px; background: rgb(var(--k-bg1, 5 4 15) / 55%);
  font: 700 10.5px/1 var(--k-fd, "Orbitron"), sans-serif; letter-spacing: .08em; text-transform: uppercase; color: rgb(var(--k-cy, 34 228 255)); }
.gsp-scape .mdi { font-size: 15px; }
.gsp-scape--sound { color: rgb(var(--k-mg, 224 60 255)); } .gsp-scape--video { color: #ffd36b; } .gsp-scape--books { color: #4dffb5; }
.gsp-scape.off { color: rgb(var(--k-tx, 215 222 255) / 40%); border-style: dashed; }
.gsp-scape.asked { color: #ffd36b; border-style: solid; box-shadow: 0 0 8px rgb(255 211 107 / 45%); }
button.gsp-scape { cursor: pointer; }
button.gsp-scape:hover, button.gsp-scape:focus-visible { box-shadow: 0 0 10px currentColor; outline: none; }
button.gsp-scape:disabled { opacity: .5; }

/* finding members in the Friends tab */
.gsp-findbox { margin-top: 12px; }
.gsp-finder { max-height: 46vh; overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgb(var(--k-ln, 120 140 255) / 45%) transparent; }

/* a friend's own scapes on their profile card, with a star for favourites */
.gsp-theirs { margin: 14px 0 4px; }
.gsp-h { margin: 0 0 6px; font: 700 12px/1.2 var(--k-fd, "Orbitron"), sans-serif; letter-spacing: .14em; text-transform: uppercase; color: rgb(var(--k-cy, 34 228 255)); }
.gsp-theirs__row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.gsp-their { display: inline-flex; align-items: stretch; }
.gsp-their a.gsp-scape { text-decoration: none; padding: 8px 10px 8px 8px; font-size: 11.5px; }
.gsp-their a.gsp-scape:hover, .gsp-their a.gsp-scape:focus-visible { box-shadow: 0 0 12px currentColor; outline: none; }
.gsp-star { width: 34px; border: 1px solid rgb(var(--k-ln, 120 140 255) / 45%); border-left: 0; background: rgb(var(--k-bg1, 5 4 15) / 55%); color: rgb(var(--k-tx, 215 222 255) / 66%); cursor: pointer; font-size: 18px; }
.gsp-star.on { color: #ffd36b; border-color: #ffd36b; }
.gsp-star:hover, .gsp-star:focus-visible { color: #ffd36b; outline: none; }

/* your own card: which friend may enter which of your scapes */
.gsp-access { width: 100%; margin: 8px 0 10px; border-collapse: collapse; font-size: 13.5px; }
.gsp-access th { padding: 5px 6px; font: 700 10px/1.2 var(--k-fd, "Orbitron"), sans-serif; letter-spacing: .1em; text-transform: uppercase; color: rgb(var(--k-tx, 215 222 255) / 66%); text-align: center; }
.gsp-access th .mdi { display: block; font-size: 17px; margin-bottom: 2px; color: rgb(var(--k-cy, 34 228 255)); }
.gsp-access th:first-child, .gsp-access td:first-child { text-align: left; }
.gsp-access td { padding: 6px; border-top: 1px solid rgb(var(--k-ln, 120 140 255) / 16%); text-align: center; }
.gsp-access td.yes { color: #4dffb5; font-size: 18px; } .gsp-access td.no { color: rgb(var(--k-tx, 215 222 255) / 30%); }
.gsp-yours { margin-top: 0; }

/* Invite friends into your scapes */
.gsp-invite { display: grid; gap: 10px; margin-top: 12px; padding: 12px; border: 1px solid rgb(var(--k-cy, 34 228 255) / 45%); background: rgb(var(--k-bg1, 5 4 15) / 55%); }
.gsp-invite fieldset { margin: 0; padding: 8px 10px; border: 1px solid rgb(var(--k-ln, 120 140 255) / 26%); display: flex; flex-wrap: wrap; gap: 6px 16px; }
.gsp-invite legend { padding: 0 6px; font: 700 10px/1 var(--k-fd, "Orbitron"), sans-serif; letter-spacing: .14em; text-transform: uppercase; color: rgb(var(--k-tx, 215 222 255) / 66%); }
.gsp-invite label { display: inline-flex; align-items: center; gap: 4px; font-size: 14px; cursor: pointer; }
.gsp-invite input { width: 18px; height: 18px; accent-color: rgb(var(--k-cy, 34 228 255)); }
.gsp-invite__friends { max-height: 30vh; overflow-y: auto; }
.gsp-invite button { justify-self: start; }

/* bio, the editor, asking to join, public scapes */
.gsp-bio { margin: 6px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; color: rgb(var(--k-tx, 232 236 255) / 92%); font-size: 13.5px; line-height: 1.45; }
.gsp-bio a { color: rgb(var(--k-cy, 34 228 255)); }
.gsp-ask { margin: 6px 0 0; padding: 0 10px; min-height: 30px; border: 1px solid rgb(var(--k-ln, 120 140 255) / 55%); background: rgb(var(--k-bg1, 5 4 15) / 55%); color: rgb(var(--k-tx, 215 222 255)); font-size: 12px; cursor: pointer; }
.gsp-their .gsp-ask { margin: 0; border-left: 0; }
.gsp-their span.gsp-scape { padding: 8px 10px 8px 8px; font-size: 11.5px; }
.gsp-ask:hover, .gsp-ask:focus-visible { border-color: rgb(var(--k-cy, 34 228 255)); color: #fff; outline: none; }
.gsp-ask:disabled { opacity: .6; cursor: default; }
.gsp-edit { display: grid; gap: 8px; margin-top: 8px; padding: 10px; border: 1px solid rgb(var(--k-ln, 120 140 255) / 35%); background: rgb(var(--k-bg1, 5 4 15) / 55%); }
.gsp-edit__row { display: grid; gap: 4px; font-size: 12px; color: rgb(var(--k-tx, 215 222 255) / 80%); }
.gsp-edit textarea { width: 100%; padding: 6px 8px; border: 1px solid rgb(var(--k-ln, 120 140 255) / 45%); background: rgb(var(--k-bg2, 10 8 32)); color: #eef1ff; font: inherit; font-size: 13.5px; resize: vertical; }
.gsp-edit input[type=file] { color: rgb(var(--k-tx, 215 222 255)); font-size: 12px; max-width: 100%; }
.gsp-public { margin: 8px 0 0; font-size: 12.5px; color: rgb(var(--k-tx, 215 222 255) / 85%); display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; }
.gsp-public label { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }
.gsp-askline { margin: 8px 0 0; font-size: 13px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.gsp-askline .gsp-ask { margin: 0; }

/* which list is which: the site's stores, your own scapes, their scapes */
.gsp-scapes__label { flex-basis: 100%; display: block; margin: 0 0 4px; font-size: 11.5px; color: rgb(var(--k-tx, 215 222 255) / 72%); }
.gsp-theirs .gsp-h { margin-top: 14px; }
.gsp-sw { min-width: 62px; height: 26px; padding: 0 8px; border: 1px solid currentColor; background: rgb(var(--k-bg1, 5 4 15) / 55%); color: inherit; font-size: 11.5px; cursor: pointer; }
.gsp-access td.yes .gsp-sw { color: #4dffb5; } .gsp-access td.no .gsp-sw { color: rgb(var(--k-tx, 215 222 255) / 55%); border-style: dashed; }
.gsp-sw:hover, .gsp-sw:focus-visible { box-shadow: 0 0 8px currentColor; outline: none; } .gsp-sw:disabled { opacity: .5; }

/* "See <member>'s Scapes": the way from a profile card to that member's street of buildings */
.gsp-see { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 16px; margin: 4px 0 10px; font-weight: 700; text-decoration: none; }
.gsp-see .mdi { font-size: 20px; }

/* a Free account's week: the usage meter on the member's own profile card */
.gsp-meter { margin: 0 0 14px; padding: 10px 12px; border: 1px solid rgb(var(--k-cy, 34 228 255) / 40%); border-radius: 4px; background: rgb(var(--k-cy, 34 228 255) / 6%); }
.gsp-meter__bar { height: 12px; border-radius: 6px; background: rgb(var(--k-ln, 120 140 255) / 22%); overflow: hidden; } .gsp-meter__bar i { display: block; height: 100%; background: linear-gradient(90deg, rgb(var(--k-cy, 34 228 255)), rgb(var(--k-bl, 79 123 255))); }
.gsp-meter.is-near .gsp-meter__bar i { background: linear-gradient(90deg, #ffd36b, #ff9d3c); } .gsp-meter.is-full .gsp-meter__bar i { background: #ff4d7a; } .gsp-meter.is-full { border-color: #ff4d7a; }
.gsp-meter__t { margin: 6px 0 2px; font-weight: 700; }
.gsl-act--warn { border-color: #ff4d7a !important; color: #ff8fab !important; }

/* 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(var(--k-ln, 120 140 255) / 18%);
  border-left: 3px solid rgb(var(--k-cy, 34 228 255) / 55%);
  border-radius: 2px;
  background: linear-gradient(180deg, rgb(255 255 255 / 6%), rgb(255 255 255 / 0%) 60%), rgb(var(--k-bg1, 5 4 15) / 45%);
  font-family: "Exo 2", system-ui, sans-serif;
}
.gsa-item > .mdi { font-size: 18px; line-height: 1.2; color: rgb(var(--k-cy, 34 228 255)); }
.gsa-item--friends { border-left-color: rgb(var(--k-mg, 224 60 255) / 60%); }
.gsa-item--friends > .mdi, .gsa-item--achievement > .mdi { color: rgb(var(--k-mg, 224 60 255)); }
.gsa-item--new_games { border-left-color: rgb(var(--k-bl, 79 123 255) / 70%); }
.gsa-item--new_games > .mdi { color: rgb(var(--k-ln, 125 155 255)); }
.gsa-item--achievement { border-left-color: rgb(var(--k-mg, 255 62 207) / 70%); }
.gsa-text { margin: 0; font-size: 13.5px; line-height: 1.4; color: rgb(var(--k-tx, 232 235 255)); overflow-wrap: anywhere; }
.gsa-user { all: unset; cursor: pointer; font-weight: 700; color: rgb(var(--k-cy-hi, 169 243 255)); }
.gsa-user:hover, .gsa-user:focus-visible { text-decoration: underline; outline: none; }
.gsa-game { color: rgb(var(--k-mg-hi, 243 179 255)); font-weight: 600; text-decoration: none; }
.gsa-game:hover, .gsa-game:focus-visible { text-decoration: underline; color: #fff; outline: none; }
.gsa-plat { color: rgb(var(--k-tx, 215 222 255) / 60%); font-size: 12.5px; }
.gsa-time { font-size: 11px; color: rgb(var(--k-tx, 215 222 255) / 50%); white-space: nowrap; }

/* home widget */
.gsa-widget {
  margin: 0 0 26px;
  padding: 16px 18px;
  border: 1px solid rgb(var(--k-cy, 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(var(--k-bg3, 16 12 44) / 92%), rgb(var(--k-bg1, 7 6 22) / 94%));
  box-shadow: 0 0 18px rgb(var(--k-cy, 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 var(--k-fd, "Orbitron"), system-ui, sans-serif;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 0 10px rgb(var(--k-cy, 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(var(--k-ln, 120 140 255) / 32%); border-radius: 2px;
  background: linear-gradient(180deg, rgb(255 255 255 / 10%), rgb(255 255 255 / 0%) 60%), rgb(var(--k-bg1, 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: rgb(var(--k-cy, 34 228 255)); box-shadow: 0 0 10px rgb(var(--k-cy, 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(var(--k-mg, 224 60 255) / 55%); border-radius: 2px; background: rgb(var(--k-bg2, 10 8 32)); }
.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(var(--k-ln, 120 140 255) / 22%); border-radius: 2px; background: rgb(var(--k-bg1, 5 4 15) / 45%); }
.gsr-nums dt { font: 700 9.5px/1 var(--k-fd, "Orbitron"), system-ui, sans-serif; letter-spacing: .14em; text-transform: uppercase; color: rgb(var(--k-tx, 200 205 255) / 60%); }
.gsr-nums dd { margin: 5px 0 0; font: 700 15px/1.1 var(--k-fd, "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(var(--k-ln, 120 140 255) / 18%);
  border-left: 3px solid rgb(var(--k-mg, 255 62 207) / 60%);
  border-radius: 2px;
  background: rgb(var(--k-bg1, 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: rgb(var(--k-cy-hi, 169 243 255)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gsr-ach__pts { font-size: 11.5px; color: rgb(var(--k-mg-hi, 243 179 255)); white-space: nowrap; }
.gsr-ext { font-size: 12.5px; color: rgb(var(--k-cy, 34 228 255)); }
.gsr-help { padding: 10px 12px; border: 1px dashed rgb(var(--k-cy, 34 228 255) / 45%); border-radius: 2px; background: rgb(var(--k-cy, 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(var(--k-tx, 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(var(--k-ln, 120 140 255) / 18%); }
.gsr-switch .gsl-tab[aria-pressed="true"] { color: #fff; border-bottom-color: rgb(var(--k-cy, 34 228 255)); box-shadow: 0 8px 12px -10px rgb(var(--k-cy, 34 228 255)); }
.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(var(--k-ln, 120 140 255) / 18%);
  border-radius: 2px;
  background: linear-gradient(180deg, rgb(255 255 255 / 6%), rgb(255 255 255 / 0%) 60%), rgb(var(--k-bg1, 5 4 15) / 45%);
}
.gsr-row:nth-child(1) { border-color: rgb(var(--k-cy, 34 228 255) / 60%); box-shadow: 0 0 12px rgb(var(--k-cy, 34 228 255) / 25%); }
.gsr-row.is-me { border-left: 3px solid rgb(var(--k-mg, 224 60 255)); }
.gsr-rank { font: 800 14px/1 var(--k-fd, "Orbitron"), system-ui, sans-serif; color: rgb(var(--k-cy, 34 228 255)); }
.gsr-rowpic { width: 34px; height: 34px; object-fit: cover; border-radius: 2px; background: rgb(var(--k-bg2, 10 8 32)); }
.gsr-who { display: flex; flex-direction: column; min-width: 0; }
.gsr-score { font: 700 12.5px/1.2 var(--k-fd, "Orbitron"), system-ui, sans-serif; color: rgb(var(--k-mg-hi, 243 179 255)); 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(var(--k-ln, 120 140 255) / 22%);
  border-left: 3px solid rgb(var(--k-cy, 34 228 255));
  border-radius: 2px;
  background: linear-gradient(180deg, rgb(255 255 255 / 7%), rgb(255 255 255 / 0%) 60%), rgb(var(--k-bg1, 5 4 15) / 50%);
  font-family: "Exo 2", system-ui, sans-serif;
}
.gse-card.is-live { border-left-color: rgb(var(--k-mg, 224 60 255)); box-shadow: 0 0 14px rgb(var(--k-mg, 224 60 255) / 30%); }
.gse-top { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; }
.gse-when { color: rgb(var(--k-cy-hi, 169 243 255)); font-weight: 600; }
.gse-until { font: 700 10.5px/1.4 var(--k-fd, "Orbitron"), system-ui, sans-serif; letter-spacing: .1em; color: rgb(var(--k-mg-hi, 243 179 255)); text-transform: uppercase; }
.gse-card.is-live .gse-until { color: #fff; background: linear-gradient(90deg, rgb(var(--k-cy, 34 228 255)), rgb(var(--k-mg, 224 60 255))); padding: 0 6px; border-radius: 2px; }
.gse-title { display: block; margin: 4px 0 2px; font: 700 15px/1.25 var(--k-fd, "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(var(--k-tx, 215 222 255) / 72%); }
.gse-note { font-style: italic; color: rgb(var(--k-tx, 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: rgb(var(--k-cy, 34 228 255)); background: rgb(var(--k-cy, 34 228 255) / 18%); box-shadow: 0 0 10px rgb(var(--k-cy, 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(var(--k-mg, 224 60 255) / 45%); border-radius: 2px; background: rgb(var(--k-mg, 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(var(--k-tx, 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(var(--k-mg, 224 60 255) / 60%); border-radius: 2px; background: rgb(var(--k-bg2, 10 8 32));
  box-shadow: 0 0 16px rgb(var(--k-mg, 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 var(--k-fd, "Orbitron"), system-ui, sans-serif; letter-spacing: .16em; text-transform: uppercase; color: rgb(var(--k-cy, 34 228 255)); }
.gst-game { margin: 0; font: 800 18px/1.2 var(--k-fd, "Orbitron"), system-ui, sans-serif; color: #fff; }
.gst-plat { margin: 0; font-size: 12.5px; color: rgb(var(--k-cy-hi, 169 243 255)); }
.gst-left { display: flex; align-items: center; gap: 5px; margin: 2px 0 0; font-size: 12.5px; color: rgb(var(--k-mg-hi, 243 179 255)); }
.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(var(--k-ln, 120 140 255) / 18%); border-radius: 2px;
  background: linear-gradient(180deg, rgb(255 255 255 / 6%), rgb(255 255 255 / 0%) 60%), rgb(var(--k-bg1, 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(var(--k-tx, 215 224 240) / 60%); }
.gst-r3 { border-color: rgb(224 160 112 / 60%); }
.gst-row.is-me { border-left: 3px solid rgb(var(--k-mg, 224 60 255)); }
.gst-rank { font: 800 14px/1 var(--k-fd, "Orbitron"), system-ui, sans-serif; color: rgb(var(--k-cy, 34 228 255)); }
.gst-r1 .gst-rank { color: #ffd76a; } .gst-r2 .gst-rank { color: rgb(var(--k-tx, 215 224 240)); } .gst-r3 .gst-rank { color: #e0a070; }
.gst-who { display: flex; flex-direction: column; min-width: 0; }
.gst-pts { font: 700 13px/1 var(--k-fd, "Orbitron"), system-ui, sans-serif; color: rgb(var(--k-mg-hi, 243 179 255)); 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(var(--k-ln, 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(var(--k-ln, 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(var(--k-mg, 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(var(--k-mg, 224 60 255) / 16%), transparent 70%),
    linear-gradient(135deg, rgb(var(--k-bg3, 16 12 44) / 92%), rgb(var(--k-bg1, 7 6 22) / 94%));
  box-shadow: 0 0 22px rgb(var(--k-mg, 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, rgb(var(--k-cy, 34 228 255)), rgb(var(--k-bl, 79 123 255)) 45%, rgb(var(--k-mg, 224 60 255)));
  color: #fff; font: 700 12px/1 var(--k-fd, "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(var(--k-ln, 120 140 255) / 32%); border-radius: 2px;
  background: rgb(var(--k-bg1, 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: rgb(var(--k-cy-hi, 169 243 255)); }
.gst-banner .gsl-idle { font-size: 11.5px; color: rgb(var(--k-tx, 215 222 255) / 55%); }
.gst-banner .gsl-empty { padding: 16px; text-align: center; color: rgb(var(--k-tx, 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: rgb(var(--k-tx, 215 224 240)); filter: drop-shadow(0 0 4px rgb(var(--k-tx, 215 224 240) / 60%)); }
.gst-bronze { color: #e0a070; filter: drop-shadow(0 0 4px rgb(224 160 112 / 60%)); }
.gst-top10 { color: rgb(var(--k-cy, 34 228 255)); filter: drop-shadow(0 0 4px rgb(var(--k-cy, 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(var(--k-ln, 120 140 255) / 22%); border-radius: 2px; background: rgb(var(--k-bg1, 5 4 15) / 45%); }
.gst-count .mdi { font-size: 22px; }
.gst-count b { font: 800 16px/1 var(--k-fd, "Orbitron"), system-ui, sans-serif; color: #fff; }
.gst-count span { font-size: 10.5px; color: rgb(var(--k-tx, 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(var(--k-ln, 120 140 255) / 18%); border-radius: 2px; background: rgb(var(--k-bg1, 5 4 15) / 45%); font-size: 13px; color: rgb(var(--k-tx, 232 235 255)); }
.gst-trophy .gsl-idle { margin-left: auto; font-size: 11.5px; color: rgb(var(--k-tx, 215 222 255) / 55%); }
.gst-trophy .mdi { font-size: 18px; }

/* reviews.css */
/* GS - GameScape Online: member ratings & reviews on game pages. */
.gsrv {
  --gsl-cyan: rgb(var(--k-cy, 34 228 255));
  --gsl-grad: linear-gradient(90deg, rgb(var(--k-cy, 34 228 255)) 0%, rgb(var(--k-bl, 79 123 255)) 45%, rgb(var(--k-mg, 224 60 255)) 100%);
  margin: 14px 0 18px;
  padding: 16px 18px;
  border: 1px solid rgb(var(--k-cy, 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(var(--k-bg3, 16 12 44) / 92%), rgb(var(--k-bg1, 7 6 22) / 94%));
  box-shadow: 0 0 18px rgb(var(--k-cy, 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: rgb(var(--k-tx, 232 235 255));
}
.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 var(--k-fd, "Orbitron"), system-ui, sans-serif; letter-spacing: .2em; text-transform: uppercase; color: #fff; text-shadow: 0 0 10px rgb(var(--k-cy, 34 228 255) / 45%); }
.gsrv-stat { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; font-size: 13.5px; color: rgb(var(--k-tx, 215 222 255) / 75%); }
.gsrv-pct { font: 800 18px/1 var(--k-fd, "Orbitron"), system-ui, sans-serif; color: #fff; }
.gsrv-up { color: rgb(var(--k-cy, 34 228 255)); } .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(var(--k-ln, 120 140 255) / 22%); border-radius: 2px; background: rgb(var(--k-bg1, 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(var(--k-ln, 120 140 255) / 32%); border-radius: 2px; background: rgb(var(--k-bg1, 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: rgb(var(--k-cy, 34 228 255)); outline: none; }
.gsrv-vote--up[aria-pressed="true"] { border-color: rgb(var(--k-cy, 34 228 255)); background: rgb(var(--k-cy, 34 228 255) / 18%); box-shadow: 0 0 12px rgb(var(--k-cy, 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(var(--k-ln, 120 140 255) / 30%); border-radius: 2px; background: rgb(var(--k-bg1, 5 4 15) / 70%); color: #fff; font: 400 14px/1.45 "Exo 2", system-ui, sans-serif; }
.gsrv-text:focus { border-color: rgb(var(--k-cy, 34 228 255)); outline: none; box-shadow: 0 0 12px rgb(var(--k-cy, 34 228 255) / 30%); }
.gsrv-row { display: flex; align-items: center; gap: 8px; }
.gsrv-count { margin-right: auto; font-size: 11.5px; color: rgb(var(--k-tx, 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 var(--k-fd, "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(var(--k-ln, 120 140 255) / 32%); background: rgb(var(--k-bg1, 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(var(--k-ln, 120 140 255) / 18%); border-left: 3px solid rgb(var(--k-cy, 34 228 255)); border-radius: 2px; background: rgb(var(--k-bg1, 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: rgb(var(--k-cy, 34 228 255)); } .gsrv-item--down .gsrv-meta > .mdi { color: #ff6fa3; }
.gsrv-meta .gsl-userlink { all: unset; cursor: pointer; font-weight: 700; font-size: 13px; color: rgb(var(--k-cy-hi, 169 243 255)); }
.gsrv-meta .gsl-userlink:hover, .gsrv-meta .gsl-userlink:focus-visible { text-decoration: underline; }
.gsrv-time { margin-left: auto; font-size: 11px; color: rgb(var(--k-tx, 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(var(--k-tx, 215 222 255) / 70%); }
.gsb-points b { font: 800 16px/1 var(--k-fd, "Orbitron"), system-ui, sans-serif; color: #fff; text-shadow: 0 0 10px rgb(var(--k-cy, 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(var(--k-ln, 120 140 255) / 18%); border-radius: 2px; background: rgb(var(--k-bg1, 5 4 15) / 45%);
  font-family: "Exo 2", system-ui, sans-serif;
}
.gsb--silver { --tier: rgb(var(--k-tx, 215 224 240)); } .gsb--gold { --tier: #ffd76a; } .gsb--neon { --tier: rgb(var(--k-cy, 34 228 255)); }
.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(var(--k-bg1, 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, rgb(var(--k-cy, 34 228 255)), rgb(var(--k-bl, 79 123 255)) 50%, rgb(var(--k-mg, 224 60 255))); border-color: transparent; }
.gsb.is-locked .gsb-ic { filter: grayscale(1); opacity: .45; }
.gsb.is-locked .gsb-name { color: rgb(var(--k-tx, 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(var(--k-tx, 215 222 255) / 70%); }
.gsb-meta { font-size: 10.5px; color: var(--tier); }
.gsb.is-locked .gsb-meta { color: rgb(var(--k-tx, 215 222 255) / 50%); }
.gsb-bar { display: block; height: 4px; margin: 3px 0 1px; border-radius: 1px; background: rgb(var(--k-ln, 120 140 255) / 18%); overflow: hidden; }
.gsb-bar i { display: block; height: 100%; background: linear-gradient(90deg, rgb(var(--k-cy, 34 228 255)), rgb(var(--k-mg, 224 60 255))); }
.gsb-tier--bronze { color: #e0a070; } .gsb-tier--silver { color: rgb(var(--k-tx, 215 224 240)); } .gsb-tier--gold { color: #ffd76a; } .gsb-tier--neon { color: rgb(var(--k-cy, 34 228 255)); }
.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(var(--k-bg3, 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 var(--k-fd, "Orbitron"), system-ui, sans-serif; }
.gsb-eyebrow { font: 700 10px/1 var(--k-fd, "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; } }

/* playability.css */
/* "This game does not work in the browser" note on game pages (playability.js) */
.gs-noplay { margin: 12px 0; padding: 10px 14px; border: 1px solid rgba(255, 77, 122, .6); border-radius: 2px; background: rgba(255, 77, 122, .1); color: #ffe3ea; font: 500 14px/1.45 "Exo 2", system-ui, sans-serif; }
.gs-noplay b { color: #ff8fab; }
.gs-noplay--live { position: fixed; z-index: 100000; left: 50%; top: 76px; transform: translateX(-50%); width: min(560px, calc(100vw - 32px)); margin: 0; background: #2a0d1c; box-shadow: 0 8px 30px rgba(0, 0, 0, .6); }
/* tags from the play test: green = runs, yellow = plays with issues */
.gs-playtag { display: inline-flex; align-items: center; gap: 7px; margin: 10px 0; padding: 5px 12px; border-radius: 2px; font: 600 13px/1.3 "Exo 2", system-ui, sans-serif; letter-spacing: .3px; }
.gs-playtag::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; box-shadow: 0 0 8px currentColor; }
.gs-playtag--ok { color: #5dffa0; border: 1px solid rgba(93, 255, 160, .55); background: rgba(93, 255, 160, .1); }
.gs-playtag--warn { color: #ffd84d; border: 1px solid rgba(255, 216, 77, .6); background: rgba(255, 216, 77, .12); }
.gs-noplay--front { border-color: rgb(var(--k-cy, 37 230 255) / .5); background: rgb(var(--k-cy, 37 230 255) / .08); color: rgb(var(--k-cy-hi, 227 249 255)); }
.gs-noplay--front b { color: rgb(var(--k-cy, 125 234 255)); }
/* "Multiplayer room" button on games with a GameScape co-op layer (apple2-play.js) */
html.r-v2 .gs-coop-room { width: auto !important; padding-inline: 14px !important; gap: 8px; color: rgb(var(--k-cy, 37 230 255)) !important; border-color: rgb(var(--k-cy, 37 230 255) / .6) !important; white-space: nowrap; text-decoration: none; }
html.r-v2 .gs-coop-room:hover { background: rgb(var(--k-cy, 37 230 255) / .14) !important; }

/* messenger.css */
/* GS - GameScape Online: the Messenger (messenger.js), in the style of the old Yahoo! Messenger: a light window with a
   purple title bar, a buddy list with yellow smileys, small chat windows along the bottom. */
.ym { --ym-purple: #5b2a9d; --ym-purple2: #7b3fc4; --ym-yellow: #ffd21f; --ym-ink: #1d1530; --ym-line: #c9bfe0; --ym-line2: #e4def2; --ym-bg: #f4f1fb; --ym-panel: #ece6f8; --ym-paper: #fff; --ym-hover: #fff7c2; --ym-note: #6b6480; --ym-them: #c0182a; --ym-self: #1a3fb0; --ym-edge: #2c1458; font: calc(12.5px * var(--ym-z, 1.14))/1.35 Tahoma, Verdana, "Segoe UI", sans-serif; color: var(--ym-ink); }
.ym button { font: inherit; cursor: pointer; }
.ym-launch { position: fixed; right: 16px; bottom: 16px; z-index: 70; display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 14px 0 8px; border: 2px solid #fff; border-radius: 22px;
  background: linear-gradient(180deg, var(--ym-purple2), var(--ym-purple)); color: #fff; font-weight: 700; box-shadow: 0 6px 18px rgb(0 0 0 / 55%); }
.ym-launch:hover, .ym-launch:focus-visible { filter: brightness(1.12); outline: 2px solid var(--ym-yellow); outline-offset: 2px; }
.ym-launch.has-new { animation: ym-pulse 1.6s ease-in-out infinite; }
.ym-face { flex: none; display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff6a8, var(--ym-yellow) 60%, #e0a800); color: #3a2a00;
  font: 700 calc(9px * var(--ym-z, 1.14))/1 Tahoma, sans-serif; letter-spacing: -1px; transform: rotate(90deg); box-shadow: inset 0 0 0 1px #b88a00; }
.ym-face.is-away { background: #c9c9d2; box-shadow: inset 0 0 0 1px #8d8d99; color: #55555f; }
.ym-face--big { width: 28px; height: 28px; font-size: calc(14px * var(--ym-z, 1.14)); }
.ym-count { flex: none; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: #e8112d; color: #fff; font: 700 calc(11px * var(--ym-z, 1.14))/18px Tahoma, sans-serif; text-align: center; }
.ym-count--launch { position: absolute; top: -6px; right: -4px; border: 2px solid #fff; height: 22px; line-height: 18px; }
.ym-count[hidden] { display: none; }

.ym-win { position: fixed; right: 16px; bottom: 70px; z-index: 70; width: 264px; height: min(580px, calc(100vh - 120px)); display: flex; flex-direction: column; border: 1px solid var(--ym-edge); border-radius: 6px 6px 3px 3px;
  background: var(--ym-bg); box-shadow: 0 14px 40px rgb(0 0 0 / 65%); overflow: hidden; }
.ym-win[hidden] { display: none; }
.ym-bar { flex: none; display: flex; align-items: center; gap: 6px; height: 28px; padding: 0 4px 0 7px; background: linear-gradient(180deg, var(--ym-purple2), var(--ym-purple)); color: #fff; }
.ym-bar__title { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; border: 0; background: none; color: #fff; font-weight: 700; text-align: left; padding: 0; }
button.ym-bar__title:hover, button.ym-bar__title:focus-visible { text-decoration: underline; outline: none; }
.ym-bar__btn { flex: none; width: 22px; height: 20px; border: 1px solid rgb(255 255 255 / 55%); border-radius: 3px; background: rgb(255 255 255 / 14%); color: #fff; font: 700 calc(13px * var(--ym-z, 1.14))/1 Tahoma, sans-serif; padding: 0; }
.ym-bar__btn:hover, .ym-bar__btn:focus-visible { background: #e8112d; outline: none; }
.ym-me { flex: none; display: flex; align-items: center; gap: 7px; padding: 8px 9px; background: linear-gradient(180deg, var(--ym-paper), var(--ym-panel)); border-bottom: 1px solid var(--ym-line); }
.ym-me b { font-size: calc(13px * var(--ym-z, 1.14)); }
.ym-in { height: 26px; padding: 0 7px; border: 1px solid #9c8fbd; border-radius: 3px; background: var(--ym-paper); color: var(--ym-ink); font: inherit; min-width: 0; }
.ym-in:focus { outline: 2px solid var(--ym-yellow); outline-offset: 0; border-color: var(--ym-purple); }
.ym-find { flex: none; margin: 7px 8px; }
.ym-list { flex: 1; min-height: 0; overflow-y: auto; background: var(--ym-paper); border-top: 1px solid var(--ym-line); border-bottom: 1px solid var(--ym-line); scrollbar-width: thin; scrollbar-color: #b9a9dc #fff; }
.ym-list[hidden] { display: none; }
.ym-group { display: block; width: 100%; margin: 0; padding: 5px 8px 4px 20px; border: 0; border-bottom: 1px solid var(--ym-line2); background: var(--ym-panel); color: var(--ym-ink); font-weight: 700; text-align: left; position: relative; }
.ym-group::before { content: "\25be"; position: absolute; left: 7px; }
.ym-group.is-shut::before { content: "\25b8"; }
.ym-group--flat { padding-left: 8px; } .ym-group--flat::before { content: none; }
button.ym-group:hover, button.ym-group:focus-visible { background: var(--ym-hover); outline: none; }
.ym-buddy { display: flex; align-items: center; gap: 7px; width: 100%; padding: 5px 8px 5px 14px; border: 0; background: none; color: var(--ym-ink); text-align: left; }
.ym-buddy:hover, .ym-buddy:focus-visible { background: var(--ym-hover); outline: none; }
.ym-buddy.has-new .ym-buddy__name { font-weight: 700; }
.ym-buddy__name { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.ym-buddy__note { flex: none; color: var(--ym-note); font-size: calc(11px * var(--ym-z, 1.14)); font-style: italic; }
.ym-req { display: flex; align-items: center; gap: 6px; padding: 5px 8px 5px 14px; border-bottom: 1px dotted var(--ym-line2); }
.ym-link { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; padding: 0; border: 0; background: none; color: var(--ym-self); text-align: left; text-decoration: underline; }
.ym-link:hover, .ym-link:focus-visible { color: var(--ym-purple); outline: none; }
.ym-btn { flex: none; height: 22px; padding: 0 8px; border: 1px solid #8f84a8; border-radius: 3px; background: linear-gradient(180deg, var(--ym-paper), var(--ym-panel)); color: var(--ym-ink); }
.ym-btn:hover, .ym-btn:focus-visible { border-color: var(--ym-purple); outline: none; background: var(--ym-hover); }
.ym-btn:disabled { opacity: .55; cursor: default; }
.ym-btn--go { border-color: #b88a00; background: linear-gradient(180deg, #ffe873, var(--ym-yellow)); font-weight: 700; }
.ym-empty { margin: 0; padding: 14px 12px; color: var(--ym-note); text-align: center; list-style: none; }
.ym-foot { flex: none; display: flex; align-items: center; gap: 8px; padding: 6px 8px; background: var(--ym-panel); }
.ym-foot__note { color: var(--ym-note); font-size: calc(11px * var(--ym-z, 1.14)); }
.ym-menu { position: absolute; left: 8px; bottom: 38px; z-index: 2; display: grid; min-width: 160px; border: 1px solid #8f84a8; background: var(--ym-paper); box-shadow: 0 6px 18px rgb(0 0 0 / 35%); }
.ym-menu[hidden] { display: none; }
.ym-menu__item { padding: 7px 10px; border: 0; border-bottom: 1px solid #ece6f8; background: none; color: var(--ym-ink); text-align: left; }
.ym-menu__item:hover, .ym-menu__item:focus-visible { background: var(--ym-purple); color: #fff; outline: none; }

/* a conversation: small windows side by side along the bottom, to the left of the buddy list */
.ym-chat { position: fixed; bottom: 16px; right: calc(296px + var(--slot, 0) * 292px); z-index: 69; width: 280px; height: 340px; display: flex; flex-direction: column; border: 1px solid var(--ym-edge); border-radius: 6px 6px 3px 3px;
  background: var(--ym-bg); box-shadow: 0 14px 40px rgb(0 0 0 / 65%); overflow: hidden; }
.ym-chat.is-mini { height: 28px; }
.ym-chat.is-mini > :not(.ym-bar) { display: none; }
.ym-chat.has-new .ym-bar { background: linear-gradient(180deg, #ff9d2e, #e8112d); }
.ym-tools { flex: none; display: flex; gap: 6px; padding: 4px 6px; background: var(--ym-panel); border-bottom: 1px solid var(--ym-line); }
.ym-buzz { height: 20px; padding: 0 7px; border: 1px solid #b0182a; border-radius: 3px; background: linear-gradient(180deg, #ff6b6b, #e8112d); color: #fff; font: 700 calc(10.5px * var(--ym-z, 1.14))/1 Tahoma, sans-serif; letter-spacing: .04em; }
.ym-buzz:hover, .ym-buzz:focus-visible { filter: brightness(1.12); outline: 2px solid var(--ym-yellow); }
.ym-log { flex: 1; min-height: 0; margin: 0; padding: 6px 8px; overflow-y: auto; list-style: none; background: var(--ym-paper); font-size: calc(13px * var(--ym-z, 1.14)); line-height: 1.4; scrollbar-width: thin; scrollbar-color: #b9a9dc #fff; }
.ym-line { margin: 0 0 3px; overflow-wrap: anywhere; color: var(--ym-ink); }
.ym-line b { color: var(--ym-them); } .ym-line.is-me b { color: var(--ym-self); }
.ym-line--buzz { color: #e8112d; font-weight: 700; } .ym-line--note { color: var(--ym-note); font-style: italic; }
.ym-send { flex: none; display: flex; gap: 6px; padding: 6px; background: var(--ym-panel); border-top: 1px solid var(--ym-line); }
.ym-send .ym-in { flex: 1; height: 28px; font-size: calc(13px * var(--ym-z, 1.14)); }
.ym-send .ym-btn { height: 28px; }
.ym-shake { animation: ym-shake .5s linear; }
@keyframes ym-shake { 10%, 50%, 90% { transform: translate(-6px, 2px); } 30%, 70% { transform: translate(6px, -2px); } }
@keyframes ym-pulse { 50% { box-shadow: 0 0 0 6px rgb(255 210 31 / 55%), 0 6px 18px rgb(0 0 0 / 55%); } }
@media (width < 900px) { .ym-chat { right: 12px; left: 12px; width: auto; bottom: 70px; height: min(360px, 55vh); } .ym-chat:not(:last-of-type) { display: none; } .ym-win { right: 12px; left: 12px; width: auto; }
  .ym-launch__label { display: none; } .ym-launch { padding: 0 8px; } }
@media (prefers-reduced-motion: reduce) { .ym-shake, .ym-launch.has-new { animation: none; } }
/* the old side panel is now only "More" (game rooms, events, tournament, activity): no launcher of its own, no chat or people tabs */
.gsl-fab { display: none !important; }
.gsl-panel { bottom: 76px; }

/* the Connection Room */
.ym-roomrow { border-bottom: 1px solid var(--ym-line2); background: var(--ym-hover); }
.ym-roomrow small { color: var(--ym-note); font-size: calc(11px * var(--ym-z, 1.14)); font-style: italic; }
.ym-face--room { transform: none; background: linear-gradient(180deg, var(--ym-purple2), var(--ym-purple)); color: #fff; box-shadow: inset 0 0 0 1px #2c1458; font-size: calc(11px * var(--ym-z, 1.14)); letter-spacing: 0; }
.ym-chat--room { width: 340px; height: 420px; }
.ym-tools { align-items: center; }
.ym-tools__note { flex: 1; color: var(--ym-note); font-size: calc(11px * var(--ym-z, 1.14)); font-style: italic; }
.ym-who { padding: 0; border: 0; background: none; color: var(--ym-them); font-weight: 700; }
.ym-line.is-me .ym-who { color: var(--ym-self); }
.ym-who:hover, .ym-who:focus-visible { text-decoration: underline; outline: none; }
.ym-url { color: var(--ym-self); text-decoration: underline; overflow-wrap: anywhere; }
.ym-del { float: right; width: 16px; height: 16px; padding: 0; border: 0; background: none; color: #b0182a; font: 700 calc(13px * var(--ym-z, 1.14))/1 Tahoma, sans-serif; opacity: .45; }
.ym-del:hover, .ym-del:focus-visible { opacity: 1; outline: none; }

/* ---- the button sits half way down the right edge; the windows hang beside it ---- */
.ym-launch { top: 50%; bottom: auto; right: 0; transform: translateY(-50%); border-radius: 22px 0 0 22px; border-right: 0; padding-right: 10px; }
.ym-count--launch { top: -8px; right: 6px; }
.ym-win { right: 16px; bottom: auto; top: 50%; transform: translateY(-50%); width: var(--ym-w, 310px); height: var(--ym-h, min(580px, calc(100vh - 120px))); max-width: calc(100vw - 24px); max-height: calc(100vh - 24px); min-width: 220px; min-height: 260px; }
.ym.is-open .ym-launch { display: none; }
.ym-chat { width: var(--ym-cw, 330px); height: var(--ym-ch, 410px); max-width: calc(100vw - 24px); max-height: calc(100vh - 40px); min-width: 220px; }
/* a corner to pull, and the title bar to carry the window somewhere else */
.ym-size { position: absolute; right: 0; bottom: 0; z-index: 3; width: 15px; height: 15px; cursor: nwse-resize; background: linear-gradient(315deg, var(--ym-purple) 0 2px, transparent 2px 4px, var(--ym-purple) 4px 6px, transparent 6px 8px, var(--ym-purple) 8px 10px, transparent 10px); touch-action: none; }
.ym-chat.is-mini .ym-size { display: none; }
.ym-win > .ym-bar, .ym-chat > .ym-bar { cursor: move; touch-action: none; user-select: none; }
.ym .ym-win.is-placed, .ym .ym-chat.is-placed { right: auto; bottom: auto; transform: none; }
.ym-chat--room { width: var(--ym-rw, 470px); height: var(--ym-rh, 430px); }
/* the Connection Room, IRC style: channel tabs, a log in fixed-width type, the nick list */
.ym-tabs { flex: none; display: flex; gap: 2px; padding: 3px 4px 0; overflow-x: auto; background: var(--ym-panel); border-bottom: 1px solid var(--ym-line); scrollbar-width: none; }
.ym-tab { flex: none; display: inline-flex; align-items: center; gap: 4px; padding: 3px 7px; border: 1px solid var(--ym-line); border-bottom: 0; border-radius: 4px 4px 0 0; background: var(--ym-bg); color: var(--ym-note); font: calc(12px * var(--ym-z, 1.14))/1.3 ui-monospace, Consolas, monospace; }
.ym-tab.on { background: var(--ym-paper); color: var(--ym-ink); font-weight: 700; }
.ym-tab.has-new { color: #e8112d; }
.ym-tab:hover, .ym-tab:focus-visible { color: var(--ym-ink); outline: none; text-decoration: underline; }
.ym-irc-body { flex: 1; min-height: 0; display: flex; }
.ym-irc-body .ym-log { font: calc(12.5px * var(--ym-z, 1.14))/1.45 ui-monospace, Consolas, "DejaVu Sans Mono", monospace; }
.ym-nicks { flex: none; width: 112px; margin: 0; padding: 5px 6px; overflow-y: auto; list-style: none; background: var(--ym-bg); border-left: 1px solid var(--ym-line); font: calc(12px * var(--ym-z, 1.14))/1.5 ui-monospace, Consolas, monospace; color: var(--ym-ink); scrollbar-width: thin; }
.ym-nicks li:first-child { color: var(--ym-note); font-size: calc(10.5px * var(--ym-z, 1.14)); text-transform: uppercase; letter-spacing: .05em; }
.ym-nicks button { padding: 0; border: 0; background: none; color: inherit; font: inherit; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ym-nicks button:hover, .ym-nicks button:focus-visible { color: var(--ym-self); text-decoration: underline; outline: none; }
.ym-irc__t { color: var(--ym-note); }
.ym-irc--act { font-style: italic; }
.ym-line--note { white-space: pre-wrap; }
.ym-opts .ym-btn { justify-self: start; }
/* quick links and options */
.ym-links { flex: none; display: flex; flex-wrap: wrap; gap: 4px 10px; padding: 5px 9px; background: var(--ym-panel); border-bottom: 1px solid var(--ym-line); font-size: calc(11.5px * var(--ym-z, 1.14)); }
.ym-links a, .ym-links button { padding: 0; border: 0; background: none; color: var(--ym-self); text-decoration: underline; font: inherit; }
.ym-links a:hover, .ym-links button:hover, .ym-links a:focus-visible, .ym-links button:focus-visible { color: var(--ym-purple); outline: none; }
.ym-opts { position: absolute; right: 6px; top: 30px; z-index: 4; display: grid; gap: 6px; width: 190px; padding: 8px; border: 1px solid var(--ym-edge); background: var(--ym-paper); color: var(--ym-ink); box-shadow: 0 6px 18px rgb(0 0 0 / 35%); }
.ym-opts[hidden] { display: none; }
.ym-opts b { font-size: calc(11px * var(--ym-z, 1.14)); text-transform: uppercase; letter-spacing: .06em; color: var(--ym-note); }
.ym-skins { display: flex; flex-wrap: wrap; gap: 5px; }
.ym-skin { width: 26px; height: 26px; border: 2px solid var(--ym-line); border-radius: 50%; padding: 0; }
.ym-skin.on { border-color: var(--ym-ink); box-shadow: 0 0 0 2px var(--ym-yellow); }
.ym-opts label { display: flex; align-items: center; gap: 6px; }
/* smileys */
.ym-smileys { display: flex; flex-wrap: wrap; gap: 2px; padding: 4px 6px; background: var(--ym-paper); border-bottom: 1px solid var(--ym-line); }
.ym-smileys[hidden] { display: none; }
.ym-smileys button { width: 26px; height: 26px; padding: 0; border: 1px solid transparent; background: none; font-size: calc(17px * var(--ym-z, 1.14)); line-height: 1; }
.ym-smileys button:hover, .ym-smileys button:focus-visible { border-color: var(--ym-purple); background: var(--ym-hover); outline: none; }
/* ---- looks: the shape of the windows; a skin (below) may recolour them ---- */
.ym-looks { display: flex; flex-wrap: wrap; gap: 4px; }
.ym-looks .ym-btn.on { border-color: var(--ym-ink); box-shadow: 0 0 0 2px var(--ym-yellow); font-weight: 700; }
/* AOL: grey system window, deep blue title bar, yellow figure */
.ym.ym-look-aol { --ym-purple: #0a246a; --ym-purple2: #2a5bd0; --ym-yellow: #ffcc00; --ym-line: #9a9a9a; --ym-line2: #d4d0c8; --ym-bg: #d4d0c8; --ym-panel: #d4d0c8; --ym-paper: #fff; --ym-hover: #fff2a8; --ym-note: #555; --ym-them: #c00000; --ym-self: #0000c0; --ym-edge: #404040; --ym-ink: #000; }
.ym.ym-look-aol .ym-win, .ym.ym-look-aol .ym-chat { border-radius: 0; border: 2px outset #f4f2ec; font-family: "MS Sans Serif", Tahoma, Arial, sans-serif; box-shadow: 2px 2px 0 rgb(0 0 0 / 55%); }
.ym.ym-look-aol .ym-bar { background: linear-gradient(90deg, var(--ym-purple), var(--ym-purple2)); height: 24px; }
.ym.ym-look-aol .ym-bar__btn, .ym.ym-look-aol .ym-btn { border: 2px outset var(--ym-line2); border-radius: 0; background: var(--ym-panel); color: var(--ym-ink); }
.ym.ym-look-aol .ym-btn--go { background: var(--ym-yellow); color: #111; }
.ym.ym-look-aol .ym-face { border-radius: 3px 3px 9px 9px; }
.ym.ym-look-aol .ym-list, .ym.ym-look-aol .ym-log, .ym.ym-look-aol .ym-in { border: 2px inset #f4f2ec; border-radius: 0; }
.ym.ym-look-aol .ym-launch { border-radius: 0; border: 2px outset #f4f2ec; border-right: 0; }
/* MSN: soft blue glass, rounded, green figure */
.ym.ym-look-msn { --ym-purple: #3b78c9; --ym-purple2: #9cc4f2; --ym-yellow: #7ed321; --ym-line: #a9c6e8; --ym-line2: #d6e5f7; --ym-bg: #eef5fd; --ym-panel: #dce9f9; --ym-paper: #fff; --ym-hover: #e2f6c8; --ym-note: #5d7391; --ym-them: #1c4f9c; --ym-self: #2f7d12; --ym-edge: #4d7fc4; --ym-ink: #1b2a41; }
.ym.ym-look-msn .ym-win, .ym.ym-look-msn .ym-chat { border-radius: 9px 9px 5px 5px; font-family: "Segoe UI", Verdana, Tahoma, sans-serif; }
.ym.ym-look-msn .ym-bar { height: 30px; background: linear-gradient(180deg, var(--ym-purple2) 0, var(--ym-purple2) 45%, var(--ym-purple) 100%); }
.ym.ym-look-msn .ym-bar__title { color: #fff; text-shadow: 0 1px 1px rgb(0 40 100 / 60%); }
.ym.ym-look-msn .ym-btn, .ym.ym-look-msn .ym-bar__btn { border-radius: 10px; }
.ym.ym-look-msn .ym-face { background: radial-gradient(circle at 35% 30%, #d9ffb0, var(--ym-yellow) 60%, #4c9a0c); color: #173d00; }
.ym.ym-look-msn .ym-launch { border-radius: 18px 0 0 18px; }
/* ICQ: light grey panel, green flower figure, flat tabs */
.ym.ym-look-icq { --ym-purple: #5c6f7c; --ym-purple2: #8fa3b0; --ym-yellow: #7bd62a; --ym-line: #b4bfc6; --ym-line2: #d9dfe3; --ym-bg: #eef1f3; --ym-panel: #e1e6e9; --ym-paper: #fff; --ym-hover: #e6f8cf; --ym-note: #65737d; --ym-them: #c0321e; --ym-self: #2a6fb0; --ym-edge: #46565f; --ym-ink: #1e272c; }
.ym.ym-look-icq .ym-win, .ym.ym-look-icq .ym-chat { border-radius: 3px; font-family: Arial, Tahoma, sans-serif; }
.ym.ym-look-icq .ym-bar { height: 26px; background: linear-gradient(180deg, var(--ym-purple2), var(--ym-purple)); }
.ym.ym-look-icq .ym-face { border-radius: 50% 8% 50% 8%; background: radial-gradient(circle at 50% 50%, #ffe14d 0 28%, var(--ym-yellow) 30% 100%); color: transparent; }
.ym.ym-look-icq .ym-face--bot { color: #fff; }
.ym.ym-look-icq .ym-btn, .ym.ym-look-icq .ym-bar__btn { border-radius: 2px; }
.ym.ym-look-icq .ym-launch { border-radius: 4px 0 0 4px; }
/* Trillian: dark glossy blue, thin light type, pill buttons */
.ym.ym-look-trillian { --ym-purple: #0d2238; --ym-purple2: #2c5d8f; --ym-yellow: #5fd0ff; --ym-ink: #e8f2fb; --ym-line: #2b4a6b; --ym-line2: #1d3550; --ym-bg: #102a44; --ym-panel: #153453; --ym-paper: #0b1d30; --ym-hover: #1f4d7a; --ym-note: #9bb7d1; --ym-them: #ffb45e; --ym-self: #7fe0ff; --ym-edge: #5a8fc2; }
.ym.ym-look-trillian .ym-win, .ym.ym-look-trillian .ym-chat { border-radius: 12px; font-family: "Trebuchet MS", "Segoe UI", sans-serif; box-shadow: 0 10px 30px rgb(0 0 0 / 60%), inset 0 1px 0 rgb(255 255 255 / 18%); }
.ym.ym-look-trillian .ym-bar { height: 30px; background: linear-gradient(180deg, var(--ym-purple2) 0, var(--ym-purple2) 48%, var(--ym-purple) 52%); border-radius: 11px 11px 0 0; }
.ym.ym-look-trillian .ym-btn, .ym.ym-look-trillian .ym-bar__btn { border-radius: 11px; color: var(--ym-ink); border-color: var(--ym-edge); background: linear-gradient(180deg, var(--ym-panel), var(--ym-bg)); }
.ym.ym-look-trillian .ym-btn--go { color: #04121f; background: var(--ym-yellow); }
.ym.ym-look-trillian .ym-in { border-radius: 11px; border-color: var(--ym-line); }
.ym.ym-look-trillian .ym-face { background: radial-gradient(circle at 35% 30%, #d6f4ff, var(--ym-yellow) 60%, #1b7fb3); color: #04253a; }
.ym.ym-look-trillian .ym-size { border-radius: 0 0 12px 0; }
.ym.ym-look-trillian .ym-launch { border-radius: 14px 0 0 14px; }
/* ---- skins ---- */
.ym.ym-skin-midnight { --ym-purple: #17103a; --ym-purple2: #3a1b7a; --ym-yellow: #22e4ff; --ym-ink: #eef1ff; --ym-line: #3a3470; --ym-line2: #2a2552; --ym-bg: #0e0b26; --ym-panel: #15113a; --ym-paper: #0a0820; --ym-hover: #24206a; --ym-note: #a9b0e0; --ym-them: #ff7ad9; --ym-self: #6fe7ff; --ym-edge: #6c5cff; }
.ym.ym-skin-cherry { --ym-purple: #a3122a; --ym-purple2: #d81e3a; --ym-line: #efc0c7; --ym-line2: #f7dde1; --ym-bg: #fff3f4; --ym-panel: #fde3e6; --ym-hover: #fff3b0; --ym-edge: #6e0b1c; --ym-them: #7a1fb0; --ym-yellow: #ffd21f; --ym-ink: #1d1530; --ym-paper: #fff; --ym-note: #6b6480; --ym-self: #1a3fb0; }
.ym.ym-skin-graphite { --ym-purple: #2f3540; --ym-purple2: #4a5160; --ym-yellow: #ffb52e; --ym-line: #c6cad2; --ym-line2: #dfe2e7; --ym-bg: #f2f3f5; --ym-panel: #e4e6ea; --ym-hover: #ffeec2; --ym-edge: #1c2028; --ym-them: #b3261e; --ym-self: #1f5fb8; --ym-ink: #1d1530; --ym-paper: #fff; --ym-note: #6b6480; }
.ym.ym-skin-terminal { --ym-purple: #061006; --ym-purple2: #123312; --ym-yellow: #7dff7d; --ym-ink: #b9ffb9; --ym-line: #1f5a1f; --ym-line2: #143a14; --ym-bg: #050c05; --ym-panel: #0a180a; --ym-paper: #020602; --ym-hover: #123a12; --ym-note: #5fbf5f; --ym-them: #ffd75e; --ym-self: #7dffea; --ym-edge: #2fbf2f; }
.ym.ym-skin-arcade { --ym-purple: #2a0540; --ym-purple2: #ff2bd6; --ym-yellow: #fff23d; --ym-ink: #fdf2ff; --ym-line: #7a2a9a; --ym-line2: #4a1668; --ym-bg: #16042a; --ym-panel: #220838; --ym-paper: #0e021c; --ym-hover: #4b0f78; --ym-note: #d7a6f2; --ym-them: #3dfff2; --ym-self: #fff23d; --ym-edge: #ff2bd6; }
.ym.ym-skin-terminal .ym-win, .ym.ym-skin-terminal .ym-chat { font-family: ui-monospace, Consolas, monospace; }
.ym.ym-skin-midnight .ym-btn, .ym.ym-skin-terminal .ym-btn, .ym.ym-skin-arcade .ym-btn { color: var(--ym-ink); border-color: var(--ym-edge); background: var(--ym-panel); }
.ym.ym-skin-midnight .ym-btn--go, .ym.ym-skin-terminal .ym-btn--go, .ym.ym-skin-arcade .ym-btn--go { color: #05040f; background: var(--ym-yellow); }
.ym.ym-skin-midnight .ym-in, .ym.ym-skin-terminal .ym-in, .ym.ym-skin-arcade .ym-in { background: var(--ym-paper); color: var(--ym-ink); border-color: var(--ym-line); }
.ym.ym-skin-ocean { --ym-purple: #0b4f8a; --ym-purple2: #1f86d1; --ym-line: #b5d2ea; --ym-line2: #d9e8f5; --ym-bg: #eef6fc; --ym-panel: #dcebf7; --ym-hover: #fff3b0; --ym-edge: #083b68; --ym-yellow: #ffd21f; --ym-ink: #1d1530; --ym-paper: #fff; --ym-note: #6b6480; --ym-them: #c0182a; --ym-self: #1a3fb0; }
.ym.ym-skin-bubblegum { --ym-purple: #c2187a; --ym-purple2: #ff5fb0; --ym-line: #f3bcd9; --ym-line2: #f9dcec; --ym-bg: #fff0f8; --ym-panel: #ffe1f0; --ym-hover: #fff6b8; --ym-edge: #8a0f56; --ym-self: #7a1fb0; --ym-yellow: #ffd21f; --ym-ink: #1d1530; --ym-paper: #fff; --ym-note: #6b6480; --ym-them: #c0182a; }
.ym.ym-skin-forest { --ym-purple: #1f6b3a; --ym-purple2: #3fa35e; --ym-line: #b9d8c2; --ym-line2: #d9ebde; --ym-bg: #f0f8f2; --ym-panel: #deeee3; --ym-hover: #fff3b0; --ym-edge: #124424; --ym-yellow: #ffd21f; --ym-ink: #1d1530; --ym-paper: #fff; --ym-note: #6b6480; --ym-them: #c0182a; --ym-self: #1a3fb0; }
.ym.ym-skin-sunset { --ym-purple: #b8430f; --ym-purple2: #f08a24; --ym-line: #f0cfae; --ym-line2: #f6e3cf; --ym-bg: #fff6ec; --ym-panel: #fdebd6; --ym-hover: #fff3b0; --ym-edge: #7a2c08; --ym-yellow: #ffd21f; --ym-ink: #1d1530; --ym-paper: #fff; --ym-note: #6b6480; --ym-them: #c0182a; --ym-self: #1a3fb0; }
@media (width < 900px) { .ym-win { top: auto; bottom: 12px; transform: none; height: min(500px, calc(100vh - 100px)); } .ym-chat--room { width: auto; height: min(420px, 60vh); } .ym-nicks { width: 84px; } .ym-size { display: none; } }
/* Media AI */
.ym-face--bot { background: #1f86d1; color: #fff; font: 700 calc(9px * var(--ym-z, 1.14))/1 Tahoma, sans-serif; letter-spacing: 0; }
.ym-botrow small { color: var(--ym-note); font-size: calc(11px * var(--ym-z, 1.14)); font-style: italic; }
.ym-chat--bot { width: var(--ym-cw, 340px); height: var(--ym-ch, 420px); }
.ym-tools--wrap { flex-wrap: wrap; }
.ym-check { margin: 0 0 5px; padding: 3px 6px; border-left: 3px solid var(--ym-line); background: var(--ym-bg); font-size: calc(12.5px * var(--ym-z, 1.14)); }
.ym-check b, .ym-line.ym-check b { color: var(--ym-ink); }
.ym-check--ok { border-left-color: #1f9d4c; } .ym-check--warn { border-left-color: #e0a100; } .ym-check--bad { border-left-color: #e8112d; }
.ym-bot b { color: #1f86d1; }
.ym-nicks[hidden] { display: none; }
/* the button can be carried along the edge of the screen (messenger.js dock()) */
.ym .ym-launch { touch-action: none; cursor: grab; border: 2px solid #fff; }
.ym .ym-launch.is-carried { cursor: grabbing; transform: none !important; right: auto !important; bottom: auto !important; opacity: .9; animation: none; }
.ym .ym-launch.ym-dock-right { border-radius: 22px 0 0 22px; border-right: 0; }
.ym .ym-launch.ym-dock-left { border-radius: 0 22px 22px 0; border-left: 0; flex-direction: row-reverse; padding: 0 8px 0 10px; }
.ym .ym-launch.ym-dock-top { border-radius: 0 0 22px 22px; border-top: 0; }
.ym .ym-launch.ym-dock-bottom { border-radius: 22px 22px 0 0; border-bottom: 0; }
.ym .ym-launch.ym-dock-left .ym-count--launch { right: auto; left: 6px; }
.ym .ym-launch.ym-dock-top .ym-count--launch { top: auto; bottom: -8px; }
.ym-tab--new { width: 110px; background: var(--ym-paper); color: var(--ym-ink); outline: none; }

/* mute and block: the small menu on a name, and the rows of who is muted or blocked */
.ym-menu { position: fixed; z-index: 100001; width: 232px; padding: 4px; border: 1px solid var(--ym-line2, #8f84a8); border-radius: 4px; background: var(--ym-paper, #fff); color: var(--ym-ink, #1c1830); box-shadow: 0 8px 24px rgb(0 0 0 / 45%); font: calc(13px * var(--ym-z, 1.14))/1.35 Tahoma, "Segoe UI", system-ui, sans-serif; }
.ym-menu__who { margin: 0; padding: 5px 8px 4px; font-weight: 700; border-bottom: 1px solid var(--ym-line2, #ccc); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ym-menu__note { margin: 0; padding: 6px 8px; font-size: calc(12px * var(--ym-z, 1.14)); }
.ym-menu__item { display: block; width: 100%; padding: 6px 8px; border: 0; border-radius: 3px; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.ym-menu__item:hover, .ym-menu__item:focus-visible { background: var(--ym-hover, #e9e4f5); outline: none; }
.ym-menu__item--bad { color: #b3122f; font-weight: 700; }
.ym-more { padding: 0 6px; font-weight: 700; }
.ym-link--plain { text-decoration: none; cursor: default; }

/* making and finding chat rooms with buttons */
.ym-tab--act { color: var(--ym-self); font-weight: 700; }
.ym-roompanel { flex: none; padding: 6px 6px 7px; background: var(--ym-panel); border-bottom: 1px solid var(--ym-line); }
.ym-roomform { display: flex; gap: 5px; align-items: center; }
.ym-roomform .ym-in { flex: 1; min-width: 0; height: 24px; }
.ym-roomform .ym-btn { height: 24px; }
.ym-roomnote { margin: 5px 2px 0; font-size: calc(11px * var(--ym-z, 1.14)); color: var(--ym-note); }
.ym-roomlist { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.ym-roomlist .ym-btn.is-in { font-weight: 700; border-color: var(--ym-purple); }

/* status (Available, Away, Busy, Invisible) with a line of the member's own, and "is typing" */
.ym-status { flex: none; margin-left: auto; max-width: 150px; height: 22px; padding: 0 2px; border: 1px solid var(--ym-line2); border-radius: 3px; background: var(--ym-paper); color: var(--ym-ink); font: inherit; font-size: calc(11px * var(--ym-z, 1.14)); }
.ym-status__text { flex: none; display: block; width: calc(100% - 16px); margin: 0 8px 5px; height: 22px; font-size: calc(11px * var(--ym-z, 1.14)); font-style: italic; }
.ym-buddy__status { font-weight: 400; font-style: italic; color: var(--ym-note); }
.ym-buddy.is-away .ym-face, .ym-buddy.is-busy .ym-face { filter: grayscale(.7); opacity: .75; }
.ym-typing { flex: none; margin: 0; padding: 2px 8px; font-size: calc(11px * var(--ym-z, 1.14)); font-style: italic; color: var(--ym-note); background: var(--ym-paper); }
.ym-look-msn .ym-bar__title { color: #0f3a66; text-shadow: 0 1px 0 rgb(255 255 255 / 55%); }

/* display pictures, unsend, Seen */
.ym-face--pic { padding: 0; overflow: hidden; background: none; } .ym-face--pic img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ym-line { position: relative; } .ym-unsend { position: absolute; right: 0; top: 0; width: 20px; height: 20px; padding: 0; border: 0; border-radius: 3px; background: none; color: var(--ym-note); opacity: 0; line-height: 1; }
.ym-line:hover .ym-unsend, .ym-unsend:focus-visible { opacity: 1; } .ym-unsend:hover, .ym-unsend:focus-visible { background: var(--ym-hover); color: var(--ym-them); outline: none; }
.ym-seen { list-style: none; text-align: right; color: var(--ym-note); font-size: calc(10.5px * var(--ym-z, 1.14)); font-style: italic; padding-right: 4px; }

/* groups */
.ym-gwho { margin: 0; padding: 3px 8px; font-size: calc(11px * var(--ym-z, 1)); color: var(--ym-note, #6a6480); border-bottom: 1px solid var(--ym-line, #d9d2ea); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ym-gask { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 6px 8px; background: var(--ym-panel, #f3effb); border-bottom: 1px solid var(--ym-line, #d9d2ea); font-size: calc(12px * var(--ym-z, 1)); color: var(--ym-ink, #1c1830); }
.ym-gask .ym-in { flex: 1 1 120px; min-width: 0; }
.ym-gnew { display: flex; flex-direction: column; gap: 8px; padding: 10px; overflow-y: auto; flex: 1; color: var(--ym-ink, #1c1830); }
.ym-gpick { margin: 0; padding: 6px 8px; border: 1px solid var(--ym-line, #d9d2ea); max-height: 180px; overflow-y: auto; display: grid; gap: 2px; }
.ym-gpick legend { padding: 0 4px; font-size: calc(12px * var(--ym-z, 1)); color: var(--ym-note, #6a6480); }
.ym-gpick label { display: flex; align-items: center; gap: 6px; min-height: 28px; font-size: calc(13px * var(--ym-z, 1)); }
.ym-newgroup .ym-buddy__name { color: var(--ym-note, #6a6480); }
.ym-buddy__now { display: block; font-size: 11.5px; font-style: normal; opacity: .85; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.ym-npopt { display: flex; gap: 6px; align-items: flex-start; font-size: 12.5px; line-height: 1.35; cursor: pointer; } .ym-npopt input { margin-top: 2px; }
.ym-invite { position: fixed; right: 16px; top: 72px; z-index: 4200; width: min(340px, calc(100vw - 32px)); padding: 16px; border: 1px solid rgb(var(--k-cy, 34 228 255) / 70%); border-radius: 8px; background: rgb(var(--k-bg2, 10 8 32)); color: rgb(var(--k-tx, 215 222 255)); font: 400 14.5px/1.45 "Exo 2", system-ui, sans-serif; box-shadow: 0 18px 60px rgb(0 0 0 / 70%); }
.ym-invite b { display: block; color: #fff; font-size: 16px; } .ym-invite p { margin: 6px 0 12px; } .ym-invite__row { display: flex; gap: 8px; flex-wrap: wrap; }
.ym-sect { margin: 8px 8px 2px; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; opacity: .7; }
.ym-lounge.is-on .ym-face--room { box-shadow: 0 0 0 2px #4dffb5; } .ym-lounge__x { margin-left: 4px; padding: 0 6px; border-radius: 3px; font-weight: 700; opacity: .7; cursor: pointer; } .ym-lounge__x:hover, .ym-lounge__x:focus-visible { opacity: 1; background: rgb(255 77 122 / 25%); outline: none; }
.ym-loungeform { display: flex; gap: 6px; padding: 4px 8px; } .ym-loungeform input { flex: 1; min-width: 0; }

/* the open window in its usual place: the page stands beside it (messenger.js sets the class and the width) */
html.ym-side body { padding-right: var(--ym-side, 342px) !important; box-sizing: border-box !important; }

/* an admin's link from a member's report (a message) to the reports list */
.ym-line__rep { display: inline-block; margin-left: 2px; padding: 0 6px; border: 1px solid currentColor; border-radius: 3px; font-weight: 700; font-size: .92em; text-decoration: none; white-space: nowrap; }
.ym-line__rep:hover, .ym-line__rep:focus-visible { text-decoration: underline; }

/* 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(var(--k-cy, 34 228 255) / 35%);
  border-radius: 3px;
  background: linear-gradient(100deg, rgb(var(--k-cy, 34 228 255) / 10%), rgb(var(--k-vi, 139 61 255) / 12%) 55%, rgb(var(--k-mg, 224 60 255) / 10%)), rgb(var(--k-bg2, 10 8 32) / 88%);
  box-shadow: 0 0 24px rgb(var(--k-cy, 34 228 255) / 12%);
  color: rgb(var(--k-tx, 233 230 255));
}
.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: rgb(var(--k-cy, 34 228 255)); 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(var(--k-tx, 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, rgb(var(--k-cy, 34 228 255)), rgb(var(--k-vi, 139 61 255)) 60%, rgb(var(--k-mg, 224 60 255))); color: rgb(var(--k-bg1, 5 4 15)) !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(var(--k-cy, 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(var(--k-mg, 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(var(--k-tx, 233 230 255) / 70%); cursor: pointer; font-size: 18px;
}
.gs-lounge-card__x:hover, .gs-lounge-card__x:focus-visible { border-color: rgb(var(--k-cy, 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; }

/* street-home.css */
/* GS - GameScape Online: the street at the top of the Home page (street-home.js) */
.gs-street { margin: 14px 0 22px; }
.gs-street__head { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin: 0 0 12px; }
.gs-street__head h2 { margin: 0; font: 800 clamp(20px, 2.4vw, 30px)/1.1 var(--k-fd, "Orbitron"), sans-serif; letter-spacing: .04em; text-transform: uppercase;
  background: linear-gradient(90deg, rgb(var(--k-cy, 34 228 255)), rgb(var(--k-bl, 79 123 255)) 45%, rgb(var(--k-mg, 224 60 255))); -webkit-background-clip: text; background-clip: text; color: transparent; }
.gs-street__head p { margin: 0; color: rgb(var(--k-tx, 215 222 255) / 66%); font-size: 14px; }
.gs-street__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
@media (width >= 1700px) { .gs-street__row { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; } .gs-street__door small { display: none; } }
@media (width < 760px) { .gs-street__row { grid-template-columns: 1fr; } }
.gs-street__front { position: relative; display: block; overflow: hidden; aspect-ratio: 1672 / 941; border: 2px solid rgb(var(--k-ln, 120 140 255) / 45%); border-radius: 4px; background: rgb(var(--k-bg1, 5 4 15)); color: #fff;
  text-decoration: none; box-shadow: 0 14px 40px rgb(0 0 0 / 55%); transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.gs-street__front img { display: block; width: 100%; height: 100%; object-fit: cover; filter: saturate(.94) brightness(.92); transition: transform .5s ease, filter .3s ease; }
.gs-street__front:hover, .gs-street__front:focus-visible { border-color: rgb(var(--k-cy, 34 228 255)); transform: translateY(-4px); outline: none; box-shadow: 0 0 0 1px rgb(var(--k-cy, 34 228 255)), 0 0 34px rgb(var(--k-cy, 34 228 255) / 45%), 0 20px 50px rgb(0 0 0 / 60%); }
.gs-street__front:hover img, .gs-street__front:focus-visible img { transform: scale(1.045); filter: none; }
.gs-street__door { position: absolute; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: auto 1fr; column-gap: 10px; align-items: center; padding: 26px 16px 12px;
  background: linear-gradient(180deg, transparent, rgb(var(--k-bg0, 3 2 10) / 88%) 55%); }
.gs-street__door .mdi { grid-row: 1 / 3; font-size: 30px; color: rgb(var(--k-cy, 34 228 255)); filter: drop-shadow(0 0 8px rgb(var(--k-cy, 34 228 255) / 70%)); }
.gs-street__door b { font: 800 clamp(14px, 1.4vw, 19px)/1.2 var(--k-fd, "Orbitron"), sans-serif; letter-spacing: .08em; text-transform: uppercase; }
.gs-street__door small { color: rgb(var(--k-tx, 215 222 255) / 66%); font-size: 13px; }
/* closed to this member: the picture itself has the lights off and CLOSED in the door */
.gs-street__front.is-closed img, .gs-street__front.is-closed:hover img { filter: none; transform: none; }
.gs-street__front.is-closed:hover, .gs-street__front.is-closed:focus-visible { border-color: #ff4d7a; transform: none; box-shadow: 0 0 0 1px #ff4d7a, 0 0 24px rgb(255 77 122 / 35%), 0 20px 50px rgb(0 0 0 / 60%); }
.gs-street__front.is-closed .gs-street__door .mdi { color: #ff4d7a; filter: none; }
@media (prefers-reduced-motion: reduce) { .gs-street__front, .gs-street__front img { transition: none; } }

/* GameScape is closed to this member: no game parts on the site (the server refuses the games themselves) */
html.gs-no-games .gsx-hero, html.gs-no-games .gsx-shelves, html.gs-no-games .gs-sb, html.gs-no-games .r-v2-home .r-v2-widget-bar,
html.gs-no-games .r-v2-home .card-row, html.gs-no-games .r-v2-home [class*="continue"], html.gs-no-games .r-v2-home [class*="recent"],
html.gs-no-games .r-slider-btn-group a[href="/search"], html.gs-no-games .gs-tournament, html.gs-no-games [class*="gst-banner"] { display: none !important; }

/* favourite scapes: friends' scapes this member starred, under the four stores */
.gs-favscapes { margin: 0 0 22px; }
.gs-favscapes__row { display: flex; flex-wrap: wrap; gap: 10px; }
.gs-favscape { display: inline-flex; align-items: center; gap: 10px; min-width: 190px; padding: 10px 14px 10px 12px; border: 1px solid currentColor; border-radius: 3px; background: rgb(var(--k-bg1, 5 4 15) / 60%); color: rgb(var(--k-cy, 34 228 255)); text-decoration: none; }
.gs-favscape--sound { color: rgb(var(--k-mg, 224 60 255)); } .gs-favscape--video { color: #ffd36b; } .gs-favscape--books { color: #4dffb5; }
.gs-favscape .mdi { font-size: 26px; }
.gs-favscape span { display: grid; gap: 2px; }
.gs-favscape b { color: #fff; font: 700 14px/1.1 var(--k-fd, "Orbitron"), sans-serif; letter-spacing: .04em; }
.gs-favscape small { color: rgb(var(--k-tx, 215 222 255) / 70%); font-size: 12.5px; }
.gs-favscape:hover, .gs-favscape:focus-visible { box-shadow: 0 0 16px currentColor; outline: none; }
.gs-favscape.is-closed { color: rgb(var(--k-tx, 215 222 255) / 45%); border-style: dashed; }

/* invitations into friends' scapes */
.gs-invites { margin-bottom: 18px; }
.gs-invite { display: grid; gap: 8px; padding: 12px 14px; border: 1px solid #ffd36b; border-radius: 3px; background: rgb(var(--k-bg1, 5 4 15) / 60%); box-shadow: 0 0 18px rgb(255 211 107 / 25%); }
.gs-invite > b { font: 700 14px/1.1 var(--k-fd, "Orbitron"), sans-serif; letter-spacing: .04em; color: #ffd36b; }
.gs-invite__links { display: flex; flex-wrap: wrap; gap: 8px; }
.gs-invite .gs-favscape { min-width: 0; padding: 6px 10px 6px 8px; } .gs-invite .gs-favscape .mdi { font-size: 20px; }
.gs-invite__x { justify-self: start; padding: 4px 8px; border: 1px solid rgb(var(--k-ln, 120 140 255) / 45%); background: none; color: rgb(var(--k-tx, 215 222 255) / 70%); cursor: pointer; font: 600 12px "Exo 2", sans-serif; }
.gs-invite__x:hover, .gs-invite__x:focus-visible { border-color: rgb(var(--k-cy, 34 228 255)); color: #fff; outline: none; }
.gs-favscapes--inv { margin: 14px 0 6px; }

/* a "Currently Closed" sign hanging in the window of a building that is closed to you */
.gs-street__sign { position: absolute; left: 50%; top: 30%; z-index: 1; display: grid; justify-items: center; gap: 2px; padding: clamp(8px, 1.2vw, 14px) clamp(16px, 2.6vw, 34px) clamp(9px, 1.3vw, 15px);
  transform: translateX(-50%) rotate(-4deg); transform-origin: 50% -60%; border: 3px solid #ff4d7a; border-radius: 6px; background: linear-gradient(180deg, #1a0710, #0b0308);
  box-shadow: inset 0 0 0 2px rgb(255 255 255 / 8%), 0 0 22px rgb(255 77 122 / 55%), 0 10px 24px rgb(0 0 0 / 70%); color: #ff6a8f; text-align: center; pointer-events: none; animation: gs-street__sign-sway 5s ease-in-out infinite; }
/* the cord it hangs by, up to a hook */
.gs-street__sign::before { content: ""; position: absolute; left: 50%; bottom: 100%; width: 46%; aspect-ratio: 2 / 1; transform: translateX(-50%);
  background: linear-gradient(to top left, transparent calc(50% - 1.5px), #d9c9a8 calc(50% - 1.5px), #d9c9a8 calc(50% + 1.5px), transparent calc(50% + 1.5px)) left / 50% 100% no-repeat,
              linear-gradient(to top right, transparent calc(50% - 1.5px), #d9c9a8 calc(50% - 1.5px), #d9c9a8 calc(50% + 1.5px), transparent calc(50% + 1.5px)) right / 50% 100% no-repeat; }
.gs-street__sign small { font: 700 clamp(10px, 1.1vw, 14px)/1 var(--k-fd, "Orbitron"), sans-serif; letter-spacing: .28em; text-transform: uppercase; color: #ffd7e0; }
.gs-street__sign b { font: 900 clamp(24px, 3.6vw, 46px)/1 var(--k-fd, "Orbitron"), sans-serif; letter-spacing: .12em; text-transform: uppercase; text-shadow: 0 0 10px rgb(255 77 122 / 85%), 0 0 26px rgb(255 77 122 / 55%); }
@keyframes gs-street__sign-sway { 0%, 100% { transform: translateX(-50%) rotate(-4deg); } 50% { transform: translateX(-50%) rotate(2.5deg); } }
@media (prefers-reduced-motion: reduce) { .gs-street__sign { animation: none; } }

/* my Home: the bar with "Set up my Home", my own scapes, the scapes of others I put here */
.gs-homebar { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin: 14px 0 4px; }
.gs-homebar h2 { margin: 0; font: 800 clamp(22px, 2.8vw, 34px)/1.1 var(--k-fd, "Orbitron"), sans-serif; letter-spacing: .04em; text-transform: uppercase; background: linear-gradient(90deg, rgb(var(--k-cy, 34 228 255)), rgb(var(--k-bl, 79 123 255)) 45%, rgb(var(--k-mg, 224 60 255))); -webkit-background-clip: text; background-clip: text; color: transparent; }
.gs-homebar__set { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 8px 16px; border: 0; border-radius: 3px; background: linear-gradient(90deg, rgb(var(--k-cy, 34 228 255)), rgb(var(--k-bl, 79 123 255)) 50%, rgb(var(--k-mg, 224 60 255))); color: #fff; cursor: pointer; font: 800 13px/1 var(--k-fd, "Orbitron"), sans-serif; letter-spacing: .1em; text-transform: uppercase; text-shadow: 0 1px 2px rgb(0 0 0 / 60%); }
.gs-homebar__set:hover, .gs-homebar__set:focus-visible { filter: brightness(1.15); outline: 2px solid #fff; outline-offset: 2px; }
.gs-homebar__set .mdi { font-size: 18px; }
.gs-street--mine .gs-street__head h2, .gs-street--picks .gs-street__head h2, .gs-street:not(.gs-street--mine):not(.gs-street--picks) .gs-street__head h2 { font-size: clamp(16px, 1.7vw, 22px); }
.gs-street__more { margin-left: auto; padding: 0; border: 0; background: none; color: rgb(var(--k-cy, 34 228 255)); cursor: pointer; font: 600 13px "Exo 2", sans-serif; text-decoration: underline; }
.gs-street__more:hover, .gs-street__more:focus-visible { color: #fff; outline: none; }
@media (width >= 1100px) { .gs-street__row--small { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; } .gs-street__row--small .gs-street__door { padding: 20px 12px 10px; } .gs-street__row--small .gs-street__door .mdi { font-size: 24px; }
  .gs-street__row--small .gs-street__door b { font-size: clamp(12px, 1.05vw, 16px); } .gs-street__row--small .gs-street__door small { display: block; font-size: 12px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } }
.gs-street__front img.is-off, .gs-street__front.is-closed img.is-off { filter: grayscale(1) brightness(.38); }
.gs-street__tag { position: absolute; top: 8px; right: 8px; z-index: 1; padding: 3px 8px; border: 1px solid #4dffb5; border-radius: 10px; background: rgb(var(--k-bg0, 3 2 10) / 80%); color: #4dffb5; font: 700 11px/1.2 "Exo 2", sans-serif; letter-spacing: .06em; text-transform: uppercase; }
div.gs-street__front:hover { transform: none; }
/* Set up my Home */
.gs-homeset { position: fixed; inset: 0; z-index: 3000; display: grid; place-items: center; padding: 16px; background: rgb(var(--k-bg0, 3 2 10) / 84%); backdrop-filter: blur(5px); }
.gs-homeset__box { position: relative; width: min(980px, 100%); max-height: calc(100vh - 32px); overflow-y: auto; padding: 22px 24px; border: 1px solid rgb(var(--k-ln, 120 140 255) / 45%); border-radius: 4px; background: rgb(var(--k-bg2, 10 8 32)); color: rgb(var(--k-tx, 233 236 255)); box-shadow: 0 0 40px rgb(var(--k-cy, 34 228 255) / 20%), 0 20px 60px rgb(0 0 0 / 70%); font: 15px/1.45 "Exo 2", sans-serif; }
.gs-homeset__box h2 { margin: 0 40px 6px 0; font: 800 24px/1.1 var(--k-fd, "Orbitron"), sans-serif; letter-spacing: .04em; text-transform: uppercase; color: rgb(var(--k-cy, 34 228 255)); }
.gs-homeset__box h3 { margin: 22px 0 6px; font: 700 14px/1.2 var(--k-fd, "Orbitron"), sans-serif; letter-spacing: .14em; text-transform: uppercase; color: rgb(var(--k-cy, 34 228 255)); }
.gs-homeset__box h4 { margin: 14px 0 6px; font: 700 13px/1.2 "Exo 2", sans-serif; letter-spacing: .08em; text-transform: uppercase; color: rgb(var(--k-tx, 215 222 255) / 70%); }
.gs-homeset__lead { margin: 0; color: rgb(var(--k-tx, 215 222 255) / 80%); } .gs-homeset__note { margin: 4px 0 10px; color: rgb(var(--k-tx, 215 222 255) / 66%); font-size: 13.5px; }
.gs-homeset__x { position: absolute; top: 12px; right: 12px; width: 36px; height: 36px; border: 1px solid rgb(var(--k-ln, 120 140 255) / 45%); border-radius: 3px; background: none; color: #fff; cursor: pointer; font: 700 20px/1 sans-serif; }
.gs-homeset__x:hover, .gs-homeset__x:focus-visible { border-color: #ff4d7a; color: #ff4d7a; outline: none; }
.gs-homeset__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } @media (width < 700px) { .gs-homeset__grid { grid-template-columns: 1fr; } }
.gs-homeset__card { display: grid; gap: 8px; align-content: start; }
.gs-homeset__acts, .gs-homeset__chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.gs-homeset__check { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; } .gs-homeset__check input { width: 18px; height: 18px; accent-color: rgb(var(--k-cy, 34 228 255)); }
.gs-homeset__btn { min-height: 34px; padding: 6px 12px; border: 1px solid rgb(var(--k-ln, 120 140 255) / 55%); border-radius: 3px; background: rgb(var(--k-bg1, 5 4 15) / 70%); color: #fff; cursor: pointer; font: 700 12.5px/1 "Exo 2", sans-serif; letter-spacing: .04em; }
.gs-homeset__btn--go { border-color: rgb(var(--k-cy, 34 228 255)); background: rgb(var(--k-cy, 34 228 255) / 14%); } .gs-homeset__btn:hover, .gs-homeset__btn:focus-visible { border-color: #fff; outline: none; } .gs-homeset__btn:disabled { opacity: .6; cursor: default; }
.gs-homeset__row { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; padding: 8px 10px; border: 1px solid rgb(var(--k-ln, 120 140 255) / 25%); border-radius: 3px; margin-bottom: 6px; }
.gs-homeset__row .mdi { font-size: 24px; color: rgb(var(--k-cy, 34 228 255)); } .gs-homeset__row span { display: grid; gap: 2px; min-width: 0; } .gs-homeset__row small { color: rgb(var(--k-tx, 215 222 255) / 66%); font-size: 12.5px; }
.gs-homeset__done { display: block; margin: 18px 0 0 auto; min-height: 40px; padding: 8px 22px; }

/* shared with me: a member by name, and their scapes in a row that scrolls sideways */
.gs-member { margin: 0 0 10px; padding: 8px 12px 2px; border: 1px solid rgb(var(--k-ln, 120 140 255) / 30%); border-radius: 4px; background: rgb(var(--k-bg2, 10 8 30) / 45%); }
.gs-member__head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 2px; }
.gs-member__head .mdi { font-size: 20px; color: rgb(var(--k-cy, 34 228 255)); } .gs-member__head small { color: rgb(var(--k-tx, 215 222 255) / 66%); font-size: 13px; }
.gs-member__name { padding: 0; border: 0; background: none; color: #fff; cursor: pointer; font: 700 17px/1.1 "Exo 2", sans-serif; } .gs-member__name:hover, .gs-member__name:focus-visible { color: rgb(var(--k-cy, 34 228 255)); outline: none; }
.gs-member__mark { padding: 2px 8px; border: 1px solid rgb(var(--k-tx, 215 222 255) / 35%); border-radius: 10px; color: rgb(var(--k-tx, 215 222 255) / 66%); font: 700 11px/1.3 "Exo 2", sans-serif; letter-spacing: .06em; text-transform: uppercase; }
.gs-member__mark.is-on { border-color: #4dffb5; color: #4dffb5; }
.gs-member__arrows { margin-left: auto; display: inline-flex; gap: 6px; }
.gs-street__arrow { width: 34px; height: 34px; border: 1px solid rgb(var(--k-ln, 120 140 255) / 55%); border-radius: 3px; background: rgb(var(--k-bg1, 5 4 15) / 70%); color: #fff; cursor: pointer; font: 700 20px/1 sans-serif; }
.gs-street__arrow[hidden] { display: none; } .gs-street__arrow:disabled { opacity: .35; cursor: default; } .gs-street__arrow:hover:not(:disabled), .gs-street__arrow:focus-visible { border-color: rgb(var(--k-cy, 34 228 255)); outline: none; }
.gs-street__scroll { display: flex; gap: 14px; overflow-x: auto; padding: 6px 2px 10px; scroll-snap-type: x proximity; scrollbar-width: thin; scrollbar-color: rgb(var(--k-ln, 120 140 255) / 55%) transparent; }
.gs-street__scroll > .gs-street__front { flex: 0 0 clamp(220px, 23.5%, 330px); scroll-snap-align: start; }
.gs-street__scroll > .gs-street__front:hover, .gs-street__scroll > .gs-street__front:focus-visible { transform: none; }
.gs-street__scroll .gs-street__door { padding: 20px 12px 10px; } .gs-street__scroll .gs-street__door .mdi { font-size: 24px; } .gs-street__scroll .gs-street__door b { font-size: clamp(12px, 1.05vw, 15px); }
.gs-street__scroll .gs-street__door small { display: block; font-size: 12px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.gs-street__scroll .gs-street__sign { transform: translateX(-50%) rotate(-4deg) scale(.6); animation: none; }
.gs-homebar__btns { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-width: 0; }      /* the row has grown to a dozen places: it goes onto a second line, never off the side */
.gs-homebar__fresh { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 8px 14px; border: 1px solid rgb(var(--k-ln, 120 140 255) / 55%); border-radius: 3px; background: rgb(var(--k-bg1, 5 4 15) / 70%); color: #fff; cursor: pointer; font: 700 13px/1 "Exo 2", sans-serif; }
.gs-homebar__fresh:hover, .gs-homebar__fresh:focus-visible { border-color: rgb(var(--k-cy, 34 228 255)); outline: none; } .gs-homebar__fresh .mdi { font-size: 18px; }
.gs-homebar__fresh.is-turning .mdi { animation: gs-homebar-turn .7s ease; } @keyframes gs-homebar-turn { to { transform: rotate(360deg); } }

/* Watch Party Rooms on top of Home, and (admins) the reported banners */
.gs-parties { margin: 6px 0 16px; padding: 10px 14px 12px; border: 1px solid #ff4d7a; border-radius: 4px; background: linear-gradient(90deg, rgb(255 77 122 / 12%), rgb(var(--k-bl, 79 123 255) / 10%)); box-shadow: 0 0 24px rgb(255 77 122 / 18%); }
.gs-parties__row { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; }
.gs-party { flex: 0 0 clamp(220px, 24%, 320px); display: grid; gap: 4px; padding: 10px 12px; border: 1px solid rgb(var(--k-ln, 120 140 255) / 45%); border-radius: 3px; background: rgb(var(--k-bg1, 5 4 15) / 75%); color: #fff; text-decoration: none; }
.gs-party b { font: 700 15px/1.2 var(--k-fd, "Orbitron"), sans-serif; letter-spacing: .04em; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .gs-party small { color: rgb(var(--k-tx, 215 222 255) / 70%); font-size: 12.5px; }
.gs-party__tag { justify-self: start; padding: 2px 8px; border: 1px solid rgb(var(--k-cy, 34 228 255)); border-radius: 10px; color: rgb(var(--k-cy, 34 228 255)); font: 700 10.5px/1.3 "Exo 2", sans-serif; letter-spacing: .08em; text-transform: uppercase; }
.gs-party.is-live .gs-party__tag { border-color: #ff4d7a; color: #ff6a8f; } .gs-party:hover, .gs-party:focus-visible { border-color: rgb(var(--k-cy, 34 228 255)); box-shadow: 0 0 16px rgb(var(--k-cy, 34 228 255) / 35%); outline: none; }
a.gs-homebar__fresh { text-decoration: none; }
.gs-reports { padding: 10px 14px; border: 1px solid #ffd36b; border-radius: 4px; background: rgb(255 211 107 / 6%); }
.gs-report { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid rgb(255 211 107 / 25%); }
.gs-report img { width: 160px; aspect-ratio: 16 / 9; object-fit: cover; border: 1px solid rgb(var(--k-ln, 120 140 255) / 45%); border-radius: 3px; }
.gs-report span { flex: 1 1 220px; display: grid; gap: 3px; } .gs-report a { color: #fff; font-weight: 700; } .gs-report small { color: rgb(var(--k-tx, 215 222 255) / 70%); }
.gs-public { display: grid; gap: 8px; align-content: start; } .gs-public .gs-homeset__btn { justify-self: start; text-decoration: none; display: inline-flex; align-items: center; }
.gs-parties .gs-street__head h2 { font-size: clamp(16px, 1.7vw, 22px); }
.gs-street__front.is-unset { border-style: dashed; border-color: rgb(var(--k-ln, 120 140 255) / 30%); } .gs-street__front.is-unset img { filter: grayscale(1) brightness(.5); }
.gs-street__front.is-unset .gs-street__door .mdi { color: rgb(var(--k-tx, 215 222 255) / 60%); filter: none; } .gs-street__front.is-unset .gs-street__door b { color: rgb(var(--k-tx, 215 222 255)); }
.gs-street__front.is-unset:hover, .gs-street__front.is-unset:focus-visible { border-style: solid; } .gs-street__front.is-unset:hover img, .gs-street__front.is-unset:focus-visible img { filter: grayscale(.4) brightness(.8); }

/* "Currently Away": the scape is open to me but its owner's PC is off. The picture goes grey, an amber sign hangs in
   the window like the Closed one, and a small offline mark sits in the corner. */
.gs-street__front.is-away img, .gs-street__front.is-away:hover img { filter: grayscale(1) brightness(.55); }
.gs-street__sign--away { border-color: #ffd36b; color: #ffd36b; background: linear-gradient(180deg, #1c1606, #0b0903); box-shadow: inset 0 0 0 2px rgb(255 255 255 / 8%), 0 0 22px rgb(255 211 107 / 45%), 0 10px 24px rgb(0 0 0 / 70%); }
.gs-street__sign--away small { color: #fff3c9 !important; }
.gs-street__off { position: absolute; right: 8px; bottom: 8px; z-index: 2; display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid #ffd36b; border-radius: 50%; background: rgb(0 0 0 / 72%); color: #ffd36b; font-size: 17px; }
.gs-street__front.is-away:hover, .gs-street__front.is-away:focus-visible { border-color: #ffd36b; box-shadow: 0 0 0 1px #ffd36b, 0 0 22px rgb(255 211 107 / 28%), 0 20px 50px rgb(0 0 0 / 60%); }
/* the Away sign is sized by the card it hangs on, so it fits a small card as well as a big one */
.gs-street__front.is-away { container-type: inline-size; }
.gs-street__sign--away { padding: 3cqw 7cqw 3.4cqw; border-width: clamp(2px, .9cqw, 3px); }
.gs-street__sign--away small { font-size: clamp(8px, 3.4cqw, 14px); }
.gs-street__sign--away b { font-size: clamp(15px, 10.5cqw, 44px); text-shadow: 0 0 10px rgb(255 211 107 / 70%), 0 0 22px rgb(255 211 107 / 40%); }
/* Create-A-Scape: the card that makes one, its small dialog, and the sharing shortcuts on a scape's setup card */
.gs-street__front.gs-street__make { cursor: pointer; border-style: dashed; }
.gs-street__front.gs-street__make img { filter: grayscale(.6) brightness(.5); }
.gs-street__front.gs-street__make:hover img, .gs-street__front.gs-street__make:focus-visible img { filter: none; }
.gs-homeset__box--small { width: min(520px, 100%); }
.gs-homeset__field { display: grid; gap: 4px; margin: 12px 0; font-size: 13px; color: rgb(var(--k-tx, 215 222 255) / 80%); }
.gs-homeset__in, .gs-homeset__sel { height: 36px; padding: 0 10px; border: 1px solid rgb(var(--k-ln, 120 140 255) / 45%); border-radius: 2px; background: rgb(var(--k-bg1, 5 4 15)); color: #fff; font: inherit; font-size: 14px; }
.gs-homeset__sel { height: 32px; max-width: 100%; }
.gs-homeset__share { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; width: 100%; font-size: 13px; color: rgb(var(--k-tx, 215 222 255) / 80%); }
.gs-homeset__btn--bad { border-color: #ff4d7a; color: #ff8fab; }
.gs-homeset__err { color: #ff8fab !important; }

/* the BETA stamp beside "My Home" */
.gs-homebar__head { display: inline-flex; align-items: center; gap: 14px; }
.gs-beta { display: inline-block; padding: 4px 10px 3px; border: 3px solid #ef2b2b; border-radius: 5px; color: #ff4040; background: rgb(239 43 43 / 12%); font: 900 15px/1 "Exo 2", sans-serif; letter-spacing: .22em; text-transform: uppercase; transform: rotate(-7deg); box-shadow: inset 0 0 0 1px rgb(239 43 43 / 45%); cursor: help; user-select: none; }
/* "This is a VideoScape": small, at the bottom of a banner whose owner gave the scape a name of their own */
.gs-street__door .gs-street__is { display: block !important; grid-column: 1 / -1; margin-top: 3px; font: 600 11px/1.2 "Exo 2", sans-serif; font-style: normal; letter-spacing: .06em; text-transform: uppercase; color: rgb(var(--k-cy, 34 228 255) / 90%); }
.gs-homebar__n { min-width: 20px; padding: 3px 6px; border-radius: 10px; background: #d92626; color: #fff; font: 800 12px/1 "Exo 2", sans-serif; text-align: center; }
.gs-mine__name { gap: 6px; } .gs-mine__name .mdi { font-size: 16px; }
/* a calmer Home bar: Theme and Refresh are icons, Scape Requests shows only while someone waits */
.gs-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.gs-homebar__icon { position: relative; min-width: 40px; justify-content: center; padding: 8px 10px; }
.gs-homeset__toolsrow { display: flex; flex-wrap: wrap; gap: 8px; }
@media (max-width: 700px) { .gs-homebar__btns { flex-wrap: wrap; } .gs-homebar__set span, .gs-homebar__fresh:not(.gs-homebar__icon) span:not(.gs-homebar__n) { font-size: 12px; } }

/* Watch Now Live: two stations above the scapes */
.gs-live__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.gs-live__card { position: relative; display: grid; gap: 4px; align-content: center; min-height: 92px; padding: 14px 110px 14px 16px; border: 1px solid rgb(var(--k-ln, 120 140 255) / 45%); border-radius: 6px; background: linear-gradient(120deg, rgb(var(--k-bg3, 18 14 50) / 90%), rgb(var(--k-bg1, 8 6 24) / 90%)); color: rgb(var(--k-tx, 215 222 255)); text-decoration: none; }
.gs-live__card:hover, .gs-live__card:focus-visible { border-color: rgb(var(--k-cy, 34 228 255)); outline: none; }
.gs-live__card b { font: 800 clamp(15px, 1.5vw, 19px)/1.25 var(--k-fd, "Orbitron"), sans-serif; color: #fff; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; }
.gs-live__card small { color: rgb(var(--k-tx, 215 222 255) / 70%); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gs-live__badge { justify-self: start; display: inline-flex; align-items: center; gap: 6px; padding: 1px 8px; border-radius: 3px; background: #4a5068; color: #fff; font: 800 11px/1.7 var(--k-fd, "Orbitron"), sans-serif; letter-spacing: .12em; text-transform: uppercase; }
.gs-live__card.is-on .gs-live__badge { background: #c81e1e; }
.gs-live__card.is-on .gs-live__badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #fff; }
.gs-live__go { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); padding: 8px 16px; border: 1px solid rgb(var(--k-cy, 34 228 255) / 70%); border-radius: 4px; color: #fff; font: 700 13px/1.2 "Exo 2", system-ui, sans-serif; text-transform: uppercase; letter-spacing: .06em; }
.gs-live__card.is-on .gs-live__go { background: rgb(var(--k-cy, 34 228 255) / 18%); }
@media (max-width: 720px) { .gs-live__row { grid-template-columns: 1fr; } }
.gs-homebar__fresh[hidden] { display: none; }

/* The "Games" button on Home, shown when the top bar has no Games tab (a phone: report #16) */
.gs-homebar__game { border-color: rgb(var(--k-mg, 255 60 200) / 70%); }
.gs-homebar__game[hidden] { display: none; }

/* Home's places in named groups */
.gs-homebar__btns--groups { flex: 1 1 100%; display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 12px 18px; align-items: start; }
.gs-homebar__grp { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 10px 12px; border: 1px solid rgb(var(--k-ln, 120 140 255) / 28%); border-radius: 4px; background: rgb(var(--k-bg1, 8 6 24) / 45%); }
.gs-homebar__grpname { font: 800 12px/1 var(--k-fd, "Orbitron"), sans-serif; letter-spacing: .14em; text-transform: uppercase; color: rgb(var(--k-cy, 34 228 255)); }
.gs-homebar__grprow { display: flex; flex-wrap: wrap; gap: 8px; }
@media (max-width: 700px) { .gs-homebar__btns--groups { grid-template-columns: 1fr; gap: 10px; } }

/* trade-link.css */
/* "Trade Pokémon" entry on Pokémon game pages (trade-link.js) */
.gs-trade-link { display: flex; align-items: center; gap: 10px; width: fit-content; max-width: 100%; margin: 12px 0; padding: 8px 14px; border: 1px solid rgba(255, 211, 107, .55); border-radius: 2px; background: rgba(255, 211, 107, .08); color: #eef1ff; font: 500 14px/1.35 "Exo 2", system-ui, sans-serif; text-decoration: none; }
.gs-trade-link:hover, .gs-trade-link:focus-visible { border-color: #ffd36b; box-shadow: 0 0 12px rgba(255, 211, 107, .3); outline: none; }
.gs-trade-link b { color: #ffd36b; }
.gs-trade-link .mdi { font-size: 20px; color: #ffd36b; }
.gs-trade-link--play { width: auto; justify-content: center; margin: 10px 0 0; font-size: 13px; }

/* 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(var(--k-cy, 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(var(--k-bg3, 14 12 40) / 86%), rgb(var(--k-bg1, 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(var(--k-cy, 34 228 255) / 16%), 0 12px 30px rgb(0 0 0 / 55%);
  color: rgb(var(--k-tx, 232 236 255));
  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(var(--k-ln, 120 140 255) / 18%);
}
.gs-np__head:focus-visible { outline: 2px solid rgb(var(--k-cy, 95 243 255)); outline-offset: -2px; }
.gs-np__top { display: flex; align-items: center; gap: 8px; }
.gs-np__top b {
  font: 700 11px/1 var(--k-fd, "Orbitron"), system-ui, sans-serif;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #fff;
}
.gs-np__live {
  width: 8px;
  height: 8px;
  border-radius: 1px;
  background: rgb(var(--k-cy, 34 228 255));
  box-shadow: 0 0 0 0 rgb(var(--k-cy, 34 228 255) / 60%);
  animation: gs-np-pulse 2s infinite;
}
.gs-np__count {
  margin-left: auto;
  font: 700 12px/1 var(--k-fd, "Orbitron"), system-ui, sans-serif;
  color: rgb(var(--k-cy-hi, 169 243 255));
}
.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(var(--k-tx, 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 var(--k-fd, "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(var(--k-ln, 120 140 255) / 25%); }
.gs-np__slot.is-empty .gs-np__p { color: rgb(var(--k-tx, 200 205 255) / 35%); text-shadow: none; }
.gs-np__slot.is-empty .gs-np__name { font-weight: 400; font-style: italic; color: rgb(var(--k-tx, 200 205 255) / 45%); }
.gs-np__tag {
  margin-left: 6px;
  padding: 1px 5px;
  border: 1px solid rgb(var(--k-cy, 34 228 255) / 45%);
  border-radius: 2px;
  font: 700 9.5px/1.4 var(--k-fd, "Orbitron"), system-ui, sans-serif;
  font-style: normal;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgb(var(--k-cy-hi, 169 243 255));
}
.gs-np__tag--you { border-color: rgb(var(--k-mg, 224 60 255) / 50%); color: rgb(var(--k-mg-hi, 243 179 255)); }
.gs-np__state { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: rgb(var(--k-tx, 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: rgb(var(--k-cy, 34 228 255)); box-shadow: 0 0 6px rgb(var(--k-cy, 34 228 255)); }
.gs-np__state--slow i { background: rgb(var(--k-mg, 255 62 207)); }
.gs-np__state--wait i { background: rgb(var(--k-bl, 79 123 255)); animation: gs-np-blink 1s infinite; }
.gs-np__state--drop i { background: rgb(var(--k-mg, 255 62 207)); 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 rgb(var(--k-cy, 34 228 255));
  border-radius: 2px;
  background: rgb(var(--k-bg2, 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: rgb(var(--k-mg, 224 60 255)); }
.gs-np-toast--bad { border-left-color: #ff2d7a; }

@keyframes gs-np-pulse { 70%, 100% { box-shadow: 0 0 0 7px rgb(var(--k-cy, 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; }
}

/* player2.css */
/* "Player 2" button on the emulator page (player2.js) */
.gs-p2 { position: fixed; left: 14px; top: calc(14px + env(safe-area-inset-top, 0px)); z-index: 2590; transition: opacity .25s; display: grid; gap: 8px; justify-items: start; font: 500 13px/1.4 "Inter", system-ui, sans-serif; color: rgb(var(--k-tx, 233 230 255)); }
.gs-p2__head, .gs-p2__btn { display: inline-flex; align-items: center; gap: 8px; border: 1px solid rgb(var(--k-vi, 160 140 255) / .35); background: rgb(var(--k-bg3, 12 10 34) / .88); color: inherit; border-radius: 999px; padding: 7px 14px; font: inherit; cursor: pointer; }
.gs-p2.is-idle { opacity: 0; pointer-events: none; }
.gs-p2.is-idle.is-ai { opacity: .45; }
.gs-p2__head { opacity: .7; }
.gs-p2__head:hover, .gs-p2__head[aria-expanded="true"], .gs-p2.is-ai .gs-p2__head { opacity: 1; }
.gs-p2.is-ai .gs-p2__head { border-color: rgb(var(--k-cy, 34 228 255)); color: rgb(var(--k-cy, 34 228 255)); }
.gs-p2__head:focus-visible, .gs-p2__btn:focus-visible { outline: 2px solid rgb(var(--k-cy, 34 228 255)); outline-offset: 2px; }
.gs-p2__panel { width: 270px; max-width: calc(100vw - 28px); display: grid; gap: 8px; padding: 12px; border-radius: 12px; border: 1px solid rgb(var(--k-vi, 160 140 255) / .35); background: rgb(var(--k-bg3, 12 10 34) / .96); box-shadow: 0 10px 30px rgba(0, 0, 0, .5); }
.gs-p2__panel[hidden] { display: none; }
.gs-p2__btn { border-radius: 8px; justify-content: flex-start; width: 100%; }
.gs-p2__btn:hover { background: rgb(var(--k-vi, 120 90 255) / .25); }
.gs-p2__hint { margin: 0; font-size: 12px; color: #a9a4d6; }
.gs-p2__note { margin: 0; font-size: 12.5px; color: rgb(var(--k-cy, 34 228 255)); }
.gs-p2__note:empty { display: none; }

/* 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(var(--k-bg0, 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(var(--k-cy, 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(var(--k-bg3, 16 12 44) / 97%), rgb(var(--k-bg1, 6 5 20) / 98%));
  box-shadow: 0 0 30px rgb(var(--k-cy, 34 228 255) / 18%), 0 30px 80px rgb(0 0 0 / 70%);
  color: rgb(var(--k-tx, 232 236 255));
  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(var(--k-ln, 120 140 255) / 20%);
}
.gs-sh__head h2 {
  grid-area: title;
  margin: 0;
  font: 800 20px/1.1 var(--k-fd, "Orbitron"), system-ui, sans-serif;
  letter-spacing: .06em;
  color: #fff;
  text-shadow: 0 0 14px rgb(var(--k-cy, 34 228 255) / 45%);
}
.gs-sh__head p { grid-area: sub; margin: 0; font-size: 14px; color: rgb(var(--k-tx, 215 222 255) / 70%); }
.gs-sh__filter {
  grid-area: filter;
  padding: 10px 12px;
  border: 1px solid rgb(var(--k-cy, 34 228 255) / 40%);
  border-radius: 2px;
  background: rgb(var(--k-bg1, 5 4 15) / 80%);
  color: #fff;
  font: inherit;
  font-size: 14px;
  outline: none;
}
.gs-sh__filter:focus { border-color: rgb(var(--k-cy, 34 228 255)); box-shadow: 0 0 12px rgb(var(--k-cy, 34 228 255) / 30%); }
.gs-sh__close {
  grid-area: close;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 1px solid rgb(var(--k-ln, 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: rgb(var(--k-mg, 224 60 255)); box-shadow: 0 0 12px rgb(var(--k-mg, 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(var(--k-tx, 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 var(--k-fd, "Orbitron"), system-ui, sans-serif; letter-spacing: .08em; color: #fff; }
.gs-sh__empty span { max-width: 36em; color: rgb(var(--k-tx, 215 222 255) / 75%); }
.gs-sh__empty em { font-style: normal; color: rgb(var(--k-cy-hi, 169 243 255)); }

.gs-sh__card {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 14px;
  padding: 12px;
  border: 1px solid rgb(var(--k-cy, 34 228 255) / 35%);
  border-radius: 2px;
  background: rgb(var(--k-bg2, 10 8 30) / 70%);
  box-shadow: 0 0 12px rgb(var(--k-cy, 34 228 255) / 10%);
}
.gs-sh__card--alt { border-color: rgb(var(--k-mg, 224 60 255) / 35%); box-shadow: 0 0 12px rgb(var(--k-mg, 224 60 255) / 10%); }
.gs-sh__art { position: relative; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 2px; background: rgb(var(--k-bg2, 7 6 26)); }
.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(var(--k-tx, 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(var(--k-ln, 120 140 255) / 30%);
  border-radius: 2px;
  background: rgb(var(--k-bg1, 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: rgb(var(--k-cy, 34 228 255)); box-shadow: 0 0 12px rgb(var(--k-cy, 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, rgb(var(--k-cy, 34 228 255)), rgb(var(--k-bl, 79 123 255)) 45%, rgb(var(--k-mg, 224 60 255)));
  font-family: var(--k-fd, "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(var(--k-ln, 120 140 255) / 30%);
  background: rgb(var(--k-bg1, 5 4 15) / 50%);
  font-size: 12.5px;
}
.gs-sh__kind { font: 700 10px/1.4 var(--k-fd, "Orbitron"), system-ui, sans-serif; letter-spacing: .08em; text-transform: uppercase; padding: 1px 5px; border-radius: 2px; }
.gs-sh__kind--state { color: rgb(var(--k-cy-hi, 169 243 255)); border: 1px solid rgb(var(--k-cy, 34 228 255) / 45%); }
.gs-sh__kind--save { color: rgb(var(--k-mg-hi, 243 179 255)); border: 1px solid rgb(var(--k-mg, 224 60 255) / 45%); }
.gs-sh__when { flex: 1; min-width: 0; color: rgb(var(--k-tx, 215 222 255) / 75%); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gs-sh__mini { color: rgb(var(--k-cy-hi, 169 243 255)) !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(var(--k-bg0, 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(var(--k-cy, 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(var(--k-bg3, 16 12 44) / 97%), rgb(var(--k-bg1, 6 5 20) / 98%));
  box-shadow: 0 0 30px rgb(var(--k-cy, 34 228 255) / 18%), 0 30px 80px rgb(0 0 0 / 70%);
  color: rgb(var(--k-tx, 232 236 255));
  font-family: "Exo 2", system-ui, sans-serif;
}
.gs-pad__head { display: flex; align-items: center; padding: 18px 20px; border-bottom: 1px solid rgb(var(--k-ln, 120 140 255) / 20%); }
.gs-pad__head h2 { margin: 0; font: 800 19px/1 var(--k-fd, "Orbitron"), system-ui, sans-serif; letter-spacing: .06em; color: #fff; text-shadow: 0 0 14px rgb(var(--k-cy, 34 228 255) / 45%); }
.gs-pad__close {
  margin-left: auto; width: 38px; height: 38px; display: grid; place-items: center;
  border: 1px solid rgb(var(--k-ln, 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: rgb(var(--k-mg, 224 60 255)); outline: none; box-shadow: 0 0 12px rgb(var(--k-mg, 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(var(--k-cy, 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(var(--k-tx, 215 222 255) / 65%); }
.gs-pad__step { margin: 0; font: 700 11px/1 var(--k-fd, "Orbitron"), system-ui, sans-serif; letter-spacing: .2em; text-transform: uppercase; color: rgb(var(--k-cy-hi, 169 243 255)); }
.gs-pad__target {
  justify-self: center;
  min-width: 180px;
  padding: 18px 28px;
  border: 2px solid rgb(var(--k-cy, 34 228 255));
  border-radius: 3px;
  font: 800 34px/1 var(--k-fd, "Orbitron"), system-ui, sans-serif;
  color: #fff;
  text-shadow: 0 0 16px rgb(var(--k-cy, 34 228 255) / 70%);
  box-shadow: 0 0 24px rgb(var(--k-cy, 34 228 255) / 35%), inset 0 0 18px rgb(var(--k-mg, 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(var(--k-mg, 224 60 255) / 50%); border-radius: 2px; font-size: 12px; color: rgb(var(--k-mg-hi, 243 179 255)); }
.gs-pad__tag.ok { border-color: rgb(var(--k-cy, 34 228 255) / 55%); color: rgb(var(--k-cy-hi, 169 243 255)); }
.gs-pad__grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 6px; }
.gs-pad__key {
  padding: 10px 0;
  border: 1px solid rgb(var(--k-ln, 120 140 255) / 30%);
  border-radius: 2px;
  background: rgb(var(--k-bg1, 5 4 15) / 70%);
  font: 700 12px/1 var(--k-fd, "Orbitron"), system-ui, sans-serif;
  color: rgb(var(--k-tx, 215 222 255) / 70%);
  transition: background .08s, box-shadow .08s, color .08s;
}
.gs-pad__key.on { background: linear-gradient(90deg, rgb(var(--k-cy, 34 228 255)), rgb(var(--k-mg, 224 60 255))); color: #fff; box-shadow: 0 0 14px rgb(var(--k-cy, 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(var(--k-ln, 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: rgb(var(--k-cy, 34 228 255)); box-shadow: 0 0 10px rgb(var(--k-cy, 34 228 255)); }
.gs-pad__stick small { position: absolute; bottom: -18px; font-size: 11px; color: rgb(var(--k-tx, 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(var(--k-ln, 120 140 255) / 30%); border-radius: 2px; background: rgb(var(--k-bg1, 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: rgb(var(--k-cy, 34 228 255)); box-shadow: 0 0 12px rgb(var(--k-cy, 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, rgb(var(--k-cy, 34 228 255)), rgb(var(--k-bl, 79 123 255)) 45%, rgb(var(--k-mg, 224 60 255)));
  font-family: var(--k-fd, "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, rgb(var(--k-cy, 34 228 255)), rgb(var(--k-mg, 224 60 255))); 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(var(--k-cy, 34 228 255) / 45%); background: rgb(var(--k-bg1, 5 4 15) / 50%); font-size: 13px; }
.gs-pad__summary b { color: #fff; }
.gs-pad__summary span { color: rgb(var(--k-cy-hi, 169 243 255)); }
@keyframes gs-pad-bob { 50% { transform: translateY(-6px); } }
@keyframes gs-pad-pulse { 50% { box-shadow: 0 0 34px rgb(var(--k-cy, 34 228 255) / 55%), inset 0 0 18px rgb(var(--k-mg, 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; } }