@import url('https://fonts.googleapis.com/css2?family=Inter:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,800;1,900&family=JetBrains+Mono:wght@400;500;600;700&display=swap');

/* =====================================================================
   ESAForum SKIN · "widegaming"
   Bold esports HUD: deep-navy canvas, electric CYAN accent, wide/uppercase
   mono headings, angular clipped panels, energetic diagonal glows.
   Everything scoped under [data-skin="widegaming"] so it never leaks into
   other skins or the ACP.  Derived from /home/widegaming.html.
   ===================================================================== */

/* ── 1. DESIGN TOKENS ───────────────────────────────────────────────── */
:root[data-skin="widegaming"] {
    /* Deep navy canvas → graphite-navy panels */
    --bg-0: #03121b;
    --bg-1: #061a24;
    --bg-2: #0a222e;
    --surface: #0c2531;
    --surface-2: #10303e;
    --surface-3: #184559;
    --elev: #0e2a37;
    --border: #123a49;
    --border-soft: #0e2c39;

    /* Text — cool steel on navy */
    --text: #ecf1f7;
    --text-dim: #9fb4c2;
    --text-mute: #5f7a8a;

    /* Electric cyan — the one accent */
    --primary: #22c4fa;
    --primary-rgb: 34, 196, 250;
    --primary-2: #5bd7ff;
    --accent: #0a85b0;
    --accent-2: #22c4fa;
    --accent-rgb: 34, 196, 250;
    --on-accent: #03121b;

    /* Signals — lime reserved for "online/live", plus warm/red states */
    --pink: #ff5c8a;
    --green: #c5fb45;      /* lime online signal (matches source) */
    --amber: #ffca3a;
    --red: #ff4d6d;

    --grad-primary: linear-gradient(135deg, #22c4fa 0%, #0a85b0 100%);
    --grad-pink: linear-gradient(135deg, #ff5c8a 0%, #22c4fa 100%);
    --grad-cyan: linear-gradient(135deg, #5bd7ff 0%, #22c4fa 100%);
    --grad-surface: linear-gradient(180deg, rgba(34,196,250,.07), rgba(34,196,250,0));

    /* Angular / near-sharp geometry */
    --radius: 3px;
    --radius-sm: 2px;
    --radius-lg: 4px;

    --shadow: 0 14px 40px rgba(0,0,0,.55);
    --shadow-glow: 0 0 0 1px rgba(34,196,250,.30), 0 10px 34px rgba(34,196,250,.20);
    --ring: 0 0 0 3px rgba(34,196,250,.32);
    --primary-glow: rgba(34,196,250,.18);

    --font: 'Inter', system-ui, -apple-system, sans-serif;
    --mono: 'JetBrains Mono', ui-monospace, Menlo, monospace;
}

/* ── 2. CANVAS ──────────────────────────────────────────────────────── */
[data-skin="widegaming"] body {
    background:
        repeating-linear-gradient(-58deg, transparent 0 90px, rgba(34,196,250,.022) 90px 91px),
        radial-gradient(1100px 560px at 82% -160px, rgba(34,196,250,.13), transparent 62%),
        radial-gradient(760px 440px at 12% 110%, rgba(34,196,250,.05), transparent 65%),
        var(--bg-0);
    /* NOTE: no 'background-attachment: fixed' — it made Chromium drop the hero
       <video> and forum banner backgrounds on repaint (hover). */
    letter-spacing: -.004em;
}
[data-skin="widegaming"] ::selection { background: var(--primary); color: #03121b; }
[data-skin="widegaming"] ::-webkit-scrollbar-thumb { background: var(--surface-3); border-radius: 0; }
[data-skin="widegaming"] ::-webkit-scrollbar-thumb:hover { background: var(--primary); }
[data-skin="widegaming"] a { color: var(--primary-2); }
[data-skin="widegaming"] a:hover { color: var(--primary); }
[data-skin="widegaming"] :focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 0; }

/* Wide, tight, uppercase-leaning headings */
[data-skin="widegaming"] h1,
[data-skin="widegaming"] h2,
[data-skin="widegaming"] h3,
[data-skin="widegaming"] h4 {
    letter-spacing: -.02em;
    font-weight: 800;
}

/* Monospace helper text used across the source design */
[data-skin="widegaming"] .text-mute,
[data-skin="widegaming"] .ai-time { letter-spacing: .01em; }

/* ── 3. HEADER / NAV ────────────────────────────────────────────────── */
[data-skin="widegaming"] .site-header {
    background: linear-gradient(180deg, var(--bg-2), var(--bg-1));
    border-bottom: 1px solid var(--border);
    box-shadow: 0 1px 0 rgba(34,196,250,.18), 0 8px 30px rgba(0,0,0,.4);
}
[data-skin="widegaming"] .main-nav a {
    font-family: var(--mono);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    border-radius: 0;
    color: var(--text-dim);
    position: relative;
}
[data-skin="widegaming"] .main-nav a:hover { background: var(--surface-2); color: #fff; }
[data-skin="widegaming"] .main-nav a.active { color: var(--primary); background: transparent; }
[data-skin="widegaming"] .main-nav a.active::after {
    content: ""; position: absolute; left: 10px; right: 10px; bottom: 3px; height: 2px;
    background: var(--primary); box-shadow: 0 0 8px var(--primary);
}
[data-skin="widegaming"] .icon-btn {
    border-radius: 2px;
    border: 1px solid var(--border-soft);
    background: var(--surface);
    color: var(--text-dim);
}
[data-skin="widegaming"] .icon-btn:hover { color: #fff; border-color: var(--primary); background: var(--surface-2); }
[data-skin="widegaming"] .search-mini {
    border-radius: 2px;
    border: 1px solid var(--border);
    background: var(--surface);
}
[data-skin="widegaming"] .search-mini:focus-within { border-color: var(--primary); box-shadow: var(--ring); }
[data-skin="widegaming"] .badge-count {
    background: var(--primary);
    color: #03121b;
    border-radius: 2px;
    font-family: var(--mono);
    font-weight: 700;
}

/* Dropdowns / header panels */
[data-skin="widegaming"] .dropdown,
[data-skin="widegaming"] .hdr-panel {
    background: var(--elev);
    border: 1px solid var(--border);
    border-radius: 3px;
    box-shadow: var(--shadow);
}
[data-skin="widegaming"] .dropdown a,
[data-skin="widegaming"] .dropdown button {
    border-radius: 2px;
}
[data-skin="widegaming"] .dropdown a:hover,
[data-skin="widegaming"] .dropdown button:hover { background: var(--surface-2); color: var(--primary); }
[data-skin="widegaming"] .hdr-panel-head { border-bottom: 1px solid var(--border); }
[data-skin="widegaming"] .user-menu .trigger { border-radius: 2px; }
[data-skin="widegaming"] .user-menu .trigger:hover { background: var(--surface-2); }

/* Announcement bar */
[data-skin="widegaming"] .announce-bar {
    background: linear-gradient(90deg, rgba(34,196,250,.14), transparent 70%);
    border-bottom: 1px solid var(--border);
    font-family: var(--mono);
    letter-spacing: .04em;
}

/* ── 4. BUTTONS (angular, clipped, mono uppercase) ──────────────────── */
[data-skin="widegaming"] .btn {
    font-family: var(--mono);
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    border-radius: 0;
    border: 1px solid transparent;
}
[data-skin="widegaming"] .btn-primary {
    background: var(--primary);
    color: #03121b;
    box-shadow: 0 6px 18px rgba(34,196,250,.30);
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%);
}
[data-skin="widegaming"] .btn-primary:hover {
    background: #41cdff;
    color: #03121b;
    box-shadow: 0 8px 26px rgba(34,196,250,.5);
    transform: translateY(-1px);
}
[data-skin="widegaming"] .btn-ghost {
    background: transparent;
    color: var(--text-dim);
    border-color: var(--border);
}
[data-skin="widegaming"] .btn-ghost:hover { color: #fff; border-color: var(--primary); background: var(--surface); }
[data-skin="widegaming"] .btn-danger {
    background: transparent;
    color: var(--red);
    border-color: rgba(255,77,109,.5);
}
[data-skin="widegaming"] .btn-danger:hover { background: rgba(255,77,109,.14); color: #fff; }
[data-skin="widegaming"] .btn-block { clip-path: none; }

/* ── 5. CARDS / CONTAINERS ──────────────────────────────────────────── */
[data-skin="widegaming"] .card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 3px;
}
[data-skin="widegaming"] .card-head,
[data-skin="widegaming"] .card__header { border-bottom: 1px solid var(--border); }
[data-skin="widegaming"] .card__title { text-transform: uppercase; letter-spacing: .04em; font-weight: 800; }
[data-skin="widegaming"] .card__header::before { background: var(--primary); box-shadow: 0 0 8px var(--primary); }
[data-skin="widegaming"] .empty-state {
    background: var(--surface);
    border: 1px dashed var(--border);
    border-radius: 3px;
}
[data-skin="widegaming"] .breadcrumbs {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: .08em;
    text-transform: uppercase;
}
[data-skin="widegaming"] .pagination a,
[data-skin="widegaming"] .pagination span {
    border-radius: 2px;
    font-family: var(--mono);
    border: 1px solid var(--border);
    background: var(--surface);
}
[data-skin="widegaming"] .pagination a:hover { border-color: var(--primary); color: #fff; }
[data-skin="widegaming"] .pagination .current {
    background: var(--primary);
    color: #03121b;
    border-color: transparent;
}

/* Alerts — left accent bar, flat */
[data-skin="widegaming"] .alert {
    border-radius: 2px;
    border-width: 1px 1px 1px 3px;
}

/* ── 6. BOARD-INDEX HERO ────────────────────────────────────────────── */
[data-skin="widegaming"] .fi-hero {
    border-radius: 4px;
    border: 1px solid var(--border);
    background:
        repeating-linear-gradient(-58deg, transparent 0 90px, rgba(34,196,250,.03) 90px 91px),
        radial-gradient(1200px 560px at 82% 8%, rgba(34,196,250,.16), transparent 60%),
        linear-gradient(180deg, var(--bg-2), var(--bg-1));
    box-shadow: 0 0 0 1px rgba(34,196,250,.10), 0 24px 60px rgba(0,0,0,.55);
}
[data-skin="widegaming"] .fi-hero h1 {
    font-weight: 900;
    font-style: italic;
    text-transform: uppercase;
    letter-spacing: -.035em;
    line-height: .95;
}
[data-skin="widegaming"] .fi-hero h1 .grad {
    background: none;
    -webkit-text-fill-color: currentColor;
    color: var(--primary);
    text-shadow: 0 0 22px rgba(34,196,250,.5);
}
[data-skin="widegaming"] .fi-eyebrow {
    border-radius: 0;
    font-family: var(--mono);
    text-transform: uppercase;
    letter-spacing: .18em;
    font-size: 10px;
    background: rgba(34,196,250,.10);
    border: 1px solid rgba(34,196,250,.32);
    color: var(--primary-2);
}
[data-skin="widegaming"] .fi-eyebrow-dot { background: var(--green); box-shadow: 0 0 8px var(--green); border-radius: 50%; }

/* Hero stat "tape" cells — angular, mono numbers */
[data-skin="widegaming"] .fi-stat {
    border-radius: 0;
    background: rgba(10,34,46,.72);
    border: 1px solid var(--border);
    backdrop-filter: blur(6px);
}
[data-skin="widegaming"] .fi-stat:hover { background: rgba(34,196,250,.10); border-color: rgba(34,196,250,.4); }
[data-skin="widegaming"] .fi-stat b { font-family: var(--mono); letter-spacing: -.02em; }
[data-skin="widegaming"] .fi-stat span { font-family: var(--mono); letter-spacing: .18em; }
[data-skin="widegaming"] .fi-stat.fi-stat-online b { color: var(--green); text-shadow: 0 0 16px rgba(197,251,69,.5); }

/* ── 7. BOARD INDEX: categories + forum rows ────────────────────────── */
[data-skin="widegaming"] .fi-cat-bar {
    border-radius: 3px 3px 0 0;
    background: linear-gradient(90deg, var(--surface-2), var(--surface));
    border: 1px solid var(--border);
    border-bottom: 0;
}
[data-skin="widegaming"] .fi-cat-accent { background: var(--primary); box-shadow: 0 0 10px var(--primary); }
[data-skin="widegaming"] .fi-cat-title {
    text-transform: uppercase;
    letter-spacing: .06em;
    font-weight: 800;
}
[data-skin="widegaming"] .fi-cat-count {
    font-family: var(--mono);
    text-transform: uppercase;
    letter-spacing: .16em;
    font-size: 10px;
    color: var(--text-mute);
}
[data-skin="widegaming"] .fi-forum-list {
    border: 1px solid var(--border);
    border-radius: 0 0 3px 3px;
    background: var(--surface);
}
[data-skin="widegaming"] .fi-row {
    border-bottom: 1px solid var(--border-soft);
    border-radius: 0;
}
[data-skin="widegaming"] .fi-row::before { background: var(--border); width: 2px; }
/* Row hover flattened to match the default theme: no background/stripe change on
   hover. Overriding the `background` shorthand here wiped per-forum banner images
   (and the repaint dropped the hero video). Only the icon animates. */
[data-skin="widegaming"] .fi-icon {
    border-radius: 0;
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%);
    background: var(--surface-3);
}
[data-skin="widegaming"] .fi-info h3 { font-weight: 800; letter-spacing: -.01em; }
[data-skin="widegaming"] .fi-info h3 a:hover { color: var(--primary); }
[data-skin="widegaming"] .fi-desc { color: var(--text-dim); }
[data-skin="widegaming"] .fi-sf-chip {
    border-radius: 2px;
    font-family: var(--mono);
    font-size: 10.5px;
    letter-spacing: .02em;
    background: var(--bg-2);
    border: 1px solid var(--border-soft);
    color: var(--text-dim);
}
[data-skin="widegaming"] .fi-sf-chip:hover { border-color: var(--primary); color: var(--primary); }
[data-skin="widegaming"] .fi-sf-dot { background: var(--primary); }
[data-skin="widegaming"] .fi-stats b,
[data-skin="widegaming"] .fi-stats-row b { font-family: var(--mono); letter-spacing: -.02em; }
[data-skin="widegaming"] .fi-stats-row span { font-family: var(--mono); text-transform: uppercase; letter-spacing: .16em; font-size: 9px; }
[data-skin="widegaming"] .fi-last-topic b { font-weight: 700; }
[data-skin="widegaming"] .fi-last-by,
[data-skin="widegaming"] .fi-last-empty {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--text-mute);
}
[data-skin="widegaming"] .fi-last-ava { border-radius: 2px; }

/* ── 8. SIDEBAR WIDGETS ─────────────────────────────────────────────── */
[data-skin="widegaming"] .widget,
[data-skin="widegaming"] .fi-widget {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 3px;
}
[data-skin="widegaming"] .widget-head,
[data-skin="widegaming"] .fi-widget-head {
    font-family: var(--mono);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .16em;
    font-size: 11px;
    color: var(--text);
    border-bottom: 1px solid var(--border);
    background: linear-gradient(90deg, rgba(34,196,250,.05), transparent);
}
[data-skin="widegaming"] .widget-head::before,
[data-skin="widegaming"] .fi-widget-head::before {
    content: "/ ";
    color: var(--primary);
    font-weight: 700;
}
[data-skin="widegaming"] .fi-pill,
[data-skin="widegaming"] .pill-count {
    font-family: var(--mono);
    border-radius: 2px;
    background: var(--surface-3);
    color: var(--primary-2);
}
[data-skin="widegaming"] .fi-board-stats { border: 1px solid var(--border); border-radius: 2px; overflow: hidden; }
[data-skin="widegaming"] .fi-bs-item { border-color: var(--border) !important; }
[data-skin="widegaming"] .fi-bs-val { font-family: var(--mono); font-weight: 700; letter-spacing: -.02em; }
[data-skin="widegaming"] .fi-bs-val.online { color: var(--green); }
[data-skin="widegaming"] .fi-bs-label { font-family: var(--mono); text-transform: uppercase; letter-spacing: .16em; font-size: 8.5px; }

/* Rank rows (top members / trending / contributors) */
[data-skin="widegaming"] .rank-row { border-radius: 2px; }
[data-skin="widegaming"] .rank-row:hover { background: var(--surface-2); }
[data-skin="widegaming"] .rank-row .rk {
    border-radius: 2px;
    font-family: var(--mono);
    background: var(--surface-3);
    color: var(--text-dim);
}
[data-skin="widegaming"] .rank-row .rk.gold { background: linear-gradient(135deg, var(--primary), #0a85b0); color: #03121b; }
[data-skin="widegaming"] .rank-row .rk.silver { background: var(--surface-3); color: var(--primary-2); }
[data-skin="widegaming"] .rank-row .rk.bronze { background: var(--surface-3); color: var(--text-dim); }
[data-skin="widegaming"] .rank-row .val { font-family: var(--mono); font-weight: 600; color: var(--text-dim); }

/* Online strip + activity feed */
[data-skin="widegaming"] .online-strip img { border-radius: 2px; }
[data-skin="widegaming"] .online-dot.on,
[data-skin="widegaming"] .online-dot { background: var(--green); box-shadow: 0 0 8px var(--green); }
[data-skin="widegaming"] .act-item .avatar { border-radius: 2px !important; }
[data-skin="widegaming"] .ai-ico { border-radius: 2px; }
[data-skin="widegaming"] .ai-time { font-family: var(--mono); font-size: 10px; letter-spacing: .03em; color: var(--text-mute); }

/* Champion block */
[data-skin="widegaming"] .fi-champion { border-bottom: 1px solid var(--border) !important; }

/* Group legend (bottom of board index) */
[data-skin="widegaming"] .fi-legend {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 3px;
}
[data-skin="widegaming"] .fi-legend-title { text-transform: uppercase; letter-spacing: .05em; font-weight: 800; }
[data-skin="widegaming"] .fi-legend-sub { font-family: var(--mono); font-size: 11px; }
[data-skin="widegaming"] .fi-legend-item { border-radius: 2px; font-family: var(--mono); font-size: 12px; }
[data-skin="widegaming"] .fi-legend-count { border-radius: 2px; font-family: var(--mono); }

/* TeamSpeak chip in sidebar */
[data-skin="widegaming"] .chip { border-radius: 2px; font-family: var(--mono); background: var(--surface-2); border: 1px solid var(--border); }

/* ── 9. FORUM VIEW + TOPIC LIST ─────────────────────────────────────── */
[data-skin="widegaming"] .forum-banner {
    border-radius: 3px;
    border: 1px solid var(--border);
    background: linear-gradient(135deg, rgba(34,196,250,.14), var(--surface));
}
[data-skin="widegaming"] .fb-icon { border-radius: 2px; }
[data-skin="widegaming"] .subforum-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 3px;
}
[data-skin="widegaming"] .subforum-card:hover { border-color: var(--primary); }
[data-skin="widegaming"] .sc-icon { border-radius: 2px; }
[data-skin="widegaming"] .sc-title { font-weight: 700; }
[data-skin="widegaming"] .sc-count { font-family: var(--mono); font-size: 11px; color: var(--text-mute); }
[data-skin="widegaming"] .topic-list,
[data-skin="widegaming"] .topic-list-head {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 3px;
}
[data-skin="widegaming"] .topic-list-head {
    font-family: var(--mono);
    text-transform: uppercase;
    letter-spacing: .14em;
    font-size: 10.5px;
    color: var(--text-mute);
}
[data-skin="widegaming"] .topic-row {
    border-bottom: 1px solid var(--border-soft);
    border-radius: 0;
    position: relative;
}
[data-skin="widegaming"] .topic-row::before {
    content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 2px;
    background: transparent; transition: background .15s;
}
[data-skin="widegaming"] .topic-row:hover { background: linear-gradient(90deg, rgba(34,196,250,.07), transparent 55%); }
[data-skin="widegaming"] .topic-row:hover::before { background: var(--primary); box-shadow: 0 0 8px var(--primary); }
[data-skin="widegaming"] .topic-icon,
[data-skin="widegaming"] .ti-ava { border-radius: 2px; }
[data-skin="widegaming"] .tm-title { font-weight: 700; letter-spacing: -.01em; }
[data-skin="widegaming"] .tm-meta,
[data-skin="widegaming"] .topic-last,
[data-skin="widegaming"] .tl-lastby { font-family: var(--mono); font-size: 10.5px; letter-spacing: .02em; }
[data-skin="widegaming"] .topic-stat b,
[data-skin="widegaming"] .ts-val { font-family: var(--mono); letter-spacing: -.02em; }
[data-skin="widegaming"] .tl-lastby-ava { border-radius: 2px; }

/* ── 10. TOPIC VIEW: hero + posts ───────────────────────────────────── */
[data-skin="widegaming"] .topic-hero {
    background:
        radial-gradient(700px 300px at 90% -40%, rgba(34,196,250,.16), transparent 60%),
        linear-gradient(180deg, var(--surface-2), var(--surface));
    border: 1px solid var(--border);
    border-radius: 4px;
}
[data-skin="widegaming"] .topic-hero-main h1 { text-transform: uppercase; font-weight: 900; font-style: italic; letter-spacing: -.03em; }
[data-skin="widegaming"] .topic-hero-meta { font-family: var(--mono); font-size: 11px; letter-spacing: .03em; }
[data-skin="widegaming"] .post,
[data-skin="widegaming"] .reply-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 3px;
}
[data-skin="widegaming"] .post-author {
    background: linear-gradient(180deg, var(--surface-2), var(--surface));
    border-right: 1px solid var(--border);
}
[data-skin="widegaming"] .post-author .avatar { border-radius: 2px !important; }
[data-skin="widegaming"] .post-num { font-family: var(--mono); color: var(--text-mute); }
[data-skin="widegaming"] .post-top,
[data-skin="widegaming"] .post-foot { border-color: var(--border); }
[data-skin="widegaming"] .post-content .post-quote {
    border-left: 3px solid var(--primary);
    background: var(--bg-2);
    border-radius: 0 3px 3px 0;
    color: var(--text-dim);
}
[data-skin="widegaming"] .post-content .post-quote cite { color: var(--primary-2); }
[data-skin="widegaming"] .post-content .code-block,
[data-skin="widegaming"] .post-content pre {
    background: var(--bg-0);
    border: 1px solid var(--border);
    border-left: 3px solid var(--primary);
    border-radius: 0 3px 3px 0;
    font-family: var(--mono);
}
[data-skin="widegaming"] .post-sig { border-top: 1px dashed var(--border); color: var(--text-mute); }

/* Reactions */
[data-skin="widegaming"] .react-main,
[data-skin="widegaming"] .react-wrap .reactions,
[data-skin="widegaming"] .react-summary,
[data-skin="widegaming"] .quote-btn,
[data-skin="widegaming"] .post-tools button,
[data-skin="widegaming"] .rs-count {
    border-radius: 2px;
}
[data-skin="widegaming"] .react-main {
    background: var(--surface-2);
    border: 1px solid var(--border);
    font-family: var(--mono);
    letter-spacing: .04em;
}
[data-skin="widegaming"] .react-main:hover { border-color: var(--primary); color: var(--primary); }
[data-skin="widegaming"] .react-summary .reacted,
[data-skin="widegaming"] .rs-count.reacted { border-color: var(--primary); color: var(--primary); }
[data-skin="widegaming"] .react-picker { background: var(--elev); border: 1px solid var(--border); border-radius: 3px; }

/* Best-answer box */
[data-skin="widegaming"] .best-answer-box {
    border: 1px solid rgba(197,251,69,.4);
    border-left: 3px solid var(--green);
    background: rgba(197,251,69,.06);
    border-radius: 0 3px 3px 0;
}

/* Poll */
[data-skin="widegaming"] .poll-card { background: var(--surface); border: 1px solid var(--border); border-radius: 3px; }
[data-skin="widegaming"] .poll-bar-wrap { background: var(--bg-2); border-radius: 2px; }
[data-skin="widegaming"] .poll-bar { background: var(--grad-primary); border-radius: 2px; }
[data-skin="widegaming"] .poll-q { text-transform: uppercase; letter-spacing: .02em; font-weight: 800; }

/* ── 11. PILLS / BADGES / TAGS / PREFIX ─────────────────────────────── */
[data-skin="widegaming"] .badge,
[data-skin="widegaming"] .status-pill,
[data-skin="widegaming"] .role-pill,
[data-skin="widegaming"] .tag,
[data-skin="widegaming"] .prefix,
[data-skin="widegaming"] .new-pill {
    border-radius: 2px;
    font-family: var(--mono);
    letter-spacing: .04em;
    text-transform: uppercase;
    font-weight: 700;
}
[data-skin="widegaming"] .new-pill {
    background: var(--primary);
    color: #03121b;
    box-shadow: 0 0 10px rgba(34,196,250,.4);
}
[data-skin="widegaming"] .badge-pin { background: rgba(255,202,58,.16); color: var(--amber); }
[data-skin="widegaming"] .role-pill { background: rgba(34,196,250,.14); color: var(--primary-2); }

/* ── 12. FORMS ──────────────────────────────────────────────────────── */
[data-skin="widegaming"] .input,
[data-skin="widegaming"] input[type="text"],
[data-skin="widegaming"] input[type="email"],
[data-skin="widegaming"] input[type="password"],
[data-skin="widegaming"] input[type="search"],
[data-skin="widegaming"] input[type="number"],
[data-skin="widegaming"] input[type="url"],
[data-skin="widegaming"] textarea,
[data-skin="widegaming"] select {
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: 2px;
    color: var(--text);
}
[data-skin="widegaming"] .input:focus,
[data-skin="widegaming"] input:focus,
[data-skin="widegaming"] textarea:focus,
[data-skin="widegaming"] select:focus {
    border-color: var(--primary);
    box-shadow: var(--ring);
    outline: none;
}
[data-skin="widegaming"] .form-label,
[data-skin="widegaming"] .ff-label,
[data-skin="widegaming"] .tf-label,
[data-skin="widegaming"] .bm-label {
    font-family: var(--mono);
    text-transform: uppercase;
    letter-spacing: .1em;
    font-size: 11px;
    color: var(--text-dim);
}
[data-skin="widegaming"] .form-hint,
[data-skin="widegaming"] .input-help { color: var(--text-mute); font-size: 12px; }
[data-skin="widegaming"] .editor-toolbar,
[data-skin="widegaming"] .esa-editor .editor-toolbar {
    background: var(--surface-2);
    border-color: var(--border);
}
[data-skin="widegaming"] .editor-toolbar button {
    border-radius: 2px;
    color: var(--text-dim);
    background: transparent;
}
[data-skin="widegaming"] .editor-toolbar button:hover { background: var(--surface-3); color: var(--primary); }

/* ── 13. TABLES (members / leaderboard / moderation) ────────────────── */
[data-skin="widegaming"] .table-wrap {
    border: 1px solid var(--border);
    border-radius: 3px;
    overflow-x: auto;
}
[data-skin="widegaming"] .data,
[data-skin="widegaming"] .leaderboard-table {
    background: var(--surface);
}
[data-skin="widegaming"] .data th,
[data-skin="widegaming"] .leaderboard-table th {
    background: var(--surface-2);
    border-bottom: 1px solid var(--border);
    font-family: var(--mono);
    text-transform: uppercase;
    letter-spacing: .1em;
    font-size: 11px;
    color: var(--text-dim);
}
[data-skin="widegaming"] .data td,
[data-skin="widegaming"] .leaderboard-table td { border-bottom: 1px solid var(--border-soft); }
[data-skin="widegaming"] .data tr:hover td,
[data-skin="widegaming"] .leaderboard-table tr:hover td { background: rgba(34,196,250,.05); }
[data-skin="widegaming"] .member-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 3px;
}
[data-skin="widegaming"] .member-card:hover { border-color: var(--primary); box-shadow: 0 0 0 1px rgba(34,196,250,.3); }
[data-skin="widegaming"] .leaderboard-hero {
    background:
        radial-gradient(800px 320px at 80% -40%, rgba(34,196,250,.16), transparent 60%),
        linear-gradient(180deg, var(--surface-2), var(--surface));
    border: 1px solid var(--border);
    border-radius: 4px;
}
[data-skin="widegaming"] .leaderboard-tabs .lb-tab,
[data-skin="widegaming"] .lb-tab {
    font-family: var(--mono);
    text-transform: uppercase;
    letter-spacing: .08em;
    border-radius: 2px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text-dim);
}
[data-skin="widegaming"] .lb-tab:hover { border-color: var(--primary); color: #fff; }
[data-skin="widegaming"] .lb-tab.active {
    background: var(--primary);
    color: #03121b;
    border-color: transparent;
}

/* Podium */
[data-skin="widegaming"] .podium-block { background: var(--surface); border: 1px solid var(--border); border-radius: 3px 3px 0 0; }
[data-skin="widegaming"] .podium-place.gold .podium-block { border-color: var(--primary); box-shadow: 0 0 24px rgba(34,196,250,.25); }
[data-skin="widegaming"] .podium-avatar-wrap img { border-radius: 2px; }
[data-skin="widegaming"] .podium-name { font-weight: 800; letter-spacing: -.01em; }

/* ── 14. PARTNERS ───────────────────────────────────────────────────── */
[data-skin="widegaming"] .partners-section {
    background: transparent;
    border: 0;
    border-radius: 0;
}
[data-skin="widegaming"] .partners-section__label,
[data-skin="widegaming"] .partners-section__heading {
    font-family: var(--mono);
    text-transform: uppercase;
    letter-spacing: .18em;
    font-size: 10px;
    color: var(--text-mute);
}
[data-skin="widegaming"] .partner-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 2px;
}
[data-skin="widegaming"] .partner-card:hover { border-color: var(--primary); background: var(--surface-2); }
[data-skin="widegaming"] .partner-card__type { font-family: var(--mono); text-transform: uppercase; letter-spacing: .12em; font-size: 9px; color: var(--text-mute); }
[data-skin="widegaming"] .partner-card__name { font-weight: 700; }

/* ── 15. FOOTER ─────────────────────────────────────────────────────── */
[data-skin="widegaming"] .site-footer {
    background: var(--bg-1);
    border-top: 1px solid var(--border);
    box-shadow: inset 0 1px 0 rgba(34,196,250,.14);
}
[data-skin="widegaming"] .footer-grid h4 {
    font-family: var(--mono);
    text-transform: uppercase;
    letter-spacing: .24em;
    font-size: 9px;
    color: var(--text-mute);
}
[data-skin="widegaming"] .footer-grid a { color: var(--text-dim); }
[data-skin="widegaming"] .footer-grid a:hover { color: var(--primary); }
[data-skin="widegaming"] .footer-bottom {
    border-top: 1px solid var(--border);
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: .04em;
    color: var(--text-mute);
}
[data-skin="widegaming"] .lang-switch a.on { background: var(--primary); color: #03121b; border-radius: 2px; }
[data-skin="widegaming"] .footer-brand { color: var(--text-dim); }

/* ── 16. AUTH / LOGIN PAGES ─────────────────────────────────────────── */
[data-skin="widegaming"] .auth-wrap {
    background:
        repeating-linear-gradient(-58deg, transparent 0 90px, rgba(34,196,250,.025) 90px 91px),
        radial-gradient(900px 500px at 80% -120px, rgba(34,196,250,.14), transparent 62%),
        var(--bg-0);
}
[data-skin="widegaming"] .auth-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 4px;
    box-shadow: var(--shadow-glow);
}
[data-skin="widegaming"] .auth-card h1,
[data-skin="widegaming"] .auth-card h2 { text-transform: uppercase; font-weight: 900; font-style: italic; letter-spacing: -.02em; }
[data-skin="widegaming"] .auth-foot { border-top: 1px solid var(--border); font-family: var(--mono); font-size: 11px; }

/* ── 17. MISC POLISH ────────────────────────────────────────────────── */
[data-skin="widegaming"] .avatar { border-radius: 2px; }
[data-skin="widegaming"] .mod-bar {
    background: linear-gradient(90deg, rgba(255,202,58,.12), transparent);
    border: 1px solid rgba(255,202,58,.3);
    border-radius: 3px;
}
[data-skin="widegaming"] .mod-bar-label { font-family: var(--mono); text-transform: uppercase; letter-spacing: .1em; }
[data-skin="widegaming"] .viewers-bar,
[data-skin="widegaming"] .vb-label { font-family: var(--mono); font-size: 11px; letter-spacing: .04em; }
[data-skin="widegaming"] .cookie-bar { background: var(--elev); border: 1px solid var(--border); border-radius: 3px; }

/* Keep wide/scrolling content contained */
[data-skin="widegaming"] .table-wrap,
[data-skin="widegaming"] .post-content pre,
[data-skin="widegaming"] .post-content .code-block { max-width: 100%; overflow-x: auto; }

/* ── Wide masthead hero (theme-example style): remove the video/image background,
   stretch the content full-width like the example designs. Text effects above are
   preserved; the top header/nav is untouched. ── */
[data-skin="widegaming"] .fi-hero--media { min-height: 0; display: block; align-items: stretch; }
[data-skin="widegaming"] .fi-hero-inner {
    max-width: var(--maxw, 1760px);
    margin-inline: auto;
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-end;
    text-align: left;
    gap: clamp(28px, 4vw, 72px);
    padding: clamp(40px, 5vw, 68px) clamp(20px, 3vw, 52px);
}
[data-skin="widegaming"] .fi-hero-inner > div:first-child {
    align-items: flex-start;
    text-align: left;
    max-width: 64ch;
    margin: 0;
}
[data-skin="widegaming"] .fi-eyebrow { margin-left: 0; margin-right: auto; }
[data-skin="widegaming"] .fi-hero p { margin-left: 0; margin-right: 0; }
@media (max-width: 860px) {
    [data-skin="widegaming"] .fi-hero-inner { flex-direction: column; align-items: flex-start; }
}

/* Themed hero background (replaces the hidden default video). Optional /assets/img/hero-widegaming.jpg */
[data-skin="widegaming"] .fi-hero {
    background:
        linear-gradient(180deg, rgba(3,18,27,.55), rgba(3,18,27,.90)),
        url('/assets/img/hero-widegaming.jpg') center/cover no-repeat,
        radial-gradient(90% 120% at 80% 0%, rgba(0,229,255,.16), transparent 55%),
        linear-gradient(180deg, #04141d, #03121b) !important;
}