/* ==========================================================================================================
   rooms.css - the platform "gaming rooms" (CLAUDE.md B8): /playstation-5 "Night arena", /playstation-4 "Classics
   lounge", /nintendo-switch "Play room", /pcgames "Battle station". Markup: Views/Home/_Room.cshtml; behaviour:
   web/js/rooms.js; design: design/platform-pages/concepts-round3.html.

   Root .g2r + one token block per room (.room-ps5, .room-ps4, .room-switch, .room-pc): --room-bg, --tone (the room's
   colour), --tone-2 (its light / accent colour), --tone-ink (text on --tone-2). Shared parts first, then each room's
   hero, then the sections, the feed and the FAQ.

   Rules: logical properties (dir="rtl" mirrors the page; no .rtl twin); motion is transform / opacity only, paused
   off screen (.is-paused, rooms.js) and on a hidden tab (html.g2r-hidden), and none of it runs under
   prefers-reduced-motion; content never depends on JavaScript to be visible (reveal hides only under html.g2r-motion,
   which rooms.js sets). Decorative layers take no pointer events.
   ========================================================================================================== */

.g2r {
    --room-bg: #0b0d10;
    --tone: #95ab52;
    --tone-2: #bcd767;
    --tone-ink: #14200a;
    --g2r-ease: cubic-bezier(.2, .7, .2, 1);
    --g2r-spring: cubic-bezier(.34, 1.56, .64, 1);
    --g2r-mono: var(--g2-font-mono, "JetBrains Mono", ui-monospace, Consolas, monospace);
    --g2r-bar-height: 54px;
    position: relative;
    isolation: isolate;
    overflow-x: clip;
    background: var(--room-bg);
    color: var(--g2-text);
}

.room-ps5 { --room-bg: #04060c; --tone: #2f7bff; --tone-2: #8ab8ff; --tone-ink: #031029; }
.room-ps4 { --room-bg: #0b0912; --tone: #6b5cf0; --tone-2: #f0ad4e; --tone-ink: #241400; }
.room-switch { --room-bg: #0d0e12; --tone: #e60012; --tone-2: #ff4d5a; --tone-ink: #fff; }
.room-pc { --room-bg: #050608; --tone: #8fb84a; --tone-2: #bcd767; --tone-ink: #14200a; }

.g2r *, .g2r *::before, .g2r *::after { box-sizing: border-box; }
.g2r :is(h1, h2, h3, h4, p) { text-transform: none; }
.g2r img { max-width: 100%; }
.g2r [hidden] { display: none !important; }
.g2r :focus-visible { outline: 2px solid var(--tone-2); outline-offset: 3px; }

.g2r-kicker {
    margin: 0 0 6px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--tone-2);
}

/* Sections land below the sticky room bar. */
.g2r-anchor, .g2r [id^="r-"] { scroll-margin-top: calc(var(--g2r-bar-height) + 12px); }

/* ---------- reveal on scroll (only when rooms.js runs and motion is allowed) ---------- */
html.g2r-motion [data-room-reveal] { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--g2r-ease), transform .7s var(--g2r-ease); }
html.g2r-motion [data-room-reveal].is-in { opacity: 1; transform: none; }

/* ---------- paused: off screen (rooms.js .is-paused) or a hidden tab ---------- */
.g2r .is-paused *, .g2r .is-paused *::before, .g2r .is-paused *::after,
.g2r .is-paused::before, .g2r .is-paused::after,
html.g2r-hidden .g2r *, html.g2r-hidden .g2r *::before, html.g2r-hidden .g2r *::after { animation-play-state: paused !important; }

/* ============================================================================================================
   HERO (shared frame)
   ============================================================================================================ */
.g2r-hero { position: relative; overflow: clip; isolation: isolate; }
.g2r-hero__bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }

.g2r-hero__wrap { position: relative; display: grid; gap: 18px; padding-block: 16px 28px; }
@media (min-width: 900px) {
    .g2r-hero__wrap { grid-template-columns: minmax(0, 520px) minmax(0, 1fr); align-items: center; gap: 24px; min-height: 560px; padding-block: 44px; }
}

.g2r-hero__copy { position: relative; z-index: 3; min-width: 0; }

.g2r-crumbs ol { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; padding: 0; list-style: none; font-size: 12.5px; color: var(--g2-dim); }
.g2r-crumbs li + li::before { content: "/"; margin-inline-end: 6px; color: var(--g2-dim); }
.g2r-crumbs a { color: var(--g2-muted); }
.g2r-crumbs a:hover { color: var(--g2-text); }

.g2r-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--tone-2);
}
.g2r-eyebrow::before { content: ""; width: 18px; height: 2px; border-radius: 2px; background: currentColor; }

.g2r .g2r-hero__title { margin: 10px 0 0; font-size: 24px; font-weight: 800; line-height: 1.2; letter-spacing: -.02em; text-wrap: balance; color: var(--g2-text); }
@media (min-width: 760px) { .g2r .g2r-hero__title { font-size: 32px; } }
.g2r-hero__intro { max-width: 52ch; margin: 10px 0 0; font-size: 14.5px; line-height: 1.5; color: #c9ced4; text-wrap: pretty; }

/* Platform search: the normal /products search (rooms.js adds the platform word when it is missing). */
.g2r-search {
    display: flex;
    align-items: center;
    gap: 8px;
    max-width: 480px;
    height: 50px;
    margin-top: 18px;
    padding-inline: 14px 5px;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 14px;
    background: rgba(10, 12, 16, .72);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.g2r-search:focus-within { border-color: color-mix(in srgb, var(--tone-2) 70%, transparent); }
.g2r-search__icon { display: inline-flex; color: var(--g2-muted); font-size: 16px; }
.g2r-search__input {
    flex: 1 1 auto;
    min-width: 0;
    height: 100%;
    border: 0;
    background: transparent;
    color: var(--g2-text);
    font: inherit;
    font-size: 14px;
    outline: none;
}
.g2r-search__input::placeholder { color: var(--g2-dim); }
.g2r-search__input::-webkit-search-cancel-button { filter: invert(.7); }
.g2r .g2r-search__go {
    flex: none;
    height: 40px;
    padding: 0 14px;
    border: 0;
    border-radius: 10px;
    background: var(--tone-2);
    color: var(--tone-ink);
    font: inherit;
    font-size: 13.5px;
    font-weight: 700;
    cursor: pointer;
}

/* Live facts (counted up by rooms.js). */
.g2r-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; max-width: 480px; margin: 14px 0 0; padding: 0; list-style: none; }
.g2r-fact {
    min-width: 0;
    padding: 10px 12px;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 14px;
    background: rgba(12, 14, 18, .62);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
.g2r-fact__value { display: block; font-size: 18px; font-weight: 700; line-height: 1.3; color: var(--g2-text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.g2r-fact__value small { font-size: 11px; font-weight: 500; color: var(--g2-muted); }
.g2r-fact__label { display: block; font-size: 11.5px; line-height: 1.3; color: var(--g2-muted); }
@media (max-width: 380px) { .g2r-fact { padding: 8px; } .g2r-fact__value { font-size: 15px; } }

/* The scene: above the copy on phones (smaller), beside it on desktop. */
.g2r-scene { position: relative; order: -1; height: 290px; min-width: 0; }
@media (min-width: 900px) { .g2r-scene { order: 0; height: 470px; } }
.g2r-layer { position: absolute; transition: transform .25s linear; }
.g2r-layer img { display: block; }

/* A game cover in a scene (a real product: a link). */
.g2r-poster { display: block; }
.g2r-poster img { width: 100%; height: auto; border-radius: 10px; box-shadow: 0 18px 34px -14px rgba(0, 0, 0, .95); }

/* ============================================================================================================
   PS5 - Night arena
   ============================================================================================================ */
.room-ps5 .g2r-hero__bg {
    background:
        radial-gradient(60% 70% at 72% 40%, rgba(47, 123, 255, .35), transparent 70%),
        radial-gradient(40% 40% at 10% 10%, rgba(120, 90, 255, .18), transparent 70%),
        #04060c;
}
.g2r-ps5__floor {
    position: absolute;
    inset: auto -40% -30% -40%;
    height: 70%;
    overflow: hidden;
    opacity: .55;
    transform: perspective(500px) rotateX(62deg);
    transform-origin: top;
    -webkit-mask-image: linear-gradient(transparent, #000 40%);
    mask-image: linear-gradient(transparent, #000 40%);
}
.g2r-ps5__floor::before {
    content: "";
    position: absolute;
    inset: -100% 0 0;
    background-image: linear-gradient(rgba(138, 184, 255, .35) 1px, transparent 1px), linear-gradient(90deg, rgba(138, 184, 255, .35) 1px, transparent 1px);
    background-size: 60px 60px;
    animation: g2r-floor 6s linear infinite;
}
@keyframes g2r-floor { to { transform: translateY(60px); } }

.g2r-ps5__sweep {
    position: absolute;
    inset: 0;
    z-index: 2;
    background: linear-gradient(100deg, transparent 40%, rgba(160, 200, 255, .1) 50%, transparent 60%);
    animation: g2r-sweep 8s ease-in-out infinite;
}
@keyframes g2r-sweep { 0%, 55% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }

/* The PlayStation shapes rising (pure CSS outlines, no images). */
.g2r-shapes { position: absolute; inset: 0; }
.g2r-shape { position: absolute; bottom: -40px; width: 22px; height: 22px; opacity: 0; animation: g2r-rise 11s linear infinite; }
.g2r-shape--tri { background: #4fd1a5; clip-path: polygon(evenodd, 50% 0, 100% 100%, 0 100%, 50% 0, 50% 24%, 15% 90%, 85% 90%, 50% 24%); }
.g2r-shape--circle { border: 2.4px solid #ff6b8a; border-radius: 50%; }
.g2r-shape--square { border: 2.4px solid #e48bff; border-radius: 2px; }
.g2r-shape--cross::before, .g2r-shape--cross::after { content: ""; position: absolute; inset-inline-start: 0; top: 50%; width: 100%; height: 2.4px; margin-top: -1.2px; background: #7fb2ff; transform: rotate(45deg); }
.g2r-shape--cross::after { transform: rotate(-45deg); }
.g2r-shape:nth-child(1) { inset-inline-start: 3%; animation-duration: 9s; animation-delay: 0s; }
.g2r-shape:nth-child(2) { inset-inline-start: 11%; width: 30px; height: 30px; animation-duration: 12s; animation-delay: -1.3s; }
.g2r-shape:nth-child(3) { inset-inline-start: 18%; width: 16px; height: 16px; animation-duration: 10s; animation-delay: -2.6s; }
.g2r-shape:nth-child(4) { inset-inline-start: 25%; animation-duration: 14s; animation-delay: -3.9s; }
.g2r-shape:nth-child(5) { inset-inline-start: 33%; width: 30px; height: 30px; animation-duration: 9s; animation-delay: -5.2s; }
.g2r-shape:nth-child(6) { inset-inline-start: 40%; width: 16px; height: 16px; animation-duration: 13s; animation-delay: -6.5s; }
.g2r-shape:nth-child(7) { inset-inline-start: 47%; animation-duration: 11s; animation-delay: -7.8s; }
.g2r-shape:nth-child(8) { inset-inline-start: 55%; width: 30px; height: 30px; animation-duration: 15s; animation-delay: -9.1s; }
.g2r-shape:nth-child(9) { inset-inline-start: 62%; width: 16px; height: 16px; animation-duration: 10s; animation-delay: -10.4s; }
.g2r-shape:nth-child(10) { inset-inline-start: 70%; animation-duration: 12s; animation-delay: -11.7s; }
.g2r-shape:nth-child(11) { inset-inline-start: 80%; width: 30px; height: 30px; animation-duration: 9s; animation-delay: -13s; }
.g2r-shape:nth-child(12) { inset-inline-start: 91%; width: 16px; height: 16px; animation-duration: 14s; animation-delay: -14.3s; }
@keyframes g2r-rise {
    0% { transform: translateY(0) rotate(0); opacity: 0; }
    12% { opacity: .55; }
    85% { opacity: .35; }
    100% { transform: translateY(-640px) rotate(200deg); opacity: 0; }
}

/* ONE console (the Pro render includes its controller) on the glowing ring, two floating covers. */
.g2r-ps5__ring { position: absolute; inset-inline-start: 50%; bottom: 20px; width: 270px; height: 80px; border-radius: 50%; translate: -50% 0; pointer-events: none; }
[dir="rtl"] .g2r-ps5__ring { translate: 50% 0; }
.g2r-ps5__ring::before { content: ""; position: absolute; inset: 0; border: 2px solid rgba(138, 184, 255, .5); border-radius: 50%; box-shadow: 0 0 40px rgba(47, 123, 255, .6), inset 0 0 30px rgba(47, 123, 255, .4); }
.g2r-ps5__ring::after { content: ""; position: absolute; inset: -14px; border: 1px dashed rgba(138, 184, 255, .35); border-radius: 50%; animation: g2r-spin 18s linear infinite; }
@keyframes g2r-spin { to { transform: rotate(360deg); } }
/* One composition around the console: the scene is a size container, so the console and the two covers scale with the
   room they have; the covers sit just behind the console's sides (overlapping its edges), the first one lower and in
   front, the second higher and dimmer, on desktop and phone alike. */
.g2r-scene--ps5 { container-type: size; }
.g2r-ps5__console { inset-inline-start: 50%; bottom: 44px; z-index: 2; height: min(240px, 70cqw); translate: -50% 0; }
[dir="rtl"] .g2r-ps5__console { translate: 50% 0; }
.g2r-ps5__console img { width: auto; height: 100%; filter: drop-shadow(0 30px 30px rgba(0, 0, 0, .7)) drop-shadow(0 0 40px rgba(47, 123, 255, .35)); animation: g2r-hover 5s ease-in-out infinite; }
@keyframes g2r-hover { 50% { transform: translateY(-12px); } }
.g2r-poster { z-index: 1; width: min(170px, 27cqw); }
.g2r-poster--0 { inset-inline-start: calc(50% + min(96px, 15cqw)); bottom: 26cqh; rotate: 7deg; }
.g2r-poster--1 { inset-inline-end: calc(50% + min(96px, 15cqw)); bottom: 36cqh; width: min(150px, 24cqw); rotate: -7deg; opacity: .88; }
.g2r-poster img { transition: transform .5s var(--g2r-spring); }
.g2r-poster:hover img { transform: translateY(-6px) scale(1.03); }
@media (min-width: 900px) {
    .g2r-ps5__ring { bottom: 40px; width: 380px; height: 110px; }
    .g2r-ps5__console { bottom: 70px; height: min(380px, 72cqw); }
}

.g2r-lightbar { position: relative; height: 3px; overflow: hidden; background: rgba(47, 123, 255, .15); }
.g2r-lightbar::after { content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; width: 30%; background: linear-gradient(90deg, transparent, #8ab8ff, transparent); animation: g2r-lightbar 3.5s ease-in-out infinite; }
@keyframes g2r-lightbar { from { transform: translateX(-100%); } to { transform: translateX(400%); } }

/* ============================================================================================================
   PS4 - Classics lounge
   ============================================================================================================ */
.g2r-ps4__art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .55; }
.room-ps4 .g2r-hero__bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, #0b0912 30%, rgba(11, 9, 18, .4)), linear-gradient(0deg, #0b0912, transparent 40%);
}
[dir="rtl"].room-ps4 .g2r-hero__bg::after { background: linear-gradient(270deg, #0b0912 30%, rgba(11, 9, 18, .4)), linear-gradient(0deg, #0b0912, transparent 40%); }
.g2r-ps4__spot {
    position: absolute;
    inset-inline-end: 4%;
    top: -140px;
    z-index: 1;
    width: 620px;
    height: 620px;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(240, 173, 78, .28), transparent);
    animation: g2r-sway 9s ease-in-out infinite;
}
@keyframes g2r-sway { 50% { transform: translate(-60px, 20px); } }

.g2r-ps4__badge {
    inset-inline-end: 4%;
    top: 6px;
    z-index: 2;
    display: grid;
    gap: 2px;
    padding: 12px 14px;
    border: 1px solid rgba(240, 173, 78, .35);
    border-radius: 16px;
    background: rgba(15, 12, 24, .82);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
.g2r-ps4__badge b { font-size: 20px; font-weight: 800; color: var(--tone-2); }
.g2r-ps4__badge b .g2e-price, .g2r-ps4__badge b .g2e-price * { color: inherit !important; }
.g2r-ps4__badge span { font-size: 12px; color: var(--g2-muted); }
@media (min-width: 900px) { .g2r-ps4__badge { top: 30px; } .g2r-ps4__badge b { font-size: 22px; } }

/* The shelf keeps every lifted spine inside: 44px of head room above the spines (the lift is 34px), and anything that
   does not fit the row is clipped (rooms.js hides the spines that would be cut). */
.g2r-ps4__shelf { position: absolute; inset-inline: 2%; bottom: 14px; height: 240px; overflow: hidden; }
@media (min-width: 900px) { .g2r-ps4__shelf { bottom: 60px; height: 300px; } }
.g2r-ps4__plank { position: absolute; inset-inline: 0; bottom: 0; height: 16px; border-radius: 4px; background: linear-gradient(180deg, #3a2a1a, #1d140c); box-shadow: 0 20px 30px -10px #000, inset 0 1px 0 rgba(255, 220, 170, .25); }
.g2r-ps4__spines { position: absolute; inset-inline: 10px; top: 44px; bottom: 16px; display: flex; align-items: flex-end; gap: 4px; }
/* The hit area: a fixed box that never moves or resizes, so the pointer never falls in and out of it. */
.g2r-spine { position: relative; flex: none; width: 24px; height: min(var(--tall, 220px), 100%); }
/* What lifts: the body, inside the fixed hit area. */
.g2r-spine__body {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 3px 3px 0 0;
    background: linear-gradient(90deg, rgba(255, 255, 255, .14), transparent 30%, rgba(0, 0, 0, .25)), hsl(var(--hue, 220) 38% var(--tone, 18%));
    box-shadow: inset -4px 0 0 rgba(0, 0, 0, .3), inset 1px 0 0 rgba(255, 255, 255, .18), 0 0 0 1px rgba(0, 0, 0, .4);
    transform-origin: bottom;
    transition: transform .45s var(--g2r-spring);
    pointer-events: none;
}
.g2r-spine__body::before {
    content: "PS4";
    position: absolute;
    top: 0;
    inset-inline: 0;
    display: grid;
    place-items: center;
    height: 22px;
    border-radius: 3px 3px 0 0;
    background: linear-gradient(180deg, #2a3fa8, #16257a);
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .04em;
    color: #fff;
}
.g2r-spine__body::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: 0 0 24px rgba(240, 173, 78, .55); opacity: 0; transition: opacity .45s; }
.g2r-spine__title { max-height: calc(100% - 30px); overflow: hidden; writing-mode: vertical-rl; rotate: 180deg; font-size: 9px; font-weight: 700; letter-spacing: .02em; white-space: nowrap; color: rgba(255, 255, 255, .92); text-shadow: 0 1px 2px rgba(0, 0, 0, .5); }
.g2r-spine.is-tilted .g2r-spine__body { rotate: 8deg; }
.g2r-spine.is-peek .g2r-spine__body, .g2r-spine.is-touched .g2r-spine__body { transform: translateY(-34px) rotate(-3deg); }
.g2r-spine.is-peek .g2r-spine__body::after, .g2r-spine.is-touched .g2r-spine__body::after { opacity: 1; }
@media (hover: hover) {
    .g2r-spine:hover .g2r-spine__body { transform: translateY(-34px) rotate(-3deg); }
    .g2r-spine:hover .g2r-spine__body::after { opacity: 1; }
}
/* While a spine is hovered or touched, every other idle motion in the hero holds still (rooms.js .is-holding). */
.g2r-hero.is-holding *, .g2r-hero.is-holding *::before, .g2r-hero.is-holding *::after { animation-play-state: paused !important; }
@media (min-width: 900px) { .g2r-spine { width: 34px; } .g2r-spine__title { font-size: 11px; } }

/* ============================================================================================================
   SWITCH - Play room: a platformer level in the hero (characters only there), scenery down the page
   ============================================================================================================ */
.room-switch .g2r-hero__bg::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(60% 60% at 70% 45%, rgba(230, 0, 18, .38), transparent 70%), radial-gradient(40% 50% at 95% 90%, rgba(0, 195, 227, .22), transparent 70%), #0d0e12;
}
.room-switch .g2r-hero__bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255, 255, 255, .08) 1.5px, transparent 1.6px);
    background-size: 26px 26px;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 50%);
    mask-image: linear-gradient(90deg, transparent, #000 50%);
}
/* --- The level. The scene is a size container: every part is placed in cqw (across) / cqh (up), so the composition keeps
   its shape from a phone to a wide screen. --sw-dir mirrors the horizontal journeys under RTL (positions are logical). */
.room-switch { --sw-dir: 1; }
[dir="rtl"].room-switch { --sw-dir: -1; }
.g2r-scene--switch { container-type: size; }
@media (max-width: 899px) { .g2r-scene--switch { height: 330px; } }

.g2r-sw__console { inset-inline-end: 0; top: 3cqh; z-index: 2; width: 60cqw; max-width: 600px; }
.g2r-sw__console img { width: 100%; height: auto; filter: drop-shadow(0 30px 40px rgba(0, 0, 0, .7)); animation: g2r-float 6s ease-in-out infinite; }
@keyframes g2r-float { 50% { transform: translateY(-10px) rotate(-1deg); } }

/* Clouds: three in the hero, more down the page (.g2r-sky). Original shapes: a pill with two puffs. */
.g2r-cloud { position: absolute; display: block; width: 130px; height: 42px; border-radius: 42px; background: #fff; box-shadow: inset 0 -7px 0 rgba(255, 77, 90, .18); }
.g2r-cloud::before, .g2r-cloud::after { content: ""; position: absolute; border-radius: 50%; background: inherit; }
.g2r-cloud::before { width: 52%; height: 150%; inset-inline-start: 14%; bottom: 28%; }
.g2r-cloud::after { width: 38%; height: 112%; inset-inline-end: 12%; bottom: 34%; }
@keyframes g2r-drift { from { transform: translateX(-28px); } to { transform: translateX(28px); } }
.g2r-sw__clouds { inset: 0; z-index: 0; pointer-events: none; }
.g2r-sw__clouds .g2r-cloud { opacity: .2; animation: g2r-drift 18s ease-in-out infinite alternate; }
.g2r-cloud--a { top: 8cqh; inset-inline-start: 3cqw; }
.g2r-cloud--b { top: 30cqh; inset-inline-start: 34cqw; scale: .7; animation-duration: 24s !important; animation-delay: -8s !important; }
.g2r-cloud--c { top: 1cqh; inset-inline-end: 4cqw; scale: .85; animation-duration: 21s !important; animation-delay: -4s !important; }

/* The ground: brick tiles in the room's red with a Joy-Con cyan top edge. */
.g2r-sw__ground {
    inset-inline: -2cqw;
    bottom: 0;
    z-index: 4;
    height: 9cqh;
    border-radius: 4px 4px 0 0;
    background:
        linear-gradient(180deg, #4fe0f2 0 3px, #00a6c2 3px 6px, transparent 6px),
        linear-gradient(180deg, transparent 0 52%, rgba(0, 0, 0, .3) 52% calc(52% + 2px), transparent 0),
        repeating-linear-gradient(90deg, transparent 0 44px, rgba(0, 0, 0, .32) 44px 46px),
        linear-gradient(180deg, #c8142d, #74091a);
    box-shadow: inset 0 -6px 0 rgba(0, 0, 0, .25);
}

/* Platforms: gold planks; one moves side to side. */
.g2r-sw__platform {
    display: block;
    width: 18cqh;
    height: 3.6cqh;
    border-radius: 6px;
    background: repeating-linear-gradient(90deg, rgba(0, 0, 0, .16) 0 2px, transparent 2px 16px), linear-gradient(180deg, #ffd85a 0 34%, #e9a300 34%);
    box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .22), 0 12px 16px -8px rgba(0, 0, 0, .8);
}
.g2r-sw__platform--a { inset-inline-start: calc(2cqw + 24cqh); bottom: 40cqh; z-index: 3; }
.g2r-sw__platform--b { inset-inline-start: calc(2cqw + 44cqh); bottom: 52cqh; z-index: 3; }
.g2r-sw__mover { inset-inline-end: 20cqw; bottom: 22cqh; z-index: 3; width: 16cqh; height: 3.6cqh; --mover-travel: 9cqw; }
.g2r-sw__platform--moving { position: relative; width: 100%; height: 100%; background: repeating-linear-gradient(90deg, rgba(0, 0, 0, .16) 0 2px, transparent 2px 16px), linear-gradient(180deg, #7fe6f5 0 34%, #00a6c2 34%); animation: g2r-mover 4.8s ease-in-out infinite alternate; }
@keyframes g2r-mover { from { transform: translateX(calc(var(--sw-dir) * var(--mover-travel) * -1)); } to { transform: translateX(calc(var(--sw-dir) * var(--mover-travel) * .6)); } }

/* The pipe (CSS, the Joy-Con cyan): a body and a wider lip. */
.g2r-pipe { position: relative; display: block; width: 100%; height: 100%; border-radius: 0 0 2px 2px; background: linear-gradient(90deg, #006b7c, #00b5d3 28%, #8ff0fb 42%, #00a6c2 68%, #00505d); box-shadow: inset 0 0 0 3px rgba(0, 0, 0, .25); }
.g2r-pipe::before { content: ""; position: absolute; inset-inline: -16%; top: 0; height: max(12px, 24%); border-radius: 4px; background: inherit; box-shadow: inset 0 0 0 3px rgba(0, 0, 0, .25), 0 4px 0 rgba(0, 0, 0, .25); }
.g2r-sw__pipe { inset-inline-end: 5cqw; bottom: 9cqh; z-index: 3; width: max(34px, 8cqh); height: 16cqh; }

/* Floating coins and stars. */
.g2r-sw__coins { inset: 0; z-index: 3; pointer-events: none; }
.g2r-sw__floatcoin { position: absolute; width: max(18px, 5cqh); height: auto; animation: g2r-coin-float 2.8s ease-in-out infinite; }
.g2r-sw__floatcoin--a { inset-inline-start: calc(2cqw + 30cqh); bottom: 60cqh; }
.g2r-sw__floatcoin--b { inset-inline-end: calc(20cqw + 5cqh); bottom: 32cqh; animation-delay: -.9s; }
.g2r-sw__floatcoin--c { inset-inline-end: 6cqw; bottom: 33cqh; animation-delay: -1.8s; }
@keyframes g2r-coin-float { 0%, 100% { transform: translateY(0) scaleX(1); } 25% { transform: translateY(-6px) scaleX(.25); } 50% { transform: translateY(-10px) scaleX(1); } 75% { transform: translateY(-6px) scaleX(.25); } }

/* Characters: a fixed spot (the layer, which also takes the pointer parallax), a journey (.g2r-sw__move), the body's
   squash and stretch (.g2r-sw__body, from the feet) and a bounce when the pointer comes near or on a tap (.g2r-sw__boing,
   rooms.js .is-bounce). Feet on a platform or the ground; Yoshi and Mario face into the page. */
.g2r-sw__move, .g2r-sw__body, .g2r-sw__boing { display: block; width: 100%; height: 100%; }
.g2r-sw__body, .g2r-sw__boing { transform-origin: 50% 100%; }
.g2r-sw__body img, .g2r-sw__mario img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 10px 8px rgba(0, 0, 0, .45)); }
.is-bounce .g2r-sw__boing { animation: g2r-boing .6s var(--g2r-spring); }
@keyframes g2r-boing { 0% { transform: none; } 20% { transform: translateY(0) scale(1.18, .8); } 50% { transform: translateY(-22%) scale(.9, 1.12); } 75% { transform: translateY(0) scale(1.08, .92); } 100% { transform: none; } }

/* DK: idles on the left platform, leaps to the right one, idles, leaps back. */
.g2r-sw__dk { inset-inline-start: calc(2cqw + 22cqh); bottom: 43cqh; z-index: 4; width: 22cqh; height: 22cqh; cursor: pointer; }
.g2r-sw__dk .g2r-sw__move { animation: g2r-dk-leap 6.4s ease-in-out infinite; }
.g2r-sw__dk .g2r-sw__body { animation: g2r-dk-body 6.4s ease-in-out infinite; }
@keyframes g2r-dk-leap {
    0%, 16% { transform: translate(0, 0); }
    24% { transform: translate(calc(var(--sw-dir) * 9cqh), -24cqh); }
    32%, 62% { transform: translate(calc(var(--sw-dir) * 22cqh), -12cqh); }
    70% { transform: translate(calc(var(--sw-dir) * 13cqh), -28cqh); }
    78%, 100% { transform: translate(0, 0); }
}
@keyframes g2r-dk-body {
    0%, 100% { transform: none; }
    6% { transform: scale(1.03, .97); }
    11% { transform: none; }
    14% { transform: scale(1.14, .84); }
    18% { transform: scale(.9, 1.12); }
    29% { transform: scale(.97, 1.03); }
    33% { transform: scale(1.16, .82); }
    37% { transform: scale(.97, 1.03); }
    40% { transform: none; }
    48% { transform: scale(1.03, .97); }
    54% { transform: none; }
    60% { transform: scale(1.14, .84); }
    64% { transform: scale(.9, 1.12); }
    75% { transform: scale(.97, 1.03); }
    79% { transform: scale(1.16, .82); }
    83% { transform: scale(.97, 1.03); }
    87% { transform: none; }
}

/* Yoshi: runs along the ground tiles with a step bob, hops on the way, turns at each end. */
.g2r-sw__yoshi { inset-inline-start: calc(2cqw + 26cqh); bottom: 9cqh; z-index: 5; width: 20cqh; height: 20cqh; cursor: pointer; --run: calc(52cqw - 26cqh); }
.g2r-sw__yoshi .g2r-sw__move { animation: g2r-yoshi-run 9s linear infinite; }
.g2r-sw__yoshi .g2r-sw__body { animation: g2r-yoshi-step .44s ease-in-out infinite; }
@keyframes g2r-yoshi-run {
    0% { transform: translate(0, 0) scaleX(var(--sw-dir)); }
    14% { transform: translate(calc(var(--sw-dir) * var(--run) * .3), 0) scaleX(var(--sw-dir)); }
    19% { transform: translate(calc(var(--sw-dir) * var(--run) * .42), -12cqh) scaleX(var(--sw-dir)); }
    24% { transform: translate(calc(var(--sw-dir) * var(--run) * .54), 0) scaleX(var(--sw-dir)); }
    44% { transform: translate(calc(var(--sw-dir) * var(--run)), 0) scaleX(var(--sw-dir)); }
    46%, 50% { transform: translate(calc(var(--sw-dir) * var(--run)), 0) scaleX(calc(var(--sw-dir) * -1)); }
    66% { transform: translate(calc(var(--sw-dir) * var(--run) * .6), 0) scaleX(calc(var(--sw-dir) * -1)); }
    71% { transform: translate(calc(var(--sw-dir) * var(--run) * .48), -12cqh) scaleX(calc(var(--sw-dir) * -1)); }
    76% { transform: translate(calc(var(--sw-dir) * var(--run) * .36), 0) scaleX(calc(var(--sw-dir) * -1)); }
    94% { transform: translate(0, 0) scaleX(calc(var(--sw-dir) * -1)); }
    96%, 100% { transform: translate(0, 0) scaleX(var(--sw-dir)); }
}
@keyframes g2r-yoshi-step { 0%, 100% { transform: scale(1.03, .97); } 50% { transform: translateY(-5%) scale(.98, 1.03); } }

/* Mario under the "?" block: he jumps, the block bumps and a coin pops (the block also does it on hover / tap). */
.g2r-sw__mario { inset-inline-start: 2cqw; bottom: 9cqh; z-index: 5; width: 21cqh; height: 28cqh; cursor: pointer; }
.g2r-sw__mario img { transform-origin: bottom; animation: g2r-jump 2.4s var(--g2r-ease) infinite; }
[dir="rtl"] .g2r-sw__mario .g2r-sw__boing { scale: -1 1; }
@keyframes g2r-jump {
    0%, 100% { transform: translateY(0) scaleY(1); }
    8% { transform: translateY(2%) scale(1.06, .92); }
    30% { transform: translateY(-86%) scaleY(1.04); }
    45% { transform: translateY(-86%); }
    70% { transform: translateY(0); }
    76% { transform: translateY(1%) scale(1.04, .95); }
}
.g2r-sw__block { inset-inline-start: calc(2cqw + 6cqh); bottom: 61cqh; z-index: 5; width: max(30px, 9cqh); height: max(30px, 9cqh); font-size: max(17px, 5cqh); cursor: pointer; }
.g2r-qblock {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    border: 3px solid #7a4a00;
    border-radius: 8px;
    background: linear-gradient(180deg, #ffcc33, #e89a00);
    box-shadow: inset -4px -4px 0 rgba(0, 0, 0, .18), inset 4px 4px 0 rgba(255, 255, 255, .35);
    font-weight: 900;
    line-height: 1;
    color: #fff;
    text-shadow: 2px 2px 0 #7a4a00;
}
.g2r-qblock__coin { position: absolute; z-index: 0; inset-inline-start: 18%; top: 0; width: 64%; height: auto; opacity: 0; pointer-events: none; }
.g2r-sw__block .g2r-qblock { animation: g2r-bump 2.4s var(--g2r-ease) infinite; }
.g2r-sw__block .g2r-qblock__coin { animation: g2r-coin 2.4s var(--g2r-ease) infinite; }
.is-hit .g2r-qblock { animation: g2r-qblock-hit .45s var(--g2r-spring) !important; }
.is-hit .g2r-qblock__coin { animation: g2r-coin-pop .9s ease-out !important; }
@keyframes g2r-bump { 0%, 26%, 40%, 100% { transform: translateY(0); } 33% { transform: translateY(-34%); } }
@keyframes g2r-qblock-hit { 0%, 100% { transform: none; } 35% { transform: translateY(-36%) scale(1.06, .94); } 65% { transform: translateY(4%) scale(.97, 1.03); } }
@keyframes g2r-coin {
    0%, 30% { transform: translateY(0) scaleX(1); opacity: 0; }
    34% { opacity: 1; }
    40% { transform: translateY(-120%) scaleX(.2); }
    48% { transform: translateY(-220%) scaleX(1); opacity: 1; }
    54% { transform: translateY(-245%) scaleX(.2); }
    60%, 100% { transform: translateY(-250%) scaleX(1); opacity: 0; }
}
@keyframes g2r-coin-pop {
    0% { transform: translateY(0) scaleX(1); opacity: 0; }
    12% { opacity: 1; }
    30% { transform: translateY(-160%) scaleX(.2); }
    50% { transform: translateY(-240%) scaleX(1); opacity: 1; }
    70% { transform: translateY(-260%) scaleX(.2); }
    100% { transform: translateY(-200%) scaleX(1); opacity: 0; }
}
.g2r-sw__kirby { inset-inline-end: 2%; top: 14px; z-index: 3; width: 60px; }
.g2r-sw__kirby img { width: 100%; height: auto; animation: g2r-bob 3.2s ease-in-out infinite; }
@keyframes g2r-bob { 50% { transform: translateY(-14px) rotate(6deg); } }
.g2r-sw__star { width: 28px; }
.g2r-sw__star img { width: 100%; height: auto; animation: g2r-twinkle 2.6s ease-in-out infinite; }
.g2r-sw__star--a { inset-inline-end: 30%; top: 20px; }
.g2r-sw__star--b { inset-inline-end: 8%; bottom: 40px; }
.g2r-sw__star--b img { animation-delay: -1.2s; }
@keyframes g2r-twinkle { 0%, 100% { transform: scale(.6) rotate(0); opacity: .3; } 50% { transform: scale(1) rotate(30deg); opacity: 1; } }
@media (min-width: 900px) { .g2r-sw__kirby { width: 92px; } }

.g2r-joycon { display: grid; grid-template-columns: 1fr 1fr; height: 8px; }
.g2r-joycon i:first-child { background: #00c3e3; }
.g2r-joycon i:last-child { background: #ff4554; }

/* --- Scenery down the page (CSS shapes in the room's colours; characters stay in the hero art). */
.g2r-cons, .g2r-needs { position: relative; }
.g2r-cons > :not(.g2r-deco), .g2r-needs > :not(.g2r-deco) { position: relative; z-index: 1; }
.g2r-deco { position: absolute; z-index: 2; inset-inline-end: 8px; top: 0; pointer-events: none; }
@media (min-width: 900px) { .g2r-deco { inset-inline-end: 4%; } }
/* Room for the scenery next to the section title on phones. */
@media (max-width: 899px) { .room-switch .g2r-cons .g2-sec__heading { padding-inline-end: 132px; } }

/* A row of blocks: "?" blocks (hover / tap = bump + coin) and bricks. */
.g2r-deco--blocks { display: flex; font-size: 18px; }
.g2r-deco__block, .g2r-brick { position: relative; display: block; width: 32px; height: 32px; }
@media (min-width: 900px) { .g2r-deco--blocks { font-size: 22px; } .g2r-deco__block, .g2r-brick { width: 40px; height: 40px; } }
.g2r-deco__block { pointer-events: auto; cursor: pointer; }
.g2r-brick {
    border: 2px solid #4a0610;
    border-radius: 4px;
    background:
        linear-gradient(180deg, transparent 0 46%, rgba(0, 0, 0, .35) 46% calc(46% + 2px), transparent 0),
        linear-gradient(90deg, transparent 0 48%, rgba(0, 0, 0, .35) 48% calc(48% + 2px), transparent 0),
        linear-gradient(180deg, #e0213b, #9a0c20);
    box-shadow: inset 2px 2px 0 rgba(255, 255, 255, .2), inset -2px -2px 0 rgba(0, 0, 0, .2);
}
/* The Accessories section: a pipe, a moving platform and a coin over it. */
/* Inside the section's own box (final round): its bottom end corner, in room kept free under the tiles, behind the
   content; never over the header text. */
.room-switch .g2r-needs { padding-bottom: 104px; overflow: clip; }
.g2r-deco--pipe { top: auto; bottom: 8px; z-index: 0; width: 118px; height: 84px; }
.g2r-deco--pipe .g2r-pipe { position: absolute; inset-inline-end: 0; bottom: 0; width: 38px; height: 52px; }
.g2r-deco__mover { position: absolute; inset-inline-start: 0; top: 6px; width: 54px; height: 13px; --mover-travel: 20px; }
.g2r-deco__coin { position: absolute; inset-inline-start: 16px; top: -22px; width: 22px; height: auto; animation: g2r-coin-float 2.8s ease-in-out infinite; }

/* The sky down the whole page: clouds (scroll parallax set by rooms.js on the slot, a slow drift on the cloud) and a
   few floating coins and stars. Behind the sections; nothing to click. */
.g2r-sky { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.g2r-sky__slot { position: absolute; top: var(--top); inset-inline-start: var(--side); width: calc(150px * var(--size)); height: calc(48px * var(--size)); }
.g2r-sky .g2r-cloud { width: 100%; height: 100%; opacity: .09; animation: g2r-drift 46s ease-in-out infinite alternate; }
.g2r-sky__slot:nth-child(2n) .g2r-cloud { animation-duration: 62s; animation-delay: -20s; }
.g2r-sky__slot:nth-child(3n) .g2r-cloud { animation-duration: 54s; animation-delay: -34s; }
.g2r-sky__slot--coin, .g2r-sky__slot--star { width: 26px; height: 26px; }
.g2r-sky__pickup { display: block; width: 100%; height: auto; opacity: .55; animation: g2r-coin-float 3.2s ease-in-out infinite; }
.g2r-sky__slot--star .g2r-sky__pickup { animation-name: g2r-twinkle; animation-duration: 2.8s; }

/* Joy: section titles hop in when they enter the view (rooms.js .is-hop), cards hop on hover with a squashing shadow
   under them, buttons press with a spring. Transform / opacity only. */
.room-switch .g2-sec__title.is-hop { animation: g2r-title-hop .8s var(--g2r-spring); }
@keyframes g2r-title-hop {
    0% { transform: translateY(16px) scale(.96, 1.04); opacity: .4; }
    35% { transform: translateY(-10px) scale(1.02, .98); opacity: 1; }
    60% { transform: translateY(0) scale(1.03, .97); }
    78% { transform: translateY(-3px); }
    100% { transform: none; }
}
.room-switch .g2-card { position: relative; }
.room-switch .g2-card::after,
.room-switch .g2-lgrid__item::after {
    content: "";
    position: absolute;
    z-index: -1;
    inset-inline: 12%;
    pointer-events: none;
    opacity: 0;
    background: radial-gradient(50% 50% at 50% 50%, rgba(0, 0, 0, .7), transparent 70%);
}
/* Under a rail card's cover frame (4:5 box at the top of the card): the ellipse sits on the frame's bottom edge. */
.room-switch .g2-card::after { top: 0; inset-inline: 0; width: 100%; aspect-ratio: 4 / 5; height: auto; background: radial-gradient(38% 5% at 50% 100%, rgba(0, 0, 0, .75), transparent 100%); }
.room-switch .g2-lgrid__item { position: relative; }
.room-switch .g2-lgrid__item::after { bottom: -8px; height: 16px; }
@media (hover: hover) {
    .room-switch .g2-card:hover .g2-card__frame,
    .room-switch .g2-lgrid__item:hover .g2-lcard { animation: g2r-card-hop .6s var(--g2r-spring) forwards; }
    .room-switch .g2-card:hover::after,
    .room-switch .g2-lgrid__item:hover::after { animation: g2r-card-shadow .6s var(--g2r-spring) forwards; }
}
@keyframes g2r-card-hop {
    0% { transform: none; }
    35% { transform: translateY(-14px) scale(.98, 1.03); }
    60% { transform: translateY(-3px) scale(1.02, .98); }
    80% { transform: translateY(-8px); }
    100% { transform: translateY(-6px); }
}
@keyframes g2r-card-shadow {
    0% { opacity: .5; transform: none; }
    35% { opacity: .2; transform: scaleX(.7); }
    60% { opacity: .65; transform: scaleX(1.1); }
    100% { opacity: .35; transform: scaleX(.85); }
}
.room-switch :is(.g2-btn, .g2r-search__go, .g2r-feed__end-link, .g2r-bar__play, .g2-tab, .addToCart) { transition: transform .35s var(--g2r-spring); }
.room-switch :is(.g2-btn, .g2r-search__go, .g2r-feed__end-link, .g2r-bar__play, .g2-tab, .addToCart):active { transform: scale(.93); transition-duration: .08s; }

/* ============================================================================================================
   PC - Battle station
   ============================================================================================================ */
.room-pc .g2r-hero__bg { background: radial-gradient(50% 60% at 70% 40%, rgba(143, 184, 74, .16), transparent 70%), #050608; }
.room-pc .g2r-hero__bg::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, rgba(255, 255, 255, .025) 0 1px, transparent 1px 4px); }
/* One desk: the monitor fills the top of the scene, the terminal is anchored to its lower start corner and the W A S D
   keys to its lower end corner, so the scene has no empty middle on desktop or phone (a size container: cqw / cqh). */
.g2r-scene--pc { container-type: size; }
@media (max-width: 899px) { .g2r-scene--pc { height: 330px; } }
.g2r-pc__monitor { inset-inline-end: 0; top: 2cqh; z-index: 2; width: 74cqw; max-width: 640px; }
.g2r-pc__frame { position: relative; display: block; padding: 3px; overflow: hidden; border-radius: 16px; }
.g2r-pc__frame::before { content: ""; position: absolute; inset: -60%; background: conic-gradient(#ff3d6e, #ffb02e, #bcd767, #2ee6d6, #4d7cff, #b14dff, #ff3d6e); animation: g2r-spin 6s linear infinite; }
.g2r-pc__screen { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 13px; background: #07090c; }
.g2r-pc__slide { position: absolute; inset: 0; display: block; color: #fff; opacity: 0; animation: g2r-xfade 12s infinite; }
.g2r-pc__slide:nth-child(2) { animation-delay: 4s; }
.g2r-pc__slide:nth-child(3) { animation-delay: 8s; }
.g2r-pc__slide:only-child { opacity: 1; animation: none; }
.g2r-pc__slide:first-child:nth-last-child(2), .g2r-pc__slide:first-child:nth-last-child(2) ~ .g2r-pc__slide { animation-name: g2r-xfade-two; animation-duration: 8s; }
@keyframes g2r-xfade { 0%, 30% { opacity: 1; transform: scale(1.04); } 36%, 100% { opacity: 0; transform: scale(1); } }
@keyframes g2r-xfade-two { 0%, 45% { opacity: 1; transform: scale(1.04); } 52%, 100% { opacity: 0; transform: scale(1); } }
.g2r-pc__slide img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.g2r-pc__caption {
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    display: grid;
    gap: 2px;
    padding: 28px 16px 14px;
    background: linear-gradient(transparent, rgba(0, 0, 0, .8));
}
.g2r-pc__caption b { font-size: 17px; font-weight: 800; letter-spacing: -.02em; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.g2r-pc__caption span { font-family: var(--g2r-mono); font-size: 12.5px; color: rgba(255, 255, 255, .85); }
.g2r-pc__caption .g2e-price, .g2r-pc__caption .g2e-price * { color: inherit !important; }
@media (min-width: 900px) { .g2r-pc__caption b { font-size: 22px; } }
.g2r-pc__stand { display: block; width: 22%; height: 34px; margin: 0 auto; background: linear-gradient(180deg, #1a1d22, #0c0e11); clip-path: polygon(30% 0, 70% 0, 100% 100%, 0 100%); }

.g2r-pc__term {
    display: block;
    inset-inline-start: 0;
    bottom: 6cqh;
    z-index: 3;
    width: min(340px, 52cqw);
    padding: 30px 16px 14px;
    border: 1px solid #262c34;
    border-radius: 14px;
    background: rgba(8, 10, 12, .9);
    box-shadow: 0 24px 48px -18px #000, 0 0 0 1px rgba(143, 184, 74, .12);
    font-family: var(--g2r-mono);
    font-size: clamp(11px, 2.4cqw, 14.5px);
    line-height: 1.65;
    color: #8fdc8f;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
/* The window's title bar: three lights. */
.g2r-pc__term::before { content: ""; position: absolute; top: 11px; inset-inline-start: 14px; width: 9px; height: 9px; border-radius: 50%; background: #ff5f57; box-shadow: 15px 0 0 #febc2e, 30px 0 0 #28c840; }
[dir="rtl"] .g2r-pc__term::before { box-shadow: -15px 0 0 #febc2e, -30px 0 0 #28c840; }
.g2r-pc__term span { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; opacity: 0; animation: g2r-type 7.2s steps(1) infinite; }
.g2r-pc__term span:nth-child(2) { animation-name: g2r-type-2; }
.g2r-pc__term span:nth-child(3) { animation-name: g2r-type-3; color: var(--tone-2); }
@keyframes g2r-type { 0%, 100% { opacity: 1; } }
@keyframes g2r-type-2 { 0%, 25% { opacity: 0; } 26%, 100% { opacity: 1; } }
@keyframes g2r-type-3 { 0%, 50% { opacity: 0; } 51%, 100% { opacity: 1; } }
.g2r-pc__keys { --key: min(72px, 12cqw); display: grid; inset-inline-end: 4cqw; bottom: 1cqh; z-index: 4; grid-template-columns: repeat(3, var(--key)); gap: 8px; }
.g2r-pc__keys i {
    position: relative;
    display: grid;
    place-items: center;
    height: var(--key);
    border: 1px solid #2a2f37;
    border-radius: 12px;
    background: linear-gradient(180deg, #1c2026, #121418);
    box-shadow: 0 6px 0 #0a0b0d;
    font-family: var(--g2r-mono);
    font-style: normal;
    font-weight: 700;
    font-size: clamp(13px, 3cqw, 20px);
    color: var(--g2-muted);
    animation: g2r-key 4s infinite;
}
.g2r-pc__keys i::after { content: ""; position: absolute; inset: -1px; border-radius: inherit; box-shadow: 0 0 18px rgba(188, 215, 103, .6); opacity: 0; animation: g2r-key-glow 4s infinite; }
.g2r-pc__keys i:nth-child(1) { grid-column: 2; }
.g2r-pc__keys i:nth-child(2) { grid-column: 1; }
.g2r-pc__keys i:nth-child(1), .g2r-pc__keys i:nth-child(1)::after { animation-delay: .2s; }
.g2r-pc__keys i:nth-child(2), .g2r-pc__keys i:nth-child(2)::after { animation-delay: .9s; }
.g2r-pc__keys i:nth-child(3), .g2r-pc__keys i:nth-child(3)::after { animation-delay: 1.6s; }
.g2r-pc__keys i:nth-child(4), .g2r-pc__keys i:nth-child(4)::after { animation-delay: 2.3s; }
@keyframes g2r-key { 0%, 10%, 100% { transform: translateY(0); } 4% { transform: translateY(5px); } }
@keyframes g2r-key-glow { 0%, 10%, 100% { opacity: 0; } 4% { opacity: 1; } }

/* ============================================================================================================
   ROOM BAR (sticky; jump links + Play)
   ============================================================================================================ */
.g2r-bar {
    position: sticky;
    top: 0;
    z-index: 50;
    border-block: 1px solid rgba(255, 255, 255, .06);
    background: color-mix(in srgb, var(--room-bg) 86%, transparent);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
.g2r-bar__row { display: flex; align-items: center; gap: 6px; min-height: var(--g2r-bar-height); overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; }
.g2r-bar__row::-webkit-scrollbar { display: none; }
.g2r-bar__link {
    flex: none;
    padding: 7px 13px;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    color: var(--g2-muted);
    transition: color .2s, background-color .2s, border-color .2s;
}
.g2r-bar__link:hover { color: var(--g2-text); }
.g2r-bar__link.is-active { color: var(--g2-text); border-color: color-mix(in srgb, var(--tone) 60%, transparent); background: color-mix(in srgb, var(--tone) 16%, transparent); }
.g2r-bar__play {
    display: inline-flex;
    flex: none;
    align-items: center;
    gap: 6px;
    margin-inline-start: auto;
    padding: 7px 14px;
    border-radius: 999px;
    background: var(--tone-2);
    font-size: 13px;
    font-weight: 700;
    color: var(--tone-ink);
}
.g2r-bar__play .g2-ico { font-size: 11px; }
[dir="rtl"] .g2r-bar__play .g2-ico, [dir="rtl"] .g2r-arcade__play .g2-ico { transform: scaleX(-1); }

/* Tabs and links inside the room take the room's colour. */
.g2r .g2-tab[aria-selected="true"] { color: var(--g2-text) !important; border-color: color-mix(in srgb, var(--tone) 60%, var(--g2-line)) !important; background: color-mix(in srgb, var(--tone) 20%, var(--g2-surface)) !important; }
.g2r .g2-more { color: var(--tone-2); }

/* PC: the games tabs are W / A / S keys. */
.room-pc #r-games .g2-tab { gap: 8px; height: 44px; border-radius: 12px !important; box-shadow: 0 5px 0 #0a0b0d; background: linear-gradient(180deg, #1c2026, #121418) !important; transition: transform .1s, color .2s; }
.room-pc #r-games .g2-tab::before { font-family: var(--g2r-mono); font-size: 11px; padding: 1px 5px; border: 1px solid #2a2f37; border-radius: 5px; color: var(--g2-dim); }
.room-pc #r-games .g2-tab:nth-child(1)::before { content: "W"; }
.room-pc #r-games .g2-tab:nth-child(2)::before { content: "A"; }
.room-pc #r-games .g2-tab:nth-child(3)::before { content: "S"; }
.room-pc #r-games .g2-tab[aria-selected="true"] { transform: translateY(4px); box-shadow: 0 1px 0 #0a0b0d; color: var(--tone-2) !important; }

/* ============================================================================================================
   CONSOLES SHOWROOM (PC: launchers)
   ============================================================================================================ */
/* The number of cards sets the columns (data-count), so the row is always full: phones one a row (2) or a sliding row at
   85%; tablets 2 a row (2, 4) or sliding halves; desktop 2 halves, 3 thirds, 4 quarters, more = a sliding row of exact
   quarters with the site's rail arrows (.g2-hs: the arrows disable themselves at the ends). */
.g2r .g2r-cons__list { display: grid; grid-auto-flow: column; grid-auto-columns: 85%; gap: 16px; margin: 0; padding: 6px 0 10px; list-style: none; scroll-snap-type: x mandatory; }
.g2r-cons__list > li { display: flex; min-width: 0; scroll-snap-align: start; }
/* ---------- "View all": the last card of every rail on the room pages (ListProducts viewAllCard, _G2ViewAll.cshtml) ----------
   As tall as the cards beside it: "+N" (how many more the full list holds) and "View all →", on a dashed outline. */
.g2r .g2-viewall {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 0;
    min-height: 100%;
    padding: 16px 12px;
    border: 1px dashed #2e333b;
    border-radius: 16px;
    background: rgba(255, 255, 255, .015);
    text-align: center;
    color: var(--g2-muted);
    transition: border-color .25s, color .25s, background-color .25s;
}
.g2r .g2-viewall:hover { border-color: var(--tone-2); background: color-mix(in srgb, var(--tone) 8%, transparent); color: var(--tone-2); }
.g2-viewall__more { font-size: 26px; font-weight: 800; line-height: 1; color: var(--g2-text); }
.g2-viewall__label { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; }
.g2-top__item--viewall { display: flex; }
.g2-month--viewall .g2-month__track { opacity: 0; }
.g2-month--viewall .g2-release-item { display: flex; }
.g2-month--viewall .g2-viewall { width: 150px; min-height: 240px; }

/* Every card fills its cell (the PC launchers were as wide as their content: three widths and gaps). */
.g2r-cons__list > li > * { flex: 1 1 auto; min-width: 0; }
.g2r .g2r-cons__list:is([data-count="1"], [data-count="2"]) { grid-auto-flow: row; grid-template-columns: minmax(0, 1fr); }
.g2r-cons:is([data-count="1"], [data-count="2"]) .g2r-cons__arrows { display: none; }
@media (min-width: 600px) {
    .g2r .g2r-cons__list { grid-auto-columns: calc((100% - 16px) / 2); }
    .g2r .g2r-cons__list:is([data-count="2"], [data-count="4"]) { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .g2r-cons[data-count="4"] .g2r-cons__arrows { display: none; }
}
@media (min-width: 900px) {
    .g2r .g2r-cons__list { grid-auto-columns: calc((100% - 48px) / 4); }
    .g2r .g2r-cons__list[data-count="3"] { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .g2r .g2r-cons__list[data-count="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .g2r-cons[data-count="3"] .g2r-cons__arrows { display: none; }
}

/* A console card (round 5): the live product photo, title, 2-3 spec chips (known models only), price, stock line,
   "Pre-owned from" under a new console when a tested copy of its model is in stock; a "Best seller" / "Bundle" badge. */
.g2r-console {
    position: relative;
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
    padding: 16px;
    border: 1px solid #262b33;
    border-radius: 18px;
    background: var(--g2-raised);
    color: var(--g2-text);
    transition: transform .3s var(--g2r-ease), border-color .3s;
}
.g2r-console:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--tone) 55%, #262b33); }
.g2r-console__badge { position: absolute; top: 12px; inset-inline-end: 12px; z-index: 1; padding: 5px 7px; border-radius: 6px; background: var(--g2-gold); font: 700 11px/1 var(--g2r-mono); letter-spacing: .04em; text-transform: uppercase; color: #241800; }
.g2r-console__badge--bundle { background: var(--g2-brand, #95ab52); color: #14200a; }
.g2r-console__pic { display: grid; place-items: center; height: 150px; border-radius: 12px; background: radial-gradient(70% 70% at 50% 65%, rgba(255, 255, 255, .07), transparent 70%); }
.g2r-console__pic img { width: auto; max-width: 90%; height: auto; max-height: 136px; object-fit: contain; filter: drop-shadow(0 12px 18px rgba(0, 0, 0, .55)); transition: transform .5s var(--g2r-spring); }
.g2r-console:hover .g2r-console__pic img { transform: translateY(-6px) scale(1.03); }
.g2r-console__pic .g2r-con__shape { margin: 0; }
.g2r .g2r-console__name { display: -webkit-box; max-height: calc(2em * 1.34); margin: 0; overflow: hidden; font-size: 15px; font-weight: 600; line-height: 1.34; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.g2r-console__specs { display: flex; flex-wrap: wrap; gap: 5px; }
.g2r-console__specs span { padding: 3px 8px; border: 1px solid #262b33; border-radius: 999px; font-size: 11px; color: var(--g2-muted); }
.g2r-console__row { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 8px; margin-top: auto; }
.g2r-console__price .g2e-price { font-size: 18px; }
.g2r-console__was { margin-inline-start: 6px; }
.g2r .g2r-console__was .g2e-price, .g2r .g2r-console__was .g2e-price * { font-size: 12px; color: #868d96; }
.g2r-console__stock { font-size: 12px; font-weight: 600; color: #a8bf62; }
.g2r-console--used .g2r-console__stock { color: var(--g2-muted); }
.g2r-console__used { font-size: 12px; color: var(--g2-muted); }
.g2r-console__used b .g2e-price { font-size: 12px; }
.g2r-con {
    position: relative;
    display: grid;
    gap: 12px;
    height: 100%;
    padding: 18px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 22px;
    background: linear-gradient(180deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, .01));
    color: var(--g2-text);
    transition: transform .5s var(--g2r-ease), border-color .4s;
}
.g2r-con:hover { transform: translateY(-6px); border-color: color-mix(in srgb, var(--tone) 60%, transparent); }
.g2r-con__badge { position: absolute; top: 14px; inset-inline-start: 14px; z-index: 2; padding: 3px 9px; border-radius: 999px; background: var(--tone-2); font-size: 11px; font-weight: 700; color: var(--tone-ink); }
.g2r-con__pod { position: relative; display: grid; place-items: end center; height: 210px; }
.g2r-con__pod::before { content: ""; position: absolute; bottom: 4px; width: 70%; height: 30px; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--tone) 70%, transparent), transparent); opacity: .6; transition: transform .5s var(--g2r-ease), opacity .5s; }
.g2r-con:hover .g2r-con__pod::before { transform: scaleX(1.25); opacity: 1; }
.g2r-con__pod img { position: relative; width: auto; max-width: 92%; height: auto; max-height: 200px; filter: drop-shadow(0 24px 20px rgba(0, 0, 0, .6)); transition: transform .6s var(--g2r-spring); }
.g2r-con:hover .g2r-con__pod img { transform: translateY(-10px) scale(1.04); }
.g2r-con__shape { position: relative; display: block; width: 180px; height: 44px; margin-bottom: 20px; border-radius: 6px; background: linear-gradient(180deg, #22252c, #0c0d10); box-shadow: 0 20px 20px -10px #000, inset 0 -6px 0 rgba(0, 0, 0, .4); }
.g2r-con__shape--key { display: grid; place-items: center; width: 140px; height: 80px; margin-bottom: 24px; border: 1px solid #2a2f37; border-radius: 14px; background: #11151a; box-shadow: none; font-weight: 800; font-size: 14px; color: var(--tone-2); }
/* A launcher card's visual: a fan of three live key covers, the launcher's name on a key cap in front of it. */
.g2r-fan { position: relative; display: block; width: min(100%, 240px); height: 190px; }
/* .g2r-con__pod in front: these must beat the pod's generic "img" rules (position, size, hover lift). */
.g2r-con__pod .g2r-fan__cover {
    position: absolute;
    max-height: none;
    filter: none;
    bottom: 18px;
    inset-inline-start: 50%;
    width: 108px;
    max-width: none;
    height: auto;
    aspect-ratio: 3 / 4;
    border-radius: 10px;
    background: #0f1216;
    object-fit: contain;
    box-shadow: 0 18px 28px -12px rgba(0, 0, 0, .95), 0 0 0 1px rgba(255, 255, 255, .08);
    transform-origin: 50% 100%;
    translate: -50% 0;
    transition: transform .5s var(--g2r-spring);
}
[dir="rtl"] .g2r-con__pod .g2r-fan__cover { translate: 50% 0; }
.g2r-con__pod .g2r-fan__cover--0 { z-index: 2; transform: translateY(-6px); }
.g2r-con__pod .g2r-fan__cover--1 { z-index: 1; transform: translateX(-62px) rotate(-12deg) scale(.92); }
.g2r-con__pod .g2r-fan__cover--2 { z-index: 1; transform: translateX(62px) rotate(12deg) scale(.92); }
.g2r-con:hover .g2r-con__pod .g2r-fan__cover--0 { transform: translateY(-16px); }
.g2r-con:hover .g2r-con__pod .g2r-fan__cover--1 { transform: translateX(-78px) rotate(-17deg) scale(.92); }
.g2r-con:hover .g2r-con__pod .g2r-fan__cover--2 { transform: translateX(78px) rotate(17deg) scale(.92); }
.g2r-con__pod--fan::before { z-index: 0; }
.g2r-con__shape--cap { position: absolute; z-index: 3; bottom: 0; width: auto; min-width: 120px; height: 44px; margin: 0; padding: 0 16px; box-shadow: 0 5px 0 #0a0b0d, 0 14px 24px -10px #000; }
.g2r-con__name { font-size: 17px; font-weight: 700; }
.g2r-con__specs { display: flex; flex-wrap: wrap; gap: 6px; }
.g2r-con__specs span { padding: 3px 8px; border: 1px solid rgba(255, 255, 255, .08); border-radius: 8px; font-size: 12px; color: var(--g2-muted); }
.g2r-con__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 10px; align-self: end; }
.g2r-con__price { font-size: 13px; color: var(--g2-muted); }
.g2r-con__price .g2e-price { font-size: 18px; }
.g2r-con__price--note { font-size: 13.5px; color: var(--g2-muted); }
.g2r-con__used { font-size: 12.5px; color: var(--g2-muted); }
.g2r-con__used b, .g2r-con__used b .g2e-price, .g2r-con__used b .g2e-price * { color: #7be8a8 !important; }

/* ============================================================================================================
   ARCADE BAND (the game itself opens in arcade.js's focus mode)
   ============================================================================================================ */
/* One designed block: the copy on one side, a LARGE cabinet preview centred in the other half on a lit stage
   (a glow and a floor line behind it), so the band has no empty middle. Phones: copy, then the preview, centred. */
.g2r-arcade {
    position: relative;
    display: grid;
    gap: 24px;
    align-items: center;
    padding: 22px 18px 26px;
    overflow: hidden;
    isolation: isolate;
    border: 1px solid color-mix(in srgb, var(--tone) 35%, var(--g2-line));
    border-radius: 24px;
    background: radial-gradient(90% 120% at 100% 0%, color-mix(in srgb, var(--tone) 22%, transparent), transparent 60%), var(--g2-surface);
}
.g2r-arcade::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset-inline-end: 0;
    bottom: 0;
    width: 100%;
    height: 62%;
    background:
        radial-gradient(50% 60% at 50% 100%, color-mix(in srgb, var(--tone) 34%, transparent), transparent 70%),
        repeating-linear-gradient(90deg, rgba(255, 255, 255, .035) 0 1px, transparent 1px 44px);
    -webkit-mask-image: linear-gradient(transparent, #000 60%);
    mask-image: linear-gradient(transparent, #000 60%);
    pointer-events: none;
}
@media (min-width: 900px) {
    .g2r-arcade { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 32px; padding: 36px 44px; min-height: 560px; }
    .g2r-arcade::before { width: 55%; height: 100%; }
}
@media (min-width: 1600px) { .g2r-arcade { min-height: 620px; padding-inline: 64px; } }
.g2r-arcade__info { position: relative; z-index: 1; min-width: 0; }
.g2r .g2r-arcade__title { margin: 4px 0 10px; font-size: 28px; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; color: var(--g2-text); }
@media (min-width: 900px) { .g2r .g2r-arcade__title { font-size: 40px; } }
@media (min-width: 1600px) { .g2r .g2r-arcade__title { font-size: 48px; } }
.g2r-arcade__pitch { max-width: 46ch; margin: 0; font-size: 14.5px; line-height: 1.6; color: #c9ced4; }
@media (min-width: 900px) { .g2r-arcade__pitch { font-size: 16px; } }
.g2r-arcade__pitch:empty, .g2r-arcade__chips:empty { display: none; }
.g2r-arcade__chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 0; padding: 0; list-style: none; }
.g2r-arcade__chips li { padding: 4px 10px; border: 1px solid var(--g2-line); border-radius: 99px; font-size: 12.5px; color: #c9ced4; }
.g2r-arcade__best { margin: 14px 0 0; font-family: var(--g2r-mono); font-size: 12px; color: var(--g2-gold); }

/* The cabinet preview: the game's own 420 x 600 shape, as big as the band allows, centred in its half. */
.g2r-arcade__preview {
    position: relative;
    z-index: 1;
    justify-self: center;
    width: min(100%, 360px);
    aspect-ratio: 420 / 600;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--tone) 50%, transparent);
    border-radius: 22px;
    background: #050608;
    box-shadow: 0 0 0 8px rgba(255, 255, 255, .03), 0 40px 80px -30px var(--tone), 0 0 120px -40px var(--tone-2);
    cursor: pointer;
    transition: transform .5s var(--g2r-ease), box-shadow .5s var(--g2r-ease);
}
.g2r-arcade__preview:hover { transform: translateY(-6px); }
@media (min-width: 900px) { .g2r-arcade__preview { width: auto; height: min(560px, 60vw); } }
@media (min-width: 1600px) { .g2r-arcade__preview { height: 600px; } }
.g2r .g2r-arcade__play {
    position: absolute;
    inset-inline-start: 50%;
    bottom: 18px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 46px;
    padding: 0 22px;
    border: 0;
    border-radius: 14px;
    background: var(--tone-2);
    box-shadow: 0 10px 30px -6px var(--tone-2);
    font: inherit;
    font-size: 15px;
    font-weight: 800;
    color: var(--tone-ink);
    cursor: pointer;
    translate: -50% 0;
    animation: g2r-pulse 2.4s ease-in-out infinite;
}
[dir="rtl"] .g2r .g2r-arcade__play { translate: 50% 0; }
@keyframes g2r-pulse { 50% { transform: scale(1.05); } }

/* The CSS-only previews (light, nothing from the game loads before Play). */
.g2r-mini { position: absolute; inset: 0; display: block; overflow: hidden; container-type: size; }
.g2r-mini i, .g2r-mini b, .g2r-mini u, .g2r-mini span { position: absolute; display: block; font-style: normal; text-decoration: none; }
.g2r-mini--rush b { inset-inline: 3cqw; top: 3cqh; display: grid; grid-template-columns: repeat(4, 1fr); gap: 2cqw; height: 13cqh; }
.g2r-mini--rush b span { position: static; border: 1px solid rgba(255, 255, 255, .12); border-radius: 10px; background: rgba(255, 255, 255, .06); }
.g2r-mini--rush i { inset-inline-start: 0; bottom: 21cqh; width: 12cqw; height: 11cqh; border-radius: 6cqw 6cqw 2cqw 2cqw; background: #3b2a50; animation: g2r-walk 4s linear infinite; }
.g2r-mini--rush i:nth-of-type(2) { background: #24433f; animation-delay: -1.3s; }
.g2r-mini--rush i:nth-of-type(3) { background: #4a3a2a; animation-delay: -2.6s; }
.g2r-mini--rush u { inset-inline: 0; bottom: 0; height: 21cqh; border-top: 2px solid #3d8bff; background: linear-gradient(#1b2a52, #0a1330); }
@keyframes g2r-walk { from { transform: translateX(105cqw); } to { transform: translateX(-20cqw); } }
.g2r-mini--pinball { background: linear-gradient(90deg, #4a0710 50%, #03313d 50%); }
.g2r-mini--pinball b { top: 22%; width: 11cqw; height: 11cqw; border: 1.6cqw solid #ff4554; border-radius: 50%; background: #fff; }
.g2r-mini--pinball b:nth-of-type(1) { inset-inline-start: 30%; }
.g2r-mini--pinball b:nth-of-type(2) { inset-inline-start: 58%; border-color: #00c3e3; }
.g2r-mini--pinball i { inset-inline-start: 0; top: 0; width: 4cqw; height: 4cqw; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff, #7c8594); animation: g2r-ball 3s ease-in-out infinite; }
@keyframes g2r-ball {
    0%, 100% { transform: translate(70cqw, 20cqh); }
    30% { transform: translate(30cqw, 45cqh); }
    55% { transform: translate(55cqw, 30cqh); }
    80% { transform: translate(40cqw, 75cqh); }
}
.g2r-mini--raid { background: #050608; }
.g2r-mini--raid i { top: 0; padding: 3px 7px; border: 1px solid rgba(188, 215, 103, .4); border-radius: 6px; font: 700 clamp(12px, 3.6cqw, 18px) var(--g2r-mono); color: #bcd767; white-space: nowrap; animation: g2r-fall 5s linear infinite; }
.g2r-mini--raid i:nth-of-type(1) { inset-inline-start: 12%; animation-delay: -1s; }
.g2r-mini--raid i:nth-of-type(2) { inset-inline-start: 40%; animation-delay: -3s; }
.g2r-mini--raid i:nth-of-type(3) { inset-inline-start: 22%; animation-delay: -4.2s; }
@keyframes g2r-fall { from { transform: translateY(-10cqh); } to { transform: translateY(70cqh); } }
.g2r-mini--trade { display: grid; grid-template-columns: 1fr 1fr; gap: 3cqw; padding: 14cqh 4cqw 20cqh; background: linear-gradient(#1a1326, #0b0912); }
.g2r-mini--trade span { position: relative; border: 2px solid rgba(255, 255, 255, .12); border-radius: 12px; background: linear-gradient(160deg, hsl(200 50% 40%), hsl(200 55% 14%)); animation: g2r-pick 3s ease-in-out infinite; }
.g2r-mini--trade span:nth-child(2) { background: linear-gradient(160deg, hsl(20 50% 40%), hsl(20 55% 14%)); animation-delay: 1.5s; }
.g2r-mini--trade span::after { content: ""; position: absolute; inset: -2px; border: 2px solid #7be8a8; border-radius: inherit; opacity: 0; animation: g2r-pick-glow 3s ease-in-out infinite; animation-delay: inherit; }
@keyframes g2r-pick { 40%, 60% { transform: translateY(-6px); } }
@keyframes g2r-pick-glow { 40%, 60% { opacity: 1; } }

/* ============================================================================================================
   WHAT YOU NEED (accessory / genre tiles)
   ============================================================================================================ */
/* Always a full row (final round): 4 tiles (2 x 2 on phones) or 2; every tile the same height (grid rows stretch, the
   pick fills the tile and "See all" sits at the bottom). */
.g2r-needs__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 900px) { .g2r-needs__list[data-count="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.g2r-need { position: relative; display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 14px; border: 1px solid var(--g2-line); border-radius: 18px; background: var(--g2-surface); transition: transform .4s var(--g2r-ease), border-color .4s; }
.g2r-need:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--tone) 50%, var(--g2-line)); }
.g2r-need__question { font-size: 12px; font-weight: 600; color: var(--tone-2); }
.g2r .g2r-need__title { margin: 0; font-size: 15px; font-weight: 700; line-height: 1.3; color: var(--g2-text); }
.g2r-need__pick { display: flex; flex: 1 1 auto; flex-direction: column; gap: 6px; color: var(--g2-text); }
/* The best seller's large image: about 140px tall, contained, on a soft spotlight. */
.g2r-need__pic { display: grid; place-items: center; height: 156px; padding: 8px; border-radius: 12px; background: radial-gradient(60% 60% at 50% 60%, rgba(255, 255, 255, .09), transparent 72%), var(--g2-raised); }
.g2r-need__pic img { width: auto; max-width: 100%; height: 140px; object-fit: contain; filter: drop-shadow(0 10px 14px rgba(0, 0, 0, .5)); transition: transform .5s var(--g2r-spring); }
.g2r-need:hover .g2r-need__pic img { transform: translateY(-4px) scale(1.03); }
.g2r-need__name { display: -webkit-box; max-height: calc(2em * 1.34); overflow: hidden; font-size: 13px; font-weight: 600; line-height: 1.34; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.g2r-need__price { display: block; margin-top: auto; font-size: 13px; }
.g2r-need__price .g2e-price { font-size: 16px; }
.g2r-need__all { font-size: 12.5px; font-weight: 600; color: var(--tone-2); }
@media (max-width: 599px) {
    .g2r-need__pic { height: 128px; }
    .g2r-need__pic img { height: 112px; }
}

/* ============================================================================================================
   PRE-OWNED / TRADE BAND
   ============================================================================================================ */
.g2r-trade {
    position: relative;
    display: grid;
    gap: 16px;
    padding: 18px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 24px;
    background: linear-gradient(135deg, color-mix(in srgb, var(--tone) 14%, var(--g2-surface)), var(--g2-surface) 60%);
}
@media (min-width: 900px) { .g2r-trade { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); align-items: center; padding: 26px; } }
.g2r .g2r-trade__title { margin: 0; font-size: 22px; font-weight: 800; letter-spacing: -.02em; color: var(--g2-text); }
.g2r-trade__text { max-width: 44ch; margin: 8px 0 0; font-size: 14px; line-height: 1.55; color: #c9ced4; }
.g2r-trade__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.g2r-trade__list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 600px) { .g2r-trade__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.g2r-used { display: grid; grid-template-columns: 58px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px; border: 1px solid var(--g2-line); border-radius: 16px; background: rgba(11, 13, 16, .6); color: var(--g2-text); }
.g2r-used:hover { border-color: color-mix(in srgb, var(--tone) 50%, var(--g2-line)); }
.g2r-used img { width: 58px; height: 58px; border-radius: 10px; background: var(--g2-raised); object-fit: contain; }
.g2r-used__name { min-width: 0; }
.g2r-used__name b { display: -webkit-box; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-size: 13px; font-weight: 600; line-height: 1.3; }
.g2r-used__name > span { display: block; margin-top: 2px; font-size: 12px; color: var(--g2-muted); }
.g2r-used__name > span .g2e-price, .g2r-used__name > span .g2e-price * { font-size: 12px !important; color: var(--g2-muted) !important; }
.g2r-used__price { display: grid; justify-items: end; font-size: 15px; font-weight: 700; text-align: end; }
.g2r-used__price small { font-size: 11px; font-weight: 600; color: #7be8a8; }

/* ============================================================================================================
   KEEP EXPLORING - the endless feed, as GROUPS (round 5; design/platform-pages/concepts-round5-feed.html)
   Each group (.g2r-grp): a header (title, live count, "All N"), then the site's own product cards (the product index's
   .g2-lcard, unchanged). One style per room: .g2r-feed--chapters (PS5), --spotlight (PS4), --shelves (PC), --map (Switch).
   Rows are always full: 6 / 4 / 3 / 2 columns (desktop / tablet / small tablet / phone); a group gets 12 cards (PS4: a
   spotlight + 14), and when fewer came, the cards of an unfinished last row are hidden per breakpoint (nth-child below).
   ============================================================================================================ */
.g2r-feed__main { min-width: 0; }
.g2r-grp { min-width: 0; }
.g2r-grp + .g2r-grp { margin-top: 40px; }
.g2r-grp.is-appended { animation: g2r-group-in .45s var(--g2r-ease) both; }
@keyframes g2r-group-in { from { opacity: .25; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.g2r-grp__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 6px 12px; margin-bottom: 16px; }
.g2r-grp__heading { min-width: 0; }
.g2r .g2r-grp__kicker { margin: 0 0 6px; font: 700 11px/1.3 var(--g2r-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--g2-dim); }
.g2r .g2r-grp__kicker--gold { color: var(--g2-gold); }
.g2r .g2r-grp__title { margin: 0; font-size: 20px; font-weight: 700; line-height: 1.2; letter-spacing: -.01em; color: var(--g2-text); text-wrap: balance; }
.g2r .g2r-grp__sub { margin: 4px 0 0; max-width: 60ch; font-size: 13px; line-height: var(--g2-text-lh, 1.45); color: var(--g2-muted); text-wrap: pretty; }
.g2r-grp__count { margin-inline-start: 8px; font: 600 11px/1 var(--g2r-mono); letter-spacing: .04em; color: var(--g2-dim); white-space: nowrap; }
.g2r-grp__all { flex: none; font-size: 13px; font-weight: 600; color: var(--tone-2); white-space: nowrap; }
.g2r-grp__all:hover { text-decoration: underline; }

/* ---------- the grid: 2 / 3 / 4 / 6 columns, full rows only ---------- */
.g2r .g2r-grp__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 599px) {
    .g2r-grp__grid:not(.g2r-grp__grid--spot) > li:nth-child(2n + 1):last-child { display: none; }
}
@media (min-width: 600px) and (max-width: 899px) {
    .g2r .g2r-grp__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
    .g2r-grp__grid:not(.g2r-grp__grid--spot) > li:nth-child(3n + 1):nth-last-child(-n + 2),
    .g2r-grp__grid:not(.g2r-grp__grid--spot) > li:nth-child(3n + 1):nth-last-child(-n + 2) ~ li { display: none; }
}
@media (min-width: 900px) and (max-width: 1199px) {
    .g2r .g2r-grp__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
    .g2r-grp__grid:not(.g2r-grp__grid--spot) > li:nth-child(4n + 1):nth-last-child(-n + 3),
    .g2r-grp__grid:not(.g2r-grp__grid--spot) > li:nth-child(4n + 1):nth-last-child(-n + 3) ~ li { display: none; }
}
@media (min-width: 1200px) {
    .g2r .g2r-grp__grid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 18px; }
    .g2r-grp__grid:not(.g2r-grp__grid--spot) > li:nth-child(6n + 1):nth-last-child(-n + 5),
    .g2r-grp__grid:not(.g2r-grp__grid--spot) > li:nth-child(6n + 1):nth-last-child(-n + 5) ~ li { display: none; }
}

/* ---------- the "Loading next group" line and the end links ---------- */
.g2r-loadline { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 28px; font: 600 12px/1 var(--g2r-mono); color: var(--g2-muted); }
.g2r-loadline::before, .g2r-loadline::after { content: ""; flex: 1; height: 1px; background: #262b33; }
.g2r-loadline__spin { flex: none; width: 14px; height: 14px; border: 2px solid #262b33; border-top-color: var(--tone-2); border-radius: 50%; animation: g2r-spin .8s linear infinite; }
.g2r-feed__end { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 28px; }
.g2r-feed__end-link { padding: 8px 13px; border: 1px solid #262b33; border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--g2-text); }
.g2r-feed__end-link:hover { border-color: color-mix(in srgb, var(--tone) 60%, #262b33); color: var(--tone-2); }

/* ---------- A. PS5 "Chapters": a slim sticky index on the side (desktop), a sticky chip row under the room bar below ---------- */
.g2r-feed--chapters .g2r-grp + .g2r-grp { margin-top: 30px; padding-top: 30px; border-top: 1px solid var(--g2-line); }
.g2r-idx {
    position: sticky;
    top: var(--g2r-bar-height);
    z-index: 40;
    display: flex;
    gap: 6px;
    margin-bottom: 18px;
    padding-block: 10px;
    overflow-x: auto;
    border-bottom: 1px solid rgba(255, 255, 255, .06);
    background: color-mix(in srgb, var(--room-bg) 92%, transparent);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    scrollbar-width: none;
    overscroll-behavior-x: contain;
}
.g2r-idx::-webkit-scrollbar { display: none; }
.g2r-idx__item { display: inline-flex; flex: none; align-items: center; gap: 8px; padding: 7px 12px; border: 1px solid #262b33; border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--g2-muted); white-space: nowrap; transition: color .2s, border-color .2s, opacity .2s; }
.g2r-idx__item:hover { color: var(--g2-text); }
.g2r-idx__count { font: 600 11px/1 var(--g2r-mono); color: var(--g2-dim); }
.g2r-idx__item.is-current { border-color: var(--tone-2); color: var(--g2-text); }
.g2r-idx__item.is-later { opacity: .45; }
/* A group scrolled to lands below the room bar and the sticky chip row. */
@media (max-width: 1199px) { .g2r-feed--chapters .g2r-grp { scroll-margin-top: calc(var(--g2r-bar-height) + 72px); } }
@media (min-width: 1200px) {
    .g2r-feed--chapters .g2r-feed__body { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 28px; align-items: start; }
    .g2r-idx {
        top: calc(var(--g2r-bar-height) + 16px);
        display: grid;
        gap: 2px;
        margin: 0;
        padding: 0;
        overflow: visible;
        border: 0;
        border-inline-start: 1px solid #262b33;
        background: none;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }
    .g2r-idx__item { justify-content: space-between; margin-inline-start: -1px; padding: 7px 12px; border: 0; border-inline-start: 2px solid transparent; border-radius: 0; white-space: normal; }
    .g2r-idx__item.is-current { border-inline-start-color: var(--tone-2); }
}

/* ---------- B. PS4 "Spotlight" (final round): a wide card, 2 columns x ONE row, first in the group's first row ---------- */
/* Left: the cover upright and sharp, the card's full height, on a very soft light (no wash, no tilt). Right: the live
   label (mono), title, rating chip, price + "Used from", Add to cart. Sides alternate per group (--end). Phones: full
   width above a 2-column grid, cover on the start side. */
.g2r .g2r-grp__grid--spot { grid-auto-flow: dense; }
.g2r-spot {
    position: relative;
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: minmax(0, 42%) minmax(0, 1fr);
    gap: 16px;
    min-width: 0;
    min-height: 210px;
    padding: 10px;
    border: 1px solid var(--g2-line);
    border-radius: 16px;
    background: var(--g2-surface);
    transition: border-color .25s;
}
.g2r-spot:hover { border-color: #2e333b; }
.g2r-spot__cover { position: relative; min-height: 0; border-radius: 12px; background: radial-gradient(65% 55% at 50% 55%, rgba(255, 255, 255, .09), transparent 72%); }
/* Absolutely placed so the image never sets the row's height: the cards beside it do. */
.g2r-spot__cover img { position: absolute; inset: 6px; width: calc(100% - 12px); height: calc(100% - 12px); object-fit: contain; filter: drop-shadow(0 12px 18px rgba(0, 0, 0, .5)); }
.g2r-spot__body { display: flex; flex-direction: column; justify-content: center; gap: 8px; min-width: 0; padding-block: 8px; padding-inline-end: 8px; }
.g2r-spot__label { font: 700 11px/1.3 var(--g2r-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--tone-2); }
.g2r .g2r-spot__title { display: -webkit-box; max-height: calc(2em * 1.25); margin: 0; overflow: hidden; font-size: 18px; font-weight: 700; line-height: 1.25; color: var(--g2-text); -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.g2r-spot__link { color: inherit; }
/* The whole card opens the product; the button stays its own click. */
.g2r-spot__link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.g2r-spot__rating { align-self: flex-start; }
.g2r-spot__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; }
.g2r-spot__price .g2e-price { font-size: 20px; }
.g2r .g2r-spot__price s .g2e-price, .g2r .g2r-spot__price s .g2e-price * { font-size: 13px; color: #868d96; }
.g2r-spot__used { font-size: 12px; color: var(--g2-muted); }
.g2r-spot__used .g2e-price { font-size: 12px; }
.g2r-spot__free { font-size: 15px; font-weight: 700; color: var(--g2-gold); }
.g2r-spot__buy { position: relative; z-index: 2; align-self: flex-start; margin-top: 4px; }
.g2r .g2r-spot__buy--pre { background: var(--g2-gold); color: #241800; }
@media (min-width: 600px) {
    .g2r-spot { grid-column: 1 / span 2; grid-row: 1; min-height: 0; }
    .g2r-grp__grid--end > .g2r-spot { grid-column: -3 / -1; }
}
/* Full rows: the spotlight takes 2 cells of the first row (phones: a row of its own). First row = the spotlight + 1 card
   on 3 columns, + 2 on 4, + 4 on 6; then full rows (10 cards fill 2 rows of 6, 3 rows of 4 after the first, 3 of 3).
   The cards of an unfinished last row are hidden. */
@media (max-width: 599px) {
    .g2r-grp__grid--spot > li:nth-child(2n + 2):last-child { display: none; }
}
@media (min-width: 600px) and (max-width: 899px) {
    .g2r-grp__grid--spot > li:nth-child(3n + 3):nth-last-child(-n + 2),
    .g2r-grp__grid--spot > li:nth-child(3n + 3):nth-last-child(-n + 2) ~ li { display: none; }
}
@media (min-width: 900px) and (max-width: 1199px) {
    .g2r-grp__grid--spot > li:nth-child(4n + 4):nth-last-child(-n + 3),
    .g2r-grp__grid--spot > li:nth-child(4n + 4):nth-last-child(-n + 3) ~ li { display: none; }
}
@media (min-width: 1200px) {
    .g2r-grp__grid--spot > li:nth-child(6n + 6):nth-last-child(-n + 5),
    .g2r-grp__grid--spot > li:nth-child(6n + 6):nth-last-child(-n + 5) ~ li { display: none; }
}
/* After each group: one thin link strip (trade-in, the PS4 guides, the budget list, PSN cards, in rotation). */
.g2r-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 18px; padding: 14px 18px; border: 1px solid var(--g2-line); border-radius: 14px; background: var(--g2-surface); color: var(--g2-text); }
.g2r-strip:hover { border-color: color-mix(in srgb, var(--tone) 50%, var(--g2-line)); }
.g2r-strip__icon { display: grid; flex: none; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: #1f232a; font-size: 15px; color: var(--tone-2); }
.g2r-strip__text { display: grid; flex: 1 1 220px; gap: 2px; min-width: 0; }
.g2r-strip__text b { font-size: 14px; }
.g2r-strip__text span { font-size: 13px; color: var(--g2-muted); }
.g2r-strip__go { flex: none; margin-inline-start: auto; font-size: 13px; font-weight: 600; color: var(--tone-2); white-space: nowrap; }

/* ---------- C. PC "Shelves": each group one sliding shelf (6 visible / 4 tablet / 2.3 phones) + a "+N See all" end card ---------- */
.g2r-feed--shelves .g2r-grp + .g2r-grp { margin-top: 0; }
.g2r-feed--shelves .g2r-grp { padding-block: 16px; border-bottom: 1px solid var(--g2-line); }
.g2r-feed--shelves .g2r-grp:first-child { padding-top: 0; }
.g2r-shelf__head { align-items: center; margin-bottom: 12px; }
.g2r-shelf__head .g2r-grp__title { font-size: 17px; }
.g2r-shelf__controls { display: flex; align-items: center; gap: 10px; }
.g2r .g2r-shelf__rail { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: calc((100% - 14px) / 2.3); gap: 14px; scroll-snap-type: x mandatory; }
.g2r-shelf__rail > li { scroll-snap-align: start; }
@media (min-width: 600px) { .g2r .g2r-shelf__rail { grid-auto-columns: calc((100% - 3 * 14px) / 4); } }
@media (min-width: 1200px) { .g2r .g2r-shelf__rail { grid-auto-columns: calc((100% - 5 * 14px) / 6); } }
.g2r-shelf__end { display: flex; min-width: 0; }
.g2r-shelf__end-link { display: grid; flex: 1 1 auto; place-content: center; gap: 4px; padding: 12px; border: 1px dashed #2e333b; border-radius: 16px; text-align: center; font-size: 13px; color: var(--g2-muted); }
.g2r-shelf__end-link b { font-size: 22px; color: var(--g2-text); }
.g2r-shelf__end-link:hover { border-color: var(--tone-2); color: var(--tone-2); }

/* ---------- D. Switch "World map at night": a calm night level above the groups ---------- */
.g2r-map {
    position: relative;
    height: 250px;
    margin-bottom: 28px;
    overflow: hidden;
    border: 1px solid var(--g2-line);
    border-radius: 22px;
    background:
        radial-gradient(90% 70% at 70% 0%, rgba(230, 0, 18, .14), transparent 60%),
        radial-gradient(70% 60% at 0% 100%, rgba(61, 139, 255, .08), transparent 60%),
        #0c0d14;
}
/* Faint stars: tiny dots, no image. */
.g2r-map__stars {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        radial-gradient(1px 1px at 12% 20%, rgba(255, 255, 255, .5), transparent),
        radial-gradient(1px 1px at 32% 8%, rgba(255, 255, 255, .35), transparent),
        radial-gradient(1.5px 1.5px at 58% 16%, rgba(255, 255, 255, .5), transparent),
        radial-gradient(1px 1px at 78% 30%, rgba(255, 255, 255, .35), transparent),
        radial-gradient(1px 1px at 90% 12%, rgba(255, 255, 255, .45), transparent),
        radial-gradient(1px 1px at 44% 34%, rgba(255, 255, 255, .3), transparent),
        radial-gradient(1.5px 1.5px at 6% 42%, rgba(255, 255, 255, .35), transparent),
        radial-gradient(1px 1px at 68% 6%, rgba(255, 255, 255, .4), transparent);
}
.g2r-map__road { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
[dir="rtl"] .g2r-map__road { transform: scaleX(-1); }
.g2r-map__hill { fill: #12141c; }
.g2r-map__path { fill: none; stroke: #2a2c38; stroke-width: 16; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.g2r-map__dash { fill: none; stroke: rgba(244, 182, 61, .55); stroke-width: 2.5; stroke-dasharray: 3 10; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.g2r-map__coin {
    position: absolute;
    top: var(--y);
    inset-inline-start: var(--x);
    width: 14px;
    height: 14px;
    margin: -7px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #ffe08a, #c9921a);
    box-shadow: 0 0 10px rgba(244, 182, 61, .5);
    animation: g2r-map-coin 2.4s ease-in-out infinite;
    animation-delay: var(--delay, 0s);
    pointer-events: none;
}
@keyframes g2r-map-coin { 0%, 100% { transform: scaleX(1); } 50% { transform: scaleX(.25); } }
.g2r-map__levels { position: absolute; inset: 0; }
.g2r-lvl { position: absolute; top: var(--y); inset-inline-start: var(--x); z-index: 1; display: grid; justify-items: center; gap: 8px; transform: translate(-50%, -50%); color: inherit; }
[dir="rtl"] .g2r-lvl { transform: translate(50%, -50%); }
.g2r-lvl__dot { display: grid; place-items: center; width: 46px; height: 46px; border: 1px solid #343747; border-radius: 14px; background: #1a1c26; font: 700 14px/1 var(--g2r-mono); color: var(--g2-muted); transition: transform .25s, background-color .25s, box-shadow .25s; }
.g2r-lvl__name { max-width: 120px; overflow: hidden; font-size: 12px; font-weight: 600; color: var(--g2-muted); white-space: nowrap; text-overflow: ellipsis; }
.g2r-lvl:hover .g2r-lvl__dot { transform: translateY(-4px); }
.g2r-lvl.is-later { opacity: .55; }
.g2r-lvl.is-done .g2r-lvl__dot { border-color: rgba(244, 182, 61, .45); color: var(--g2-gold); }
.g2r-lvl.is-current .g2r-lvl__dot { border-color: #e60012; background: #e60012; color: #fff; box-shadow: 0 0 0 6px rgba(230, 0, 18, .18), 0 10px 24px rgba(230, 0, 18, .35); animation: g2r-lvl-bob 1.6s ease-in-out infinite; }
.g2r-lvl.is-current .g2r-lvl__name { color: var(--g2-text); }
@keyframes g2r-lvl-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@media (max-width: 599px) {
    .g2r-map { height: 200px; }
    .g2r-lvl__dot { width: 36px; height: 36px; border-radius: 11px; font-size: 13px; }
    /* Names hidden on phones (still read out). */
    .g2r-lvl__name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

/* ============================================================================================================
   ABOUT / FAQ + GUIDES
   ============================================================================================================ */
.g2r-about__grid { display: grid; gap: 28px; }
@media (min-width: 900px) { .g2r-about__grid { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 36px; } }
.g2r-about__main { display: grid; gap: 16px; align-content: start; }
.g2r-about__prose { display: grid; gap: 12px; max-width: 70ch; }
.g2r-about__prose p { margin: 0; font-size: 14.5px; line-height: 1.6; color: #c9ced4; }
.g2r-faq { display: grid; gap: 8px; }
.g2r-faq details { padding: 14px 16px; border: 1px solid var(--g2-line); border-radius: 14px; background: var(--g2-surface); }
.g2r-faq summary { display: flex; justify-content: space-between; gap: 12px; list-style: none; cursor: pointer; }
.g2r-faq summary::-webkit-details-marker { display: none; }
.g2r-faq summary::after { content: "+"; flex: none; color: var(--g2-muted); font-weight: 700; }
.g2r-faq details[open] summary::after { content: "–"; }
.g2r .g2r-faq h3 { margin: 0; font-size: 14px; font-weight: 600; line-height: 1.4; color: var(--g2-text); }
.g2r-faq p { margin: 8px 0 0; font-size: 13.5px; line-height: 1.55; color: var(--g2-muted); }
.g2r-guides { display: grid; gap: 10px; align-content: start; }
.g2r-guide { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 12px; align-items: center; padding: 10px; border: 1px solid var(--g2-line); border-radius: 14px; background: var(--g2-surface); color: var(--g2-text); }
.g2r-guide:hover { border-color: color-mix(in srgb, var(--tone) 50%, var(--g2-line)); }
.g2r-guide__icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 10px; background: linear-gradient(135deg, color-mix(in srgb, var(--tone) 60%, #111), #111); font-size: 18px; color: #fff; }
.g2r-guide b { display: block; font-size: 13.5px; font-weight: 600; line-height: 1.3; }
.g2r-guide span span { font-size: 12px; color: var(--g2-dim); }

/* ============================================================================================================
   REDUCED MOTION: no parallax, no loops; everything that an animation would reveal is shown still
   ============================================================================================================ */
@media (prefers-reduced-motion: reduce) {
    .g2r *, .g2r *::before, .g2r *::after { animation: none !important; transition: none !important; }
    .g2r-shape, .g2r-qblock__coin { display: none; }
    .room-switch .g2-sec__title.is-hop { opacity: 1; transform: none; }
    .g2r-pc__slide:first-child, .g2r-pc__term span { opacity: 1; }
    html.g2r-motion [data-room-reveal] { opacity: 1; transform: none; }
}