/* ==========================================================================
   YSN — THEME "PRECISION" (Style A)
   ==========================================================================
   Loaded LAST, after style.css and ysn-ui.css. It does two jobs:

     1. Re-points every existing design token to the Precision palette. Because
        the whole site already reads var(--primary), var(--dark-2), var(--text)
        and so on, retoning the tokens retones ~80% of the interface without
        touching a single class name, id or JS hook.

     2. Restyles the components that need more than a colour change: the nav,
        header, cards, buttons, tables, forms, modals, empty states, toasts,
        clan-war scorelines and the roster.

   HARD RULES OBSERVED HERE
     - No class name, id, data-attribute or DOM structure is changed. Every
       JS selector in the 21 page scripts keeps working.
     - The role badges (.role-badge / .rb-shine) are deliberately left alone.
       The owner asked to keep them exactly as they are, including the
       running shine line. See "ROLE BADGES — PRESERVED" at the bottom.
     - Glow is not an elevation mechanic. --shadow-glow becomes a real shadow.
     - Purple has four jobs: primary action, active state, focus ring,
       accent tint. Green and red mean win and loss and nothing else.
   ========================================================================== */

/* ==================== 1. TOKENS ==================== */

:root {
    /* --- one purple, no cyan, no magenta --- */
    --primary:        #7C5CFF;
    --primary-dark:   #6A47F0;
    --primary-light:  #957AFF;
    --primary-glow:   rgba(124, 92, 255, 0.28);
    --primary-tint:   rgba(124, 92, 255, 0.10);
    --primary-line:   rgba(124, 92, 255, 0.32);

    /* --secondary and --accent used to be cyan and magenta. Folding them
       into the purple ramp is what removes the "gradient soup" look. */
    --secondary:      #957AFF;
    --accent:         #957AFF;
    --info:           #7FA6FF;

    /* --- result colours: match outcomes only --- */
    --success:        #3DDC84;
    --warning:        #FFC24B;
    --danger:         #FF5A54;

    /* --- surfaces: neutral, five even steps --- */
    --dark:           #08080A;
    --dark-2:         #0E0E12;
    --dark-3:         #14141A;
    --dark-4:         #1B1B23;
    --dark-5:         #24242F;

    /* --- ink: every step clears 4.5:1 on --dark-3 --- */
    --text:           #EEEEF4;
    --text-primary:   #EEEEF4;   /* several rules reference this name */
    --text-secondary: #A9A9B8;
    --text-muted:     #8A8A99;
    --text-dark:      #08080A;

    /* --- lines: neutral hairlines, not purple haze --- */
    --border:         rgba(255, 255, 255, 0.07);
    --border-light:   rgba(255, 255, 255, 0.05);
    --divider:        rgba(255, 255, 255, 0.12);

    /* --- gradients flattened: kept as variables so nothing breaks --- */
    --gradient-primary:     linear-gradient(180deg, #7C5CFF 0%, #6F4EF5 100%);
    --gradient-secondary:   linear-gradient(180deg, #3DDC84 0%, #2FC272 100%);
    --gradient-accent:      linear-gradient(180deg, #957AFF 0%, #7C5CFF 100%);
    --gradient-dark:        linear-gradient(180deg, #0E0E12 0%, #08080A 100%);
    --gradient-purple-blue: linear-gradient(120deg, #C9BBFF 0%, #7C5CFF 100%);

    /* --- elevation: two real shadows. Glow is retired. --- */
    --shadow-sm:          0 1px 2px rgba(0, 0, 0, 0.45);
    --shadow-md:          0 1px 2px rgba(0, 0, 0, 0.45), 0 8px 24px -12px rgba(0, 0, 0, 0.7);
    --shadow-lg:          0 2px 4px rgba(0, 0, 0, 0.5),  0 20px 48px -18px rgba(0, 0, 0, 0.8);
    --shadow-xl:          0 2px 4px rgba(0, 0, 0, 0.5),  0 32px 72px -24px rgba(0, 0, 0, 0.9);
    --shadow-glow:        0 1px 2px rgba(0, 0, 0, 0.45), 0 8px 24px -12px rgba(0, 0, 0, 0.7);
    --shadow-glow-strong: 0 2px 4px rgba(0, 0, 0, 0.5),  0 20px 48px -18px rgba(0, 0, 0, 0.8);

    /* --- tight, instrument-like corners --- */
    --radius-sm:   3px;
    --radius-md:   4px;
    --radius-lg:   6px;
    --radius-xl:   8px;
    --radius-full: 999px;

    /* --- motion --- */
    --transition-fast:   0.12s cubic-bezier(.2,.8,.2,1);
    --transition-normal: 0.20s cubic-bezier(.2,.8,.2,1);
    --transition-slow:   0.32s cubic-bezier(.2,.8,.2,1);

    /* --- type: three roles, all self-hosted --- */
    --font-primary: Inter, system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-heading: Archivo, Inter, system-ui, sans-serif;
    --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

    /* ysn-ui.css scales the whole UI from this. Slightly tighter. */
    --ysn-root-size: clamp(14.5px, 0.11vw + 12.8px, 15.5px);
}

/* ==================== 2. BASE ==================== */

body {
    background: var(--dark);
    color: var(--text);
    font-family: var(--font-primary);
    line-height: 1.55;
}

/* The old ambient purple wash made every surface read as purple. */
body::before { opacity: 0.35 !important; }

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    letter-spacing: -0.02em;
    line-height: 1.1;
}
h1 { font-weight: 800; }
h2, h3 { font-weight: 700; }

/* Numeric data is monospaced and tabular across the whole site — this is a
   SA:MP clan site and scores, ping, IPs and formats are its vocabulary. */
.stat-value, .cw-score, .cw-stat-value, .stat-box-value, .forum-stat-value,
.gallery-stat-value, .profile-stat-value, .hero-stat-value, .quick-stat-value,
.countdown-number, .admin-stat-value, .section-count, .category-count,
#currentTime, #onlineCount, .server-ping, .server-ip, .shout-time,
.news-date, .thread-meta, .cw-info, .member-meta, .admin-table td .mono {
    font-variant-numeric: tabular-nums;
}
.stat-value, .cw-stat-value, .stat-box-value, .forum-stat-value,
.gallery-stat-value, .profile-stat-value, .hero-stat-value,
.quick-stat-value, .countdown-number, .admin-stat-value {
    font-family: var(--font-heading);
    font-weight: 800;
    letter-spacing: -0.03em;
}

/* Micro-labels: uppercase mono, wide tracking. The structural device of the
   whole theme — it is what makes the interface read as an instrument. */
.stat-label, .cw-stat-label, .stat-box-label, .forum-stat-label,
.gallery-stat-label, .profile-stat-label, .hero-stat-label,
.countdown-label, .cw-detail-label, .admin-stat-label {
    font-family: var(--font-mono);
    font-size: 0.68rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-muted);
}

/* --- visible keyboard focus on everything. Previously: nothing. --- */
:where(a, button, input, select, textarea, summary, [tabindex], .member-card,
       .cw-item, .forum-thread, .forum-category, .gallery-card, .gallery-item,
       .tab-btn, .admin-nav-item, .nav-link, .server-ip):focus-visible {
    outline: 2px solid var(--primary-light);
    outline-offset: 2px;
    border-radius: var(--radius-md);
}

/* --- reduced motion: silences all six previously-infinite animations --- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ==================== 3. TOP BAR ==================== */

.top-bar {
    background: var(--dark-2);
    border-bottom: 1px solid var(--border);
    padding: 0;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.05em;
}
.top-bar .container { min-height: 34px; }
.top-bar-item, .top-bar-link { color: var(--text-muted); }
.top-bar-item strong { color: var(--text-secondary); font-weight: 500; }
.top-bar-link:hover { color: var(--primary-light); }
.top-bar-separator { color: var(--divider); }

/* ==================== 4. HEADER ==================== */

.site-header {
    background: var(--dark);
    border-bottom: 1px solid var(--border);
    padding: 1.15rem 0;
}
.header-bg { display: none; }

.header-logo {
    width: 44px;
    height: 44px;
    border: 1px solid var(--primary-line);
    border-radius: var(--radius-md);
    box-shadow: none;
    object-fit: cover;
}
.header-logo:hover { transform: none; border-color: var(--primary); }

.header-title { font-weight: 800; letter-spacing: -0.015em; }
.clan-tag { color: var(--primary-light); }
.header-tagline {
    font-family: var(--font-mono);
    font-size: 0.68rem;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--text-muted);
}

/* Per the agreed change: the stat strip lives on the homepage only.
   index.html carries <body class="is-home">; every other page hides it. */
.header-stats { display: none; }
body.is-home .header-stats { display: flex; }

.header-stats .stat-card {
    background: transparent;
    border: 0;
    border-left: 1px solid var(--border);
    border-radius: 0;
    padding: 0.15rem 0 0.15rem 1.25rem;
    min-width: 0;
    text-align: left;
}
.header-stats .stat-card:first-child { border-left: 0; padding-left: 0; }
.header-stats .stat-card::before { display: none; }
.header-stats .stat-card:hover {
    transform: none;
    border-color: var(--border);
    box-shadow: none;
}
.header-stats .stat-value { font-size: 1.6rem; color: var(--text); }
.header-stats .stat-label { margin-top: 0.2rem; }

/* ==================== 5. NAVIGATION ==================== */

.main-nav {
    background: var(--dark);
    border-bottom: 1px solid var(--border);
    backdrop-filter: none;
}
.nav-link {
    padding: 0.95rem 1rem;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-secondary);
    border-bottom: 2px solid transparent;
}
.nav-link::before { display: none; }
.nav-link:hover { color: var(--text); background: transparent; }
.nav-link.active { color: var(--text); border-bottom-color: var(--primary); }
.nav-link svg { opacity: 0.55; width: 15px; height: 15px; }
.nav-link.active svg { opacity: 1; color: var(--primary-light); }

.nav-btn {
    background: transparent;
    border: 1px solid var(--divider);
    border-radius: var(--radius-md);
    padding: 0.45rem 0.85rem;
    font-size: 0.8rem;
    font-weight: 500;
}
.nav-btn:hover { transform: none; background: var(--dark-3); border-color: var(--divider); color: var(--text); }
.nav-btn-primary { background: var(--primary); border-color: var(--primary); color: #fff; font-weight: 600; }
.nav-btn-primary:hover { background: var(--primary-dark); border-color: var(--primary-dark); box-shadow: none; color: #fff; }

.user-trigger { background: transparent; border: 1px solid var(--divider); border-radius: var(--radius-md); }
.user-trigger:hover { background: var(--dark-3); }
.user-avatar { border-radius: var(--radius-sm); border: 1px solid var(--primary-line); }
.dropdown-menu { background: var(--dark-3); border: 1px solid var(--divider); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); }
.dropdown-item:hover { background: var(--dark-4); color: var(--primary-light); padding-left: var(--space-md); }

/* ==================== 6. BUTTONS ==================== */

.btn {
    border-radius: var(--radius-md);
    border: 1px solid var(--divider);
    background: transparent;
    font-family: var(--font-primary);
    font-weight: 500;
    letter-spacing: 0.01em;
}
/* the 300px expanding white circle on hover is retired */
.btn::before { display: none !important; }
.btn:hover {
    transform: none;
    background: var(--dark-4);
    border-color: var(--divider);
    color: var(--text);
    box-shadow: none;
}
.btn:active { transform: translateY(1px); }

.btn-primary { background: var(--primary); border-color: var(--primary); color: #fff; font-weight: 600; }
.btn-primary:hover { background: var(--primary-dark); border-color: var(--primary-dark); color: #fff; box-shadow: none; transform: none; }

.btn-secondary { background: transparent; border-color: var(--primary-line); color: var(--primary-light); }
.btn-secondary:hover { background: var(--primary-tint); border-color: var(--primary); color: var(--primary-light); box-shadow: none; transform: none; }

.btn-success { background: transparent; border-color: rgba(61,220,132,.4); color: var(--success); }
.btn-success:hover { background: rgba(61,220,132,.1); color: var(--success); }

.btn-warning { background: transparent; border-color: rgba(255,194,75,.4); color: var(--warning); }
.btn-warning:hover { background: rgba(255,194,75,.1); color: var(--warning); }

.btn-danger { background: transparent; border-color: rgba(255,90,84,.4); color: var(--danger); }
.btn-danger:hover { background: rgba(255,90,84,.1); color: var(--danger); }

.btn-discord { background: #5865F2; border-color: #5865F2; color: #fff; }
.btn-discord:hover { background: #4752C4; border-color: #4752C4; color: #fff; box-shadow: none; transform: none; }

.btn-large { padding: 0.65rem 1.15rem; font-size: 0.9rem; font-weight: 600; }
.btn-sm { padding: 0.3rem 0.65rem; font-size: 0.78rem; }

/* ==================== 7. CARDS, WIDGETS, SECTIONS ==================== */

.card, .widget {
    background: var(--dark-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    transition: border-color var(--transition-fast);
}
.card:hover, .widget:hover { border-color: var(--divider); box-shadow: none; }

.card-header, .widget-header {
    background: transparent;
    border-bottom: 1px solid var(--border);
}
.card-header h3 { font-size: 0.95rem; font-weight: 700; letter-spacing: 0.01em; }
.widget-header {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--text-secondary);
}
.card-header-subtitle { font-size: 0.8rem; color: var(--text-muted); }
.card-link { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--primary-light); }
.card-link:hover { transform: none; color: var(--primary-light); text-decoration: underline; text-underline-offset: 3px; }

.page-hero {
    background: var(--dark-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    text-align: left;
}
.page-hero::before { display: none; }
.page-hero h1, .page-hero h2, .hero-title { font-weight: 800; letter-spacing: -0.035em; }
.hero-description, .page-hero p { margin-inline: 0; color: var(--text-secondary); }
.hero-actions { justify-content: flex-start; }
.gradient-text {
    background: none;
    -webkit-text-fill-color: currentColor;
    color: var(--primary-light);
}

.page-header-section { border-bottom: 1px solid var(--border); padding-bottom: var(--space-lg); }
.page-title { font-weight: 800; letter-spacing: -0.03em; }
.page-subtitle { color: var(--text-muted); font-size: 0.92rem; }

.section-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-md);
    padding-bottom: 0.7rem;
    margin-bottom: var(--space-md);
    border-bottom: 1px solid var(--border);
}
.section-count {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-muted);
}

/* stat tiles used across members / forum / gallery / profile / clanwars */
.stat-box, .forum-stat-box, .gallery-stat-box, .profile-stat-card, .cw-stat-card {
    background: var(--dark-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
}
.stat-box:hover, .forum-stat-box:hover, .gallery-stat-box:hover,
.profile-stat-card:hover, .cw-stat-card:hover {
    transform: none;
    border-color: var(--divider);
    box-shadow: none;
}
.cw-stat-card::before { display: none; }
.stat-box-icon, .forum-stat-icon, .gallery-stat-icon, .profile-stat-icon, .cw-stat-icon {
    background: var(--primary-tint);
    border-radius: var(--radius-md);
    color: var(--primary-light);
}
.cw-stat-value, .stat-box-value, .forum-stat-value, .gallery-stat-value, .profile-stat-value { color: var(--text); }
.cw-stat-wins .cw-stat-value { color: var(--success); }
.cw-stat-losses .cw-stat-value { color: var(--danger); }

.quick-stat {
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--border);
    border-radius: 0;
    padding: 0.55rem 0;
}
.quick-stat:last-child { border-bottom: 0; }
.quick-stat:hover { transform: none; background: transparent; border-color: var(--border); }
.quick-stat > span:first-child { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); }
.quick-stat > span:last-child { font-family: var(--font-heading); font-weight: 700; color: var(--text); }

/* ==================== 8. CLAN WARS — the scoreline signature ==================== */

.cw-item {
    background: var(--dark-2);
    border: 1px solid var(--border);
    border-left: 2px solid var(--divider);
    border-radius: var(--radius-lg);
}
.cw-item:hover { transform: none; background: var(--dark-3); border-color: var(--divider); box-shadow: none; }
.cw-item.win  { border-left-color: var(--success); }
.cw-item.loss { border-left-color: var(--danger); }
.cw-item.draw { border-left-color: var(--warning); }
.cw-item.expanded { background: var(--dark-3); border-color: var(--divider); }

.cw-vs { font-family: var(--font-heading); font-weight: 700; font-size: 1.05rem; letter-spacing: -0.01em; }
.cw-score {
    font-family: var(--font-heading);
    font-weight: 900;
    font-size: 1.9rem;
    letter-spacing: -0.045em;
    font-variant-numeric: tabular-nums;
    color: var(--text);
}
.cw-item.win  .cw-score { color: var(--success); }
.cw-item.loss .cw-score { color: var(--danger); }
.cw-item.draw .cw-score { color: var(--warning); }

.cw-info {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
    gap: 0;
}
.cw-info span { padding-right: 0.85rem; margin-right: 0.85rem; border-right: 1px solid var(--border); }
.cw-info span:last-child { border-right: 0; margin-right: 0; padding-right: 0; }

.cw-result-badge {
    font-family: var(--font-mono);
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    border-radius: var(--radius-sm);
    border: 0;
}
.cw-result-badge.win  { background: rgba(61,220,132,.12); color: var(--success); }
.cw-result-badge.loss { background: rgba(255,90,84,.12);  color: var(--danger); }
.cw-result-badge.draw { background: rgba(255,194,75,.12); color: var(--warning); }

.cw-player-tag {
    background: var(--dark-4);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--text-secondary);
}
.cw-details, .cw-details-content { background: var(--dark-3); border-color: var(--border); border-radius: var(--radius-md); }
.cw-detail-value { color: var(--text-secondary); }

.performance-timeline { background: var(--dark-2); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.performance-item {
    border-radius: var(--radius-sm);
    font-family: var(--font-mono);
    font-weight: 700;
}
.performance-item:hover { transform: none; }
.performance-item.win  { background: rgba(61,220,132,.15); color: var(--success); }
.performance-item.loss { background: rgba(255,90,84,.15);  color: var(--danger); }

.progress-bar { background: var(--dark-4); height: 4px; }
.progress-fill { background: var(--primary); }

/* ==================== 9. ROSTER ==================== */

.member-card {
    background: var(--dark-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
}
.member-card::before { display: none; }
.member-card:hover {
    transform: none;
    background: var(--dark-3);
    border-color: var(--primary-line);
    box-shadow: none;
}
.member-avatar {
    border-radius: var(--radius-md);
    border: 1px solid var(--divider);
    box-shadow: none;
}
.member-card:hover .member-avatar { transform: none; box-shadow: none; }
.member-name { font-family: var(--font-heading); font-weight: 700; letter-spacing: -0.01em; }
.member-meta {
    font-family: var(--font-mono);
    font-size: 0.68rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text-muted);
    border-top-color: var(--border);
}
.presence-dot { border-color: var(--dark-2); border-radius: var(--radius-full); }
.member-card:hover .presence-dot { border-color: var(--dark-3); }

.members-category-header { border-bottom: 1px solid var(--border); }
.members-category-header h2 { font-size: 1.2rem; font-weight: 700; }
.members-category-header svg { color: var(--text-muted); }
.category-count {
    background: transparent;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-family: var(--font-mono);
    font-size: 0.68rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.mode-pill {
    background: var(--primary-tint);
    border: 1px solid var(--primary-line);
    border-radius: var(--radius-sm);
    color: var(--primary-light);
    font-family: var(--font-mono);
}
.activity-meter-head { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; }
.activity-meter-bar { height: 3px; border-radius: 2px; }
.activity-meter-bar span { border-radius: 2px; box-shadow: none !important; }

/* ==================== 10. FORUM ==================== */

.forum-category, .forum-thread {
    background: var(--dark-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
}
.forum-category:hover, .forum-thread:hover {
    transform: none;
    background: var(--dark-3);
    border-color: var(--divider);
    box-shadow: none;
}
.forum-cat-info h4, .forum-thread-info h4 { font-family: var(--font-heading); font-weight: 700; font-size: 1rem; }
.forum-cat-desc, .forum-thread-meta { color: var(--text-muted); font-size: 0.82rem; }
.forum-cat-stats .forum-stat-value, .thread-stats strong { font-family: var(--font-heading); font-weight: 700; }
.forum-cat-stats .forum-stat-label { font-size: 0.62rem; }

.thread-badge { border-radius: var(--radius-sm); font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.12em; }
.forum-thread.pinned { background: linear-gradient(90deg, rgba(255,194,75,.05), transparent 35%); border-color: rgba(255,194,75,.25); }

.thread-header {
    background: var(--dark-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    box-shadow: none;
}
.thread-header::before { display: none; }
.thread-title { font-size: 1.5rem; font-weight: 800; letter-spacing: -0.03em; color: var(--text); }
.thread-meta { font-family: var(--font-mono); font-size: 0.75rem; color: var(--text-muted); }

.forum-post {
    background: var(--dark-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: none;
    grid-template-columns: 180px 1fr;
    margin-bottom: 1rem;
}
.forum-post:hover { transform: none; border-color: var(--divider); box-shadow: none; }
.post-sidebar { background: var(--dark-3); border-right: 1px solid var(--border); padding: 1.25rem; }
.post-avatar { width: 56px; height: 56px; border-radius: var(--radius-md); border: 1px solid var(--divider); box-shadow: none; }
.forum-post:hover .post-avatar { transform: none; box-shadow: none; }
.post-author-name {
    background: none;
    -webkit-text-fill-color: currentColor;
    color: var(--text);
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1rem;
}
.post-author-role {
    background: transparent;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-family: var(--font-mono);
    font-size: 0.62rem;
    letter-spacing: 0.12em;
    color: var(--text-muted);
}
.post-main { padding: 1.4rem; }
.post-meta { background: transparent; border-radius: 0; font-family: var(--font-mono); font-size: 0.72rem; padding: 0; }
.post-footer { border-top-color: var(--border); }
.forum-reply-section, .forum-thread-header { background: var(--dark-2); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.forum-empty { border: 1px dashed var(--divider); border-radius: var(--radius-lg); background: var(--dark-2); }
.forum-pager { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.06em; }
.rules-list svg { color: var(--primary-light); }
.rules-note { background: transparent; border: 1px solid rgba(255,194,75,.3); border-radius: var(--radius-md); color: var(--warning); }

/* ==================== 11. GALLERY ==================== */

.gallery-card, .gallery-item {
    background: var(--dark-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: none;
}
.gallery-card:hover, .gallery-item:hover {
    transform: none;
    border-color: var(--primary-line);
    box-shadow: none;
}
.gallery-card-image { background: var(--dark); }
.gallery-card:hover .gallery-card-image img, .gallery-item:hover img { transform: none; }
.gallery-card-content { background: transparent; border-top: 1px solid var(--border); }
.gallery-card:hover .gallery-card-content { background: transparent; }
.gallery-card-title { font-family: var(--font-heading); font-weight: 700; font-size: 0.98rem; color: var(--text); }
.gallery-card-meta { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.05em; text-transform: uppercase; }
.gallery-card-category { color: var(--primary-light); font-weight: 500; }

/* ==================== 12. BANNERS (recruitment / challenge / upload) ==================== */

.recruitment-banner, .challenge-banner, .upload-banner, .upload-banner-content {
    background: var(--dark-2);
    border: 1px solid var(--border);
    border-left: 2px solid var(--primary);
    border-radius: var(--radius-lg);
    box-shadow: none;
}
.recruitment-icon svg, .challenge-icon svg, .upload-icon svg { color: var(--primary-light); }
.recruitment-icon h2, .challenge-icon h2, .upload-icon h3 { font-weight: 800; letter-spacing: -0.025em; }
.recruitment-requirements li svg, .challenge-info-item svg { color: var(--success); }

/* ==================== 13. FORMS ==================== */

.form-control, .form-input, .form-textarea, .filter-input, .filter-select,
.form-group input, .form-group select, .form-group textarea, .shout-form input {
    background: var(--dark-3);
    border: 1px solid var(--divider);
    border-radius: var(--radius-md);
    font-family: var(--font-primary);
    font-size: 0.92rem;
}
.form-control:focus, .form-input:focus, .form-textarea:focus,
.filter-input:focus, .filter-select:focus,
.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-tint);
    background: var(--dark-3);
}
.form-group label, .filter-group label {
    font-family: var(--font-mono);
    font-size: 0.68rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.form-group label svg, .filter-group label svg { color: var(--text-muted); }
.form-help { font-family: var(--font-mono); font-size: 0.7rem; color: var(--text-muted); }
.form-message { background: var(--dark-3); border-radius: var(--radius-md); border-left-width: 2px; font-size: 0.88rem; }
.checkbox-text { font-size: 0.88rem; }

/* ==================== 14. TABLES ==================== */

.admin-table { border-collapse: collapse; width: 100%; }
.admin-table th {
    background: var(--dark-3);
    border-bottom: 1px solid var(--divider);
    font-family: var(--font-mono);
    font-size: 0.66rem;
    font-weight: 500;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--text-muted);
    padding: 0.7rem 0.85rem;
    text-align: left;
}
.admin-table td {
    border-bottom: 1px solid var(--border);
    padding: 0.7rem 0.85rem;
    font-size: 0.88rem;
}
.admin-table tbody tr:hover { background: var(--dark-3); }

/* ==================== 15. MODALS & DIALOGS ==================== */

.modal-backdrop { background: rgba(0, 0, 0, 0.75); backdrop-filter: blur(3px); }
.modal-content { background: var(--dark-2); border: 1px solid var(--divider); border-radius: var(--radius-lg); box-shadow: var(--shadow-xl); }
.modal-header { background: transparent; border-bottom: 1px solid var(--border); }
.modal-header h3 { font-size: 1rem; font-weight: 700; }
.modal-footer { background: transparent; border-top: 1px solid var(--border); }
.modal-close:hover { background: transparent; color: var(--danger); }

/* ==================== 16. TOASTS, LOADING, EMPTY STATES ==================== */

.toast {
    background: var(--dark-3);
    border: 1px solid var(--divider);
    border-left: 2px solid var(--primary);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    backdrop-filter: none;
    padding: 0.75rem 1rem;
}
.toast strong {
    display: block;
    font-family: var(--font-mono);
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 0.15rem;
}
.toast p { font-size: 0.88rem; color: var(--text); margin: 0; }
.toast.success { border-left-color: var(--success); }
.toast.success strong { color: var(--success); }
.toast.error { border-left-color: var(--danger); }
.toast.error strong { color: var(--danger); }
.toast.warning { border-left-color: var(--warning); }
.toast.warning strong { color: var(--warning); }
.toast.info { border-left-color: var(--info); }
.toast.info strong { color: var(--info); }

.loading-overlay { background: var(--dark); }
.loading-overlay p {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-top: 1rem;
}
.loading-spinner, .loading-spinner-sm {
    border-color: var(--divider);
    border-top-color: var(--primary);
    border-width: 2px;
}
.loading-spinner { width: 34px; height: 34px; }

.empty-state {
    background: var(--dark-2);
    border: 1px dashed var(--divider);
    border-radius: var(--radius-lg);
}
.empty-state svg { color: var(--text-muted); opacity: 0.4; }
.empty-state h3 { font-family: var(--font-heading); font-weight: 700; font-size: 1.05rem; }
.empty-state p { color: var(--text-muted); font-size: 0.88rem; }

/* ==================== 17. SIDEBAR: SERVER STATUS ==================== */

.server-card {
    background: var(--dark-3);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
}
.server-card.is-offline { background: rgba(255,90,84,.05); border-color: rgba(255,90,84,.22); }
.server-pill { border-radius: var(--radius-sm); font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.13em; }
.server-pill.online  { background: rgba(61,220,132,.12); color: var(--success); }
.server-pill.offline { background: rgba(255,90,84,.12);  color: var(--danger); }
.server-name { font-family: var(--font-primary); font-weight: 600; font-size: 0.88rem; }
.server-players-row, .server-meta-row {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.server-players-bar { height: 3px; border-radius: 2px; }
.server-players-bar span { background: var(--primary); border-radius: 2px; }
.server-ip { border: 1px dashed var(--divider); border-radius: var(--radius-sm); font-size: 0.72rem; }
.server-ip:hover { border-color: var(--primary); color: var(--primary-light); }

/* ==================== 18. PROFILE ==================== */

.profile-header-card { background: var(--dark-2); border: 1px solid var(--border); border-radius: var(--radius-lg); }
/* the decorative cover band is removed — requested change #6 */
.profile-cover { display: none; }
.profile-info-section { margin-top: 0; }
.profile-avatar { border-radius: var(--radius-lg); border: 1px solid var(--divider); box-shadow: none; width: 104px; height: 104px; }
.avatar-edit-btn { border-radius: var(--radius-md); width: 30px; height: 30px; bottom: 4px; right: 4px; }
.avatar-edit-btn:hover { transform: none; background: var(--primary-dark); }
.profile-username { font-weight: 800; letter-spacing: -0.03em; }
.profile-role-badge {
    background: var(--primary-tint);
    border: 1px solid var(--primary-line);
    border-radius: var(--radius-sm);
    color: var(--primary-light);
    font-family: var(--font-mono);
    font-size: 0.65rem;
    letter-spacing: 0.13em;
}
.profile-meta, .profile-meta-item { font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.04em; }
.profile-meta-item svg { color: var(--text-muted); }
.profile-info-item { background: var(--dark-3); border: 1px solid var(--border); border-radius: var(--radius-md); }
.profile-info-label { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; }

.tab-navigation { background: transparent; border-bottom: 1px solid var(--border); padding: 0; gap: 0; }
.tab-btn {
    border-radius: 0;
    border-bottom: 2px solid transparent;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 0.8rem 1.1rem;
}
.tab-btn:hover { background: transparent; color: var(--text); }
.tab-btn.active { background: transparent; color: var(--text); border-bottom-color: var(--primary); }

.settings-toggle { background: var(--dark-3); border: 1px solid var(--border); border-radius: var(--radius-md); }
.toggle-slider { background: var(--dark-5); }
.toggle-switch input:checked + .toggle-slider { background: var(--primary); }

/* ==================== 19. AUTH PAGES ==================== */

.auth-background::before { opacity: 0.45; }
.auth-card { background: var(--dark-2); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-xl); backdrop-filter: none; }
.auth-logo { border-radius: var(--radius-md); border: 1px solid var(--primary-line); box-shadow: none; animation: none; }
.auth-title { font-weight: 800; letter-spacing: -0.03em; }
.auth-tagline, .auth-subtitle { color: var(--text-muted); }
.auth-divider span { background: var(--dark-2); font-family: var(--font-mono); letter-spacing: 0.14em; }
.info-card, .demo-accounts { background: var(--dark-3); border: 1px solid var(--border); border-radius: var(--radius-md); }
.info-card svg { color: var(--primary-light); }
.strength-meter { height: 3px; background: var(--dark-4); }

/* ==================== 20. MAINTENANCE ==================== */

.maintenance-container { background: var(--dark-2); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-xl); }
.maintenance-icon { background: rgba(255,194,75,.1); border: 1px solid rgba(255,194,75,.28); border-radius: var(--radius-lg); }
.countdown-box { background: var(--dark-3); border: 1px solid var(--border); border-radius: var(--radius-md); }
.countdown-number { color: var(--text); }

/* ==================== 21. FOOTER ==================== */

.site-footer { background: var(--dark-2); border-top: 1px solid var(--border); }
.footer-brand h4, .footer-column h4, .footer-section h5 {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--text-secondary);
}
.footer-brand h4 { font-family: var(--font-heading); font-size: 1rem; font-weight: 700; letter-spacing: -0.01em; text-transform: none; color: var(--text); }
.footer-logo { border-radius: var(--radius-md); border: 1px solid var(--border); }
.footer-section a, .footer-column a { font-size: 0.88rem; color: var(--text-muted); }
.footer-section a:hover, .footer-column a:hover { color: var(--primary-light); padding-left: 0; }
.footer-bottom { border-top: 1px solid var(--border); font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.05em; color: var(--text-muted); }
.social-links .social-link { border-radius: var(--radius-md); background: var(--dark-3); border: 1px solid var(--border); }
.social-links .social-link:hover { transform: none; background: #5865F2; border-color: #5865F2; box-shadow: none; }

/* ==================== 22. ADMIN PANEL ==================== */

.admin-header { background: var(--dark-2); border-bottom: 1px solid var(--divider); backdrop-filter: none; }
.admin-sidebar { background: var(--dark-2); border-right: 1px solid var(--border); }
.admin-nav-item {
    border-radius: var(--radius-md);
    font-family: var(--font-primary);
    font-size: 0.86rem;
    font-weight: 500;
    color: var(--text-secondary);
}
.admin-nav-item:hover { background: var(--dark-3); color: var(--text); }
.admin-nav-item.active { background: var(--primary-tint); color: var(--primary-light); border-left: 2px solid var(--primary); }
.admin-card, .admin-section-header { background: var(--dark-2); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.admin-card:hover { transform: none; border-color: var(--divider); box-shadow: none; }
.admin-section-header h2 { font-weight: 800; letter-spacing: -0.03em; }
.quick-action-btn { background: var(--dark-3); border: 1px solid var(--border); border-radius: var(--radius-md); }
.quick-action-btn:hover { transform: none; background: var(--dark-4); border-color: var(--primary-line); }
.activity-item { border-bottom: 1px solid var(--border); }
.badge { border-radius: var(--radius-sm); font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.1em; }
.access-denied-card { background: var(--dark-2); border: 1px solid var(--border); border-radius: var(--radius-lg); }

/* ==================== 23. LIGHTBOX ==================== */

.lightbox-overlay, .gallery-lightbox { background: rgba(0, 0, 0, 0.94); }
.lightbox-content { border-radius: var(--radius-lg); }
.lightbox-info { font-family: var(--font-mono); font-size: 0.78rem; }

/* ==================== 24. AMBIENT GLOW REMOVAL ==================== */
/* Six decorative radial washes with infinite `pulse` animations sat behind
   the hero, the three banners, the auth pages and the admin panel. They are
   what made every surface read as purple haze. All retired; the surface
   ladder does the work now. */

.page-hero::before,
.recruitment-banner::before,
.challenge-banner::before,
.upload-banner::before,
.auth-background::before,
.admin-stat-card::before,
.admin-card::before {
    display: none !important;
    content: none !important;
    animation: none !important;
}

.recruitment-banner,
.challenge-banner,
.upload-banner {
    background: var(--dark-2);
    padding: clamp(1.5rem, 2.4vw, 2.25rem);
    margin-top: var(--space-xl);
}
.recruitment-icon,
.challenge-icon,
.upload-icon { margin-bottom: var(--space-lg); }
.recruitment-icon svg,
.challenge-icon svg,
.upload-icon svg { width: 26px; height: 26px; }
.recruitment-requirements li,
.challenge-info-item {
    background: var(--dark-3);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    font-size: 0.88rem;
}

/* ==================== 25. SPACING & LEFTOVERS ==================== */

/* Stat values inside the page hero were the only ones still coloured purple. */
.hero-stat-value { color: var(--text); }
.hero-stats-mini { justify-content: flex-start; gap: var(--space-xl); }

/* The homepage had a large dead gap between every section. */
.content-section { margin-bottom: 0; }
.main-content { gap: var(--space-lg); }
.main-layout > .container > * + * { margin-top: var(--space-lg); }

/* Legacy sidebar server fallback (rendered when the query fails). */
.server-item {
    background: var(--dark-3);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
}
.server-item:hover { transform: none; background: var(--dark-3); border-color: var(--border); }

/* Shoutbox (styled but currently unused — kept consistent). */
.shout-item { background: var(--dark-3); border: 1px solid var(--border); border-radius: var(--radius-md); }
.shout-item:hover { background: var(--dark-4); border-color: var(--divider); }
.shout-author { color: var(--primary-light); font-weight: 600; }
.shout-time { font-family: var(--font-mono); font-size: 0.68rem; }

/* Quick links in the sidebar. */
.quick-link { background: var(--dark-3); border: 1px solid var(--border); border-radius: var(--radius-md); }
.quick-link:hover { transform: none; background: var(--dark-4); border-color: var(--primary-line); color: var(--primary-light); }
.quick-link svg { color: var(--text-muted); }

/* Breadcrumb. */
.breadcrumb, .breadcrumb-item {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.breadcrumb-item:hover { color: var(--primary-light); }

/* ==========================================================================
   ROLE BADGES — PRESERVED
   ==========================================================================
   .role-badge and its .rb-shine running highlight are intentionally NOT
   restyled. They keep their gradient border-box, per-role glow, ◆ ★ ▲ ● ◇ ○
   glyphs and the 3.5s shine sweep exactly as built in ysn-ui.css.
   The only change is that the sweep now stops for users who have asked their
   operating system for reduced motion — handled by the global rule in §2.
   Do not add .role-badge rules to this file.
   ========================================================================== */

/* ==========================================================================
   26. STYLE A LAYOUT — unified bar, strip, hero, scoreline, sections
   ========================================================================== */

.ysn-live-dot {
    display: inline-block;
    width: 6px; height: 6px;
    margin-right: 6px;
    border-radius: 50%;
    background: var(--success);
    vertical-align: 1px;
}

/* --- one bar: brand | nav | auth --- */
.site-header { padding: 0; }
/* Three columns rather than flex: the empty first column mirrors the account
   menu in the third, so the nav is centred on the page itself and does not
   drift when the account menu changes width (Log in / Register vs a username). */
.ysn-bar {
    display: grid;
    /* minmax(0, 1fr) rather than 1fr: a bare 1fr floors at the content width,
       which lets the scrolling nav push the account menu off-screen. */
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: stretch;
    gap: var(--space-lg);
    min-height: 60px;
}
.ysn-bar::before { content: ''; }
.ysn-bar .main-nav {
    position: static;
    background: none;
    border: 0;
    display: flex;
    align-items: stretch;
    justify-content: center;
}
.ysn-bar .nav-links { display: flex; align-items: stretch; gap: 0; }
.ysn-bar .nav-link { padding: 0 0.95rem; }
.ysn-bar .nav-user { display: flex; align-items: center; justify-content: flex-end; gap: 0.5rem; padding: 0; }

/* --- full-bleed stat strip (homepage only) --- */
.ysn-strip { background: var(--dark-2); border-bottom: 1px solid var(--border); }
.ysn-strip-grid { display: grid; grid-template-columns: repeat(3, 1fr); }
.ysn-stat { padding: 1.05rem 0; border-left: 1px solid var(--border); padding-left: 1.6rem; }
.ysn-stat:first-child { border-left: 0; padding-left: 0; }
.ysn-stat-v {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 1.85rem;
    line-height: 1;
    letter-spacing: -0.035em;
    font-variant-numeric: tabular-nums;
    color: var(--text);
}
.ysn-stat-l {
    margin-top: 0.4rem;
    font-family: var(--font-mono);
    font-size: 0.64rem;
    font-weight: 500;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--text-muted);
}

/* --- eyebrow: the structural device of the whole theme --- */
.ysn-eyebrow {
    display: block;
    font-family: var(--font-mono);
    font-size: 0.62rem;
    font-weight: 500;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--primary-light);
}

/* --- hero --- */
.ysn-hero { border-bottom: 1px solid var(--border); padding: clamp(2.5rem, 5vw, 4.2rem) 0 clamp(2rem, 3.5vw, 3.2rem); }
.ysn-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    gap: clamp(2rem, 4vw, 4rem);
    align-items: end;
}
.ysn-hero-title {
    margin: 0.9rem 0 0;
    font-family: var(--font-heading);
    font-weight: 900;
    font-size: clamp(2.6rem, 5.4vw, 4.7rem);
    line-height: 0.94;
    letter-spacing: -0.045em;
    text-transform: uppercase;
}
.ysn-hero-title em { font-style: normal; color: var(--primary-light); }
.ysn-hero-lead { margin-top: 1.05rem; max-width: 46ch; color: var(--text-secondary); font-size: 0.96rem; }
.ysn-hero-cta { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1.5rem; }
.ysn-hero-rule { height: 1px; background: var(--border); margin-top: 1.6rem; }
.ysn-hero-meta { display: flex; flex-wrap: wrap; gap: 2.1rem; margin-top: 1.05rem; }
.ysn-hero-meta > div { display: flex; flex-direction: column; gap: 0.25rem; }
.ysn-meta-l {
    font-family: var(--font-mono);
    font-size: 0.62rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.ysn-meta-v { font-family: var(--font-mono); font-size: 0.78rem; color: var(--text); letter-spacing: 0.03em; }

/* --- scoreline: the signature element --- */
.ysn-scoreline {
    display: block;
    width: 100%;
    text-align: left;
    background: var(--dark-2);
    border: 1px solid var(--border);
    border-top: 2px solid var(--divider);
    border-radius: var(--radius-lg);
    padding: 1.3rem 1.4rem;
    font: inherit;
    color: inherit;
    transition: border-color var(--transition-fast), background var(--transition-fast);
}
.ysn-scoreline.win  { border-top-color: var(--success); }
.ysn-scoreline.loss { border-top-color: var(--danger); }
.ysn-scoreline.draw { border-top-color: var(--warning); }
button.ysn-scoreline { cursor: pointer; }
button.ysn-scoreline:hover { background: var(--dark-3); border-color: var(--divider); }
.ysn-scoreline-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); margin-bottom: 0.9rem; }
.ysn-scoreline-grid { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 0.9rem; }
.ysn-scoreline-grid .is-right { text-align: right; }
.ysn-side {
    display: block;
    font-family: var(--font-mono);
    font-size: 0.68rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 0.2rem;
}
.ysn-num {
    display: block;
    font-family: var(--font-heading);
    font-weight: 900;
    font-size: clamp(2.4rem, 4vw, 3.6rem);
    line-height: 0.9;
    letter-spacing: -0.05em;
    font-variant-numeric: tabular-nums;
    color: var(--text-muted);
}
.ysn-num.is-win  { color: var(--success); }
.ysn-num.is-loss { color: var(--danger); }
.ysn-scoreline.win  .ysn-num:not(.is-win):not(.is-loss),
.ysn-scoreline.loss .ysn-num:not(.is-win):not(.is-loss) { color: var(--text-muted); }
.ysn-sep { font-family: var(--font-heading); font-weight: 700; font-size: 1.4rem; color: var(--text-muted); }
.ysn-scoreline-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0;
    margin-top: 1rem;
    padding-top: 0.85rem;
    border-top: 1px solid var(--border);
    font-family: var(--font-mono);
    font-size: 0.68rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.ysn-scoreline-foot > span { padding-right: 0.8rem; margin-right: 0.8rem; border-right: 1px solid var(--border); }
.ysn-scoreline-foot > span:last-child { border-right: 0; margin-right: 0; padding-right: 0; }
.ysn-open { color: var(--primary-light); }
.ysn-scoreline.is-empty { text-align: center; padding: 2rem 1.4rem; }
.ysn-scoreline-empty { color: var(--text-muted); font-size: 0.88rem; margin: 0.4rem 0 1.1rem; line-height: 1.7; }

/* --- sections --- */
.ysn-section { padding: clamp(2rem, 3.4vw, 3rem) 0; border-bottom: 1px solid var(--border); }
.ysn-section:last-child { border-bottom: 0; }
.main-layout > .container > .ysn-section + .ysn-section { margin-top: 0; }
.ysn-section-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-md);
    margin-bottom: 1.15rem;
}
.ysn-section-title {
    margin: 0.4rem 0 0;
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: clamp(1.25rem, 1.8vw, 1.6rem);
    letter-spacing: -0.03em;
}
.ysn-section-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: clamp(1.2rem, 2vw, 1.75rem); align-items: start; }
.ysn-aside { display: flex; flex-direction: column; gap: var(--space-md); }
.ysn-list { display: flex; flex-direction: column; gap: 0.7rem; }

/* --- clickable rows --- */
.ysn-clickable {
    display: block;
    width: 100%;
    text-align: left;
    font: inherit;
    color: inherit;
    cursor: pointer;
}
button.news-item, button.cw-item { border-width: 1px; }
.news-item.ysn-clickable:hover, .cw-item.ysn-clickable:hover { background: var(--dark-3); }
.ysn-us { color: var(--primary-light); }
.ysn-vs { color: var(--text-muted); font-weight: 400; font-size: 0.85em; }

/* ==================== 27. DIALOG (js/ysn-ui.js) ==================== */

.ysn-dialog {
    /* style.css has a global `* { margin: 0 }` which kills the UA stylesheet's
       `margin: auto` on <dialog> and pins it to the top-left corner. */
    margin: auto;
    inset: 0;
    width: min(38rem, calc(100vw - 2rem));
    max-height: min(86vh, 50rem);
    padding: 0;
    border: 1px solid var(--divider);
    border-radius: var(--radius-lg);
    background: var(--dark-2);
    color: var(--text);
    box-shadow: var(--shadow-xl);
    overflow: hidden;
}
.ysn-dialog.is-wide { width: min(52rem, calc(100vw - 2rem)); }
.ysn-dialog::backdrop { background: rgba(0, 0, 0, 0.72); backdrop-filter: blur(3px); }
.ysn-dialog-head {
    display: flex; align-items: center; justify-content: space-between; gap: var(--space-md);
    padding: 1rem 1.15rem;
    border-bottom: 1px solid var(--border);
}
.ysn-dialog-head h3 { margin: 0; font-family: var(--font-heading); font-weight: 700; font-size: 1rem; }
.ysn-dialog-head.tone-danger h3 { color: var(--danger); }
.ysn-dialog-x {
    background: none; border: 0; color: var(--text-muted);
    font-size: 1.25rem; line-height: 1; cursor: pointer; padding: 0.15rem 0.35rem;
    border-radius: var(--radius-sm);
}
.ysn-dialog-x:hover { color: var(--danger); }
.ysn-dialog-body { padding: 1.15rem; display: grid; gap: 0.9rem; font-size: 0.92rem; color: var(--text-secondary); }
.ysn-dialog-scroll { max-height: 62vh; overflow-y: auto; }
.ysn-dialog-warn {
    margin: 0;
    padding: 0.6rem 0.75rem;
    border-left: 2px solid var(--danger);
    background: rgba(255, 90, 84, 0.07);
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: #FF9B96;
}
.ysn-dialog-foot {
    display: flex; justify-content: flex-end; gap: 0.5rem;
    padding: 0.85rem 1.15rem;
    border-top: 1px solid var(--border);
    background: var(--dark);
}
.ysn-dialog .field { display: grid; gap: 0.4rem; }
.ysn-dialog .field > label {
    font-family: var(--font-mono); font-size: 0.64rem; font-weight: 500;
    letter-spacing: 0.13em; text-transform: uppercase; color: var(--text-muted);
}
.ysn-dialog .field > input {
    padding: 0.6rem 0.7rem;
    background: var(--dark-3);
    border: 1px solid var(--divider);
    border-radius: var(--radius-md);
    color: var(--text);
    font: 400 0.92rem var(--font-primary);
}
.ysn-dialog .field > input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-tint); }

/* detail panels */
.ysn-detail-meta {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
    gap: 0.9rem 1.4rem;
    margin-top: 0.4rem;
    padding: 0.95rem 1rem;
    background: var(--dark);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
}
.ysn-detail-meta > div > .ysn-meta-v { font-size: 0.8rem; }
.ysn-detail-meta > div { display: flex; flex-direction: column; gap: 0.2rem; }
.ysn-detail-h {
    margin: 0.3rem 0 -0.3rem;
    font-family: var(--font-mono); font-size: 0.64rem; font-weight: 500;
    letter-spacing: 0.15em; text-transform: uppercase; color: var(--text-muted);
}
.ysn-detail-body { color: var(--text-secondary); line-height: 1.72; }
.ysn-detail-body p { margin: 0 0 0.7rem; }
.ysn-detail-body p:last-child { margin-bottom: 0; }
.ysn-detail-body blockquote {
    margin: 0 0 0.7rem; padding: 0.35rem 0 0.35rem 0.85rem;
    border-left: 2px solid var(--primary-line); color: var(--text-muted);
}
.ysn-detail-body ul, .ysn-detail-body ol { margin: 0 0 0.7rem 1.1rem; }
.ysn-detail-body code {
    font-family: var(--font-mono); font-size: 0.85em;
    background: var(--dark-4); padding: 0.1em 0.35em; border-radius: var(--radius-sm);
}
.ysn-detail-body hr { border: 0; border-top: 1px solid var(--border); margin: 0.9rem 0; }
.ysn-detail-shots { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: 0.6rem; }
.ysn-detail-shots img { width: 100%; border-radius: var(--radius-md); border: 1px solid var(--border); }
.ysn-dialog .ysn-scoreline { margin-bottom: 0.2rem; }

/* who played — two rosters side by side inside the match report */
.ysn-lineups {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.7rem;
    margin-top: 0.4rem;
}
.ysn-lineup {
    padding: 0.8rem 0.9rem;
    background: var(--dark);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
}
.ysn-lineup-team {
    display: block;
    margin-bottom: 0.55rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--divider);
    font-family: var(--font-mono); font-size: 0.64rem; font-weight: 500;
    letter-spacing: 0.14em; text-transform: uppercase; color: var(--primary-light);
    overflow-wrap: anywhere;
}
.ysn-lineup-list {
    margin: 0;
    padding-left: 1.35rem;
    display: flex; flex-direction: column; gap: 0.3rem;
    font-size: 0.85rem; color: var(--text);
    /* The counters line up under each other regardless of digit width. */
    font-variant-numeric: tabular-nums;
}
.ysn-lineup-list li::marker { color: var(--text-faint, var(--text-muted)); font-size: 0.75em; }
.ysn-lineup-list li { overflow-wrap: anywhere; }
.ysn-lineup-none { margin: 0; font-size: 0.82rem; color: var(--text-muted); }

@media (max-width: 30rem) {
    .ysn-lineups { grid-template-columns: 1fr; }
}

/* segmented choice bar — admin forms (match format, etc.) */
.ysn-segmented {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    /* admin form styles stretch direct children of .form-group to 100% */
    width: fit-content;
    max-width: 100%;
    padding: 0.25rem;
    background: var(--dark-2, var(--dark));
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
}
.ysn-segmented .ysn-seg { position: relative; margin: 0; cursor: pointer; }
.ysn-segmented .ysn-seg input {
    position: absolute; inset: 0; margin: 0;
    width: 100%; height: 100%;
    opacity: 0; cursor: pointer;
}
.ysn-segmented .ysn-seg span {
    display: block;
    padding: 0.42rem 0.95rem;
    border-radius: calc(var(--radius-md) - 1px);
    font: 500 0.82rem/1 var(--font-mono);
    letter-spacing: 0.04em;
    color: var(--text-muted);
    transition: background .14s ease, color .14s ease;
}
.ysn-segmented .ysn-seg:hover span { color: var(--text); background: var(--dark-4); }
.ysn-segmented .ysn-seg input:checked + span {
    background: var(--primary);
    color: #fff;
}
.ysn-segmented .ysn-seg input:focus-visible + span {
    outline: 2px solid var(--primary-light);
    outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
    .ysn-segmented .ysn-seg span { transition: none; }
}

/* ==================== 28. TOASTS (upgraded) ==================== */

.toast { display: flex; align-items: flex-start; gap: 0.65rem; }
.toast-icon { flex: 0 0 auto; margin-top: 0.1rem; }
.toast.success .toast-icon { color: var(--success); }
.toast.error   .toast-icon { color: var(--danger); }
.toast.warning .toast-icon { color: var(--warning); }
.toast.info    .toast-icon { color: var(--info); }
.toast-copy { flex: 1 1 auto; min-width: 0; }
.toast-x {
    flex: 0 0 auto; background: none; border: 0; color: var(--text-muted);
    font-size: 1.05rem; line-height: 1; cursor: pointer; padding: 0 0.1rem;
}
.toast-x:hover { color: var(--text); }
@keyframes ysnToastOut { to { opacity: 0; transform: translateX(14px); } }

/* ==================== 29. STYLE A — SMALL SCREENS ==================== */

@media (max-width: 980px) {
    .ysn-hero-grid { grid-template-columns: 1fr; align-items: start; }
    .ysn-section-grid { grid-template-columns: 1fr; }
}
@media (max-width: 780px) {
    /* On a phone the nav needs the full width to scroll, so it drops to its
       own row under the account menu and the centring spacer is dropped. */
    .ysn-bar { grid-template-columns: minmax(0, 1fr); padding: 0.6rem 0; gap: 0.55rem; }
    .ysn-bar::before { display: none; }
    .ysn-bar .main-nav { order: 3; justify-content: flex-start; min-width: 0; }
    .ysn-bar .nav-links { overflow-x: auto; scrollbar-width: none; }
    .ysn-bar .nav-links::-webkit-scrollbar { display: none; }
    .ysn-bar .nav-link { flex: 0 0 auto; padding: 0.55rem 0.7rem; }
    .ysn-strip-grid { grid-template-columns: repeat(3, 1fr); }
    .ysn-stat { padding-left: 0.9rem; }
    .ysn-stat-v { font-size: 1.35rem; }
    .ysn-hero-meta { gap: 1.2rem; }
    .ysn-scoreline-foot { font-size: 0.62rem; }
}

/* --- activity log sentences (change #10) --- */
.ysn-log-line { display: block; color: var(--text); font-size: 0.86rem; }
.ysn-log-extra {
    display: block; margin-top: 0.15rem;
    font-family: var(--font-mono); font-size: 0.68rem;
    letter-spacing: 0.04em; color: var(--text-muted);
}

/* --- homepage roster preview: always four across on desktop --- */
#rosterPreview .members-category-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 980px) { #rosterPreview .members-category-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px)  { #rosterPreview .members-category-grid { grid-template-columns: 1fr; } }

/* --- homepage: one content column + a sticky sidebar for the whole page --- */
.ysn-home-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 20rem;
    gap: clamp(1.2rem, 2.2vw, 2rem);
    align-items: start;
}
.ysn-home-main { min-width: 0; }
.ysn-home-main > .ysn-section:first-child { padding-top: clamp(1.6rem, 2.6vw, 2.4rem); }
.ysn-home-grid > .ysn-aside {
    position: sticky;
    top: var(--space-lg);
    padding-top: clamp(1.6rem, 2.6vw, 2.4rem);
}
@media (max-width: 980px) {
    .ysn-home-grid { grid-template-columns: 1fr; }
    .ysn-home-grid > .ysn-aside { position: static; padding-top: 0; }
}
.ysn-detail-empty { color: var(--text-muted); font-size: 0.88rem; font-style: normal; margin: 0; }

/* ==========================================================================
   30. APPLICATION SUBCATEGORIES + SYSTEM REPLIES  (change #8)
   ========================================================================== */

.forum-thread-list { display: flex; flex-direction: column; gap: 0.6rem; }

.app-groups { display: flex; flex-direction: column; gap: clamp(1.6rem, 3vw, 2.6rem); }
.app-pinned { margin-bottom: clamp(1.6rem, 3vw, 2.6rem); }

.app-group-head {
    display: flex;
    align-items: baseline;
    gap: 0.7rem;
    padding-bottom: 0.6rem;
    margin-bottom: 0.9rem;
    border-bottom: 1px solid var(--border);
}
.app-group-title {
    margin: 0;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1.05rem;
    letter-spacing: -0.015em;
}
.app-group-count {
    font-family: var(--font-mono);
    font-size: 0.66rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    padding: 0.15rem 0.5rem;
    border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-muted);
}
.app-group-empty {
    margin: 0;
    padding: 1.1rem 1rem;
    border: 1px dashed var(--border);
    border-radius: var(--radius-md);
    color: var(--text-muted);
    font-size: 0.86rem;
}

/* the two decided groups carry their colour on the heading and the rule */
.app-group-accepted .app-group-title { color: var(--success); }
.app-group-accepted .app-group-head  { border-bottom-color: rgba(61, 220, 132, 0.3); }
.app-group-accepted .app-group-count { background: rgba(61, 220, 132, 0.12); color: var(--success); }

.app-group-rejected .app-group-title { color: var(--danger); }
.app-group-rejected .app-group-head  { border-bottom-color: rgba(255, 90, 84, 0.3); }
.app-group-rejected .app-group-count { background: rgba(255, 90, 84, 0.12); color: var(--danger); }

/* thread rows inherit a matching left rule */
.forum-thread.app-accepted { border-left: 2px solid var(--success); }
.forum-thread.app-rejected { border-left: 2px solid var(--danger); opacity: 0.82; }
.forum-thread.app-rejected:hover { opacity: 1; }

.thread-badge.accepted { background: rgba(61, 220, 132, 0.14); color: var(--success); }
.thread-badge.rejected { background: rgba(255, 90, 84, 0.14); color: var(--danger); }
.thread-author { color: var(--primary-light); font-weight: 600; }

.app-decided {
    display: inline-flex;
    align-items: center;
    padding: 0 0.7rem;
    height: 2.1rem;
    border-radius: var(--radius-md);
    font-family: var(--font-mono);
    font-size: 0.66rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}
.app-decided-accepted { background: rgba(61, 220, 132, 0.12); color: var(--success); }
.app-decided-rejected { background: rgba(255, 90, 84, 0.12); color: var(--danger); }

/* --- the system reply posted on a decision --- */
.forum-post.post-system {
    display: block;
    background: var(--dark-2);
    border: 1px solid var(--border);
    border-left: 2px solid var(--divider);
    border-radius: var(--radius-lg);
    margin-bottom: 1rem;
}
.post-system.tone-accepted { border-left-color: var(--success); background: rgba(61, 220, 132, 0.045); }
.post-system.tone-rejected { border-left-color: var(--danger);  background: rgba(255, 90, 84, 0.045); }
.post-system-inner { padding: 1.15rem 1.3rem; }
.post-system-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-md);
    margin-bottom: 0.6rem;
}
.post-system-tag {
    font-family: var(--font-mono);
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
}
.post-system.tone-accepted .post-system-tag { color: var(--success); }
.post-system.tone-rejected .post-system-tag { color: var(--danger); }
.post-system-time { font-family: var(--font-mono); font-size: 0.68rem; color: var(--text-muted); }
.post-system-body { line-height: 1.7; font-size: 0.95rem; }
.post-system.tone-accepted .post-system-body { color: #A8F0C8; }
.post-system.tone-rejected .post-system-body { color: #FFB3AF; }
.post-system-body p { margin: 0 0 0.6rem; }
.post-system-body p:last-child { margin-bottom: 0; }
.post-system-by {
    margin-top: 0.75rem;
    padding-top: 0.6rem;
    border-top: 1px solid var(--border);
    font-family: var(--font-mono);
    font-size: 0.66rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
}

/* --- thread editor (Manage → Edit Thread) --- */
.ysn-dialog .field > textarea {
    padding: 0.7rem 0.8rem;
    background: var(--dark-3);
    border: 1px solid var(--divider);
    border-radius: var(--radius-md);
    color: var(--text);
    font: 400 0.9rem/1.65 var(--font-primary);
    resize: vertical;
    min-height: 9rem;
}
.ysn-dialog .field > textarea:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-tint);
}
.ysn-preview-label {
    font-family: var(--font-mono);
    font-size: 0.64rem;
    font-weight: 500;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.ysn-preview {
    min-height: 4rem;
    padding: 0.85rem 1rem;
    background: var(--dark);
    border: 1px dashed var(--divider);
    border-radius: var(--radius-md);
}

/* ==================== 31. APPLICATION FORM (bilingual) ==================== */

/* step 1 — language choice */
.app-lang { padding: 1.5rem 0 0.5rem; text-align: center; }
.app-lang-lead {
    margin: 0 0 1.4rem;
    font-family: var(--font-mono);
    font-size: 0.68rem;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.app-lang-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    gap: 0.9rem;
    max-width: 34rem;
    margin: 0 auto;
}
.app-lang-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.28rem;
    padding: 1.35rem 1.4rem;
    text-align: left;
    background: var(--dark-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease, transform .15s ease;
}
.app-lang-card:hover,
.app-lang-card:focus-visible {
    background: var(--dark-3, var(--dark-4));
    border-color: var(--primary);
    transform: translateY(-2px);
    outline: none;
}
.app-lang-card:focus-visible { box-shadow: 0 0 0 3px var(--primary-tint); }
.app-lang-code {
    font-family: var(--font-mono);
    font-size: 0.64rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    color: var(--primary-light);
}
.app-lang-name {
    font-family: var(--font-heading);
    font-size: 1.3rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--text);
}
.app-lang-hint { font-size: 0.82rem; color: var(--text-muted); }

@media (prefers-reduced-motion: reduce) {
    .app-lang-card { transition: none; }
    .app-lang-card:hover, .app-lang-card:focus-visible { transform: none; }
}

/* step 2 — requirements + questions */
.app-reqs {
    margin-bottom: 1.6rem;
    padding: 1.1rem 1.25rem;
    background: var(--dark);
    border: 1px solid var(--border);
    border-left: 2px solid var(--primary);
    border-radius: var(--radius-md);
}
.app-reqs h4 {
    margin: 0 0 0.7rem;
    font-family: var(--font-mono);
    font-size: 0.66rem;
    font-weight: 500;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.app-reqs ul { margin: 0; padding-left: 1.15rem; display: flex; flex-direction: column; gap: 0.45rem; }
.app-reqs li { color: var(--text-secondary); font-size: 0.9rem; line-height: 1.55; }
.app-reqs li::marker { color: var(--primary-light); }

.app-form-title {
    margin: 0 0 1.1rem;
    font-family: var(--font-heading);
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text);
}
.app-form .form-group { margin-bottom: 1.05rem; }
.app-form label { display: block; margin-bottom: 0.4rem; line-height: 1.45; }
.app-optional { color: var(--text-muted); font-weight: 400; }
.app-goodluck {
    margin: 1.2rem 0 0;
    font-family: var(--font-heading);
    font-size: 0.98rem;
    font-weight: 600;
    color: var(--primary-light);
}

/* an application read in full from the admin panel */
.ysn-app-row {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    padding: 0.75rem 0;
    border-top: 1px solid var(--divider);
}
.ysn-app-row:first-of-type { border-top: 0; padding-top: 0.2rem; }
.ysn-app-q {
    font-family: var(--font-mono);
    font-size: 0.64rem;
    font-weight: 500;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.ysn-app-a { color: var(--text); line-height: 1.6; }
.ysn-app-a p { margin: 0 0 0.4rem; }
.ysn-app-a p:last-child { margin-bottom: 0; }

/* ==================== 32. POST EDITOR + RICH TEXT ==================== */

.ysn-editor {
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--dark-2);
    overflow: visible;
}
.ysn-editor-input {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0.9rem 1rem;
    background: var(--dark-3, var(--dark));
    border: 0;
    border-top: 1px solid var(--border);
    border-radius: 0 0 var(--radius-md) var(--radius-md);
    color: var(--text);
    font: 400 0.92rem/1.65 var(--font-primary);
    resize: vertical;
}
.ysn-editor-input:focus { outline: none; box-shadow: inset 0 0 0 1px var(--primary); }

/* --- toolbar --- */
.ysn-tb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.15rem;
    padding: 0.35rem 0.4rem;
}
.ysn-tb-group { display: flex; align-items: center; gap: 0.1rem; }
.ysn-tb-div {
    width: 1px;
    height: 18px;
    margin: 0 0.35rem;
    background: var(--divider);
}
.ysn-tb-spacer { flex: 1 1 auto; }

.ysn-tb-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    min-width: 30px;
    height: 30px;
    padding: 0 0.4rem;
    background: none;
    border: 0;
    border-radius: var(--radius-sm, 3px);
    color: var(--text-muted);
    font: 500 0.85rem/1 var(--font-primary);
    cursor: pointer;
    transition: background .13s ease, color .13s ease;
}
.ysn-tb-btn svg { width: 15px; height: 15px; flex: 0 0 auto; }
.ysn-tb-btn:hover { background: var(--dark-4); color: var(--text); }
.ysn-tb-btn:focus-visible { outline: 2px solid var(--primary-light); outline-offset: -1px; }
.ysn-tb-btn:active { background: var(--primary-tint); color: var(--primary-light); }

/* The letter buttons carry their own meaning, so they show it. */
.ysn-tb-btn.is-b { font-weight: 800; }
.ysn-tb-btn.is-i { font-style: italic; font-family: var(--font-heading); }
.ysn-tb-btn.is-u { text-decoration: underline; text-underline-offset: 2px; }
.ysn-tb-btn.is-s { text-decoration: line-through; }
.ysn-tb-btn.is-big { font-size: 1.05rem; font-weight: 700; }
.ysn-tb-btn.is-small { font-size: 0.68rem; font-weight: 700; }

/* --- colour pickers --- */
.ysn-tb-pop-wrap { position: relative; display: inline-flex; }
.ysn-tb-color { flex-direction: column; gap: 0; padding: 0 0.3rem; position: relative; }
.ysn-tb-color-a { font-weight: 700; font-size: 0.82rem; line-height: 1; }
.ysn-tb-color-bar {
    display: block;
    width: 15px;
    height: 3px;
    margin-top: 2px;
    border-radius: 1px;
}
.ysn-tb-chev { width: 9px !important; height: 9px !important; position: absolute; right: -1px; bottom: 2px; opacity: .7; }
.ysn-tb-pop {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 40;
    padding: 0.5rem;
    background: var(--dark-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.55);
}
.ysn-tb-swatches {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 0.3rem;
}
.ysn-tb-swatch {
    width: 20px;
    height: 20px;
    padding: 0;
    background: var(--sw);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 3px;
    cursor: pointer;
    transition: transform .12s ease;
}
.ysn-tb-swatch:hover { transform: scale(1.16); }
.ysn-tb-swatch:focus-visible { outline: 2px solid var(--primary-light); outline-offset: 2px; }

/* --- preview --- */
.ysn-tb-preview {
    padding: 0 0.7rem;
    font-family: var(--font-mono);
    font-size: 0.68rem;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}
.ysn-tb-preview.is-on { background: var(--primary); color: #fff; }
.ysn-tb-preview.is-on:hover { background: var(--primary); color: #fff; }
.ysn-editor-preview {
    padding: 0.9rem 1rem;
    border-top: 1px dashed var(--divider);
    background: var(--dark);
    border-radius: 0 0 var(--radius-md) var(--radius-md);
}
.ysn-editor-empty { color: var(--text-muted); font-style: italic; margin: 0; }

@media (prefers-reduced-motion: reduce) {
    .ysn-tb-btn, .ysn-tb-swatch { transition: none; }
    .ysn-tb-swatch:hover { transform: none; }
}

/* --- what the tags render as --- */
.ysn-rt-big { font-size: 1.3em; font-weight: 700; line-height: 1.3; }
.ysn-rt-small { font-size: 0.82em; }
.ysn-rt-bg {
    /* Highlights are always a light colour, so the text on them must go dark. */
    padding: 0.05em 0.3em;
    border-radius: 3px;
    color: #14141A;
}
.ysn-rt-center { text-align: center; }
.ysn-rt-center > *:last-child { margin-bottom: 0; }
.ysn-rt-img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 0.5rem 0;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
}
.ysn-rt-center .ysn-rt-img { margin-inline: auto; }
.ysn-rt-video {
    position: relative;
    width: 100%;
    max-width: 42rem;
    margin: 0.9rem 0;
    aspect-ratio: 16 / 9;
    background: #000;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    overflow: hidden;
}
.ysn-rt-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.ysn-rt-center .ysn-rt-video { margin-inline: auto; }

/* An [img] whose address turned out to be a page, not a picture. */
.ysn-rt-imgfail {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0.4rem 0;
    padding: 0.55rem 0.8rem;
    background: var(--dark);
    border: 1px dashed var(--divider);
    border-radius: var(--radius-md);
    color: var(--text-muted);
    font-size: 0.84rem;
    text-decoration: none;
}
.ysn-rt-imgfail:hover { border-color: var(--primary); color: var(--text); }
.ysn-rt-imgfail svg { flex: 0 0 auto; }

/* ==================== 33. HOMEPAGE FEED PANEL ==================== */

/* Two framed containers, one per feed, each holding its items as cards. */
.ysn-feed {
    position: relative;
    margin: clamp(1.4rem, 2.4vw, 2.2rem) 0;
    background:
        radial-gradient(120% 100% at 50% 0%, rgba(124, 92, 255, 0.085), transparent 62%),
        linear-gradient(180deg, var(--dark-2), var(--dark));
    border: 1px solid var(--border);
    border-radius: calc(var(--radius-md) * 3);
    box-shadow:
        0 24px 60px -30px rgba(0, 0, 0, 0.9),
        inset 0 1px 0 rgba(255, 255, 255, 0.045);
    overflow: hidden;
}
/* A hairline of light along the top edge — the panel reads as one object. */
.ysn-feed::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--primary-light), transparent);
    opacity: 0.5;
}

/* Each feed is its own container, so the padding lives on the panel and the
   pane divider is gone — the gap between the two panels does that job now. */
.ysn-feed > .ysn-feed-head,
.ysn-feed > .ysn-feed-body { padding-inline: clamp(1.05rem, 1.9vw, 1.7rem); }
.ysn-feed > .ysn-feed-head { padding-top: clamp(1.25rem, 2.1vw, 1.85rem); }
.ysn-feed > .ysn-feed-body { padding-bottom: clamp(1.25rem, 2.1vw, 1.85rem); }

.ysn-feed-head {
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 0.5rem 0.85rem;
    margin-bottom: 1.05rem;
}
.ysn-feed-headings { display: flex; flex-direction: column; gap: 0.22rem; min-width: 0; }
.ysn-feed-eyebrow {
    font-family: var(--font-mono);
    font-size: 0.63rem;
    font-weight: 500;
    letter-spacing: 0.17em;
    text-transform: uppercase;
    color: var(--primary-light);
}
.ysn-feed-title {
    margin: 0;
    font-family: var(--font-heading);
    font-size: clamp(1.15rem, 1.9vw, 1.45rem);
    font-weight: 800;
    letter-spacing: -0.018em;
    color: var(--text);
}
/* Fills the gap between the heading and the action, tying the row together. */
.ysn-feed-rule {
    flex: 1 1 2rem;
    min-width: 1.5rem;
    height: 1px;
    margin-bottom: 0.55rem;
    background: linear-gradient(90deg, var(--divider), transparent);
}
.ysn-feed-count {
    margin-bottom: 0.42rem;
    font-family: var(--font-mono);
    font-size: 0.63rem;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.ysn-feed-body > .empty-state { border: 0; background: none; padding: 1.5rem 0; }

@media (max-width: 560px) {
    .ysn-feed-rule { display: none; }
}

/* --- the card shared by both feeds --- */
.ysn-card {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0 0.95rem;
    width: 100%;
    padding: 0.95rem 1.1rem 0.95rem 1rem;
    text-align: left;
    background: var(--dark-3);
    border: 1px solid var(--border);
    border-radius: calc(var(--radius-md) * 2);
    color: var(--text);
    font: inherit;
    cursor: pointer;
    overflow: hidden;
    transition: background .16s ease, border-color .16s ease, transform .16s ease;
}
.ysn-card + .ysn-card { margin-top: 0.65rem; }
/* The accent rail down the left edge; colour comes from the variant. */
.ysn-card::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 2px;
    background: var(--card-accent, var(--primary));
    opacity: 0.45;
    transition: opacity .16s ease, width .16s ease;
}
.ysn-card:hover {
    background: var(--dark-4);
    border-color: var(--divider);
    transform: translateY(-1px);
}
.ysn-card:hover::before { opacity: 1; width: 3px; }
.ysn-card:focus-visible { outline: 2px solid var(--primary-light); outline-offset: 2px; }

.ysn-card-index {
    padding-top: 0.18rem;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    font-weight: 500;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
    opacity: 0.6;
}
.ysn-card-main { display: block; min-width: 0; }
.ysn-card-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
}
.ysn-card-title {
    font-family: var(--font-heading);
    font-size: 1.02rem;
    font-weight: 700;
    letter-spacing: -0.012em;
    color: var(--text);
    overflow-wrap: anywhere;
}
.ysn-card-chip {
    flex: 0 0 auto;
    padding: 0.2rem 0.45rem;
    background: var(--primary-tint);
    border: 1px solid var(--primary-line, var(--border));
    border-radius: var(--radius-sm);
    font-family: var(--font-mono);
    font-size: 0.6rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--primary-light);
}
.ysn-card-date {
    display: block;
    margin-top: 0.22rem;
    font-family: var(--font-mono);
    font-size: 0.65rem;
    letter-spacing: 0.06em;
    color: var(--text-muted);
}
.ysn-card-excerpt {
    display: block;
    margin-top: 0.6rem;
    color: var(--text-secondary, var(--text-muted));
    font-size: 0.89rem;
    line-height: 1.6;
    overflow-wrap: anywhere;
}
.ysn-card-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-top: 0.75rem;
    padding-top: 0.65rem;
    border-top: 1px solid var(--border);
    font-size: 0.8rem;
    color: var(--text-muted);
}
.ysn-card-by strong { color: var(--text); font-weight: 600; }
.ysn-card-go {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-family: var(--font-mono);
    font-size: 0.65rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--primary-light);
    white-space: nowrap;
}
.ysn-card-arrow { transition: transform .16s ease; }
.ysn-card:hover .ysn-card-arrow { transform: translateX(3px); }

@media (prefers-reduced-motion: reduce) {
    .ysn-card, .ysn-card::before, .ysn-card-arrow { transition: none; }
    .ysn-card:hover { transform: none; }
    .ysn-card:hover .ysn-card-arrow { transform: none; }
}

/* --- clan war variant --- */
.ysn-card-war.win  { --card-accent: var(--success); }
.ysn-card-war.loss { --card-accent: var(--danger); }
.ysn-card-war.draw { --card-accent: var(--warning); }

.ysn-war-vs {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.4rem;
    font-family: var(--font-heading);
    font-size: 1.02rem;
    font-weight: 700;
    letter-spacing: -0.012em;
    min-width: 0;
}
.ysn-war-vs .ysn-us { color: var(--primary-light); }
.ysn-war-vs .ysn-vs {
    font-family: var(--font-primary);
    font-size: 0.78rem;
    font-weight: 400;
    color: var(--text-muted);
}
.ysn-war-vs .ysn-them { color: var(--text); overflow-wrap: anywhere; }

.ysn-war-result {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.1rem;
    flex: 0 0 auto;
}
.ysn-score {
    font-family: var(--font-heading);
    font-size: clamp(1.35rem, 2.4vw, 1.8rem);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.02em;
    /* Scores must not jitter between cards as digits change. */
    font-variant-numeric: tabular-nums;
}
.ysn-score-sep { margin: 0 0.16rem; opacity: 0.3; }
.ysn-card-war.win  .ysn-score { color: var(--success); }
.ysn-card-war.loss .ysn-score { color: var(--danger); }
.ysn-card-war.draw .ysn-score { color: var(--warning); }
.ysn-result-word {
    font-family: var(--font-mono);
    font-size: 0.58rem;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.ysn-meta-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
    margin-top: 0.7rem;
}
.ysn-meta-chip {
    padding: 0.24rem 0.48rem;
    background: var(--dark);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-family: var(--font-mono);
    font-size: 0.62rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-muted);
    white-space: nowrap;
}

/* Shared by both card variants, not just the war one: on a phone every card
   stacks and drops its index. Lives here because this is where section 33's
   card rules end — see .ysn-card in the base block above. */
@media (max-width: 520px) {
    .ysn-card { grid-template-columns: minmax(0, 1fr); gap: 0; }
    .ysn-card-index { display: none; }
    .ysn-card-top { flex-direction: column; align-items: flex-start; gap: 0.4rem; }
    .ysn-war-result { align-items: flex-start; }
}

/* --- account dropdown --- */
/* auth.js toggles .show on click, but style.css only ever revealed this menu
   on .user-dropdown:hover — so clicking the trigger did nothing, and on a
   touch screen there was no way to reach Profile / Admin / Logout at all. */
.dropdown-menu.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.user-trigger { cursor: pointer; }
.user-trigger[aria-expanded="true"] { background: var(--dark-4); }
/* style.css also opens this menu on hover. With a click toggle that means the
   menu pops open just from passing the cursor over the name, and will not shut
   on a second click because the pointer is still on the trigger. Click wins. */
.user-dropdown:hover .dropdown-menu:not(.show) {
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
}
/* style.css clips the header with overflow:hidden (it was hiding a decorative
   glow that this theme already removes). That clip also cut off the account
   dropdown, which hangs below the header — so the menu opened but was invisible. */
.site-header { overflow: visible; }

/* ==================== 34. AVATAR SIZING ==================== */

/* None of the avatar rules set object-fit, so any picture that was not already
   square got squashed into the box instead of cropped. cover + centre keeps
   the subject and the proportions; aspect-ratio guarantees the box is square
   even if one dimension is overridden somewhere. */
.profile-avatar,
.member-avatar,
.post-avatar,
.user-avatar,
.user-avatar-sm,
.member-card .member-avatar {
    object-fit: cover;
    object-position: center;
    aspect-ratio: 1 / 1;
    background: var(--dark-3);
}

/* Fixed pixel sizes meant the profile picture was the same 104px on a phone as
   on a widescreen. These scale with the viewport and stop at sensible ends. */
.profile-avatar {
    width: clamp(84px, 13vw, 140px);
    height: clamp(84px, 13vw, 140px);
}
.avatar-edit-btn {
    width: clamp(28px, 3.4vw, 36px);
    height: clamp(28px, 3.4vw, 36px);
}
.avatar-edit-btn svg { width: 55%; height: 55%; }

.member-avatar {
    width: clamp(72px, 9vw, 104px);
    height: clamp(72px, 9vw, 104px);
}
.post-avatar {
    width: clamp(56px, 7vw, 78px);
    height: clamp(56px, 7vw, 78px);
}

/* Below the tablet breakpoint the profile header stacks, so the picture no
   longer competes with the name for width and can take a little more room. */
@media (max-width: 640px) {
    .profile-avatar { width: clamp(88px, 24vw, 116px); height: clamp(88px, 24vw, 116px); }
}

/* ==================== 35. ACTIVITY DOT ==================== */

/* The dot on a roster avatar now reports how active the player is, not whether
   they have the site open. Same thresholds as the activity meter, so the dot
   and the bar always tell the same story. These override the .online/.recent/
   .offline presence colours from ysn-ui.css. */
.presence-dot.activity-dot { animation: none; }

.presence-dot.activity-dot.high {
    background: var(--success);
    box-shadow: 0 0 6px var(--success), 0 0 12px rgba(61, 220, 132, 0.45);
    animation: presencePulse 2s ease-in-out infinite;
}
.presence-dot.activity-dot.mid {
    background: var(--warning);
    box-shadow: 0 0 6px var(--warning), 0 0 12px rgba(255, 194, 75, 0.35);
}
.presence-dot.activity-dot.low {
    background: var(--danger);
    box-shadow: 0 0 6px rgba(255, 90, 84, 0.5);
}
/* No rating yet is not the same as inactive — grey says so rather than lying. */
.presence-dot.activity-dot.unset {
    background: var(--text-muted);
    box-shadow: none;
    opacity: 0.55;
}

@media (prefers-reduced-motion: reduce) {
    .presence-dot.activity-dot.high { animation: none; }
}

/* ==================== 36. ADMIN INBOX ==================== */

.admin-nav-badge {
    margin-left: auto;
    min-width: 1.25rem;
    padding: 0.1rem 0.35rem;
    background: var(--danger);
    border-radius: var(--radius-full, 999px);
    color: #fff;
    font-family: var(--font-mono);
    font-size: 0.62rem;
    font-weight: 600;
    line-height: 1.5;
    text-align: center;
}

.inbox-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-bottom: 1.1rem;
}
.inbox-toolbar #inboxSearch { flex: 1 1 16rem; min-width: 0; }
.inbox-toolbar #inboxFilter { flex: 0 0 auto; }

.inbox-item {
    position: relative;
    padding: 1.05rem 1.2rem;
    background: var(--dark-2);
    border: 1px solid var(--border);
    border-left: 2px solid transparent;
    border-radius: var(--radius-md);
}
.inbox-item + .inbox-item { margin-top: 0.7rem; }
/* Unread is the state that needs to be findable at a glance. */
.inbox-item.is-unread {
    background: var(--dark-3);
    border-left-color: var(--primary);
}

.inbox-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.4rem 0.8rem;
}
.inbox-who { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem; min-width: 0; }
.inbox-who strong { color: var(--text); }
.inbox-dot {
    width: 7px; height: 7px;
    background: var(--primary);
    border-radius: 50%;
    flex: 0 0 auto;
}
.inbox-email { color: var(--primary-light); font-size: 0.84rem; text-decoration: none; overflow-wrap: anywhere; }
.inbox-email:hover { text-decoration: underline; }
.inbox-account {
    padding: 0.12rem 0.4rem;
    background: var(--primary-tint);
    border-radius: var(--radius-sm);
    font-family: var(--font-mono);
    font-size: 0.6rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--primary-light);
}
.inbox-when {
    font-family: var(--font-mono);
    font-size: 0.66rem;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    white-space: nowrap;
}
.inbox-subject {
    margin: 0.6rem 0 0.4rem;
    font-family: var(--font-heading);
    font-size: 1rem;
    font-weight: 700;
    color: var(--text);
    overflow-wrap: anywhere;
}
.inbox-body {
    color: var(--text-secondary, var(--text-muted));
    font-size: 0.9rem;
    line-height: 1.65;
    overflow-wrap: anywhere;
}
.inbox-body p:last-child { margin-bottom: 0; }
.inbox-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin-top: 0.9rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border);
}

/* inbox: Discord identity + sent replies */
.inbox-discord {
    padding: 0.12rem 0.4rem;
    background: rgba(88, 101, 242, 0.16);
    border: 1px solid rgba(88, 101, 242, 0.45);
    border-radius: var(--radius-sm);
    font-family: var(--font-mono);
    font-size: 0.66rem;
    color: #A5B0FF;
}
.inbox-noreply {
    align-self: center;
    font-size: 0.8rem;
    color: var(--text-muted);
    font-style: italic;
}
.inbox-reply {
    margin-top: 0.8rem;
    padding: 0.7rem 0.9rem;
    background: var(--dark);
    border-left: 2px solid var(--success);
    border-radius: var(--radius-md);
}
.inbox-reply-head {
    display: block;
    margin-bottom: 0.35rem;
    font-family: var(--font-mono);
    font-size: 0.62rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--success);
}
.inbox-reply p:last-child { margin-bottom: 0; }

/* ==================== 37. FOUNDER RANK ==================== */
/*
 * The account role `leader` is now shown as "Founder" and `moderator` as
 * "Leader". Both used to land on the same purple star badge, which left the
 * two top ranks looking identical the moment the names changed. Founder takes
 * gold, Leader keeps the purple that its name always implied.
 *
 * Only the colour tokens are overridden - the badge shell, the running
 * highlight (.rb-shine) and the layout all stay exactly as they are.
 */
.role-badge-founder {
    --rb-bg: linear-gradient(135deg, #2a1a02 0%, #5c3d09 50%, #8a6412 100%);
    --rb-border: linear-gradient(135deg, #ffe08a, #ffca3a, #d9a017);
    --rb-accent: #ffd76a;
    --rb-glow: rgba(255, 202, 58, 0.75);
    --rb-shadow: 0 6px 22px rgba(255, 202, 58, 0.32);
    --rb-mark: '♛';
}

.role-pill.role-founder {
    background: rgba(255, 202, 58, 0.16);
    color: #ffd76a;
    border-color: rgba(255, 202, 58, 0.38);
}

/* ==================== 38. LONG ROLE CAPTIONS ==================== */
/*
 * "ASSISTANT CL" is the longest caption a badge has ever carried, and at the
 * base 0.16em letter-spacing it wrapped onto two lines inside the forum post
 * sidebar - the narrowest place a badge appears.
 *
 * Rather than shrink every badge, the caption is kept on one line and the
 * tracking is relaxed only where space is actually tight. Everything else
 * about the badge - colours, border, the running .rb-shine highlight - is
 * untouched.
 */
.role-badge {
    white-space: nowrap;
    max-width: 100%;
}

.post-author-card .role-badge,
.member-card .role-badge {
    padding: 0.45rem 0.7rem;
    gap: 0.3rem;
    letter-spacing: 0.1em;
}

/* Two ranks share a card in the roster, so give those a little more room. */
.role-badges {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.35rem;
}