/* ═══════════════════════════════════════════════════════════════
   L2 Strive — Dark Gaming Aesthetic Stylesheet
   Modern, responsive, Lineage 2 themed
   ═══════════════════════════════════════════════════════════════ */

/* ─── CSS Custom Properties ─────────────────────────────────── */
:root {
    /* Core palette */
    --bg-darkest:     #0a0c10;
    --bg-dark:        #0f1218;
    --bg-card:        #151921;
    --bg-card-hover:  #1a1f2a;
    --bg-surface:     #1c2130;
    --bg-input:       #12161e;

    /* Accent colours */
    --gold:           #d4a853;
    --gold-light:     #f0cd7e;
    --gold-dark:      #a88435;
    --blue:           #4a9eff;
    --blue-dark:      #2d6fbc;
    --cyan:           #38d9d9;
    --red:            #e74c3c;
    --red-dark:       #c0392b;
    --green:          #2ecc71;
    --green-dark:     #1fa05a;
    --orange:         #e67e22;
    --purple:         #9b59b6;

    /* Text */
    --text:           #d4d8e0;
    --text-muted:     #7a8299;
    --text-light:     #f0f2f5;
    --text-heading:   #eaecf0;

    /* Borders */
    --border:         #252a36;
    --border-light:   #313848;

    /* Glow */
    --glow-gold:      0 0 20px rgba(212,168,83,0.15);
    --glow-blue:      0 0 20px rgba(74,158,255,0.15);
    --glow-card:      0 4px 24px rgba(0,0,0,0.35);

    /* Fonts */
    --font-heading:   'Cinzel', 'Georgia', serif;
    --font-body:      'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

    /* Layout */
    --container-max:  1200px;
    --header-h:       60px;
    --radius:         8px;
    --radius-lg:      12px;
    --transition:     0.25s ease;
}

/* ─── Reset / Base ──────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: var(--font-body);
    font-size: 15px;
    line-height: 1.6;
    color: var(--text);
    background: var(--bg-darkest);
    min-height: 100vh;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--blue); text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--gold-light); }

/* Skill icon used in features table */
.skill-icon {
    width: 36px;
    height: 36px;
    object-fit: contain;
    /* Square gold border directly on the image with no gap.
       Use border + border-box so the displayed size stays 36x36. */
    box-sizing: border-box;
    border: 1px solid var(--gold);
    border-radius: 0;
    padding: 0; /* no padding so border sits flush to image */
    box-shadow: 0 4px 12px rgba(0,0,0,0.12);
    background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.03));
}


h1,h2,h3,h4,h5,h6 {
    font-family: var(--font-heading);
    color: var(--text-heading);
    line-height: 1.3;
    font-weight: 600;
}

::selection { background: var(--gold); color: var(--bg-darkest); }

/* ─── Utility ───────────────────────────────────────────────── */
.container { max-width: var(--container-max); margin: 0 auto; padding: 0 20px; }
.text-center { text-align: center; }
.text-muted { color: var(--text-muted) !important; }
.text-gold { color: var(--gold) !important; }
.text-success { color: var(--green) !important; }
.text-danger { color: var(--red) !important; }
.text-lg { font-size: 1.35em; }
.text-sm { font-size: 0.85em; }
.mb-2 { margin-bottom: 0.5rem; }
.mb-3 { margin-bottom: 1rem; }
.mb-4 { margin-bottom: 1.5rem; }
.mt-2 { margin-top: 0.5rem; }
.mt-3 { margin-top: 1rem; }
.mt-4 { margin-top: 1.5rem; }
.p-0 { padding: 0 !important; }

/* ─── Flash Messages ────────────────────────────────────────── */
.flash-container {
    position: fixed;
    top: 16px;
    right: 16px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-width: 420px;
    width: 100%;
}

.flash {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    border-radius: var(--radius);
    font-size: 14px;
    font-weight: 500;
    backdrop-filter: blur(12px);
    border: 1px solid transparent;
    animation: flashSlide 0.35s ease-out;
    box-shadow: 0 8px 30px rgba(0,0,0,0.3);
}

@keyframes flashSlide {
    from { opacity: 0; transform: translateX(40px); }
    to   { opacity: 1; transform: translateX(0); }
}

.flash-success { background: rgba(46,204,113,0.15); border-color: rgba(46,204,113,0.35); color: #6aed9a; }
.flash-error   { background: rgba(231,76,60,0.15);  border-color: rgba(231,76,60,0.35);  color: #f08c82; }
.flash-warning { background: rgba(230,126,34,0.15); border-color: rgba(230,126,34,0.35); color: #f4a460; }
.flash-info    { background: rgba(74,158,255,0.15); border-color: rgba(74,158,255,0.35); color: #7ab8ff; }

.flash-close {
    background: none;
    border: none;
    color: inherit;
    font-size: 20px;
    cursor: pointer;
    opacity: 0.7;
    padding: 0 0 0 12px;
    line-height: 1;
}
.flash-close:hover { opacity: 1; }

/* ═══════════════════════════════════════════════════════════════
   HEADER
   ═══════════════════════════════════════════════════════════════ */

.site-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: var(--bg-dark);
    border-bottom: 1px solid var(--border);
}

/* Top Bar */
.header-top {
    background: var(--bg-darkest);
    border-bottom: 1px solid var(--border);
    padding: 6px 0;
    font-size: 13px;
}

.header-top-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.server-status-mini {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--text-muted);
    font-weight: 500;
}

/* Invisible placeholder used to preserve header spacing when the mini status is removed */
.server-status-placeholder {
    display: flex;
    align-items: center;
    visibility: hidden; /* keep layout space but hide content */
    min-width: 200px; /* reserve space similar to the original status block */
}

/* Status Dot */
.status-dot {
    display: inline-block;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--text-muted);
    flex-shrink: 0;
}
.status-dot.online  { background: var(--green);  box-shadow: 0 0 6px var(--green); }
.status-dot.offline { background: var(--red);    box-shadow: 0 0 6px var(--red); }

/* User Nav */
.user-nav {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.user-greeting {
    color: var(--gold);
    font-weight: 600;
    font-size: 13px;
    margin-right: 4px;
}

.btn-sm, .user-nav .btn-sm {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 5px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text);
    background: var(--bg-surface);
    border: 1px solid var(--border);
    transition: all var(--transition);
    cursor: pointer;
    text-decoration: none;
}
.btn-sm:hover { background: var(--bg-card-hover); color: var(--gold-light); border-color: var(--border-light); }
.btn-sm.btn-gold { background: rgba(212,168,83,0.15); color: var(--gold); border-color: rgba(212,168,83,0.3); }
.btn-sm.btn-gold:hover { background: rgba(212,168,83,0.25); color: var(--gold-light); }
.btn-sm.btn-danger { color: var(--red); border-color: rgba(231,76,60,0.3); }
.btn-sm.btn-danger:hover { background: rgba(231,76,60,0.15); }

/* Login Form */
.login-form { display: flex; align-items: center; }

.login-fields {
    display: flex;
    align-items: center;
    gap: 6px;
}

.login-fields input {
    background: var(--bg-input);
    border: 1px solid var(--border);
    color: var(--text);
    padding: 5px 10px;
    border-radius: 5px;
    font-size: 13px;
    width: 130px;
    outline: none;
    transition: border-color var(--transition);
    font-family: var(--font-body);
}
.login-fields input:focus {
    border-color: var(--gold);
    box-shadow: 0 0 0 2px rgba(212,168,83,0.12);
}
.login-fields input::placeholder { color: var(--text-muted); }

.btn-login {
    background: linear-gradient(135deg, var(--gold-dark), var(--gold));
    color: var(--bg-darkest);
    border: none;
    padding: 5px 12px;
    border-radius: 5px;
    font-size: 14px;
    cursor: pointer;
    transition: all var(--transition);
    font-weight: 700;
}
.btn-login:hover { background: linear-gradient(135deg, var(--gold), var(--gold-light)); transform: translateY(-1px); }

/* Main Header */
.header-main {
    padding: 0;
    display: flex;
    align-items: center;
}

.header-main > .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: var(--header-h);
}

/* Logo */
.logo {
    font-family: var(--font-heading);
    font-size: 28px;
    font-weight: 900;
    text-decoration: none;
    letter-spacing: 1px;
    display: flex;
    align-items: baseline;
}
.logo-prefix {
    color: var(--gold);
    text-shadow: 0 0 12px rgba(212,168,83,0.4);
}
.logo-name {
    color: var(--text-light);
}
.logo:hover .logo-name { color: var(--gold-light); }

/* Navigation */
.main-nav ul {
    list-style: none;
    display: flex;
    gap: 4px;
}

.nav-link {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 16px;
    color: var(--text);
    font-size: 14px;
    font-weight: 500;
    border-radius: var(--radius);
    transition: all var(--transition);
    text-decoration: none;
}
.nav-link:hover,
.nav-link.active {
    color: var(--gold);
    background: rgba(212,168,83,0.08);
}
.nav-link i { font-size: 13px; opacity: 0.7; }

/* Mobile Toggle */
.mobile-menu-toggle {
    display: none;
    background: none;
    border: 1px solid var(--border);
    color: var(--text);
    font-size: 20px;
    padding: 6px 10px;
    border-radius: var(--radius);
    cursor: pointer;
    transition: all var(--transition);
}
.mobile-menu-toggle:hover { border-color: var(--gold); color: var(--gold); }

/* ═══════════════════════════════════════════════════════════════
   HERO SECTION
   ═══════════════════════════════════════════════════════════════ */

.hero {
    position: relative;
    background: linear-gradient(160deg, #0d1117 0%, #111827 40%, #0f172a 100%);
    padding: 80px 0 60px;
    overflow: hidden;
    text-align: center;
    border-bottom: 1px solid var(--border);
}

.hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 600px 400px at 20% 50%, rgba(212,168,83,0.06) 0%, transparent 70%),
        radial-gradient(ellipse 500px 300px at 80% 30%, rgba(74,158,255,0.05) 0%, transparent 70%);
    pointer-events: none;
}

.hero-particles {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}

.hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, transparent 60%, var(--bg-darkest));
    pointer-events: none;
    z-index: 1;
}

.hero-content {
    position: relative;
    z-index: 2;
}

.hero-badge {
    display: inline-block;
    background: rgba(212,168,83,0.12);
    border: 1px solid rgba(212,168,83,0.25);
    color: var(--gold);
    padding: 6px 18px;
    border-radius: 50px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 20px;
}

.hero-title {
    font-size: clamp(3rem, 8vw, 5.5rem);
    font-weight: 900;
    letter-spacing: 3px;
    margin-bottom: 12px;
    line-height: 1.1;
}
.hero-title .logo-prefix {
    color: var(--gold);
    text-shadow: 0 0 30px rgba(212,168,83,0.35);
}
.hero-title .logo-name {
    color: var(--text-light);
}

.hero-subtitle {
    font-size: 1.15rem;
    color: var(--text-muted);
    margin-bottom: 30px;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
}

/* Hero CTA */
.hero-cta {
    display: flex;
    justify-content: center;
    gap: 14px;
    margin-bottom: 40px;
    flex-wrap: wrap;
}

/* Hero Stats Bar */
.hero-stats {
    display: flex;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
    max-width: 900px;
    margin: 0 auto;
}

.hero-stat {
    position: relative;
    flex: 1 1 0;
    min-width: 160px;
    height: 140px;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    overflow: hidden;
    cursor: pointer;
    transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
    z-index: 1;
}
.hero-stat:hover {
    border-color: var(--gold);
    box-shadow: 0 0 0 1px var(--gold-dark), 0 8px 32px rgba(0,0,0,0.5);
    transform: translateY(-3px);
}

/* Background screenshot fills the card */
.hero-stat-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transition: transform 0.4s ease;
}
.hero-stat:hover .hero-stat-bg {
    transform: scale(1.06);
}

/* Dark gradient at the bottom so label stays readable */
.hero-stat::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(0,0,0,0)    40%,
        rgba(0,0,0,0.75) 100%
    );
    z-index: 1;
    pointer-events: none;
}

/* Label pinned to the bottom */
.hero-stat-value {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 2;
    padding: 7px 10px;
    font-family: var(--font-heading);
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--text-light);
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-shadow: 0 1px 4px rgba(0,0,0,0.8);
    letter-spacing: 0.03em;
}

/* ─── Screenshot Lightbox ───────────────────────────────────── */
.lightbox-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.92);
    z-index: 9000;
    align-items: center;
    justify-content: center;
    padding: 24px;
    cursor: zoom-out;
    /* fade in */
    opacity: 0;
    transition: opacity 0.25s ease;
}
.lightbox-overlay.is-open {
    display: flex;
    opacity: 0;
    animation: lightboxFadeIn 0.25s ease forwards;
}
@keyframes lightboxFadeIn {
    to { opacity: 1; }
}
.lightbox-img {
    max-width: min(92vw, 1280px);
    max-height: 88vh;
    border-radius: var(--radius-lg);
    box-shadow: 0 24px 80px rgba(0,0,0,0.8);
    border: 1px solid var(--border-light);
    object-fit: contain;
    cursor: default;
    /* scale in from slightly smaller */
    animation: lightboxScaleIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
@keyframes lightboxScaleIn {
    from { transform: scale(0.88); opacity: 0; }
    to   { transform: scale(1);    opacity: 1; }
}
.lightbox-close {
    position: fixed;
    top: 20px;
    right: 24px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 50%;
    color: #fff;
    font-size: 20px;
    cursor: pointer;
    transition: background var(--transition), transform var(--transition);
    z-index: 9001;
    line-height: 1;
}
.lightbox-close:hover {
    background: rgba(231,76,60,0.7);
    border-color: var(--red);
    transform: scale(1.1) rotate(90deg);
}
.lightbox-caption {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    font-family: var(--font-heading);
    font-size: 0.85rem;
    color: var(--text-muted);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    pointer-events: none;
}

/* ─── Page Hero (compact for inner pages) ───────────────────── */
.page-hero {
    background: linear-gradient(160deg, #0d1117, #111827);
    padding: 50px 0 40px;
    text-align: center;
    border-bottom: 1px solid var(--border);
    position: relative;
}
.page-hero::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--gold), transparent);
    opacity: 0.3;
}
.page-hero-sm { padding: 32px 0 28px; }
.page-hero h1 {
    font-size: 2rem;
    margin-bottom: 6px;
    color: var(--text-light);
}
.page-hero h1 i { color: var(--gold); margin-right: 8px; }
.page-hero p {
    color: var(--text-muted);
    font-size: 15px;
}

/* ═══════════════════════════════════════════════════════════════
   BUTTONS
   ═══════════════════════════════════════════════════════════════ */

.btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 22px;
    border-radius: var(--radius);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition);
    border: 2px solid transparent;
    text-decoration: none;
    font-family: var(--font-body);
    line-height: 1.4;
}

.btn-lg { padding: 13px 30px; font-size: 15px; }
.btn-block { width: 100%; justify-content: center; }

.btn-primary {
    background: linear-gradient(135deg, var(--blue-dark), var(--blue));
    color: #fff;
    border-color: transparent;
    box-shadow: 0 4px 15px rgba(74,158,255,0.25);
}
.btn-primary:hover {
    background: linear-gradient(135deg, var(--blue), #6ab4ff);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(74,158,255,0.35);
    color: #fff;
}

.btn-gold {
    background: linear-gradient(135deg, var(--gold-dark), var(--gold));
    color: var(--bg-darkest);
    border-color: transparent;
    box-shadow: 0 4px 15px rgba(212,168,83,0.25);
    font-weight: 700;
}
.btn-gold:hover {
    background: linear-gradient(135deg, var(--gold), var(--gold-light));
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(212,168,83,0.35);
    color: var(--bg-darkest);
}

.btn-outline {
    background: rgba(212,168,83,0.10);
    color: var(--text);
    border-color: rgba(212,168,83,0.28);
}
.btn-outline:hover {
    border-color: var(--gold);
    color: var(--gold);
    background: rgba(212,168,83,0.18);
}

/* ═══════════════════════════════════════════════════════════════
   CARDS
   ═══════════════════════════════════════════════════════════════ */

.card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: all var(--transition);
    box-shadow: var(--glow-card);
}

.card-glow {
    border-color: rgba(212,168,83,0.15);
    box-shadow: var(--glow-card), var(--glow-gold);
}
.card-glow:hover {
    border-color: rgba(212,168,83,0.3);
    box-shadow: var(--glow-card), 0 0 30px rgba(212,168,83,0.12);
}

.card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border);
    background: rgba(255,255,255,0.015);
}

.card-header h2, .card-header h3 {
    font-size: 1rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
}
.card-header h2 i, .card-header h3 i { color: var(--gold); font-size: 15px; }

.card-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.card-body { padding: 20px; }

/* ═══════════════════════════════════════════════════════════════
   TABLES
   ═══════════════════════════════════════════════════════════════ */

.ranking-table {
    width: 100%;
    border-collapse: collapse;
}

.ranking-table thead th {
    background: rgba(255,255,255,0.03);
    padding: 10px 16px;
    text-align: left;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    border-bottom: 1px solid var(--border);
}

.ranking-table tbody tr {
    border-bottom: 1px solid var(--border);
    transition: background var(--transition);
}
.ranking-table tbody tr:last-child { border-bottom: none; }
.ranking-table tbody tr:hover { background: rgba(255,255,255,0.02); }
.ranking-table tbody tr.rank-highlight { background: rgba(212,168,83,0.03); }
.ranking-table tbody tr.rank-highlight:hover { background: rgba(212,168,83,0.06); }

.ranking-table td {
    padding: 10px 16px;
    font-size: 14px;
    vertical-align: middle;
}

.ranking-table .rank {
    font-family: var(--font-heading);
    font-weight: 700;
    width: 40px;
    text-align: center;
}
.ranking-table .rank-1 { color: var(--gold); font-size: 16px; }
.ranking-table .rank-2 { color: #c0c0c0; }
.ranking-table .rank-3 { color: #cd7f32; }
.ranking-table .value { color: var(--gold); font-weight: 600; font-variant-numeric: tabular-nums; }

/* Grand Boss Row */
.grand-boss-row { background: rgba(212,168,83,0.04); }
.grand-boss-row:hover { background: rgba(212,168,83,0.08) !important; }

.row-alive td:first-child { border-left: 3px solid var(--green); }
.row-dead td:first-child { border-left: 3px solid var(--red); }

/* ═══════════════════════════════════════════════════════════════
   CONTENT SECTION
   ═══════════════════════════════════════════════════════════════ */

.content-section {
    padding: 40px 0 60px;
    background: linear-gradient(rgba(10,14,24,0.88), rgba(10,14,24,0.99)), url('../images/bgfeatures.webp') center center / cover no-repeat fixed;
    z-index: 0;
}

/* ─── Home Grid (3-column) ──────────────────────────────────── */
.home-grid-3col {
    display: grid;
    grid-template-columns: 240px 1fr 300px;
    gap: 24px;
    align-items: start;
}

.home-sidebar-left  { display: flex; flex-direction: column; gap: 24px; }
.home-center        { display: flex; flex-direction: column; gap: 24px; }
.home-sidebar-right { display: flex; flex-direction: column; gap: 24px; }

/* ─── Vote Links (Left Sidebar) ─────────────────────────────── */
.vote-links {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.vote-link {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 12px;
    background-color: var(--bg-surface);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text);
    font-size: 15px;
    font-weight: 500;
    transition: all var(--transition);
    text-decoration: none;
    position: relative;
    overflow: hidden;
}
.vote-link::before {
    content: '';
    position: absolute;
    inset: 0;
    background-color: var(--bg-surface);
    opacity: 0.75;
    z-index: 0;
}
.vote-link i,
.vote-link span { position: relative; z-index: 1; }
.vote-link:hover {
    border-color: var(--gold);
    color: var(--gold);
    transform: translateX(3px);
}
.vote-link:hover::before {
    background-color: rgba(20, 18, 14, 0.6);
}
.vote-link i { color: var(--gold); font-size: 11px; flex-shrink: 0; }

.vote-link-img {
    display: block;
    width: 200px;
    height: 40px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    transition: opacity 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}
.vote-link-img:hover {
    opacity: 0.65;
    transform: scale(1.02);
    border-color: var(--gold);
}

/* ─── Highlight List (Left Sidebar) ─────────────────────────── */
.highlight-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.highlight-list li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: var(--text);
    padding: 4px 0;
}
.highlight-list li i {
    font-size: 14px;
    width: 18px;
    text-align: center;
    flex-shrink: 0;
}

/* ─── News Articles (Center) ────────────────────────────────── */
.news-article {
    padding: 20px 0;
    border-bottom: 1px solid var(--border);
}
.news-article:first-child { padding-top: 0; }
.news-article:last-child  { border-bottom: none; padding-bottom: 0; }

.news-article.news-pinned {
    background: rgba(212,168,83,0.03);
    border: 1px solid rgba(212,168,83,0.15);
    border-radius: var(--radius);
    padding: 20px;
    margin-bottom: 8px;
}
.news-article.news-pinned:last-child { margin-bottom: 0; }

.news-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.news-pin {
    color: var(--gold);
    font-size: 13px;
    flex-shrink: 0;
}

.news-title {
    font-family: var(--font-heading);
    font-size: 1.1rem;
    color: var(--text-light);
    margin: 0;
    line-height: 1.3;
}

.news-meta {
    display: flex;
    gap: 16px;
    margin-bottom: 10px;
    font-size: 12px;
    color: var(--text-muted);
}
.news-meta i {
    margin-right: 4px;
    color: var(--gold-dark);
    font-size: 11px;
}

.news-body {
    font-size: 14px;
    color: var(--text);
    line-height: 1.7;
}

/* ─── Pagination ────────────────────────────────────────────── */
.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 20px 0 4px;
}

.pagination-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text);
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    text-decoration: none;
    transition: all var(--transition);
    cursor: pointer;
}
.pagination-link:hover {
    border-color: var(--gold);
    color: var(--gold);
    background: rgba(212,168,83,0.06);
}
.pagination-link.disabled {
    opacity: 0.35;
    pointer-events: none;
    cursor: default;
}

.pagination-info {
    font-size: 13px;
    color: var(--text-muted);
    white-space: nowrap;
}

/* ─── Feature Grid (Home highlights) ────────────────────────── */
.feature-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.feature-item {
    padding: 20px;
    background: var(--bg-surface);
    border-radius: var(--radius);
    border: 1px solid var(--border);
    transition: all var(--transition);
}
.feature-item:hover {
    border-color: var(--gold);
    transform: translateY(-2px);
    box-shadow: var(--glow-gold);
}

.feature-icon {
    font-size: 24px;
    color: var(--gold);
    margin-bottom: 10px;
}

.feature-item h3 {
    font-size: 0.95rem;
    margin-bottom: 6px;
    color: var(--text-light);
}

.feature-item p {
    font-size: 13px;
    color: var(--text-muted);
    line-height: 1.5;
}

/* ─── Features Page Layout ──────────────────────────────────── */
.features-layout {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 24px;
    align-items: start;
}

/* ── Sidebar Nav ── */
.features-nav {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    position: sticky;
    top: 90px;
}

.features-nav-header {
    padding: 14px 18px;
    font-family: var(--font-display);
    font-size: 13px;
    font-weight: 700;
    color: var(--gold);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    gap: 8px;
}
.features-nav-header i { font-size: 14px; }

.features-nav-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 18px;
    color: var(--text-muted);
    text-decoration: none;
    border-left: 3px solid transparent;
    transition: all var(--transition);
    cursor: pointer;
}
.features-nav-item > i {
    font-size: 16px;
    width: 20px;
    text-align: center;
    color: var(--text-muted);
    transition: color var(--transition);
}
.features-nav-item > div { line-height: 1.3; }
.features-nav-item strong {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    transition: color var(--transition);
}
.features-nav-item span {
    font-size: 11px;
    color: var(--text-muted);
}

.features-nav-item:hover {
    background: rgba(212, 168, 83, 0.04);
    border-left-color: rgba(212, 168, 83, 0.3);
}
.features-nav-item:hover > i,
.features-nav-item:hover strong { color: var(--gold); }

.features-nav-item.active {
    background: rgba(212, 168, 83, 0.08);
    border-left-color: var(--gold);
}
.features-nav-item.active > i { color: var(--gold); }
.features-nav-item.active strong { color: var(--gold); }

/* ── Mobile dropdown ── */
.features-mobile-select {
    display: none;
    margin-bottom: 20px;
}
.features-mobile-select select {
    width: 100%;
    padding: 12px 16px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text);
    font-size: 14px;
    font-family: var(--font-body);
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23d4a853' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
}
.features-mobile-select select:focus {
    outline: none;
    border-color: var(--gold);
    box-shadow: 0 0 0 2px rgba(212,168,83,0.15);
}

/* ── Content area ── */
.features-content {
    min-width: 0;
}

/* ── Panel (each tab) ── */
.features-panel {
    display: none;
}
.features-panel.active {
    display: block;
    animation: featureFadeIn 0.35s ease-out;
}

@keyframes featureFadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Panel header ── */
.features-panel-header {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 20px 24px;
    background: linear-gradient(135deg, rgba(212,168,83,0.12) 0%, rgba(212,168,83,0.03) 100%);
    border: 1px solid rgba(212,168,83,0.2);
    border-radius: var(--radius-lg);
    margin-bottom: 24px;
}
.features-panel-header > i {
    font-size: 28px;
    color: var(--gold);
}
.features-panel-header strong {
    display: block;
    font-size: 1.15rem;
    color: var(--text-light);
    font-family: var(--font-display);
}
.features-panel-header span {
    font-size: 13px;
    color: var(--text-muted);
}

/* ── Banner ── */
.features-banner {
    margin-bottom: 24px;
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--border);
}
.features-banner img {
    width: 100%;
    height: auto;
    display: block;
    /* opacity removed to prevent background showing through */
}

.features-banner {
    position: relative;
}
/* Overlay is only rendered when a .banner-text label is present inside the banner */
.features-banner.has-overlay::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.6); /* adjust for desired overlay darkness */
    z-index: 1;
    pointer-events: none;
}
.features-banner .banner-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: var(--gold);
    background: rgba(26, 24, 20, 0.65);
    padding: 1.2em 2.5em;
    border-radius: 18px;
    font-size: 1.5em;
    font-family: var(--font-heading);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-align: center;
    pointer-events: none;
    z-index: 2;
    box-shadow: 0 4px 32px 0 rgba(0,0,0,0.18);
    border: 2px solid var(--gold);
    text-shadow: 0 2px 12px rgba(0,0,0,0.45), 0 1px 0 #fff2;
    backdrop-filter: blur(1px);
    transition: background var(--transition), box-shadow var(--transition);
}

/* ── Logo entrance effect ── */
.logo-entrance {
    animation: logoFadeIn 1.2s cubic-bezier(.42,0,.58,1) 0.1s both;
}
@keyframes logoFadeIn {
    0%   { opacity: 0; transform: translateY(40px) scale(0.95); }
    60%  { opacity: 1; transform: translateY(-8px) scale(1.03); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* ── Section headings ── */
.features-heading {
    font-size: 1.05rem;
    font-family: var(--font-display);
    color: var(--gold);
    margin: 28px 0 16px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(212,168,83,0.15);
    display: flex;
    align-items: center;
    gap: 8px;
}
.features-heading i {
    font-size: 16px;
    opacity: 0.8;
}

/* ── Paragraph text ── */
.features-text {
    color: var(--text-muted);
    font-size: 14px;
    line-height: 1.7;
    margin-bottom: 20px;
}

/* ── Info list (icon + text rows) ── */
.info-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-bottom: 8px;
}
.info-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 16px;
    background: var(--bg-surface);
    border-radius: var(--radius);
    transition: background var(--transition);
}
.info-item:hover { background: rgba(212,168,83,0.24); }
.info-item > i {
    margin-top: 2px;
    font-size: 14px;
    width: 18px;
    text-align: center;
    flex-shrink: 0;
}
.info-item span { font-size: 14px; color: var(--text); line-height: 1.5; }

/* ── Highlight cards (feature grid inside panels) ── */
.highlight-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 16px;
    margin-bottom: 16px;
}
.highlight-cards-sm { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }

.highlight-card {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 20px 18px;
    text-align: center;
    transition: all var(--transition);
}
.highlight-card:hover {
    border-color: rgba(212,168,83,0.25);
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.2);
}
.highlight-card-icon {
    font-size: 28px;
    color: var(--gold);
    margin-bottom: 12px;
}
.highlight-card h4 {
    font-size: 14px;
    color: var(--text-light);
    margin-bottom: 6px;
    font-family: var(--font-display);
}
.highlight-card p {
    font-size: 13px;
    color: var(--text-muted);
    line-height: 1.5;
}

/* ── Rate cards ── */
.rate-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 16px;
    margin-bottom: 16px;
}
.rate-card {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: all var(--transition);
}
.rate-card:hover {
    border-color: rgba(212,168,83,0.25);
    box-shadow: 0 6px 20px rgba(0,0,0,0.15);
}
.rate-card-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 18px;
    background: rgba(212,168,83,0.06);
    border-bottom: 1px solid var(--border);
}
.rate-card-header i {
    font-size: 18px;
    color: var(--gold);
}
.rate-card-header h4 {
    font-size: 14px;
    color: var(--text-light);
    font-family: var(--font-display);
}
.rate-card ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.rate-card li {
    display: flex;
    justify-content: space-between;
    padding: 10px 18px;
    font-size: 13px;
    color: var(--text-muted);
    border-bottom: 1px solid rgba(255,255,255,0.03);
}
.rate-card li:last-child { border-bottom: none; }
.rate-card li strong { color: var(--gold); }

/* ── Compare columns (Silver/Gold rune) ── */
.compare-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 16px;
}
.compare-col {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: all var(--transition);
}
.compare-col:hover { border-color: rgba(212,168,83,0.2); }
.compare-col-highlight {
    border-color: rgba(212,168,83,0.3);
    box-shadow: 0 0 20px rgba(212,168,83,0.06);
}
.compare-col-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border);
    position: relative;
}
.compare-col-header i { font-size: 20px; }
.compare-col-header h4 {
    font-size: 15px;
    color: var(--text-light);
    font-family: var(--font-display);
}
.compare-col-silver { background: rgba(192,192,192,0.06); }
.compare-col-silver i { color: #c0c0c0; }
.compare-col-gold { background: rgba(212,168,83,0.08); }
.compare-col-gold i { color: var(--gold); }

.compare-badge {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    background: var(--gold);
    color: var(--bg-dark);
    font-size: 10px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.compare-col ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.compare-col li {
    display: flex;
    justify-content: space-between;
    padding: 10px 20px;
    font-size: 13px;
    color: var(--text-muted);
    border-bottom: 1px solid rgba(255,255,255,0.03);
}
.compare-col li:last-child { border-bottom: none; }
.compare-col li strong { color: var(--gold); }
.compare-col li.compare-feature {
    justify-content: flex-start;
    gap: 8px;
    color: var(--text);
    font-size: 13px;
}
.compare-col li.compare-feature i { font-size: 12px; }

/* ── Boss grid ── */
.boss-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 14px;
    margin-bottom: 16px;
}
.boss-card {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 18px 16px;
    text-align: center;
    /* Only transition the properties we actually animate to avoid layout/paint snaps */
    transition: transform 50ms var(--transition), box-shadow 50ms var(--transition), border-color 50ms var(--transition);
    will-change: transform, box-shadow;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}
/* Boss card background variant (uses an inline background-image or reusable filenames)
   Images should be optimized (<=200kb). Overlay keeps text readable. */
.boss-card.boss-bg {
    position: relative;
    color: var(--text-light);
    background-color: transparent; /* allow bg image to show through */
    border: 1px solid rgba(0,0,0,0.2);
    padding: 18px 16px;
    overflow: hidden;
}
.boss-card.boss-bg::before {
    content: '';
    position: absolute;
    inset: 0;
    /* The element itself provides the background-image (inline style). This pseudo-element
       is an overlay used to dim the photo so text stays readable. We animate its opacity
       so the image can be slightly visible by default and reveal more on hover. */
    background: rgba(0,0,0,0.60);
    opacity: 1;
    transition: opacity 50ms var(--transition), background 50ms var(--transition);
    pointer-events: none;
}

/* Reveal the image more on hover: reduce the dark overlay so the photo becomes clearer */
.boss-card.boss-bg:hover::before {
    opacity: 0.18;
}
.boss-card.boss-bg > * { position: relative; z-index: 1; }
.boss-card.boss-bg.has-image { background-size: cover; background-position: center; background-repeat: no-repeat; }
.boss-card:hover {
    border-color: rgba(212,168,83,0.25);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0,0,0,0.2);
}
.boss-card-icon {
    font-size: 26px;
    color: var(--gold);
    margin-bottom: 10px;
}
/* Stacked media + body layout for boss cards inside the boss grid
   This keeps the image on top and places text in a separate content area below.
   Scoped under .boss-grid so other .boss-card uses are unaffected. */
.boss-grid .boss-card {
    display: flex;
    flex-direction: column;
    padding: 0;
    text-align: left;
    overflow: hidden;
    /* keep the card surface color so the body and media appear as one unit */
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}
.boss-grid .boss-card-media {
    position: relative;
    height: 140px;
    transition: transform 50ms var(--transition);
    /* round the top corners so media matches the card radius */
    border-top-left-radius: var(--radius);
    border-top-right-radius: var(--radius);
    overflow: hidden;
    will-change: transform, opacity;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}
.boss-grid .boss-card-media::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.60);
    opacity: 1;
    transition: opacity 50ms var(--transition), background 50ms var(--transition);
    pointer-events: none;
}
.boss-grid .boss-card-media img {
    display: block;
    width: 100%;
    height: 100%;
    /* Fill the media area while prioritizing the top of the image (so heads stay visible).
       cover will crop where necessary but keeps the area filled. */
    object-fit: cover;
    object-position: center top;
    transition: transform 50ms var(--transition);
    will-change: transform;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}
.boss-grid .boss-card-body {
    /* body sits inside the card; no extra border so it fills to the bottom */
    padding: 14px 16px;
    color: var(--text);
    /* Keep all bodies visually consistent so cards in the grid align neatly. */
    min-height: 100px; /* tuned slightly smaller to match visual */
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}
.boss-grid .boss-card .boss-card-icon { margin-bottom: 8px; }
.boss-grid .boss-card h5 { margin: 0 0 8px 0; color: var(--text-heading); }
.boss-grid .boss-card .boss-card-stats { display:flex; gap:12px; font-size:0.95rem; color:var(--text-muted); }
.boss-grid .boss-card .boss-card-note { margin-top:8px; color:var(--text-muted); font-size:0.9rem; }

.boss-grid .boss-card:hover .boss-card-media::before { opacity: 0.18; }
.boss-grid .boss-card:hover .boss-card-media img { transform: scale(1.02); }
.boss-grid .boss-card:hover {
    /* subtle gold glow + elevation when hovering boss cards */
    box-shadow: 0 6px 16px rgba(0,0,0,0.2), 0 0 20px rgba(212,168,83,0.10);
    border-color: rgba(212,168,83,0.28);
}
.boss-card h5 {
    font-size: 14px;
    font-family: var(--font-display);
    color: var(--text-light);
    margin-bottom: 8px;
}
.boss-card-stats {
    display: flex;
    flex-direction: column;
    gap: 3px;
    font-size: 12px;
    color: var(--text-muted);
}
.boss-card-stats strong { color: var(--text); }
.boss-card-note {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 6px;
    opacity: 0.7;
}

/* ── Icon grid (races) ── */
.icon-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: 14px;
    margin-bottom: 16px;
}
.icon-grid-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 18px 12px;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    transition: all var(--transition);
}
.icon-grid-item:hover {
    border-color: rgba(212,168,83,0.25);
    transform: translateY(-2px);
}
.icon-grid-circle {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(212,168,83,0.1);
    border: 1px solid rgba(212,168,83,0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: var(--gold);
}
.icon-grid-item span {
    font-size: 13px;
    color: var(--text);
    font-weight: 500;
}

/* ── Timeline (class transfers) ── */
.timeline {
    position: relative;
    padding-left: 36px;
    margin-bottom: 24px;
}
.timeline::before {
    content: '';
    position: absolute;
    left: 15px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: linear-gradient(180deg, var(--gold) 0%, rgba(212,168,83,0.15) 100%);
    border-radius: 2px;
}
.timeline-item {
    position: relative;
    padding: 0 0 28px 24px;
}
.timeline-item:last-child { padding-bottom: 0; }
.timeline-marker {
    position: absolute;
    left: -28px;
    top: 2px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--bg-card);
    border: 2px solid var(--gold);
    color: var(--gold);
    font-size: 11px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
}
.timeline-body h4 {
    font-size: 14px;
    color: var(--text-light);
    margin-bottom: 4px;
    font-family: var(--font-display);
}
.timeline-body p {
    font-size: 13px;
    color: var(--text-muted);
    line-height: 1.5;
}

/* ── Notices / Alerts ── */
.features-notice {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 18px;
    background: rgba(212,168,83,0.06);
    border: 1px solid rgba(212,168,83,0.15);
    border-left: 3px solid var(--gold);
    border-radius: var(--radius);
    margin: 16px 0;
    font-size: 13px;
    color: var(--text);
    line-height: 1.6;
}
.features-notice > i {
    color: var(--gold);
    font-size: 16px;
    margin-top: 2px;
    flex-shrink: 0;
}
.features-notice-info {
    background: rgba(59,130,246,0.06);
    border-color: rgba(59,130,246,0.15);
    border-left-color: #3b82f6;
}
.features-notice-info > i { color: #3b82f6; }

/* ─── Zone Cards (Boosted Zones) ────────────────────────────── */
.zone-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 20px;
    margin-top: 20px;
}
.zone-card {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    transition: border-color var(--transition), box-shadow var(--transition);
}
.zone-card:hover {
    border-color: var(--gold);
    box-shadow: 0 4px 24px rgba(212,175,55,0.10);
}
.zone-card-image {
    position: relative;
    width: 100%;
    height: 200px;
    overflow: hidden;
    background: var(--bg-dark);
}
.zone-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}
.zone-card:hover .zone-card-image img {
    transform: scale(1.05);
}
.zone-card-body {
    padding: 16px 18px 18px;
}
.zone-card-body h4 {
    font-family: var(--font-heading);
    font-size: 16px;
    color: var(--gold);
    margin: 0 0 8px;
}
.zone-card-body p {
    font-size: 13px;
    color: var(--text-muted);
    line-height: 1.6;
    margin: 0 0 12px;
}
.zone-card-meta {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}
.zone-tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    font-size: 11px;
    font-weight: 600;
    border-radius: 4px;
    background: rgba(212,175,55,0.08);
    color: var(--gold);
    border: 1px solid rgba(212,175,55,0.15);
    letter-spacing: 0.3px;
}
.zone-tag i {
    font-size: 10px;
}
.zone-card .ranking-table {
    margin: 0;
    font-size: 12px;
}
.zone-card .ranking-table th {
    padding: 6px 10px;
    font-size: 11px;
}
.zone-card .ranking-table td {
    padding: 5px 10px;
    font-size: 12px;
}

@media (max-width: 768px) {
    .zone-cards-grid {
        grid-template-columns: 1fr;
    }
    .zone-card-image {
        height: 180px;
    }
}
@media (max-width: 480px) {
    .zone-card-image {
        height: 150px;
    }
    .zone-card-body {
        padding: 12px 14px 14px;
    }
}

/* ─── Vote Banners (Home) ───────────────────────────────────── */
.vote-banners {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 10px;
}

.vote-banner {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text);
    font-size: 13px;
    font-weight: 500;
    transition: all var(--transition);
    text-decoration: none;
}
.vote-banner:hover {
    border-color: var(--gold);
    color: var(--gold);
    background: rgba(212,168,83,0.06);
    transform: translateY(-1px);
}
.vote-banner i { color: var(--gold); font-size: 12px; }

/* ═══════════════════════════════════════════════════════════════
   SERVER STATUS WIDGET
   ═══════════════════════════════════════════════════════════════ */

.server-status-widget {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.ssw-header {
    padding: 14px 18px;
    border-bottom: 1px solid var(--border);
    background: rgba(255,255,255,0.015);
}
.ssw-header h3 {
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    gap: 8px;
}
.ssw-header h3 i { color: var(--gold); }

.ssw-body { padding: 4px 0; }

.ssw-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 18px;
    font-size: 14px;
    border-bottom: 1px solid rgba(255,255,255,0.03);
}
.ssw-item:last-child { border-bottom: none; }

.ssw-value {
    font-weight: 700;
    color: var(--text-light);
    font-variant-numeric: tabular-nums;
}

/* Badges */
.ssw-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 50px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.3px;
}

.ssw-online  { background: rgba(46,204,113,0.15);  color: var(--green);  border: 1px solid rgba(46,204,113,0.3); }
.ssw-offline { background: rgba(231,76,60,0.15);   color: var(--red);    border: 1px solid rgba(231,76,60,0.3); }
.ssw-standby { background: rgba(255,255,255,0.06); color: var(--text-muted); border: 1px solid var(--border); }

/* ═══════════════════════════════════════════════════════════════
   PANEL PAGES
   ═══════════════════════════════════════════════════════════════ */

/* Panel Navigation */
.panel-nav {
    display: flex;
    gap: 6px;
    margin-bottom: 24px;
    padding: 8px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.panel-nav-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 9px 16px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-muted);
    border-radius: var(--radius);
    transition: all var(--transition);
    white-space: nowrap;
    text-decoration: none;
}
.panel-nav-item:hover {
    color: var(--text);
    background: rgba(255,255,255,0.04);
}
.panel-nav-item.active {
    color: var(--gold);
    background: rgba(212,168,83,0.1);
    border: 1px solid rgba(212,168,83,0.2);
}
.panel-nav-item i { font-size: 13px; }

/* Panel Grid */
.panel-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 20px;
}

.span-full { grid-column: 1 / -1; }

/* Panel Stat Card */
.panel-stat-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    transition: all var(--transition);
}
.panel-stat-card:hover {
    border-color: rgba(212,168,83,0.2);
    box-shadow: var(--glow-gold);
}

.psc-icon {
    font-size: 28px;
    color: var(--gold);
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(212,168,83,0.08);
    border-radius: var(--radius);
    flex-shrink: 0;
}

.psc-value {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-light);
}

.psc-label {
    font-size: 13px;
    color: var(--text-muted);
    margin-top: 2px;
}

/* ─── Vote Sites Grid ──────────────────────────────────────── */
.vote-sites-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 12px;
}

.vote-site-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    transition: all var(--transition);
}
.vote-site-card.voted {
    border-color: rgba(46,204,113,0.25);
    background: rgba(46,204,113,0.04);
}
.vote-site-card.available {
    border-color: rgba(212,168,83,0.3);
    background: rgba(212,168,83,0.04);
    box-shadow: var(--glow-gold);
}
.vote-site-card.standby {
    opacity: 0.5;
}

.vsc-icon { font-size: 22px; flex-shrink: 0; }
.vsc-name { flex: 1; font-weight: 600; font-size: 14px; color: var(--text-light); }
.vsc-status { flex-shrink: 0; }

/* ─── Vote Info ─────────────────────────────────────────────── */
.vote-info p { color: var(--text-muted); font-size: 14px; line-height: 1.7; }

/* ─── Points Display ────────────────────────────────────────── */
.points-display {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 18px;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 15px;
}

/* ─── Exchange Form ─────────────────────────────────────────── */
.exchange-form { margin-top: 16px; }

.form-row {
    display: flex;
    gap: 12px;
    align-items: flex-end;
    flex-wrap: wrap;
}

.form-group {
    flex: 1;
    min-width: 150px;
}

.form-group-btn {
    flex: 0 0 auto;
    min-width: auto;
    padding-bottom: 1px;
}

.form-group label {
    display: block;
    margin-bottom: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.form-control {
    width: 100%;
    padding: 9px 14px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text);
    font-size: 14px;
    font-family: var(--font-body);
    outline: none;
    transition: all var(--transition);
}
.form-control:focus {
    border-color: var(--gold);
    box-shadow: 0 0 0 3px rgba(212,168,83,0.1);
}

.form-control-sm { padding: 6px 10px; font-size: 13px; }
.form-control-lg { padding: 12px 16px; font-size: 16px; }

select.form-control {
    appearance: none;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%237a8299'%3E%3Cpath d='M6 8.5 0.5 3h11z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 32px;
}

textarea.form-control, .news-form textarea {
    width: 100%;
    padding: 10px 14px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text);
    font-size: 14px;
    font-family: var(--font-body);
    outline: none;
    resize: vertical;
    min-height: 100px;
    transition: all var(--transition);
}
textarea.form-control:focus, .news-form textarea:focus {
    border-color: var(--gold);
    box-shadow: 0 0 0 3px rgba(212,168,83,0.1);
}

.news-form input[type="text"] {
    width: 100%;
    padding: 9px 14px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text);
    font-size: 14px;
    font-family: var(--font-body);
    outline: none;
    transition: all var(--transition);
}
.news-form input[type="text"]:focus {
    border-color: var(--gold);
    box-shadow: 0 0 0 3px rgba(212,168,83,0.1);
}

.checkbox-label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 14px;
    color: var(--text);
    user-select: none;
}
.checkbox-label input[type="checkbox"] {
    accent-color: var(--gold);
    width: 16px;
    height: 16px;
    cursor: pointer;
}
.checkbox-label span {
    display: flex;
    align-items: center;
    gap: 6px;
}
.checkbox-label span i { color: var(--gold); font-size: 13px; }

/* ─── Donate Layout ─────────────────────────────────────────── */
.donate-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    align-items: start;
}

.donate-rate {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    background: rgba(212,168,83,0.06);
    border: 1px solid rgba(212,168,83,0.15);
    border-radius: var(--radius);
    font-size: 14px;
    margin-top: 12px;
}
.donate-rate i { font-size: 24px; color: var(--gold); }

.quick-amounts {
    display: flex;
    gap: 8px;
    margin-top: 12px;
    flex-wrap: wrap;
}

/* ─── Alerts ────────────────────────────────────────────────── */
.alert {
    padding: 14px 18px;
    border-radius: var(--radius);
    font-size: 14px;
    line-height: 1.5;
    border: 1px solid transparent;
}
.alert-success { background: rgba(46,204,113,0.1);  border-color: rgba(46,204,113,0.25); color: #6aed9a; }
.alert-warning { background: rgba(230,126,34,0.1);  border-color: rgba(230,126,34,0.25); color: #f4a460; }
.alert-danger  { background: rgba(231,76,60,0.1);   border-color: rgba(231,76,60,0.25);  color: #f08c82; }
.alert i { margin-right: 6px; }

/* ─── Empty State ───────────────────────────────────────────── */
.empty-state {
    text-align: center;
    padding: 40px 20px;
    color: var(--text-muted);
}
.empty-state i {
    font-size: 40px;
    color: var(--border-light);
    margin-bottom: 14px;
    display: block;
}
.empty-state p { font-size: 14px; max-width: 360px; margin: 0 auto; line-height: 1.6; }
.empty-state a { color: var(--gold); }

/* ═══════════════════════════════════════════════════════════════
   STATS PAGE
   ═══════════════════════════════════════════════════════════════ */

.stats-tabs {
    display: flex;
    gap: 6px;
    margin-bottom: 24px;
    padding: 8px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.stats-tab {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 9px 14px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-muted);
    border-radius: var(--radius);
    transition: all var(--transition);
    white-space: nowrap;
    text-decoration: none;
}
.stats-tab:hover { color: var(--text); background: rgba(255,255,255,0.04); }
.stats-tab.active {
    color: var(--gold);
    background: rgba(212,168,83,0.1);
    border: 1px solid rgba(212,168,83,0.2);
}
.stats-tab i { font-size: 13px; }
.stats-tab span { display: inline; }

/* ═══════════════════════════════════════════════════════════════
   RAID BOSS PAGE
   ═══════════════════════════════════════════════════════════════ */

.grand-boss-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 14px;
}

.grand-boss-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    transition: all var(--transition);
}
.grand-boss-card:hover {
    border-color: var(--gold);
    transform: translateY(-2px);
    box-shadow: var(--glow-gold);
}

.grand-boss-card.boss-alive { border-left: 3px solid var(--green); }
.grand-boss-card.boss-dead  { border-left: 3px solid var(--red); }

.gbc-status { font-size: 22px; flex-shrink: 0; }

.gbc-info { flex: 1; }
.gbc-info h3 { font-size: 0.95rem; margin-bottom: 2px; color: var(--text-light); }
.gbc-id { font-size: 12px; color: var(--text-muted); }

.gbc-badge {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    flex-shrink: 0;
}

.gbc-respawn {
    font-size: 11px;
    color: var(--text-muted);
    white-space: nowrap;
}

/* Raid table search */
.raid-table tbody tr.hidden-row { display: none; }

/* ═══════════════════════════════════════════════════════════════
   HOW TO CONNECT PAGE
   ═══════════════════════════════════════════════════════════════ */

.steps-container {
    max-width: 700px;
    margin: 0 auto;
}

.step {
    display: flex;
    gap: 20px;
    padding: 24px 0;
    border-bottom: 1px solid var(--border);
    position: relative;
}
.step:last-child { border-bottom: none; }

/* Vertical connector line between steps */
.steps-container .step:not(:last-child)::after {
    content: '';
    position: absolute;
    left: 21px;
    top: 68px;
    bottom: -1px;
    width: 2px;
    background: linear-gradient(to bottom, var(--gold), transparent);
    opacity: 0.35;
}

.step-number {
    width: 44px;
    height: 44px;
    background: rgba(212,168,83,0.1);
    border: 2px solid var(--gold);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-heading);
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--gold);
    flex-shrink: 0;
    position: relative;
    z-index: 1;
}

.step-content h3 {
    font-size: 1rem;
    margin-bottom: 6px;
    color: var(--text-light);
}

.step-content p {
    font-size: 14px;
    color: var(--text-muted);
    line-height: 1.6;
}

/* File meta info line */
.htc-file-meta {
    font-size: 12px;
    color: var(--text-muted);
    margin: -2px 0 12px;
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}
.htc-file-meta i { color: var(--gold); font-size: 11px; }

/* Mirror button provider accents */
.htc-mirror {
    position: relative;
    border-left: 3px solid transparent !important;
    padding-left: 14px !important;
}
.htc-google { border-left-color: #4285F4 !important; }
.htc-mega   { border-left-color: #D9272E !important; }
.htc-yandex { border-left-color: #FFCC00 !important; }

/* Connection Details Table */
.connection-details {
    margin-top: 30px;
}

.connection-details table {
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
}

/* ═══════════════════════════════════════════════════════════════
   CONTACT PAGE
   ═══════════════════════════════════════════════════════════════ */

.contact-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 20px;
    max-width: 860px;
    margin: 0 auto;
}

.contact-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 30px 24px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    transition: all var(--transition);
}
.contact-card:hover {
    border-color: var(--gold);
    transform: translateY(-3px);
    box-shadow: var(--glow-card), var(--glow-gold);
}

.contact-card-icon {
    font-size: 36px;
    color: var(--gold);
    margin-bottom: 14px;
}

.contact-card h3 {
    font-size: 1rem;
    margin-bottom: 6px;
}

.contact-card p, .contact-card a {
    font-size: 14px;
    color: var(--text-muted);
}

/* ═══════════════════════════════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════════════════════════════ */

.site-footer {
    position: relative;
    background: var(--bg-dark);
    border-top: 1px solid var(--border);
    padding-top: 20px;
    margin-top: auto;
}

.footer-wave {
    position: absolute;
    top: -40px;
    left: 0;
    right: 0;
    height: 40px;
    color: var(--bg-dark);
    overflow: hidden;
    pointer-events: none;
}
.footer-wave svg { width: 100%; height: 100%; display: block; }

.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 30px;
    padding: 30px 0;
}

.footer-col h4 {
    font-size: 0.95rem;
    margin-bottom: 14px;
    color: var(--text-light);
}
.footer-col h4 .logo-prefix { color: var(--gold); }
.footer-col h4 .logo-name { color: var(--text-light); }

.footer-col p {
    font-size: 13px;
    color: var(--text-muted);
    line-height: 1.7;
}

.footer-col ul { list-style: none; }
.footer-col ul li { margin-bottom: 8px; }
.footer-col ul li a {
    color: var(--text-muted);
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: color var(--transition);
    text-decoration: none;
}
.footer-col ul li a:hover { color: var(--gold); }
.footer-col ul li a i { width: 16px; text-align: center; }

.footer-bottom {
    text-align: center;
    padding: 16px 0;
    border-top: 1px solid var(--border);
    font-size: 12px;
    color: var(--text-muted);
}

/* ═══════════════════════════════════════════════════════════════
   PARTICLES (canvas-based floating dots on hero)
   ═══════════════════════════════════════════════════════════════ */

.hero-particles canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

/* ═══════════════════════════════════════════════════════════════
   SCROLLBAR
   ═══════════════════════════════════════════════════════════════ */

::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--bg-darkest); }
::-webkit-scrollbar-thumb { background: var(--border-light); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--gold-dark); }

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 1024px) {
    .home-grid-3col {
        grid-template-columns: 1fr 260px;
    }
    .home-sidebar-left {
        grid-column: 1 / -1;
        order: -1;
    }
    /* Make vote links horizontal on tablet */
    .vote-links {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 8px;
    }
    .vote-link { flex: 0 0 auto; }
    .highlight-list { flex-direction: row; flex-wrap: wrap; gap: 6px 18px; }

    .donate-layout {
        grid-template-columns: 1fr;
    }

    .footer-grid {
        grid-template-columns: 1fr 1fr;
    }

    /* Features sidebar narrower on tablet */
    .features-layout { grid-template-columns: 240px 1fr; gap: 16px; }
    .features-nav-item { padding: 10px 14px; }
    .features-nav-item span { display: none; }
}

@media (max-width: 768px) {
    /* Home Grid collapses to single column */
    .home-grid-3col {
        grid-template-columns: 1fr;
    }
    .home-sidebar-left { grid-column: auto; order: 2; }
    .home-center { order: 1; }
    .home-sidebar-right { order: 3; }

    /* Header */
    .mobile-menu-toggle { display: block; }

    .main-nav {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: var(--bg-dark);
        border-bottom: 1px solid var(--border);
        box-shadow: 0 10px 30px rgba(0,0,0,0.3);
        z-index: 100;
    }
    .main-nav.open { display: block; }
    .main-nav ul { flex-direction: column; gap: 0; padding: 8px; }
    .nav-link { padding: 12px 16px; border-radius: 0; }

    /* User Nav / Login Form */
    .header-top-inner { justify-content: center; gap: 8px; }
    .user-nav { flex-wrap: wrap; justify-content: center; }
    .login-form { width: 100%; justify-content: center; }
    .login-fields { flex-wrap: wrap; justify-content: center; width: 100%; gap: 6px; }
    .login-fields input { width: 100%; max-width: 280px; }

    /* Hero */
    .hero { padding: 50px 0 40px; }
    .hero-stats { gap: 10px; }
    .hero-stat { min-width: 120px; height: 110px; }
    .hero-stat-value { font-size: 0.7rem; }

    /* Feature Grid */
    .feature-grid { grid-template-columns: 1fr; }

    /* Tables */
    .ranking-table { font-size: 13px; }
    .ranking-table thead th { padding: 8px 10px; }
    .ranking-table td { padding: 8px 10px; }

    /* Panel */
    .panel-nav { gap: 4px; padding: 6px; }
    .panel-nav-item { padding: 8px 12px; font-size: 12px; }

    .panel-grid { grid-template-columns: 1fr; }

    /* Vote */
    .vote-sites-grid { grid-template-columns: 1fr; }

    /* Form */
    .form-row { flex-direction: column; }
    .form-group { min-width: 100%; }
    .form-group-btn { width: 100%; }
    .form-group-btn .btn { width: 100%; justify-content: center; }

    /* Stats */
    .stats-tabs { gap: 4px; padding: 6px; }
    .stats-tab { padding: 7px 10px; font-size: 12px; }
    .stats-tab span { display: none; }

    /* Grand bosses */
    .grand-boss-grid { grid-template-columns: 1fr; }

    /* Contact */
    .contact-grid { grid-template-columns: 1fr; }

    /* Features Page */
    .features-layout { grid-template-columns: 1fr; }
    .features-nav { display: none; }
    .features-mobile-select { display: block; }
    .compare-columns { grid-template-columns: 1fr; }
    .rate-cards { grid-template-columns: 1fr; }
    .boss-grid { grid-template-columns: repeat(2, 1fr); }
    .icon-grid { grid-template-columns: repeat(3, 1fr); }
    .highlight-cards { grid-template-columns: repeat(2, 1fr); }

    /* Footer */
    .footer-grid { grid-template-columns: 1fr; gap: 20px; }
}

@media (max-width: 480px) {
    .container { padding: 0 14px; }

    .hero-title { font-size: 2.5rem; }
    .hero-cta { flex-direction: column; align-items: center; }
    .hero-cta .btn { width: 100%; justify-content: center; }

    .hero-stats { flex-direction: column; align-items: center; }
    .hero-stat { width: 100%; max-width: 300px; height: 160px; transform-origin: center center; }

    .page-hero h1 { font-size: 1.5rem; }

    .vote-banners { grid-template-columns: 1fr; }

    .quick-amounts { justify-content: center; }

    .boss-grid { grid-template-columns: 1fr; }
    .icon-grid { grid-template-columns: repeat(2, 1fr); }
    .highlight-cards { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════
   ANIMATIONS
   ═══════════════════════════════════════════════════════════════ */

@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

.status-dot.online { animation: pulse 2s ease-in-out infinite; }

/* Fade-in for cards */
.card, .feature-item, .panel-stat-card, .vote-site-card, .grand-boss-card, .contact-card,
.highlight-card, .boss-card, .rate-card, .icon-grid-item {
    animation: fadeInUp 0.5s ease-out both;
}

/* Stagger highlight cards */
.highlight-cards .highlight-card:nth-child(1) { animation-delay: 0.05s; }
.highlight-cards .highlight-card:nth-child(2) { animation-delay: 0.10s; }
.highlight-cards .highlight-card:nth-child(3) { animation-delay: 0.15s; }
.highlight-cards .highlight-card:nth-child(4) { animation-delay: 0.20s; }
.highlight-cards .highlight-card:nth-child(5) { animation-delay: 0.25s; }
.highlight-cards .highlight-card:nth-child(6) { animation-delay: 0.30s; }
.highlight-cards .highlight-card:nth-child(7) { animation-delay: 0.35s; }
.highlight-cards .highlight-card:nth-child(8) { animation-delay: 0.40s; }

.vote-sites-grid .vote-site-card:nth-child(1) { animation-delay: 0.05s; }
.vote-sites-grid .vote-site-card:nth-child(2) { animation-delay: 0.10s; }
.vote-sites-grid .vote-site-card:nth-child(3) { animation-delay: 0.15s; }
.vote-sites-grid .vote-site-card:nth-child(4) { animation-delay: 0.20s; }
.vote-sites-grid .vote-site-card:nth-child(5) { animation-delay: 0.25s; }
.vote-sites-grid .vote-site-card:nth-child(6) { animation-delay: 0.30s; }
.vote-sites-grid .vote-site-card:nth-child(7) { animation-delay: 0.35s; }
.vote-sites-grid .vote-site-card:nth-child(8) { animation-delay: 0.40s; }

.hero-stat {
    animation: fadeInUp 0.6s ease-out both;
}
.hero-stats .hero-stat:nth-child(1) { animation-delay: 0.1s; }
.hero-stats .hero-stat:nth-child(2) { animation-delay: 0.2s; }
.hero-stats .hero-stat:nth-child(3) { animation-delay: 0.3s; }
.hero-stats .hero-stat:nth-child(4) { animation-delay: 0.4s; }

/* ═══════════════════════════════════════════════════════════════
   CODE / MISC
   ═══════════════════════════════════════════════════════════════ */

code {
    font-family: 'Fira Code', 'Consolas', monospace;
    font-size: 12px;
    background: var(--bg-surface);
    padding: 2px 6px;
    border-radius: 3px;
    color: var(--gold);
}

/* ─── Instances popover (non-destructive, appended) ─── */
.instances-table { /* instances table container (no-op placeholder kept intentionally) */ }
.instance-name { position: relative; display: inline-block; cursor: pointer; color: inherit; }
.instance-name:focus { outline: none; }
.instance-name .instance-popover { display: none; position: absolute; left: 110%; top: 0; width: 360px; background: var(--bg-surface, #0f1724); border: 1px solid var(--border, rgba(255,255,255,0.06)); box-shadow: 0 8px 24px rgba(0,0,0,0.32); padding: 12px; z-index: 60; border-radius: 6px; }
.instance-name:hover .instance-popover { display: block; }
.instance-popover .popover-content { display: flex; gap: 12px; align-items: flex-start; }
.popover-list { flex: 1 1 auto; min-width: 150px; }
.popover-list strong { display: block; margin-bottom: 6px; color: var(--gold, #d4a853); }
.popover-list ul { margin: 0; padding-left: 18px; font-size: 0.95rem; }
.popover-image { flex: 0 0 120px; max-width: 120px; }
.popover-image img { width: 120px; height: 80px; object-fit: cover; border-radius: 4px; display: block; }
.instance-popover::before { content: ""; position: absolute; left: -8px; top: 12px; width: 0; height: 0; border-top: 8px solid transparent; border-bottom: 8px solid transparent; border-right: 8px solid var(--bg-surface, #0f1724); }

@media (max-width: 880px) {
    .instance-name .instance-popover { left: 0; top: 110%; width: calc(100vw - 40px); }
    .instance-popover::before { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .instance-name .instance-popover { transition: none !important; }
}

/* ─── Command List (NPC & Commands panel) ─── */
.cmd-groups {
    display: flex;
    flex-direction: column;
    gap: 28px;
}
.cmd-group-label {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-heading);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(212,168,83,0.2);
}
.cmd-group-label i { font-size: 1rem; }
.cmd-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.cmd-row {
    display: grid;
    grid-template-columns: 220px 1fr;
    align-items: baseline;
    gap: 16px;
    padding: 10px 14px;
    border-radius: 6px;
    background: rgba(255,255,255,0.02);
    border: 1px solid transparent;
    transition: background var(--transition), border-color var(--transition);
}
.cmd-row:hover {
    background: rgba(212,168,83,0.05);
    border-color: rgba(212,168,83,0.15);
}
.cmd-syntax {
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--gold);
    background: rgba(212,168,83,0.10);
    border: 1px solid rgba(212,168,83,0.22);
    border-radius: 4px;
    padding: 3px 9px;
    white-space: nowrap;
    display: inline-block;
}
.cmd-desc {
    font-size: 0.93rem;
    color: var(--text-muted);
    line-height: 1.5;
}
.cmd-desc strong { color: var(--text); }
@media (max-width: 600px) {
    .cmd-row {
        grid-template-columns: 1fr;
        gap: 6px;
    }
}