/* =====================================================================
   ESAForum SKIN · "arena"
   High-energy esports chrome: chamfered geometry (clip-path, never rounded
   rectangles), slanted section dividers, ribbon tags that slice a panel
   corner, heavy 800/900 uppercase display type with an offset accent shadow,
   bleeding / overlapping panels, and a character-render slot system with a
   ring + glow composition that stands alone when no image is set.

   Design contract (shared with landing-arena.css — identical --ar-* tokens,
   identical notch scale, identical section-header pattern):
     eyebrow (mono, accent, letterspaced) → huge uppercase title → short bar.

   Every rule is scoped to [data-skin="arena"]. Nothing leaks.
   Production guards honoured — see the notes at .fi-row:hover, .topic-row:hover,
   .fi-hero / .fi-hero--off, .partners-section and .container.
   ===================================================================== */

/* ── 0. CHARACTER SLOTS ─────────────────────────────────────────────────
   Character renders (transparent PNG / WebP) drop in LATER. Every slot is a
   CSS background on an existing pseudo-element — no extra DOM, no layout
   shift, no request until the variable is set. When a variable is unset the
   slot still renders its ring / arc / glow composition as pure geometry, so
   the page looks finished either way.

   To enable, set any of these on the skin root (ACP → Theme Editor, or a
   custom-CSS block). Example:

   :root[data-skin="arena"]{
     --ar-char-hero:    url('/assets/img/arena/hero.png');     board hero, anchored right, bleeds out of frame  (~900×1100)
     --ar-char-cat:     url('/assets/img/arena/cat.png');      right end of EVERY category header band (small)   (~300×300)
     --ar-char-row:     url('/assets/img/arena/row.png');      first row of the first category + featured rows   (~300×300)
     --ar-char-side:    url('/assets/img/arena/side.png');     first sidebar widget (top-right corner)           (~300×400)
     --ar-char-page:    url('/assets/img/arena/page.png');     page headers: forum banner, topic hero, page-head, leaderboard hero (~500×600)
     --ar-char-profile: url('/assets/img/arena/profile.png');  profile header card (right)                        (~500×600)
     --ar-char-auth:    url('/assets/img/arena/auth.png');     login / register backdrop (right of the card)      (~700×1000)
     --ar-art:          url('/assets/img/arena/art.png');      OPTIONAL faint full-page background art layer (very low opacity)
   }

   Tuning knobs (optional): --ar-char-hero-w (width % of the hero, default 46%),
   --ar-char-page-w (default 34%), --ar-char-x (horizontal nudge, default 0px).
   A per-category or per-forum image can be set inline on the element via the
   same variables (e.g. style="--ar-char-cat:url(...)") without any CSS change.
   ───────────────────────────────────────────────────────────────────── */

/* ── 1. TOKENS ──────────────────────────────────────────────────────── */
[data-skin="arena"] {
    /* Character renders. Paths are relative to this stylesheet, so they resolve
       for every tenant. Any community can point a slot somewhere else (or unset
       it) from the Theme Editor without touching this file. */
    --ar-char-hero: url('../img/characters/char-cs-rifleman.webp');
    /* --ar-char-page intentionally unset: the action buttons sit in that space. */
    --ar-void: #080d12;
    --ar-bg: #0b1218;
    --ar-surface: #101a22;
    --ar-surface-2: #16232d;
    --ar-surface-3: #1d2e3a;
    --ar-line: rgba(255,255,255,.07);
    --ar-line-2: rgba(255,255,255,.13);
    --ar-text: #eef4f7;
    --ar-dim: #9fb1bd;
    --ar-mute: #63767f;
    --ar-accent: #31e07a;            /* ENERGY. Brand-swappable: override here + --primary-rgb. */
    --ar-accent-2: #22b862;
    --ar-accent-soft: rgba(49,224,122,.14);
    --ar-accent-line: rgba(49,224,122,.42);
    --ar-gold: #ffc23d;              /* FEATURED / PREMIUM variant */
    --ar-gold-soft: rgba(255,194,61,.14);
    --ar-online: #31e07a;
    --ar-warn: #ffc23d;
    --ar-danger: #ff5c5c;
    --ar-notch: 14px;
    --ar-notch-sm: 8px;
    --ar-slant: 28px;
    --ar-ease: cubic-bezier(.2,.7,.3,1);
    --ar-fast: 150ms;
    --ar-med: 260ms;
    /* Typography contract: display (angular, clipped corners — echoes the
       chamfers) / mono (meta, counts, eyebrows) / body (reading text only).
       Chakra Petch maxes at 700: impact comes from size, uppercase, positive
       tracking and colour — never from weight alone, never negative tracking. */
    --ar-display: 'Barlow', 'Inter', 'Segoe UI', system-ui, sans-serif;
    --ar-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
    --ar-body: 'Poppins', 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
    --ar-on-accent: #061009;
    --ar-bleed: 0px;                 /* how far the sidebar runs off the container edge (set per breakpoint) */

    /* Reusable chamfer polygons */
    --ar-clip-btn: polygon(var(--ar-notch-sm) 0, 100% 0, 100% calc(100% - var(--ar-notch-sm)), calc(100% - var(--ar-notch-sm)) 100%, 0 100%, 0 var(--ar-notch-sm));
    --ar-clip-btn-lg: polygon(var(--ar-notch) 0, 100% 0, 100% calc(100% - var(--ar-notch)), calc(100% - var(--ar-notch)) 100%, 0 100%, 0 var(--ar-notch));
    --ar-clip-hex: polygon(7px 0, calc(100% - 7px) 0, 100% 50%, calc(100% - 7px) 100%, 7px 100%, 0 50%);
    --ar-clip-arrow: polygon(0 0, calc(100% - 8px) 0, 100% 50%, calc(100% - 8px) 100%, 0 100%);
    --ar-clip-panel: polygon(0 0, calc(100% - var(--ar-notch)) 0, 100% var(--ar-notch), 100% 100%, 0 100%);
    --ar-clip-panel-bl: polygon(0 0, 100% 0, 100% 100%, var(--ar-notch) 100%, 0 calc(100% - var(--ar-notch)));
    --ar-clip-panel-2: polygon(var(--ar-notch) 0, 100% 0, 100% calc(100% - var(--ar-notch)), calc(100% - var(--ar-notch)) 100%, 0 100%, 0 var(--ar-notch));
    --ar-clip-slant-b: polygon(0 0, 100% 0, 100% calc(100% - var(--ar-slant)), 0 100%);
    --ar-clip-slant-t: polygon(0 var(--ar-slant), 100% 0, 100% 100%, 0 100%);
    --ar-clip-slant-l: polygon(18px 0, 100% 0, 100% 100%, 0 100%);

    /* Base-theme variable map — untouched components inherit the look. */
    --bg-0: var(--ar-bg);
    --bg-1: var(--ar-void);
    --bg-2: var(--ar-surface);
    --surface: var(--ar-surface);
    --surface-2: var(--ar-surface-2);
    --surface-3: var(--ar-surface-3);
    --elev: var(--ar-surface-2);
    --border: var(--ar-line-2);
    --border-soft: var(--ar-line);
    --text: var(--ar-text);
    --text-dim: var(--ar-dim);
    --text-mute: var(--ar-mute);
    --primary: var(--ar-accent);
    --primary-rgb: 49, 224, 122;
    --primary-2: var(--ar-accent);
    --accent: var(--ar-accent);
    --accent-2: var(--ar-accent);
    --accent-rgb: 49, 224, 122;
    --on-accent: var(--ar-on-accent);
    --green: var(--ar-online);
    --amber: var(--ar-warn);
    --red: var(--ar-danger);
    --pink: var(--ar-danger);
    --grad-primary: linear-gradient(135deg, var(--ar-accent), var(--ar-accent-2));
    --grad-cyan: linear-gradient(135deg, var(--ar-accent), var(--ar-accent-2));
    --grad-pink: linear-gradient(135deg, var(--ar-gold), var(--ar-accent));
    --grad-surface: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0));
    --radius: 0px;
    --radius-sm: 0px;
    --radius-lg: 0px;
    --shadow: 0 24px 50px -24px rgba(0,0,0,.8);
    --shadow-glow: 0 0 0 1px var(--ar-accent-line), 0 10px 40px -10px rgba(49,224,122,.35);
    --ring: 0 0 0 3px var(--ar-accent-soft);
    --primary-glow: var(--ar-accent-soft);
    --transition: var(--ar-fast) var(--ar-ease);
    --font: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
    --mono: var(--ar-mono);
}

/* ── 2. CANVAS ──────────────────────────────────────────────────────── */
[data-skin="arena"] body {
    position: relative;
    color: var(--ar-text);
    font-family: var(--font);
    /* Deep void with a green top-left bloom, a gold whisper bottom-right and
       a 4px diagonal hatch fading out after the first screen. Never a fixed
       attachment layer (Chromium drops hero video on repaint). */
    background-color: var(--ar-void);
    background-image:
        radial-gradient(1100px 620px at 8% -180px, rgba(49,224,122,.05), transparent 62%),
        radial-gradient(900px 600px at 100% 12%, rgba(255,194,61,.025), transparent 60%);
    background-repeat: no-repeat, no-repeat;
}
/* Faint background art layer — pure geometry until --ar-art is set. */
[data-skin="arena"] body::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    opacity: .06;
    background-image:
        var(--ar-art, none);
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: right top;
}
/* Hatch and art fade below the fold */
[data-skin="arena"] body::after {
    content: '';
    position: absolute;
    left: 0; right: 0; top: 0; bottom: 0;
    z-index: -1;
    pointer-events: none;
    background: linear-gradient(180deg, transparent 0, transparent 520px, var(--ar-void) 1300px);
}

[data-skin="arena"] ::selection { background: var(--ar-accent); color: var(--ar-on-accent); }
[data-skin="arena"] ::-webkit-scrollbar { width: 10px; height: 10px; }
[data-skin="arena"] ::-webkit-scrollbar-track { background: var(--ar-void); border-left: 1px solid var(--ar-line); }
[data-skin="arena"] ::-webkit-scrollbar-thumb { background: var(--ar-surface-3); border: 2px solid var(--ar-void); border-radius: 0; }
[data-skin="arena"] ::-webkit-scrollbar-thumb:hover { background: var(--ar-accent); }
[data-skin="arena"] ::-webkit-scrollbar-corner { background: var(--ar-void); }
[data-skin="arena"] :focus-visible { outline: 2px solid var(--ar-accent); outline-offset: 3px; border-radius: 0; }
[data-skin="arena"] a { color: var(--ar-accent); transition: color var(--ar-fast) var(--ar-ease); }
[data-skin="arena"] a:hover { color: var(--ar-text); }
[data-skin="arena"] hr { border-top: 1px solid var(--ar-line-2); }
[data-skin="arena"] ::placeholder { color: var(--ar-mute); }

/* ── 3. TYPOGRAPHY ──────────────────────────────────────────────────── */
[data-skin="arena"] h1,
[data-skin="arena"] h2,
[data-skin="arena"] h3,
[data-skin="arena"] h4 { font-family: var(--font); letter-spacing: -.02em; color: var(--ar-text); }
/* Display treatment — reusable (also used by the landing). */
[data-skin="arena"] .ar-display,
[data-skin="arena"] .page-head h1,
[data-skin="arena"] .fi-hero h1,
[data-skin="arena"] .leaderboard-hero h1,
[data-skin="arena"] .forum-banner h1,
[data-skin="arena"] .profile-name,
[data-skin="arena"] .empty-state h1 {
    font-family: var(--ar-display);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .015em;
    line-height: .95;
}
/* The offset accent shadow on the key word */
[data-skin="arena"] .ar-display-key,
[data-skin="arena"] .fi-hero h1 .grad,
[data-skin="arena"] .page-head h1,
[data-skin="arena"] .leaderboard-hero h1,
[data-skin="arena"] .forum-banner h1,
[data-skin="arena"] .profile-name,
[data-skin="arena"] .empty-state h1 {
    text-shadow: none;
}
[data-skin="arena"] .fi-hero h1 .grad {
    background: none;
    -webkit-background-clip: initial;
    background-clip: initial;
    -webkit-text-fill-color: currentColor;
    color: var(--ar-text);
}
/* Section header pattern: eyebrow → title → bar. Applied to every section. */
[data-skin="arena"] .ar-eyebrow,
[data-skin="arena"] .fi-eyebrow,
[data-skin="arena"] .fi-toolbar-label,
[data-skin="arena"] .fi-resume-head,
[data-skin="arena"] .poll-head,
[data-skin="arena"] .mod-bar-label,
[data-skin="arena"] .search-filters h3,
[data-skin="arena"] .settings-nav .nav-section,
[data-skin="arena"] .footer-grid h4,
[data-skin="arena"] .member-count,
[data-skin="arena"] .panel-title,
[data-skin="arena"] .best-banner,
[data-skin="arena"] .ba-head,
[data-skin="arena"] .viewers-bar .vb-label,
[data-skin="arena"] .post-sig::before,
[data-skin="arena"] .topic-list-head,
[data-skin="arena"] .fi-cat-count,
[data-skin="arena"] .leaderboard-table th {
    font-family: var(--ar-mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--ar-accent);
}
[data-skin="arena"] .ar-title,
[data-skin="arena"] .widget-head,
[data-skin="arena"] .fi-widget-head,
[data-skin="arena"] .card-head h2,
[data-skin="arena"] .card-head h3,
[data-skin="arena"] .reply-card h3,
[data-skin="arena"] .settings-panel-head h2,
[data-skin="arena"] .fi-cat-title,
[data-skin="arena"] .poll-q,
[data-skin="arena"] .auth-card h1,
[data-skin="arena"] .search-filters h3,
[data-skin="arena"] .cat-head .cat-title,
[data-skin="arena"] .footer-grid h4 {
    position: relative;
    font-family: var(--ar-display);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--ar-text);
}
/* Short accent underline bar beneath section titles */
[data-skin="arena"] .ar-title::after,
[data-skin="arena"] .widget-head::after,
[data-skin="arena"] .fi-widget-head::after,
[data-skin="arena"] .card-head h2::after,
[data-skin="arena"] .card-head h3::after,
[data-skin="arena"] .reply-card h3::after,
[data-skin="arena"] .settings-panel-head h2::after,
[data-skin="arena"] .auth-card h1::after {
    content: '';
    position: absolute;
    left: 0; bottom: -6px;
    width: 34px; height: 3px;
    background: var(--ar-accent);
    pointer-events: none;
    clip-path: polygon(0 0, 100% 0, calc(100% - 3px) 100%, 0 100%);
}
[data-skin="arena"] .ar-num,
[data-skin="arena"] .topic-stat .ts-val,
[data-skin="arena"] .profile-stat b,
[data-skin="arena"] .pa-stats b,
[data-skin="arena"] .podium-score,
[data-skin="arena"] .lb-rank-num,
[data-skin="arena"] .lb-rep,
[data-skin="arena"] .lb-posts,
[data-skin="arena"] .rank-row .val,
[data-skin="arena"] .mc-stats b,
[data-skin="arena"] .xp-total,
[data-skin="arena"] .xp-next,
[data-skin="arena"] .fi-pill,
[data-skin="arena"] .pill-count,
[data-skin="arena"] .badge-count,
[data-skin="arena"] .post-num,
[data-skin="arena"] .pagination a,
[data-skin="arena"] .pagination span,
[data-skin="arena"] .search-count,
[data-skin="arena"] .tc-count {
    font-family: var(--ar-mono);
    font-variant-numeric: tabular-nums;
}
/* Stat NUMERALS are display-face: big, tracked, tabular. Units stay mono. */
[data-skin="arena"] .fi-stat b,
[data-skin="arena"] .fi-bs-val,
[data-skin="arena"] .fi-stats-row b {
    font-family: var(--ar-display);
    font-weight: 700;
    letter-spacing: .02em;
    font-variant-numeric: tabular-nums;
}

/* ── 4. GEOMETRY PRIMITIVES ─────────────────────────────────────────── */
/* Reusable chamfer helpers (also usable from custom CSS / templates). */
[data-skin="arena"] .ar-notch { clip-path: var(--ar-clip-btn); border-radius: 0; }
[data-skin="arena"] .ar-notch-lg { clip-path: var(--ar-clip-btn-lg); border-radius: 0; }
[data-skin="arena"] .ar-hex { clip-path: var(--ar-clip-hex); border-radius: 0; }
[data-skin="arena"] .ar-cut { clip-path: var(--ar-clip-panel); border-radius: 0; position: relative; }
[data-skin="arena"] .ar-cut-bl { clip-path: var(--ar-clip-panel-bl); border-radius: 0; position: relative; }
[data-skin="arena"] .ar-slant-b { clip-path: var(--ar-clip-slant-b); }
[data-skin="arena"] .ar-slant-t { clip-path: var(--ar-clip-slant-t); }
/* Panel corner cut + the diagonal hairline that closes the border across the cut. */
[data-skin="arena"] .ar-panel,
[data-skin="arena"] .card,
[data-skin="arena"] .widget,
[data-skin="arena"] .fi-widget,
[data-skin="arena"] .fi-forum-list,
[data-skin="arena"] .topic-list,
[data-skin="arena"] .post,
[data-skin="arena"] .reply-card,
[data-skin="arena"] .poll-card,
[data-skin="arena"] .subforum-card,
[data-skin="arena"] .member-card,
[data-skin="arena"] .user-card,
[data-skin="arena"] .result-list,
[data-skin="arena"] .settings-nav,
[data-skin="arena"] .fi-toolbar,
[data-skin="arena"] .fi-resume-card,
[data-skin="arena"] .search-filters,
[data-skin="arena"] .best-answer-box,
[data-skin="arena"] .stat-card,
[data-skin="arena"] .dropdown,
[data-skin="arena"] .cookie-bar,
[data-skin="arena"] .esa-editor,
[data-skin="arena"] .form-group [data-editor],
[data-skin="arena"] .ach-trophy-card,
[data-skin="arena"] .trophy-item,
[data-skin="arena"] .fi-bs-item,
[data-skin="arena"] .mod-bar {
    border-radius: 0;
    clip-path: var(--ar-clip-panel);
}
/* Positioning context for the hairline — ONLY on elements that are static in
   the base theme. .dropdown (absolute), .cookie-bar (fixed) and .settings-nav
   (sticky) are already positioned and must keep their own position. */
[data-skin="arena"] .ar-panel,
[data-skin="arena"] .card,
[data-skin="arena"] .widget,
[data-skin="arena"] .fi-widget,
[data-skin="arena"] .fi-forum-list,
[data-skin="arena"] .topic-list,
[data-skin="arena"] .post,
[data-skin="arena"] .reply-card,
[data-skin="arena"] .poll-card,
[data-skin="arena"] .subforum-card,
[data-skin="arena"] .member-card,
[data-skin="arena"] .user-card,
[data-skin="arena"] .result-list,
[data-skin="arena"] .fi-toolbar,
[data-skin="arena"] .fi-resume-card,
[data-skin="arena"] .search-filters,
[data-skin="arena"] .best-answer-box,
[data-skin="arena"] .stat-card,
[data-skin="arena"] .esa-editor,
[data-skin="arena"] .form-group [data-editor],
[data-skin="arena"] .ach-trophy-card,
[data-skin="arena"] .trophy-item,
[data-skin="arena"] .fi-bs-item,
[data-skin="arena"] .mod-bar { position: relative; }
[data-skin="arena"] .ar-panel::after,
[data-skin="arena"] .card::after,
[data-skin="arena"] .widget::after,
[data-skin="arena"] .fi-widget::after,
[data-skin="arena"] .fi-forum-list::after,
[data-skin="arena"] .topic-list::after,
[data-skin="arena"] .post::after,
[data-skin="arena"] .reply-card::after,
[data-skin="arena"] .poll-card::after,
[data-skin="arena"] .subforum-card::after,
[data-skin="arena"] .user-card::after,
[data-skin="arena"] .result-list::after,
[data-skin="arena"] .settings-nav::after,
[data-skin="arena"] .fi-toolbar::after,
[data-skin="arena"] .fi-resume-card::after,
[data-skin="arena"] .search-filters::after,
[data-skin="arena"] .best-answer-box::after,
[data-skin="arena"] .stat-card::after,
[data-skin="arena"] .dropdown::after,
[data-skin="arena"] .cookie-bar::after,
[data-skin="arena"] .esa-editor::after,
[data-skin="arena"] .form-group [data-editor]::after,
[data-skin="arena"] .fi-bs-item::after,
[data-skin="arena"] .mod-bar::after {
    content: '';
    position: absolute;
    top: calc(var(--ar-notch) * .5 - 1px);
    right: calc(var(--ar-notch) * -.21);
    width: calc(var(--ar-notch) * 1.4142);
    height: 1px;
    background: var(--ar-line-2);
    transform: rotate(45deg);
    transform-origin: center;
    pointer-events: none;
    z-index: 3;
}

/* ── 5. BUTTONS ─────────────────────────────────────────────────────── */
[data-skin="arena"] .btn {
    position: relative;
    overflow: hidden;
    border-radius: 0;
    clip-path: var(--ar-clip-btn);
    font-family: var(--ar-display);
    font-weight: 700;
    font-size: 13.5px;
    text-transform: uppercase;
    letter-spacing: .08em;
    transition: color var(--ar-fast) var(--ar-ease), background-color var(--ar-fast) var(--ar-ease), border-color var(--ar-fast) var(--ar-ease), transform var(--ar-fast) var(--ar-ease);
}
[data-skin="arena"] .btn:active { transform: translateY(1px); }
/* Edge sweep on hover: a diagonal light passes once across the button */
[data-skin="arena"] .btn::after {
    content: '';
    position: absolute;
    top: -20%; bottom: -20%;
    left: -30%;
    width: 24%;
    background: linear-gradient(100deg, transparent, rgba(255,255,255,.35), transparent);
    transform: translateX(-120%) skewX(-18deg);
    pointer-events: none;
    opacity: 0;
}
[data-skin="arena"] .btn:hover::after { animation: arSweep 520ms var(--ar-ease) 1 both; }
[data-skin="arena"] .btn-primary {
    background: var(--ar-accent);
    color: var(--ar-on-accent);
    box-shadow: none;
    border-color: transparent;
}
[data-skin="arena"] .btn-primary:hover { background: #4cf08f; color: var(--ar-on-accent); transform: translateY(-1px); box-shadow: none; }
[data-skin="arena"] .btn-ghost {
    background: var(--ar-surface-2);
    color: var(--ar-text);
    border-color: transparent;
    box-shadow: inset 0 0 0 1px var(--ar-line-2);
}
[data-skin="arena"] .btn-ghost:hover { background: var(--ar-surface-3); color: var(--ar-text); box-shadow: inset 0 0 0 1px var(--ar-accent-line); border-color: transparent; }
[data-skin="arena"] .btn-danger { background: var(--ar-danger); color: #1a0606; }
[data-skin="arena"] .btn-danger:hover { color: #1a0606; filter: none; background: #ff7676; }
[data-skin="arena"] .btn-sm { border-radius: 0; font-size: 12px; letter-spacing: .05em; }
[data-skin="arena"] .btn-lg { clip-path: var(--ar-clip-btn-lg); font-size: 14px; }
[data-skin="arena"] .btn:focus-visible { box-shadow: inset 0 0 0 2px var(--ar-accent); outline: none; }
[data-skin="arena"] .btn-primary:focus-visible { box-shadow: inset 0 0 0 2px var(--ar-void); }
/* Gold "featured / premium" variant */
[data-skin="arena"] .btn-gold,
[data-skin="arena"] .btn.following,
[data-skin="arena"] .bookmark-btn.saved,
[data-skin="arena"] .topic-follow.following { background: var(--ar-gold); color: #1a1200; box-shadow: none; }
[data-skin="arena"] .btn-gold:hover,
[data-skin="arena"] .btn.following:hover,
[data-skin="arena"] .bookmark-btn.saved:hover,
[data-skin="arena"] .topic-follow.following:hover { background: #ffd069; color: #1a1200; box-shadow: none; }

/* Icon buttons */
[data-skin="arena"] .icon-btn { border-radius: 0; color: var(--ar-dim); }
[data-skin="arena"] .icon-btn:hover { background: var(--ar-surface-2); color: var(--ar-text); border-color: transparent; }
[data-skin="arena"] .badge-count {
    border-radius: 0;
    clip-path: var(--ar-clip-hex);
    background: var(--ar-accent);
    color: var(--ar-on-accent);
    border: 0;
    font-size: 10px;
    padding: 0 8px;
    min-width: 22px;
    height: 17px;
    top: -3px; right: -8px;
}

/* ── 6. BADGES / CHIPS / TAGS / PILLS ───────────────────────────────── */
[data-skin="arena"] .badge,
[data-skin="arena"] .tag,
[data-skin="arena"] .chip,
[data-skin="arena"] .prefix,
[data-skin="arena"] .role-pill,
[data-skin="arena"] .fi-pill,
[data-skin="arena"] .pill-count,
[data-skin="arena"] .new-pill,
[data-skin="arena"] .badge-pin,
[data-skin="arena"] .badge-lock,
[data-skin="arena"] .op-badge,
[data-skin="arena"] .pa-role,
[data-skin="arena"] .pa-level,
[data-skin="arena"] .pa-srv-rank,
[data-skin="arena"] .fi-sf-chip,
[data-skin="arena"] .att-chip,
[data-skin="arena"] .xp-streak-chip,
[data-skin="arena"] .twofa-status,
[data-skin="arena"] .fi-cat-count,
[data-skin="arena"] .sort-tab,
[data-skin="arena"] .lb-tab,
[data-skin="arena"] .fi-eyebrow {
    border-radius: 0;
    clip-path: var(--ar-clip-hex);
    padding-left: 12px;
    padding-right: 12px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
    font-size: 11px;
    border-color: transparent;
}
[data-skin="arena"] .tag { background: var(--ar-surface-2); color: var(--ar-dim); box-shadow: inset 0 0 0 1px var(--ar-line-2); text-transform: none; letter-spacing: 0; font-weight: 600; }
[data-skin="arena"] .tag:hover { color: var(--ar-accent); box-shadow: inset 0 0 0 1px var(--ar-accent-line); }
[data-skin="arena"] .chip { background: var(--ar-surface-2); color: var(--ar-dim); text-transform: none; letter-spacing: 0; }
[data-skin="arena"] .badge-pin { background: var(--ar-gold-soft); color: var(--ar-gold); }
[data-skin="arena"] .badge-lock { background: rgba(255,92,92,.14); color: var(--ar-danger); }
[data-skin="arena"] .badge-new,
[data-skin="arena"] .new-pill { background: var(--ar-accent); color: var(--ar-on-accent); }
[data-skin="arena"] .role-pill { background: var(--ar-accent-soft); color: var(--ar-accent); }
[data-skin="arena"] .op-badge { background: var(--ar-accent); color: var(--ar-on-accent); padding: 2px 9px; }
[data-skin="arena"] .pa-level { background: var(--ar-gold-soft); color: var(--ar-gold); }
[data-skin="arena"] .fi-pill,
[data-skin="arena"] .pill-count { background: var(--ar-surface-3); color: var(--ar-text); }
[data-skin="arena"] .prefix { clip-path: var(--ar-clip-arrow); padding-right: 14px; }

/* ── 7. FORMS ───────────────────────────────────────────────────────── */
[data-skin="arena"] .input,
[data-skin="arena"] input[type=text],
[data-skin="arena"] input[type=email],
[data-skin="arena"] input[type=password],
[data-skin="arena"] input[type=number],
[data-skin="arena"] input[type=url],
[data-skin="arena"] input[type=search],
[data-skin="arena"] select,
[data-skin="arena"] textarea {
    background: var(--ar-void);
    border: 1px solid var(--ar-line-2);
    border-radius: 0;
    color: var(--ar-text);
    clip-path: polygon(var(--ar-notch-sm) 0, 100% 0, 100% 100%, 0 100%, 0 var(--ar-notch-sm));
    transition: border-color var(--ar-fast) var(--ar-ease), background-color var(--ar-fast) var(--ar-ease), box-shadow var(--ar-fast) var(--ar-ease);
}
[data-skin="arena"] .input:focus,
[data-skin="arena"] input:focus,
[data-skin="arena"] select:focus,
[data-skin="arena"] textarea:focus {
    border-color: var(--ar-accent);
    background: var(--ar-surface);
    box-shadow: inset 3px 0 0 var(--ar-accent);
}
[data-skin="arena"] .form-group label,
[data-skin="arena"] .form-label {
    font-family: var(--ar-mono);
    font-size: 11px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ar-dim);
}
[data-skin="arena"] .form-hint,
[data-skin="arena"] .input-help { color: var(--ar-mute); }
[data-skin="arena"] select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2331e07a' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
}
[data-skin="arena"] input[type=checkbox],
[data-skin="arena"] input[type=radio] { accent-color: var(--ar-accent); clip-path: none; }

/* ── 8. ALERTS / TOASTS ─────────────────────────────────────────────── */
[data-skin="arena"] .alert {
    border-radius: 0;
    border: 0;
    clip-path: var(--ar-clip-panel);
    background: var(--ar-surface-2);
    color: var(--ar-text);
    box-shadow: inset 4px 0 0 var(--ar-accent);
    font-weight: 600;
}
[data-skin="arena"] .alert-success { box-shadow: inset 4px 0 0 var(--ar-accent); background: rgba(49,224,122,.09); }
[data-skin="arena"] .alert-error { box-shadow: inset 4px 0 0 var(--ar-danger); background: rgba(255,92,92,.09); color: #ffb3b3; }
[data-skin="arena"] .alert-info { box-shadow: inset 4px 0 0 var(--ar-dim); background: var(--ar-surface-2); }
[data-skin="arena"] .alert-warn { box-shadow: inset 4px 0 0 var(--ar-gold); background: rgba(255,194,61,.09); color: #ffe1a0; }
[data-skin="arena"] .esa-toast {
    border-radius: 0;
    clip-path: var(--ar-clip-btn);
    background: var(--ar-accent);
    color: var(--ar-on-accent);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .05em;
    font-size: 12px;
    border: 0;
}
[data-skin="arena"] .announce-bar {
    position: relative;
    background: var(--ar-accent);
    color: var(--ar-on-accent);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .04em;
    font-size: 12.5px;
    border: 0;
}
[data-skin="arena"] .announce-bar a { color: var(--ar-on-accent); text-decoration: underline; }
[data-skin="arena"] .announce-bar::after {
    content: '';
    position: absolute;
    right: 0; top: 0; bottom: 0;
    width: 22%;
    background: repeating-linear-gradient(135deg, rgba(0,0,0,.18) 0 8px, transparent 8px 16px);
    clip-path: polygon(24px 0, 100% 0, 100% 100%, 0 100%);
    pointer-events: none;
}

/* ── 9. DROPDOWNS / MENUS ───────────────────────────────────────────── */
[data-skin="arena"] .dropdown {
    background: var(--ar-surface);
    border: 1px solid var(--ar-line-2);
    border-top: 3px solid var(--ar-accent);
    box-shadow: 0 30px 60px -20px rgba(0,0,0,.85);
    padding: 6px;
}
[data-skin="arena"] .dropdown a,
[data-skin="arena"] .dropdown button {
    border-radius: 0;
    color: var(--ar-dim);
    font-weight: 600;
    clip-path: polygon(var(--ar-notch-sm) 0, 100% 0, 100% 100%, 0 100%, 0 var(--ar-notch-sm));
}
[data-skin="arena"] .dropdown a:hover,
[data-skin="arena"] .dropdown button:hover { background: var(--ar-surface-2); color: var(--ar-text); box-shadow: inset 3px 0 0 var(--ar-accent); }
[data-skin="arena"] .dropdown .divider { background: var(--ar-line-2); }
[data-skin="arena"] .hdr-panel-head { border-bottom: 1px solid var(--ar-line-2); }
[data-skin="arena"] .hdr-panel-head b { font-weight: 900; text-transform: uppercase; letter-spacing: .04em; font-size: 12px; }
[data-skin="arena"] .hdr-panel-head a { font-family: var(--ar-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; }
[data-skin="arena"] .hdr-loading::before,
[data-skin="arena"] .hdr-loading::after,
[data-skin="arena"] .shout-loading::before { border-radius: 0; clip-path: var(--ar-clip-btn); pointer-events: none; }
[data-skin="arena"] .skeleton { border-radius: 0; }

/* ── 10. HEADER / NAV ───────────────────────────────────────────────── */
[data-skin="arena"] .site-header {
    position: sticky;
    background: rgba(8,13,18,.94);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-bottom: 1px solid var(--ar-line-2);
    box-shadow: none;
    transition: box-shadow var(--ar-med) var(--ar-ease), background-color var(--ar-med) var(--ar-ease);
}
/* Accent hairline that grows in from the left; JS marks .ar-scrolled */
[data-skin="arena"] .site-header::after { content: none; }
[data-skin="arena"] .site-header.ar-scrolled { box-shadow: 0 16px 40px -20px rgba(0,0,0,.9); background: rgba(8,13,18,.98); }

[data-skin="arena"] .brand { color: var(--ar-text); }
[data-skin="arena"] .brand .logo-mark { border-radius: 0; clip-path: var(--ar-clip-btn); background: var(--ar-accent); color: var(--ar-on-accent); box-shadow: none; }
[data-skin="arena"] .brand b { background: none; -webkit-text-fill-color: currentColor; color: var(--ar-accent); }
[data-skin="arena"] .main-nav a:not(.btn),
[data-skin="arena"] #moreMenu .trigger {
    position: relative;
    border-radius: 0;
    color: var(--ar-dim);
    font-weight: 800;
    font-size: 12.5px;
    text-transform: uppercase;
    letter-spacing: .08em;
    transition: color var(--ar-fast) var(--ar-ease), background-color var(--ar-fast) var(--ar-ease);
}
[data-skin="arena"] .main-nav a:not(.btn):hover,
[data-skin="arena"] #moreMenu .trigger:hover { color: var(--ar-text); background: transparent; }
[data-skin="arena"] .main-nav a.active {
    color: var(--ar-text);
    background: transparent;
    box-shadow: none;
}
[data-skin="arena"] .main-nav a:not(.btn)::after {
    content: '';
    position: absolute;
    left: 13px; right: 13px; bottom: 3px;
    height: 3px;
    background: var(--ar-accent);
    clip-path: polygon(0 0, 100% 0, calc(100% - 3px) 100%, 0 100%);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--ar-med) var(--ar-ease);
    pointer-events: none;
}
[data-skin="arena"] .main-nav a:not(.btn):hover::after,
[data-skin="arena"] .main-nav a.active::after { transform: scaleX(1); }
[data-skin="arena"] .main-nav a.active::after { background: var(--ar-accent); }
[data-skin="arena"] .search-mini {
    border-radius: 0;
    background: var(--ar-void);
    border: 1px solid var(--ar-line-2);
    border-left: 3px solid var(--ar-line-2);
}
[data-skin="arena"] .search-mini:focus-within { border-color: var(--ar-accent); box-shadow: none; }
[data-skin="arena"] .search-mini .icon { color: var(--ar-accent); }
[data-skin="arena"] .search-mini input { font-family: var(--ar-mono); font-size: 12.5px; }
[data-skin="arena"] .search-mini .search-results { border-radius: 0; background: var(--ar-surface); border: 1px solid var(--ar-line-2); border-top: 3px solid var(--ar-accent); box-shadow: 0 30px 60px -20px rgba(0,0,0,.85); }
[data-skin="arena"] .search-mini .search-results a { border-radius: 0; }
[data-skin="arena"] .search-mini .search-results a:hover { background: var(--ar-surface-2); color: var(--ar-text); box-shadow: inset 3px 0 0 var(--ar-accent); }
[data-skin="arena"] .user-menu .trigger { border-radius: 0; }
[data-skin="arena"] .user-menu .trigger:hover { background: var(--ar-surface-2); }
[data-skin="arena"] .user-menu .trigger span { text-transform: uppercase; letter-spacing: .04em; font-size: 12.5px !important; font-weight: 800 !important; }
[data-skin="arena"] .user-menu .trigger .avatar.sm { box-shadow: 0 0 0 2px var(--ar-void), 0 0 0 3px var(--ar-accent-line); }
[data-skin="arena"] .user-menu .trigger:hover .avatar.sm { box-shadow: 0 0 0 2px var(--ar-void), 0 0 0 3px var(--ar-accent); }
[data-skin="arena"] .nav-toggle { font-size: 18px; }
[data-skin="arena"] .cookie-bar { background: var(--ar-surface); border: 1px solid var(--ar-line-2); box-shadow: 0 30px 60px -20px rgba(0,0,0,.85); }

/* ── 11. CHARACTER SLOT SYSTEM ──────────────────────────────────────
   Generic classes (usable by templates / Theme Editor) + the concrete slots
   bound to existing pseudo-elements below. Ring + arc + glow are drawn in
   CSS BEHIND the image; the image is a background (no DOM, no layout shift,
   no request while the variable is unset). ──────────────────────────── */
[data-skin="arena"] .ar-char {
    position: absolute;
    right: var(--ar-char-x, 0px);
    top: -6%;
    bottom: -8%;
    width: var(--ar-char-w, 44%);
    pointer-events: none;
    z-index: 1;
    background: var(--ar-char, none) no-repeat right bottom / contain;
}
[data-skin="arena"] .ar-ring { display: none; }

/* ── 12. FORUM INDEX ────────────────────────────────────────────────── */
/* Hero chrome only (works for video / image heroes too). Layout rules —
   display, min-height, background, z-lifts — live ONLY under .fi-hero--off. */
[data-skin="arena"] .fi-hero {
    border: 0;
    border-radius: 0;
    box-shadow: none;
    margin-bottom: 0;
    clip-path: var(--ar-clip-slant-b);
}
[data-skin="arena"] .fi-hero h1 { font-size: 54px; margin: 0 0 14px; color: var(--ar-text); }
[data-skin="arena"] .fi-hero p { font-family: var(--ar-body); color: var(--ar-dim); font-size: 15px; max-width: 520px; font-weight: 500; }
[data-skin="arena"] .fi-eyebrow { background: var(--ar-surface); box-shadow: inset 0 0 0 1px var(--ar-accent-line); color: var(--ar-accent); padding: 6px 16px; margin-bottom: 18px; }
[data-skin="arena"] .fi-eyebrow-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ar-online); box-shadow: 0 0 5px var(--ar-online); animation: arPulse 2.2s ease-in-out infinite; }
[data-skin="arena"] .fi-hero-stats { gap: 6px; }
[data-skin="arena"] .fi-stat {
    border-radius: 0;
    clip-path: var(--ar-clip-btn);
    background: rgba(8,13,18,.72);
    border: 0;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    min-width: 96px;
    padding: 14px 18px 12px;
    box-shadow: inset 0 0 0 1px var(--ar-line-2);
    transition: box-shadow var(--ar-fast) var(--ar-ease), background-color var(--ar-fast) var(--ar-ease);
}
[data-skin="arena"] .fi-stat:hover { background: rgba(16,26,34,.9); box-shadow: inset 0 0 0 1px var(--ar-accent-line); }
[data-skin="arena"] .fi-stat b { font-size: 32px; line-height: 1; color: var(--ar-text); }
[data-skin="arena"] .fi-stat span { font-family: var(--ar-mono); font-size: 10px; letter-spacing: .16em; color: var(--ar-mute); }
[data-skin="arena"] .fi-stat.fi-stat-online b { color: var(--ar-online); text-shadow: 0 0 18px rgba(49,224,122,.5); }
[data-skin="arena"] .fi-hero--media .fi-hero-inner { padding: 56px 48px 72px; }

/* Off-mode hero: the full ARENA composition. */
[data-skin="arena"] .fi-hero--off {
    min-height: 420px;
    display: flex;
    align-items: center;
    overflow: hidden;
    background:
        radial-gradient(800px 420px at 0% 100%, rgba(49,224,122,.14), transparent 62%),
        radial-gradient(600px 400px at 100% 0%, rgba(255,194,61,.07), transparent 60%),
        linear-gradient(180deg, var(--ar-surface) 0%, var(--ar-bg) 100%);
}
[data-skin="arena"] .fi-hero--off .fi-hero-inner { padding: 64px 56px 88px; gap: 40px; position: relative; z-index: 2; }
[data-skin="arena"] .fi-hero--off > * { position: relative; z-index: 2; }
/* SLOT: board hero — ring / arc / glow (behind) */
[data-skin="arena"] .fi-hero--off::before { content: none; }
/* SLOT: board hero — the image (front, bleeds out of the frame) */
[data-skin="arena"] .fi-hero--off::after {
    content: '';
    position: absolute;
    left: auto;
    right: var(--ar-char-x, 0px);
    top: 4%;
    bottom: 0;
    width: var(--ar-char-hero-w, 42%);
    height: auto;
    border-radius: 0;
    pointer-events: none;
    z-index: 1;
    background:
        var(--ar-char-hero, none) no-repeat right bottom / contain;
    mask-image: linear-gradient(90deg, transparent 0, #000 22%);
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 22%);
    transform: translate3d(calc(var(--ar-px, 0) * 3px), calc(var(--ar-py, 0) * 3px), 0);
    transition: transform 500ms var(--ar-ease);
}
[data-skin="arena"] .fi-hero--off .fi-hero-stats { position: relative; z-index: 2; }

/* Slanted accent band between hero and board — the ~half of "not a normal
   website". Drawn on the board row so the media hero stays untouched. */
[data-skin="arena"] .fi-hero ~ .row { position: relative; padding-top: 30px; }
[data-skin="arena"] .fi-hero ~ .row::before {
    content: '';
    position: absolute;
    left: -18px; right: -18px;
    top: -18px;
    height: 34px;
    background: linear-gradient(90deg, var(--ar-accent) 0 62%, var(--ar-gold) 62% 66%, transparent 66%);
    clip-path: polygon(0 0, 100% 0, 100% 30%, 0 100%);
    pointer-events: none;
    z-index: 1;               /* below the sidebar (z 2): the widget cuts through the band */
    opacity: .95;
}
[data-skin="arena"] .fi-hero ~ .partners-section + .row::before { display: none; }
[data-skin="arena"] .fi-hero ~ .partners-section + .row > .col-side { margin-top: 0; }

/* Board toolbar + resume */
[data-skin="arena"] .fi-toolbar { background: var(--ar-surface); border: 1px solid var(--ar-line-2); padding: 10px 18px; }
[data-skin="arena"] .fi-toolbar-label { color: var(--ar-accent); }
[data-skin="arena"] .fi-resume-head { margin-bottom: 10px; }
[data-skin="arena"] .fi-resume-card { background: var(--ar-surface); border: 1px solid var(--ar-line-2); box-shadow: inset 3px 0 0 var(--ar-accent); }
[data-skin="arena"] .fi-resume-card:hover { transform: none; border-color: var(--ar-accent-line); background: var(--ar-surface-2); }
[data-skin="arena"] .fi-resume-title { font-family: var(--ar-display); font-weight: 600; letter-spacing: .03em; text-transform: uppercase; }
[data-skin="arena"] .fi-resume-meta { font-family: var(--ar-mono); font-size: 10.5px; letter-spacing: .06em; }

/* Category: section header pattern + ribbon + index numeral */
[data-skin="arena"] .col-main { counter-reset: arcat; }
[data-skin="arena"] .fi-category { margin-bottom: 44px; counter-increment: arcat; }
[data-skin="arena"] .fi-cat-head { margin-bottom: 0; }
[data-skin="arena"] .fi-cat-bar {
    position: relative;
    border-radius: 0;
    border: 1px solid var(--ar-line-2);
    border-bottom: 0;
    background: linear-gradient(90deg, var(--ar-surface-2) 0%, var(--ar-surface) 60%);
    overflow: hidden;
    min-height: 74px;
    clip-path: var(--ar-clip-panel);
    align-items: stretch;
}
/* SLOT: category header — small character at the right end (ring stands alone) */
[data-skin="arena"] .fi-cat-bar::after { content: none; }
/* The ribbon tag: accent strip slicing across the top-left corner */
[data-skin="arena"] .fi-cat-accent { display: none; }
[data-skin="arena"] .fi-cat-label { padding: 18px 20px 18px 26px; position: relative; z-index: 1; gap: 14px; }
[data-skin="arena"] .fi-cat-emoji { font-size: 26px; width: auto; }
[data-skin="arena"] .fi-cat-ico { border-radius: 0; width: 26px; height: 26px; }
[data-skin="arena"] .fi-cat-title {
    font-family: var(--ar-display);
    font-size: 26px;
    font-weight: 700;
    letter-spacing: .045em;
    line-height: 1;
    padding-bottom: 9px;
}
[data-skin="arena"] .fi-cat-title::after {
    content: '';
    position: absolute;
    left: 0; bottom: 0;
    width: 40px; height: 3px;
    background: var(--ar-accent);
    clip-path: polygon(0 0, 100% 0, calc(100% - 3px) 100%, 0 100%);
    pointer-events: none;
}
[data-skin="arena"] .fi-cat-count {
    position: relative;
    z-index: 1;
    align-self: center;
    margin-right: 18px;
    background: var(--ar-void);
    color: var(--ar-accent);
    box-shadow: inset 0 0 0 1px var(--ar-accent-line);
    padding: 5px 14px;
}
[data-skin="arena"] .fi-cat-bar.has-banner { background: linear-gradient(90deg, rgba(8,13,18,.94) 0%, rgba(8,13,18,.72) 45%, rgba(8,13,18,.5) 100%), var(--cat-bg) center/cover no-repeat; border-color: var(--ar-accent-line); }

/* Featured (first) category: visibly larger, gold ribbon */
[data-skin="arena"] .col-main > section.fi-category:first-of-type .fi-cat-bar { min-height: 96px; }
[data-skin="arena"] .col-main > section.fi-category:first-of-type .fi-cat-title { font-size: 38px; letter-spacing: .035em; }
[data-skin="arena"] .col-main > section.fi-category:first-of-type .fi-cat-accent { background: var(--ar-gold); height: 18px; }
[data-skin="arena"] .col-main > section.fi-category:first-of-type .fi-cat-bar::before { font-size: 100px; -webkit-text-stroke-color: rgba(255,194,61,.14); }
[data-skin="arena"] .col-main > section.fi-category:first-of-type .fi-cat-bar::after {
    width: 260px; height: 190%; top: -45%; right: 110px;
    background:
        var(--ar-char-cat, none) no-repeat right bottom / contain,
        radial-gradient(circle at 60% 50%, transparent 54px, rgba(255,194,61,.5) 55px, rgba(255,194,61,.5) 56px, transparent 57px),
        radial-gradient(circle at 60% 50%, transparent 66px, rgba(255,255,255,.06) 67px, rgba(255,255,255,.06) 68px, transparent 69px),
        radial-gradient(circle at 60% 50%, rgba(255,194,61,.14), transparent 60%);
}
[data-skin="arena"] .col-main > section.fi-category:first-of-type .fi-cat-count { color: var(--ar-gold); box-shadow: inset 0 0 0 1px rgba(255,194,61,.45); }
[data-skin="arena"] .col-main > section.fi-category:first-of-type .fi-cat-title::after { background: var(--ar-gold); }

/* ── Forum list + rows ───────────────────────────────────────────────
   THREE DENSITY TIERS so the eye has somewhere to land:
     LEAD  — first row of the first category + any admin-featured row:
             tall, 26px display title, STACKED stat cluster with ring slot.
     STD   — 18px display title, stats INLINE (so the row is as tall as its
             own text, not as tall as a stacked stat column).
     QUIET — a row with no subforums (:has fallback = STD): compact,
             16px title, small icon, small avatar. Density is a feature.
   Every title is the DISPLAY face, uppercase, positively tracked. */
[data-skin="arena"] .fi-forum-list { border: 1px solid var(--ar-line-2); border-top: 1px solid var(--ar-line-2); background: var(--ar-surface); clip-path: var(--ar-clip-panel-bl); }
[data-skin="arena"] .fi-forum-list::after { display: none; }
[data-skin="arena"] .fi-row {
    grid-template-columns: 56px 1fr 140px 280px;
    gap: 18px;
    padding: 22px 26px;
    /* Match the base rhythm: every row the same height, whatever it holds.
       Uneven rows were the "not equal" complaint. */
    min-height: 186px;
    align-items: center;
    background-color: var(--ar-surface);
    border-top: 1px solid var(--ar-line);
    transition: background-color var(--ar-fast) var(--ar-ease);
}
/* HARD RULE: never the `background` shorthand on .fi-row:hover — per-forum
   banner images live in the row's background layers. background-color only. */
[data-skin="arena"] .fi-row:hover { background-color: var(--ar-surface); }
/* Left stripe becomes a BLADE: chamfered top and bottom, forum-coloured */
[data-skin="arena"] .fi-row::before {
    width: 3px; border-radius: 0; opacity: 0;
    background: var(--ar-accent);
    pointer-events: none;
    transition: opacity var(--ar-fast) var(--ar-ease);
}
[data-skin="arena"] .fi-row:hover::before { opacity: .8; }
[data-skin="arena"] .fi-row.is-unread::before { opacity: .55; box-shadow: none; }
/* Icon tile: chamfered, forum-coloured */
[data-skin="arena"] .fi-icon {
    width: 50px; height: 50px;
    border-radius: 0;
    clip-path: var(--ar-clip-btn);
    border: 0;
    background: var(--ar-surface-2);
    box-shadow: inset 0 0 0 1px var(--ar-border, rgba(255,255,255,.09));
    transition: transform var(--ar-med) var(--ar-ease), box-shadow var(--ar-fast) var(--ar-ease);
}
[data-skin="arena"] .fi-row:hover .fi-icon { transform: translateY(-2px); box-shadow: inset 0 0 0 1px var(--ar-accent); }
[data-skin="arena"] .fi-row.is-unread .fi-icon { box-shadow: inset 0 0 0 1px var(--ar-accent); }
[data-skin="arena"] .fi-icon-emoji { font-size: 24px; }
[data-skin="arena"] .fi-info { align-self: center; }
/* ROW TITLE — the loudest identity signal on the page */
[data-skin="arena"] .fi-info h3 {
    font-family: var(--ar-display);
    font-size: 17.5px;
    font-weight: 600;
    letter-spacing: .005em;
    text-transform: none;
    line-height: 1.25;
    margin: 0 0 6px;
}
[data-skin="arena"] .fi-info h3 a { color: var(--ar-text); }
[data-skin="arena"] .fi-info h3 a:hover { color: var(--ar-accent); }
[data-skin="arena"] .fi-row.is-unread .fi-info h3 a { color: #fff; font-weight: 700; }
[data-skin="arena"] .fi-row.is-read .fi-info h3 a { color: #d3dee5; font-weight: 600; }
[data-skin="arena"] .fi-row.is-read .fi-info h3 a:hover { color: var(--ar-accent); }
/* Description = the ONLY body-face text in the row. Never uppercase. */
[data-skin="arena"] .fi-row .fi-desc { font-family: var(--ar-body); color: var(--ar-mute); font-size: 12.5px; line-height: 1.5; max-width: 640px; }
[data-skin="arena"] .fi-desc a { color: var(--ar-accent); }
/* Subforum chips: mono, uppercase, tracked, small — a technical tag, not a pill */
[data-skin="arena"] .fi-subforums { gap: 5px 6px; margin-top: 7px; }
[data-skin="arena"] .fi-sf-chip {
    font-family: var(--ar-mono);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: .1em;
    text-transform: uppercase;
    background: var(--ar-void);
    color: var(--ar-dim);
    box-shadow: inset 0 0 0 1px var(--ar-line-2);
    padding: 3px 12px 3px 10px;
    gap: 6px;
    opacity: 1;
}
[data-skin="arena"] .fi-sf-chip:hover { background: var(--ar-surface-3); color: var(--ar-text); box-shadow: inset 0 0 0 1px var(--ar-accent-line); transform: none; }
[data-skin="arena"] .fi-sf-more { color: var(--ar-accent); background: var(--ar-accent-soft); box-shadow: inset 0 0 0 1px var(--ar-accent-line); }
[data-skin="arena"] .fi-sf-dot { border-radius: 50%; width: 4px; height: 4px; transform: none; box-shadow: none; background: var(--ar-mute); }
/* Stats column: display numerals over mono units. STD rows lay the two stats
   INLINE (side by side) so a stacked column never sets the row height. */
[data-skin="arena"] .fi-row .fi-stats { flex-direction: row; align-items: center; justify-content: center; gap: 14px; padding: 4px 0; }
[data-skin="arena"] .fi-stats-row { width: auto; padding: 0; }
[data-skin="arena"] .fi-stats-row b { font-size: 20px; line-height: 1; color: var(--ar-text); }
[data-skin="arena"] .fi-stats-row span { font-family: var(--ar-mono); font-size: 9px; letter-spacing: .18em; color: var(--ar-mute); margin-top: 3px; }
[data-skin="arena"] .fi-row .fi-stats-sep { width: 1px; height: 26px; background: var(--ar-line-2); margin: 0; }

/* The right column is a composed ACTIVITY PANEL: slanted left edge, full row
   height, mono "LATEST" label, chamfered forum-coloured avatar frame,
   display-face topic title, mono by-line. Not loose text. */
[data-skin="arena"] .fi-last {
    position: relative;
    margin: 0;
    padding: 0 0 0 8px;
    background: transparent;
    align-self: stretch;
    display: flex;
    align-items: center;
    gap: 12px;
    transition: background-color var(--ar-fast) var(--ar-ease);
}

/* Avatar frame: the wrapping link becomes a chamfered, forum-coloured bezel */
[data-skin="arena"] .fi-last > a {
    display: block;
    flex-shrink: 0;
    padding: 2px;
    background: linear-gradient(160deg, var(--ar-surface-3), var(--ar-surface-2) 80%);
    clip-path: var(--ar-clip-btn);
    transition: transform var(--ar-med) var(--ar-ease);
}
[data-skin="arena"] .fi-row:hover .fi-last > a { transform: translateY(-2px); }
[data-skin="arena"] .fi-last-ava { width: 40px; height: 40px; border-radius: 0; box-shadow: none; clip-path: var(--ar-clip-btn); background: var(--ar-void); }
[data-skin="arena"] .fi-last-meta { min-width: 0; flex: 1; }
[data-skin="arena"] .fi-last-topic {
    font-family: var(--ar-display);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .035em;
    text-transform: uppercase;
    color: var(--ar-text);
    line-height: 1.2;
}
[data-skin="arena"] .fi-last-topic b { font-weight: inherit; }
[data-skin="arena"] .fi-last-topic:hover { color: var(--ar-accent); }
[data-skin="arena"] .fi-last-by { font-family: var(--ar-mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--ar-mute); margin-top: 4px; }
[data-skin="arena"] .fi-last-author { color: var(--ar-accent); font-size: 10px; letter-spacing: .08em; }
[data-skin="arena"] .fi-last-author:hover { color: var(--ar-text); }
[data-skin="arena"] .fi-last-empty { font-family: var(--ar-mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ar-mute); }

/* SLOT: a ring behind the activity panel (character render drops in). */
[data-skin="arena"] .col-main > section.fi-category:first-of-type .fi-row:first-child::after,
[data-skin="arena"] .fi-row--featured::after {
    content: '';
    position: absolute;
    right: 300px; top: -20%;
    width: 220px; height: 140%;
    pointer-events: none;
    z-index: 0;
    /* The slot shows nothing until a character render is set — no ring, no glow. */
    background: var(--ar-char-row, none) no-repeat right bottom / contain;
}
[data-skin="arena"] .col-main > section.fi-category:first-of-type .fi-row:first-child > *,
[data-skin="arena"] .fi-row--featured > * { position: relative; z-index: 1; }
/* Admin-featured rows: GOLD ribbon slicing the top-left corner */
[data-skin="arena"] .fi-row--featured { background-color: var(--ar-surface); animation: none; }
[data-skin="arena"] .fi-featured-fx { display: none; }
[data-skin="arena"] .fi-featured-badge {
    position: absolute;
    left: -38px; top: 14px;
    width: 150px;
    padding: 3px 0;
    text-align: center;
    background: var(--ar-gold);
    color: #1a1200;
    font-family: var(--ar-mono);
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    transform: rotate(-45deg);
    border-radius: 0;
    box-shadow: 0 0 0 2px var(--ar-void);
    z-index: 4;
    animation: none;
    pointer-events: none;
}
[data-skin="arena"] .fi-row--featured .fi-icon { margin-top: 10px; }
[data-skin="arena"] .fi-row--featured::before { background: var(--ar-gold); opacity: 1; }
[data-skin="arena"] .fi-row--featured::after {
    background: var(--ar-char-row, none) no-repeat right bottom / contain;
}
[data-skin="arena"] .fi-row.has-banner { background: linear-gradient(90deg, var(--ar-surface) 0%, var(--ar-surface) 30%, rgba(8,13,18,.82) 55%, rgba(8,13,18,.55) 100%), var(--forum-bg) right center / cover no-repeat; }
[data-skin="arena"] .fi-row.has-banner .fi-last { background: rgba(8,13,18,.72); }
[data-skin="arena"] .fi-category.fade-up .fi-row { animation-name: arRowIn; }

/* Sidebar: bleeds off the right edge and overlaps up into the hero band. */
[data-skin="arena"] .col-side { position: relative; z-index: 2; margin-right: calc(-1 * var(--ar-bleed)); }
[data-skin="arena"] .fi-hero ~ .row > .col-side { margin-top: -78px; }
[data-skin="arena"] .fi-hero--media ~ .row > .col-side { margin-top: -78px; }
/* Widgets: notched frame, accent spine, mono index numeral → display heading
   → accent underline. Same header pattern as the category bands. */
[data-skin="arena"] .col-side { counter-reset: arwid; }
[data-skin="arena"] .col-side > .widget { counter-increment: arwid; }
[data-skin="arena"] .widget,
[data-skin="arena"] .fi-widget { background: var(--ar-surface); border: 1px solid var(--ar-line-2); margin-bottom: 20px; box-shadow: 0 24px 50px -30px rgba(0,0,0,.9); }
[data-skin="arena"] .fi-widget:hover { border-color: var(--ar-line-2); }
[data-skin="arena"] .widget-head,
[data-skin="arena"] .fi-widget-head {
    position: relative;
    padding: 18px 20px 16px;
    font-family: var(--ar-display);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    line-height: 1;
    background: linear-gradient(90deg, var(--ar-surface-2), var(--ar-surface) 70%);
    border-bottom: 1px solid var(--ar-line-2);
    box-shadow: inset 3px 0 0 var(--ar-accent);
    color: var(--ar-text);
    gap: 10px;
    overflow: visible;
}
[data-skin="arena"] .col-side > .widget > .widget-head::before {
    content: counter(arwid, decimal-leading-zero);
    flex-shrink: 0;
    font-family: var(--ar-mono);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .16em;
    line-height: 1;
    color: var(--ar-accent);
    background: var(--ar-void);
    box-shadow: inset 0 0 0 1px var(--ar-accent-line);
    padding: 4px 6px 4px 7px;
    clip-path: var(--ar-clip-hex);
}
[data-skin="arena"] .widget-head::after,
[data-skin="arena"] .fi-widget-head::after { left: 20px; bottom: 6px; width: 28px; height: 2px; }
[data-skin="arena"] .fi-widget-head .fi-pill,
[data-skin="arena"] .widget-head .pill-count { font-family: var(--ar-mono); font-size: 10px; letter-spacing: .08em; background: var(--ar-accent); color: var(--ar-on-accent); }
[data-skin="arena"] .fi-widget .widget-body { padding: 12px 14px 14px; }
/* SLOT: sidebar panel — first widget gets a ring in the top-right corner */
[data-skin="arena"] .col-side > .widget:first-child { overflow: hidden; }
[data-skin="arena"] .col-side > .widget:first-child::before {
    content: '';
    position: absolute;
    right: -70px; top: -70px;
    width: 220px; height: 220px;
    pointer-events: none;
    z-index: 0;
    background:
        var(--ar-char-side, none) no-repeat right top / contain,
        radial-gradient(circle at 50% 50%, transparent 78px, var(--ar-accent-line) 79px, var(--ar-accent-line) 80px, transparent 81px),
        radial-gradient(circle at 50% 50%, transparent 94px, rgba(255,255,255,.06) 95px, rgba(255,255,255,.06) 96px, transparent 97px),
        radial-gradient(circle at 50% 50%, rgba(49,224,122,.16), transparent 62%);
    opacity: .9;
}
[data-skin="arena"] .col-side > .widget:first-child > * { position: relative; z-index: 1; }
[data-skin="arena"] .col-side > .widget:first-child::after { z-index: 3; }

/* Board statistics: mono numerals in chamfered cells */
[data-skin="arena"] .fi-board-stats { gap: 8px; padding: 14px 16px; }
[data-skin="arena"] .fi-bs-item { background: var(--ar-void); border: 1px solid var(--ar-line); padding: 12px 10px 10px; --ar-notch: 10px; }
[data-skin="arena"] .fi-bs-item:hover { background: var(--ar-surface-2); border-color: var(--ar-accent-line); }
[data-skin="arena"] .fi-bs-val { font-size: 24px; line-height: 1; }
[data-skin="arena"] .fi-bs-val.online { color: var(--ar-online); text-shadow: 0 0 14px rgba(49,224,122,.45); }
[data-skin="arena"] .fi-bs-label { font-family: var(--ar-mono); font-size: 9.5px; letter-spacing: .16em; }
[data-skin="arena"] .fi-divider { background: var(--ar-line-2); }

/* Avatar rail: circular avatars with accent rings on a hairline rail */
[data-skin="arena"] .online-strip,
[data-skin="arena"] .viewers-bar .vb-list {
    position: relative;
    gap: 10px;
    padding: 8px 0;
}
[data-skin="arena"] .online-strip::before,
[data-skin="arena"] .viewers-bar .vb-list::before {
    content: '';
    position: absolute;
    left: 0; right: 0; top: 50%;
    height: 1px;
    background: linear-gradient(90deg, var(--ar-accent-line), var(--ar-line-2) 60%, transparent);
    pointer-events: none;
}
[data-skin="arena"] .online-strip a { position: relative; }
[data-skin="arena"] .online-strip a img,
[data-skin="arena"] .viewers-bar .vb-list a img {
    width: 34px; height: 34px;
    border-radius: 50%;
    box-shadow: 0 0 0 2px var(--ar-surface), 0 0 0 3px var(--ar-accent-line);
    transition: transform var(--ar-med) var(--ar-ease), box-shadow var(--ar-fast) var(--ar-ease);
}
[data-skin="arena"] .online-strip a:hover img,
[data-skin="arena"] .viewers-bar .vb-list a:hover img { transform: translateY(-3px); box-shadow: 0 0 0 2px var(--ar-surface), 0 0 0 3px var(--ar-accent); }
[data-skin="arena"] .online-strip a:nth-child(3n+1) img { box-shadow: 0 0 0 2px var(--ar-surface), 0 0 0 3px var(--ar-accent); }
[data-skin="arena"] .online-strip a:nth-child(5n) img { box-shadow: 0 0 0 2px var(--ar-surface), 0 0 0 3px rgba(255,194,61,.7); }

/* Rank rows */
/* Rank rows: hairline-separated list rows, hex mono rank, display-face name,
   mono count with a unit-less accent numeral. */
[data-skin="arena"] .rank-list { display: flex; flex-direction: column; }
[data-skin="arena"] .rank-row { border-radius: 0; padding: 8px 8px 8px 6px; gap: 12px; }
[data-skin="arena"] .rank-row + .rank-row { border-top: 1px solid var(--ar-line); }
[data-skin="arena"] .rank-row:hover { background: var(--ar-surface-2); box-shadow: inset 3px 0 0 var(--ar-accent); }
[data-skin="arena"] .rank-row .rk { border-radius: 0; clip-path: var(--ar-clip-hex); width: 30px; height: 22px; font-family: var(--ar-mono); font-size: 11px; font-weight: 600; background: var(--ar-surface-3); color: var(--ar-dim); }
[data-skin="arena"] .rank-row .rk.gold { background: var(--ar-gold); color: #1a1200; }
[data-skin="arena"] .rank-row .rk.silver { background: #d3dde6; color: #0b0e16; }
[data-skin="arena"] .rank-row .rk.bronze { background: #d08b5b; color: #1a0e00; }
[data-skin="arena"] .rank-row .nm { font-family: var(--ar-display); font-weight: 600; font-size: 14px; letter-spacing: .04em; text-transform: uppercase; }
[data-skin="arena"] .rank-row .val { font-family: var(--ar-mono); font-size: 11px; font-weight: 600; letter-spacing: .04em; color: var(--ar-accent); }
[data-skin="arena"] .rank-row .avatar.sm { border-radius: 0; clip-path: var(--ar-clip-btn); box-shadow: none; }
[data-skin="arena"] .fi-champion { border-bottom-color: var(--ar-line-2) !important; }
[data-skin="arena"] .fi-champion > div > div:first-child { font-family: var(--ar-mono); font-size: 9.5px !important; letter-spacing: .16em !important; color: var(--ar-mute) !important; }
[data-skin="arena"] .fi-champion a { font-family: var(--ar-display); font-size: 16px !important; letter-spacing: .04em; color: var(--ar-gold) !important; text-transform: uppercase; }
[data-skin="arena"] .fi-champion > div > div:last-child { font-family: var(--ar-mono); font-size: 10.5px !important; letter-spacing: .04em; }
[data-skin="arena"] .fi-champion .avatar.sm { border-radius: 0; clip-path: var(--ar-clip-btn); box-shadow: none; }
[data-skin="arena"] .mini-user .name { font-family: var(--ar-display); font-weight: 600; font-size: 16px; letter-spacing: .04em; text-transform: uppercase; }
[data-skin="arena"] .mini-user .sub { font-family: var(--ar-mono); font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--ar-mute); }
[data-skin="arena"] .mini-user .avatar.md { border-radius: 0; clip-path: var(--ar-clip-btn); }
[data-skin="arena"] .act-feed { gap: 0; }
[data-skin="arena"] .act-item { padding: 9px 0; font-family: var(--ar-body); font-size: 12.5px; }
[data-skin="arena"] .act-item + .act-item { border-top: 1px solid var(--ar-line); }
[data-skin="arena"] .act-item .ai-ico { border-radius: 0; clip-path: var(--ar-clip-btn); background: var(--ar-surface-2); }
[data-skin="arena"] .act-item .ai-txt b { font-family: var(--ar-display); font-size: 13px; letter-spacing: .04em; text-transform: uppercase; color: var(--ar-text); }
[data-skin="arena"] .act-item .ai-time { font-family: var(--ar-mono); font-size: 10px; letter-spacing: .06em; }

/* Shoutbox */
[data-skin="arena"] .shout-messages { background: var(--ar-void); }
[data-skin="arena"] .shout-form { border-top: 1px solid var(--ar-line-2); }
[data-skin="arena"] .shout-form input { background: var(--ar-void); }
[data-skin="arena"] .shout-form .btn { min-width: 44px; }
[data-skin="arena"] .shout-expand { color: var(--ar-dim); }
[data-skin="arena"] .shout-login { font-family: var(--ar-mono); font-size: 11.5px; letter-spacing: .04em; }
[data-skin="arena"] .online-dot { border-radius: 0; transform: rotate(45deg); width: 8px; height: 8px; }
[data-skin="arena"] .online-dot.on { background: var(--ar-online); box-shadow: 0 0 10px var(--ar-online); }

/* Steam + Discord widgets */
[data-skin="arena"] .fi-steam-card { border-radius: 0; }
[data-skin="arena"] .fi-steam-kicker { font-family: var(--ar-mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--ar-accent); }
[data-skin="arena"] .fi-steam-name { font-family: var(--ar-display); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
[data-skin="arena"] .fi-steam-cta { font-weight: 800; text-transform: uppercase; letter-spacing: .06em; font-size: 12px; color: var(--ar-accent); }
[data-skin="arena"] .fi-discord-cta { background: var(--ar-surface); border-color: var(--ar-line-2); }

/* HARD RULE: partners section stays transparent + borderless. */
[data-skin="arena"] .partners-section { background: transparent; border: 0; }
[data-skin="arena"] .partners-section__label { background: none; -webkit-text-fill-color: currentColor; color: var(--ar-accent); font-family: var(--ar-mono); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; }
[data-skin="arena"] .partners-section__heading { font-family: var(--ar-display); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
[data-skin="arena"] .partners-section__ico { color: var(--ar-accent); }
[data-skin="arena"] .partner-card { border-radius: 0; }
[data-skin="arena"] .partner-card::before,
[data-skin="arena"] .partner-card::after { content: none; }
[data-skin="arena"] .partner-card__type { font-family: var(--ar-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; }
[data-skin="arena"] .partner-card__name { font-family: var(--ar-display); font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
[data-skin="arena"] .partner-card__desc { font-family: var(--ar-body); }

/* Empty states */
[data-skin="arena"] .empty-state { color: var(--ar-mute); }
[data-skin="arena"] .empty-state .ico { opacity: .8; filter: grayscale(.2); }
[data-skin="arena"] .empty-state h3 { font-family: var(--ar-display); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--ar-text); }
[data-skin="arena"] .empty-state h1 { font-size: 96px; margin-bottom: 12px; }
[data-skin="arena"] .empty-state.card { background: var(--ar-surface); }

/* ── 13. FORUM PAGE (topic listing) ─────────────────────────────────── */
[data-skin="arena"] .breadcrumbs { font-family: var(--ar-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--ar-mute); }
[data-skin="arena"] .breadcrumbs a { color: var(--ar-dim); }
[data-skin="arena"] .breadcrumbs a:hover { color: var(--ar-accent); }
[data-skin="arena"] .breadcrumbs .sep { color: var(--ar-accent); opacity: .7; }
/* SLOT: page headers (forum banner / topic hero / page-head / leaderboard hero) */
[data-skin="arena"] .forum-banner,
[data-skin="arena"] .topic-hero,
[data-skin="arena"] .leaderboard-hero {
    position: relative;
    overflow: hidden;
    border-radius: 0;
    background: linear-gradient(90deg, var(--ar-surface-2), var(--ar-surface) 60%);
    border: 1px solid var(--ar-line-2);
    clip-path: var(--ar-clip-panel);
    box-shadow: inset 4px 0 0 var(--ar-accent);
}
[data-skin="arena"] .forum-banner::before,
[data-skin="arena"] .topic-hero::before,
[data-skin="arena"] .leaderboard-hero::before,
[data-skin="arena"] .page-head::before {
    content: none;
}
[data-skin="arena"] .forum-banner::after,
[data-skin="arena"] .topic-hero::after,
[data-skin="arena"] .leaderboard-hero::after,
[data-skin="arena"] .page-head::after {
    content: '';
    position: absolute;
    left: auto; right: var(--ar-char-x, 0px); top: 6%; bottom: 0;
    width: var(--ar-char-page-w, 30%);
    height: auto;
    pointer-events: none;
    z-index: 0;
    display: block;
    opacity: 1;
    background: var(--ar-char-page, none) no-repeat right bottom / contain;
    border: 0; border-radius: 0;
}
[data-skin="arena"] .forum-banner > *,
[data-skin="arena"] .topic-hero > *,
[data-skin="arena"] .leaderboard-hero > * { position: relative; z-index: 1; }
[data-skin="arena"] .forum-banner .fb-bg { z-index: 0; opacity: .28; }
[data-skin="arena"] .forum-banner-inner { padding: 26px 28px; }
[data-skin="arena"] .forum-banner .fb-icon { border-radius: 0; clip-path: var(--ar-clip-btn); background: var(--ar-accent-soft); border: 0; box-shadow: inset 0 0 0 1px var(--ar-accent-line); }
[data-skin="arena"] .forum-banner h1 { font-size: 34px; }
[data-skin="arena"] .forum-desc-html { color: var(--ar-dim); }
[data-skin="arena"] .forum-desc-html a { color: var(--ar-accent); }
[data-skin="arena"] .page-head { position: relative; padding: 18px 22px; background: linear-gradient(90deg, var(--ar-surface-2), var(--ar-surface) 60%); border: 1px solid var(--ar-line-2); clip-path: var(--ar-clip-panel); box-shadow: inset 4px 0 0 var(--ar-accent); overflow: hidden; }
[data-skin="arena"] .page-head > * { position: relative; z-index: 1; }
[data-skin="arena"] .page-head::before { width: 150px; height: 150px; margin-top: -75px; right: 4%; }
[data-skin="arena"] .page-head h1 { font-size: 30px; }
[data-skin="arena"] .page-head .sub,
[data-skin="arena"] .member-count { margin-top: 8px; }
[data-skin="arena"] .subforum-list { gap: 8px; }
[data-skin="arena"] .subforum-card { background: var(--ar-surface-2); border: 1px solid var(--ar-line); --ar-notch: 10px; }
[data-skin="arena"] .subforum-card:hover { transform: none; border-color: var(--ar-accent-line); background: var(--ar-surface-3); }
[data-skin="arena"] .subforum-card .sc-icon { border-radius: 0; clip-path: var(--ar-clip-btn); background: var(--ar-surface-3); }
[data-skin="arena"] .subforum-card .sc-title { font-weight: 800; }
[data-skin="arena"] .subforum-card .sc-count { font-family: var(--ar-mono); font-size: 10.5px; letter-spacing: .06em; }
[data-skin="arena"] .topic-controls { border-radius: 0; background: var(--ar-surface); border: 1px solid var(--ar-line-2); clip-path: var(--ar-clip-panel-bl); }
[data-skin="arena"] .tc-count { font-size: 12px; letter-spacing: .04em; color: var(--ar-dim); }
[data-skin="arena"] .topic-list { border: 1px solid var(--ar-line-2); background: var(--ar-surface); }
[data-skin="arena"] .topic-list-head { display: grid; padding: 10px 16px; background: var(--ar-void); border-bottom: 1px solid var(--ar-line-2); color: var(--ar-mute); }
[data-skin="arena"] .topic-list .topic-row {
    background-color: transparent;
    border-bottom: 1px solid var(--ar-line);
    transition: background-color var(--ar-fast) var(--ar-ease);
}
/* HARD RULE: never the `background` shorthand on .topic-row:hover. */
[data-skin="arena"] .topic-list .topic-row:hover { background-color: var(--ar-surface-2); }
[data-skin="arena"] .topic-row:hover { background-color: var(--ar-surface-2); }
[data-skin="arena"] .topic-list .topic-row::before { border-radius: 0; pointer-events: none; }
[data-skin="arena"] .topic-list .topic-row.unread::before { background: var(--ar-accent); box-shadow: none; width: 3px; }
[data-skin="arena"] .topic-icon { border-radius: 0; clip-path: var(--ar-clip-btn); background: var(--ar-surface-2); box-shadow: none; }
[data-skin="arena"] .topic-icon .ti-ava { border-radius: 0; }
[data-skin="arena"] .topic-icon .ti-badge { border-radius: 0; }
[data-skin="arena"] .topic-row.unread .topic-icon { box-shadow: inset 0 0 0 1px var(--ar-accent); }
[data-skin="arena"] .topic-list .topic-row:hover .topic-icon { transform: translateY(-1px); box-shadow: inset 0 0 0 1px var(--ar-accent-line); }
[data-skin="arena"] .topic-icon .unread-dot { background: var(--ar-accent); border-radius: 0; transform: rotate(45deg); }
[data-skin="arena"] .topic-main .tm-title { font-weight: 800; }
[data-skin="arena"] .topic-row.unread .tm-title { color: var(--ar-text); font-weight: 900; }
[data-skin="arena"] .topic-row:not(.unread) .tm-title { color: var(--ar-dim); font-weight: 700; }
[data-skin="arena"] .topic-main .tm-title:hover { color: var(--ar-accent); }
[data-skin="arena"] .topic-main .tm-meta { font-family: var(--ar-mono); font-size: 10.5px; letter-spacing: .04em; }
[data-skin="arena"] .topic-main .tm-meta a:hover { color: var(--ar-accent); }
[data-skin="arena"] .topic-stat .ts-val { font-weight: 700; }
[data-skin="arena"] .topic-stat span:last-child { font-family: var(--ar-mono); font-size: 9.5px; letter-spacing: .16em; }
[data-skin="arena"] .topic-last { position: relative; }
[data-skin="arena"] .topic-last .tl-title { font-weight: 800; }
[data-skin="arena"] .topic-last .tl-title:hover,
[data-skin="arena"] .topic-last a:hover { color: var(--ar-accent); }
[data-skin="arena"] .topic-last .tl-lastby { font-family: var(--ar-mono); font-size: 10.5px; }
[data-skin="arena"] .topic-last .tl-lastby-ava { border-radius: 50%; box-shadow: 0 0 0 1px var(--ar-accent-line); }
[data-skin="arena"] .forum-follow.following { background: var(--ar-gold); color: #1a1200; }

/* ── 14. THREAD + POSTS (bold chrome, CALM reading column) ──────────── */
[data-skin="arena"] .topic-hero { padding: 24px 26px; margin-bottom: 20px; }
[data-skin="arena"] .topic-hero h1 { font-size: 28px; font-weight: 900; letter-spacing: -.02em; text-transform: none; }
[data-skin="arena"] .topic-hero h1 .prefix { border-radius: 0; font-size: 11px; vertical-align: middle; }
[data-skin="arena"] .topic-hero-meta { font-family: var(--ar-mono); font-size: 11.5px; letter-spacing: .03em; }
[data-skin="arena"] .topic-hero-meta .thm a { color: var(--ar-dim); }
[data-skin="arena"] .topic-hero-meta .thm a:hover { color: var(--ar-accent); }
[data-skin="arena"] .topic-hero-meta .avatar.sm { box-shadow: 0 0 0 1px var(--ar-accent-line); }
[data-skin="arena"] .topic-hero-meta .badge { border-radius: 0; }
[data-skin="arena"] .viewers-bar { border-top: 1px solid var(--ar-line); margin-top: 12px; padding-top: 10px; }
[data-skin="arena"] .viewers-bar .vb-list { padding: 4px 0; gap: 6px; }
[data-skin="arena"] .viewers-bar .vb-list::before { display: none; }
[data-skin="arena"] .viewers-bar .vb-list a img { width: 24px; height: 24px; }
[data-skin="arena"] .viewers-bar .vb-count { font-family: var(--ar-mono); font-size: 11px; color: var(--ar-dim); }
[data-skin="arena"] .mod-bar { background: rgba(255,92,92,.06); border: 1px solid rgba(255,92,92,.25); box-shadow: inset 4px 0 0 var(--ar-danger); --ar-notch: 10px; }
[data-skin="arena"] .mod-bar-label { color: var(--ar-danger); }
[data-skin="arena"] .mod-subform { border-radius: 0; }
[data-skin="arena"] .poll-card { background: var(--ar-surface); border: 1px solid var(--ar-line-2); box-shadow: inset 4px 0 0 var(--ar-gold); }
[data-skin="arena"] .poll-head { color: var(--ar-gold); }
[data-skin="arena"] .poll-status { color: var(--ar-dim); }
[data-skin="arena"] .poll-q { font-size: 18px; letter-spacing: -.01em; }
[data-skin="arena"] .poll-bar-wrap { border-radius: 0; background: var(--ar-void); box-shadow: inset 0 0 0 1px var(--ar-line-2); clip-path: var(--ar-clip-btn); --ar-notch-sm: 4px; }
[data-skin="arena"] .poll-bar { border-radius: 0; background: var(--ar-accent); }
[data-skin="arena"] .poll-vote { border-radius: 0; clip-path: var(--ar-clip-btn); border: 0; box-shadow: inset 0 0 0 1px var(--ar-line-2); background: var(--ar-surface-2); }
[data-skin="arena"] .poll-vote:hover { background: var(--ar-surface-3); box-shadow: inset 0 0 0 1px var(--ar-accent-line); }
[data-skin="arena"] .poll-total { font-family: var(--ar-mono); font-size: 11px; letter-spacing: .06em; }
[data-skin="arena"] .best-answer-box { background: rgba(49,224,122,.06); border: 1px solid var(--ar-accent-line); box-shadow: inset 4px 0 0 var(--ar-accent); }
[data-skin="arena"] .ba-jump { font-weight: 800; text-transform: uppercase; letter-spacing: .06em; font-size: 12px; }

[data-skin="arena"] .posts-list { gap: 16px; }
[data-skin="arena"] .post { background: var(--ar-surface); border: 1px solid var(--ar-line-2); box-shadow: 0 24px 50px -34px rgba(0,0,0,.9); }
[data-skin="arena"] .post:hover { border-color: var(--ar-line-2); }
[data-skin="arena"] .post.is-op { border-color: var(--ar-accent-line); box-shadow: 0 24px 50px -34px rgba(0,0,0,.9); }
[data-skin="arena"] .post.is-op::after { background: var(--ar-accent-line); }
[data-skin="arena"] .post.is-best { border-color: rgba(255,194,61,.5); box-shadow: 0 24px 50px -34px rgba(0,0,0,.9); }
[data-skin="arena"] .post.is-best::after { background: rgba(255,194,61,.5); }
[data-skin="arena"] .best-banner { background: var(--ar-gold); color: #1a1200; border-bottom: 0; padding: 6px 18px; font-size: 10.5px; }
[data-skin="arena"] .post-author { background: var(--ar-void); border-right: 1px solid var(--ar-line-2); padding: 24px 16px 20px; }
[data-skin="arena"] .post-author::before { height: 3px; background: var(--gc, var(--ar-accent)); opacity: 1; pointer-events: none; clip-path: polygon(0 0, 100% 0, calc(100% - 3px) 100%, 0 100%); }
/* Ring + glow behind the author avatar */
[data-skin="arena"] .pa-avatar { position: relative; }
[data-skin="arena"] .pa-avatar::before {
    content: '';
    position: absolute;
    left: 50%; top: 50%;
    width: 112px; height: 112px;
    margin: -56px 0 0 -56px;
    border-radius: 50%;
    pointer-events: none;
    background: radial-gradient(circle, color-mix(in srgb, var(--gc, var(--ar-accent)) 22%, transparent), transparent 66%);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gc, var(--ar-accent)) 45%, transparent);
    border: 2px solid transparent;
    border-top-color: var(--ar-gold);
    transform: rotate(-30deg);
}
[data-skin="arena"] .pa-avatar .avatar { position: relative; border-radius: 50%; box-shadow: 0 0 0 3px var(--ar-void), 0 0 0 4px color-mix(in srgb, var(--gc, var(--ar-accent)) 60%, transparent); }
[data-skin="arena"] .pa-name { font-weight: 900; text-transform: uppercase; letter-spacing: -.005em; font-size: 14.5px; }
[data-skin="arena"] .pa-name:hover { color: var(--ar-accent); }
[data-skin="arena"] .pa-role { background: color-mix(in srgb, var(--gc, var(--ar-accent)) 18%, transparent); color: var(--gc, var(--ar-accent)); }
[data-skin="arena"] .pa-title { font-style: normal; font-family: var(--ar-mono); font-size: 10.5px; letter-spacing: .06em; }
[data-skin="arena"] .pa-xp-track { border-radius: 0; background: var(--ar-surface-2); height: 4px; }
[data-skin="arena"] .pa-xp-fill { border-radius: 0; background: var(--ar-accent); }
[data-skin="arena"] .pa-stats { border-top: 1px solid var(--ar-line-2); }
[data-skin="arena"] .pa-stats b { font-weight: 700; }
[data-skin="arena"] .pa-stats span,
[data-skin="arena"] .pa-joined { font-family: var(--ar-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; }
[data-skin="arena"] .post-body { padding: 18px 26px 20px; }
[data-skin="arena"] .post-top { border-bottom: 1px solid var(--ar-line); }
[data-skin="arena"] .post-num { font-size: 11.5px; letter-spacing: .04em; }
[data-skin="arena"] .post-num a { color: var(--ar-accent); font-weight: 700; }
[data-skin="arena"] .ptool { width: 34px; height: 34px; border-radius: 0; clip-path: var(--ar-clip-btn); --ar-notch-sm: 5px; background: var(--ar-surface-2); border: 0; box-shadow: inset 0 0 0 1px var(--ar-line); color: var(--ar-dim); }
[data-skin="arena"] .ptool:hover { color: var(--ar-text); box-shadow: inset 0 0 0 1px var(--ar-accent-line); background: var(--ar-surface-3); }
[data-skin="arena"] .ptool-danger:hover { color: var(--ar-danger); box-shadow: inset 0 0 0 1px var(--ar-danger); }
[data-skin="arena"] .best-btn.active { background: var(--ar-gold); color: #1a1200; }
/* READING COLUMN — deliberately quiet, comfortable through 30 posts. */
[data-skin="arena"] .post-content { font-size: 15.5px; line-height: 1.78; color: var(--ar-text); letter-spacing: 0; }
[data-skin="arena"] .post-content a { color: var(--ar-accent); text-decoration: underline; text-decoration-color: var(--ar-accent-line); text-underline-offset: 3px; }
[data-skin="arena"] .post-content a:hover { color: var(--ar-text); }
[data-skin="arena"] .post-content .post-quote { border-left: 3px solid var(--ar-accent); background: var(--ar-surface-2); border-radius: 0; color: var(--ar-dim); clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%); }
[data-skin="arena"] .post-content .post-quote cite { color: var(--ar-accent); font-family: var(--ar-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; }
[data-skin="arena"] .post-content .code-block,
[data-skin="arena"] .post-content pre { background: var(--ar-void); border: 1px solid var(--ar-line-2); border-radius: 0; font-family: var(--ar-mono); }
[data-skin="arena"] .post-content code { font-family: var(--ar-mono); background: var(--ar-void); border-radius: 0; }
[data-skin="arena"] .post-content .spoiler { background: var(--ar-surface-2); border-radius: 0; border: 1px solid var(--ar-line); }
[data-skin="arena"] .post-content .spoiler summary { font-weight: 800; text-transform: uppercase; letter-spacing: .04em; font-size: 12px; }
[data-skin="arena"] .post-content .mention { color: var(--ar-accent); background: var(--ar-accent-soft); border-radius: 0; padding: 1px 6px; }
[data-skin="arena"] .post-content img,
[data-skin="arena"] .post-content .post-image { border-radius: 0; clip-path: var(--ar-clip-panel); }
[data-skin="arena"] .post-content .post-video { border-radius: 0; border: 1px solid var(--ar-line-2); }
[data-skin="arena"] .post-content hr { border-top: 1px solid var(--ar-line-2); }
[data-skin="arena"] .post-sig { border-top: 1px dashed var(--ar-line-2); color: var(--ar-mute); }
[data-skin="arena"] .post-sig::before { font-size: 9px; color: var(--ar-mute); }
[data-skin="arena"] .post-sig img { border-radius: 0; }
[data-skin="arena"] .post-foot { border-top: 1px solid var(--ar-line); }
[data-skin="arena"] .react-main {
    border-radius: 0;
    clip-path: var(--ar-clip-btn);
    background: var(--ar-surface-2);
    border: 0;
    box-shadow: inset 0 0 0 1px var(--ar-line-2);
    color: var(--ar-dim);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .05em;
    font-size: 12px;
}
[data-skin="arena"] .react-main:hover { color: var(--ar-text); box-shadow: inset 0 0 0 1px var(--ar-accent-line); background: var(--ar-surface-3); }
[data-skin="arena"] .react-main.reacted { background: var(--ar-accent); color: var(--ar-on-accent); box-shadow: none; }
[data-skin="arena"] .react-picker { border-radius: 0; background: var(--ar-surface); border: 1px solid var(--ar-line-2); border-top: 3px solid var(--ar-accent); box-shadow: 0 20px 40px -14px rgba(0,0,0,.85); }
[data-skin="arena"] .rp-btn { border-radius: 0; }
[data-skin="arena"] .rp-btn:hover { background: var(--ar-surface-2); }
[data-skin="arena"] .react-summary { border-radius: 0; clip-path: var(--ar-clip-hex); background: var(--ar-void); box-shadow: inset 0 0 0 1px var(--ar-line-2); font-family: var(--ar-mono); font-size: 11px; padding: 4px 12px; }
[data-skin="arena"] .react-summary .rs-count { color: var(--ar-accent); }
[data-skin="arena"] .report-btn { color: var(--ar-mute); }
[data-skin="arena"] .report-btn:hover { color: var(--ar-danger); }
[data-skin="arena"] .post.post-flash { animation: arFlash 1.4s var(--ar-ease); }
[data-skin="arena"] .edited { font-style: normal; color: var(--ar-mute); }
/* Reply / editor */
[data-skin="arena"] .reply-card { background: var(--ar-surface); border: 1px solid var(--ar-line-2); box-shadow: inset 4px 0 0 var(--ar-accent); }
[data-skin="arena"] .reply-card h3 { font-size: 16px; margin-bottom: 20px; }
[data-skin="arena"] .esa-editor,
[data-skin="arena"] .form-group [data-editor] { border: 1px solid var(--ar-line-2); background: var(--ar-void); --ar-notch: 10px; }
[data-skin="arena"] .esa-editor:focus-within,
[data-skin="arena"] .form-group [data-editor]:focus-within { border-color: var(--ar-accent); box-shadow: none; }
[data-skin="arena"] .esa-editor.drag { border-color: var(--ar-gold); background: var(--ar-gold-soft); }
[data-skin="arena"] .editor-toolbar,
[data-skin="arena"] .form-group [data-editor] .editor-toolbar { background: var(--ar-surface); border-bottom: 1px solid var(--ar-line-2); gap: 2px; padding: 6px 8px; }
[data-skin="arena"] .editor-toolbar button,
[data-skin="arena"] .form-group [data-editor] .editor-toolbar button { border-radius: 0; color: var(--ar-dim); border: 1px solid transparent; font-weight: 700; }
[data-skin="arena"] .editor-toolbar button:hover,
[data-skin="arena"] .form-group [data-editor] .editor-toolbar button:hover { background: var(--ar-surface-2); border-color: var(--ar-line-2); color: var(--ar-text); }
[data-skin="arena"] .editor-toolbar button:active { background: var(--ar-accent); color: var(--ar-on-accent); }
[data-skin="arena"] .editor-toolbar .tb-sep { background: var(--ar-line-2); }
[data-skin="arena"] .esa-editor textarea,
[data-skin="arena"] .form-group [data-editor] textarea { background: var(--ar-void); border: 0; clip-path: none; box-shadow: none; }
[data-skin="arena"] .esa-editor textarea:focus { box-shadow: none; background: var(--ar-void); }
[data-skin="arena"] .tb-menu,
[data-skin="arena"] .tb-pop,
[data-skin="arena"] .tb-color-pop,
[data-skin="arena"] .tb-size-pop,
[data-skin="arena"] .emoji-picker { border-radius: 0; background: var(--ar-surface); border: 1px solid var(--ar-line-2); border-top: 3px solid var(--ar-accent); box-shadow: 0 20px 40px -14px rgba(0,0,0,.85); }
[data-skin="arena"] .tb-swatch { border-radius: 0; }
[data-skin="arena"] .emoji-picker span { border-radius: 0; }
[data-skin="arena"] .emoji-picker span:hover { background: var(--ar-surface-2); }
[data-skin="arena"] .attach-list .att-chip { background: var(--ar-surface-2); color: var(--ar-dim); text-transform: none; letter-spacing: 0; font-weight: 600; }
[data-skin="arena"] .reply-actions .text-mute { font-family: var(--ar-mono); font-size: 11px !important; letter-spacing: .04em; }
[data-skin="arena"] .locked-note { border-radius: 0; clip-path: var(--ar-clip-panel); background: var(--ar-surface); border: 1px solid var(--ar-line-2); box-shadow: inset 4px 0 0 var(--ar-gold); font-weight: 700; }
[data-skin="arena"] .locked-note a { color: var(--ar-accent); }

/* ── 15. PAGINATION / TABLES / CARDS / MODALS ───────────────────────── */
[data-skin="arena"] .pagination { gap: 4px; }
[data-skin="arena"] .pagination a,
[data-skin="arena"] .pagination span {
    border-radius: 0;
    clip-path: var(--ar-clip-btn);
    --ar-notch-sm: 6px;
    background: var(--ar-surface);
    border: 0;
    box-shadow: inset 0 0 0 1px var(--ar-line-2);
    color: var(--ar-dim);
    font-weight: 700;
    font-size: 13px;
}
[data-skin="arena"] .pagination a:hover { color: var(--ar-text); background: var(--ar-surface-2); box-shadow: inset 0 0 0 1px var(--ar-accent-line); }
[data-skin="arena"] .pagination .current { background: var(--ar-accent); color: var(--ar-on-accent); box-shadow: none; }
[data-skin="arena"] .pagination .dots { background: none; box-shadow: none; clip-path: none; }
[data-skin="arena"] .card { background: var(--ar-surface); border: 1px solid var(--ar-line-2); box-shadow: 0 24px 50px -34px rgba(0,0,0,.9); }
[data-skin="arena"] .card:hover { border-color: var(--ar-line-2); box-shadow: 0 24px 50px -34px rgba(0,0,0,.9); }
[data-skin="arena"] .card-head { border-bottom: 1px solid var(--ar-line-2); }
[data-skin="arena"] .card-head::before { display: none; }
[data-skin="arena"] .card-head h2,
[data-skin="arena"] .card-head h3 { font-size: 14px; }
[data-skin="arena"] .card-head h2::after,
[data-skin="arena"] .card-head h3::after { bottom: -7px; width: 26px; height: 2px; }
[data-skin="arena"] .stat-card { background: var(--ar-surface); border: 1px solid var(--ar-line-2); }
[data-skin="arena"] .stat-card:hover { transform: none; border-color: var(--ar-accent-line); box-shadow: none; }
[data-skin="arena"] .stat-card .stat-ico { border-radius: 0; clip-path: var(--ar-clip-btn); background: var(--ar-surface-2); }
[data-skin="arena"] .stat-card .stat-val { font-family: var(--ar-mono); font-weight: 700; }
[data-skin="arena"] .stat-card .stat-label { font-family: var(--ar-mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; }
[data-skin="arena"] table th { font-family: var(--ar-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ar-accent); }
[data-skin="arena"] .leaderboard-table th { background: var(--ar-void); border-bottom: 1px solid var(--ar-line-2); border-radius: 0 !important; }
[data-skin="arena"] .leaderboard-table td { border-bottom: 1px solid var(--ar-line); }
[data-skin="arena"] .leaderboard-table tbody tr:hover td { background: var(--ar-surface-2); }
[data-skin="arena"] .leaderboard-table tbody tr:hover td:first-child { box-shadow: inset 3px 0 0 var(--ar-accent); }
[data-skin="arena"] .lb-rank-num { color: var(--ar-accent); font-weight: 700; }
[data-skin="arena"] .lb-username { font-weight: 800; text-transform: uppercase; font-size: 13px; }
[data-skin="arena"] .lb-subtitle { font-family: var(--ar-mono); font-size: 10.5px; }
[data-skin="arena"] .lb-user-cell .avatar.sm { box-shadow: 0 0 0 2px var(--ar-surface), 0 0 0 3px var(--ar-accent-line); }
[data-skin="arena"] .lb-rep { color: var(--ar-gold); }
[data-skin="arena"] .lb-posts { color: var(--ar-dim); }
/* Modals + lightbox (report modal is injected with inline styles → override) */
[data-skin="arena"] #report-modal { background: rgba(8,13,18,.82) !important; }
[data-skin="arena"] #report-modal > div,
[data-skin="arena"] #report-modal .card { background: var(--ar-surface) !important; border: 1px solid var(--ar-line-2) !important; border-radius: 0 !important; clip-path: var(--ar-clip-panel); box-shadow: inset 4px 0 0 var(--ar-danger), 0 40px 80px -30px rgba(0,0,0,.9); }
[data-skin="arena"] #report-modal h3 { font-weight: 900; text-transform: uppercase; letter-spacing: -.01em; }
[data-skin="arena"] .esa-lightbox { background: rgba(8,13,18,.92); }
[data-skin="arena"] .esa-lightbox img { border-radius: 0; box-shadow: 0 0 0 1px var(--ar-line-2), 0 40px 80px rgba(0,0,0,.8); }
[data-skin="arena"] .esa-lightbox-close { color: var(--ar-accent); }
[data-skin="arena"] .nav-progress { background: var(--ar-accent); box-shadow: 0 0 12px rgba(49,224,122,.6); }

/* ── 16. PROFILE ────────────────────────────────────────────────────── */
[data-skin="arena"] .profile-cover { border-radius: 0; height: 260px; clip-path: polygon(0 0, calc(100% - var(--ar-notch)) 0, 100% var(--ar-notch), 100% calc(100% - var(--ar-slant)), 0 100%); background: linear-gradient(135deg, rgba(49,224,122,.22) 0%, rgba(255,194,61,.08) 45%, var(--ar-surface) 100%); box-shadow: none; }
[data-skin="arena"] .profile-cover-overlay { background: linear-gradient(to bottom, transparent 40%, rgba(8,13,18,.8) 100%); }
/* The slanted cover bottom leaves a wedge of page background above the card
   (the diagonal divider). No clip-path / overflow here: the avatar sticks out
   above the card's top edge. */
[data-skin="arena"] .profile-head-card {
    position: relative;
    border-radius: 0;
    background: var(--ar-surface);
    border: 1px solid var(--ar-line-2);
    padding: 0 32px 28px;
    box-shadow: inset 0 3px 0 var(--ar-accent), 0 24px 50px -34px rgba(0,0,0,.9);
}
/* SLOT: profile header — ring behind, image anchored right */
[data-skin="arena"] .profile-head-card::before { content: none; }
[data-skin="arena"] .profile-head-card::after {
    content: '';
    position: absolute;
    right: var(--ar-char-x, 0px); top: 3px; bottom: 0;
    width: var(--ar-char-page-w, 34%);
    pointer-events: none;
    z-index: 0;
    background: var(--ar-char-profile, none) no-repeat right bottom / contain;
    transform: translate3d(calc(var(--ar-px, 0) * 3px), calc(var(--ar-py, 0) * 3px), 0);
    transition: transform 500ms var(--ar-ease);
}
[data-skin="arena"] .profile-head-card > * { position: relative; z-index: 1; }
[data-skin="arena"] .profile-avatar-wrap { margin-top: -64px; }
[data-skin="arena"] .profile-avatar-wrap::before { content: none; }
[data-skin="arena"] .profile-avatar-wrap img.avatar.xl { position: relative; border: 4px solid var(--ar-surface); box-shadow: 0 0 0 2px var(--ar-accent); }
[data-skin="arena"] .profile-avatar-wrap .online-dot { border: 3px solid var(--ar-surface); background: var(--ar-online); transform: none; border-radius: 50%; width: 16px; height: 16px; }
[data-skin="arena"] .profile-name { font-size: 40px; margin-bottom: 8px; }
[data-skin="arena"] .profile-username { font-family: var(--ar-mono); font-size: 12px; letter-spacing: .08em; color: var(--ar-accent); }
[data-skin="arena"] .profile-stats-row { border-top: 1px solid var(--ar-line-2); }
[data-skin="arena"] .profile-stat { border-right: 1px solid var(--ar-line); }
[data-skin="arena"] .profile-stat b { font-size: 24px; font-weight: 700; }
[data-skin="arena"] .profile-stat span { font-family: var(--ar-mono); font-size: 10px; letter-spacing: .16em; }
[data-skin="arena"] .xp-premium-wrap { border-radius: 0; background: var(--ar-void); border: 1px solid var(--ar-line-2); clip-path: var(--ar-clip-panel); }
[data-skin="arena"] .xp-lvl-badge { border-radius: 0; clip-path: var(--ar-clip-hex); background: var(--ar-gold); color: #1a1200; }
[data-skin="arena"] .xp-lvl-badge strong { font-family: var(--ar-mono); }
[data-skin="arena"] .xp-bar-track { border-radius: 0; background: var(--ar-surface-2); }
[data-skin="arena"] .xp-bar-fill { border-radius: 0; background: linear-gradient(90deg, var(--ar-accent), var(--ar-gold)); }
[data-skin="arena"] .xp-streak-chip { background: var(--ar-gold-soft); color: var(--ar-gold); }
[data-skin="arena"] .profile-meta-list .ico { color: var(--ar-accent); }
[data-skin="arena"] .social-icon-btn { border-radius: 0; clip-path: var(--ar-clip-btn); }
[data-skin="arena"] .trophy-case { gap: 10px; }
[data-skin="arena"] .trophy-item { background: var(--ar-void); border: 1px solid var(--ar-line); --ar-notch: 10px; }
[data-skin="arena"] .trophy-label { font-family: var(--ar-mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }
[data-skin="arena"] .ach-trophy-card { background: var(--ar-void); border: 1px solid var(--ar-line-2); }
[data-skin="arena"] .ach-trophy-card::before,
[data-skin="arena"] .ach-trophy-card::after { border-radius: 0; pointer-events: none; }
[data-skin="arena"] .ach-trophy-name { font-weight: 900; text-transform: uppercase; font-size: 12.5px; }
[data-skin="arena"] .ach-trophy-time { font-family: var(--ar-mono); font-size: 10px; }
[data-skin="arena"] .profile-music-btn { border-radius: 0; clip-path: var(--ar-clip-btn); background: var(--ar-surface); border: 1px solid var(--ar-line-2); }
[data-skin="arena"] .wall-comment-avatar { box-shadow: 0 0 0 2px var(--ar-accent-line); }

/* ── 17. MEMBERS + LEADERBOARD ──────────────────────────────────────── */
[data-skin="arena"] .member-toolbar .search-box input { border-radius: 0; }
[data-skin="arena"] .member-toolbar .search-box button { border-radius: 0; clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--ar-notch-sm)), calc(100% - var(--ar-notch-sm)) 100%, 0 100%); }
[data-skin="arena"] .sort-tab,
[data-skin="arena"] .lb-tab { background: var(--ar-surface); color: var(--ar-dim); border: 0; box-shadow: inset 0 0 0 1px var(--ar-line-2); padding-left: 16px; padding-right: 16px; font-size: 11.5px; }
[data-skin="arena"] .sort-tab:hover,
[data-skin="arena"] .lb-tab:hover { color: var(--ar-text); background: var(--ar-surface-2); box-shadow: inset 0 0 0 1px var(--ar-accent-line); }
[data-skin="arena"] .sort-tab.active,
[data-skin="arena"] .lb-tab.active { background: var(--ar-accent); color: var(--ar-on-accent); box-shadow: none; }
[data-skin="arena"] .member-grid { gap: 14px; }
[data-skin="arena"] .member-card { background: var(--ar-surface); border: 1px solid var(--ar-line-2); padding: 26px 14px 18px; overflow: hidden; }
[data-skin="arena"] .member-card::before {
    content: '';
    position: absolute;
    inset: auto;
    left: 50%; top: 26px;
    width: 120px; height: 120px;
    margin-left: -60px;
    border-radius: 50%;
    opacity: 1;
    background: radial-gradient(circle, rgba(49,224,122,.18), transparent 66%);
    box-shadow: inset 0 0 0 1px var(--ar-accent-line);
    border: 2px solid transparent;
    border-top-color: var(--ar-gold);
    transform: rotate(-30deg);
    transition: transform var(--ar-med) var(--ar-ease);
    pointer-events: none;
}
[data-skin="arena"] .member-card::after {
    content: '';
    position: absolute;
    inset: auto;
    left: -36px; top: 12px;
    width: 130px; height: 12px;
    opacity: 0;
    background: var(--ar-accent);
    transform: rotate(-45deg);
    transition: opacity var(--ar-fast) var(--ar-ease);
    pointer-events: none;
    box-shadow: 0 0 0 2px var(--ar-void);
}
[data-skin="arena"] .member-card:hover { transform: none; border-color: var(--ar-accent-line); box-shadow: 0 24px 50px -30px rgba(0,0,0,.9); }
[data-skin="arena"] .member-card:hover::before { transform: rotate(60deg); }
[data-skin="arena"] .member-card:hover::after { opacity: 1; }
[data-skin="arena"] .member-card img.avatar { position: relative; border-radius: 50%; border: 3px solid var(--ar-surface); box-shadow: 0 0 0 2px var(--ar-accent-line); margin-bottom: 18px; }
[data-skin="arena"] .member-card:hover img.avatar { border-color: var(--ar-surface); box-shadow: 0 0 0 2px var(--ar-accent); }
[data-skin="arena"] .mc-name { font-weight: 900; text-transform: uppercase; letter-spacing: -.01em; }
[data-skin="arena"] .mc-title { font-family: var(--ar-mono); font-size: 10.5px; letter-spacing: .06em; color: var(--ar-mute); }
[data-skin="arena"] .mc-stats { font-size: 12px; }
[data-skin="arena"] .mc-join { font-family: var(--ar-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; }
[data-skin="arena"] .leaderboard-hero { padding: 36px 28px; text-align: left; margin-bottom: 26px; }
[data-skin="arena"] .leaderboard-hero h1 { font-size: 46px; }
[data-skin="arena"] .leaderboard-hero p { color: var(--ar-dim); max-width: 520px; }
[data-skin="arena"] .lb-period { justify-content: flex-start !important; }
[data-skin="arena"] .podium { align-items: flex-end; }
[data-skin="arena"] .podium-place:hover { transform: translateY(-3px); }
[data-skin="arena"] .podium-avatar-wrap { position: relative; }
[data-skin="arena"] .podium-avatar-wrap img { border-radius: 50% !important; }
[data-skin="arena"] .podium-place.p1 .podium-avatar-wrap img { border-color: var(--ar-gold); box-shadow: 0 0 0 4px var(--ar-void), 0 0 0 5px var(--ar-gold), 0 0 40px rgba(255,194,61,.35); }
[data-skin="arena"] .podium-place.p2 .podium-avatar-wrap img { box-shadow: 0 0 0 4px var(--ar-void), 0 0 0 5px #a0aec0; }
[data-skin="arena"] .podium-place.p3 .podium-avatar-wrap img { box-shadow: 0 0 0 4px var(--ar-void), 0 0 0 5px #d08b5b; }
[data-skin="arena"] .podium-rank-num { border-radius: 0; clip-path: var(--ar-clip-hex); width: 30px; height: 22px; font-family: var(--ar-mono); border: 0; }
[data-skin="arena"] .podium-name { font-weight: 900; text-transform: uppercase; }
[data-skin="arena"] .podium-score { font-size: 12px; color: var(--ar-dim); }
[data-skin="arena"] .podium-block { border-radius: 0; clip-path: polygon(var(--ar-notch) 0, calc(100% - var(--ar-notch)) 0, 100% var(--ar-notch), 100% 100%, 0 100%, 0 var(--ar-notch)); font-family: var(--ar-mono); font-size: 34px; color: rgba(255,255,255,.14); background: var(--ar-surface-2); border: 1px solid var(--ar-line-2); border-bottom: 0; }
[data-skin="arena"] .podium-place.p1 .podium-block { background: linear-gradient(180deg, rgba(255,194,61,.35), rgba(255,194,61,.06)); border-color: rgba(255,194,61,.4); color: rgba(255,194,61,.6); }
[data-skin="arena"] .leaderboard-tabs { gap: 6px; }
[data-skin="arena"] .lb-section .card { overflow: hidden; }

/* ── 18. SETTINGS ───────────────────────────────────────────────────── */
[data-skin="arena"] .settings-nav { background: var(--ar-surface); border: 1px solid var(--ar-line-2); }
[data-skin="arena"] .settings-nav a { border-left: 3px solid transparent; font-weight: 700; font-size: 13px; color: var(--ar-dim); }
[data-skin="arena"] .settings-nav a:hover { background: var(--ar-surface-2); color: var(--ar-text); }
[data-skin="arena"] .settings-nav a.active { border-left-color: var(--ar-accent); color: var(--ar-text); background: var(--ar-surface-2); text-transform: uppercase; letter-spacing: .03em; }
[data-skin="arena"] .settings-nav .nav-section { border-top: 1px solid var(--ar-line-2); color: var(--ar-mute); }
[data-skin="arena"] .settings-panel-head { border-bottom: 1px solid var(--ar-line-2); }
[data-skin="arena"] .settings-panel-head h2 { font-size: 20px; margin-bottom: 14px; }
[data-skin="arena"] .settings-panel-head p { color: var(--ar-mute); }
[data-skin="arena"] .avatar-preview { border-color: var(--ar-accent-line); box-shadow: 0 0 0 4px var(--ar-void), 0 0 0 5px var(--ar-accent-line); }
[data-skin="arena"] .cover-preview { border-radius: 0; clip-path: var(--ar-clip-panel); border: 1px solid var(--ar-line-2); }
[data-skin="arena"] .session-row { border-bottom: 1px solid var(--ar-line); }
[data-skin="arena"] .session-ua { color: var(--ar-text); }
[data-skin="arena"] .session-meta { font-family: var(--ar-mono); font-size: 11px; }
[data-skin="arena"] .twofa-on { background: var(--ar-accent-soft); color: var(--ar-accent); border: 0; }
[data-skin="arena"] .twofa-off { background: rgba(255,92,92,.12); color: var(--ar-danger); border: 0; }
[data-skin="arena"] .warning-item { border-radius: 0; clip-path: var(--ar-clip-panel); background: rgba(255,92,92,.08); border: 1px solid rgba(255,92,92,.25); box-shadow: inset 4px 0 0 var(--ar-danger); }
[data-skin="arena"] .warning-item .reason { color: var(--ar-text); }
[data-skin="arena"] .cos-frame-opt,
[data-skin="arena"] .cos-fx-opt,
[data-skin="arena"] .cos-banner-opt,
[data-skin="arena"] .cos-ach-opt,
[data-skin="arena"] .palette-sw > span:first-child { border-radius: 0 !important; }
[data-skin="arena"] .cos-frame-opt.selected,
[data-skin="arena"] .cos-fx-opt.selected,
[data-skin="arena"] .cos-banner-opt.selected,
[data-skin="arena"] .cos-ach-opt.selected { border-color: var(--ar-accent) !important; box-shadow: inset 0 0 0 1px var(--ar-accent); }

/* ── 19. SEARCH ─────────────────────────────────────────────────────── */
[data-skin="arena"] .search-bar-big .input { border-radius: 0; font-size: 15px; }
[data-skin="arena"] .search-bar-big .btn { clip-path: var(--ar-clip-btn); }
[data-skin="arena"] .search-count { font-size: 12px; letter-spacing: .04em; color: var(--ar-dim); }
[data-skin="arena"] .search-count strong { color: var(--ar-accent); }
[data-skin="arena"] .search-filters { background: var(--ar-surface); border: 1px solid var(--ar-line-2); }
[data-skin="arena"] .search-filters h3 { font-size: 11px; margin-bottom: 16px; padding-bottom: 10px; border-bottom: 1px solid var(--ar-line-2); color: var(--ar-accent); }
[data-skin="arena"] .filter-group > label { font-family: var(--ar-mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--ar-dim); }
[data-skin="arena"] .filter-radio-group label { border-radius: 0; }
[data-skin="arena"] .filter-radio-group label:has(input[type=radio]:checked) { background: var(--ar-accent-soft); color: var(--ar-accent); box-shadow: inset 3px 0 0 var(--ar-accent); }
[data-skin="arena"] .result-list { background: var(--ar-surface); border: 1px solid var(--ar-line-2); }
[data-skin="arena"] .result-item { border-bottom: 1px solid var(--ar-line); border-radius: 0 !important; transition: background-color var(--ar-fast) var(--ar-ease); }
[data-skin="arena"] .result-item:hover { background-color: var(--ar-surface-2); box-shadow: inset 3px 0 0 var(--ar-accent); }
[data-skin="arena"] .result-topic-title a { font-weight: 800; color: var(--ar-text); }
[data-skin="arena"] .result-topic-title a:hover { color: var(--ar-accent); }
[data-skin="arena"] .result-meta { font-family: var(--ar-mono); font-size: 11px; letter-spacing: .03em; }
[data-skin="arena"] .result-meta .sep { color: var(--ar-accent); }
[data-skin="arena"] .result-post-snippet { color: var(--ar-dim); border-left: 2px solid var(--ar-line-2); padding-left: 12px; }
[data-skin="arena"] .result-post-snippet mark { background: var(--ar-accent); color: var(--ar-on-accent); }
[data-skin="arena"] .user-card { background: var(--ar-surface); border: 1px solid var(--ar-line-2); }
[data-skin="arena"] .user-card:hover { border-color: var(--ar-accent-line); transform: none; }
[data-skin="arena"] .user-card .avatar { border-radius: 50%; box-shadow: 0 0 0 2px var(--ar-surface), 0 0 0 3px var(--ar-accent-line); }
[data-skin="arena"] .user-card .uc-name a { font-weight: 900; text-transform: uppercase; }
[data-skin="arena"] .user-card .uc-handle { font-family: var(--ar-mono); font-size: 11px; color: var(--ar-accent); }
[data-skin="arena"] .user-card .uc-stats { font-family: var(--ar-mono); font-size: 11px; }

/* ── 20. AUTH PAGES ─────────────────────────────────────────────────── */
[data-skin="arena"] .auth-wrap {
    position: relative;
    overflow: hidden;
    background-color: var(--ar-void);
    background-image:
        radial-gradient(900px 600px at 0% 0%, rgba(49,224,122,.08), transparent 60%);
    background-size: auto;
}
/* SLOT: auth — big ring right of the card (ring stands alone) + image */
[data-skin="arena"] .auth-wrap::before {
    content: '';
    position: absolute;
    right: 10%; top: 50%;
    left: auto; bottom: auto;
    width: 460px; height: 460px;
    margin-top: -230px;
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
    opacity: 1;
    background: radial-gradient(circle, rgba(49,224,122,.18) 0, rgba(49,224,122,.05) 40%, transparent 66%);
    box-shadow: inset 0 0 0 1px var(--ar-accent-line), inset 0 0 0 4px var(--ar-void), inset 0 0 0 5px rgba(255,255,255,.06), 0 0 0 34px rgba(255,255,255,.02), 0 0 0 35px rgba(255,255,255,.05);
    border: 2px solid transparent;
    border-top-color: var(--ar-gold);
    border-right-color: var(--ar-gold);
    transform: rotate(-24deg);
    animation: arOrbit 32s linear infinite;
}
[data-skin="arena"] .auth-wrap::after {
    content: '';
    position: absolute;
    right: var(--ar-char-x, 0px); top: 0; bottom: -6%;
    width: 42%;
    pointer-events: none;
    z-index: 0;
    background: var(--ar-char-auth, none) no-repeat right bottom / contain;
}
/* Slanted accent band across the auth backdrop */
[data-skin="arena"] .auth-card {
    position: relative;
    z-index: 1;
    border-radius: 0;
    background: var(--ar-surface);
    border: 1px solid var(--ar-line-2);
    clip-path: var(--ar-clip-panel);
    box-shadow: inset 0 4px 0 0 var(--ar-accent), 0 40px 80px -30px rgba(0,0,0,.9);
    background-image: none;
}
[data-skin="arena"] .auth-card h1 { font-size: 28px; text-align: left; margin-bottom: 16px; padding-bottom: 6px; }
[data-skin="arena"] .auth-card .sub { text-align: left; font-family: var(--ar-mono); font-size: 11.5px; letter-spacing: .04em; }
[data-skin="arena"] .auth-card .brand { justify-content: flex-start; }
[data-skin="arena"] .oauth-btn { border-radius: 0; clip-path: var(--ar-clip-btn); background: var(--ar-surface-2); border: 0; box-shadow: inset 0 0 0 1px var(--ar-line-2); font-weight: 800; text-transform: uppercase; letter-spacing: .05em; font-size: 12px; }
[data-skin="arena"] .oauth-btn:hover { background: var(--ar-surface-3); box-shadow: inset 0 0 0 1px var(--ar-accent-line); transform: none; }
[data-skin="arena"] .oauth-sep { font-family: var(--ar-mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--ar-mute); }
[data-skin="arena"] .oauth-sep::before,
[data-skin="arena"] .oauth-sep::after { background: var(--ar-line-2); pointer-events: none; }
[data-skin="arena"] .auth-forgot,
[data-skin="arena"] .auth-foot a { color: var(--ar-accent); font-weight: 700; }
[data-skin="arena"] .auth-foot { font-family: var(--ar-mono); font-size: 11.5px; letter-spacing: .03em; }
[data-skin="arena"] .input-2fa { font-family: var(--ar-mono); letter-spacing: .4em; }

/* ── 21. FOOTER ─────────────────────────────────────────────────────── */
[data-skin="arena"] .site-footer {
    position: relative;
    margin-top: 72px;
    padding-top: 56px;
    background: var(--ar-surface);
    border-top: 0;
    clip-path: var(--ar-clip-slant-t);
}
[data-skin="arena"] .site-footer::before {
    content: '';
    position: absolute;
    left: 0; right: 0; top: 0;
    height: var(--ar-slant);
    background: var(--ar-void);
    clip-path: polygon(0 0, 100% 0, 100% var(--ar-slant), 0 0);
    pointer-events: none;
}
[data-skin="arena"] .footer-grid h4 { font-size: 11px; color: var(--ar-accent); border-bottom: 1px solid var(--ar-line-2); padding-bottom: 10px; }
[data-skin="arena"] .footer-grid a { color: var(--ar-dim); font-weight: 600; }
[data-skin="arena"] .footer-grid a:hover { color: var(--ar-accent); padding-left: 6px; }
[data-skin="arena"] .footer-bottom { border-top: 1px solid var(--ar-line-2); font-family: var(--ar-mono); font-size: 11px; letter-spacing: .04em; }
[data-skin="arena"] .footer-brand b { background: none; -webkit-text-fill-color: currentColor; color: var(--ar-accent); }
[data-skin="arena"] .footer-social a { border-radius: 0; clip-path: var(--ar-clip-btn); background: var(--ar-surface-2); border: 0; box-shadow: inset 0 0 0 1px var(--ar-line-2); }
[data-skin="arena"] .footer-social a:hover { box-shadow: inset 0 0 0 1px var(--ar-accent-line); color: var(--ar-accent); }
[data-skin="arena"] .lang-switch a { font-weight: 800; }
[data-skin="arena"] .lang-switch a.on { color: var(--ar-accent); }
/* Legacy category markup (.category / .forum-row) used by a few pages */
[data-skin="arena"] .category > .cat-head { border-radius: 0; background: linear-gradient(90deg, var(--ar-surface-2), var(--ar-surface) 60%); box-shadow: inset 0 0 0 1px var(--ar-line-2), inset 4px 0 0 var(--ar-accent); clip-path: var(--ar-clip-panel); }
[data-skin="arena"] .cat-head .bar { border-radius: 0; background: var(--ar-accent); }
[data-skin="arena"] .cat-head .cat-meta { border-radius: 0; clip-path: var(--ar-clip-hex); font-family: var(--ar-mono); font-size: 10.5px; }
[data-skin="arena"] .forum-row { border-radius: 0; clip-path: var(--ar-clip-panel); background: var(--ar-surface); border: 1px solid var(--ar-line-2); }
[data-skin="arena"] .forum-row:hover { transform: none; box-shadow: none; border-color: var(--ar-accent-line); background: var(--ar-surface-2); }
[data-skin="arena"] .forum-icon { border-radius: 0; clip-path: var(--ar-clip-btn); }
[data-skin="arena"] .forum-stats,
[data-skin="arena"] .forum-last { border-radius: 0; background: var(--ar-void); border: 1px solid var(--ar-line); }
[data-skin="arena"] .forum-stats b { font-family: var(--ar-mono); }

/* ── 22. MOTION ─────────────────────────────────────────────────────── */
@keyframes arSweep { from { opacity: 1; transform: translateX(-120%) skewX(-18deg); } to { opacity: 1; transform: translateX(560%) skewX(-18deg); } }
@keyframes arPulse { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
@keyframes arOrbit { from { transform: translate3d(calc(var(--ar-px, 0) * -2px), calc(var(--ar-py, 0) * -2px), 0) rotate(-24deg); } to { transform: translate3d(calc(var(--ar-px, 0) * -2px), calc(var(--ar-py, 0) * -2px), 0) rotate(336deg); } }
@keyframes arRowIn { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: none; } }
@keyframes arFlash { 0% { box-shadow: inset 0 0 0 2px var(--ar-accent); } 100% { box-shadow: inset 0 0 0 0 transparent; } }
@keyframes arIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes arTick { 0% { color: var(--ar-accent); transform: translateY(-3px); } 100% { color: inherit; transform: none; } }
@keyframes arEdge { from { background-position: 100% 0; } to { background-position: 0 0; } }
/* JS reveal (one-shot). CSS is complete without it — nothing is hidden until JS opts in. */
[data-skin="arena"] .ar-reveal { opacity: 0; transform: translateY(12px); }
[data-skin="arena"] .ar-reveal.ar-in { animation: arIn 460ms var(--ar-ease) both; animation-delay: calc(var(--ar-i, 0) * 45ms); opacity: 1; transform: none; }
/* Counter tick */
[data-skin="arena"] .ar-tick { display: inline-block; animation: arTick 420ms var(--ar-ease) 1; }
/* Chamfer edge sweep: a light runs along the top edge of a panel once (JS adds .ar-sweep). */
[data-skin="arena"] .ar-sweep { position: relative; overflow: hidden; }
[data-skin="arena"] .ar-sweep .ar-sweep-bar,
[data-skin="arena"] .ar-sweep-bar {
    position: absolute;
    left: 0; right: 0; top: 0;
    height: 2px;
    /* Highlight travels via background-position: never any overflow, even on
       panels that must stay overflow:visible (profile head card). */
    background: linear-gradient(90deg, transparent 0 36%, var(--ar-accent) 45%, #fff 50%, var(--ar-accent) 55%, transparent 64% 100%);
    background-size: 300% 100%;
    background-position: 100% 0;
    animation: arEdge 900ms var(--ar-ease) 1 both;
    pointer-events: none;
    z-index: 5;
}
[data-skin="arena"] .fade-up { animation-name: arIn; }
[data-skin="arena"] .site-header .ar-sweep-bar { top: auto; bottom: -1px; }

@media (prefers-reduced-motion: reduce) {
    [data-skin="arena"] *,
    [data-skin="arena"] *::before,
    [data-skin="arena"] *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
    [data-skin="arena"] .ar-reveal { opacity: 1; transform: none; }
    [data-skin="arena"] .fi-hero--off::before,
    [data-skin="arena"] .auth-wrap::before { animation: none; transform: rotate(-24deg); }
    [data-skin="arena"] .fi-hero--off::after,
    [data-skin="arena"] .profile-head-card::before,
    [data-skin="arena"] .profile-head-card::after { transform: none; }
    [data-skin="arena"] .fi-eyebrow-dot { animation: none; }
    [data-skin="arena"] .btn::after,
    [data-skin="arena"] .ar-sweep-bar { display: none; }
}

/* ── 23. RESPONSIVE ─────────────────────────────────────────────────── */
/* ≥1440: the sidebar runs off the container edge (the deliberate bleed) */
@media (min-width: 1440px) {
    [data-skin="arena"] { --ar-bleed: 34px; }
    [data-skin="arena"] .fi-hero h1 { font-size: 64px; }
    [data-skin="arena"] .fi-hero--off { min-height: 460px; }
    [data-skin="arena"] .fi-hero--off::before { width: 380px; height: 380px; margin-top: -190px; right: 12%; }
    [data-skin="arena"] .fi-row { grid-template-columns: 56px 1fr 150px 300px; }
    [data-skin="arena"] .col-side { width: 340px; }
}
@media (min-width: 1180px) and (max-width: 1439px) {
    [data-skin="arena"] { --ar-bleed: 18px; }
}
@media (max-width: 1180px) {
    [data-skin="arena"] .fi-hero h1 { font-size: 44px; }
    [data-skin="arena"] .fi-hero--off .fi-hero-inner { padding: 52px 40px 76px; }
    [data-skin="arena"] .fi-hero--off::before { width: 300px; height: 300px; margin-top: -150px; right: 4%; }
    [data-skin="arena"] .fi-cat-bar::after { right: 90px; }
    [data-skin="arena"] .fi-row { grid-template-columns: 52px 1fr 130px 240px; }
    [data-skin="arena"] .col-main > section.fi-category:first-of-type .fi-row:first-child::after,
    [data-skin="arena"] .fi-row--featured::after { right: 250px; }
    [data-skin="arena"] .profile-name { font-size: 34px; }
}
@media (max-width: 1100px) {
    /* base drops .fi-last here — the activity panel moves into the info column
       as a compact inline strip is not possible without DOM, so keep stats.
       The skin's display:flex on .fi-last outranks the base's display:none,
       so it must be hidden again here or it wraps into a second grid row. */
    [data-skin="arena"] .fi-row { grid-template-columns: 50px 1fr 130px; padding-right: 18px; }
    [data-skin="arena"] .fi-row .fi-last { display: none; }
    [data-skin="arena"] .col-main > section.fi-category:first-of-type .fi-row:first-child::after,
    [data-skin="arena"] .fi-row--featured::after { right: 120px; width: 160px; }
}
@media (max-width: 1024px) {
    [data-skin="arena"] { --ar-bleed: 0px; }
    [data-skin="arena"] .fi-hero h1 { font-size: 38px; }
    [data-skin="arena"] .fi-hero--off { min-height: 360px; }
    [data-skin="arena"] .fi-hero--off .fi-hero-inner { padding: 44px 32px 68px; }
    [data-skin="arena"] .fi-hero--off::before { width: 240px; height: 240px; margin-top: -120px; right: 2%; opacity: .7; }
    [data-skin="arena"] .fi-hero--off::after { width: 40%; }
    [data-skin="arena"] .forum-banner h1 { font-size: 28px; }
    [data-skin="arena"] .leaderboard-hero h1 { font-size: 38px; }
    [data-skin="arena"] .page-head h1 { font-size: 26px; }
    [data-skin="arena"] .fi-cat-title { font-size: 20px; }
    [data-skin="arena"] .col-main > section.fi-category:first-of-type .fi-cat-title { font-size: 28px; }
    [data-skin="arena"] .fi-cat-bar::before { font-size: 60px; }
    [data-skin="arena"] .col-main > section.fi-category:first-of-type .fi-cat-bar::before { font-size: 80px; }
    [data-skin="arena"] .post-body { padding: 16px 20px 18px; }
}
/* Sidebar stacks below the board here (base rule) — kill the overlap, keep the bleed off. */
@media (max-width: 980px) {
    [data-skin="arena"] .fi-hero ~ .row > .col-side,
    [data-skin="arena"] .fi-hero--media ~ .row > .col-side { margin-top: 28px; }
    [data-skin="arena"] .col-side { margin-right: 0; }
    [data-skin="arena"] .fi-hero ~ .row { padding-top: 26px; }
    [data-skin="arena"] .main-nav { background: var(--ar-surface); border-bottom: 1px solid var(--ar-line-2); border-top: 3px solid var(--ar-accent); box-shadow: 0 30px 60px -20px rgba(0,0,0,.9); }
    [data-skin="arena"] .main-nav > a { border-radius: 0; font-size: 13px; letter-spacing: .1em; box-shadow: inset 0 -1px 0 var(--ar-line); }
    [data-skin="arena"] .main-nav a:not(.btn)::after { left: 0; right: auto; width: 3px; height: auto; top: 8px; bottom: 8px; transform: scaleY(0); transform-origin: top; clip-path: none; }
    [data-skin="arena"] .main-nav a:not(.btn):hover::after,
    [data-skin="arena"] .main-nav a.active::after { transform: scaleY(1); }
    [data-skin="arena"] .main-nav a.active { background: var(--ar-surface-2); padding-left: 18px; }
    [data-skin="arena"] .main-nav .user-menu .trigger { border-radius: 0; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; font-size: 13px; }
    [data-skin="arena"] .main-nav .user-menu .dropdown { border-top: 0; box-shadow: none; background: var(--ar-void); }
    [data-skin="arena"] .nav-mobile-search form { border-radius: 0; background: var(--ar-void); border: 1px solid var(--ar-line-2); clip-path: polygon(var(--ar-notch-sm) 0, 100% 0, 100% 100%, 0 100%, 0 var(--ar-notch-sm)); }
    [data-skin="arena"] .nav-mobile-search svg { color: var(--ar-accent); }
    [data-skin="arena"] .nav-mobile-divider { background: var(--ar-line-2); }
    [data-skin="arena"] .nav-mobile-auth { border-top: 1px solid var(--ar-line-2); }
    [data-skin="arena"] .profile-head-card::before { right: 2%; width: 180px; height: 180px; margin-top: -90px; opacity: .6; }
}
@media (max-width: 768px) {
    [data-skin="arena"] { --ar-notch: 10px; --ar-slant: 18px; }
    [data-skin="arena"] .fi-hero h1 { font-size: 32px; }
    [data-skin="arena"] .fi-hero--off { min-height: 0; }
    [data-skin="arena"] .fi-hero--off .fi-hero-inner { padding: 36px 22px 52px; gap: 22px; }
    [data-skin="arena"] .fi-hero--media .fi-hero-inner { padding: 36px 22px 52px; }
    [data-skin="arena"] .fi-hero--off::before { width: 200px; height: 200px; margin-top: -100px; right: -60px; opacity: .55; }
    [data-skin="arena"] .fi-hero--off::after { width: 52%; right: -8%; }
    [data-skin="arena"] .fi-hero-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: 100%; }
    [data-skin="arena"] .fi-stat { min-width: 0; padding: 12px 10px 10px; }
    [data-skin="arena"] .fi-stat b { font-size: 24px; }
    [data-skin="arena"] .fi-hero ~ .row::before { height: 22px; top: -12px; }
    /* Category band: numeral hides, title shrinks, ribbon stays */
    [data-skin="arena"] .fi-cat-bar { min-height: 60px; }
    [data-skin="arena"] .fi-cat-bar::before { display: none; }
    [data-skin="arena"] .fi-cat-bar::after { right: 60px; width: 140px; }
    [data-skin="arena"] .fi-cat-label { padding: 14px 14px 14px 40px; gap: 10px; }
    [data-skin="arena"] .fi-cat-accent { height: 12px; width: 100px; left: -30px; top: 6px; }
    [data-skin="arena"] .fi-cat-title { font-size: 17px; padding-bottom: 6px; }
    [data-skin="arena"] .col-main > section.fi-category:first-of-type .fi-cat-bar { min-height: 70px; }
    [data-skin="arena"] .col-main > section.fi-category:first-of-type .fi-cat-title { font-size: 22px; }
    [data-skin="arena"] .fi-cat-count { margin-right: 12px; padding: 4px 10px; font-size: 10px; }
    [data-skin="arena"] .fi-category { margin-bottom: 30px; }
    /* Rows: icon + info + stats inline under the title */
    [data-skin="arena"] .fi-row { grid-template-columns: 44px 1fr; gap: 12px; padding: 12px 14px 12px 16px; }
    [data-skin="arena"] .fi-row:not(.fi-row--featured):not(:has(.fi-subforums)) { padding-top: 9px; padding-bottom: 9px; }
    [data-skin="arena"] .fi-row:not(.fi-row--featured):not(:has(.fi-subforums)) .fi-icon { width: 36px; height: 36px; margin: 2px 0 0 4px; }
    [data-skin="arena"] .fi-row:not(.fi-row--featured):not(:has(.fi-subforums)) .fi-stats { padding: 2px 0 0; }
    [data-skin="arena"] .fi-icon { width: 42px; height: 42px; }
    [data-skin="arena"] .fi-icon-emoji { font-size: 20px; }
    [data-skin="arena"] .fi-info h3 { font-size: 16px; }
    [data-skin="arena"] .fi-row:not(.fi-row--featured):not(:has(.fi-subforums)) .fi-info h3 { font-size: 15px; }
    [data-skin="arena"] .fi-stats { grid-column: 2; flex-direction: row; justify-content: flex-start; gap: 14px; padding: 4px 0 0; }
    [data-skin="arena"] .fi-stats-row { flex-direction: row; align-items: baseline; gap: 6px; width: auto; padding: 0; }
    [data-skin="arena"] .fi-stats-row b { font-size: 15px; }
    [data-skin="arena"] .fi-row:not(.fi-row--featured):not(:has(.fi-subforums)) .fi-stats-row b { font-size: 14px; }
    [data-skin="arena"] .fi-row:not(.fi-row--featured):not(:has(.fi-subforums)) .fi-stats-sep { display: none; }
    [data-skin="arena"] .fi-stats-sep { display: none; }
    [data-skin="arena"] .fi-last { display: none; }
    [data-skin="arena"] .col-main > section.fi-category:first-of-type .fi-row:first-child,
    [data-skin="arena"] .fi-row--featured { padding-top: 18px; padding-bottom: 18px; }
    [data-skin="arena"] .col-main > section.fi-category:first-of-type .fi-row:first-child .fi-icon,
    [data-skin="arena"] .fi-row--featured .fi-icon { width: 44px; height: 44px; }
    [data-skin="arena"] .col-main > section.fi-category:first-of-type .fi-row:first-child .fi-stats-row b,
    [data-skin="arena"] .fi-row--featured .fi-stats-row b { font-size: 17px; }
    [data-skin="arena"] .col-main > section.fi-category:first-of-type .fi-row:first-child .fi-info h3,
    [data-skin="arena"] .fi-row--featured .fi-info h3 { font-size: 21px; }
    [data-skin="arena"] .col-main > section.fi-category:first-of-type .fi-row:first-child .fi-stats,
    [data-skin="arena"] .fi-row--featured .fi-stats { flex-direction: row; gap: 14px; padding: 4px 0 0; }
    [data-skin="arena"] .col-main > section.fi-category:first-of-type .fi-row:first-child::after,
    [data-skin="arena"] .fi-row--featured::after { right: -40px; width: 150px; opacity: .6; }
    [data-skin="arena"] .fi-featured-badge { width: 120px; left: -34px; top: 8px; font-size: 8.5px; }
    /* Subforum chips scroll horizontally instead of wrapping */
    [data-skin="arena"] .fi-subforums { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 2px; }
    [data-skin="arena"] .fi-subforums::-webkit-scrollbar { display: none; }
    [data-skin="arena"] .fi-sf-chip { flex-shrink: 0; }
    /* Sidebar widgets */
    [data-skin="arena"] .col-side > .widget:first-child::before { right: -90px; top: -90px; }
    [data-skin="arena"] .online-strip { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
    [data-skin="arena"] .online-strip::-webkit-scrollbar { display: none; }
    [data-skin="arena"] .online-strip a { flex-shrink: 0; }
    /* Topic list: hide stat columns, keep the last-reply avatar */
    [data-skin="arena"] .topic-list-head { display: none; }
    /* Thread */
    [data-skin="arena"] .topic-hero { padding: 18px 16px; }
    [data-skin="arena"] .topic-hero h1 { font-size: 22px; }
    [data-skin="arena"] .topic-hero::before { display: none; }
    [data-skin="arena"] .topic-hero::after { opacity: .5; }
    [data-skin="arena"] .post-author { padding: 14px 14px 12px; border-right: 0; border-bottom: 1px solid var(--ar-line-2); }
    [data-skin="arena"] .pa-avatar::before { width: 72px; height: 72px; margin: -36px 0 0 -36px; }
    [data-skin="arena"] .post-content { font-size: 15px; line-height: 1.72; }
    [data-skin="arena"] .ptool { width: 32px; height: 32px; }
    /* Profile */
    [data-skin="arena"] .profile-cover { height: 180px; }
    [data-skin="arena"] .profile-head-card { padding: 0 16px 20px; }
    [data-skin="arena"] .profile-head-card::before { display: none; }
    [data-skin="arena"] .profile-head-card::after { opacity: .5; top: -10%; }
    [data-skin="arena"] .profile-name { font-size: 28px; }
    [data-skin="arena"] .profile-avatar-wrap::before { width: 120px; height: 120px; margin: -60px 0 0 -60px; }
    /* Page headers */
    [data-skin="arena"] .forum-banner::before,
    [data-skin="arena"] .leaderboard-hero::before,
    [data-skin="arena"] .page-head::before { display: none; }
    [data-skin="arena"] .forum-banner h1 { font-size: 22px; }
    [data-skin="arena"] .leaderboard-hero { padding: 26px 18px; }
    [data-skin="arena"] .leaderboard-hero h1 { font-size: 30px; }
    [data-skin="arena"] .page-head { padding: 14px 16px; }
    [data-skin="arena"] .page-head h1 { font-size: 22px; }
    [data-skin="arena"] .empty-state h1 { font-size: 64px; }
    /* Sort tabs / leaderboard tabs: horizontal scroll */
    [data-skin="arena"] .sort-tabs,
    [data-skin="arena"] .leaderboard-tabs,
    [data-skin="arena"] .lb-period { flex-wrap: nowrap !important; overflow-x: auto; scrollbar-width: none; }
    [data-skin="arena"] .sort-tabs::-webkit-scrollbar,
    [data-skin="arena"] .leaderboard-tabs::-webkit-scrollbar { display: none; }
    [data-skin="arena"] .sort-tab,
    [data-skin="arena"] .lb-tab { flex-shrink: 0; }
    /* Settings nav: horizontal strip */
    [data-skin="arena"] .settings-nav { clip-path: none; }
    [data-skin="arena"] .settings-nav::after { display: none; }
    [data-skin="arena"] .settings-nav a.active { border-bottom-color: var(--ar-accent); padding-left: 14px; }
    /* Auth */
    [data-skin="arena"] .auth-wrap::before { right: -160px; width: 320px; height: 320px; margin-top: -160px; opacity: .6; }
    [data-skin="arena"] .auth-wrap::after { width: 60%; right: -14%; opacity: .5; }
    /* Footer */
    [data-skin="arena"] .site-footer { padding-top: 40px; margin-top: 48px; }
    /* Buttons: keep chamfer subtle at small sizes */
    [data-skin="arena"] .btn-sm { --ar-notch-sm: 6px; }
}
@media (max-width: 480px) {
    [data-skin="arena"] { --ar-notch: 8px; --ar-notch-sm: 6px; }
    [data-skin="arena"] .fi-hero h1 { font-size: 27px; }
    [data-skin="arena"] .fi-hero--off .fi-hero-inner { padding: 28px 16px 44px; }
    [data-skin="arena"] .fi-hero--media .fi-hero-inner { padding: 28px 16px 44px; }
    [data-skin="arena"] .fi-hero--off::before { display: none; }
    [data-skin="arena"] .fi-hero--off::after { width: 62%; right: -16%; opacity: .55; }
    [data-skin="arena"] .fi-hero p { font-size: 14px; }
    [data-skin="arena"] .fi-eyebrow { font-size: 10px; padding: 5px 12px; }
    [data-skin="arena"] .fi-stat b { font-size: 20px; }
    [data-skin="arena"] .fi-cat-bar::after { display: none; }
    [data-skin="arena"] .fi-cat-title { font-size: 15px; }
    [data-skin="arena"] .col-main > section.fi-category:first-of-type .fi-cat-title { font-size: 18px; }
    [data-skin="arena"] .fi-cat-count { display: none; }
    [data-skin="arena"] .fi-row { grid-template-columns: 38px 1fr; gap: 10px; padding: 11px 12px 11px 14px; }
    [data-skin="arena"] .fi-icon { width: 36px; height: 36px; }
    [data-skin="arena"] .fi-icon-emoji { font-size: 18px; }
    [data-skin="arena"] .fi-info h3 { font-size: 14px; }
    [data-skin="arena"] .fi-row .fi-desc { display: none; }
    [data-skin="arena"] .col-main > section.fi-category:first-of-type .fi-row:first-child .fi-desc,
    [data-skin="arena"] .fi-row--featured .fi-desc { display: -webkit-box; }
    [data-skin="arena"] .col-main > section.fi-category:first-of-type .fi-row:first-child::after,
    [data-skin="arena"] .fi-row--featured::after { display: none; }
    [data-skin="arena"] .fi-board-stats { grid-template-columns: 1fr 1fr; gap: 6px; padding: 12px; }
    [data-skin="arena"] .fi-bs-val { font-size: 19px; }
    [data-skin="arena"] .widget-head,
    [data-skin="arena"] .fi-widget-head { padding: 13px 14px 12px; font-size: 12px; }
    [data-skin="arena"] .widget-head::after,
    [data-skin="arena"] .fi-widget-head::after { left: 14px; }
    [data-skin="arena"] .topic-hero h1 { font-size: 19px; }
    [data-skin="arena"] .topic-hero-meta { gap: 10px; font-size: 11px; }
    [data-skin="arena"] .post-body { padding: 14px 14px 16px; }
    [data-skin="arena"] .post-content { font-size: 14.5px; }
    [data-skin="arena"] .react-main { font-size: 11px; }
    [data-skin="arena"] .profile-name { font-size: 24px; }
    [data-skin="arena"] .profile-cover { height: 140px; }
    [data-skin="arena"] .profile-stat b { font-size: 20px; }
    [data-skin="arena"] .leaderboard-hero h1 { font-size: 26px; }
    [data-skin="arena"] .page-head h1 { font-size: 20px; }
    [data-skin="arena"] .member-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
    [data-skin="arena"] .member-card { padding: 20px 10px 14px; }
    [data-skin="arena"] .member-card::before { width: 96px; height: 96px; margin-left: -48px; top: 18px; }
    [data-skin="arena"] .mc-name { font-size: 13px; }
    [data-skin="arena"] .auth-card { padding: 26px 20px 24px; }
    [data-skin="arena"] .auth-card h1 { font-size: 24px; }
    [data-skin="arena"] .empty-state h1 { font-size: 52px; }
    [data-skin="arena"] .pagination a,
    [data-skin="arena"] .pagination span { min-width: 34px; height: 34px; font-size: 12px; }
    [data-skin="arena"] .btn { font-size: 12px; letter-spacing: .04em; }
    [data-skin="arena"] .announce-bar { font-size: 11.5px; }
    [data-skin="arena"] .announce-bar::after { width: 14%; }
    [data-skin="arena"] .fi-hero ~ .row::before { left: -12px; right: -12px; }
    [data-skin="arena"] .cookie-bar { clip-path: none; }
    [data-skin="arena"] .cookie-bar::after { display: none; }
}
@media (max-width: 390px) {
    [data-skin="arena"] .fi-hero h1 { font-size: 24px; }
    [data-skin="arena"] .fi-hero-stats { grid-template-columns: 1fr 1fr; gap: 6px; }
    [data-skin="arena"] .fi-stat { padding: 10px 8px 8px; }
    [data-skin="arena"] .fi-stat b { font-size: 18px; }
    [data-skin="arena"] .fi-cat-label { padding-left: 34px; }
    [data-skin="arena"] .fi-cat-accent { width: 90px; left: -28px; height: 10px; }
    [data-skin="arena"] .fi-row { grid-template-columns: 34px 1fr; padding: 10px 10px 10px 12px; }
    [data-skin="arena"] .fi-icon { width: 32px; height: 32px; }
    [data-skin="arena"] .fi-stats { gap: 10px; }
    [data-skin="arena"] .fi-stats-row span { display: none; }
    [data-skin="arena"] .member-grid { grid-template-columns: 1fr; }
    [data-skin="arena"] .profile-name { font-size: 21px; }
    [data-skin="arena"] .topic-hero-actions { flex-wrap: wrap; }
    [data-skin="arena"] .post-content { font-size: 14px; }
    [data-skin="arena"] .empty-state h1 { font-size: 44px; }
}
/* Touch devices: no hover-only reveals, larger targets, no pointer parallax */
@media (hover: none) {
    [data-skin="arena"] .btn::after { display: none; }
    [data-skin="arena"] .fi-hero--off::after,
    [data-skin="arena"] .fi-hero--off::before,
    [data-skin="arena"] .profile-head-card::before,
    [data-skin="arena"] .profile-head-card::after { transition: none; }
    [data-skin="arena"] .fi-hero--off::before { animation: none; transform: rotate(-24deg); }
    [data-skin="arena"] .fi-row:hover .fi-icon { transform: none; }
    [data-skin="arena"] .member-card:hover::before { transform: rotate(-30deg); }
    [data-skin="arena"] .member-card::after { opacity: 1; }
    [data-skin="arena"] .main-nav a:not(.btn)::after { transition: none; }
    [data-skin="arena"] .ptool { width: 40px; height: 40px; }
    [data-skin="arena"] .react-main { min-height: 40px; }
    [data-skin="arena"] .fi-sf-chip { padding-top: 6px; padding-bottom: 6px; }
    [data-skin="arena"] .online-strip a img { width: 38px; height: 38px; }
    [data-skin="arena"] .pagination a,
    [data-skin="arena"] .pagination span { min-width: 40px; height: 40px; }
}