:root {
    --primary: #b8a9f8;        /* soft lavender */
    --secondary: #93d9f5;      /* baby blue */
    --accent: #f9a8d4;         /* cotton candy pink */
    --mint: #a8f0d8;           /* mint green */
    --peach: #ffd6b3;          /* soft peach */
    --dark: #0e0c1a;           /* deep dark purple-navy */
    --card: #16122a;           /* dark card */
    --card-hover: #1e1938;     /* card hover */
    --text: #f0eeff;           /* near white with lavender tint */
    --muted: #8b82b8;          /* muted lavender */
    --glow: rgba(184, 169, 248, 0.18);
    --glow-accent: rgba(147, 217, 245, 0.15);
    --glow-pink: rgba(249, 168, 212, 0.15);
}

/* ── LIGHT MODE OVERRIDES ──────────────────────────────────────────────── */
body.light-mode {
    --primary: #7c5fcf;
    --secondary: #3ba8d8;
    --accent: #d9589a;
    --mint: #2aac7a;
    --peach: #d4803a;
    --dark: #f0eeff;
    --card: #ffffff;
    --card-hover: #f5f2ff;
    --text: #1a1535;
    --muted: #6b5fa0;
    --glow: rgba(124, 95, 207, 0.12);
    --glow-accent: rgba(59, 168, 216, 0.10);
    --glow-pink: rgba(217, 88, 154, 0.10);
}

body.light-mode {
    background-color: var(--dark);
    color: var(--text);
}

body.light-mode::before {
    background:
        radial-gradient(ellipse 70% 55% at 15% 15%, rgba(124, 95, 207, 0.07) 0%, transparent 65%),
        radial-gradient(ellipse 60% 50% at 85% 20%, rgba(59, 168, 216, 0.06) 0%, transparent 60%),
        radial-gradient(ellipse 50% 45% at 50% 80%, rgba(217, 88, 154, 0.05) 0%, transparent 60%),
        radial-gradient(ellipse 40% 35% at 80% 75%, rgba(42, 172, 122, 0.04) 0%, transparent 55%);
}

body.light-mode::after {
    background:
        radial-gradient(circle 300px at 10% 60%, rgba(217, 88, 154, 0.04) 0%, transparent 70%),
        radial-gradient(circle 250px at 90% 40%, rgba(124, 95, 207, 0.05) 0%, transparent 70%),
        radial-gradient(circle 200px at 50% 30%, rgba(59, 168, 216, 0.04) 0%, transparent 70%);
}

body.light-mode nav {
    background: rgba(240, 238, 255, 0.9);
    border-bottom: 1px solid rgba(124, 95, 207, 0.15);
}

body.light-mode nav a { color: var(--text); }
body.light-mode nav a:hover { color: var(--primary); }

body.light-mode header {
    background: linear-gradient(135deg, rgba(240, 238, 255, 0.88) 0%, rgba(220, 210, 255, 0.7) 50%, rgba(240, 238, 255, 0.92) 100%), url('https://images.unsplash.com/photo-1511512578047-dfb367046420?q=80&w=2070&auto=format&fit=crop') center/cover;
}

body.light-mode header::after {
    background: linear-gradient(transparent, var(--dark));
}

body.light-mode .featured-container {
    background: linear-gradient(135deg, #ffffff 0%, #f5f0ff 100%);
    border-color: rgba(124, 95, 207, 0.22);
}

body.light-mode .game-card {
    background: var(--card);
    border-color: rgba(59, 168, 216, 0.15);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

body.light-mode .game-card:hover {
    border-color: rgba(124, 95, 207, 0.4);
    box-shadow:
        0 24px 60px rgba(124, 95, 207, 0.12),
        0 0 0 1px rgba(124, 95, 207, 0.18),
        0 0 40px rgba(217, 88, 154, 0.05);
}

body.light-mode #gameSearch,
body.light-mode #webplaySearch {
    background: var(--card);
    color: var(--text);
    border-color: rgba(124, 95, 207, 0.2);
}

body.light-mode #gameSearch:focus,
body.light-mode #webplaySearch:focus {
    border-color: var(--primary);
    background: var(--card-hover);
}

body.light-mode #gameSearch::placeholder,
body.light-mode #webplaySearch::placeholder { color: var(--muted); opacity: 0.7; }

body.light-mode .roadmap-card {
    background: #ffffff;
    border-color: rgba(124, 95, 207, 0.15);
}

body.light-mode .roadmap-card:hover {
    border-color: rgba(124, 95, 207, 0.35);
    box-shadow: 0 16px 50px rgba(124, 95, 207, 0.1), 0 0 40px rgba(217, 88, 154, 0.04);
}

body.light-mode .roadmap-card p { color: rgba(26, 21, 53, 0.65); }

body.light-mode .modal-content {
    background: linear-gradient(160deg, #ffffff 0%, #f5f0ff 100%);
}

body.light-mode .detail-gallery { background: #f0eeff; }

body.light-mode .detail-content h1 { color: var(--text); }

body.light-mode .expandable-text { color: rgba(26, 21, 53, 0.82); }

body.light-mode footer {
    background: #dbd5f5;
    border-top-color: rgba(124, 95, 207, 0.15);
}

body.light-mode .footer-links a { color: var(--muted); }
body.light-mode .footer-links a:hover { color: var(--primary); }

body.light-mode .newsletter-inner {
    background: linear-gradient(135deg, #ffffff 0%, #f5efff 60%, #efe8ff 100%);
    border-color: rgba(124, 95, 207, 0.2);
}

body.light-mode .newsletter-input-group {
    background: rgba(240, 238, 255, 0.9);
    border-color: rgba(124, 95, 207, 0.25);
}

body.light-mode .newsletter-input { color: var(--text); }
body.light-mode .newsletter-input::placeholder { color: rgba(107, 95, 160, 0.6); }

body.light-mode .newsletter-sub { color: rgba(26, 21, 53, 0.65); }
body.light-mode .newsletter-perks span { color: rgba(26, 21, 53, 0.7); }
body.light-mode .newsletter-fine { color: rgba(107, 95, 160, 0.6); }

body.light-mode .newsletter-success {
    background: rgba(42, 172, 122, 0.1);
    border-color: rgba(42, 172, 122, 0.3);
}

body.light-mode .section-outline {
    border-color: rgba(124, 95, 207, 0.18);
}

body.light-mode #preloader { background: var(--dark); }

body.light-mode .card-tooltip {
    background: linear-gradient(180deg, transparent 0%, rgba(240, 235, 255, 0.92) 30%, rgba(240, 235, 255, 0.98) 100%);
    color: var(--text);
}

body.light-mode .card-tooltip p { color: rgba(26, 21, 53, 0.82); }

body.light-mode .game-detail-modal {
    background: rgba(210, 205, 240, 0.93);
}

body.light-mode .addon-card {
    background: #ffffff !important;
}

body.light-mode #roadmap-detail-modal {
    background: rgba(210, 205, 240, 0.93);
}

body.light-mode #roadmap-detail-modal .modal-content {
    background: linear-gradient(160deg, #ffffff 0%, #f5f0ff 100%);
}

/* ── SETTINGS NAV BUTTON & DROPDOWN ──────────────────────────────────── */
.nav-settings-item {
    position: relative;
    list-style: none;
}

.nav-settings-btn {
    background: linear-gradient(135deg, var(--primary), var(--accent));
    color: #0e0c1a;
    border: none;
    border-radius: 20px;
    padding: 7px 16px;
    font-size: 0.88rem;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
    white-space: nowrap;
    letter-spacing: 0.3px;
}

.nav-settings-btn:hover {
    transform: scale(1.07) translateY(-1px);
    box-shadow: 0 6px 28px rgba(184,169,248,0.45);
}

.nav-settings-btn i {
    transition: transform 0.4s ease;
}

.nav-settings-btn.active i {
    transform: rotate(90deg);
}

/* ── SETTINGS MODAL ─────────────────────────────────────────────────────── */
.settings-modal-overlay {
    /* Background click intentionally does NOT close — only the X button does */
    pointer-events: auto;
}

.settings-modal-box {
    width: 100%;
    max-width: 400px;
    max-height: 88vh;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: var(--primary) transparent;
    overscroll-behavior: contain;
    padding: 0 0 24px 0 !important;
    position: relative;
}

.settings-modal-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 22px 24px 14px;
    border-bottom: 1px solid rgba(184,169,248,0.1);
    position: sticky;
    top: 0;
    background: var(--card);
    z-index: 2;
    border-radius: 24px 24px 0 0;
}

.settings-modal-icon {
    font-size: 1.4rem;
    line-height: 1;
}

.settings-modal-title {
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--text);
    margin: 0;
    letter-spacing: 0.3px;
}

/* Close button position override for settings modal */
#settings-modal .pyxion-modal-close {
    position: absolute;
    top: 16px;
    right: 18px;
    z-index: 10;
}

.settings-section {
    padding: 14px 24px;
}

.settings-label {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--muted);
    letter-spacing: 0.5px;
    text-transform: uppercase;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.settings-divider {
    height: 1px;
    background: rgba(184,169,248,0.08);
    margin: 0 24px;
}

/* Theme toggle row */
.settings-theme-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

#settingsThemeLabel {
    font-size: 0.92rem;
    color: var(--text);
    font-weight: 600;
}

.settings-toggle-switch {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
    flex-shrink: 0;
}

.settings-toggle-switch input { opacity: 0; width: 0; height: 0; }

.settings-toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(184,169,248,0.2);
    border-radius: 24px;
    transition: 0.3s ease;
    border: 1.5px solid rgba(184,169,248,0.25);
}

.settings-toggle-slider:before {
    content: '';
    position: absolute;
    height: 16px; width: 16px;
    left: 3px; bottom: 3px;
    background: var(--primary);
    border-radius: 50%;
    transition: 0.3s cubic-bezier(0.34,1.56,0.64,1);
}

.settings-toggle-switch input:checked + .settings-toggle-slider {
    background: rgba(184,169,248,0.3);
    border-color: var(--primary);
}

.settings-toggle-switch input:checked + .settings-toggle-slider:before {
    transform: translateX(20px);
    background: linear-gradient(135deg, var(--primary), var(--accent));
}

/* Username display */
.settings-username-display {
    font-size: 1rem;
    font-weight: 700;
    color: var(--primary);
    margin-bottom: 8px;
    min-height: 22px;
}

.settings-username-display small {
    display: block;
    font-size: 0.72rem;
    color: var(--muted);
    font-weight: 400;
    margin-top: 2px;
}

/* Favourites list */
.settings-fav-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 130px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--primary) transparent;
}

.settings-fav-empty {
    font-size: 0.82rem;
    color: var(--muted);
    opacity: 0.6;
}

.settings-fav-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    color: var(--text);
    padding: 5px 8px;
    border-radius: 8px;
    background: rgba(184,169,248,0.05);
    cursor: pointer;
    transition: background 0.2s ease;
}

.settings-fav-item:hover {
    background: rgba(184,169,248,0.12);
}

.settings-fav-item i {
    color: var(--accent);
    font-size: 0.8rem;
}

/* Action buttons */
.settings-action-btn {
    background: rgba(184,169,248,0.1);
    border: 1.5px solid rgba(184,169,248,0.22);
    color: var(--primary);
    border-radius: 12px;
    padding: 8px 14px;
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
    width: 100%;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.settings-action-btn:hover {
    background: rgba(184,169,248,0.2);
    border-color: var(--primary);
    transform: translateY(-1px);
}

.settings-terms-btn {
    color: var(--text);
    border-color: rgba(184,169,248,0.15);
    background: rgba(184,169,248,0.05);
}

.settings-terms-btn:hover {
    color: var(--primary);
    background: rgba(184,169,248,0.12);
}

/* Light mode adjustments for settings modal */
body.light-mode .settings-modal-header {
    background: #ffffff;
    border-color: rgba(124,95,207,0.1);
}

body.light-mode .settings-divider { background: rgba(124,95,207,0.1); margin: 0 24px; }
body.light-mode .settings-toggle-slider { background: rgba(124,95,207,0.15); border-color: rgba(124,95,207,0.2); }
body.light-mode .settings-action-btn { border-color: rgba(124,95,207,0.22); }
body.light-mode .settings-fav-item { background: rgba(124,95,207,0.05); }
body.light-mode .settings-fav-item:hover { background: rgba(124,95,207,0.1); }

/* Mobile — full-width modal on small screens */
@media (max-width: 768px) {
    .nav-settings-item { width: 100%; }
    .nav-settings-btn  { width: 100%; justify-content: center; border-radius: 10px; }
    .settings-modal-box {
        max-width: 100%;
        max-height: 92vh;
        border-radius: 20px 20px 0 0;
    }
    .settings-modal-overlay {
        align-items: flex-end;
    }
    .settings-modal-header {
        border-radius: 20px 20px 0 0;
    }
}

/* ── ROADMAP DETAIL MODAL ──────────────────────────────────────────────── */
#roadmap-detail-modal {
    display: none;
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(6, 4, 15, 0.93);
    z-index: 1000;
    align-items: center;
    justify-content: center;
    padding: 10px;
    backdrop-filter: blur(8px);
}

#roadmap-detail-modal .modal-content {
    background: linear-gradient(160deg, var(--card) 0%, #1a1530 100%);
    max-width: 620px;
    width: 100%;
    max-height: 90vh;
    border-radius: 24px;
    overflow-y: auto;
    position: relative;
    scrollbar-width: none;
    animation: modalZoom 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
    border: 1px solid rgba(184, 169, 248, 0.15);
    box-shadow:
        0 40px 100px rgba(0, 0, 0, 0.6),
        0 0 0 1px rgba(184, 169, 248, 0.08),
        0 0 80px rgba(184, 169, 248, 0.04);
}

#roadmap-detail-modal .roadmap-modal-inner {
    padding: 40px 36px;
}

#roadmap-detail-modal .roadmap-modal-icon {
    font-size: 3.5rem;
    display: block;
    margin-bottom: 14px;
}

#roadmap-detail-modal .roadmap-modal-title {
    font-size: 1.8rem;
    color: var(--text);
    margin: 0 0 10px;
    font-weight: 800;
}

#roadmap-detail-modal .roadmap-modal-status {
    margin-bottom: 20px;
    display: inline-flex;
}

#roadmap-detail-modal .roadmap-modal-desc {
    font-size: 0.97rem;
    line-height: 1.75;
    color: rgba(240, 238, 255, 0.8);
    margin-bottom: 28px;
}

body.light-mode #roadmap-detail-modal .roadmap-modal-desc {
    color: rgba(26, 21, 53, 0.75);
}

#roadmap-detail-modal .roadmap-modal-action {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
}

#roadmap-detail-modal .roadmap-close-btn {
    position: absolute;
    top: 18px; right: 18px;
    font-size: 2rem;
    cursor: pointer;
    color: #0e0c1a;
    z-index: 10;
    background: linear-gradient(135deg, var(--primary), var(--accent));
    width: 40px; height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
    padding-bottom: 3px;
    box-shadow: 0 4px 20px rgba(184, 169, 248, 0.4);
    border: none;
}

#roadmap-detail-modal .roadmap-close-btn:hover {
    transform: rotate(-90deg) scale(1.15);
    background: linear-gradient(135deg, #e05555, #c73e3e);
    box-shadow: 0 4px 20px rgba(200, 60, 60, 0.45);
}

.roadmap-card {
    cursor: pointer;
}

@media (max-width: 768px) {
    #theme-toggle {
        bottom: 20px;
        left: 20px;
        width: 46px;
        height: 46px;
        font-size: 1.2rem;
    }

    #roadmap-detail-modal .roadmap-modal-inner {
        padding: 28px 20px;
    }

    #roadmap-detail-modal .roadmap-modal-title {
        font-size: 1.4rem;
    }
}

body {
    font-family: 'Segoe UI', sans-serif;
    background-color: var(--dark);
    color: var(--text);
    margin: 0;
    scroll-behavior: smooth;
    overflow-x: hidden;
}

/* ── LIVE ANIMATED BACKGROUND ─────────────────────────────────────────── */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    background:
        radial-gradient(ellipse 70% 55% at 15% 15%, rgba(184, 169, 248, 0.09) 0%, transparent 65%),
        radial-gradient(ellipse 60% 50% at 85% 20%, rgba(147, 217, 245, 0.08) 0%, transparent 60%),
        radial-gradient(ellipse 50% 45% at 50% 80%, rgba(249, 168, 212, 0.07) 0%, transparent 60%),
        radial-gradient(ellipse 40% 35% at 80% 75%, rgba(168, 240, 216, 0.06) 0%, transparent 55%);
    pointer-events: none;
    z-index: 0;
    animation: auroraShift 14s ease-in-out infinite alternate;
}

/* Floating orb layer */
body::after {
    content: '';
    position: fixed;
    inset: 0;
    background:
        radial-gradient(circle 300px at 10% 60%, rgba(249, 168, 212, 0.05) 0%, transparent 70%),
        radial-gradient(circle 250px at 90% 40%, rgba(184, 169, 248, 0.06) 0%, transparent 70%),
        radial-gradient(circle 200px at 50% 30%, rgba(147, 217, 245, 0.05) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
    animation: auroraShift2 18s ease-in-out infinite alternate;
}

@keyframes auroraShift {
    0%   { transform: scale(1)    translateX(0)    translateY(0); opacity: 1; }
    33%  { transform: scale(1.06) translateX(15px) translateY(-10px); opacity: 0.85; }
    66%  { transform: scale(0.97) translateX(-10px) translateY(12px); opacity: 0.95; }
    100% { transform: scale(1.04) translateX(8px)  translateY(-6px); opacity: 0.9; }
}
@keyframes auroraShift2 {
    0%   { transform: scale(1)    translateX(0)     translateY(0); opacity: 1; }
    50%  { transform: scale(1.1)  translateX(-20px) translateY(15px); opacity: 0.8; }
    100% { transform: scale(0.95) translateX(18px)  translateY(-12px); opacity: 0.9; }
}

/* Floating stars / sparkle particles */
@keyframes floatParticle {
    0%   { transform: translateY(0px)   translateX(0px)   scale(1);   opacity: 0.4; }
    50%  { transform: translateY(-30px) translateX(12px)  scale(1.2); opacity: 0.7; }
    100% { transform: translateY(0px)   translateX(0px)   scale(1);   opacity: 0.4; }
}

/* ── PRELOADER ─────────────────────────────────────────────────────────── */
#preloader {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: var(--dark);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    transition: opacity 0.6s ease;
}

.loader {
    width: 50px;
    height: 50px;
    border: 5px solid #211c3d;
    border-top: 5px solid var(--primary);
    border-right: 5px solid var(--accent);
    border-bottom: 5px solid var(--secondary);
    border-radius: 50%;
    animation: spin 0.9s cubic-bezier(0.68, -0.55, 0.27, 1.55) infinite;
}

@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

/* ── NAV ───────────────────────────────────────────────────────────────── */
nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 10%;
    background: rgba(14, 12, 26, 0.88);
    position: sticky;
    top: 0;
    z-index: 100;
    backdrop-filter: blur(18px);
    border-bottom: 1px solid rgba(184, 169, 248, 0.1);
    transition: background 0.3s ease, box-shadow 0.3s ease;
}

nav:hover {
    box-shadow: 0 4px 40px rgba(184, 169, 248, 0.08), 0 0 80px rgba(249, 168, 212, 0.04);
}

.logo {
    font-size: 1.6rem;
    font-weight: bold;
    color: var(--primary);
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    letter-spacing: 0.5px;
}

.logo:hover {
    text-shadow: 0 0 18px var(--primary), 0 0 40px rgba(184, 169, 248, 0.4), 0 0 80px rgba(249, 168, 212, 0.2);
    transform: scale(1.06);
    color: #d4c9ff;
}

.menu-toggle {
    display: none;
    flex-direction: column;
    gap: 6px;
    cursor: pointer;
}

.menu-toggle span {
    width: 30px;
    height: 3px;
    background: var(--primary);
    border-radius: 2px;
    transition: all 0.3s ease;
}

nav ul { display: flex; list-style: none; gap: 25px; margin: 0; padding: 0; }
nav a { color: var(--text); text-decoration: none; transition: all 0.3s ease; font-size: 0.95rem; position: relative; }
nav a::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--primary), var(--accent), var(--secondary));
    border-radius: 2px;
    transition: width 0.3s ease;
}
nav a:hover::after { width: 100%; }
nav a:hover { color: var(--primary); transform: translateY(-2px); }

/* ── HEADER ────────────────────────────────────────────────────────────── */
header {
    height: 65vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: linear-gradient(135deg, rgba(14, 12, 26, 0.85) 0%, rgba(30, 18, 50, 0.65) 50%, rgba(14, 12, 26, 0.90) 100%), url('https://images.unsplash.com/photo-1511512578047-dfb367046420?q=80&w=2070&auto=format&fit=crop') center/cover;
    text-align: center;
    padding: 0 20px;
    position: relative;
    overflow: hidden;
}

header::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 80px;
    background: linear-gradient(transparent, var(--dark));
    pointer-events: none;
}

/* Animated shimmer on header */
header::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 60% 40% at 30% 50%, rgba(184, 169, 248, 0.08) 0%, transparent 60%),
        radial-gradient(ellipse 50% 35% at 70% 50%, rgba(249, 168, 212, 0.06) 0%, transparent 60%);
    animation: headerGlow 6s ease-in-out infinite alternate;
    pointer-events: none;
}

@keyframes headerGlow {
    0%   { opacity: 0.5; transform: scale(1); }
    100% { opacity: 1;   transform: scale(1.05); }
}

header h1 {
    font-size: 3.2rem;
    margin: 0;
    animation: slideUp 1s ease forwards;
    background: linear-gradient(135deg, var(--text) 20%, var(--primary) 50%, var(--accent) 80%, var(--secondary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(0 2px 24px rgba(184, 169, 248, 0.3));
}

.re-animate { animation: none !important; }

.hero-btns {
    margin-top: 25px;
    display: flex;
    justify-content: center;
}

/* ── BUTTONS ───────────────────────────────────────────────────────────── */
.btn {
    padding: 12px 30px;
    border-radius: 30px;
    text-decoration: none;
    font-weight: bold;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    background: linear-gradient(135deg, var(--primary), var(--accent));
    color: #0e0c1a;
    display: inline-block;
    animation: pulsePastel 2.5s ease infinite;
    letter-spacing: 0.5px;
    box-shadow: 0 4px 24px rgba(184, 169, 248, 0.3), 0 0 40px rgba(249, 168, 212, 0.15);
}

.btn:hover {
    transform: scale(1.12) translateY(-2px);
    box-shadow: 0 8px 40px rgba(184, 169, 248, 0.55), 0 0 60px rgba(249, 168, 212, 0.3);
}

@keyframes pulsePastel {
    0%   { box-shadow: 0 0 0 0 rgba(184, 169, 248, 0.45), 0 4px 24px rgba(184, 169, 248, 0.25); }
    70%  { box-shadow: 0 0 0 18px rgba(184, 169, 248, 0), 0 4px 24px rgba(184, 169, 248, 0.25); }
    100% { box-shadow: 0 0 0 0 rgba(184, 169, 248, 0), 0 4px 24px rgba(184, 169, 248, 0.25); }
}

/* ── SECTION TITLE ─────────────────────────────────────────────────────── */
.section-title {
    text-align: center;
    margin: 60px 0 40px;
    font-size: 2.2rem;
    position: relative;
    transition: all 0.5s ease;
    letter-spacing: 0.5px;
}
.section-title:after {
    content: '';
    width: 80px;
    height: 3px;
    background: linear-gradient(90deg, var(--primary), var(--accent), var(--secondary), var(--mint));
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 2px;
    transition: width 0.4s ease;
    animation: rainbowShift 4s linear infinite;
    background-size: 200% 100%;
}
.section-title:hover:after { width: 140px; }

@keyframes rainbowShift {
    0%   { background-position: 0% 50%; }
    100% { background-position: 200% 50%; }
}

.highlight-fade { animation: titleGlow 1.6s ease-out; }

@keyframes titleGlow {
    0%   { color: var(--primary); text-shadow: 0 0 24px var(--primary), 0 0 50px rgba(184, 169, 248, 0.4), 0 0 80px rgba(249, 168, 212, 0.2); transform: scale(1.08); }
    100% { color: var(--text); text-shadow: none; transform: scale(1); }
}

/* ── FEATURED SECTION ──────────────────────────────────────────────────── */
.featured-section { padding: 80px 10%; }
.featured-container {
    background: linear-gradient(135deg, var(--card) 0%, #1a1530 100%);
    border-radius: 24px;
    padding: 40px;
    border: 1px solid rgba(184, 169, 248, 0.22);
    position: relative;
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow:
        0 8px 40px rgba(0, 0, 0, 0.35),
        inset 0 1px 0 rgba(184, 169, 248, 0.08),
        0 0 60px rgba(184, 169, 248, 0.03);
}

.featured-container:hover {
    transform: scale(1.02) translateY(-4px);
    box-shadow:
        0 20px 60px rgba(184, 169, 248, 0.18),
        0 0 0 1px rgba(184, 169, 248, 0.35),
        0 0 80px rgba(249, 168, 212, 0.08);
    border-color: rgba(184, 169, 248, 0.45);
}

.featured-badge {
    position: absolute;
    top: -15px;
    left: 20px;
    background: linear-gradient(135deg, var(--primary), var(--accent));
    color: #0e0c1a;
    padding: 5px 18px;
    border-radius: 6px;
    font-weight: bold;
    font-size: 0.85rem;
    letter-spacing: 0.5px;
    box-shadow: 0 4px 20px rgba(184, 169, 248, 0.4), 0 0 30px rgba(249, 168, 212, 0.2);
}

.featured-flex { display: flex; gap: 40px; align-items: flex-start; flex-wrap: wrap; }
.featured-img {
    flex: 1;
    min-width: 300px;
    height: 350px;
    background-size: cover;
    background-position: center;
    border-radius: 18px;
    transition: all 0.5s ease;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4), 0 0 30px rgba(184, 169, 248, 0.06);
}
.featured-container:hover .featured-img {
    transform: scale(1.02);
    box-shadow: 0 12px 40px rgba(184, 169, 248, 0.18), 0 0 60px rgba(249, 168, 212, 0.08);
}
.featured-info { flex: 1.5; min-width: 300px; }
.featured-info h2 { font-size: 2.5rem; margin-bottom: 15px; color: var(--text); }

/* ── READ MORE ─────────────────────────────────────────────────────────── */
.expandable-text {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: all 0.4s ease;
    margin-bottom: 5px;
    line-height: 1.7;
    color: rgba(240, 238, 255, 0.82);
}

.expandable-text.expanded {
    -webkit-line-clamp: unset;
    line-clamp: unset;
    display: block;
}

.read-more-btn {
    background: none;
    border: none;
    color: var(--primary);
    cursor: pointer;
    font-weight: bold;
    padding: 0;
    margin-bottom: 20px;
    font-size: 0.9rem;
    display: inline-block;
    transition: color 0.3s ease;
}

.read-more-btn:hover {
    text-decoration: underline;
    color: var(--accent);
}

/* ── GAME GRID ─────────────────────────────────────────────────────────── */
.game-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
    padding: 20px 10%;
}

.game-card {
    background: var(--card);
    border-radius: 18px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
    border: 1px solid rgba(147, 217, 245, 0.1);
    animation: fadeInUp 0.6s ease backwards;
    height: 100%;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    position: relative;
}

.game-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(184, 169, 248, 0.05), rgba(249, 168, 212, 0.04), rgba(147, 217, 245, 0.04));
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
    z-index: 1;
}

.game-card:hover {
    transform: translateY(-16px) scale(1.03);
    border-color: rgba(184, 169, 248, 0.5);
    box-shadow:
        0 24px 60px rgba(184, 169, 248, 0.15),
        0 0 0 1px rgba(184, 169, 248, 0.22),
        0 0 40px rgba(249, 168, 212, 0.06);
}

.game-card:hover::before { opacity: 1; }

.game-img {
    height: 280px;
    background-size: cover;
    background-position: center;
    transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.game-card:hover .game-img { transform: scale(1.1); }
.game-info { padding: 18px; text-align: center; position: relative; z-index: 2; }
.game-info h3 { color: var(--text); margin: 0 0 6px; }

/* ── SEARCH ────────────────────────────────────────────────────────────── */
.search-container {
    text-align: center;
    margin: 20px auto 40px;
    position: relative;
    max-width: 500px;
    padding: 0 20px;
}
.search-container i {
    position: absolute;
    left: 40px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--primary);
    transition: color 0.3s ease;
}

#gameSearch, #webplaySearch {
    width: 100%;
    padding: 15px 15px 15px 50px;
    border-radius: 30px;
    background: var(--card);
    border: 1px solid rgba(147, 217, 245, 0.18);
    color: var(--text);
    font-size: 1rem;
    outline: none;
    transition: all 0.35s ease;
    box-sizing: border-box;
}

#gameSearch:focus, #webplaySearch:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(184, 169, 248, 0.12), 0 4px 20px rgba(184, 169, 248, 0.1);
    background: var(--card-hover);
}

#gameSearch::placeholder, #webplaySearch::placeholder { color: var(--muted); }

/* ── ABOUT ─────────────────────────────────────────────────────────────── */
.about-page { padding: 80px 10%; text-align: center; min-height: 30vh; }
.stats-container { display: flex; justify-content: center; gap: 50px; margin-bottom: 40px; }
.stat-item { text-align: center; }
.stat-number {
    font-size: 2.5rem;
    color: var(--primary);
    margin: 0;
    text-shadow: 0 0 20px rgba(184, 169, 248, 0.5), 0 0 40px rgba(184, 169, 248, 0.2);
}

/* ── FOOTER ────────────────────────────────────────────────────────────── */
footer {
    padding: 60px 10% 60px;
    background: #08060f;
    text-align: center;
    border-top: 1px solid rgba(184, 169, 248, 0.1);
}
.footer-content { display: flex; flex-direction: column; align-items: center; }
.footer-logo { display: block; margin: 0 auto; width: fit-content; cursor: default; transition: all 0.5s ease; }
.footer-logo:hover {
    text-shadow: 0 0 20px rgba(184, 169, 248, 0.9), 0 0 40px rgba(184, 169, 248, 0.5), 0 0 80px rgba(249, 168, 212, 0.2);
    color: #d4c9ff;
}
.footer-links { margin-top: 20px; display: flex; justify-content: center; gap: 20px; flex-wrap: wrap; }
.footer-links a { color: var(--muted); text-decoration: none; font-size: 0.9rem; transition: all 0.3s ease; }
.footer-links a:hover { color: var(--primary); transform: translateY(-2px); display: inline-block; }

.social-links { margin-top: 20px; display: flex; justify-content: center; gap: 25px; }
.social-links a {
    font-size: 2rem;
    transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
    display: inline-block;
}
.social-links a:hover { transform: translateY(-10px) scale(1.15); filter: brightness(1.3); }
.social-links a:nth-child(1) { color: #f9a8d4; }       /* Instagram → cotton candy pink */
.social-links a:nth-child(2) { color: #ffd6b3; }       /* Itch.io → soft peach */
.social-links a:nth-child(3) { color: #c9d4ff; }       /* GitHub → periwinkle */
.social-links a:nth-child(4) { color: #f9a8d4; }       /* Email → pink */
.social-links a:nth-child(5) { color: #b8a9f8; }       /* Discord → lavender */

/* ── MODALS ────────────────────────────────────────────────────────────── */
.game-detail-modal {
    display: none;
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(6, 4, 15, 0.93);
    z-index: 1000;
    align-items: center;
    justify-content: center;
    padding: 10px;
    backdrop-filter: blur(8px);
}

.modal-content {
    background: linear-gradient(160deg, var(--card) 0%, #1a1530 100%);
    max-width: 850px;
    width: 100%;
    max-height: 90vh;
    border-radius: 24px;
    overflow-y: auto;
    position: relative;
    scrollbar-width: none;
    animation: modalZoom 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
    border: 1px solid rgba(184, 169, 248, 0.15);
    box-shadow:
        0 40px 100px rgba(0, 0, 0, 0.6),
        0 0 0 1px rgba(184, 169, 248, 0.08),
        0 0 80px rgba(184, 169, 248, 0.04);
}

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

.close-btn {
    position: fixed;
    top: 30px; right: 30px;
    font-size: 2.5rem;
    cursor: pointer;
    color: #0e0c1a;
    z-index: 1100;
    background: linear-gradient(135deg, var(--primary), var(--accent));
    width: 45px; height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
    line-height: 45px;
    padding-bottom: 5px;
    box-shadow: 0 4px 20px rgba(184, 169, 248, 0.4), 0 0 30px rgba(249, 168, 212, 0.2);
}
.close-btn:hover {
    transform: rotate(-90deg) scale(1.15);
    background: linear-gradient(135deg, #e05555, #c73e3e);
    box-shadow: 0 4px 20px rgba(200, 60, 60, 0.45);
}

/* ── GALLERY ───────────────────────────────────────────────────────────── */
.detail-gallery {
    display: flex;
    overflow-x: auto;
    gap: 12px;
    padding: 15px;
    background: #07050e;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: var(--primary) transparent;
}
.detail-gallery img {
    height: 320px;
    border-radius: 14px;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    flex-shrink: 0;
    object-fit: cover;
    border: 2px solid transparent;
}
.detail-gallery img:hover {
    transform: scale(1.05) translateY(-4px);
    border-color: var(--primary);
    box-shadow: 0 8px 30px rgba(184, 169, 248, 0.25), 0 0 40px rgba(249, 168, 212, 0.1);
}

.detail-content { padding: 30px; }
.detail-content h1 { color: var(--text); }

/* ── DOWNLOAD / ACTION BUTTON ──────────────────────────────────────────── */
.download-btn {
    background: linear-gradient(135deg, var(--primary), var(--accent));
    color: #0e0c1a;
    padding: 10px 25px;
    text-decoration: none;
    border-radius: 10px;
    font-weight: bold;
    display: inline-block;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    border: none;
    cursor: pointer;
    animation: pulsePastel 2.5s ease infinite;
    box-shadow: 0 4px 24px rgba(184, 169, 248, 0.3), 0 0 40px rgba(249, 168, 212, 0.1);
    letter-spacing: 0.3px;
}

.download-btn:hover {
    transform: scale(1.1) translateY(-2px);
    box-shadow: 0 10px 45px rgba(184, 169, 248, 0.5), 0 0 60px rgba(249, 168, 212, 0.25);
}

.download-btn:disabled {
    background: linear-gradient(135deg, #211c3d, #1a1530);
    color: var(--muted);
    cursor: not-allowed;
    animation: none;
    transform: none !important;
    box-shadow: none !important;
}

/* ── ADDON CARD ────────────────────────────────────────────────────────── */
.addon-card:hover {
    transform: scale(1.05) translateY(-4px);
    box-shadow: 0 20px 60px rgba(184, 169, 248, 0.18), 0 0 60px rgba(249, 168, 212, 0.08);
    border-style: solid !important;
    border-color: var(--primary) !important;
}

/* ── SECTION OUTLINE (glowing borders) ────────────────────────────────── */
.section-outline {
    margin: 40px 5%;
    border: 1.5px solid rgba(184, 169, 248, 0.16);
    border-radius: 24px;
    box-shadow:
        0 0 20px rgba(184, 169, 248, 0.06),
        0 0 60px rgba(249, 168, 212, 0.03),
        inset 0 0 40px rgba(184, 169, 248, 0.02);
    padding-top: 10px;
    transition: box-shadow 0.4s ease, border-color 0.4s ease;
}
.section-outline:hover {
    border-color: rgba(184, 169, 248, 0.3);
    box-shadow:
        0 0 30px rgba(184, 169, 248, 0.12),
        0 0 80px rgba(249, 168, 212, 0.05),
        inset 0 0 40px rgba(184, 169, 248, 0.04);
}

/* ── LIGHTBOX ──────────────────────────────────────────────────────────── */
#lightbox {
    display: none;
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(6, 4, 15, 0.97);
    z-index: 2000;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(8px);
    animation: fadeIn 0.25s ease;
}
#lightbox img {
    max-width: 95%;
    max-height: 95%;
    border-radius: 16px;
    box-shadow: 0 20px 80px rgba(184, 169, 248, 0.2), 0 0 60px rgba(249, 168, 212, 0.08);
    transition: transform 0.4s ease;
}
.lightbox-close {
    position: absolute;
    top: 25px; right: 30px;
    font-size: 3rem;
    color: var(--text);
    cursor: pointer;
    transition: all 0.3s ease;
    opacity: 0.8;
}
.lightbox-close:hover {
    color: var(--primary);
    opacity: 1;
    transform: scale(1.2) rotate(-10deg);
}
.lightbox-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(184, 169, 248, 0.15);
    border: 1.5px solid rgba(184, 169, 248, 0.3);
    color: var(--text);
    font-size: 2.6rem;
    line-height: 1;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.25s ease;
    z-index: 2001;
    backdrop-filter: blur(6px);
    padding: 0;
    user-select: none;
}
.lightbox-prev { left: 24px; }
.lightbox-next { right: 24px; }
.lightbox-arrow:hover {
    background: rgba(184, 169, 248, 0.35);
    border-color: var(--primary);
    transform: translateY(-50%) scale(1.1);
    box-shadow: 0 0 24px rgba(184, 169, 248, 0.3);
}
.lightbox-counter {
    position: absolute;
    bottom: 22px;
    left: 50%;
    transform: translateX(-50%);
    color: rgba(240, 238, 255, 0.65);
    font-size: 0.88rem;
    letter-spacing: 1px;
    pointer-events: none;
    font-weight: 500;
}
@media (max-width: 768px) {
    .lightbox-arrow {
        width: 42px;
        height: 42px;
        font-size: 2rem;
    }
    .lightbox-prev { left: 10px; }
    .lightbox-next { right: 10px; }
}

/* ── SPARKLE PARTICLES ─────────────────────────────────────────────────── */
.sparkle-canvas {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 1;
}

/* ── CARD BADGE (New / Beta) ───────────────────────────────────────────── */
.card-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 10;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    animation: badgePop 2.8s ease-in-out infinite;
}
.card-badge.badge-beta {
    background: linear-gradient(135deg, var(--primary), var(--accent));
    color: #0e0c1a;
    box-shadow: 0 0 14px rgba(184, 169, 248, 0.55), 0 0 28px rgba(249, 168, 212, 0.25);
}
.card-badge.badge-new {
    background: linear-gradient(135deg, var(--mint), var(--secondary));
    color: #0e0c1a;
    box-shadow: 0 0 14px rgba(168, 240, 216, 0.55), 0 0 28px rgba(147, 217, 245, 0.25);
}
.card-badge.badge-soon {
    background: linear-gradient(135deg, #2a2450, #3a3060);
    color: var(--muted);
    box-shadow: none;
    animation: none;
}
@keyframes badgePop {
    0%, 100% { transform: scale(1);    box-shadow: 0 0 14px rgba(184, 169, 248, 0.55); }
    50%       { transform: scale(1.08); box-shadow: 0 0 24px rgba(184, 169, 248, 0.8), 0 0 40px rgba(249, 168, 212, 0.3); }
}

/* ── CARD TOOLTIP / QUICK PEEK ─────────────────────────────────────────── */
.card-tooltip {
    position: absolute;
    bottom: 0;
    left: 0; right: 0;
    background: linear-gradient(180deg, transparent 0%, rgba(14, 10, 28, 0.92) 30%, rgba(14, 10, 28, 0.98) 100%);
    color: var(--text);
    padding: 30px 16px 16px;
    font-size: 0.82rem;
    line-height: 1.55;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.35s ease, transform 0.35s ease;
    pointer-events: none;
    z-index: 5;
    border-radius: 0 0 18px 18px;
}
.card-tooltip p {
    margin: 0 0 8px;
    color: rgba(240, 238, 255, 0.82);
}
.card-tooltip .tooltip-category {
    font-size: 0.75rem;
    color: var(--primary);
    font-weight: 600;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}
.card-tooltip .tooltip-cta {
    display: inline-block;
    margin-top: 4px;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--accent);
    letter-spacing: 0.4px;
}
.game-card:hover .card-tooltip {
    opacity: 1;
    transform: translateY(0);
}

/* ── SCROLL REVEAL ─────────────────────────────────────────────────────── */
.reveal {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal.visible {
    opacity: 1;
    transform: translateY(0);
}
.reveal-left {
    opacity: 0;
    transform: translateX(-40px);
    transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal-left.visible {
    opacity: 1;
    transform: translateX(0);
}
.reveal-right {
    opacity: 0;
    transform: translateX(40px);
    transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal-right.visible {
    opacity: 1;
    transform: translateX(0);
}

/* ── ROADMAP SECTION ───────────────────────────────────────────────────── */
#roadmap {
    padding: 80px 10%;
    text-align: center;
}

.roadmap-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 24px;
    margin-top: 20px;
}

.roadmap-card {
    background: var(--card);
    border-radius: 20px;
    padding: 32px 24px;
    border: 1px solid rgba(184, 169, 248, 0.12);
    position: relative;
    overflow: hidden;
    transition: all 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
    text-align: left;
}
.roadmap-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    border-radius: 20px 20px 0 0;
}
.roadmap-card.status-done::before   { background: linear-gradient(90deg, var(--mint), var(--secondary)); }
.roadmap-card.status-wip::before    { background: linear-gradient(90deg, var(--primary), var(--accent)); animation: shimmerBar 2s linear infinite; background-size: 200% 100%; }
.roadmap-card.status-soon::before   { background: linear-gradient(90deg, #3a3060, #2a2450); }
.roadmap-card.status-future::before { background: linear-gradient(90deg, #2a2050, #1e1640); }

@keyframes shimmerBar {
    0%   { background-position: 0% 0; }
    100% { background-position: 200% 0; }
}

.roadmap-card:hover {
    transform: translateY(-8px) scale(1.02);
    border-color: rgba(184, 169, 248, 0.3);
    box-shadow: 0 16px 50px rgba(184, 169, 248, 0.12), 0 0 40px rgba(249, 168, 212, 0.05);
}

.roadmap-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 20px;
    margin-bottom: 14px;
}
.roadmap-status.done   { background: rgba(168, 240, 216, 0.12); color: var(--mint); }
.roadmap-status.wip    { background: rgba(184, 169, 248, 0.12); color: var(--primary); }
.roadmap-status.soon   { background: rgba(147, 217, 245, 0.1);  color: var(--secondary); }
.roadmap-status.future { background: rgba(100, 90, 160, 0.12);  color: var(--muted); }

.roadmap-status .dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
}
.roadmap-status.done   .dot { background: var(--mint);      box-shadow: 0 0 6px var(--mint); }
.roadmap-status.wip    .dot { background: var(--primary);   box-shadow: 0 0 6px var(--primary); animation: dotPulse 1.2s ease infinite; }
.roadmap-status.soon   .dot { background: var(--secondary); }
.roadmap-status.future .dot { background: var(--muted); }

@keyframes dotPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%       { opacity: 0.5; transform: scale(1.6); }
}

.roadmap-icon {
    font-size: 2rem;
    margin-bottom: 10px;
    display: block;
}
.roadmap-card h3 {
    font-size: 1.05rem;
    margin: 0 0 8px;
    color: var(--text);
}
.roadmap-card p {
    font-size: 0.85rem;
    color: rgba(240, 238, 255, 0.6);
    margin: 0;
    line-height: 1.6;
}

/* ── KEYFRAMES ─────────────────────────────────────────────────────────── */
@keyframes fadeIn   { from { opacity: 0; } to { opacity: 1; } }
@keyframes fadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }
@keyframes slideUp  { from { transform: translateY(40px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

/* Shimmer animation for cards on hover */
@keyframes shimmer {
    0%   { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

/* ── CUSTOM CURSOR ─────────────────────────────────────────────────────── */
@media (pointer: fine) {
    * { cursor: none !important; }

    #cursor-dot {
        position: fixed;
        width: 8px;
        height: 8px;
        background: var(--primary);
        border-radius: 50%;
        pointer-events: none;
        z-index: 99999;
        transform: translate(-50%, -50%);
        transition: width 0.2s ease, height 0.2s ease, background 0.2s ease, opacity 0.2s ease;
        box-shadow: 0 0 8px rgba(184, 169, 248, 0.9), 0 0 16px rgba(184, 169, 248, 0.4);
        will-change: transform;
    }

    #cursor-ring {
        position: fixed;
        width: 36px;
        height: 36px;
        border: 1.5px solid rgba(184, 169, 248, 0.5);
        border-radius: 50%;
        pointer-events: none;
        z-index: 99998;
        transform: translate(-50%, -50%);
        transition: width 0.35s cubic-bezier(0.22, 1, 0.36, 1),
                    height 0.35s cubic-bezier(0.22, 1, 0.36, 1),
                    border-color 0.3s ease,
                    opacity 0.3s ease;
        will-change: transform;
    }

    /* Hover state on clickable things */
    body.cursor-hover #cursor-dot {
        width: 12px;
        height: 12px;
        background: var(--accent);
        box-shadow: 0 0 12px rgba(249, 168, 212, 0.9), 0 0 28px rgba(249, 168, 212, 0.4);
    }
    body.cursor-hover #cursor-ring {
        width: 52px;
        height: 52px;
        border-color: rgba(249, 168, 212, 0.45);
    }

    /* Click flash */
    body.cursor-click #cursor-dot {
        width: 6px;
        height: 6px;
        background: var(--mint);
        box-shadow: 0 0 16px rgba(168, 240, 216, 1), 0 0 32px rgba(168, 240, 216, 0.5);
    }
    body.cursor-click #cursor-ring {
        width: 60px;
        height: 60px;
        border-color: rgba(168, 240, 216, 0.6);
        opacity: 0;
    }
}

/* ── NEWSLETTER SECTION ────────────────────────────────────────────────── */
#newsletter {
    padding: 80px 10%;
    position: relative;
}

.newsletter-inner {
    background: linear-gradient(135deg, var(--card) 0%, #1a1232 60%, #16122a 100%);
    border-radius: 28px;
    padding: 60px 50px;
    border: 1px solid rgba(184, 169, 248, 0.2);
    text-align: center;
    position: relative;
    overflow: hidden;
    box-shadow:
        0 20px 60px rgba(0,0,0,0.35),
        0 0 80px rgba(184, 169, 248, 0.05),
        inset 0 1px 0 rgba(184, 169, 248, 0.08);
    transition: border-color 0.4s ease, box-shadow 0.4s ease;
}

.newsletter-inner:hover {
    border-color: rgba(184, 169, 248, 0.32);
    box-shadow:
        0 24px 80px rgba(0,0,0,0.4),
        0 0 100px rgba(184, 169, 248, 0.08),
        0 0 60px rgba(249, 168, 212, 0.04),
        inset 0 1px 0 rgba(184, 169, 248, 0.12);
}

/* Decorative glow blobs inside the card */
.newsletter-inner::before {
    content: '';
    position: absolute;
    top: -60px; left: -60px;
    width: 220px; height: 220px;
    background: radial-gradient(circle, rgba(184, 169, 248, 0.08) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}
.newsletter-inner::after {
    content: '';
    position: absolute;
    bottom: -60px; right: -60px;
    width: 200px; height: 200px;
    background: radial-gradient(circle, rgba(249, 168, 212, 0.07) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}

.newsletter-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(184, 169, 248, 0.1);
    border: 1px solid rgba(184, 169, 248, 0.2);
    color: var(--primary);
    padding: 6px 18px;
    border-radius: 30px;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    margin-bottom: 22px;
}

.newsletter-title {
    font-size: 2.6rem;
    font-weight: 800;
    margin: 0 0 16px;
    background: linear-gradient(135deg, var(--text) 30%, var(--primary) 65%, var(--accent));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1.2;
}

.newsletter-sub {
    font-size: 1rem;
    color: rgba(240, 238, 255, 0.65);
    max-width: 520px;
    margin: 0 auto 28px;
    line-height: 1.75;
}

.newsletter-perks {
    display: flex;
    justify-content: center;
    gap: 28px;
    flex-wrap: wrap;
    margin-bottom: 36px;
}

.newsletter-perks span {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 0.85rem;
    color: rgba(240, 238, 255, 0.7);
    font-weight: 500;
}

.newsletter-perks span i {
    color: var(--primary);
    font-size: 0.9rem;
}

.newsletter-form-wrap {
    max-width: 520px;
    margin: 0 auto 18px;
    position: relative;
    z-index: 2;
}

.newsletter-form { width: 100%; position: relative; }

.newsletter-input-group {
    display: flex;
    align-items: center;
    background: rgba(14, 12, 26, 0.7);
    border: 1.5px solid rgba(184, 169, 248, 0.22);
    border-radius: 50px;
    padding: 6px 6px 6px 20px;
    gap: 10px;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    backdrop-filter: blur(8px);
}

.newsletter-input-group:focus-within {
    border-color: rgba(184, 169, 248, 0.55);
    box-shadow: 0 0 0 4px rgba(184, 169, 248, 0.09), 0 8px 30px rgba(184, 169, 248, 0.1);
}

.newsletter-input-icon {
    color: var(--primary);
    font-size: 0.95rem;
    flex-shrink: 0;
    opacity: 0.8;
}

.newsletter-input {
    flex: 1;
    background: none;
    border: none;
    outline: none;
    color: var(--text);
    font-size: 0.95rem;
    padding: 10px 0;
    min-width: 0;
}

.newsletter-input::placeholder { color: rgba(139, 130, 184, 0.7); }

.newsletter-btn {
    background: linear-gradient(135deg, var(--primary), var(--accent));
    color: #0e0c1a;
    border: none;
    border-radius: 40px;
    padding: 12px 26px;
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
    flex-shrink: 0;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    letter-spacing: 0.3px;
    box-shadow: 0 4px 18px rgba(184, 169, 248, 0.35);
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.newsletter-btn:hover {
    transform: scale(1.06) translateY(-1px);
    box-shadow: 0 8px 30px rgba(184, 169, 248, 0.55), 0 0 40px rgba(249, 168, 212, 0.2);
}

.newsletter-success {
    background: rgba(168, 240, 216, 0.1);
    border: 1px solid rgba(168, 240, 216, 0.3);
    color: var(--mint);
    border-radius: 14px;
    padding: 16px 24px;
    font-size: 0.95rem;
    font-weight: 600;
    animation: fadeInUp 0.4s ease;
    margin-top: 4px;
}

.newsletter-fine {
    font-size: 0.75rem;
    color: rgba(139, 130, 184, 0.55);
    margin: 0 auto;
    max-width: 420px;
    line-height: 1.6;
}

/* ── MOBILE RESPONSIVE ──────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .menu-toggle { display: flex; }

    nav {
        padding: 14px 5%;
        position: sticky;
        top: 0;
    }

    nav ul {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background: rgba(14, 12, 26, 0.98);
        flex-direction: column;
        padding: 20px;
        gap: 15px;
        box-sizing: border-box;
        border-bottom: 1px solid rgba(184, 169, 248, 0.1);
        backdrop-filter: blur(16px);
        animation: fadeInUp 0.25s ease;
        z-index: 99;
    }
    nav ul.active { display: flex; }

    nav a { font-size: 1.05rem; padding: 6px 0; }

    header h1 { font-size: 1.8rem; }
    header { height: 55vh; }

    .featured-section { padding: 40px 5%; }
    .featured-container { padding: 24px 16px; }
    .featured-img { min-width: 100%; height: 220px; }
    .featured-info h2 { font-size: 1.7rem; }

    .game-grid {
        padding: 16px 4%;
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
        gap: 16px;
    }

    .game-img { height: 180px; }
    .game-info { padding: 12px; }
    .game-info h3 { font-size: 0.95rem; }

    .search-container { padding: 0 10px; }
    #gameSearch, #webplaySearch { font-size: 0.95rem; padding: 13px 13px 13px 44px; }
    .search-container i { left: 28px; }

    .stats-container { gap: 20px; flex-direction: column; }

    .close-btn { top: 12px; right: 12px; width: 40px; height: 40px; font-size: 1.8rem; }

    .detail-gallery { padding: 10px; gap: 8px; }
    .detail-gallery img { height: 160px; }

    .detail-content { padding: 16px; }
    .detail-content h1 { font-size: 1.4rem; margin-bottom: 6px; }

    .download-btn { font-size: 1rem; padding: 12px 22px; }

    .section-outline { margin: 20px 2%; border-radius: 18px; }

    .social-links { gap: 18px; }
    .social-links a { font-size: 1.7rem; }

    footer { padding: 40px 6% 50px; }
    .footer-links { gap: 12px; }

    .section-title { font-size: 1.7rem; margin: 40px 0 30px; }

    .about-page { padding: 50px 5%; }
    .stat-number { font-size: 2rem; }

    /* Addon card mobile */
    #addons .addon-card { padding: 40px 20px !important; margin: 0 4% !important; }

    /* Roadmap mobile */
    #roadmap { padding: 50px 5%; }
    .roadmap-grid { grid-template-columns: 1fr; gap: 16px; }
    .card-tooltip { display: none; }

    /* Newsletter mobile */
    #newsletter { padding: 40px 5%; }
    .newsletter-inner { padding: 40px 24px; }
    .newsletter-title { font-size: 1.8rem; }
    .newsletter-perks { gap: 16px; }
    .newsletter-input-group { flex-direction: column; border-radius: 18px; padding: 14px 16px; gap: 12px; }
    .newsletter-btn { width: 100%; justify-content: center; border-radius: 12px; }
    .newsletter-input { width: 100%; text-align: center; }
    .newsletter-input-icon { display: none; }

    /* Modal full-screen on mobile */
    .modal-content {
        max-height: 95vh;
        border-radius: 18px;
    }

    .game-detail-modal { padding: 6px; align-items: flex-end; }
    .modal-content { border-radius: 20px 20px 0 0; max-height: 92vh; }
}

@media (max-width: 400px) {
    header h1 { font-size: 1.45rem; }
    .featured-info h2 { font-size: 1.4rem; }
    .game-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
    nav { padding: 12px 4%; }
    .logo { font-size: 1.3rem; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   COMMUNITY PANEL  –  ratings · favourites · comments
   (appended by firebase-community.js; does not touch any existing rules)
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── wrapper injected after .detail-content ── */
.community-panel {
    padding: 0 24px 32px;
    display: flex;
    flex-direction: column;
    gap: 32px;
}

/* ── section headings ── */
.community-panel .cp-heading {
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: var(--primary);
    margin: 0 0 14px;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* ── RATING ROW ── */
.cp-rating-row {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
}

.cp-stars {
    display: flex;
    gap: 6px;
}

.cp-star {
    font-size: 1.7rem;
    cursor: pointer;
    color: rgba(184,169,248,0.25);
    transition: color 0.18s ease, transform 0.18s cubic-bezier(0.34,1.56,0.64,1);
    line-height: 1;
    user-select: none;
    -webkit-user-select: none;
}

.cp-star:hover,
.cp-star.hovered { color: #ffd166; transform: scale(1.25); }

.cp-star.filled  { color: #ffd166; }

.cp-rating-meta {
    font-size: 0.88rem;
    color: var(--muted);
    line-height: 1.5;
}

.cp-rating-meta strong {
    color: var(--text);
    font-size: 1.05rem;
}

.cp-rated-msg {
    font-size: 0.82rem;
    color: var(--mint);
    margin-top: 6px;
    display: none;
}

/* ── FAVOURITE BUTTON ── */
.cp-fav-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(249,168,212,0.08);
    border: 1.5px solid rgba(249,168,212,0.22);
    color: var(--accent);
    border-radius: 30px;
    padding: 9px 20px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.35s cubic-bezier(0.34,1.56,0.64,1);
    white-space: nowrap;
}

.cp-fav-btn:hover {
    background: rgba(249,168,212,0.16);
    border-color: rgba(249,168,212,0.5);
    transform: scale(1.05);
}

.cp-fav-btn.cp-fav-active {
    background: rgba(249,168,212,0.18);
    border-color: rgba(249,168,212,0.6);
    color: #f9a8d4;
    box-shadow: 0 0 20px rgba(249,168,212,0.25);
}

.cp-fav-count {
    font-size: 0.78rem;
    opacity: 0.7;
    margin-left: 2px;
}

/* ── DIVIDER ── */
.cp-divider {
    height: 1px;
    background: rgba(184,169,248,0.1);
    border: none;
    margin: 0;
}

/* ── COMMENTS ── */
.cp-comment-form {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 8px;
    margin-bottom: 18px;
    max-width: 520px;
}

.cp-comment-name,
.cp-comment-text {
    background: rgba(14,12,26,0.6);
    border: 1.5px solid rgba(184,169,248,0.18);
    border-radius: 12px;
    color: var(--text);
    font-family: inherit;
    font-size: 0.92rem;
    padding: 11px 14px;
    outline: none;
    resize: none;
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
    width: 100%;
    box-sizing: border-box;
}

.cp-comment-name:focus,
.cp-comment-text:focus {
    border-color: rgba(184,169,248,0.5);
    box-shadow: 0 0 0 3px rgba(184,169,248,0.08);
}

.cp-comment-name::placeholder,
.cp-comment-text::placeholder { color: var(--muted); opacity: 0.7; }

.cp-comment-name { width: 100%; flex: 0 0 100%; }
.cp-comment-text { min-height: 64px; max-height: 140px; flex: 1; min-width: 0; }

.cp-comment-submit {
    background: linear-gradient(135deg, var(--primary), var(--accent));
    color: #0e0c1a;
    border: none;
    border-radius: 30px;
    padding: 10px 24px;
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.35s cubic-bezier(0.34,1.56,0.64,1);
    display: flex;
    align-items: center;
    gap: 6px;
}

.cp-comment-submit:hover {
    transform: scale(1.06) translateY(-1px);
    box-shadow: 0 6px 24px rgba(184,169,248,0.4);
}

.cp-comment-submit:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

/* ── comment list ── */
.cp-comments-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
    max-height: 340px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--primary) transparent;
    padding-right: 4px;
}

.cp-comment-item {
    background: rgba(184,169,248,0.05);
    border: 1px solid rgba(184,169,248,0.1);
    border-radius: 14px;
    padding: 13px 16px;
    animation: fadeInUp 0.3s ease;
}

.cp-comment-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 6px;
    gap: 8px;
    flex-wrap: wrap;
}

.cp-comment-author {
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--primary);
}

.cp-comment-time {
    font-size: 0.75rem;
    color: var(--muted);
    opacity: 0.7;
    flex-shrink: 0;
}

.cp-comment-body {
    font-size: 0.9rem;
    color: rgba(240,238,255,0.82);
    line-height: 1.6;
    word-break: break-word;
}

body.light-mode .cp-comment-body { color: rgba(26,21,53,0.78); }

.cp-no-comments {
    text-align: center;
    font-size: 0.88rem;
    color: var(--muted);
    opacity: 0.6;
    padding: 20px 0;
}

.cp-load-more {
    align-self: center;
    background: transparent;
    border: 1.5px solid rgba(184,169,248,0.25);
    color: var(--primary);
    border-radius: 30px;
    padding: 8px 22px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-top: 6px;
}

.cp-load-more:hover {
    background: rgba(184,169,248,0.08);
    border-color: rgba(184,169,248,0.5);
}

/* ── light mode tweaks ── */
body.light-mode .cp-comment-name,
body.light-mode .cp-comment-text {
    background: rgba(240,238,255,0.7);
    border-color: rgba(124,95,207,0.2);
    color: var(--text);
}

body.light-mode .cp-comment-item {
    background: rgba(124,95,207,0.05);
    border-color: rgba(124,95,207,0.12);
}

body.light-mode .cp-star { color: rgba(124,95,207,0.2); }

/* ── spinner ── */
.cp-spinner {
    display: inline-block;
    width: 14px; height: 14px;
    border: 2px solid rgba(184,169,248,0.2);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
    vertical-align: middle;
}

@media (max-width: 768px) {
    .community-panel { padding: 0 14px 24px; }
    .cp-star { font-size: 1.45rem; }
}
/* ═══════════════════════════════════════════════════════════════════════════
   PYXION MODALS  –  username + terms & conditions
   ═══════════════════════════════════════════════════════════════════════════ */

.pyxion-modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(6, 4, 15, 0.93);
    z-index: 1200;
    align-items: center;
    justify-content: center;
    padding: 16px;
    backdrop-filter: blur(10px);
}

.pyxion-modal-overlay.open { display: flex; }

.pyxion-modal-box {
    background: linear-gradient(160deg, var(--card) 0%, #1a1530 100%);
    border: 1px solid rgba(184,169,248,0.18);
    border-radius: 24px;
    padding: 40px 36px 72px;
    max-width: 480px;
    width: 100%;
    position: relative;
    animation: modalZoom 0.4s cubic-bezier(0.34,1.56,0.64,1);
    box-shadow: 0 40px 100px rgba(0,0,0,0.6), 0 0 80px rgba(184,169,248,0.04);
    max-height: 90vh;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--primary) transparent;
}

.pyxion-modal-box--wide {
    max-width: 680px;
    padding: 36px 32px 72px;
}

.pyxion-modal-close {
    position: absolute;
    top: 16px; right: 16px;
    width: 36px; height: 36px;
    border-radius: 50%;
    border: none;
    background: linear-gradient(135deg, var(--primary), var(--accent));
    color: #0e0c1a;
    font-size: 1.4rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s cubic-bezier(0.34,1.56,0.64,1);
    box-shadow: 0 4px 16px rgba(184,169,248,0.4);
    line-height: 1;
    padding-bottom: 2px;
}

.pyxion-modal-close:hover {
    transform: rotate(-90deg) scale(1.15);
    box-shadow: 0 6px 24px rgba(184,169,248,0.6);
}

.pyxion-modal-icon {
    font-size: 3rem;
    display: block;
    margin-bottom: 10px;
    text-align: center;
}

.pyxion-modal-title {
    font-size: 1.7rem;
    font-weight: 800;
    color: var(--text);
    margin: 0 0 8px;
    text-align: center;
}

.pyxion-modal-sub {
    font-size: 0.9rem;
    color: var(--muted);
    text-align: center;
    margin: 0 0 20px;
    line-height: 1.6;
}

.pyxion-modal-input {
    width: 100%;
    box-sizing: border-box;
    background: rgba(14,12,26,0.6);
    border: 1.5px solid rgba(184,169,248,0.22);
    border-radius: 14px;
    color: var(--text);
    font-family: inherit;
    font-size: 1.05rem;
    padding: 13px 16px;
    outline: none;
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
    margin-bottom: 8px;
    text-align: center;
    letter-spacing: 0.5px;
}

.pyxion-modal-input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(184,169,248,0.12);
}

.pyxion-modal-input::placeholder { color: var(--muted); opacity: 0.6; }

.pyxion-modal-error {
    font-size: 0.83rem;
    color: #f9a8d4;
    min-height: 18px;
    margin-bottom: 8px;
    text-align: center;
}

.pyxion-modal-submit {
    width: 100%;
    background: linear-gradient(135deg, var(--primary), var(--accent));
    color: #0e0c1a;
    border: none;
    border-radius: 30px;
    padding: 12px;
    font-size: 1rem;
    font-weight: 800;
    cursor: pointer;
    transition: all 0.35s cubic-bezier(0.34,1.56,0.64,1);
    letter-spacing: 0.5px;
    box-shadow: 0 4px 20px rgba(184,169,248,0.3);
    margin-bottom: 12px;
}

.pyxion-modal-submit:hover {
    transform: scale(1.04) translateY(-1px);
    box-shadow: 0 8px 32px rgba(184,169,248,0.5);
}

.pyxion-modal-submit:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

.pyxion-modal-fine {
    font-size: 0.76rem;
    color: var(--muted);
    text-align: center;
    line-height: 1.5;
    opacity: 0.7;
}

/* Password input wrapper with show/hide toggle */
.pyxion-password-wrap {
    position: relative;
    width: 100%;
    margin-top: 10px;
}

.pyxion-password-wrap .pyxion-modal-input,
.pyxion-password-wrap .account-edit-input {
    margin-top: 0;
    padding-right: 46px;
    width: 100%;
    box-sizing: border-box;
}

.pyxion-pw-toggle {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    color: var(--muted);
    font-size: 1rem;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s ease;
    z-index: 2;
}

.pyxion-pw-toggle:hover {
    color: var(--primary);
}

/* Terms body */
.pyxion-terms-body {
    text-align: left;
    font-size: 0.88rem;
    line-height: 1.75;
    color: rgba(240,238,255,0.82);
    margin-top: 12px;
}

.pyxion-terms-body h3 {
    font-size: 0.95rem;
    font-weight: 800;
    color: var(--primary);
    margin: 20px 0 6px;
    letter-spacing: 0.3px;
}

.pyxion-terms-body h3:first-child { margin-top: 0; }

.pyxion-terms-body p { margin: 0 0 8px; }

.pyxion-terms-body ul {
    margin: 4px 0 10px;
    padding-left: 20px;
}

.pyxion-terms-body li { margin-bottom: 5px; }

/* Light mode */
body.light-mode .pyxion-modal-box {
    background: linear-gradient(160deg, #ffffff 0%, #f5f0ff 100%);
    border-color: rgba(124,95,207,0.2);
}

body.light-mode .pyxion-modal-title { color: var(--text); }
body.light-mode .pyxion-modal-sub   { color: var(--muted); }
body.light-mode .pyxion-modal-fine  { color: var(--muted); }

body.light-mode .pyxion-modal-input {
    background: rgba(240,238,255,0.8);
    border-color: rgba(124,95,207,0.22);
    color: var(--text);
}

body.light-mode .pyxion-terms-body { color: rgba(26,21,53,0.78); }
body.light-mode .pyxion-terms-body h3 { color: var(--primary); }

/* Mobile */
@media (max-width: 600px) {
    .pyxion-modal-box { padding: 30px 20px; border-radius: 20px; }
    .pyxion-modal-box--wide { padding: 28px 16px; }
    .pyxion-modal-title { font-size: 1.35rem; }
}

/* ── Terms modal on top of account modal ──────────────────────────────────── */
#terms-modal.open { z-index: 1500; }

.pyxion-terms-footer {
    margin-top: 24px;
    padding-top: 18px;
    border-top: 1px solid rgba(184,169,248,0.15);
    text-align: center;
}

.pyxion-terms-agreement {
    font-size: 0.82rem;
    color: var(--muted);
    line-height: 1.6;
    margin-bottom: 16px;
    font-style: italic;
    opacity: 0.85;
}

body.light-mode .pyxion-terms-agreement { color: var(--muted); }

/* ── Settings about info ──────────────────────────────────────────────────── */
.settings-about-info {
    display: flex;
    flex-direction: column;
    gap: 3px;
    font-size: 0.85rem;
    color: var(--text);
    font-weight: 600;
    margin-bottom: 2px;
}

.settings-about-info small {
    font-size: 0.75rem;
    color: var(--muted);
    font-weight: 400;
}

.settings-social-btn {
    font-size: 0.82rem !important;
}

/* ── Password input in account modal ─────────────────────────────────────── */
#passwordInput {
    margin-top: 10px;
}

/* ── Logged-in view inside account modal ─────────────────────────────────── */
#usernameLoggedInView .pyxion-modal-submit + .pyxion-modal-submit {
    margin-top: 8px;
}

/* ── Terms link in modal ────────────────────────────────────────────────────── */
.pyxion-terms-link {
    font-size: 0.82rem;
    color: var(--primary);
    text-decoration: none;
    opacity: 0.85;
    transition: opacity 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.pyxion-terms-link:hover { opacity: 1; text-decoration: underline; }

/* ── Confirm create account modal ─────────────────────────────────────────── */
.confirm-modal-box {
    max-width: 440px;
    text-align: center;
}

.confirm-modal-icon-wrap {
    text-align: center;
    margin-bottom: 10px;
}

.confirm-modal-sparkle {
    font-size: 3rem;
    display: inline-block;
    animation: confirmPop 0.6s cubic-bezier(0.34,1.56,0.64,1);
}

@keyframes confirmPop {
    0% { transform: scale(0) rotate(-15deg); opacity: 0; }
    100% { transform: scale(1) rotate(0); opacity: 1; }
}

.confirm-security-banner {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: rgba(249,168,212,0.07);
    border: 1px solid rgba(249,168,212,0.2);
    border-radius: 14px;
    padding: 14px 16px;
    margin: 12px 0;
    text-align: left;
}

.confirm-security-icon { font-size: 1.2rem; flex-shrink: 0; margin-top: 2px; }

.confirm-security-text {
    font-size: 0.8rem;
    color: var(--muted);
    line-height: 1.6;
    margin: 0;
}

.confirm-security-text strong { color: #f9a8d4; }

.confirm-username-preview {
    background: rgba(184,169,248,0.08);
    border: 1px solid rgba(184,169,248,0.2);
    border-radius: 12px;
    padding: 10px 16px;
    margin-bottom: 16px;
    font-size: 0.9rem;
    color: var(--primary);
    font-weight: 700;
    letter-spacing: 0.5px;
}

.confirm-modal-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.confirm-create-btn {
    background: linear-gradient(135deg, var(--primary), var(--accent)) !important;
    color: #0e0c1a !important;
}

.confirm-cancel-btn {
    background: rgba(239,68,68,0.1) !important;
    border: 1.5px solid rgba(239,68,68,0.3) !important;
    color: #f87171 !important;
    box-shadow: none !important;
    margin-bottom: 0 !important;
}

.confirm-cancel-btn:hover {
    background: rgba(239,68,68,0.2) !important;
    border-color: rgba(239,68,68,0.5) !important;
    box-shadow: 0 4px 16px rgba(239,68,68,0.2) !important;
}

/* ── Account Details Grid ─────────────────────────────────────────────────── */
.account-details-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin: 14px 0 18px;
    text-align: left;
}

.account-detail-card {
    background: rgba(184,169,248,0.06);
    border: 1px solid rgba(184,169,248,0.15);
    border-radius: 14px;
    padding: 12px 14px;
}

.account-detail-card.full-width {
    grid-column: 1 / -1;
}

.account-detail-label {
    font-size: 0.7rem;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.8px;
    font-weight: 600;
    margin-bottom: 4px;
}

.account-detail-value {
    font-size: 0.88rem;
    color: var(--text);
    font-weight: 600;
}

.account-detail-value.highlight { color: var(--primary); }

/* ── Account Edit Sections ─────────────────────────────────────────────────── */
.account-edit-section {
    margin-bottom: 10px;
    border: 1px solid rgba(184,169,248,0.14);
    border-radius: 16px;
    overflow: hidden;
}

.account-edit-toggle-btn {
    width: 100%;
    background: rgba(184,169,248,0.06);
    border: none;
    color: var(--primary);
    padding: 12px 16px;
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
    text-align: left;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: background 0.2s;
    font-family: inherit;
}

.account-edit-toggle-btn:hover { background: rgba(184,169,248,0.12); }

.account-edit-form {
    padding: 14px 14px 10px;
    border-top: 1px solid rgba(184,169,248,0.1);
    background: rgba(14,12,26,0.3);
}

.account-edit-input {
    font-size: 0.92rem !important;
    padding: 10px 14px !important;
    margin-bottom: 6px !important;
    text-align: left !important;
}

.account-edit-warning {
    font-size: 0.78rem;
    color: var(--peach);
    margin-bottom: 10px;
    text-align: left;
    line-height: 1.5;
}

.account-security-notice {
    font-size: 0.78rem;
    color: var(--muted);
    background: rgba(249,168,212,0.06);
    border: 1px solid rgba(249,168,212,0.15);
    border-radius: 10px;
    padding: 10px 12px;
    margin-bottom: 10px;
    text-align: left;
    line-height: 1.55;
}

.account-security-notice strong { color: #f9a8d4; }

.account-edit-btns {
    display: flex;
    gap: 8px;
    margin-top: 4px;
}

.account-save-btn {
    flex: 2;
    padding: 10px !important;
    font-size: 0.88rem !important;
    margin-bottom: 0 !important;
}

.account-cancel-btn {
    flex: 1;
    padding: 10px !important;
    font-size: 0.88rem !important;
    margin-bottom: 0 !important;
    background: rgba(100,100,120,0.15) !important;
    color: var(--muted) !important;
    box-shadow: none !important;
}

/* Light mode adaptations */
body.light-mode .account-detail-card {
    background: rgba(124,95,207,0.05);
    border-color: rgba(124,95,207,0.15);
}

body.light-mode .account-edit-toggle-btn { background: rgba(124,95,207,0.06); }
body.light-mode .account-edit-toggle-btn:hover { background: rgba(124,95,207,0.12); }
body.light-mode .confirm-security-banner {
    background: rgba(124,95,207,0.05);
    border-color: rgba(124,95,207,0.18);
}
body.light-mode .confirm-username-preview {
    background: rgba(124,95,207,0.06);
    border-color: rgba(124,95,207,0.18);
}

/* ═══════════════════════════════════════════════════════════════════════════
   NEW FEATURES CSS — Tags/Filters, Sort, Random, Share, Skeleton,
   Comment Likes/Replies/Edit, Profile Customization, Achievements, Leaderboard
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── GAMES TOOLBAR (tags + sort + random) ── */
.games-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    padding: 0 10% 20px;
}

.toolbar-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.tag-btn {
    background: rgba(184,169,248,0.08);
    border: 1.5px solid rgba(184,169,248,0.2);
    color: var(--muted);
    border-radius: 20px;
    padding: 6px 14px;
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.25s ease;
    letter-spacing: 0.4px;
    font-family: inherit;
}

.tag-btn:hover {
    background: rgba(184,169,248,0.16);
    color: var(--primary);
    border-color: rgba(184,169,248,0.5);
    transform: translateY(-1px);
}

.tag-btn.active {
    background: linear-gradient(135deg, rgba(184,169,248,0.22), rgba(249,168,212,0.15));
    border-color: var(--primary);
    color: var(--primary);
    box-shadow: 0 0 12px rgba(184,169,248,0.2);
}

.toolbar-right {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.sort-select {
    background: rgba(14,12,26,0.7);
    border: 1.5px solid rgba(184,169,248,0.22);
    color: var(--text);
    border-radius: 12px;
    padding: 7px 12px;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    outline: none;
    font-family: inherit;
    transition: border-color 0.25s ease;
}

.sort-select:focus { border-color: var(--primary); }

body.light-mode .sort-select {
    background: rgba(240,238,255,0.8);
    color: var(--text);
    border-color: rgba(124,95,207,0.22);
}

.random-btn {
    background: linear-gradient(135deg, var(--secondary), var(--mint));
    color: #0e0c1a;
    border: none;
    border-radius: 20px;
    padding: 7px 16px;
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.35s cubic-bezier(0.34,1.56,0.64,1);
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    font-family: inherit;
    box-shadow: 0 4px 16px rgba(147,217,245,0.3);
}

.random-btn:hover {
    transform: scale(1.08) translateY(-1px);
    box-shadow: 0 6px 24px rgba(147,217,245,0.5);
}

/* ── CARD TAGS ── */
.card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 6px;
    justify-content: center;
}

.card-tag {
    background: rgba(184,169,248,0.1);
    border: 1px solid rgba(184,169,248,0.18);
    color: var(--muted);
    border-radius: 10px;
    padding: 2px 8px;
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.3px;
    text-transform: lowercase;
}

/* ── SHARE BUTTON ON CARD ── */
.card-share-btn {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 10;
    background: rgba(14,12,26,0.7);
    border: 1.5px solid rgba(184,169,248,0.3);
    color: var(--primary);
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 0.82rem;
    opacity: 0;
    transform: scale(0.8);
    transition: all 0.25s cubic-bezier(0.34,1.56,0.64,1);
    backdrop-filter: blur(6px);
}

.game-card:hover .card-share-btn {
    opacity: 1;
    transform: scale(1);
}

.card-share-btn:hover {
    background: rgba(184,169,248,0.25);
    border-color: var(--primary);
    transform: scale(1.15) !important;
    box-shadow: 0 4px 16px rgba(184,169,248,0.35);
}

/* ── SKELETON LOADING CARDS ── */
.skeleton-card {
    pointer-events: none;
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
}

.skeleton-img {
    height: 280px;
    background: linear-gradient(90deg, rgba(184,169,248,0.07) 25%, rgba(184,169,248,0.14) 50%, rgba(184,169,248,0.07) 75%);
    background-size: 200% 100%;
    animation: skeletonShimmer 1.4s infinite;
    border-radius: 0;
}

.skeleton-line {
    background: linear-gradient(90deg, rgba(184,169,248,0.07) 25%, rgba(184,169,248,0.14) 50%, rgba(184,169,248,0.07) 75%);
    background-size: 200% 100%;
    animation: skeletonShimmer 1.4s infinite;
    border-radius: 8px;
    margin: 8px auto;
}

.skeleton-title { height: 16px; width: 70%; }
.skeleton-sub   { height: 12px; width: 45%; }

@keyframes skeletonShimmer {
    0%   { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

/* ── COMMENT LIKES, REPLIES, EDIT ── */
.cp-comment-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

.cp-like-btn {
    background: rgba(120,120,140,0.08);
    border: 1.5px solid rgba(120,120,140,0.22);
    color: var(--muted);
    border-radius: 20px;
    padding: 4px 12px;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: all 0.2s ease;
    font-family: inherit;
}

.cp-like-btn:hover {
    background: rgba(249,168,212,0.1);
    border-color: rgba(249,168,212,0.35);
    color: var(--accent);
    transform: scale(1.05);
}

.cp-like-btn.cp-liked {
    background: rgba(239,68,68,0.12);
    border-color: rgba(239,68,68,0.45);
    color: #f87171;
}

.cp-like-btn.cp-liked:hover {
    background: rgba(239,68,68,0.2);
    border-color: rgba(239,68,68,0.65);
    color: #fca5a5;
    transform: scale(1.05);
}

.cp-like-btn .fa-heart {
    transition: transform 0.15s ease;
}

.cp-like-btn.cp-liked .fa-heart {
    transform: scale(1.2);
}

.cp-reply-toggle {
    background: rgba(147,217,245,0.08);
    border: 1.5px solid rgba(147,217,245,0.2);
    color: var(--secondary);
    border-radius: 20px;
    padding: 4px 12px;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: all 0.2s ease;
    font-family: inherit;
}

.cp-reply-toggle:hover {
    background: rgba(147,217,245,0.16);
    border-color: rgba(147,217,245,0.5);
}

.cp-comment-edit-btn {
    background: rgba(168,240,216,0.08);
    border: 1.5px solid rgba(168,240,216,0.2);
    color: var(--mint);
    border-radius: 20px;
    padding: 4px 12px;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: all 0.2s ease;
    font-family: inherit;
}

.cp-comment-edit-btn:hover {
    background: rgba(168,240,216,0.16);
    border-color: rgba(168,240,216,0.5);
}

.cp-edit-window {
    font-size: 0.7rem;
    color: var(--mint);
    opacity: 0.7;
}

.cp-edit-textarea {
    margin-top: 8px;
    min-height: 60px !important;
    font-size: 0.88rem !important;
}

.cp-edit-actions {
    display: flex;
    gap: 8px;
    margin-top: 6px;
}

.cp-edit-save-btn {
    background: linear-gradient(135deg, var(--primary), var(--accent));
    color: #0e0c1a;
    border: none;
    border-radius: 20px;
    padding: 6px 16px;
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.25s ease;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: inherit;
}

.cp-edit-save-btn:hover { transform: scale(1.05); }

.cp-edit-cancel-btn {
    background: rgba(100,100,120,0.15);
    border: 1.5px solid rgba(184,169,248,0.15);
    color: var(--muted);
    border-radius: 20px;
    padding: 6px 14px;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: inherit;
}

.cp-edit-cancel-btn:hover { background: rgba(100,100,120,0.25); }

.cp-reply-form {
    margin-top: 10px;
    padding: 10px;
    background: rgba(147,217,245,0.04);
    border: 1px solid rgba(147,217,245,0.12);
    border-radius: 12px;
}

.cp-reply-textarea {
    min-height: 55px !important;
    font-size: 0.88rem !important;
    margin-bottom: 8px !important;
}

.cp-reply-post-btn {
    background: linear-gradient(135deg, var(--secondary), var(--mint));
    color: #0e0c1a;
    border: none;
    border-radius: 20px;
    padding: 7px 18px;
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.25s ease;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: inherit;
}

.cp-reply-post-btn:hover { transform: scale(1.05); }
.cp-reply-post-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

.cp-replies-list {
    margin-top: 8px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-left: 16px;
    border-left: 2px solid rgba(147,217,245,0.2);
}

.cp-reply-item {
    background: rgba(147,217,245,0.04) !important;
    border-color: rgba(147,217,245,0.1) !important;
    border-radius: 12px !important;
    padding: 10px 14px !important;
}

/* ── PROFILE CUSTOMIZATION MODAL ── */
.profile-section-label {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-bottom: 10px;
    text-align: left;
}

.emoji-picker-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 6px;
    max-height: 160px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--primary) transparent;
}

.emoji-pick-btn {
    background: rgba(184,169,248,0.06);
    border: 1.5px solid rgba(184,169,248,0.15);
    border-radius: 10px;
    font-size: 1.3rem;
    cursor: pointer;
    padding: 6px;
    transition: all 0.2s ease;
    line-height: 1;
    text-align: center;
}

.emoji-pick-btn:hover {
    background: rgba(184,169,248,0.16);
    border-color: rgba(184,169,248,0.4);
    transform: scale(1.1);
}

.emoji-pick-btn.selected {
    background: rgba(184,169,248,0.22);
    border-color: var(--primary);
    box-shadow: 0 0 12px rgba(184,169,248,0.3);
    transform: scale(1.08);
}

.accent-color-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
}

.accent-color-btn {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 2.5px solid transparent;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.34,1.56,0.64,1);
    flex-shrink: 0;
}

.accent-color-btn:hover {
    transform: scale(1.2);
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

.accent-color-btn.selected {
    border-color: var(--text);
    transform: scale(1.18);
    box-shadow: 0 4px 16px rgba(0,0,0,0.4);
}

.profile-preview-row {
    display: flex;
    justify-content: center;
    margin-top: 16px;
}

.profile-preview-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: rgba(184,169,248,0.08);
    border: 2px solid var(--primary);
    border-radius: 30px;
    padding: 8px 20px;
    box-shadow: 0 4px 20px rgba(184,169,248,0.2);
    transition: border-color 0.3s ease;
}

.profile-preview-emoji {
    font-size: 1.6rem;
    line-height: 1;
}

.profile-preview-name {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--primary);
}

/* ── ACHIEVEMENT BADGES ── */
.account-badges-section {
    margin: 14px 0;
    text-align: left;
}

.account-badges-title {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-bottom: 10px;
}

.account-badges-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(78px, 1fr));
    gap: 8px;
}

.achievement-badge {
    position: relative;
    background: rgba(184,169,248,0.07);
    border: 1.5px solid rgba(184,169,248,0.18);
    border-radius: 14px;
    padding: 10px 6px;
    text-align: center;
    transition: all 0.25s ease;
    overflow: hidden;
}

.achievement-badge.unlocked {
    border-color: rgba(184,169,248,0.4);
    background: rgba(184,169,248,0.1);
    box-shadow: 0 4px 16px rgba(184,169,248,0.12);
}

.achievement-badge.unlocked:hover {
    transform: translateY(-2px) scale(1.04);
    box-shadow: 0 6px 24px rgba(184,169,248,0.2);
}

.achievement-badge.locked {
    opacity: 0.45;
    filter: grayscale(0.6);
}

.ach-emoji {
    font-size: 1.5rem;
    display: block;
    margin-bottom: 4px;
    line-height: 1;
}

.ach-name {
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--primary);
    line-height: 1.3;
    margin-bottom: 2px;
}

.ach-desc {
    font-size: 0.58rem;
    color: var(--muted);
    line-height: 1.3;
    opacity: 0.8;
}

.ach-locked-overlay {
    position: absolute;
    top: 4px;
    right: 4px;
    font-size: 0.65rem;
    color: var(--muted);
    opacity: 0.6;
}

/* ── LEADERBOARD MODAL ── */
.leaderboard-tabs {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 20px;
}

.lb-tab {
    background: rgba(184,169,248,0.08);
    border: 1.5px solid rgba(184,169,248,0.2);
    color: var(--muted);
    border-radius: 20px;
    padding: 7px 16px;
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.25s ease;
    font-family: inherit;
}

.lb-tab:hover {
    background: rgba(184,169,248,0.16);
    color: var(--primary);
    border-color: rgba(184,169,248,0.5);
}

.lb-tab.active {
    background: linear-gradient(135deg, rgba(184,169,248,0.2), rgba(249,168,212,0.12));
    border-color: var(--primary);
    color: var(--primary);
    box-shadow: 0 0 12px rgba(184,169,248,0.2);
}

.leaderboard-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: 60vh;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--primary) transparent;
    padding: 4px 2px;
}

.lb-item {
    display: flex;
    align-items: center;
    gap: 14px;
    background: rgba(184,169,248,0.05);
    border: 1px solid rgba(184,169,248,0.1);
    border-radius: 14px;
    padding: 12px 16px;
    transition: all 0.2s ease;
}

.lb-item:hover {
    background: rgba(184,169,248,0.1);
    border-color: rgba(184,169,248,0.25);
    transform: translateX(4px);
}

.lb-item.lb-top-1 { border-color: rgba(255,209,0,0.35); background: rgba(255,209,0,0.05); }
.lb-item.lb-top-2 { border-color: rgba(180,190,210,0.35); background: rgba(180,190,210,0.05); }
.lb-item.lb-top-3 { border-color: rgba(205,127,50,0.35); background: rgba(205,127,50,0.05); }

.lb-rank {
    font-size: 1.3rem;
    width: 32px;
    text-align: center;
    flex-shrink: 0;
}

.lb-name {
    flex: 1;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lb-score {
    font-size: 0.82rem;
    color: var(--primary);
    font-weight: 600;
    white-space: nowrap;
    flex-shrink: 0;
}

.lb-empty {
    text-align: center;
    padding: 32px 0;
    opacity: 0.5;
    font-size: 0.9rem;
    color: var(--muted);
}

/* Light mode adjustments */
body.light-mode .tag-btn {
    background: rgba(124,95,207,0.06);
    border-color: rgba(124,95,207,0.2);
}
body.light-mode .tag-btn.active {
    background: rgba(124,95,207,0.12);
    border-color: var(--primary);
    color: var(--primary);
}
body.light-mode .lb-item {
    background: rgba(124,95,207,0.04);
    border-color: rgba(124,95,207,0.12);
}
body.light-mode .achievement-badge { background: rgba(124,95,207,0.05); border-color: rgba(124,95,207,0.18); }
body.light-mode .achievement-badge.unlocked { background: rgba(124,95,207,0.1); border-color: rgba(124,95,207,0.4); }
body.light-mode .emoji-pick-btn { background: rgba(124,95,207,0.05); border-color: rgba(124,95,207,0.15); }
body.light-mode .emoji-pick-btn.selected { background: rgba(124,95,207,0.15); border-color: var(--primary); }

/* Mobile responsive */
@media (max-width: 768px) {
    .games-toolbar { padding: 0 4% 16px; flex-direction: column; align-items: flex-start; }
    .toolbar-right { width: 100%; justify-content: space-between; }
    .sort-select { flex: 1; }
    .emoji-picker-grid { grid-template-columns: repeat(5, 1fr); }
    .account-badges-grid { grid-template-columns: repeat(auto-fill, minmax(68px, 1fr)); }
    .leaderboard-tabs { gap: 6px; }
    .lb-tab { padding: 6px 12px; font-size: 0.78rem; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   NEW FEATURES CSS  –  Added features: share, notif dot, pin, suggestion box
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Share button: always visible on mobile (not just on hover) ── */
@media (pointer: coarse) {
    .card-share-btn {
        opacity: 1 !important;
        transform: scale(1) !important;
    }
}

/* ── Notification dot on settings button ── */
#settings-notif-dot {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #ef4444;
    border: 2px solid var(--bg, #0e0c1a);
    pointer-events: none;
    z-index: 9999;
    box-shadow: 0 0 6px rgba(239,68,68,0.8);
    animation: notifPulse 1.8s ease infinite;
}
#account-notif-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #ef4444;
    margin-left: 6px;
    vertical-align: middle;
    box-shadow: 0 0 5px rgba(239,68,68,0.7);
    animation: notifPulse 1.8s ease infinite;
    flex-shrink: 0;
}
@keyframes notifPulse {
    0%, 100% { box-shadow: 0 0 5px rgba(239,68,68,0.7); }
    50% { box-shadow: 0 0 12px rgba(239,68,68,1); }
}
body.light-mode #settings-notif-dot,
body.light-mode #account-notif-dot {
    border-color: #fff;
}

/* ── Pinned comment styles ── */
.cp-pinned-section {
    margin-bottom: 18px;
}
.cp-pinned-label {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--primary);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.cp-pinned-comment {
    background: rgba(184,169,248,0.07);
    border: 1.5px solid rgba(184,169,248,0.25);
    border-radius: 14px;
    padding: 14px 16px;
    margin-bottom: 10px;
    position: relative;
}
.cp-pinned-comment::before {
    content: '📌';
    position: absolute;
    top: 10px;
    right: 12px;
    font-size: 0.9rem;
    opacity: 0.7;
}
body.light-mode .cp-pinned-comment {
    background: rgba(124,95,207,0.06);
    border-color: rgba(124,95,207,0.2);
}

/* ── Pin / Unpin buttons ── */
.cp-pin-btn {
    background: none;
    border: 1px solid rgba(184,169,248,0.3);
    color: var(--primary);
    border-radius: 20px;
    padding: 3px 10px;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-left: 6px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.cp-pin-btn:hover {
    background: rgba(184,169,248,0.15);
    border-color: var(--primary);
}
.cp-unpin-btn {
    border-color: rgba(239,68,68,0.4);
    color: #f87171;
}
.cp-unpin-btn:hover {
    background: rgba(239,68,68,0.12);
    border-color: #f87171;
}
body.light-mode .cp-pin-btn { border-color: rgba(124,95,207,0.3); color: var(--primary); }
body.light-mode .cp-unpin-btn { border-color: rgba(239,68,68,0.4); color: #dc2626; }

/* ═══════════════════════════════════════════════════════════════════════════
   GAME SUGGESTION BOX SECTION
   ═══════════════════════════════════════════════════════════════════════════ */
#game-suggestion-section {
    padding: 80px 0;
    background: transparent;
}
.suggestion-inner {
    max-width: 640px;
    margin: 0 auto;
    padding: 0 24px;
    text-align: center;
}
.suggestion-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, rgba(184,169,248,0.15), rgba(249,168,212,0.1));
    border: 1px solid rgba(184,169,248,0.3);
    border-radius: 20px;
    padding: 6px 18px;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--primary);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 20px;
}
.suggestion-title {
    font-size: clamp(1.6rem, 4vw, 2.2rem);
    font-weight: 800;
    background: linear-gradient(135deg, var(--primary), var(--accent));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 12px;
}
.suggestion-sub {
    color: var(--muted);
    font-size: 0.97rem;
    line-height: 1.65;
    margin-bottom: 32px;
}
.suggestion-form-wrap {
    background: var(--card);
    border: 1px solid rgba(184,169,248,0.15);
    border-radius: 20px;
    padding: 28px 28px 24px;
    box-shadow: 0 8px 40px rgba(0,0,0,0.25);
}
.suggestion-signin-nudge {
    padding: 16px 0;
    color: var(--muted);
    font-size: 0.92rem;
    line-height: 1.5;
}
.suggestion-signin-btn {
    margin-top: 14px;
    background: linear-gradient(135deg, var(--primary), var(--accent));
    color: #0e0c1a;
    border: none;
    border-radius: 30px;
    padding: 10px 28px;
    font-weight: 700;
    font-size: 0.92rem;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.34,1.56,0.64,1);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 4px 20px rgba(184,169,248,0.35);
}
.suggestion-signin-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 8px 28px rgba(184,169,248,0.5);
}
.suggestion-user-label {
    font-size: 0.85rem;
    color: var(--muted);
    margin-bottom: 14px;
    text-align: left;
}
.suggestion-textarea {
    width: 100%;
    background: rgba(184,169,248,0.06);
    border: 1.5px solid rgba(184,169,248,0.18);
    border-radius: 12px;
    padding: 14px 16px;
    font-size: 0.95rem;
    color: var(--text);
    font-family: inherit;
    resize: vertical;
    min-height: 110px;
    outline: none;
    transition: border-color 0.25s ease;
    box-sizing: border-box;
}
.suggestion-textarea:focus {
    border-color: var(--primary);
    background: rgba(184,169,248,0.09);
}
.suggestion-textarea::placeholder { color: var(--muted); opacity: 0.7; }
.suggestion-char-count {
    text-align: right;
    font-size: 0.75rem;
    color: var(--muted);
    margin-top: 6px;
    margin-bottom: 14px;
}
.suggestion-submit-btn {
    background: linear-gradient(135deg, var(--primary), var(--accent));
    color: #0e0c1a;
    border: none;
    border-radius: 30px;
    padding: 12px 32px;
    font-weight: 700;
    font-size: 0.95rem;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.34,1.56,0.64,1);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 4px 20px rgba(184,169,248,0.35);
}
.suggestion-submit-btn:hover:not(:disabled) {
    transform: scale(1.05);
    box-shadow: 0 8px 28px rgba(184,169,248,0.5);
}
.suggestion-submit-btn:disabled { opacity: 0.6; cursor: not-allowed; }
.suggestion-success {
    padding: 24px 0;
    color: var(--text);
    font-size: 1rem;
    line-height: 1.7;
}

/* Light mode overrides */
body.light-mode .suggestion-form-wrap {
    background: #ffffff;
    border-color: rgba(124,95,207,0.12);
}
body.light-mode .suggestion-textarea {
    background: rgba(124,95,207,0.05);
    border-color: rgba(124,95,207,0.18);
    color: var(--text);
}
body.light-mode .suggestion-textarea:focus {
    border-color: var(--primary);
}

/* Mobile */
@media (max-width: 600px) {
    .suggestion-form-wrap { padding: 20px 16px; }
    .suggestion-submit-btn { width: 100%; justify-content: center; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   REPORT MODAL STYLES
   ═══════════════════════════════════════════════════════════════════════════ */

/* Red tint on the report settings button */
.settings-report-btn {
    background: rgba(239,68,68,0.08) !important;
    border-color: rgba(239,68,68,0.28) !important;
    color: #f87171 !important;
}
.settings-report-btn:hover {
    background: rgba(239,68,68,0.16) !important;
    border-color: rgba(239,68,68,0.5) !important;
}
body.light-mode .settings-report-btn {
    background: rgba(220,38,38,0.06) !important;
    border-color: rgba(220,38,38,0.25) !important;
    color: #dc2626 !important;
}

/* Footer report link */
#footerReportLink {
    color: #f87171 !important;
    transition: color 0.2s ease;
}
#footerReportLink:hover { color: #ef4444 !important; }
body.light-mode #footerReportLink { color: #dc2626 !important; }
body.light-mode #footerReportLink:hover { color: #b91c1c !important; }

/* What you can report list */
.report-what-section {
    background: rgba(184,169,248,0.06);
    border: 1px solid rgba(184,169,248,0.14);
    border-radius: 14px;
    padding: 14px 18px;
    margin-bottom: 20px;
    text-align: left;
}
body.light-mode .report-what-section {
    background: rgba(124,95,207,0.05);
    border-color: rgba(124,95,207,0.14);
}
.report-what-title {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 10px;
}
.report-what-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 7px;
}
.report-what-list li {
    font-size: 0.88rem;
    color: var(--text);
    display: flex;
    align-items: flex-start;
    gap: 9px;
    line-height: 1.45;
    opacity: 0.85;
}
.report-what-list li i {
    color: var(--primary);
    font-size: 0.8rem;
    margin-top: 2px;
    flex-shrink: 0;
    width: 14px;
    text-align: center;
}

/* Report form fields */
.report-field-label {
    display: block;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 7px;
    text-align: left;
}
.report-required {
    color: #f87171;
    margin-left: 2px;
}
.report-textarea {
    width: 100%;
    background: rgba(184,169,248,0.06);
    border: 1.5px solid rgba(184,169,248,0.18);
    border-radius: 12px;
    padding: 14px 16px;
    font-size: 0.93rem;
    color: var(--text);
    font-family: inherit;
    resize: vertical;
    min-height: 120px;
    outline: none;
    transition: border-color 0.25s ease;
    box-sizing: border-box;
}
.report-textarea:focus {
    border-color: var(--primary);
    background: rgba(184,169,248,0.09);
}
.report-textarea::placeholder { color: var(--muted); opacity: 0.7; }
body.light-mode .report-textarea {
    background: rgba(124,95,207,0.05);
    border-color: rgba(124,95,207,0.18);
    color: var(--text);
}
body.light-mode .report-textarea:focus { border-color: var(--primary); }

.report-char-count {
    text-align: right;
    font-size: 0.75rem;
    color: var(--muted);
    margin-top: 5px;
    margin-bottom: 6px;
}
.report-fine-print {
    font-size: 0.78rem;
    color: var(--muted);
    line-height: 1.55;
    margin-top: 14px;
    text-align: center;
    opacity: 0.8;
}

@media (max-width: 480px) {
    .report-what-section { padding: 12px 14px; }
    .report-what-list li { font-size: 0.83rem; }
}

/* Report modal — optional email note */
.report-email-note {
    font-size: 0.8rem;
    color: var(--muted);
    line-height: 1.5;
    margin-top: 7px;
    margin-bottom: 4px;
    text-align: left;
    display: flex;
    align-items: flex-start;
    gap: 7px;
    opacity: 0.85;
}
.report-email-note i {
    color: var(--primary);
    font-size: 0.78rem;
    margin-top: 2px;
    flex-shrink: 0;
}
body.light-mode .report-email-note { color: var(--muted); }

/* Report modal — extra top padding so close button doesn't overlap the icon/title */
.report-modal-box {
    padding-top: 60px !important;
}
@media (max-width: 480px) {
    .report-modal-box { padding-top: 54px !important; }
}