/* ==========================================================================
   EXABYTE — storefront design system
   Arcade palette: electric violet + hot magenta brand, per-game colours,
   light and dark themes.
   ========================================================================== */

/* ---------- 1. Tokens ----------------------------------------------------
   Three theme states (see /js/theme.js):
   - no data-theme ("system"): light below, dark via prefers-color-scheme
   - [data-theme="light"] / [data-theme="dark"]: explicit choice wins.
   Components only ever read these tokens — never a literal that only works
   on one ground.
   Naming: --neon* is the brand accent (kept for history), --ink is heading
   text, --arcade is the always-dark "HUD" panel used for the header controls,
   game menu, category tiles and footer strip, --grad the brand gradient fill
   for solid emphasis (logo tile, active tab/page, step numbers). */
:root {
    color-scheme: light;
    --bg:            #F6F4FC;
    --bg-soft:       #EEEAF8;
    --surface:       #FFFFFF;
    --surface-2:     #FBFAFE;
    --surface-3:     #EEEAF8;
    --line:          #E4DFF1;
    --line-soft:     #ECE8F6;
    --line-strong:   #CFC7E4;
    --text:          #140E24;
    --text-2:        #4E4668;
    --text-3:        #8A82A6;
    --ink:           #1E1238;
    --brand-blue:    #7B3FF2; /* logo tile: solid brand violet (name kept for existing references) */
    --neon:          #7B3FF2;
    --neon-bright:   #A57BFF;
    --neon-dim:      #6127D6;
    --neon-deep:     #1E1238;
    --neon-soft:     rgba(123,63,242,.16);
    --neon-glow:     rgba(123,63,242,.38);
    --neon-faint:    rgba(123,63,242,.08);
    --pink:          #F0359A;
    --cyan:          #00B8C8;
    --yellow:        #FFB81F;
    --grad:          linear-gradient(120deg, #7B3FF2 0%, #C43BE0 55%, #F0359A 100%);
    --grad-soft:     rgba(123,63,242,.14);
    --arcade:        linear-gradient(150deg, #2A1650 0%, #170C30 100%);
    --arcade-solid:  #1B0F38;
    --arcade-line:   rgba(190,160,255,.22);
    --arcade-text:   #ECE4FF;
    --arcade-dim:    #A99BD0;
    /* The compact mobile footer follows the theme instead of being dark always. */
    --footer-bg:     var(--surface);
    --footer-line:   var(--line);
    --footer-ink:    var(--ink);
    --footer-dim:    var(--text-3);
    --footer-div:    var(--line-strong);
    --header-bg:     rgba(246,244,252,.88);
    --header-bg-solid: rgba(246,244,252,.97);
    --violet:        #7C5CFF;
    --violet-soft:   #EAE5FF;
    --ok:            #0E8A52;
    --warn:          #A36F05;
    --danger:        #D22F4A;
    --amber:         #C9860E;
    --ok-bg:         #E3F6EC;
    --warn-bg:       #FDF1D8;
    --danger-bg:     #FCE6EA;
    /* Per-game colours: -c is the vivid mark, -ink the readable text shade
       on the current ground. */
    --g-efootball:   #0FB5A9;  --g-efootball-ink: #08756D;
    --g-mlbb:        #7C5CFF;  --g-mlbb-ink:      #5B3ED6;
    --g-pubg:        #F2A017;  --g-pubg-ink:      #96600A;
    --g-freefire:    #F03E55;  --g-freefire-ink:  #B32A38;
    --sh-1:          0 1px 2px rgba(30,18,56,.06);
    --sh-2:          0 10px 26px -12px rgba(30,18,56,.2);
    --sh-3:          0 26px 60px -22px rgba(30,18,56,.34);
    --glow:          0 0 0 1px rgba(123,63,242,.35), 0 0 22px -4px rgba(123,63,242,.3);
    --r-xs:          7px;
    --r-sm:          9px;
    --r:             12px;
    --r-lg:          16px;
    --r-xl:          20px;
    --r-pill:        999px;
    --cut:           10px;
    --cut-sm:        6px;
    --cut-lg:        14px;
    --t-fast:        140ms cubic-bezier(.4,0,.2,1);
    --t:             220ms cubic-bezier(.4,0,.2,1);
    --t-slow:        380ms cubic-bezier(.22,1,.36,1);
    --shell:         1200px;
    --nav-h:         64px;
    --font-ui:       'Barlow', 'Noto Sans Myanmar', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-display:  'Chakra Petch', 'Noto Sans Myanmar', var(--font-ui);
    --font-mm:       'Noto Sans Myanmar', 'Padauk', 'Myanmar Text', var(--font-ui);
    --font-mono:     'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}
/* Dark theme tokens — duplicated for the two ways dark can be active. */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        color-scheme: dark;
        --bg: #0D0A17; --bg-soft: #151024; --surface: #161127; --surface-2: #1A142D; --surface-3: #221B39;
        --line: #2A2240; --line-soft: #221B36; --line-strong: #3B3158;
        --text: #EEEAF9; --text-2: #BDB3D8; --text-3: #8C81AD; --ink: #F5F1FF;
        --neon: #9C6BFF; --neon-bright: #BE9BFF; --neon-dim: #B88FFF; --neon-deep: #F5F1FF;
        --neon-soft: rgba(156,107,255,.24); --neon-glow: rgba(156,107,255,.45); --neon-faint: rgba(156,107,255,.12);
        --grad-soft: rgba(156,107,255,.2);
        --arcade: linear-gradient(150deg, #24133F 0%, #120A24 100%); --arcade-solid: #1A0F33;
        --footer-bg: var(--arcade); --footer-line: var(--arcade-line); --footer-ink: #fff;
        --footer-dim: var(--arcade-dim); --footer-div: rgba(255,255,255,.22);
        --header-bg: rgba(13,10,23,.86); --header-bg-solid: rgba(13,10,23,.97);
        --violet-soft: #2A2050;
        --ok: #3DD68C; --warn: #F5B73B; --danger: #FF6B81;
        --ok-bg: rgba(61,214,140,.12); --warn-bg: rgba(245,183,59,.12); --danger-bg: rgba(255,107,129,.12);
        --g-efootball-ink: #4FE0D3; --g-mlbb-ink: #B3A0FF; --g-pubg-ink: #FFC45C; --g-freefire-ink: #FF8A99;
        --sh-1: 0 1px 2px rgba(0,0,0,.4); --sh-2: 0 10px 26px -12px rgba(0,0,0,.6); --sh-3: 0 26px 60px -22px rgba(0,0,0,.75);
        --glow: 0 0 0 1px rgba(156,107,255,.45), 0 0 24px -4px rgba(156,107,255,.4);
    }
}
:root[data-theme="dark"] {
    color-scheme: dark;
    --bg: #0D0A17; --bg-soft: #151024; --surface: #161127; --surface-2: #1A142D; --surface-3: #221B39;
    --line: #2A2240; --line-soft: #221B36; --line-strong: #3B3158;
    --text: #EEEAF9; --text-2: #BDB3D8; --text-3: #8C81AD; --ink: #F5F1FF;
    --neon: #9C6BFF; --neon-bright: #BE9BFF; --neon-dim: #B88FFF; --neon-deep: #F5F1FF;
    --neon-soft: rgba(156,107,255,.24); --neon-glow: rgba(156,107,255,.45); --neon-faint: rgba(156,107,255,.12);
    --grad-soft: rgba(156,107,255,.2);
    --arcade: linear-gradient(150deg, #24133F 0%, #120A24 100%); --arcade-solid: #1A0F33;
    --footer-bg: var(--arcade); --footer-line: var(--arcade-line); --footer-ink: #fff;
    --footer-dim: var(--arcade-dim); --footer-div: rgba(255,255,255,.22);
    --header-bg: rgba(13,10,23,.86); --header-bg-solid: rgba(13,10,23,.97);
    --violet-soft: #2A2050;
    --ok: #3DD68C; --warn: #F5B73B; --danger: #FF6B81;
    --ok-bg: rgba(61,214,140,.12); --warn-bg: rgba(245,183,59,.12); --danger-bg: rgba(255,107,129,.12);
    --g-efootball-ink: #4FE0D3; --g-mlbb-ink: #B3A0FF; --g-pubg-ink: #FFC45C; --g-freefire-ink: #FF8A99;
    --sh-1: 0 1px 2px rgba(0,0,0,.4); --sh-2: 0 10px 26px -12px rgba(0,0,0,.6); --sh-3: 0 26px 60px -22px rgba(0,0,0,.75);
    --glow: 0 0 0 1px rgba(156,107,255,.45), 0 0 24px -4px rgba(156,107,255,.4);
}

/* corner language — the logo's sheared bars, echoed on every solid/interactive shape */
.cut     { clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut))); }
.cut-sm  { clip-path: polygon(0 0, calc(100% - var(--cut-sm)) 0, 100% var(--cut-sm), 100% 100%, var(--cut-sm) 100%, 0 calc(100% - var(--cut-sm))); }
.cut-lg  { clip-path: polygon(0 0, calc(100% - var(--cut-lg)) 0, 100% var(--cut-lg), 100% 100%, var(--cut-lg) 100%, 0 calc(100% - var(--cut-lg))); }

/* ---------- 2. Reset ----------------------------------------------------- */
/* The `hidden` attribute must always win — otherwise any component class
   that sets its own `display` (`.btn`, `.auth-screen`, flex/grid layouts…)
   silently outranks the UA's `[hidden]` rule and the element never hides. */
[hidden] { display: none !important; }
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
/* scrollbar-gutter: short pages (no scrollbar) and long ones (scrollbar) used
   to lay out at different widths, so switching e.g. portal tabs shifted the page. */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scrollbar-gutter: stable; }
body {
    min-height: 100vh; background: var(--bg); color: var(--text);
    font-family: var(--font-ui); font-size: 15px; line-height: 1.6;
    -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility; overflow-x: hidden;
}
body::before {
    content: ''; position: fixed; inset: 0; z-index: -2;
    background:
        radial-gradient(ellipse 900px 500px at 90% -10%, var(--neon-faint), transparent 60%),
        radial-gradient(ellipse 700px 500px at -10% 20%, color-mix(in srgb, var(--pink) 6%, transparent), transparent 60%),
        var(--bg);
    pointer-events: none;
}
::selection { background: var(--neon); color: #fff; }
* { scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 0; border: 2px solid var(--bg); }
*::-webkit-scrollbar-thumb:hover { background: var(--neon); }
@keyframes boot-blink { 0%,49%{opacity:1} 50%,100%{opacity:0} }
/* ---------- 3. Typography ------------------------------------------------ */
h1, h2, h3, h4 {
    font-family: var(--font-display); font-weight: 700;
    letter-spacing: -0.01em; line-height: 1.18; color: var(--neon-deep);
}
h1 { font-size: clamp(1.7rem, 3.4vw, 2.3rem); letter-spacing: -0.02em; }
h2 { font-size: clamp(1.3rem, 2.2vw, 1.65rem); }
h3 { font-size: 1.06rem; }
h4 { font-size: .96rem; }
p  { color: var(--text-2); }
a  { color: var(--neon); text-decoration: none; transition: color var(--t-fast); }
a:hover { color: var(--neon-dim); }
.display { font-family: var(--font-display); letter-spacing: -0.02em; color: var(--neon-deep); }
.eyebrow {
    display: inline-block; font-family: var(--font-ui);
    font-size: .68rem; font-weight: 700; letter-spacing: .14em;
    text-transform: uppercase; color: var(--neon); margin-bottom: 8px;
}
.dim { color: var(--text-3); } .muted { color: var(--text-2); }
.text-grad {
    background: var(--neon);
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
code, pre, kbd, samp { font-family: var(--font-mono); }

/* ---------- Myanmar (Burmese) text -------------------------------------
   Myanmar glyphs ship with a taller cap height, wider per-character
   advance, and combining marks that stack above the consonant. Rendered
   at the same px as Latin it looks visually larger and looser, so mixed
   EN/MM rows look broken. Fix: render slightly smaller with more leading.

   NEGATIVE letter-spacing is dangerous here and was removed — Myanmar
   combining marks are positioned relative to the base consonant's advance
   width, so tightening tracking pulls neighbouring clusters into each
   other and letters visually fuse. Real Myanmar sites (e.g. shop.com.mm)
   use normal tracking with generous line-height instead, which is what
   this now matches.

   Translated strings are swapped in as plain text via applyTranslations(),
   which only ever touches elements carrying data-i18n/-ph/-aria — so that
   attribute is the precise hook for "this text is Myanmar right now".
   Do NOT key this off `body.lang-mm` + a broad tag list: that also caught
   things that are never translated (the "EXABYTE" brand name, prices,
   dates) and shrank them too. Dynamic MM content that has no data-i18n
   hook (listing titles, seller bios) opts in explicitly via `.mm`/[lang]
   instead, applied by the page's own JS. */
/* :not(html) — core.js sets <html lang="my"> when Myanmar is active, and a
   bare [lang="my"] matched the root too, shrinking the root font-size to
   .78 x 16px. Every rem-based size on the page (Latin prices, titles,
   paddings) then shrank ~22% in Myanmar mode, which is why layouts visibly
   changed on a language switch. Only actual Myanmar text should shrink. */
.mm,
:not(html)[lang="my"],
body.lang-mm [data-i18n] {
    font-family: var(--font-mm);
    font-size: .78em;
    line-height: 1.35;
    letter-spacing: normal;
    font-optical-sizing: none;
    text-justify: inter-cluster;
}
/* Inside small components (buttons/inputs/labels) opt out of the size
   shrink so control dimensions stay stable across languages — only the
   font-family changes there, so Myanmar glyphs still render correctly. */
.mm.btn, .mm.input, .mm label,
.btn .mm, .input .mm, label .mm,
body.lang-mm .btn[data-i18n], body.lang-mm .btn [data-i18n],
body.lang-mm label[data-i18n], body.lang-mm label [data-i18n],
body.lang-mm select[data-i18n], body.lang-mm option[data-i18n],
body.lang-mm input[data-i18n-ph] {
    font-size: inherit;
    line-height: inherit;
}

/* ---------- 4. Layout ---------------------------------------------------- */
.shell { width: 100%; max-width: var(--shell); margin-inline: auto; padding-inline: 22px; }
.section { padding-block: 34px; }
.section-sm { padding-block: 22px; }
/* The last thing before the footer — .site-footer already carries its own
   30px margin-top, so pairing this with .section-sm's 22px+22px stacked on
   top of that read as a big dead gap above and below the banner. */
.ad-footer-section { padding-block: 22px 0; }
/* A banner between two sections only needs one section's worth of space
   above it — the section before it already pads its own bottom. */
section.section-sm.ad-inline-section { padding-top: 0; }
/* Any wrapper holding the footer banner is the last block before the footer: no bottom padding. */
main :is(section, div):has(> [data-ad="footer"]),
main :is(section, div):has(> .shell > [data-ad="footer"]) { padding-bottom: 0; }
.section-head {
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: 20px; margin-bottom: 20px; flex-wrap: wrap;
}
.section-head h2 { font-size: clamp(1.3rem, 2.2vw, 1.65rem); }
.section-head p { color: var(--text-2); font-size: .9rem; margin-top: 4px; }
.section-title-sm {
    font-family: var(--font-display); font-weight: 700;
    font-size: clamp(1.15rem, 2vw, 1.4rem); color: var(--neon-deep);
    margin-bottom: 14px;
}
.section-head-sm {
    display: flex; align-items: center; justify-content: space-between;
    gap: 14px; margin-bottom: 14px; flex-wrap: wrap;
}
.section-head-sm .section-title-sm { margin-bottom: 0; }
.divider { height: 1px; background: var(--line); }

/* ---------- 5. Header ---------------------------------------------------- */
.site-header {
    position: sticky; top: 0; z-index: 60;
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    background: var(--header-bg);
    border-bottom: 1px solid var(--line);
    transition: border-color var(--t), background var(--t);
}
/* Thin brand-gradient rule along the header's bottom edge. */
.site-header::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
    background: var(--grad); opacity: .85; pointer-events: none;
}
.site-header.is-stuck { background: var(--header-bg-solid); border-bottom-color: var(--line-strong); box-shadow: var(--sh-1); }
.nav { height: var(--nav-h); display: flex; align-items: center; gap: 18px; }
.brand { display: inline-flex; align-items: center; gap: 12px; min-width: 0; flex-shrink: 0; }
.brand-mark {
    width: 42px; height: 42px; padding: 9px;
    clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 9px, 100% 100%, 9px 100%, 0 calc(100% - 9px));
    display: grid; place-items: center; background: var(--brand-blue);
    color: #fff; flex-shrink: 0;
}
.brand-mark svg { width: 100%; height: 100%; display: block; }
.brand-div { width: 1px; height: 30px; background: var(--line-strong); flex-shrink: 0; }
.brand-name { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.brand-name b {
    font-family: var(--font-display); font-size: 1.14rem; font-weight: 700;
    letter-spacing: .01em; white-space: nowrap; color: var(--neon-deep);
    overflow: hidden; text-overflow: ellipsis;
}
.brand-name span {
    font-size: .64rem; color: var(--text-3);
    letter-spacing: .1em; text-transform: uppercase; font-weight: 600;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.nav-spacer { flex: 1 1 auto; }
.nav-links { display: flex; align-items: center; gap: 4px; }
/* Nav links: each section has its own colour (matching the mobile dock) —
   a small glowing diamond marks it at rest; hover washes the cut-corner
   hit area in that colour and sweeps a bar under the label; the current
   page is a solid chip in its colour. */
.nav-links a {
    --nav-c: var(--neon);
    position: relative; display: inline-flex; align-items: center; gap: 7px;
    padding: 8px 13px;
    font-family: var(--font-display); font-size: .86rem; font-weight: 600; color: var(--text-2);
    clip-path: polygon(0 0, calc(100% - var(--cut-sm)) 0, 100% var(--cut-sm), 100% 100%, var(--cut-sm) 100%, 0 calc(100% - var(--cut-sm)));
    transition: color var(--t-fast), background var(--t-fast);
}
.nav-links a::before {
    content: ''; width: 6px; height: 6px; flex: none; transform: rotate(45deg);
    background: var(--nav-c); box-shadow: 0 0 8px var(--nav-c);
}
.nav-links a::after {
    content: ''; position: absolute; left: 12px; right: 12px; bottom: 3px; height: 2px;
    background: var(--nav-c); transform: scaleX(0); transform-origin: left;
    transition: transform var(--t);
}
.nav-links a:nth-child(1) { --nav-c: #8B55FF; }
.nav-links a:nth-child(2) { --nav-c: #F0359A; }
.nav-links a:nth-child(3) { --nav-c: #0BB4C4; }
.nav-links a:nth-child(4) { --nav-c: #F2A017; }
.nav-links a:nth-child(5) { --nav-c: #22C55E; }
.nav-links a:nth-child(6) { --nav-c: #3B7BFF; }
.nav-links a:hover { color: var(--ink); background: color-mix(in srgb, var(--nav-c) 14%, transparent); }
.nav-links a:hover::after { transform: scaleX(1); }
.nav-links a.active { color: #fff; background: var(--nav-c); box-shadow: 0 6px 16px -8px var(--nav-c); }
.nav-links a.active::before { background: #fff; box-shadow: none; }
.nav-links a.active::after { display: none; }
.nav-links a:focus-visible { outline: 2px solid var(--nav-c); outline-offset: -2px; }/* Seller login: fills with the brand gradient on hover like the primary CTA. */
.nav-tools .nav-portal:hover { border-color: transparent; background: var(--grad); color: #fff; box-shadow: 0 6px 16px -6px var(--neon-glow); }
.nav-tools { display: flex; align-items: center; gap: 10px; }
/* Language toggle — a single cut-corner HUD button: globe + current
   language name + chevron. Clicking flips straight to the other language. */
.lang-trigger {
    position: relative;
    display: inline-flex; align-items: center; gap: 7px;
    height: 38px; padding: 0 13px 0 11px;
    background: var(--arcade);
    color: var(--arcade-text);
    border: none;
    clip-path: polygon(0 0, calc(100% - var(--cut-sm)) 0, 100% var(--cut-sm), 100% 100%, var(--cut-sm) 100%, 0 calc(100% - var(--cut-sm)));
    box-shadow: 0 0 10px -4px var(--neon), inset 0 0 0 1px var(--arcade-line);
    font-family: var(--font-display);
    font-size: .78rem; font-weight: 600; letter-spacing: .01em;
    cursor: pointer;
    transition: box-shadow var(--t-fast), color var(--t-fast);
}
.lang-trigger:hover { box-shadow: 0 0 14px -2px var(--neon), inset 0 0 0 1px var(--neon-bright); }
.lang-trigger .ico { display: flex; color: var(--neon-bright); }
.lang-trigger .lang-cur { min-width: 58px; text-align: left; }
.lang-trigger.is-mm .lang-full { font-family: var(--font-mm); font-size: .74rem; letter-spacing: normal; }
.lang-trigger .lang-abbr { display: none; }
.lang-trigger .chev { display: flex; color: var(--arcade-dim); transition: transform var(--t-fast); }
.lang-trigger:hover .chev { transform: translateY(1px); }
/* Theme switcher (system / light / dark) — same HUD button language as the
   language toggle, icon only. Markup + behaviour live in /js/theme.js. */
.theme-toggle {
    display: inline-grid; place-items: center; flex-shrink: 0;
    width: 38px; height: 38px; padding: 0; border: none; cursor: pointer;
    background: var(--arcade); color: var(--yellow);
    clip-path: polygon(0 0, calc(100% - var(--cut-sm)) 0, 100% var(--cut-sm), 100% 100%, var(--cut-sm) 100%, 0 calc(100% - var(--cut-sm)));
    box-shadow: 0 0 10px -4px var(--neon), inset 0 0 0 1px var(--arcade-line);
    transition: box-shadow var(--t-fast), color var(--t-fast);
}
.theme-toggle[data-mode="dark"] { color: var(--neon-bright); }

.theme-toggle:hover { box-shadow: 0 0 14px -2px var(--neon), inset 0 0 0 1px var(--neon-bright); }
.theme-toggle:focus-visible, .lang-trigger:focus-visible { outline: 2px solid var(--neon-bright); outline-offset: 2px; }
.theme-toggle svg { width: 17px; height: 17px; }
/* ---------- 6. Buttons --------------------------------------------------- */
.btn {
    --btn-bg: var(--surface);
    --btn-fg: var(--text);
    --btn-bd: var(--line-strong);
    display: inline-flex; align-items: center; justify-content: center;
    gap: 8px; padding: 10px 18px;
    border: 1px solid var(--btn-bd);
    clip-path: polygon(0 0, calc(100% - var(--cut-sm)) 0, 100% var(--cut-sm), 100% 100%, var(--cut-sm) 100%, 0 calc(100% - var(--cut-sm)));
    background: var(--btn-bg); color: var(--btn-fg);
    font-family: var(--font-display); font-size: .85rem; font-weight: 600;
    line-height: 1.2; white-space: nowrap; cursor: pointer;
    transition: transform var(--t-fast), box-shadow var(--t), background var(--t-fast),
                border-color var(--t-fast), color var(--t-fast);
}
.btn:hover { transform: translateY(-1px); border-color: var(--neon); color: var(--neon-deep); }
.btn:active { transform: translateY(0); }
.btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.btn svg { width: 16px; height: 16px; flex-shrink: 0; }
.btn-sm  { padding: 7px 13px;  font-size: .78rem; }
.btn-lg  { padding: 13px 22px; font-size: .93rem; }
.btn-block { width: 100%; }
.btn-icon { padding: 8px; width: 36px; height: 36px; }
.nav-burger {
    --btn-bg: var(--arcade);
    --btn-fg: #fff; --btn-bd: var(--arcade-line);
    box-shadow: 0 0 10px -4px var(--neon);
}
.nav-burger:hover { --btn-fg: #fff; box-shadow: 0 0 14px -2px var(--neon); border-color: var(--neon); }
.btn-primary {
    --btn-bd: transparent;
    background: var(--grad); background-size: 160% 100%; background-position: 0 0; color: #fff;
    box-shadow: 0 6px 16px -6px var(--neon-glow);
    transition: transform var(--t-fast), box-shadow var(--t), background-position var(--t), color var(--t-fast);
}
.btn-primary:hover {
    background: var(--grad); background-size: 160% 100%; background-position: 100% 0; color: #fff;
    box-shadow: 0 8px 22px -4px var(--neon-glow);
}
.btn-outline {
    --btn-bd: var(--neon);
    --btn-fg: var(--neon);
    --btn-bg: var(--neon-faint);
}
.btn-outline:hover {
    --btn-bd: var(--neon);
    --btn-fg: #fff;
    --btn-bg: var(--neon);
}
.btn-ghost {
    --btn-bd: transparent;
    --btn-bg: transparent;
    --btn-fg: var(--text-2);
}
.btn-ghost:hover { --btn-fg: var(--neon); --btn-bg: var(--neon-faint); }
.btn-danger {
    --btn-bd: transparent;
    --btn-bg: var(--danger);
    --btn-fg: #fff;
}
.btn-danger:hover { --btn-bg: color-mix(in srgb, var(--danger) 82%, #000); }
/* Same ghost (transparent, text-only) treatment as .btn-ghost, but for a
   destructive action inline next to non-destructive ones (e.g. a listing
   row's Edit/Delete pair) — sharing .btn-ghost's hover made Delete hover
   the same neutral blue as Edit, giving no visual warning before deleting. */
.btn-ghost-danger {
    --btn-bd: transparent;
    --btn-bg: transparent;
    --btn-fg: var(--danger);
}
.btn-ghost-danger:hover { --btn-fg: #fff; --btn-bg: var(--danger); }

/* ---------- 7. Hero ------------------------------------------------------ */
.hero { position: relative; padding-block: 0 30px; overflow: hidden; }
.hero::before {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(180deg, var(--neon-faint), transparent 70%);
    border-bottom: 1px solid var(--line);
    z-index: -1;
}
/* Banner geometry — the banner SVGs are designed against exactly this:
   - Source art: 1600x500 canvas (3.2:1).
   - >720px: contained to the site's content width (.shell), shown at 3.2:1,
     so nothing is cropped (~1156x361 at full desktop width).
   - <=720px: full-bleed, attached to the header, shown at 2.2:1 so it stays
     short on phones; object-fit:cover trims 250 units off each side.
   - The dot strip overlays the bottom edge.
   Hence the art's safe zone for essential content: x 280-1320, y 55-410. */
.hero-media { margin-top: 20px; }
.hero-banner {
    position: relative; width: 100%; aspect-ratio: 3.2 / 1; overflow: hidden;
    background: var(--arcade-solid); touch-action: pan-y;
    clip-path: polygon(0 0, calc(100% - var(--cut-lg)) 0, 100% var(--cut-lg), 100% 100%, var(--cut-lg) 100%, 0 calc(100% - var(--cut-lg)));
}
.hero-track { display: flex; height: 100%; transition: transform .6s cubic-bezier(.22, .61, .36, 1); }
.hero-banner-img { flex: 0 0 100%; width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; user-select: none; -webkit-user-drag: none; }
/* Slide dots sit inside the banner on a slim navy strip along its bottom
   edge, so banner + controls read as one unit. Each dot is a 20px hit
   target; the visible mark is the ::before pill, which stretches into a bar
   for the active slide. */
.hero-dots {
    position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
    display: flex; justify-content: center; align-items: center; gap: 2px;
    height: 28px;
    background: rgba(18, 9, 36, .78);
    border-top: 1px solid var(--arcade-line);
    backdrop-filter: blur(6px);
}
.hero-dots:empty { display: none; }
.hero-dot { position: relative; width: 20px; height: 20px; padding: 0; border: 0; background: transparent; cursor: pointer; transition: width var(--t); }
.hero-dot::before {
    content: ''; position: absolute; left: 50%; top: 50%;
    width: 7px; height: 7px; border-radius: 999px; transform: translate(-50%, -50%);
    background: rgba(255, 255, 255, .35); transition: width var(--t), background var(--t);
}
.hero-dot:hover::before { background: rgba(255, 255, 255, .7); }
.hero-dot[aria-selected="true"] { width: 32px; }
.hero-dot[aria-selected="true"]::before { width: 22px; background: var(--grad); }
.hero-dot:focus-visible { outline: 2px solid var(--neon-bright); outline-offset: -2px; }
@media (prefers-reduced-motion: reduce) { .hero-track { transition: none; } }
.hero-inner {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    gap: 34px; align-items: center;
    padding-top: 20px;
}
.hero-inner > * { min-width: 0; }
.hero-copy { max-width: 580px; }
/* "How buying works" strip. Desktop only: beside the taller trusted-sellers
   card the compact stat bar left dead space, so the left column stacks the
   stat bar over these three steps and both columns end on the same line.
   Phones already show the column stacked and don't need the extra height. */
.hero-steps { display: none; }
@media (min-width: 981px) {
    .hero-inner { align-items: stretch; }
    .hero-copy { max-width: none; display: flex; flex-direction: column; gap: 12px; }
    /* Whichever column is taller (Myanmar step text wraps more), the other
       stretches so both cards end on the same line. */
    .hero-visual, .top-sellers { display: flex; flex-direction: column; }
    .top-sellers { flex: 1; }
    .top-sellers-grid { flex: 1; }
    .hero-steps {
        flex: 1; display: flex; flex-direction: column;
        background: var(--arcade); color: #fff;
        clip-path: polygon(0 0, calc(100% - var(--cut-lg)) 0, 100% var(--cut-lg), 100% 100%, var(--cut-lg) 100%, 0 calc(100% - var(--cut-lg)));
    }
    .hero-steps-title {
        padding: 9px 16px; font-size: .66rem; font-weight: 700; letter-spacing: .12em;
        text-transform: uppercase; color: var(--arcade-dim); border-bottom: 1px solid var(--arcade-line);
    }
    body.lang-mm .hero-steps-title { font-size: .74rem; letter-spacing: 0; }
    .hero-steps-list {
        flex: 1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
        margin: 0; padding: 0; list-style: none;
    }
    .hero-step {
        position: relative; display: flex; align-items: center; gap: 10px;
        padding: 10px 16px; min-width: 0;
    }
    .hero-step + .hero-step { border-left: 1px solid var(--arcade-line); }
    /* Chevron on each divider reads the three cells as a sequence. */
    .hero-step + .hero-step::before {
        content: ""; position: absolute; left: -5px; top: 50%; width: 8px; height: 8px;
        background: var(--arcade-solid); border-top: 1px solid var(--arcade-dim); border-right: 1px solid var(--arcade-dim);
        transform: translateY(-50%) rotate(45deg);
    }
    .hero-step-n {
        --step-c: var(--neon);
        flex: none; display: grid; place-items: center; width: 28px; height: 28px;
        font-family: var(--font-display); font-weight: 700; font-size: .9rem;
        color: #fff; background: var(--step-c);
        box-shadow: 0 0 14px -2px var(--step-c);
        clip-path: polygon(0 0, calc(100% - 6px) 0, 100% 6px, 100% 100%, 6px 100%, 0 calc(100% - 6px));
    }
    .hero-step:nth-child(2) .hero-step-n { --step-c: var(--pink); }
    .hero-step:nth-child(3) .hero-step-n { --step-c: #0A9DAB; }
    .hero-step-text { display: grid; gap: 2px; min-width: 0; }
    .hero-step-text b { font-family: var(--font-display); font-size: .86rem; font-weight: 600; line-height: 1.2; }
    .hero-step-text small { font-size: .72rem; color: var(--arcade-dim); line-height: 1.3; }
    body.lang-mm .hero-step-text b { font-size: .74rem; line-height: 1.5; }
    body.lang-mm .hero-step-text small { font-size: .64rem; line-height: 1.5; }
}

/* Hero visual: compact "trusted sellers" card. A light surface in the same
   visual language as the stat bar — header row + a 2x2 grid of sellers split
   by hairlines — instead of the old full dark panel whose padding, grid
   texture and per-seller boxes took far more room than four names need. */
.hero-visual { position: relative; }
.top-sellers {
    position: relative; overflow: hidden;
    background: var(--surface); border: 1px solid var(--line); box-shadow: var(--sh-1);
    clip-path: polygon(0 0, calc(100% - var(--cut-lg)) 0, 100% var(--cut-lg), 100% 100%, var(--cut-lg) 100%, 0 calc(100% - var(--cut-lg)));
}
.top-sellers::before {
    content: ''; position: absolute; left: 0; right: 0; top: 0; height: 2px;
    background: var(--grad); pointer-events: none;
}
.top-sellers-head {
    position: relative; z-index: 1;
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 7px 12px; border-bottom: 1px solid var(--line);
}
.top-sellers-title {
    display: inline-flex; align-items: center; gap: 7px;
    font-size: .6rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3);
}
.top-sellers-title::before { content: ''; width: 6px; height: 6px; background: var(--pink); transform: rotate(45deg); }
.top-sellers .view-all { font-size: .74rem; }
body.lang-mm .top-sellers-title { font-size: .66rem; letter-spacing: 0; }
/* Compact "View all ›" text link used for every section's see-more action —
   replaces the outlined buttons that dwarfed the headings next to them
   (worse in Myanmar, where .btn opts out of the MM text shrink). */
.view-all {
    display: inline-flex; align-items: center; gap: 2px; padding: 4px 0;
    font-family: var(--font-display); font-size: .8rem; font-weight: 600;
    color: var(--neon); white-space: nowrap;
}
.view-all svg { width: 14px; height: 14px; transition: transform var(--t-fast); }
.view-all:hover { color: var(--neon-dim); }
.view-all:hover svg { transform: translateX(2px); }
/* gap:1px over a line-coloured background draws the hairlines between cells.
   minmax(0,1fr) so a long seller name ellipsizes instead of widening the
   column (a bare 1fr track can't shrink below its content). */
.top-sellers-grid { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--line); }
.ts-item {
    display: flex; align-items: center; gap: 10px; min-width: 0;
    --ts-c: var(--neon-bright);
    position: relative; padding: 11px 13px; background: var(--surface); color: inherit;
    transition: background var(--t-fast);
}
/* One accent per seller, the same four colours as the mobile tab bar. */
.ts-item:nth-child(1) { --ts-c: #9A6BFF; }
.ts-item:nth-child(2) { --ts-c: #FF4FA8; }
.ts-item:nth-child(3) { --ts-c: #19CAD9; }
.ts-item:nth-child(4) { --ts-c: #FFB22E; }
/* The tab bar's glow, on a white cell: the accent washes down from the top
   edge and lights the avatar, with no bar drawn. */
.ts-item {
    background:
        radial-gradient(90% 80% at 50% 0%, color-mix(in srgb, var(--ts-c) 22%, transparent), transparent 75%),
        var(--surface);
}
.ts-item .ts-av { box-shadow: 0 0 14px -4px var(--ts-c); }
.ts-item:last-child:nth-child(odd) { grid-column: 1 / -1; }
.ts-item:hover {
    background:
        radial-gradient(90% 80% at 50% 0%, color-mix(in srgb, var(--ts-c) 34%, transparent), transparent 75%),
        var(--surface);
}
.ts-av {
    width: 34px; height: 34px; flex: none; overflow: hidden;
    display: grid; place-items: center;
    font-family: var(--font-display); font-weight: 700; font-size: .82rem; color: #fff;
    clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px));
}
.ts-av img { width: 100%; height: 100%; object-fit: cover; }
.ts-info { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ts-name { display: flex; align-items: center; gap: 4px; min-width: 0; font-family: var(--font-display); font-weight: 600; font-size: .82rem; line-height: 1.2; color: var(--neon-deep); }
.ts-name-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.ts-name svg { flex: none; width: 13px; height: 13px; color: var(--ts-c); }
.ts-meta { font-size: .72rem; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ts-meta b { color: var(--ts-c); font-family: var(--font-mono); font-weight: 700; }
.ts-empty { grid-column: 1 / -1; padding: 22px 14px; text-align: center; background: var(--surface); color: var(--text-3); font-size: .84rem; }

/* No heading here any more, so the section's own top padding would stack on
   the categories section's bottom padding right above it and read as a dead
   gap before the search box — the categories' spacing is enough. */
#listings { scroll-margin-top: var(--nav-h); padding-top: 0; }

/* ---------- 8. Toolbar (search + filters) -------------------------------- */
.toolbar {
    position: sticky; top: var(--nav-h); z-index: 40;
    padding: 12px 0; background: var(--header-bg);
    backdrop-filter: blur(10px);
}
/* Myanmar glyphs render visibly larger than Latin at an identical declared
   font-size (taller stacked diacritics/clusters), which made every compact
   control — not just toolbar ones — look mismatched next to plain-text
   siblings once MM was active: search boxes, price min/max, and the custom
   dropdown trigger all read bigger than their neighbours. Sized down
   uniformly, everywhere these appear, not just inside one container. */
body.lang-mm .search input,
body.lang-mm .search input::placeholder,
body.lang-mm .csel-trigger,
body.lang-mm .price-range input,
body.lang-mm .price-range input::placeholder { font-size: .78rem; }
.toolbar-inner {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    padding: 11px; border: 1px solid var(--line);
    clip-path: polygon(0 0, calc(100% - var(--cut-lg)) 0, 100% var(--cut-lg), 100% 100%, var(--cut-lg) 100%, 0 calc(100% - var(--cut-lg)));
    background: var(--surface); box-shadow: var(--sh-1);
}
.search { position: relative; flex: 1 1 260px; min-width: 200px; display: flex; align-items: center; height: 44px; }
.search .ico {
    position: absolute; left: 14px; color: var(--text-3);
    pointer-events: none; display: grid; place-items: center;
}
.search input {
    width: 100%; height: 100%; box-sizing: border-box; padding: 0 38px 0 40px;
    border: 1px solid var(--line);
    background: var(--bg-soft); color: var(--text); font-size: .88rem;
    transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.search input::placeholder { color: var(--text-3); }
.search input:focus { outline: none; border-color: var(--neon); box-shadow: 0 0 0 3px var(--neon-soft); }
.search .clear {
    position: absolute; right: 10px; width: 22px; height: 22px; border-radius: 50%;
    display: none; place-items: center; color: var(--text-3); background: var(--surface-3);
}
.search .clear:hover { color: var(--neon); }
.search.has-value .clear { display: grid; }
.price-range { display: flex; align-items: center; gap: 6px; height: 44px; }
.price-range input {
    height: 100%; width: 72px; box-sizing: border-box; padding: 0 8px; text-align: center;
    border: 1px solid var(--line); background: var(--bg-soft); color: var(--text); font-size: .84rem;
    font-variant-numeric: tabular-nums;
}
.price-range input::placeholder { color: var(--text-3); }
.price-range input:focus { outline: none; border-color: var(--neon); box-shadow: 0 0 0 3px var(--neon-soft); }
.price-range input::-webkit-outer-spin-button, .price-range input::-webkit-inner-spin-button { margin: 0; }
.price-range .to { color: var(--text-3); font-size: .8rem; flex-shrink: 0; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
#homeGameChips { margin-top: 18px; }
/* Filter chip with a colour bar along its bottom edge. The bar takes the
   game's own colour — the same one its tag uses on listing cards (eFootball
   teal, MLBB violet, PUBG amber, Free Fire red; "All" is brand blue) — faint
   at rest, full strength when selected, where the chip also picks up a tint
   and the darker text shade of that colour. */
.chip {
    --chip-c: var(--neon); --chip-ink: var(--neon-deep);
    position: relative; overflow: hidden;
    padding: 9px 14px 11px; border: 1px solid var(--line);
    background: var(--surface);
    color: var(--text-2); font-family: var(--font-display); font-size: .8rem; font-weight: 600;
    white-space: nowrap; flex-shrink: 0; cursor: pointer;
    transition: color var(--t-fast), background var(--t-fast), border-color var(--t-fast);
}
.chip::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
    background: var(--chip-c); opacity: .35; transition: opacity var(--t-fast);
}
.chip:hover { color: var(--chip-ink); border-color: var(--line-strong); }
.chip:hover::after { opacity: .75; }
.chip.active {
    color: var(--chip-ink);
    background: color-mix(in srgb, var(--chip-c) 11%, var(--surface));
    border-color: color-mix(in srgb, var(--chip-c) 40%, transparent);
}
.chip.active::after { opacity: 1; }
.chip[data-tone="all"]       { --chip-c: var(--pink); --chip-ink: var(--neon); }
.chip[data-tone="efootball"] { --chip-c: var(--g-efootball); --chip-ink: var(--g-efootball-ink); }
.chip[data-tone="mlbb"]      { --chip-c: var(--g-mlbb); --chip-ink: var(--g-mlbb-ink); }
.chip[data-tone="pubg"]      { --chip-c: var(--g-pubg); --chip-ink: var(--g-pubg-ink); }
.chip[data-tone="freefire"]  { --chip-c: var(--g-freefire); --chip-ink: var(--g-freefire-ink); }
.chip[data-tone="all"]::after { background: var(--grad); }
.chip[data-tone="more"]      { --chip-c: var(--text-3); --chip-ink: var(--text); }

/* Game filter: on desktop every game is a chip. On phones (see the 720px
   breakpoint) only "All" + the first two games stay as chips and the rest
   fold into a "More" cell that opens .game-menu, a full-width panel listing
   every game with its account count. */
.game-filter { position: relative; }
.chip-more, .game-menu { display: none; }
.chip-more .chev { display: inline-flex; transition: transform var(--t-fast); }
.chip-more[aria-expanded="true"] .chev { transform: rotate(180deg); }
.game-menu {
    position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 45;
    padding: 6px;
    background: var(--arcade);
    border: 1px solid var(--arcade-line);
    box-shadow: 0 18px 40px -14px rgba(10,4,24,.6);
    clip-path: polygon(0 0, calc(100% - var(--cut-lg)) 0, 100% var(--cut-lg), 100% 100%, var(--cut-lg) 100%, 0 calc(100% - var(--cut-lg)));
    animation: gameMenuIn .16s ease-out both;
}
@keyframes gameMenuIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.game-menu-opt {
    display: flex; align-items: center; gap: 12px; width: 100%;
    padding: 10px; border: 0; border-bottom: 1px solid rgba(255,255,255,.06);
    background: transparent; color: var(--arcade-text); text-align: left; cursor: pointer;
    font-family: var(--font-display); font-weight: 600; font-size: .88rem;
    transition: background var(--t-fast);
}
.game-menu-opt:last-child { border-bottom: 0; }
.game-menu-opt:hover, .game-menu-opt:focus-visible { background: rgba(165,123,255,.14); outline: none; }
.game-menu-opt[aria-selected="true"] { background: color-mix(in srgb, var(--cat, #7B3FF2) 28%, transparent); color: #fff; }
.gm-glyph {
    width: 32px; height: 32px; flex: none; display: grid; place-items: center; overflow: hidden;
    color: var(--cat, var(--arcade-dim));
    background: color-mix(in srgb, var(--cat, var(--neon)) 18%, #150A2C);
    border: 1px solid color-mix(in srgb, var(--cat, var(--neon)) 45%, transparent);
    clip-path: polygon(0 0, calc(100% - 7px) 0, 100% 7px, 100% 100%, 7px 100%, 0 calc(100% - 7px));
}
.gm-glyph img { width: 80%; height: 80%; object-fit: contain; }
.gm-glyph svg { width: 16px; height: 16px; }
.gm-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gm-count { flex: none; padding: 2px 8px; font-family: var(--font-mono); font-size: .7rem; color: var(--arcade-dim); background: rgba(255,255,255,.06); }
.gm-check { flex: none; display: inline-flex; color: var(--neon-bright); visibility: hidden; }
.game-menu-opt[aria-selected="true"] .gm-check { visibility: visible; }
@media (prefers-reduced-motion: reduce) { .game-menu { animation: none; } }
.select-wrap { position: relative; display: inline-flex; }
.select-wrap::after {
    content: ''; position: absolute; right: 14px; top: 50%;
    width: 7px; height: 7px;
    border-right: 2px solid var(--text-3);
    border-bottom: 2px solid var(--text-3);
    transform: translateY(-70%) rotate(45deg); pointer-events: none;
}
select {
    appearance: none; -webkit-appearance: none;
    padding: 9px 36px 9px 14px; border: 1px solid var(--line);
    background: var(--bg-soft);
    color: var(--text); font-size: .82rem; font-weight: 600;
    cursor: pointer; transition: border-color var(--t-fast);
}
select:hover { border-color: var(--neon); }
select:focus { outline: none; border-color: var(--neon); box-shadow: 0 0 0 3px var(--neon-soft); }
select option { background: var(--surface); color: var(--text); }

/* Custom dropdown — every <select> is progressively enhanced (see
   core.js enhanceSelects) into this, because an opened native <select>
   is an OS-level popup no CSS can restyle. The original select stays
   in the DOM (visually hidden) as the real source of truth. */
.select-wrap:has(.csel)::after { display: none; }
.csel { position: relative; display: inline-flex; max-width: 100%; }
.csel-native {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.csel-trigger {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    width: 100%; height: 44px; box-sizing: border-box;
    padding: 0 12px 0 14px; border: 1px solid var(--line);
    background: var(--bg-soft); color: var(--text);
    font: inherit; font-size: .82rem; font-weight: 600; text-align: left;
    cursor: pointer; transition: border-color var(--t-fast);
}
.csel-trigger:hover { border-color: var(--neon); }
.csel.is-open .csel-trigger { border-color: var(--neon); box-shadow: 0 0 0 3px var(--neon-soft); }
.csel-trigger .lbl { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.csel-trigger .chev { display: flex; flex-shrink: 0; color: var(--text-3); transition: transform var(--t-fast); }
.csel-trigger .chev svg { width: 11px; height: 11px; }
.csel.is-open .csel-trigger .chev { transform: rotate(180deg); }
.csel-trigger:disabled { opacity: .55; cursor: not-allowed; }
.csel-menu {
    position: fixed; z-index: 260;
    max-height: 260px; overflow-y: auto;
    border: 1px solid var(--line-strong);
    background: var(--surface);
    box-shadow: var(--sh-3);
    padding: 4px;
}
.csel-opt {
    display: block; width: 100%; text-align: left;
    padding: 8px 10px; border: 0; border-radius: 0; background: transparent;
    color: var(--text); font: inherit; font-size: .83rem; font-weight: 500;
    cursor: pointer;
}
.csel-opt:hover { background: var(--bg-soft); }
.csel-opt.active { background: var(--neon); color: #fff; font-weight: 600; }
.csel-opt:disabled { opacity: .5; cursor: not-allowed; }
.result-count { font-size: .8rem; color: var(--text-3); margin-left: auto; padding-right: 4px; }
/* ---------- 9. Product grid + cards -------------------------------------- */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; margin-top: 18px; }
/* Bare `1fr` grid tracks default to minmax(auto, 1fr) — a track only
   shrinks below its content's natural width if every item in it opts in
   with min-width:0. The in-feed ad card (home.js mounts one directly as
   a grid item, mixed in with .card items) never did, and its "@handle"
   contact button carries white-space:nowrap same as every .btn, so its
   un-shrinkable width was winning: that one column ballooned while the
   other two got squeezed down to their own min-content, well below the
   card content that then visibly overflowed them. */
/* The ad slot's copy (title + body + CTA button) and its absolute-positioned
   "Advertisement" flag badge are sized for a full listing-card-width tile.
   Squeezed into one third of the row (the mobile 3-column layout below, or
   even a single ~260px desktop column), the badge text overflows the whole
   card and paints over the wrapped title beneath it. Give it the full row
   width instead of a single column — min-width:0 still matters here since a
   full-width auto track still won't shrink an un-shrinkable child below its
   content size otherwise. */
.grid > [data-ad] { grid-column: 1 / -1; min-width: 0; }
/* The "nothing here yet" placeholder is the sole child of #grid when a
   search/filter has no results, but nothing told it to span the grid — it
   sat in column 1 of the 3-column mobile layout only ~110px wide, leaving
   the other two columns' worth of width as blank space next to/below it
   (read as a big empty gap before the next section). */
.grid > .empty { grid-column: 1 / -1; }
/* Search + "View all" share one row above the game chips, so the section
   ends at the grid with no trailing link row (and no gap) below it. */
.listings-head { display: flex; align-items: center; gap: 14px; }
.listings-head .search { flex: 0 1 420px; min-width: 0; }
.listings-head .view-all { margin-left: auto; flex-shrink: 0; }
@media (max-width: 720px) {
    .listings-head { gap: 10px; }
    .listings-head .search { flex: 1 1 auto; }
}
/* Full browse page: two wide columns instead of many small ones. */
.browse-grid { grid-template-columns: 1fr; }
@media (min-width: 680px)  { .browse-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 900px)  { .browse-grid { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1200px) { .browse-grid { grid-template-columns: repeat(6, 1fr); } }
.card {
    position: relative; display: flex; flex-direction: column;
    border: 1px solid var(--line);
    clip-path: polygon(0 0, calc(100% - var(--cut-lg)) 0, 100% var(--cut-lg), 100% 100%, var(--cut-lg) 100%, 0 calc(100% - var(--cut-lg)));
    background: var(--surface); overflow: hidden; cursor: pointer;
    isolation: isolate;
    transition: transform var(--t), border-color var(--t), box-shadow var(--t);
}
.card:hover { transform: translateY(-4px); box-shadow: var(--sh-3), 0 0 0 1px var(--neon-soft); border-color: color-mix(in srgb, var(--neon) 45%, var(--line)); }
/* Every account card wears its game's colour: a tinted body, a lit strip
   under the photo and a matching glow on hover. */
.card[data-game] { border-color: color-mix(in srgb, var(--cat) 32%, var(--line)); }
.card[data-game] .card-body {
    background: linear-gradient(180deg, color-mix(in srgb, var(--cat) 14%, var(--surface)) 0%, var(--surface) 70%);
}
.card[data-game] .card-media { border-bottom: 3px solid var(--cat); }
.card[data-game] .card-title { color: var(--cat-ink); }
.card[data-game] .spec b { color: var(--cat-ink); }
.card[data-game] .card-foot { border-top-color: color-mix(in srgb, var(--cat) 26%, var(--line-soft)); }
.card[data-game]:hover {
    border-color: color-mix(in srgb, var(--cat) 65%, var(--line));
    box-shadow: var(--sh-3), 0 0 0 1px color-mix(in srgb, var(--cat) 45%, transparent), 0 10px 30px -14px var(--cat);
}
.card-media { position: relative; aspect-ratio: 16 / 9; background: var(--surface-3); overflow: hidden; }
.card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-slow), filter var(--t); }
/* The whole screenshot stays visible (contain); a blurred copy fills the rest of the box. */
.card-media .card-media-bg { position: absolute; inset: 0; object-fit: cover; filter: blur(14px) brightness(.55) saturate(1.2); transform: scale(1.15); }
.card-media .card-media-img { position: relative; object-fit: contain; }
.card:hover .card-media .card-media-bg { transform: scale(1.15); }
.card:hover .card-media img { transform: scale(1.06); }
.card-media .fallback {
    width: 100%; height: 100%; display: grid; place-items: center;
    font-size: 2.2rem; opacity: .3; background: var(--surface-3);
}
.media-top { position: absolute; top: 10px; left: 10px; right: 10px; display: flex; align-items: flex-start; justify-content: flex-end; gap: 8px; z-index: 2; }
.media-bottom { position: absolute; left: 12px; right: 12px; bottom: 11px; display: flex; align-items: flex-end; justify-content: flex-end; gap: 10px; z-index: 2; }
.card-tags { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.pill {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 10px; border-radius: 0;
    font-size: .66rem; font-weight: 700; letter-spacing: .05em;
    text-transform: uppercase; line-height: 1.5;
    backdrop-filter: blur(8px); border: 1px solid transparent;
    white-space: nowrap;
}
.pill .dot { width: 6px; height: 6px; border-radius: 0; transform: rotate(45deg); background: currentColor; }
.pill-available { background: var(--surface); color: var(--ok); border-color: transparent; }
.pill-reserved  { background: var(--surface); color: var(--warn); border-color: transparent; }
.pill-sold      { background: var(--surface); color: var(--danger); border-color: transparent; }
.pill-hot       { background: var(--neon); color: #fff; border-color: transparent; }
/* .pill-available/-reserved/-sold default to a translucent-white chip meant
   to sit on a photo (see .media-bottom); on a plain white .card-tags row
   that reads as bare colored text with no visible chip at all. Give them a
   real tinted background there, same language as .pill-game's per-game tint. */
.card-tags .pill-available { background: var(--ok-bg); }
.card-tags .pill-reserved  { background: var(--warn-bg); }
.card-tags .pill-sold      { background: var(--danger-bg); }
.pill-count     { background: rgba(20,10,40,.6); color: #fff; border-color: transparent; text-transform: none; letter-spacing: 0; }
.price-tag {
    font-family: var(--font-display); font-size: 1.25rem; font-weight: 700;
    letter-spacing: -0.01em; color: #fff;
    text-shadow: 0 2px 14px rgba(0,0,0,.5); line-height: 1.1;
}
.price-tag small {
    display: block; font-family: var(--font-ui); font-size: .62rem; font-weight: 600;
    letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.7); text-shadow: none;
}
.card-body { padding: 13px 14px 14px; display: flex; flex-direction: column; gap: 9px; flex: 1; }
.card-title {
    font-family: var(--font-display); font-size: .96rem; font-weight: 600; line-height: 1.3; color: var(--neon-deep);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.card-title-mm {
    font-size: .8rem; line-height: 1.4; color: var(--text-2);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.spec-row { display: flex; flex-wrap: wrap; gap: 6px; }
.spec {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 4px 9px; border: 1px solid var(--line);
    border-radius: 0; background: var(--bg-soft);
    font-size: .72rem; font-weight: 600; color: var(--text-2);
    max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.spec i { font-style: normal; opacity: .9; }
.spec b { color: var(--neon-deep); font-weight: 700; }
.card-foot {
    margin-top: auto; padding-top: 10px;
    border-top: 1px solid var(--line-soft);
    display: flex; align-items: center;
    flex-wrap: wrap; gap: 6px 10px;
}
.card-foot:empty { display: none; }
.card.is-sold .card-media img { filter: grayscale(.75) brightness(.85); }
.card.is-sold .card-media .card-media-bg { filter: blur(14px) grayscale(.75) brightness(.45); }

/* Skeletons */
.skeleton { border: 1px solid var(--line); border-radius: 0; background: var(--surface); overflow: hidden; }
.sk-media { aspect-ratio: 16/9; background: var(--surface-3); }
.sk-line { height: 12px; border-radius: 0; margin: 12px 16px; background: var(--surface-3); }
.sk-line.short { width: 45%; }
.sk-media, .sk-line { animation: shimmer 1.4s linear infinite; }
@keyframes shimmer { 0%{opacity:.5} 50%{opacity:1} 100%{opacity:.5} }
/* ---------- 10. Empty state --------------------------------------------- */
.empty { padding: 46px 20px; text-align: center; border: 1px dashed var(--line-strong); clip-path: polygon(0 0, calc(100% - var(--cut-lg)) 0, 100% var(--cut-lg), 100% 100%, var(--cut-lg) 100%, 0 calc(100% - var(--cut-lg))); background: var(--surface); }
.empty .glyph { font-size: 2rem; margin-bottom: 12px; opacity: .7; }
.empty h3 { font-size: 1.05rem; margin-bottom: 6px; }
.empty p { color: var(--text-3); font-size: .88rem; max-width: 42ch; margin-inline: auto; }

/* ---------- 11. Pagination ----------------------------------------------- */
.pagination { display: flex; align-items: center; justify-content: center; gap: 6px; flex-wrap: wrap; margin-top: 26px; }
.pg {
    min-width: 36px; height: 36px; padding: 0 11px;
    display: inline-grid; place-items: center;
    border: 1px solid var(--line);
    clip-path: polygon(0 0, calc(100% - var(--cut-sm)) 0, 100% var(--cut-sm), 100% 100%, var(--cut-sm) 100%, 0 calc(100% - var(--cut-sm)));
    background: var(--surface); color: var(--text-2);
    font-size: .83rem; font-weight: 600;
    transition: all var(--t-fast);
}
.pg:hover:not(:disabled) { color: var(--neon); border-color: var(--neon); transform: translateY(-1px); }
.pg:disabled { opacity: .35; cursor: not-allowed; }
.pg.active { background: var(--grad); border-color: transparent; color: #fff; }
.pg-gap { color: var(--text-3); padding: 0 4px; }

/* ---------- 12. Detail page ---------------------------------------------- */
/* Per-game look: the same palette as the "Pick your game" cards, so a
   listing page feels like that game's own storefront. */
.detail { --pg-a: #7B3FF2; --pg-b: #2A0F5C; --pg-hi: #F0359A; --pg-on: #fff; }
.detail[data-game="efootball"] { --pg-a: #2430D6; --pg-b: #070A5C; --pg-hi: #FFEA00; }
.detail[data-game="mlbb"]      { --pg-a: #8A6630; --pg-b: #1F1608; --pg-hi: #E4C482; }
.detail[data-game="pubg"]      { --pg-a: #4A4A4A; --pg-b: #0D0D0D; --pg-hi: #F2A900; }
.detail[data-game="freefire"]  { --pg-a: #FF9A1F; --pg-b: #D1321E; --pg-hi: #FFE45C; }

.detail { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 18px; align-items: start; padding-block: 16px 0; }
.detail-main > * + *, .detail-side > * + * { margin-top: 14px; }
.detail .panel + .panel { margin-top: 14px; }
.detail .panel h3 { color: var(--cat-ink, var(--neon)); display: flex; align-items: center; gap: 8px; }
.detail .panel h3::before { content: ''; width: 8px; height: 8px; background: var(--pg-hi); outline: 2px solid var(--pg-a); outline-offset: 0; transform: rotate(45deg); flex: none; }

/* Gallery: stage, bar and thumbnail rail are one attached block. */
.gallery { display: flex; flex-direction: column; border: 1px solid var(--line); background: var(--pg-b); box-shadow: var(--sh-1); }
.gallery-stage { position: relative; aspect-ratio: 16 / 9; background: #0b0816; overflow: hidden; }
.gallery-stage img { width: 100%; height: 100%; object-fit: contain; cursor: zoom-in; }
.gallery-stage .fallback { width: 100%; height: 100%; display: grid; place-items: center; font-size: 2.6rem; opacity: .3; }
.gallery-nav {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 36px; height: 44px;
    display: grid; place-items: center;
    background: rgba(10,6,20,.6); border: 0; color: #fff;
    backdrop-filter: blur(8px);
    clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px));
    transition: background var(--t-fast), color var(--t-fast);
}
.gallery-nav:hover { background: var(--pg-hi); color: var(--pg-b); }
.gallery-nav.prev { left: 0; }
.gallery-nav.next { right: 0; }
.gallery-bar {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 7px 12px; color: var(--pg-on);
    background: linear-gradient(90deg, var(--pg-a), var(--pg-b));
    border-block: 2px solid var(--pg-hi);
    font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
}
.gallery-bar-game { display: inline-flex; align-items: center; gap: 8px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gallery-bar-game::before { content: ''; width: 7px; height: 7px; background: var(--pg-hi); transform: rotate(45deg); flex: none; }
.gallery-bar-count { font-family: var(--font-mono); font-variant-numeric: tabular-nums; color: var(--pg-hi); letter-spacing: .04em; }
.thumbs { display: flex; gap: 0; justify-content: stretch; overflow-x: auto; scrollbar-width: none; background: var(--pg-b); }
.thumbs::-webkit-scrollbar { display: none; }
.thumb {
    position: relative; flex: 1 1 0; min-width: 96px; aspect-ratio: 16 / 9;
    border: 0; border-right: 1px solid rgba(0,0,0,.35); padding: 0;
    overflow: hidden; cursor: pointer; opacity: .55; background: #0b0816;
    transition: opacity var(--t-fast);
}
.thumb img { width: 100%; height: 100%; object-fit: cover; }
.thumb:hover { opacity: .85; }
.thumb.active { opacity: 1; }
.thumb.active::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--pg-hi); }

/* Info panel */
.panel { border: 1px solid var(--line); clip-path: polygon(0 0, calc(100% - var(--cut-lg)) 0, 100% var(--cut-lg), 100% 100%, var(--cut-lg) 100%, 0 calc(100% - var(--cut-lg))); background: var(--surface); padding: 18px; }
.panel + .panel { margin-top: 14px; }
.panel h3 { font-size: .76rem; letter-spacing: .12em; text-transform: uppercase; color: var(--neon); font-weight: 700; margin-bottom: 12px; }
.buy-panel { padding: 0; }
.buy-desc { display: flex; flex-direction: column; gap: 10px; margin: 10px 16px 0; padding-top: 10px; border-top: 1px dashed var(--line); }
.buy-desc-block .lang-tag { margin: 0 0 4px; }
.buy-desc .prose { font-size: .88rem; line-height: 1.55; }
.seller-panel .seller-card { align-items: center; }
.buy-panel > .notice { margin: 14px 16px 0 !important; }
.buy-top {
    display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap;
    padding: 9px 16px; background: linear-gradient(90deg, var(--pg-a), var(--pg-b)); border-bottom: 2px solid var(--pg-hi);
}
.buy-tags { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.buy-top .pill { backdrop-filter: none; }
.buy-top .pill.pill-game[data-game] { background: var(--pg-hi); color: var(--pg-b); }
.buy-top .pill-available, .buy-top .pill-reserved, .buy-top .pill-sold { background: rgba(0,0,0,.35); }
.buy-top .pill-available { color: #5EF0A0; }
.buy-top .pill-reserved { color: #FFD166; }
.buy-top .pill-sold { color: #FF8A99; }
.product-code {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 3px 8px; background: rgba(0,0,0,.35); color: rgba(255,255,255,.7);
    font-size: .7rem; font-weight: 700;
}
.product-code .tabular { font-family: var(--font-mono); letter-spacing: .06em; color: var(--pg-hi); }
.buy-panel .detail-title { padding: 14px 16px 0; }
.buy-panel .detail-title-mm { padding: 0 16px; }
.detail-title { font-size: clamp(1.25rem, 2.6vw, 1.7rem); letter-spacing: -0.02em; line-height: 1.2; margin-bottom: 4px; }
.detail-title-mm { font-size: .9rem; line-height: 1.45; color: var(--text-2); }
.price-block { display: flex; align-items: baseline; gap: 8px; padding: 12px 16px; margin-top: 12px; border-top: 1px solid var(--line-soft); background: color-mix(in srgb, var(--cat, var(--neon)) 7%, transparent); }
.price-block .amount { font-family: var(--font-display); font-size: clamp(1.7rem, 4vw, 2.2rem); font-weight: 700; letter-spacing: -0.03em; color: var(--cat-ink, var(--neon-deep)); line-height: 1; }
.price-block .cur { font-size: .74rem; font-weight: 700; color: var(--text-3); letter-spacing: .08em; }
.price-actions { margin-left: auto; display: flex; gap: 6px; align-self: center; }
.icon-action {
    width: 38px; height: 38px; display: grid; place-items: center;
    border: 1px solid var(--line); background: var(--surface); color: var(--text-2); cursor: pointer;
    clip-path: polygon(0 0, calc(100% - 7px) 0, 100% 7px, 100% 100%, 7px 100%, 0 calc(100% - 7px));
    transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.icon-action svg { width: 17px; height: 17px; }
.icon-action:hover { background: var(--pg-a); border-color: var(--pg-a); color: #fff; }.specs { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 9px; }
.spec-card { padding: 11px 13px; border: 1px solid var(--line); border-radius: 0; background: var(--bg-soft); }
.spec-card label { display: block; font-size: .66rem; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); font-weight: 700; margin-bottom: 4px; }
.spec-card .val { font-family: var(--font-display); font-size: 1.08rem; font-weight: 700; letter-spacing: -0.01em; color: var(--neon-deep); }
.players { display: flex; flex-wrap: wrap; gap: 7px; }
.player-tag {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 12px; border: 1px solid var(--neon);
    border-radius: 0; background: var(--neon-faint);
    font-size: .78rem; font-weight: 600; color: var(--neon-deep);
}
.player-tag::before { content: '★'; color: var(--neon); font-size: .72rem; }
.prose { color: var(--text-2); font-size: .91rem; white-space: pre-wrap; }
.prose.mm { line-height: 1.6; }
.lang-tag { display: inline-block; padding: 1px 7px; margin-left: 8px; border: 1px solid var(--line-strong); border-radius: 0; font-family: var(--font-ui); font-size: .58rem; font-weight: 700; letter-spacing: .1em; color: var(--text-3); vertical-align: middle; }

/* Contact channels */
.channels { display: flex; flex-direction: column; gap: 8px; }
.channel {
    display: flex; align-items: center; gap: 12px;
    padding: 11px 13px; border: 1px solid var(--line);
    border-radius: 0; background: var(--bg-soft);
    transition: border-color var(--t-fast), transform var(--t-fast), background var(--t-fast);
}
.channel:hover { border-color: var(--ch, var(--neon)); transform: translateX(3px); background: var(--surface); }
.channel .ico { width: 34px; height: 34px; border-radius: 0; display: grid; place-items: center; background: color-mix(in srgb, var(--ch, var(--neon)) 15%, transparent); color: var(--ch, var(--neon)); flex-shrink: 0; }
.channel .ico svg { width: 18px; height: 18px; }
.channel .meta { min-width: 0; flex: 1; }
.channel .meta b { display: block; font-size: .85rem; font-weight: 600; color: var(--neon-deep); }
.channel .meta span { display: block; font-size: .75rem; color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.channel .go { color: var(--text-3); flex-shrink: 0; transition: color var(--t-fast); }
.channel:hover .go { color: var(--neon); }
.ch-telegram { --ch: #229ED9; }
.ch-facebook { --ch: #1877F2; }
.ch-email    { --ch: var(--danger); }
.ch-phone    { --ch: var(--ok); }
.ch-viber    { --ch: #7360F2; }

/* Lightbox */
.lightbox { position: fixed; inset: 0; z-index: 220; display: none; place-items: center; padding: 4vw; background: rgba(10,6,20,.94); backdrop-filter: blur(8px); animation: fade var(--t) both; }
.lightbox.open { display: grid; }
.lightbox img { max-width: 100%; max-height: 88vh; border-radius: 0; box-shadow: var(--sh-3); transition: transform var(--t); }
/* transform:rotate() is paint-only — it never touches layout, so the box
   the image is laid out into keeps its PRE-rotation width/height. A wide
   landscape image rotated 90° visually swaps to portrait, but its box was
   sized against the normal (max-width:100%, max-height:88vh) constraint
   for a *landscape* fit, so the now-portrait result overflowed the screen
   entirely — exactly what was reported. Fixed by swapping which viewport
   axis each pre-rotation dimension is capped against: the pre-rotation
   width becomes the post-rotation height (cap it to the vh limit), and
   the pre-rotation height becomes the post-rotation width (cap it to the
   lightbox's actual available width, ~92vw after its 4vw padding). */
.lightbox img.rot-90, .lightbox img.rot-270 { max-width: 88vh; max-height: 90vw; }
.lightbox img.rot-90 { transform: rotate(90deg); }
.lightbox img.rot-180 { transform: rotate(180deg); }
.lightbox img.rot-270 { transform: rotate(270deg); }
.lightbox .close, .lightbox .rotate {
    position: absolute; top: 18px;
    width: 40px; height: 40px; border-radius: 0;
    display: grid; place-items: center;
    background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.3);
    color: #fff; font-size: 1.4rem; cursor: pointer;
    transition: background var(--t-fast);
}
.lightbox .close:hover, .lightbox .rotate:hover { background: rgba(255,255,255,.22); }
.lightbox .close { right: 18px; }
.lightbox .rotate { right: 68px; font-size: 1.15rem; }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
/* ---------- 13. Footer --------------------------------------------------- */
/* Sticky footer: on short pages (empty browse results, 404) the footer used to
   stop mid-screen with bare page background below it. Pages with the shared
   footer lay out as a column where <main> takes the spare height. */
body:has(> .site-footer) { display: flex; flex-direction: column; }
body:has(> .site-footer) > main { flex: 1 0 auto; width: 100%; }
.site-footer { position: relative; margin-top: 30px; border-top: 1px solid var(--line); background: var(--surface); }
.site-footer::before { content: ''; position: absolute; left: 0; right: 0; top: -1px; height: 2px; background: var(--grad); }
.footer-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); gap: 30px; padding-block: 34px 26px; }
.footer-about p { color: var(--text-2); font-size: .86rem; line-height: 1.6; max-width: 40ch; margin-top: 12px; }
.footer-grid h4 {
    display: flex; align-items: center; gap: 7px;
    font-size: .68rem; text-transform: uppercase; letter-spacing: .12em;
    color: var(--text-3); margin-bottom: 14px; font-weight: 700;
}
.footer-grid h4::before { content: ''; width: 6px; height: 6px; background: var(--neon); transform: rotate(45deg); flex: none; }
.footer-grid > div:nth-child(3) h4::before { background: var(--pink); }
.footer-grid > div:nth-child(4) h4::before { background: var(--cyan); }
.footer-list { display: flex; flex-direction: column; gap: 9px; align-items: flex-start; }
.footer-list a, .footer-list span { position: relative; color: var(--text-2); font-size: .86rem; transition: color var(--t-fast), transform var(--t-fast); }
.footer-list a:hover { color: var(--neon); transform: translateX(3px); }
.footer-bottom { border-top: 1px solid var(--line); padding-block: 16px; color: var(--text-3); font-size: .78rem; display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; }
.footer-bottom b { color: var(--neon-deep); }

/* ---------- 14. Toast notifications -------------------------------------- */
.toast-stack { position: fixed; bottom: 22px; right: 22px; z-index: 300; display: flex; flex-direction: column-reverse; gap: 10px; max-width: min(380px, calc(100vw - 32px)); }
.toast { display: flex; align-items: flex-start; gap: 10px; padding: 12px 15px; border: 1px solid var(--line); border-left: 3px solid var(--neon); border-radius: 0; background: var(--surface); box-shadow: var(--sh-3); font-size: .86rem; animation: toast-in var(--t-slow) both; }
.toast.success { border-left-color: var(--ok); }
.toast.error   { border-left-color: var(--danger); }
.toast.info    { border-left-color: var(--neon); }
.toast .glyph { flex-shrink: 0; }
@keyframes toast-in { from { opacity: 0; transform: translateX(24px) scale(.96); } to { opacity: 1; transform: none; } }
.toast.leaving { animation: toast-out var(--t) both; }
@keyframes toast-out { to { opacity: 0; transform: translateX(24px); } }
/* ---------- 15. Forms (shared with admin) ------------------------------- */
.field { display: flex; flex-direction: column; gap: 6px; }
.field.full { grid-column: 1 / -1; }
.field label { font-size: .77rem; font-weight: 600; color: var(--text-2); letter-spacing: .01em; display: flex; align-items: center; gap: 6px; }
.field input, .field textarea, .field select {
    width: 100%; padding: 10px 13px;
    border: 1px solid var(--line-strong);
    background: var(--surface); color: var(--text); font-size: .88rem;
    transition: border-color var(--t-fast), box-shadow var(--t-fast), background var(--t-fast);
}
.field textarea { resize: vertical; min-height: 84px; line-height: 1.55; }
.field input::placeholder, .field textarea::placeholder { color: var(--text-3); }
.field input.mm, .field textarea.mm { line-height: 1.4; }
.field input:focus, .field textarea:focus, .field select:focus {
    outline: none; border-color: var(--neon); background: var(--surface);
    box-shadow: 0 0 0 3px var(--neon-soft);
}
.field .csel { display: flex; width: 100%; }
.field .csel-trigger {
    padding: 10px 13px; border: 1px solid var(--line-strong);
    background: var(--surface); font-size: .88rem;
}
.field .csel.is-open .csel-trigger,
.field .csel-trigger:focus-visible {
    border-color: var(--neon); box-shadow: 0 0 0 3px var(--neon-soft);
}
.field .hint { font-size: .73rem; color: var(--text-3); line-height: 1.45; }
.field input[type="number"] { font-variant-numeric: tabular-nums; }
.input-prefix { position: relative; display: flex; align-items: center; }
.input-prefix span { position: absolute; left: 13px; font-size: .86rem; color: var(--neon-deep); pointer-events: none; font-weight: 600; }
.input-prefix input { padding-left: 40px; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.switch { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; user-select: none; }
.switch input { display: none; }
.switch .track { width: 40px; height: 23px; border-radius: 99px; background: var(--line-strong); border: 1px solid var(--line-strong); position: relative; transition: background var(--t-fast); }
.switch .track::after { content: ''; position: absolute; top: 2px; left: 2px; width: 17px; height: 17px; border-radius: 50%; background: #fff; transition: transform var(--t-fast), background var(--t-fast); }
.switch input:checked + .track { background: var(--neon); border-color: var(--neon); }
.switch input:checked + .track::after { transform: translateX(17px); }

/* ---------- Avatar upload (seller portal profile) ------------------------ */
.avatar-upload { display: flex; align-items: center; gap: 14px; }
.avatar-upload .preview {
    width: 68px; height: 68px; border-radius: 0; flex-shrink: 0;
    background: var(--grad); color: #fff; display: grid; place-items: center;
    font-family: var(--font-display); font-weight: 700; font-size: 1.5rem;
    overflow: hidden; border: 1px solid var(--line);
}
.avatar-upload .preview img { width: 100%; height: 100%; object-fit: cover; }
.avatar-upload .acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; }
.avatar-upload .acts .hint { flex-basis: 100%; }
.avatar-upload input[type="file"] { display: none; }
.avatar-upload .hint { font-size: .73rem; color: var(--text-3); }

/* ---------- 16. Utilities ----------------------------------------------- */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.hidden { display: none !important; }
.stack { display: flex; flex-direction: column; }
.row { display: flex; align-items: center; }
.gap-8 { gap: 8px; } .gap-12 { gap: 12px; } .gap-16 { gap: 16px; }
.mt-16 { margin-top: 16px; } .mt-24 { margin-top: 24px; }
.tabular { font-variant-numeric: tabular-nums; }
.fade-up { animation: fadeUp var(--t-slow) both; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* ---------- 16b. Mobile tab bar ------------------------------------------ */
/* Floating arcade dock: inset from the screen edges with cut corners, a
   brand-gradient rim and a soft violet glow. Each tab owns a colour — the
   icon is tinted at rest; the active tab lights a full-height capsule in
   its colour (tinted fill, glowing top bar, coloured label) so the current
   section reads instantly. --tabbar-h is the space reserved for it
   (dock height + gap below). */
:root { --tabbar-h: 70px; --dock-h: 60px; }
.mtabbar {
    display: none;
    position: fixed; left: 10px; right: 10px; z-index: 200;
    bottom: calc(8px + env(safe-area-inset-bottom, 0px));
    height: var(--dock-h); padding: 5px;
    gap: 4px;
    background:
        linear-gradient(var(--arcade-solid), var(--arcade-solid)) padding-box,
        var(--grad) border-box;
    border: 1.5px solid transparent;
    clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px));
    box-shadow: 0 14px 30px -10px rgba(20,8,48,.7);
}
.mtabbar a {
    --tab: var(--neon-bright);
    position: relative; min-width: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    height: 100%; padding: 0 2px;
    color: var(--arcade-dim); font-size: .6rem; font-weight: 600; letter-spacing: .01em;
    clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px));
    transition: color var(--t-fast), background var(--t-fast);
}
.mtabbar a span:last-child { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mtabbar a .ico { display: grid; place-items: center; width: 24px; height: 22px; margin: 0 auto; color: var(--tab); opacity: .85; transition: transform var(--t-fast), filter var(--t-fast), opacity var(--t-fast); }
.mtabbar a .ico svg { width: 19px; height: 19px; }
.mtabbar a:hover { color: #fff; background: color-mix(in srgb, var(--tab) 12%, transparent); }
.mtabbar a:active .ico { transform: scale(.9); }
.mtabbar a.active {
    color: #fff;
    background:
        radial-gradient(90% 80% at 50% 0%, color-mix(in srgb, var(--tab) 45%, transparent), transparent 75%),
        color-mix(in srgb, var(--tab) 18%, transparent);
}
.mtabbar a.active .ico { opacity: 1; transform: translateY(-1px); filter: drop-shadow(0 0 6px var(--tab)); }
.mtabbar a.active::before {
    content: ''; position: absolute; top: 0; left: 50%; width: 26px; height: 3px;
    transform: translateX(-50%);
    background: var(--tab); box-shadow: 0 0 12px 1px var(--tab);
}
.mtabbar a:nth-child(1) { --tab: #9A6BFF; }
.mtabbar a:nth-child(2) { --tab: #FF4FA8; }
.mtabbar a:nth-child(3) { --tab: #19CAD9; }
.mtabbar a:nth-child(4) { --tab: #FFB22E; }
body.lang-mm .mtabbar a [data-i18n] { font-size: .56rem; line-height: 1.3; }

/* ---------- 16c. Loading screen (see /js/theme.js) ---------------------- */
.ex-loader {
    position: fixed; inset: 0; z-index: 1000;
    display: grid; place-content: center; justify-items: center; gap: 18px;
    background: color-mix(in srgb, var(--bg) 88%, transparent);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    opacity: 0; transition: opacity .3s ease;
}
.ex-loader.is-in { opacity: 1; }
.ex-loader.is-out { opacity: 0; }
.ex-loader-core { position: relative; width: 120px; height: 120px; display: grid; place-items: center; }
.ex-loader-rings { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ex-ring-track { fill: none; stroke: rgba(123,63,242,.16); stroke-width: 4; }
.ex-ring-arc {
    fill: none; stroke: url(#exLoaderGrad); stroke-width: 4; stroke-linecap: round;
    stroke-dasharray: 210 330; transform-origin: 60px 60px;
    animation: exSpin 1.1s linear infinite;
    filter: drop-shadow(0 0 6px rgba(199,125,255,.75));
}
.ex-ring-dash {
    fill: none; stroke: var(--cyan); stroke-width: 2; stroke-dasharray: 4 10; opacity: .6;
    transform-origin: 60px 60px; animation: exSpin 3.2s linear infinite reverse;
}
.ex-loader-mark {
    position: relative; width: 54px; height: 54px; padding: 12px;
    display: grid; place-items: center; color: #fff;
    background: linear-gradient(145deg, #7B3FF2, #C43BE0);
    clip-path: polygon(0 0, calc(100% - 11px) 0, 100% 11px, 100% 100%, 11px 100%, 0 calc(100% - 11px));
    animation: exPulse 1.6s ease-in-out infinite;
}
.ex-loader-mark svg { width: 100%; height: 100%; display: block; }
.ex-loader-text { font-family: var(--font-display); font-size: .82rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--neon); }
@keyframes exSpin { to { transform: rotate(360deg); } }
@keyframes exPulse { 0%, 100% { transform: scale(1); box-shadow: none; } 50% { transform: scale(1.06); } }
@media (prefers-reduced-motion: reduce) {
    .ex-ring-arc, .ex-ring-dash { animation-duration: 6s; }
    .ex-loader-mark { animation: none; }
}
/* ---------- 17. Responsive ----------------------------------------------- */
@media (max-width: 980px) {
    .hero-inner { grid-template-columns: 1fr; }
    /* The left column only holds the desktop-only "How buying works" strip,
       so below 981px it is empty and would just add a grid gap. */
    .hero-copy { display: none; }
    .hero-visual { max-width: 460px; min-height: 0; }
    .detail { grid-template-columns: 1fr; gap: 14px; padding-top: 10px; }
    /* Phones: gallery, then price/contact straight away, then the details. */
    .detail { display: flex; flex-direction: column; align-items: stretch; padding-bottom: 0; }
    .detail-main, .detail-side { display: contents; }
    .detail-main > *, .detail-side > *, .detail .panel + .panel { margin-top: 0 !important; order: 3; }
    .detail .gallery { order: 1; margin-inline: calc(-1 * var(--detail-gutter, 14px)); border-inline: 0; }
    .detail .detail-side > .panel { order: 2; }
    .buy-panel { position: static; }
    .footer-grid { grid-template-columns: 1fr 1fr; }
    /* The about blurb runs much taller than a link column once space is
       tight — pairing it with one column locks the whole row to its height
       and strands the other links with a dead gap below them. Give it its
       own full-width row so the link columns align on their own rhythm. */
    .footer-about { grid-column: 1 / -1; }
}
@media (max-width: 720px) {
    :root { --nav-h: 58px; }
    .shell { padding-inline: 10px; }
    /* The cards carry each game's name already — the heading above them is
       just another line of text on a small screen. */
    .cat-title { display: none; }
    /* Phones: full-bleed and attached to the header, and a shorter 2.2:1 box
       (see the banner geometry note in section 7). */
    .hero-media.shell { margin-top: 0; padding-inline: 0; }
    .hero-banner { aspect-ratio: 2.2 / 1; clip-path: none; }
    .hero-inner { padding-top: 12px; gap: 12px; }
    /* The hero's own bottom padding plus the next section's top padding read
       as a dead strip under the sellers panel. */
    .hero { padding-bottom: 0; }
    .hero + .section-sm { padding-top: 14px; }
    .hero-dots { height: 22px; }
    .hero-dot { height: 18px; }
    .section { padding-block: 28px; }
    .section-sm { padding-block: 18px; }
    .nav-links { display: none; }
    .brand-name span { display: none; }
    .lang-trigger { height: 32px; padding: 0 9px 0 8px; gap: 5px; }
    .theme-toggle { width: 32px; height: 32px; }
    .theme-toggle svg { width: 15px; height: 15px; }
    .nav-tools { gap: 7px; }
    .lang-trigger .ico svg { width: 13px; height: 13px; }
    .lang-trigger .chev svg { width: 10px; height: 10px; }
    .lang-trigger .lang-cur { min-width: 20px; font-size: .72rem; }
    .lang-trigger .lang-full { display: none; }
    .lang-trigger .lang-abbr { display: inline; }
    .lang-trigger.is-mm .lang-abbr { font-family: var(--font-mm); }
    .grid { grid-template-columns: repeat(3, 1fr); gap: 8px; }
    .page-head .actions { flex-wrap: nowrap; gap: 8px; }
    .page-head .actions .btn { flex: 1 1 0; min-width: 0; padding: 10px 8px; font-size: .76rem; white-space: normal; line-height: 1.25; text-align: center; }
    .empty { padding: 26px 16px; }
    .empty .glyph { font-size: 1.5rem; margin-bottom: 8px; }
    .empty h3 { font-size: .92rem; }
    .empty p { font-size: .8rem; }
    .toolbar { top: var(--nav-h); }
    .toolbar-inner { padding: 9px; gap: 8px; }
    .search { flex: 1 1 100%; }
    .price-range, .select-wrap { flex: 1 1 calc(50% - 4px); min-width: 0; }
    .price-range input { width: auto; flex: 1 1 0; min-width: 0; }
    .select-wrap select { width: 100%; }
    .select-wrap .csel { display: flex; width: 100%; }
    .result-count { margin-left: 0; width: 100%; }
    .chips { width: 100%; overflow-x: auto; flex-wrap: nowrap; padding-bottom: 2px; }
    .chips::-webkit-scrollbar { display: none; }
    /* Four equal cells that fill the row — no sideways scrolling. overflow
       must be visible here or the absolutely positioned menu gets clipped. */
    .chips.game-filter {
        /* Third cell is wider: it holds "Mobile Legends", by far the longest
           of the always-visible labels. */
        display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.35fr) minmax(0, 1fr); gap: 6px;
        overflow: visible; padding-bottom: 0;
    }
    .game-filter .chip {
        min-width: 0; padding: 10px 4px 12px; font-size: .7rem; text-align: center;
        overflow: hidden; text-overflow: ellipsis;
    }
    .game-filter .chip-overflow { display: none; }
    .game-filter .chip-more { display: inline-flex; align-items: center; justify-content: center; gap: 2px; }
    .game-filter .chip-more .chev svg { width: 11px; height: 11px; }
    /* "All games" / "More" are the only translated labels here (game names
       stay Latin), and they're inserted by JS without data-i18n, so the
       generic Myanmar size rule never reaches them. */
    body.lang-mm .game-filter .chip[data-tone="all"],
    body.lang-mm .game-filter .chip-more:not(.active) { font-family: var(--font-mm); font-size: .64rem; }
    .game-filter .chip-more .chip-more-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
    .game-menu:not([hidden]) { display: block; }
    /* Minimal dark "gaming" footer on mobile — brand + copyright row only.
       The link columns (Browse/Sellers/Blog/Sell/Advertise/Seller login)
       are dropped entirely rather than collapsed into a wrapped row: on a
       phone that row was 6 links deep and read as clutter, not navigation
       anyone used (the mobile tab bar already covers Browse/Sellers, and
       the header drawer covers the rest). */
    .site-footer {
        margin-top: 16px;
        background: var(--footer-bg);
        border-top: 1px solid var(--footer-line);
    }
    .footer-grid { grid-template-columns: 1fr; gap: 14px; padding-block: 22px 14px; }
    .footer-about .brand-name b { color: var(--footer-ink); }
    .footer-about .brand-div { background: var(--footer-div); }
    .footer-about p { display: none; }
    .footer-grid > div:not(.footer-about) { display: none; }
    /* Copyright left, tagline right — same one-row layout as desktop
       (the base .footer-bottom rule), just not forced into a stacked
       column here too. */
    .footer-bottom { border-top-color: var(--footer-line); color: var(--footer-dim); }
    .footer-bottom span { color: var(--footer-dim); }
    .footer-bottom b { color: var(--footer-ink); }
    .toast-stack { left: 16px; right: 16px; bottom: calc(var(--tabbar-h) + 10px + env(safe-area-inset-bottom, 0px)); max-width: none; }
    .top-sellers-head { padding: 9px 12px; }
    .ts-item { gap: 8px; padding: 10px 12px; }
    .ts-av { width: 30px; height: 30px; }
    .ts-name { font-size: .8rem; }
    /* At the compact 3-across width, the text stack below (tags + title +
       seller row) ran taller than the 16:9 photo above it, so the image read
       as an afterthought rather than the focal point of the card. */
    .card-media { aspect-ratio: 1 / 1; }
    .card-body { padding: 8px 8px 9px; gap: 6px; }
    .card-title { font-size: .74rem; }
    .card-title-mm { font-size: .74rem; }
    .price-tag { font-size: .78rem; }
    .media-bottom { bottom: 8px; left: 8px; right: 8px; }
    .media-top { left: 8px; right: 8px; top: 8px; }
    .pill { font-size: .56rem; padding: 3px 7px; }
    .card-tags { gap: 3px; flex-wrap: nowrap; }
    /* At 3-across mobile widths, the game pill ("eFootball") and the status
       pill ("AVAILABLE") together no longer fit the card body at the base
       .pill size — the status dot, letter-spacing and uppercase transform ate
       space they didn't have, so they wrapped onto two lines (or truncated)
       instead of sitting side by side in a row as designed. */
    .card-tags .pill { font-size: .5rem; padding: 2px 5px; gap: 0; letter-spacing: 0; text-transform: none; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
    .card-tags .pill .dot { display: none; }
    .card-seller { font-size: .66rem; flex: 1 1 auto; }
    .card-foot { padding-top: 7px; }

    .mtabbar { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
    body { padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px)); }
    /* The body's bottom padding reserves room for the fixed tab bar; pull the
       footer down into it so that strip is footer-coloured, not a band of
       page background between the footer and the tab bar. */
    .site-footer {
        margin-bottom: calc(-1 * var(--tabbar-h) - env(safe-area-inset-bottom, 0px));
        padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px));
    }
}
@media (max-width: 420px) {
    .footer-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}
@media print {
    body::before, .site-header, .toolbar, .site-footer, .toast-stack { display: none !important; }
    body { background: #fff; color: #000; }
}