/* ==========================================================================
   components.css — marketplace-specific components.
   Arcade palette · light + dark themes (tokens in style.css).
   Loaded after style.css (which owns the tokens, type scale and primitives).

    1. Header extras — mobile nav
    2. Game pills, avatars, verification
    3. Category rail
    4. Advertising slots
    5. Seller cards & storefront header
    6. Blog
    7. Plans, steps, notices
    8. Share row
    9. Seller portal
   10. Responsive
   ========================================================================== */

/* ---------- 1. Header extras -------------------------------------------- */
.nav-burger { display: none; }
.mobile-nav {
    border-top: 1px solid var(--line);
    background: var(--header-bg-solid);
    backdrop-filter: blur(16px);
}
.mobile-nav .shell { display: flex; flex-direction: column; padding-block: 8px 14px; }
.mobile-nav a {
    padding: 12px 4px;
    font-size: .93rem;
    font-weight: 600;
    color: var(--text-2);
    border-bottom: 1px solid var(--line);
}
.mobile-nav a:last-child { border-bottom: 0; color: var(--neon); }

/* ---------- 2. Game pills, avatars, verification, glyphs ---------------- */
.pill-game {
    background: var(--neon-faint);
    border-color: transparent;
    color: var(--neon-deep);
    text-transform: none;
    letter-spacing: .01em;
    font-weight: 700;
}
.pill-game[data-game="efootball"] { color: var(--g-efootball-ink); background: color-mix(in srgb, var(--g-efootball) 16%, transparent); }
.pill-game[data-game="mlbb"]      { color: var(--g-mlbb-ink); background: color-mix(in srgb, var(--g-mlbb) 16%, transparent); }
.pill-game[data-game="pubg"]      { color: var(--g-pubg-ink); background: color-mix(in srgb, var(--g-pubg) 18%, transparent); }
.pill-game[data-game="freefire"]  { color: var(--g-freefire-ink); background: color-mix(in srgb, var(--g-freefire) 16%, transparent); }

.avatar {
    width: 26px; height: 26px;
    clip-path: polygon(0 0, calc(100% - 6px) 0, 100% 6px, 100% 100%, 6px 100%, 0 calc(100% - 6px));
    display: inline-grid; place-items: center;
    background: var(--grad);
    color: #fff;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: .72rem;
    flex-shrink: 0;
    overflow: hidden;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar.lg {
    width: 48px; height: 48px; font-size: 1.1rem;
    clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
}

.verified { color: var(--neon); display: inline-flex; vertical-align: middle; margin-left: 4px; }

.card-seller {
    display: inline-flex; align-items: center; gap: 6px;
    min-width: 0;
    font-size: .78rem;
    font-weight: 600;
    color: var(--text-2);
    transition: color var(--t-fast);
}
.card-seller:hover { color: var(--neon); }
.card-seller .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 42px; flex: 1 1 auto; }
.card-seller .avatar { width: 18px; height: 18px; font-size: .58rem; }
.card-seller .avatar, .card-seller .verified { flex-shrink: 0; }

/* game glyph badges — custom marks (not trademarked assets), one class
   per game so real licensed logo art can drop in as a background-image
   override later without touching markup. */
.game-glyph {
    display: grid; place-items: center; color: #fff; flex-shrink: 0;
    clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 9px, 100% 100%, 9px 100%, 0 calc(100% - 9px));
}
.game-glyph svg { width: 58%; height: 58%; }
.game-glyph[data-game="efootball"] { background: linear-gradient(140deg, var(--g-efootball), #08756D); }
.game-glyph[data-game="mlbb"]      { background: linear-gradient(140deg, var(--g-mlbb), #5138C4); }
.game-glyph[data-game="pubg"]      { background: linear-gradient(140deg, var(--g-pubg), #96600A); }
.game-glyph[data-game="freefire"]  { background: linear-gradient(140deg, var(--g-freefire), #96222E); }

/* Game colour lookup — anything carrying data-game gets --cat, so markup never
   needs an inline colour (and the colour follows the theme tokens). */
[data-game="efootball"] { --cat: var(--g-efootball); --cat-ink: var(--g-efootball-ink); }
[data-game="mlbb"]      { --cat: var(--g-mlbb);      --cat-ink: var(--g-mlbb-ink); }
[data-game="pubg"]      { --cat: var(--g-pubg);      --cat-ink: var(--g-pubg-ink); }
[data-game="freefire"]  { --cat: var(--g-freefire);  --cat-ink: var(--g-freefire-ink); }
.ts-av { background: var(--cat, var(--neon)); }
.ts-av:not([data-game]), .ts-av[data-game=""] { background: var(--grad); }

/* ---------- 3. Category rail --------------------------------------------
   Compact horizontal tiles: logo plate, name + count beside it, arrow on
   the right. Each card's colours come from its game's own logo (eFootball
   navy + yellow, MLBB bronze + gold, PUBG black + amber, Free Fire orange),
   and the logo sits uncropped on a plate matching its artwork. */
.cat-rail { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.cat-card {
    --card-a: var(--neon); --card-b: var(--arcade-solid); --plate: #fff; --arrow: #fff; --arrow-ink: #12072A;
    position: relative; isolation: isolate;
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px;
    padding: 12px; min-width: 0; text-align: left; cursor: pointer;
    border: 0; 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)));
    background:
        radial-gradient(120% 120% at 100% 0%, rgba(255,255,255,.16), transparent 55%),
        linear-gradient(135deg, var(--card-a) 0%, var(--card-b) 100%);
    overflow: hidden;
    transition: transform var(--t), box-shadow var(--t), filter var(--t);
    box-shadow: 0 10px 22px -14px var(--card-a);
}
.cat-card[data-game="efootball"] { --card-a: #2430D6; --card-b: #070A5C; --plate: #000096; --arrow: #FFEA00; }
.cat-card[data-game="mlbb"]      { --card-a: #8A6630; --card-b: #1F1608; --plate: #150F06; --arrow: #E4C482; }
.cat-card[data-game="pubg"]      { --card-a: #4A4A4A; --card-b: #0D0D0D; --plate: #000;    --arrow: #F2A900; }
.cat-card[data-game="freefire"]  { --card-a: #FF9A1F; --card-b: #D1321E; --plate: #fff;    --arrow: #FFE45C; }
/* Diagonal speed stripes, fading out toward the text. */
.cat-card::before {
    content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: repeating-linear-gradient(-55deg, rgba(255,255,255,.08) 0 2px, transparent 2px 14px);
    -webkit-mask-image: linear-gradient(90deg, transparent 35%, #000 100%);
            mask-image: linear-gradient(90deg, transparent 35%, #000 100%);
}
.cat-card:hover { transform: translateY(-2px); filter: brightness(1.08); box-shadow: 0 14px 28px -14px var(--card-a); }
.cat-card.active { transform: translateY(-2px); box-shadow: inset 0 0 0 2px var(--arrow), 0 14px 28px -12px var(--card-a); }
.cat-card:focus-visible { outline: 3px solid var(--arrow); outline-offset: 3px; }
.cat-glyph {
    width: 52px; height: 52px; padding: 4px;
    display: grid; place-items: center; overflow: hidden;
    background: var(--plate); color: var(--arrow);
    border-radius: 0;
    box-shadow: 0 0 0 1px rgba(255,255,255,.28), 0 6px 14px -6px rgba(0,0,0,.5);
}
.cat-glyph svg { width: 24px; height: 24px; }
.cat-glyph img { width: 100%; height: 100%; object-fit: contain; display: block; }
.cat-meta { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.cat-meta b {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    font-family: var(--font-display); font-size: .98rem; font-weight: 700; color: #fff; line-height: 1.15;
    text-shadow: 0 1px 8px rgba(0,0,0,.3);
}
.cat-meta span { font-size: .74rem; font-weight: 600; color: rgba(255,255,255,.8); white-space: nowrap; }
body.lang-mm .cat-meta span { font-family: var(--font-mm); font-size: .68rem; }
.cat-go {
    display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%;
    background: var(--arrow); color: var(--arrow-ink);
    box-shadow: 0 0 14px -3px var(--arrow);
    transition: transform var(--t-fast);
}
.cat-go svg { width: 14px; height: 14px; }
.cat-card:hover .cat-go, .cat-card.active .cat-go { transform: translateX(2px); }
/* ---------- 4. Advertising slots ----------------------------------------
   Ads use the site's own arcade language — dark violet panel, cut corners,
   grid texture, brand-gradient accents — so a slot reads as part of the
   marketplace. The "Advertisement" flag keeps it identifiable as promo. */
.ad {
    --ad-accent: var(--pink);
    --ad-accent-bright: var(--neon-bright);
    position: relative; display: block;
    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;
    isolation: isolate;
}
.ad img { width: 100%; height: 100%; object-fit: cover; }
.ad-wide { aspect-ratio: 8 / 1; min-height: 64px; }
.ad-card { aspect-ratio: 16 / 9; }
.ad-portrait { aspect-ratio: 4 / 3; }
/* Empty slots only need to fit their copy — a 4:3 box left a big dead area. */
.ad-portrait.is-empty, .ad-card.is-empty { aspect-ratio: auto; }
.ad-portrait .ad-empty, .ad-card .ad-empty { padding: 20px 18px; gap: 12px; }
.ad.is-filled { transition: transform var(--t), box-shadow var(--t); }
a.ad.is-filled:hover { transform: translateY(-3px); box-shadow: 0 0 0 1px var(--neon), 0 12px 28px -12px var(--neon-glow); }
.ad .ad-copy {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    padding: 12px 14px;
    background: linear-gradient(0deg, rgba(20,10,40,.85), transparent);
}
.ad .ad-copy b { display: block; font-family: var(--font-display); font-size: .96rem; color: #fff; }
.ad .ad-copy span { font-size: .8rem; color: rgba(255,255,255,.85); }
.ad-flag {
    position: absolute; top: 8px; right: 9px; z-index: 2;
    padding: 2px 7px; border-radius: 0;
    background: rgba(20,10,40,.5); color: #fff;
    font-size: .56rem; font-weight: 700;
    letter-spacing: .12em; text-transform: uppercase;
    backdrop-filter: blur(6px);
}
.ad.is-empty {
    border: 1px solid var(--arcade-line);
    background:
        radial-gradient(90% 140% at 100% 0%, rgba(240,53,154,.28), transparent 55%),
        radial-gradient(70% 120% at 0% 100%, rgba(0,184,200,.16), transparent 60%),
        var(--arcade);
    animation: ad-pulse 3.6s ease-in-out infinite;
}
/* Gradient rule along the top edge, matching the header/footer. */
.ad.is-empty::after {
    content: ''; position: absolute; left: 0; right: 0; top: 0; height: 2px;
    background: var(--grad); pointer-events: none;
}
@keyframes ad-pulse {
    0%, 100% { box-shadow: 0 0 0 1px rgba(165,123,255,.18) inset, 0 0 22px -10px var(--neon); }
    50%      { box-shadow: 0 0 0 1px rgba(240,53,154,.4) inset, 0 0 34px -6px var(--pink); }
}
@media (prefers-reduced-motion: reduce) { .ad.is-empty { animation: none; } }
.ad.is-empty::before {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background-image:
        repeating-linear-gradient(0deg, rgba(255,255,255,.035) 0 1px, transparent 1px 24px),
        repeating-linear-gradient(90deg, rgba(255,255,255,.035) 0 1px, transparent 1px 24px);
}
.ad-empty {
    position: relative; z-index: 1; height: 100%;
    display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: center;
    gap: 8px 16px; padding: 12px 18px; text-align: left;
}
.ad-empty-copy { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1 1 auto; }
.ad-empty b { font-family: var(--font-display); font-size: .96rem; color: #fff; }
.ad-empty span { font-size: .78rem; color: var(--arcade-dim); max-width: 46ch; }
.ad-empty .btn { margin-top: 0; flex-shrink: 0; }
.ad-empty .btn svg { width: 14px; height: 14px; }
.ad-empty .btn-primary { box-shadow: 0 0 18px -6px var(--pink); }.ad-card .ad-empty, .ad-portrait .ad-empty { flex-direction: column; text-align: center; }
.ad-card .ad-empty-copy, .ad-portrait .ad-empty-copy { align-items: center; text-align: center; }
.ad.is-empty .ad-flag { background: var(--grad); color: #fff; }
/* In the empty "advertise here" state the badge sits in flow as an eyebrow
   above the title. Absolutely positioned in the corner, it overlapped the
   title whenever the copy was centered (card/portrait slots) or the banner
   was narrow enough for the title to reach the right edge. */
.ad-flag-inline { position: static; align-self: flex-start; margin-bottom: 5px; backdrop-filter: none; }
.ad-card .ad-flag-inline, .ad-portrait .ad-flag-inline { align-self: center; }

/* ---------- 5. Seller cards & storefront -------------------------------- */
.seller-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
/* Seller cards wear the same theme as the seller's profile cover: a vivid
   gradient in the colour picked from their avatar (UI.paintSellerCards sets
   --seller-c), brand gradient until then / without a photo, speed stripes. */
.seller-card {
    position: relative; isolation: isolate; overflow: hidden;
    display: flex; align-items: center; gap: 13px;
    padding: 14px; 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)));
    background: var(--grad);
    box-shadow: 0 10px 22px -14px var(--neon-glow);
    transition: transform var(--t-fast), box-shadow var(--t), filter var(--t);
}
.seller-card.has-seller-colour {
    background: linear-gradient(120deg, var(--seller-c) 0%, color-mix(in srgb, var(--seller-c) 55%, #12072A) 100%);
    box-shadow: 0 10px 22px -14px var(--seller-c);
}
.seller-card::before {
    content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background:
        radial-gradient(60% 140% at 100% 0%, rgba(255,255,255,.22), transparent 60%),
        repeating-linear-gradient(-55deg, rgba(255,255,255,.1) 0 2px, transparent 2px 16px);
    -webkit-mask-image: linear-gradient(90deg, transparent 30%, #000 100%);
            mask-image: linear-gradient(90deg, transparent 30%, #000 100%);
}
.seller-card:hover { color: #fff; transform: translateY(-3px); filter: brightness(1.06); }
.seller-card .avatar { background: rgba(255,255,255,.2); color: #fff; }
/* Photo avatars get a white frame so a photo in the card's own colour still reads. */
.seller-card .avatar:has(img) { padding: 3px; background: rgba(255,255,255,.92); }
.seller-card .avatar img { clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px)); }
.seller-card .verified { color: #fff; }
.seller-card .dim { color: rgba(255,255,255,.8); }
.seller-card .spec { background: rgba(255,255,255,.18); border-color: transparent; color: #fff; }
.seller-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.seller-meta b {
    font-family: var(--font-display); font-size: .96rem; font-weight: 600; color: #fff;
    display: flex; align-items: center; gap: 4px; text-shadow: 0 1px 8px rgba(0,0,0,.25);
}
.seller-meta > span { font-size: .75rem; }
.seller-count { text-align: right; flex-shrink: 0; }
.seller-count b {
    display: block; font-family: var(--font-display); font-size: 1.3rem;
    color: #fff;
}
.seller-count span { font-size: .66rem; letter-spacing: .06em; text-transform: uppercase; color: rgba(255,255,255,.8); }
/* Seller profile (/store/<username>). One card: a gradient "cover" with a
   bar per game the seller stocks, an avatar that overlaps it, then name,
   bio, three stat tiles, game tags and big tappable contact buttons. */
/* No boxed card: the cover is full-bleed directly under the header at every
   width, and the profile content flows on the page inside .shell. */
.profile { position: relative; margin-bottom: 18px; }
.profile-cover {
    position: relative; height: 170px; overflow: hidden;
    background:
        radial-gradient(60% 120% at 85% 0%, rgba(255,255,255,.25), transparent 60%),
        var(--grad);
}
.profile-cover::before {
    content: ''; position: absolute; inset: 0;
    background: repeating-linear-gradient(-55deg, rgba(255,255,255,.12) 0 2px, transparent 2px 16px);
    -webkit-mask-image: linear-gradient(90deg, transparent 25%, #000 100%);
            mask-image: linear-gradient(90deg, transparent 25%, #000 100%);
}
/* The avatar is what the cover colour was sampled from, so a cover in that
   same tone swallows the photo. Keep the hue, but push the cover well
   darker than anything in the avatar and ring the avatar in page colour. */
.profile-cover.has-photo-colour {
    background:
        radial-gradient(60% 120% at 85% 0%, rgba(255,255,255,.16), transparent 60%),
        linear-gradient(120deg, color-mix(in srgb, var(--cover-a) 62%, #0E0524) 0%, color-mix(in srgb, var(--cover-a) 26%, #0B0420) 100%);
}
.profile-cover-bars { position: absolute; right: max(22px, calc((100% - var(--shell)) / 2 + 22px)); bottom: 16px; display: flex; gap: 5px; }
.profile-cover-bars i { width: 26px; height: 6px; background: var(--cat); box-shadow: 0 0 10px var(--cat); transform: skewX(-30deg); }
.profile-body { position: relative; padding-block: 0; }
.profile-top { display: flex; align-items: flex-start; gap: 16px; margin-top: -40px; }
.profile-av {
    flex: none; width: 92px; height: 92px; padding: 5px; background: var(--bg);
    filter: drop-shadow(0 6px 18px rgba(12,4,32,.35));
    clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 18px 100%, 0 calc(100% - 18px));
}
.profile-av-inner {
    display: grid; place-items: center; width: 100%; height: 100%; overflow: hidden;
    background: var(--grad); color: #fff;
    font-family: var(--font-display); font-weight: 700; font-size: 2.2rem;
    clip-path: polygon(0 0, calc(100% - 15px) 0, 100% 15px, 100% 100%, 15px 100%, 0 calc(100% - 15px));
}
.profile-av-inner img { width: 100%; height: 100%; object-fit: cover; }
.profile-id { flex: 1 1 auto; min-width: 0; margin-top: 50px; }
.profile-id h1 {
    /* Name and badge on one line; the badge never drops under the name. */
    display: flex; align-items: center; gap: 7px; flex-wrap: nowrap; min-width: 0;
    font-size: clamp(1.3rem, 3.4vw, 1.75rem); line-height: 1.15; color: var(--ink);
    overflow-wrap: anywhere;
}
.profile-id h1 .verified { flex: none; margin-left: 0; }
.profile-id h1 .verified svg { width: 20px; height: 20px; }
.profile-handle { display: block; margin-top: 3px; font-size: .82rem; color: var(--text-3); }
.profile-verified { color: var(--neon); font-weight: 600; }
.profile-share {
    flex: none; display: grid; place-items: center; width: 40px; height: 40px; margin-top: 50px;
    border: 1px solid var(--line-strong); background: var(--surface); color: var(--neon); cursor: pointer;
    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: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.profile-share svg { width: 17px; height: 17px; }
.profile-share:hover { background: var(--neon); border-color: var(--neon); color: #fff; }
.profile-bio {
    position: relative; margin-top: 16px; padding: 15px 18px 16px; overflow: hidden;
    border: 1px solid var(--arcade-line);
    background:
        radial-gradient(90% 140% at 100% 0%, rgba(240,53,154,.2), transparent 55%),
        radial-gradient(70% 120% at 0% 100%, rgba(0,184,200,.14), transparent 60%),
        var(--arcade);
    box-shadow: 0 0 0 1px rgba(165,123,255,.16) inset, 0 0 26px -12px var(--neon);
    clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px));
}
.profile-bio::before {
    content: ''; position: absolute; left: 0; right: 0; top: 0; height: 2px;
    background: var(--grad); pointer-events: none;
}
.profile-bio::after {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background-image:
        repeating-linear-gradient(0deg, rgba(255,255,255,.03) 0 1px, transparent 1px 24px),
        repeating-linear-gradient(90deg, rgba(255,255,255,.03) 0 1px, transparent 1px 24px);
}
.profile-bio p { position: relative; z-index: 1; font-size: .92rem; line-height: 1.6; color: #fff; max-width: 70ch; }
.profile-bio-label {
    position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 7px; margin-bottom: 6px;
    font-size: .64rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--arcade-text);
}
.profile-bio-label::before { content: ''; width: 7px; height: 7px; background: var(--pink); box-shadow: 0 0 10px var(--pink); transform: rotate(45deg); }
body.lang-mm .profile-bio-label { font-size: .72rem; letter-spacing: 0; text-transform: none; }
body.lang-mm .profile-bio p { font-family: var(--font-mm); font-size: .84rem; line-height: 1.75; }
body.lang-mm .profile-bio-label { font-size: .74rem; letter-spacing: 0; text-transform: none; }
/* One strip rather than separate tiles: four figures read as a single
   summary line and no tile is left half-empty at the right. */
.profile-stats {
    display: flex; flex-wrap: wrap; margin-top: 18px;
    background: var(--surface); border: 1px solid var(--line);
    clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
}
.pstat {
    --stat-c: var(--neon);
    position: relative; flex: 1 1 0; min-width: 116px; padding: 11px 14px;
}
.pstat + .pstat { border-left: 1px solid var(--line-soft); }
.pstat::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--stat-c); }
.pstat:nth-child(2) { --stat-c: var(--ok); }
.pstat:nth-child(3) { --stat-c: var(--pink); }
.pstat:nth-child(4) { --stat-c: var(--cyan); }
.pstat b { color: var(--stat-c) !important; }
.pstat b {
    display: block; font-family: var(--font-display); font-size: 1.35rem; font-weight: 700; line-height: 1.15;
    color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pstat span { display: block; margin-top: 2px; font-size: .66rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }
body.lang-mm .pstat span { font-size: .66rem; letter-spacing: 0; text-transform: none; }
.profile-games { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.profile-games .pill { font-size: .72rem; padding: 5px 11px; }
.profile-contact { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line-soft); }
.profile-label { display: block; margin-bottom: 10px; font-size: .68rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); }
body.lang-mm .profile-label { font-size: .74rem; letter-spacing: 0; text-transform: none; }
.pcontacts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.pcontact {
    display: flex; align-items: center; gap: 12px; min-width: 0;
    padding: 10px 12px; color: var(--text);
    background: color-mix(in srgb, var(--ch, var(--neon)) 10%, var(--surface));
   clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
    transition: background var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast);
}
.pcontact:hover { color: var(--text); background: color-mix(in srgb, var(--ch, var(--neon)) 18%, var(--surface)); transform: translateY(-2px); }
.pcontact-ico {
    flex: none; display: grid; place-items: center; width: 38px; height: 38px;
    background: var(--ch, var(--neon)); color: #fff; box-shadow: 0 6px 14px -6px var(--ch, var(--neon));
    clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px));
}
.pcontact-ico svg { width: 19px; height: 19px; }
/* Channel name and handle sit on one line; a long handle wraps under it
   instead of leaving the row half empty. */
.pcontact-meta { flex: 1 1 auto; min-width: 0; display: flex; flex-flow: row wrap; align-items: baseline; gap: 2px 8px; }
.pcontact-meta b { font-family: var(--font-display); font-size: .9rem; font-weight: 600; color: var(--ink); }
.pcontact-meta span { flex: 1 1 auto; min-width: 0; font-size: .78rem; color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pcontact-go { flex: none; display: flex; color: var(--ch, var(--neon)); transition: transform var(--t-fast); }
.pcontact-go svg { width: 16px; height: 16px; }
.pcontact:hover .pcontact-go { transform: translateX(3px); }
.store-listings-head { margin-bottom: 10px; }
.store-ad { padding-block: 16px 0; }
.store-count {
    position: relative; display: inline-grid; place-items: center;
    min-width: 30px; height: 24px; padding: 0 9px; margin-left: 10px; vertical-align: middle;
    font-family: var(--font-mono); font-size: .76rem; font-weight: 700; letter-spacing: .04em;
    color: var(--arcade-text); background: var(--arcade-solid);
    box-shadow: 0 0 18px -8px var(--neon);
    clip-path: polygon(0 0, calc(100% - 7px) 0, 100% 7px, 100% 100%, 7px 100%, 0 calc(100% - 7px));
}
.store-count::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--grad); }
.store-count:empty { display: none; }
.store-count:empty { display: none; }
.store-grid { margin-top: 0; }
/* ---------- 6. Blog ------------------------------------------------------ */
.post-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.post-card {
    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;
    transition: transform var(--t), border-color var(--t), box-shadow var(--t);
}
.post-card:hover { transform: translateY(-4px); border-color: var(--line-strong); box-shadow: var(--sh-3); }
.post-cover { aspect-ratio: 16/9; background: var(--surface-3); overflow: hidden; }
.post-cover img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-slow); }
.post-card:hover .post-cover img { transform: scale(1.05); }
.post-cover .fallback {
    width: 100%; height: 100%;
    display: grid; place-items: center;
    font-size: 1.9rem; opacity: .35; background: var(--surface-3);
}
.post-body { padding: 14px 15px 16px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.post-body h3 { font-size: 1rem; line-height: 1.32; color: var(--neon-deep); }
.post-body p {
    font-size: .85rem; color: var(--text-2);
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.post-meta {
    margin-top: auto; padding-top: 10px;
    border-top: 1px solid var(--line-soft);
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    font-size: .76rem; color: var(--text-3);
}
.tag-chip {
    padding: 3px 10px; border-radius: 0;
    background: var(--neon-faint);
    border: 1px solid transparent;
    font-size: .66rem; font-weight: 700;
    letter-spacing: .06em; text-transform: uppercase;
    color: var(--neon-deep);
}
.article { max-width: 740px; margin-inline: auto; padding-block: 20px 46px; }
.article-cover {
    aspect-ratio: 16/9; 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)));
    overflow: hidden; border: 1px solid var(--line); margin-bottom: 20px;
}
.article-cover img { width: 100%; height: 100%; object-fit: cover; }
.article h1 { font-size: clamp(1.55rem, 4vw, 2.25rem); margin-bottom: 10px; }
.article .article-meta { color: var(--text-3); font-size: .82rem; margin-bottom: 20px; display: flex; gap: 12px; align-items: center; }
.article .prose { font-size: .98rem; line-height: 1.75; color: var(--text-2); }
.article .prose.mm { line-height: 1.65; }
.article-section + .article-section { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--line-soft); }
/* ---------- 6b. Page head (non-home banner pages — no full hero) -------- */
.page-head { background: var(--surface); border-bottom: 1px solid var(--line); padding-block: 4px 22px; }
.page-head .row { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
.page-head h1 { font-size: clamp(1.5rem, 3vw, 2rem); color: var(--neon-deep); margin-bottom: 8px; }
.page-head p { color: var(--text-2); font-size: .92rem; max-width: 56ch; }
.page-head .actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* ---------- 7. Plans, steps, notices ------------------------------------ */
.plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.plan {
    position: relative;
    display: flex; flex-direction: column; gap: 12px;
    padding: 22px 19px;
    border: 1px solid var(--line);
    border-radius: 0;
    background: var(--surface);
    transition: transform var(--t), border-color var(--t), box-shadow var(--t);
}
.plan:hover { transform: translateY(-4px); border-color: var(--line-strong); box-shadow: var(--sh-2); }
.plan.featured {
    border: 1px solid var(--neon);
    background: var(--surface);
    box-shadow: var(--glow);
}
.plan-flag {
    position: absolute; top: -11px; left: 19px;
    padding: 4px 12px;
    clip-path: polygon(0 0, calc(100% - 6px) 0, 100% 6px, 100% 100%, 6px 100%, 0 calc(100% - 6px));
    background: var(--grad); color: #fff;
    font-size: .62rem; font-weight: 800;
    letter-spacing: .1em; text-transform: uppercase;
}
.plan h3 { font-size: 1.1rem; }
.plan .plan-price { display: flex; align-items: baseline; gap: 7px; font-family: var(--font-display); }
.plan .plan-price b { font-size: 2rem; font-weight: 700; letter-spacing: -.03em; color: var(--neon-deep); }
.plan .plan-price span { font-size: .78rem; color: var(--text-3); font-family: var(--font-ui); }
.plan ul { display: flex; flex-direction: column; gap: 8px; }
.plan li { display: flex; gap: 9px; align-items: flex-start; font-size: .85rem; color: var(--text-2); }
.plan li svg { color: var(--ok); flex-shrink: 0; margin-top: 2px; }
.plan .btn { margin-top: auto; }

.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; counter-reset: step; }
.step {
    padding: 17px 19px;
    border: 1px solid var(--line); background: var(--surface); 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)));
    display: grid; grid-template-columns: auto 1fr; column-gap: 13px; row-gap: 3px; align-items: start;
}
.step::before {
    counter-increment: step; content: counter(step);
    grid-column: 1; grid-row: 1 / 3;
    display: grid; place-items: center;
    width: 32px; height: 32px;
    clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px));
    background: var(--grad); color: #fff;
    font-family: var(--font-display); font-weight: 700;
}
.step b { display: block; font-size: .95rem; margin-bottom: 5px; color: var(--neon-deep); }
.step p { font-size: .84rem; color: var(--text-3); line-height: 1.55; }

.notice {
    display: flex; gap: 12px;
    padding: 13px 15px;
    border: 1px solid var(--line-strong);
    border-left-width: 3px;
    border-radius: 0;
    background: var(--surface-2);
    font-size: .86rem; line-height: 1.55;
}
.notice.warn   { border-left-color: var(--warn);   background: var(--warn-bg);   color: var(--text); }
.notice.danger { border-left-color: var(--danger); background: var(--danger-bg); color: var(--text); }
.notice.ok     { border-left-color: var(--ok);     background: var(--ok-bg);     color: var(--text); }
.notice.info   { border-left-color: var(--neon); background: var(--neon-faint); color: var(--ink); }

/* ---------- 8. Share row ------------------------------------------------- */
.share-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.share-row .btn svg { width: 15px; height: 15px; }
/* ---------- 9. Seller portal -------------------------------------------- */
.portal-top {
    position: sticky; top: 0; z-index: 60;
    background: var(--arcade);
    color: #fff;
    border-bottom: 1px solid var(--arcade-line);
}
.portal-top::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--grad); pointer-events: none; }
.portal-top-inner { min-height: 62px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding-block: 10px; }
.portal-top .brand-name b, .portal-top .brand-name span { color: #fff; }
.portal-top .lang-trigger { background: rgba(255,255,255,.08); box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); }
.portal-top .lang-trigger:hover { box-shadow: inset 0 0 0 1px rgba(255,255,255,.35); }
.portal-top .theme-toggle { background: rgba(255,255,255,.08); box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); }
.portal-top .theme-toggle:hover { box-shadow: inset 0 0 0 1px rgba(255,255,255,.35); }
.portal-top .who { display: flex; align-items: center; gap: 9px; font-size: .84rem; color: rgba(255,255,255,.8); }
.portal-top .who b { color: #fff; font-family: var(--font-display); }
.portal-top .btn-outline { --btn-bd: rgba(255,255,255,.3); --btn-fg: #fff; --btn-bg: transparent; }
.portal-top .btn-outline:hover { --btn-bd: #fff; --btn-bg: rgba(255,255,255,.1); }

.sub-banner {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    padding: 12px 16px;
    border: 1px solid var(--line); clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut)));
    background: var(--surface);
    margin-bottom: 18px;
    border-left: 3px solid var(--ok);
}
.sub-banner.is-warn { background: var(--warn-bg); border-color: color-mix(in srgb, var(--warn) 35%, transparent); border-left-color: var(--warn); }
.sub-banner.is-danger { background: var(--danger-bg); border-color: color-mix(in srgb, var(--danger) 35%, transparent); border-left-color: var(--danger); }
.sub-banner .sub-days {
    font-family: var(--font-display); font-size: .96rem; font-weight: 700;
    color: var(--neon-deep); font-variant-numeric: tabular-nums;
}
.sub-banner .sub-status { flex: 1 1 auto; min-width: 0; font-size: .82rem; color: var(--text-3); }

.portal-rows { display: flex; flex-direction: column; gap: 9px; }
.portal-row {
    display: grid;
    grid-template-columns: 110px minmax(0, 1fr) auto;
    gap: 14px; align-items: center;
    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);
    transition: border-color var(--t-fast);
}
.portal-row:hover { border-color: var(--line-strong); }
.portal-row .shot {
    aspect-ratio: 16/9; border-radius: 0;
    overflow: hidden; background: var(--surface-3);
    display: grid; place-items: center; color: var(--text-3);
}
.portal-row .shot img { width: 100%; height: 100%; object-fit: cover; }
.portal-row .info { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.portal-row .info .name {
    font-family: var(--font-display); font-weight: 600; font-size: .93rem; color: var(--neon-deep);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.portal-row .info .meta { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; font-size: .78rem; color: var(--text-3); }
.portal-row .info .meta b { color: var(--neon-deep); font-family: var(--font-display); font-size: .92rem; }
.portal-row .acts { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }

/* ---------- 10. Responsive ---------------------------------------------- */
@media (max-width: 900px) {
    .nav-burger { display: grid; }
    .nav-portal { display: none; }
    .ad-wide { aspect-ratio: auto; min-height: 0; }
    /* The old centered/stacked copy needed 30px of top clearance to duck
       under the "Advertisement" flag badge; the icon+copy row below now
       sits vertically centered instead, so that much top padding just read
       as extra empty space inside (and around) the banner. */
    .ad-wide .ad-empty { padding: 16px; }
}
/* Phones: the banner is one compact line — flag, title and the contact
   button. The body copy belongs to the roomier desktop version. */
@media (max-width: 720px) {
    .ad-wide .ad-empty { padding: 9px 11px; gap: 6px 10px; flex-wrap: nowrap; }
    .ad-wide .ad-empty-copy > span { display: none; }
    .ad-wide .ad-empty b { font-size: .84rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    /* Flag beside the title, not above it: at this height a stacked label
       was clipped, and the banner must stay marked as advertising. */
    .ad-wide .ad-empty-copy { flex-direction: row; align-items: center; gap: 8px; }
    .ad-wide .ad-flag-inline { margin: 0; flex: none; font-size: .48rem; padding: 2px 5px; }
    .ad-wide .ad-empty .btn { padding: 7px 10px; font-size: .74rem; }
}
@media (min-width: 901px) {
    .mobile-nav { display: none !important; }
}
@media (max-width: 760px) {
    .portal-row { grid-template-columns: 76px minmax(0, 1fr); }
    .portal-row .acts { grid-column: 1 / -1; }
    .profile-cover { height: 112px; }
    .profile-cover-bars { right: 14px; bottom: 12px; }
    .profile-top { gap: 12px; margin-top: -32px; }
    .profile-id, .profile-share { margin-top: 40px; }
    .profile-av { width: 74px; height: 74px; }
    .pstat { flex: 1 1 0; min-width: 0; padding: 9px 7px; text-align: center; }
    .pstat b { font-size: .95rem; letter-spacing: -.02em; }
    /* The "selling since" month/year is the longest value in the row. */
    .pstat:last-child b { font-size: .8rem; }
    .pstat span { font-size: .58rem; letter-spacing: .04em; }
    body.lang-mm .pstat span { font-size: .6rem; }
    .profile-bio { padding: 11px 13px 12px; }
    .pstat b { font-size: 1.05rem; }
    .pstat span { font-size: .58rem; letter-spacing: .04em; }
    .pcontact { gap: 8px; padding: 8px; }
    .pcontact-ico { width: 32px; height: 32px; }
    .pcontact-ico svg { width: 16px; height: 16px; }
    .pcontact-go { display: none; }
    .pcontact-meta b { font-size: .82rem; }
    .pcontact-meta span { font-size: .7rem; }
    .profile { margin-bottom: 14px; }
    .article { padding-block: 14px 34px; }
    /* 2-up on tablets and phones: the stacked tile layout puts the name on
       its own full-width row, so "Mobile Legends" fits a ~165px column. */
    .cat-rail { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .cat-card { padding: 9px; gap: 8px; }
    .cat-glyph { width: 40px; height: 40px; padding: 3px; border-radius: 0; }
    .cat-go { width: 22px; height: 22px; }
    .cat-go svg { width: 12px; height: 12px; }
    .cat-meta b { font-size: .82rem; }
    .cat-meta span { font-size: .66rem; }
}
@media (max-width: 480px) {
    .seller-grid { grid-template-columns: 1fr; }
    .post-grid { grid-template-columns: 1fr; }
    .avatar-upload { gap: 11px; }
    .avatar-upload .preview { width: 56px; height: 56px; border-radius: 0; font-size: 1.2rem; }
    .portal-top .who b { display: none; }
    .portal-top .lang-trigger { display: none; }
}

/* ---------- 11. User guide (/guide) --------------------------------------
   Arcade hero with jump chips, then Buying / Selling as numbered step
   cards, Safety as icon tips and a FAQ accordion. Each section has its own
   accent (--tone) so the long page stays scannable. */
.guide-hero {
    position: relative; overflow: hidden; color: #fff;
    padding-block: 34px 26px;
    background:
        radial-gradient(60% 140% at 100% 0%, rgba(240,53,154,.35), transparent 60%),
        radial-gradient(50% 120% at 0% 100%, rgba(0,184,200,.22), transparent 60%),
        var(--arcade);
}
.guide-hero::before {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: repeating-linear-gradient(-55deg, rgba(255,255,255,.05) 0 2px, transparent 2px 16px);
}
.guide-hero .shell { position: relative; }
.guide-hero h1 { color: #fff; font-size: clamp(1.6rem, 4vw, 2.3rem); }
.guide-hero p { margin-top: 6px; max-width: 60ch; color: var(--arcade-dim); font-size: .95rem; }
.guide-jump { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.guide-jump a {
    --tone: var(--neon-bright);
    padding: 8px 14px; font-family: var(--font-display); font-size: .82rem; font-weight: 600;
    color: #fff; background: rgba(255,255,255,.08); box-shadow: inset 0 -2px 0 var(--tone);
    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: background var(--t-fast);
}
.guide-jump a:hover { color: #fff; background: color-mix(in srgb, var(--tone) 35%, transparent); }
[data-tone="buy"]    { --tone: #8B55FF; }
[data-tone="sell"]   { --tone: #F0359A; }
[data-tone="safety"] { --tone: #0BB4C4; }
[data-tone="faq"]    { --tone: #F2A017; }
[data-tone="soon"]   { --tone: #22C55E; }
[data-tone="ideas"]  { --tone: #3B7BFF; }
.guide-section { scroll-margin-top: var(--nav-h); }
.guide-head { margin-bottom: 14px; }
.guide-head h2 { display: flex; align-items: center; gap: 10px; font-size: clamp(1.2rem, 2.4vw, 1.5rem); }
.guide-head h2::before { content: ''; width: 6px; height: 1.1em; background: var(--tone); transform: skewX(-18deg); }
.guide-head p { margin-top: 4px; color: var(--text-2); font-size: .9rem; }
.guide-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.guide-step {
    position: relative; padding: 16px; min-width: 0;
    background: color-mix(in srgb, var(--tone) 7%, var(--surface));
    box-shadow: inset 0 3px 0 var(--tone);
    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)));
}
.guide-step-n {
    position: absolute; top: 10px; right: 14px;
    font-family: var(--font-display); font-size: 1.7rem; font-weight: 700; line-height: 1;
    color: color-mix(in srgb, var(--tone) 35%, transparent);
}
.guide-step-ico {
    display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: 12px;
    color: #fff; background: var(--tone); box-shadow: 0 8px 16px -8px var(--tone);
    clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px));
}
.guide-step-ico svg { width: 20px; height: 20px; }
.guide-step b { display: block; font-family: var(--font-display); font-size: .98rem; color: var(--ink); }
.guide-step p { margin-top: 4px; font-size: .84rem; line-height: 1.55; color: var(--text-2); }
.guide-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.guide-actions .btn svg { width: 16px; height: 16px; }
.guide-tips { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; }
.guide-tip {
    display: flex; gap: 12px; align-items: flex-start; padding: 14px;
    background: var(--surface); box-shadow: inset 3px 0 0 var(--tone);
    clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%);
}
.guide-tip-ico {
    flex: none; display: grid; place-items: center; width: 36px; height: 36px;
    color: var(--tone); background: color-mix(in srgb, var(--tone) 14%, transparent);
    clip-path: polygon(0 0, calc(100% - 7px) 0, 100% 7px, 100% 100%, 7px 100%, 0 calc(100% - 7px));
}
.guide-tip-ico svg { width: 18px; height: 18px; }
.guide-tip b { display: block; font-family: var(--font-display); font-size: .92rem; color: var(--ink); }
.guide-tip p { margin-top: 2px; font-size: .83rem; line-height: 1.55; color: var(--text-2); }
.guide-faq { display: flex; flex-direction: column; gap: 8px; }
.guide-faq details {
    background: var(--surface);
    clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%);
}
.guide-faq summary {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 13px 16px; cursor: pointer; list-style: none;
    font-family: var(--font-display); font-size: .92rem; font-weight: 600; color: var(--ink);
}
.guide-faq summary::-webkit-details-marker { display: none; }
.guide-faq summary::after {
    content: '+'; flex: none; display: grid; place-items: center; width: 24px; height: 24px;
    font-size: 1.1rem; color: #fff; background: var(--tone);
    transition: transform var(--t-fast);
}
.guide-faq details[open] summary::after { content: '–'; }
.guide-faq summary:focus-visible { outline: 2px solid var(--tone); outline-offset: -2px; }
.guide-faq details p { padding: 0 16px 14px; font-size: .86rem; line-height: 1.6; color: var(--text-2); }
/* Coming soon: tip cards with a corner tag. */
.guide-soon .guide-tip { position: relative; padding-right: 64px; }
.guide-soon-tag {
    position: absolute; top: 10px; right: 12px;
    padding: 2px 7px; font-size: .58rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
    color: #fff; background: var(--tone);
}
/* Suggestion box */
.guide-ideas {
    position: relative; padding: 18px; background: var(--surface); 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)));
}
.guide-ideas::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--grad); }
.guide-idea-form { display: flex; flex-direction: column; gap: 12px; }
.guide-idea-form .hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
/* Name, contact and the send button share one aligned row so the form
   does not trail off into empty space on a wide screen. */
.guide-idea-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: 12px; align-items: end; }
.guide-idea-row .btn { height: 42px; }
.guide-topics { display: flex; flex-wrap: wrap; gap: 6px; }
.guide-topic { position: relative; cursor: pointer; }
.guide-topic input { position: absolute; opacity: 0; pointer-events: none; }
.guide-topic span {
    display: inline-block; padding: 7px 12px; font-size: .8rem; font-weight: 600;
    color: var(--text-2); background: var(--bg-soft); border: 1px solid var(--line);
    transition: color var(--t-fast), background var(--t-fast), border-color var(--t-fast);
}
.guide-topic:hover span { border-color: var(--tone); color: var(--ink); }
.guide-topic input:checked + span { color: #fff; background: var(--tone); border-color: var(--tone); }
.guide-topic input:focus-visible + span { outline: 2px solid var(--tone); outline-offset: 2px; }
.guide-idea-form .guide-actions { margin-top: 0; }
body.lang-mm .guide-hero p, body.lang-mm .guide-head p, body.lang-mm .guide-step p,
body.lang-mm .guide-tip p, body.lang-mm .guide-faq details p { font-family: var(--font-mm); font-size: .8rem; line-height: 1.75; }
body.lang-mm .guide-step b, body.lang-mm .guide-tip b, body.lang-mm .guide-faq summary,
body.lang-mm .guide-jump a { font-family: var(--font-mm); font-size: .84rem; line-height: 1.5; }
body.lang-mm .guide-hero h1, body.lang-mm .guide-head h2 { font-family: var(--font-mm); line-height: 1.45; }
@media (max-width: 980px) { .guide-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px) {
    .guide-hero { padding-block: 22px 18px; }
    .guide-jump { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
    .guide-jump a { padding: 8px 4px; text-align: center; font-size: .72rem; }
    body.lang-mm .guide-jump a { font-size: .66rem; }
    .guide-steps { gap: 8px; }
    .guide-step { padding: 12px; }
    .guide-step-ico { width: 34px; height: 34px; margin-bottom: 8px; }
    .guide-step-n { font-size: 1.3rem; top: 8px; right: 10px; }
    .guide-step b { font-size: .86rem; }
    .guide-step p { font-size: .76rem; }
    .guide-tips { grid-template-columns: 1fr; gap: 8px; }
    .guide-jump { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .guide-ideas { padding: 14px; }
    .guide-idea-row { grid-template-columns: 1fr; }
    .guide-actions .btn { flex: 1 1 auto; }
}

/* ---------- 12. Advertise page: placement specs ------------------------ */
.page-head > .shell > .row:first-child { padding-top: 20px; }
.ad-slot {
    background: var(--surface); 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)));
}
.ad-slot-head { position: relative; padding: 16px 18px 12px; border-bottom: 1px solid var(--line-soft); }
.ad-slot-head::before { content: ''; position: absolute; left: 0; top: 0; right: 0; height: 3px; background: var(--grad); }
.ad-slot-head h3 { font-size: 1.02rem; color: var(--ink); }
.ad-slot-head p { margin-top: 2px; font-size: .84rem; color: var(--text-3); }
.ad-slot-body { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: 20px; padding: 16px 18px 18px; align-items: start; }
.ad-spec dl { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0 0 12px; }
.ad-spec dl > div { padding: 8px 10px; background: var(--bg-soft); box-shadow: inset 3px 0 0 var(--neon); }
.ad-spec dl > div:nth-child(2) { box-shadow: inset 3px 0 0 var(--pink); }
.ad-spec dl > div:nth-child(3) { box-shadow: inset 3px 0 0 var(--cyan); }
.ad-spec dl > div:nth-child(4) { box-shadow: inset 3px 0 0 #22C55E; }
.ad-spec dt { font-size: .6rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); }
.ad-spec dd { margin: 1px 0 0; font-family: var(--font-display); font-size: .82rem; font-weight: 600; color: var(--ink); }
.sz-diagram {
    position: relative; width: 100%; overflow: hidden;
    background: repeating-linear-gradient(45deg, var(--bg-soft) 0 6px, var(--surface-3) 6px 12px);
    border: 1px solid var(--line-strong);
}
.sz-trim { position: absolute; top: 0; bottom: 0; background: rgba(240,53,154,.16); }
.sz-trim-l { left: 0; border-right: 1px dashed rgba(240,53,154,.6); }
.sz-trim-r { right: 0; border-left: 1px dashed rgba(240,53,154,.6); }
.sz-safe { position: absolute; display: grid; place-items: center; border: 2px dashed #16A34A; background: rgba(34,197,94,.12); }
.sz-safe em { font-style: normal; font-family: var(--font-mono); font-size: .6rem; font-weight: 700; letter-spacing: .1em; color: #16A34A; }
.sz-flag { position: absolute; top: 3px; right: 3px; z-index: 1; padding: 0 4px; font-size: .5rem; font-weight: 700; color: #fff; background: var(--grad); }
.ad-notes { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 5px; font-size: .76rem; color: var(--text-2); }
.ad-notes li { display: flex; gap: 8px; align-items: flex-start; }
.ad-notes i { flex: none; width: 12px; height: 12px; margin-top: 2px; }
.sw-trim { background: rgba(240,53,154,.35); border: 1px dashed #F0359A; }
.sw-safe { background: rgba(34,197,94,.2); border: 1px dashed #16A34A; }
.sw-flag { background: var(--grad); }
.ad-preview { min-width: 0; }
.ad-preview-label { display: block; margin-bottom: 6px; font-size: .64rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); }
/* The sidebar slot is ~480px wide on the listing page, so preview it at that. */
.ad-preview-sidebar > [data-ad] { max-width: 480px; }
/* The footer logo slot is ~180px (phone) to ~320px wide on the site. */
.ad-preview-mini > [data-ad] { max-width: 320px; }
@media (max-width: 860px) {
    .ad-slot-body { grid-template-columns: 1fr; gap: 14px; padding: 14px; }
    .ad-slot-head { padding: 14px 14px 10px; }
}

/* Filled wide banners keep their designed 8:1 shape; on phones they show
   the central 4:1 of the artwork (see the safe zone on /advertise). */
.ad-wide.is-filled { aspect-ratio: 8 / 1; min-height: 0; }
@media (max-width: 720px) { .ad-wide.is-filled { aspect-ratio: 4 / 1; } }

/* ---------- 13. Footer logo ad (slot "footer-brand") -------------------
   Sits beside the EXABYTE logo so the row has no dead space on phones;
   drops under the about text on desktop's narrow first column. 4:1. */
.footer-brand-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.footer-brand-row .brand { flex: none; }
.footer-brand-ad { flex: 1 1 180px; min-width: 160px; max-width: 320px; margin-left: auto; }
@media (min-width: 721px) {
    /* Beside a 150px logo the slot was a sliver; under it, it lines up with
       the blurb and shows at its real 4:1 shape. */
    .footer-brand-row { display: block; }
    .footer-brand-ad { width: 100%; max-width: 300px; margin: 14px 0 0; }
}
.ad-mini { aspect-ratio: 4 / 1; }
.ad-mini.is-empty {
    display: flex; align-items: center; gap: 8px; aspect-ratio: auto; min-height: 44px;
    padding: 8px 12px; color: #fff;
    clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 9px, 100% 100%, 9px 100%, 0 calc(100% - 9px));
}
.ad-mini.is-empty .ad-flag-inline { margin: 0; align-self: center; font-size: .5rem; }
.ad-mini.is-empty b { flex: 1; min-width: 0; font-family: var(--font-display); font-size: .82rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #fff; }
.ad-mini-go { flex: none; display: grid; place-items: center; width: 26px; height: 26px; background: var(--grad); color: #fff; }
.ad-mini-go svg { width: 14px; height: 14px; }
a.ad-mini.is-empty:hover { color: #fff; filter: brightness(1.12); }