/* ==========================================================================================================
   used-games.css - /used-games and /ar/used-games (Home/UsedGames.cshtml, ListProducts theme 20 UsedPosters.cshtml).
   Design: design/pre-owned/concepts-round3.html (desktop + phone). Root .ug, Arena tokens (g2.css :root).

   - logical properties only, so dir="rtl" mirrors the page (flipped aisles included) with no RTL twin;
   - content is visible without the script: used-games.js arms the reveal ([data-ug-reveal-group].is-armed) only for
     groups below the fold, and every motion is transform / opacity, off under prefers-reduced-motion;
   - the ListProducts sections (themes 17, 18, 1) keep g2.css and are only placed / tinted here.
   ========================================================================================================== */

.ug {
    --ug-lime: #bcd767;
    --ug-lime-deep: #95ab52;
    --ug-on-lime: #14200a;
    --ug-gold: #f4b63d;
    --ug-ps: #3d8bff;
    --ug-nin: #e60012;
    --ug-xb: #1f9d1f;
    --ug-pc: #e0a43c;
    --ug-body: #c9ced4;
    --ug-ease: cubic-bezier(.2, .7, .2, 1);
    --ug-tone: var(--g2-muted);
    position: relative;
    overflow-x: clip;
    padding-bottom: 32px;
    color: var(--ug-body);
    font-size: 15px;
    line-height: 1.55;
}

.ug *, .ug *::before, .ug *::after { box-sizing: border-box; }

/* custom.css title-cases every heading, label and button: this page is written in sentence case. */
.ug :is(h1, h2, h3, h4, label, button, summary, .ug-btn) {
    text-transform: none !important;
    letter-spacing: normal;
}

.ug :where(h1, h2, h3, h4, p, ul, ol, dl, dt, dd, figure) { margin: 0; }
.ug :where(ul, ol) { padding: 0; list-style: none; }
.ug :where(a) { color: inherit; text-decoration: none; }
.ug :where(a:hover, a:focus) { color: inherit; text-decoration: none; }
.ug :where(h1, h2, h3, h4) { color: var(--g2-text) !important; line-height: 1.18; text-wrap: balance; }
.ug :focus-visible { outline: 2px solid var(--ug-lime); outline-offset: 3px; border-radius: 8px; }
.ug :focus:not(:focus-visible) { outline: none; }
.ug [hidden], .ug .is-hidden { display: none !important; }

.ug-tone--ps { --ug-tone: var(--ug-ps); }
.ug-tone--nin { --ug-tone: var(--ug-nin); }
.ug-tone--xb { --ug-tone: var(--ug-xb); }
.ug-tone--pc { --ug-tone: var(--ug-pc); }
.ug-tone--none { --ug-tone: var(--g2-muted); }

/* The site's price format outside .g2-sec (hero tag, stats). */
.ug .g2e-price { display: inline-flex; align-items: baseline; gap: .22em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ug .g2e-price__cur { font-size: .62em; font-weight: 600; color: var(--g2-muted); }
.ug .g2e-price__int { font-weight: 700; }
.ug .g2e-price__num { direction: ltr; unicode-bidi: isolate; }
.ug .g2e-price__dec { font-size: .62em; font-weight: 700; }
.ug .g2e-price--was { font-size: 12px; color: var(--g2-dim); text-decoration: line-through; }
.ug .g2e-price--was .g2e-price__int { font-weight: 500; }

.ug-live { white-space: nowrap; }
.ug-live::after {
    content: "";
    display: inline-block;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--ug-lime);
    margin-inline-start: 3px;
    vertical-align: super;
    opacity: .85;
}

.ug-eyebrow { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; font-weight: 600; color: var(--ug-lime); }
.ug-eyebrow--muted { color: var(--g2-muted); }
[dir="rtl"] .ug-eyebrow { letter-spacing: 0; font-size: 12.5px; }

.ug-arrow { flex: 0 0 auto; transition: transform .3s var(--ug-ease); }
.ug a:hover .ug-arrow { transform: translateX(3px); }
[dir="rtl"] .ug a:hover .ug-arrow { transform: scaleX(-1) translateX(3px); }

.ug-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 20px;
    border-radius: 12px !important;
    border: 1px solid transparent;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    cursor: pointer;
    transition: transform .25s var(--ug-ease), background .25s var(--ug-ease), border-color .25s var(--ug-ease), box-shadow .3s var(--ug-ease);
}

.ug-btn:hover { transform: translateY(-1px); }
.ug .ug-btn--primary { background: var(--ug-lime); color: var(--ug-on-lime) !important; }
.ug .ug-btn--primary:hover { box-shadow: 0 10px 30px -12px rgba(188, 215, 103, .6); color: var(--ug-on-lime) !important; }
.ug .ug-btn--ghost { border-color: var(--g2-line2); color: var(--g2-text) !important; background: transparent; }
.ug .ug-btn--ghost:hover { border-color: var(--ug-lime-deep); }

.ug-save { color: var(--ug-gold); font-size: 12px; font-weight: 600; }

/* Sections: the design's rhythm (56px between sections on phones, 76px from 760px). */
.ug .ug-sec, .ug-savings > .g2-sec, .ug-consoles > .g2-sec {
    padding-block: 56px 0;
    scroll-margin-top: 72px;
}

.ug .ug-sec--first { padding-top: 44px; }
.ug [id^="s-"] { scroll-margin-top: 72px; }

@media (min-width: 760px) {
    .ug .ug-sec, .ug-savings > .g2-sec, .ug-consoles > .g2-sec { padding-block: 76px 0; }
    .ug .ug-sec--first { padding-top: 44px; }
}

.ug-head { display: flex; flex-wrap: wrap; gap: 8px 20px; align-items: flex-end; justify-content: space-between; }
.ug .ug-head h2, .ug .ug-aisle__head h2, .ug .g2-sec .g2-sec__title {
    font-size: clamp(21px, 2.6vw, 28px);
    font-weight: 600;
    letter-spacing: -.015em;
}

.ug-more {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--g2-muted) !important;
    font-size: 13.5px;
    font-weight: 500;
    white-space: nowrap;
}

.ug-more:hover { color: var(--ug-lime) !important; }

/* ---------- 1. breadcrumb ---------- */
.ug-crumbs ol { display: flex; flex-wrap: wrap; gap: 6px; padding-block: 14px 0; font-size: 12.5px; color: var(--g2-dim); }
.ug-crumbs li + li::before { content: "/"; margin-inline-end: 6px; color: var(--g2-dim); }
.ug-crumbs a { color: var(--g2-muted) !important; }
.ug-crumbs a:hover { color: var(--g2-text) !important; }

/* ---------- 2. hero ---------- */
.ug-hero { position: relative; overflow: hidden; }

.ug-hero::before {
    content: "";
    position: absolute;
    inset: -30% -20% auto;
    height: 130%;
    background: radial-gradient(36% 50% at 72% 45%, rgba(61, 139, 255, .12), transparent 70%), radial-gradient(30% 40% at 20% 30%, rgba(188, 215, 103, .08), transparent 70%);
    animation: ug-drift 24s ease-in-out infinite alternate;
    pointer-events: none;
}

[dir="rtl"] .ug-hero::before { transform: scaleX(-1); animation-name: ug-drift-rtl; }

.ug-hero__grid { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 26px; align-items: center; padding-block: 26px 30px; }

@media (min-width: 900px) {
    .ug-hero__grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 40px; padding-block: 34px 40px; }
    .ug-hero__grid--solo { grid-template-columns: minmax(0, 1fr); }
}

.ug-hero__copy { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; min-width: 0; }
.ug .ug-hero h1 { font-size: clamp(28px, 4.4vw, 46px); letter-spacing: -.03em; font-weight: 700; line-height: 1.18; }
[dir="rtl"] .ug .ug-hero h1 { letter-spacing: 0; line-height: 1.3; }
.ug-hero h1 em { font-style: normal; color: var(--ug-lime); }
.ug-hero__intro { color: var(--g2-muted); font-size: 15px; max-width: 52ch; line-height: var(--g2-text-lh, 1.45); text-wrap: pretty; }

.ug .ug-intro-more {
    justify-self: start;
    margin-top: -10px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--ug-lime);
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

/* Phones: the H1, a 2-line intro with "More" (the script adds .ug-js; without it the whole intro shows), the platform
   chips as one sideways row and a smaller collage, so the stats strip is on the first screen. Desktop is unchanged. */
@media (max-width: 767px) {
    .ug-hero__grid { gap: 18px; padding-block: 18px 22px; }
    .ug-hero__copy { gap: 12px; }
    .ug-js .ug-hero__intro:not(.is-open) { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
    .ug-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: calc(var(--g2-wrap-pad, 16px) * -1); padding-inline: var(--g2-wrap-pad, 16px); }
    .ug-chips::-webkit-scrollbar { display: none; }
    .ug-chips li { flex: none; }
    .ug-chips a { white-space: nowrap; }
    .ug-collage { max-width: 280px; }
}

.ug-search {
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: 520px;
    padding-block: 6px;
    padding-inline: 16px 6px;
    border-radius: 14px;
    border: 1px solid var(--g2-line2);
    background: var(--g2-input);
    transition: border-color .3s var(--ug-ease);
}

.ug-search:focus-within { border-color: var(--ug-lime-deep); }
.ug-search > svg { flex: none; color: var(--g2-dim); }

.ug .ug-search input {
    flex: 1;
    min-width: 0;
    height: auto;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--g2-text) !important;
    padding: 10px 0;
    font-size: 15px;
    outline: none;
}

.ug .ug-search input::placeholder { color: var(--g2-dim); }
.ug-search .ug-btn { padding: 10px 16px; }

.ug-chips { display: flex; flex-wrap: wrap; gap: 6px; }

.ug-chips a {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 12px;
    border-radius: 999px;
    border: 1px solid var(--g2-line);
    font-size: 12.5px;
    color: var(--ug-body) !important;
    transition: border-color .3s var(--ug-ease);
}

.ug-chips a::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--ug-tone); }
.ug-chips a:hover { border-color: var(--ug-tone); }

/* The floating collage: real covers, the console and a controller, floating slowly. */
.ug-collage { position: relative; aspect-ratio: 5 / 4; width: 100%; max-width: 560px; justify-self: center; }
.ug-collage > * { position: absolute; animation: ug-float 6s ease-in-out infinite alternate; }

.ug-collage__case {
    width: 30%;
    aspect-ratio: 135 / 170;
    padding: 6px;
    border-radius: 6px;
    background: linear-gradient(160deg, var(--g2-raised), #0f1215);
    box-shadow: 0 18px 30px -14px rgba(0, 0, 0, .9), inset 0 0 0 1px rgba(255, 255, 255, .08);
    overflow: hidden;
}

.ug-collage__case .g2-media__img { filter: none; }
.ug-collage__case--1 { inset-inline-start: 6%; top: 10%; --r: -9deg; animation-delay: -1s; }
.ug-collage__case--2 { inset-inline-start: 22%; top: 2%; --r: -3deg; animation-delay: -3s; z-index: 2; }
.ug-collage__case--3 { inset-inline-end: 4%; top: 14%; --r: 8deg; animation-delay: -2s; }
.ug-collage__console { inset-inline-start: 34%; top: 4%; width: 38%; aspect-ratio: 1; z-index: 3; animation-delay: -4s; }
.ug-collage__console .g2-media__img, .ug-collage__pad .g2-media__img { filter: drop-shadow(0 30px 30px rgba(0, 0, 0, .7)); }
.ug-collage__pad { inset-inline-start: 6%; bottom: 0; width: 30%; aspect-ratio: 1; z-index: 4; --r: -8deg; animation-delay: -2.5s; }

.ug-collage__tag {
    inset-inline-end: 2%;
    bottom: 8%;
    z-index: 5;
    display: grid;
    gap: 2px;
    max-width: 62%;
    padding: 12px 16px;
    border-radius: 14px;
    background: rgba(20, 23, 28, .85);
    backdrop-filter: blur(10px);
    border: 1px solid var(--g2-line2);
    animation-delay: -1.5s;
}

.ug-collage__tag span { font-size: 11px; color: var(--g2-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ug-collage__tag strong { font-size: 18px; color: var(--g2-text); font-weight: 600; }
.ug-collage__tag em { font-style: normal; font-size: 12px; color: var(--ug-gold); font-weight: 600; }

/* ---------- 3. live stats ---------- */
.ug-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-block: 1px solid var(--g2-line); }
.ug-stats--1 { grid-template-columns: minmax(0, 1fr); }
.ug-stats > div { display: grid; gap: 2px; padding: 14px 16px; border-inline-start: 1px solid var(--g2-line); }
.ug-stats > div:nth-child(odd) { border-inline-start: 0; }
.ug-stats > div:nth-child(n+3) { border-top: 1px solid var(--g2-line); }
.ug-stats dt { font-size: 11.5px; color: var(--g2-dim); text-transform: uppercase; letter-spacing: .1em; font-weight: 500; }
[dir="rtl"] .ug-stats dt { letter-spacing: 0; font-size: 12.5px; }
.ug-stats dd { font-size: 18px; color: var(--g2-text); font-weight: 600; }

@media (min-width: 760px) {
    .ug-stats { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); grid-template-columns: none; }
    .ug-stats > div:nth-child(odd) { border-inline-start: 1px solid var(--g2-line); }
    .ug-stats > div:first-child { border-inline-start: 0; }
    .ug-stats > div:nth-child(n+3) { border-top: 0; }
}

/* ---------- 4. sticky jump bar ---------- */
.ug-subnav {
    position: sticky;
    top: 0;
    z-index: 30;
    background: rgba(11, 13, 16, .9);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--g2-line);
}

.ug-subnav__list { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; padding-block: 8px; }
.ug-subnav__list::-webkit-scrollbar { display: none; }
.ug-subnav__list li { flex: none; display: flex; }

.ug-subnav__list a {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 12px;
    border-radius: 10px;
    color: var(--g2-muted) !important;
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    transition: color .25s, background .25s;
}

.ug-subnav__list a:hover, .ug-subnav__list a[aria-current="true"] { color: var(--g2-text) !important; background: var(--g2-surface); }
.ug-subnav__list a.ug-dot::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--ug-tone); }
.ug-subnav__list .ug-subnav__sell { margin-inline-start: auto; }
.ug-subnav__list .ug-subnav__sell a, .ug-subnav__list .ug-subnav__sell a:hover { color: var(--ug-on-lime) !important; background: var(--ug-lime); font-weight: 600; }

/* ---------- 5. platform doors ---------- */
.ug-doors { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.ug-doors > li { display: flex; min-width: 0; }
.ug-doors > li:last-child:nth-child(odd) { grid-column: 1 / -1; }

@media (min-width: 760px) {
    .ug-doors { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 14px; }
    .ug-doors > li:last-child:nth-child(odd) { grid-column: auto; }
}

.ug-door {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
    align-content: space-between;
    width: 100%;
    min-height: 190px;
    padding: 16px;
    border-radius: 20px;
    border: 1px solid var(--g2-line);
    background: linear-gradient(170deg, color-mix(in srgb, var(--ug-tone) 10%, var(--g2-raised)), var(--g2-surface) 70%);
    overflow: hidden;
    color: inherit !important;
    transition: transform .35s var(--ug-ease), border-color .35s var(--ug-ease);
}

.ug-door:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--ug-tone) 50%, var(--g2-line)); }
.ug .ug-door h3 { font-size: 16px; font-weight: 600; }
.ug-door__art { display: block; width: 58%; justify-self: end; transition: transform .45s var(--ug-ease); }
.ug-door:hover .ug-door__art { transform: translateY(-4px) scale(1.04); }
.ug-door__art svg { display: block; width: 100%; height: auto; filter: drop-shadow(0 14px 14px rgba(0, 0, 0, .6)); }
.ug-door__meta { display: grid; gap: 1px; }
.ug-door__meta span { font-size: 12px; color: var(--g2-muted); }
.ug-door__meta strong { font-size: 14px; color: var(--g2-text); font-weight: 600; }

/* ---------- 6. biggest savings (theme 17): only tinted ---------- */
.ug-savings .g2-used__hero {
    background: radial-gradient(60% 80% at 80% 0, rgba(244, 182, 61, .07), transparent 60%), linear-gradient(160deg, var(--g2-raised), var(--g2-surface));
}

/* ---------- 7. aisles ---------- */
.ug .ug-aisle { gap: 20px; }

.ug-aisle__head {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 18px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--g2-line);
}

.ug-aisle__head::after {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    bottom: -1px;
    width: 64px;
    height: 2px;
    border-radius: 2px;
    background: var(--ug-tone);
}

.ug-aisle__title { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; min-width: 0; }
.ug-count { font-size: 13px; color: var(--g2-dim); font-weight: 500; }

.ug-tabs { display: flex; gap: 2px; padding: 3px; border-radius: 10px; border: 1px solid var(--g2-line); background: var(--g2-surface); }
.ug .ug-tabs .g2-tab {
    height: auto;
    padding: 6px 12px !important;
    border-radius: 8px !important;
    border: 0 !important;
    background: transparent !important;
    color: var(--g2-muted) !important;
    font-size: 12.5px;
    font-weight: 500;
    white-space: nowrap;
}

.ug .ug-tabs .g2-tab[aria-selected="true"] { background: var(--g2-raised) !important; color: var(--g2-text) !important; }
.ug .ug-tabbed > [role="tabpanel"] { grid-row: 1; }

.ug-aisle__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }

@media (min-width: 960px) {
    .ug-aisle__grid { grid-template-columns: minmax(0, 1.25fr) minmax(0, 3fr); gap: 22px; }
    .ug-aisle__grid--flip { grid-template-columns: minmax(0, 3fr) minmax(0, 1.25fr); }
    .ug-aisle__grid--flip .ug-banner { order: 2; }
    .ug-aisle__grid--solo { grid-template-columns: minmax(0, 1fr); }
    /* The banner keeps its column and is never taller than the two rows of cards beside it. */
    .ug-aisle__grid .ug-banner { min-height: 0; align-self: stretch; }
}

/* From 1400px the banner column is fixed, so the extra width goes to more cards, not bigger ones. */
@media (min-width: 1400px) {
    .ug-aisle__grid { grid-template-columns: 300px minmax(0, 1fr); }
    .ug-aisle__grid--flip { grid-template-columns: minmax(0, 1fr) 300px; }
    .ug-aisle__grid--solo { grid-template-columns: minmax(0, 1fr); }
}

/* The console banner */
.ug-banner {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
    align-content: space-between;
    min-height: 300px;
    padding: 22px;
    border-radius: 24px;
    border: 1px solid var(--g2-line);
    background: radial-gradient(80% 60% at 50% 30%, color-mix(in srgb, var(--ug-tone) 22%, transparent), transparent 70%), linear-gradient(180deg, var(--g2-raised), var(--g2-surface));
    overflow: hidden;
    color: inherit !important;
    transition: border-color .35s var(--ug-ease);
}

.ug-banner:hover { border-color: color-mix(in srgb, var(--ug-tone) 45%, var(--g2-line)); }

.ug-banner::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 45%;
    inset-inline-start: -50%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .05), transparent);
    animation: ug-sweep 9s ease-in-out infinite;
    pointer-events: none;
}

.ug-banner__art { display: block; width: 64%; max-width: 240px; aspect-ratio: 1; justify-self: center; transition: transform .5s var(--ug-ease); }
.ug-banner:hover .ug-banner__art { transform: translateY(-6px); }
.ug-banner__art .g2-media__img { filter: drop-shadow(0 26px 26px rgba(0, 0, 0, .7)); }
.ug-banner__copy { display: grid; gap: 6px; }
.ug .ug-banner h3 { font-size: 20px; font-weight: 600; }
.ug-banner .ug-price .g2e-price:not(.g2e-price--was) { font-size: 22px; color: var(--g2-text); }
.ug-banner__note { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 13.5px; color: var(--g2-muted); }
.ug-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; }

@media (min-width: 620px) and (max-width: 959px) {
    .ug-banner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; min-height: 0; }
    .ug-banner__art { grid-row: span 3; }
}

/* The poster grid (theme 20, 12 products): a sideways row on phones; from 960px two full rows - 4 columns below 1400px,
   5 from 1400px, 6 from 1600px - the cards a width does not show are hidden, so no row ends half empty. Cards stay about
   the listing's width (wide screens get more of them). */
.ug-cards {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 44%;
    gap: 14px;
    overflow-x: auto;
    scrollbar-width: none;
    scroll-snap-type: x mandatory;
    padding-bottom: 4px;
}

.ug-cards::-webkit-scrollbar { display: none; }
.ug-cards > * { scroll-snap-align: start; }

@media (min-width: 620px) { .ug-cards { grid-auto-columns: 30%; } }

@media (min-width: 960px) {
    .ug-cards { grid-auto-flow: row; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px 16px; overflow: visible; }
    .ug-cards > :nth-child(n+9) { display: none; }
}

@media (min-width: 1400px) {
    .ug-cards { grid-template-columns: repeat(5, minmax(0, 1fr)); }
    .ug-cards > :nth-child(n+9) { display: grid; }
    .ug-cards > :nth-child(n+11) { display: none; }
}

@media (min-width: 1600px) {
    .ug-cards { grid-template-columns: repeat(6, minmax(0, 1fr)); }
    .ug-cards > :nth-child(n+11) { display: grid; }
}

/* The full-width secondary "See all {n} used …" under a section (right under the sideways row on phones). */
.ug-seeall {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-height: 46px;
    padding: 10px 16px;
    border-radius: 12px;
    border: 1px solid var(--g2-line2);
    background: var(--g2-surface);
    color: var(--g2-text) !important;
    font-size: 14px;
    font-weight: 600;
    text-align: center;
    transition: background-color .2s, border-color .2s;
}

.ug-seeall:hover { background: var(--g2-raised); border-color: var(--ug-lime-deep); }
.ug-consoles > .g2-wrap { padding-top: 4px; }

.ug-pk { display: grid; gap: 10px; align-content: start; min-width: 0; color: inherit !important; }

.ug-pk__stage {
    position: relative;
    display: grid;
    place-items: center;
    aspect-ratio: 4 / 5;
    max-width: 100%;
    border-radius: 16px;
    border: 1px solid var(--g2-line);
    background: var(--g2-surface);
    overflow: hidden;
    transition: border-color .35s var(--ug-ease);
}

.ug-pk__stage::before {
    content: "";
    position: absolute;
    inset: -20%;
    background: radial-gradient(50% 45% at 50% 45%, color-mix(in srgb, var(--ug-tone) 55%, #0e1626), transparent 75%);
    filter: blur(28px);
    opacity: .45;
}

.ug-pk__stage .g2-media { position: relative; z-index: 1; padding: 14px; min-height: 0; transition: transform .45s var(--ug-ease); }
.ug-pk:hover .ug-pk__stage { border-color: var(--g2-line2); }
.ug-pk:hover .ug-pk__stage .g2-media { transform: translateY(-4px) scale(1.02); }
.ug-pk__body { display: grid; gap: 4px; min-width: 0; }

.ug-pchip { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; letter-spacing: .03em; color: var(--g2-muted); }
.ug-pchip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--ug-tone); }

.ug .ug-pk__title {
    font-size: 13.5px;
    font-weight: 500;
    line-height: 1.34;
    max-height: 2.68em;
    min-height: 2.68em;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.ug-pk__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; }
.ug-pk__price .g2e-price:not(.g2e-price--was) { font-size: 16px; color: var(--g2-text); }
.ug-pk__note { font-size: 12px; color: var(--g2-muted); }

/* Controller chips under an aisle */
.ug-pads { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: -2px; }
.ug-pads__label { font-size: 12.5px; color: var(--g2-dim); margin-inline-end: 4px; }

.ug-padchip {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    max-width: 100%;
    padding-block: 6px;
    padding-inline: 6px 14px;
    border-radius: 999px;
    border: 1px solid var(--g2-line);
    background: var(--g2-surface);
    color: var(--ug-body) !important;
    font-size: 12.5px;
    transition: border-color .3s var(--ug-ease);
}

.ug-padchip:hover { border-color: var(--g2-line2); }
.ug-padchip > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 220px; }
.ug-padchip i { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--g2-raised); }
.ug-padchip img { width: 24px; height: 24px; object-fit: contain; }
.ug-padchip b { color: var(--g2-text); font-weight: 600; }

/* ---------- 8. sell block (round 2: the site's dark surface with a thin brand-green top edge, no green fill) ---------- */
.ug-sell {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
    padding: 20px;
    border-radius: 20px;
    border: 1px solid var(--g2-line);
    background: var(--g2-surface);
    box-shadow: inset 0 2px 0 var(--g2-brand), inset 0 3px 0 rgba(255, 255, 255, .03);
    scroll-margin-top: 72px;
}

@media (min-width: 960px) {
    .ug-sell { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); padding: 32px; gap: 40px; align-items: start; }
}

.ug-sell__copy { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-content: start; }
.ug .ug-sell__copy h2 { font-size: clamp(24px, 3vw, 32px); letter-spacing: -.02em; font-weight: 700; }
[dir="rtl"] .ug .ug-sell__copy h2 { letter-spacing: 0; line-height: 1.3; }
.ug-sell__copy .ug-eyebrow { margin-bottom: calc(var(--g2-head-gap, 6px) - 16px); }
/* The subtitle sits close under its title, further from what follows. */
.ug-sell__sub { margin-top: calc(var(--g2-sub-gap, 4px) - 16px) !important; font-size: 15px; line-height: var(--g2-text-lh, 1.45); color: var(--g2-text); text-wrap: pretty; }
.ug-sell__long { color: var(--g2-muted); font-size: 14.5px; line-height: var(--g2-text-lh, 1.45); max-width: 52ch; text-wrap: pretty; }

/* The 4 steps as one slim line: small numbered dots joined by a line. */
.ug-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 420px; }
.ug-steps li { position: relative; display: grid; justify-items: start; gap: 6px; font-size: 12.5px; color: var(--ug-body); }

.ug-steps li:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 10px;
    inset-inline: 22px 4px;
    height: 1px;
    background: var(--g2-line2);
}

.ug-steps i {
    display: grid;
    place-items: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--g2-raised);
    box-shadow: inset 0 0 0 1px var(--g2-brand);
    color: var(--g2-text);
    font-style: normal;
    font-size: 11px;
    font-weight: 700;
}

/* The two live facts inline. */
.ug-sell__facts { display: flex; flex-wrap: wrap; gap: 8px 28px; }
.ug-sell__facts > div { display: flex; align-items: baseline; gap: 8px; }
.ug-sell__facts dt { font-size: 13px; color: var(--g2-muted); font-weight: 500; }
.ug-sell__facts dd { font-size: 17px; color: var(--g2-text); font-weight: 700; }

@media (max-width: 767px) {
    .ug-sell__long { display: none; }
    .ug-sell__facts { flex-wrap: nowrap; gap: 16px; }
    .ug-sell__facts > div { display: grid; gap: 0; }
}

.ug-calc {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    padding: 18px;
    border-radius: 20px;
    background: rgba(11, 13, 16, .82);
    backdrop-filter: blur(8px);
    border: 1px solid var(--g2-line2);
    box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .9);
}

.ug-calc__top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 4px 10px; }
.ug-calc__top b { color: var(--g2-text); font-size: 14.5px; font-weight: 600; }
.ug-calc__top small { color: var(--g2-dim); font-size: 12px; }
.ug-calc__tabs { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.ug-calc__tabs::-webkit-scrollbar { display: none; }

.ug .ug-calc__tabs button {
    flex: none;
    padding: 6px 12px;
    border-radius: 999px;
    border: 1px solid var(--g2-line);
    background: transparent;
    color: var(--g2-muted);
    font: inherit;
    font-size: 12.5px;
    font-weight: 500;
    cursor: pointer;
}

.ug .ug-calc__tabs button[aria-pressed="true"] { color: var(--ug-on-lime); background: var(--ug-lime); border-color: var(--ug-lime); }

.ug-calc__field { display: flex; align-items: center; gap: 10px; padding-inline: 14px; border-radius: 12px; border: 1px solid var(--g2-line2); background: var(--g2-input); }
.ug-calc__field:focus-within { border-color: var(--ug-lime-deep); }
.ug-calc__field > svg { flex: none; color: var(--g2-dim); }

.ug .ug-calc__field input {
    flex: 1;
    min-width: 0;
    height: auto;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--g2-text) !important;
    padding: 12px 0;
    font-size: 15px;
    outline: none;
}

.ug .ug-calc__field input::placeholder { color: var(--g2-dim); }
.ug-calc__list { min-height: 196px; }
.ug-calc__panel { display: grid; gap: 6px; align-content: start; }

.ug-crow {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr) auto 34px;
    gap: 12px;
    align-items: center;
    padding: 7px 8px;
    border-radius: 12px;
    background: var(--g2-surface);
    border: 1px solid var(--g2-line);
}

.ug-crow__img { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 8px; background: var(--g2-raised); overflow: hidden; }
.ug-crow__img img { width: 100%; height: 100%; object-fit: contain; }
.ug-crow__t { display: grid; gap: 2px; min-width: 0; font-size: 13px; color: var(--g2-text); font-weight: 500; }
/* The full title on up to 2 lines (never cut to one). */
.ug-crow__name { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.34; overflow-wrap: anywhere; }
.ug-crow__t small { display: block; color: var(--g2-dim); font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ug-crow__p { font-size: 13.5px; color: var(--ug-lime); font-weight: 600; white-space: nowrap; }

.ug .ug-cadd {
    width: 34px;
    height: 34px;
    padding: 0;
    border-radius: 10px;
    border: 1px solid var(--g2-line2);
    background: transparent;
    color: var(--g2-text);
    font: inherit;
    font-weight: 600;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    transition: background .25s, color .25s, border-color .25s;
}

.ug .ug-cadd[aria-pressed="true"] { background: var(--ug-lime); color: var(--ug-on-lime); border-color: var(--ug-lime); }
.ug-calc__msg, .ug-calc__empty { padding: 8px; font-size: 13px; color: var(--g2-muted); }

/* The total and "Continue to sell": a clear footer of the calculator card. */
.ug-calc__tray {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    justify-content: space-between;
    margin: 4px -18px -18px;
    padding: 14px 18px;
    border-top: 1px solid var(--g2-line);
    border-radius: 0 0 20px 20px;
    background: var(--g2-raised);
}

.ug-calc__sum { display: grid; }
.ug-calc__sum span { font-size: 12px; color: var(--g2-muted); }
.ug-calc__sum strong { font-size: 22px; color: var(--g2-text); font-weight: 600; transition: color .3s; }
.ug-calc__sum strong.is-up { color: var(--ug-lime); }

/* ---------- 10. budget band (theme 18, re-laid out as the gold band) ---------- */
.ug-budget { padding-top: 56px; scroll-margin-top: 72px; }

.ug-budget > .g2-sec {
    position: relative;
    gap: 18px;
    padding: 22px;
    border-radius: 24px;
    border: 1px solid rgba(244, 182, 61, .22);
    background: radial-gradient(50% 80% at 100% 0, rgba(244, 182, 61, .10), transparent 60%), var(--g2-surface);
    overflow: hidden;
    max-width: none;
    margin: 0;
}

[dir="rtl"] .ug-budget > .g2-sec { background: radial-gradient(50% 80% at 0 0, rgba(244, 182, 61, .10), transparent 60%), var(--g2-surface); }
.ug-budget .g2-sec__head { flex-wrap: wrap; }
.ug-budget .g2-sec__sub { font-size: 13.5px; }
.ug .ug-budget .g2-limit { border-radius: 999px !important; }
.ug .ug-budget .g2-limit.is-selected { background: var(--ug-gold) !important; color: #241703 !important; border-color: var(--ug-gold) !important; }

@media (min-width: 760px) { .ug-budget { padding-top: 76px; } }

@media (min-width: 960px) {
    .ug-budget > .g2-sec {
        display: grid;
        grid-template-columns: minmax(0, 260px) minmax(0, 1fr);
        grid-template-rows: auto 1fr;
        column-gap: 28px;
        row-gap: 14px;
        align-items: start;
        padding: 28px;
    }

    .ug-budget .g2-tabbed, .ug-budget .g2-tabpanel-body, .ug-budget .g2-budget { display: contents; }
    .ug-budget .g2-sec__head { grid-column: 1; grid-row: 1; align-self: end; }
    .ug-budget .g2-budget__limits-wrap { grid-column: 1; grid-row: 2; }
    .ug-budget .g2-budget__limits { flex-wrap: wrap; }
    .ug-budget .g2-budget__grid { grid-column: 2; grid-row: 1 / span 2; grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Theme 18 shows 8 games per limit (shared with the home page): from 1600px the copy and the limits sit above one row of
   8, so the cards keep about the listing's width instead of growing in a 4 x 2 grid. */
@media (min-width: 1600px) {
    .ug-budget > .g2-sec { grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; }
    .ug-budget .g2-sec__head { grid-column: 1; grid-row: 1; }
    .ug-budget .g2-budget__limits-wrap { grid-column: 2; grid-row: 1; align-self: end; }
    .ug-budget .g2-budget__limits { flex-wrap: nowrap; }
    .ug-budget .g2-budget__grid { grid-column: 1 / -1; grid-row: 2; grid-template-columns: repeat(8, minmax(0, 1fr)); }
}

/* ---------- 12. disc check banner ---------- */
.ug-disc {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 22px;
    align-items: center;
    padding: 26px;
    border-radius: 24px;
    border: 1px solid var(--g2-line);
    background: linear-gradient(120deg, var(--g2-surface), #12161d);
    overflow: hidden;
    color: inherit !important;
}

@media (min-width: 760px) { .ug-disc { grid-template-columns: 200px minmax(0, 1fr) auto; padding: 28px 34px; gap: 34px; } }

.ug-disc__art {
    position: relative;
    width: 170px;
    aspect-ratio: 1;
    border-radius: 50%;
    justify-self: center;
    background: conic-gradient(from 0deg, #d9dee5, #9aa8bd, #e6eaf0, #b7c4d6, #d9dee5, #a7b2c4, #e6eaf0, #d9dee5);
    box-shadow: 0 24px 50px -20px rgba(0, 0, 0, .9), inset 0 0 0 1px rgba(255, 255, 255, .4);
    animation: ug-spin 18s linear infinite;
}

.ug-disc__art::before { content: ""; position: absolute; inset: 36%; border-radius: 50%; background: var(--g2-surface); box-shadow: 0 0 0 10px rgba(255, 255, 255, .35); }
.ug-disc__art::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, .55) 48%, transparent 60%); mix-blend-mode: overlay; }
.ug-disc__copy { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.ug .ug-disc__copy h2 { font-size: clamp(21px, 2.8vw, 28px); font-weight: 600; }
.ug-disc__text { color: var(--g2-muted); font-size: 14px; max-width: 56ch; }
.ug-grades { display: flex; flex-wrap: wrap; gap: 6px; }
.ug-grade { padding: 4px 10px; border-radius: 999px; border: 1px solid var(--g2-line2); font-size: 12px; color: var(--ug-body); }
.ug-grade::before { content: "●"; margin-inline-end: 6px; color: var(--ug-g); }
.ug-grade--ok { --ug-g: #bcd767; }
.ug-grade--light { --ug-g: #9ccf6a; }
.ug-grade--warn { --ug-g: #f4b63d; }
.ug-grade--no { --ug-g: #ff6a5f; }
.ug-disc:hover .ug-btn--ghost { border-color: var(--ug-lime-deep); }

/* ---------- 14. used consoles (theme 1 refreshed) ---------- */
.ug-consoles { scroll-margin-top: 72px; }

/* ---------- 15. just arrived ticker (theme 20, compactRows) ---------- */
.ug .ug-arrived { gap: 12px; }
.ug-arrived__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 12px; }
.ug .ug-arrived__head h2 { font-size: 18px; font-weight: 600; }
.ug-arrived__head span { font-size: 12.5px; color: var(--g2-muted); }

.ug-ticker {
    position: relative;
    overflow: hidden;
    border-block: 1px solid var(--g2-line);
    padding-block: 12px;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.ug-ticker__track { display: flex; width: max-content; animation: ug-tick 70s linear infinite; }
[dir="rtl"] .ug-ticker__track { animation-name: ug-tick-rtl; }
.ug-ticker:hover .ug-ticker__track, .ug-ticker:focus-within .ug-ticker__track { animation-play-state: paused; }
.ug-ticker__copy { display: flex; }
.ug-ticker__set { display: flex; gap: 12px; padding-inline-end: 12px; }
.ug-ticker__set li { display: flex; }

.ug-tk {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding-block: 6px;
    padding-inline: 6px 14px;
    border-radius: 999px;
    border: 1px solid var(--g2-line);
    background: var(--g2-surface);
    font-size: 12.5px;
    color: var(--ug-body) !important;
    white-space: nowrap;
}

.ug-tk:hover { border-color: var(--g2-line2); }
.ug-tk__img { flex: none; width: 26px; height: 32px; border-radius: 4px; object-fit: contain; background: var(--g2-raised); }
i.ug-tk__img { display: block; background: linear-gradient(160deg, var(--g2-raised), #12151a); box-shadow: inset 0 3px 0 var(--ug-tone); }
.ug-tk em { font-style: normal; font-size: 11px; color: var(--ug-lime); font-weight: 600; letter-spacing: .06em; }
.ug-tk b { color: var(--g2-text); font-weight: 600; }

/* ---------- 16. trust cards ---------- */
.ug-promises { display: grid; gap: 14px; }
@media (min-width: 760px) { .ug-promises { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.ug-promises > li {
    display: grid;
    gap: 8px;
    align-content: start;
    padding: 18px;
    border-radius: 18px;
    border: 1px solid var(--g2-line);
    background: var(--g2-surface);
}

.ug-promises svg { width: 26px; height: 26px; color: var(--ug-lime); }
.ug .ug-promises h3 { font-size: 14px; font-weight: 600; }
.ug-promises p { font-size: 13px; color: var(--g2-muted); }
.ug-promises a { color: var(--ug-lime) !important; font-size: 12.5px; font-weight: 500; }
.ug-promises a:hover { text-decoration: underline !important; }

/* ---------- 17. guide + FAQ ---------- */
.ug-guide { display: grid; gap: 12px; max-width: 75ch; }
.ug .ug-guide h2 { font-size: clamp(21px, 2.6vw, 28px); font-weight: 600; margin-bottom: 4px; }
.ug .ug-guide h3 { font-size: 16px; font-weight: 600; margin-top: 10px; }
.ug-guide p { font-size: 14.5px; color: var(--g2-muted); line-height: 1.7; }
.ug-guide a { color: var(--ug-lime) !important; text-decoration: underline !important; text-underline-offset: 3px; }

.ug-faq { display: grid; max-width: 860px; border-top: 1px solid var(--g2-line); }
.ug-faq details { border-bottom: 1px solid var(--g2-line); }

.ug-faq summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 16px 0;
    cursor: pointer;
    list-style: none;
}

.ug-faq summary::-webkit-details-marker { display: none; }
.ug-faq summary::after { content: "+"; flex: none; color: var(--g2-muted); font-size: 18px; line-height: 1; transition: transform .3s var(--ug-ease); }
.ug-faq details[open] summary::after { transform: rotate(45deg); color: var(--ug-lime); }
.ug .ug-faq summary h3 { font-size: 14.5px; font-weight: 500; line-height: 1.45; }
.ug-faq details p { padding-bottom: 16px; font-size: 14px; color: var(--g2-muted); max-width: 68ch; }

/* ---------- 18. closing band ---------- */
.ug-closing {
    display: flex;
    flex-wrap: wrap;
    gap: 16px 24px;
    align-items: center;
    justify-content: space-between;
    padding: 22px 24px;
    border-radius: 20px;
    border: 1px solid var(--g2-line);
    background: var(--g2-surface);
    box-shadow: inset 0 2px 0 var(--g2-brand);
}
.ug-closing b { display: block; color: var(--g2-text); font-size: 17px; font-weight: 600; }
.ug-closing span { color: var(--g2-muted); font-size: 13.5px; }

/* ---------- 19. phone dock ---------- */
.ug-dock {
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    z-index: 40;
    display: flex;
    justify-content: center;
    padding: 10px 12px calc(12px + env(safe-area-inset-bottom, 0px));
    background: linear-gradient(180deg, transparent, rgba(11, 13, 16, .92) 40%);
    pointer-events: none;
    transition: opacity .3s var(--ug-ease), transform .3s var(--ug-ease);
}

.ug-dock .ug-btn { pointer-events: auto; box-shadow: 0 14px 30px -10px rgba(0, 0, 0, .9); }
.ug-dock.is-off { opacity: 0; transform: translateY(16px); visibility: hidden; }
@media (min-width: 960px) { .ug-dock { display: none; } }

@media (max-width: 959px) {
    .ug { padding-bottom: 88px; }
    body.ug-dock-shown #chat_with_us { bottom: 84px !important; }
    body.ug-dock-shown #scrollToTopBtn { bottom: calc(84px + var(--g2-chat-h, 56px) + 12px) !important; }
}

/* ---------- reveal (armed by used-games.js below the fold only) ---------- */
[data-ug-reveal-group].is-armed > * {
    transition: opacity .55s var(--ug-ease), transform .55s var(--ug-ease);
    transition-delay: calc(var(--i, 0) * 45ms);
}

[data-ug-reveal-group].is-armed:not(.is-in) > * { opacity: 0; transform: translateY(12px); }

/* ---------- motion ---------- */
@keyframes ug-float { from { transform: translateY(0) rotate(var(--r, 0deg)); } to { transform: translateY(-10px) rotate(var(--r, 0deg)); } }
@keyframes ug-drift { from { transform: translate3d(-3%, 0, 0); } to { transform: translate3d(4%, 3%, 0); } }
@keyframes ug-drift-rtl { from { transform: scaleX(-1) translate3d(-3%, 0, 0); } to { transform: scaleX(-1) translate3d(4%, 3%, 0); } }
@keyframes ug-sweep { 0%, 60% { transform: translateX(0); } 100% { transform: translateX(380%); } }
@keyframes ug-spin { to { transform: rotate(360deg); } }
@keyframes ug-tick { to { transform: translateX(-50%); } }
@keyframes ug-tick-rtl { to { transform: translateX(50%); } }
[dir="rtl"] .ug-banner::after { animation-name: ug-sweep-rtl; }
@keyframes ug-sweep-rtl { 0%, 60% { transform: translateX(0); } 100% { transform: translateX(-380%); } }

@media (prefers-reduced-motion: reduce) {
    .ug *, .ug *::before, .ug *::after { animation: none !important; transition: none !important; }
    .ug-ticker { overflow-x: auto; scrollbar-width: none; }
    .ug-ticker__copy { display: none; }
    [data-ug-reveal-group].is-armed:not(.is-in) > * { opacity: 1; transform: none; }
}