/* ============================================================
   LoaD Scripts — dark purple theme (Inter + JetBrains Mono)
   Based on the official React template design
   ============================================================ */

:root {
    --accent:       #7c3aed;   /* violet-600 */
    --accent-h:     #8b5cf6;   /* violet-500 — hover */
    --accent-dim:   rgba(139, 92, 246, 0.10);
    --accent-glow:  rgba(139, 92, 246, 0.25);
    --bg:           #0a0514;
    --card:         #130b29;
    --card-hover:   #1a103c;
    --border:       #2a1a5e;
    --border-h:     rgba(139, 92, 246, 0.45);
    --text:         #e2e8f0;
    --text-muted:   #94a3b8;
    --text-dim:     #64748b;
}

/* ── Base ──────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

body {
    background: var(--bg);
    color: var(--text);
    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

main { flex: 1; }
a { color: inherit; }
code, .font-mono { font-family: 'JetBrains Mono', ui-monospace, monospace; }

/* ── Navbar ────────────────────────────────────────────────── */
#mainNav {
    background: rgba(10, 5, 20, 0.80);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border);
    min-height: 64px;
}

#mainNav .navbar-brand {
    font-weight: 900;
    font-size: 1.15rem;
    letter-spacing: -0.01em;
    color: #fff;
}

#mainNav .navbar-brand .brand-accent { color: var(--accent-h); }

#mainNav .nav-link {
    color: var(--text-dim);
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    transition: color .15s;
    padding: .375rem .75rem;
}

#mainNav .nav-link:hover { color: #fff; }

.nav-right-link {
    font-size: .875rem;
    font-weight: 500;
    color: var(--text-muted);
    transition: color .15s;
    text-decoration: none;
}

.nav-right-link:hover { color: #fff; }

/* ── Buttons ───────────────────────────────────────────────── */
.btn-purple {
    background: var(--accent);
    color: #fff;
    border: none;
    font-weight: 600;
    border-radius: 8px;
    box-shadow: 0 0 20px -5px rgba(139,92,246,.4);
    transition: background .15s, box-shadow .15s;
}

.btn-purple:hover, .btn-purple:focus {
    background: var(--accent-h);
    color: #fff;
    box-shadow: 0 0 28px -4px rgba(139,92,246,.55);
}

.btn-outline-purple {
    background: transparent;
    color: #fff;
    border: 1px solid var(--border);
    font-weight: 600;
    border-radius: 8px;
    transition: background .15s;
}

.btn-outline-purple:hover {
    background: var(--card-hover);
    color: #fff;
    border-color: var(--border);
}

.btn-ghost-purple {
    background: rgba(139,92,246,.15);
    color: var(--accent-h);
    border: 1px solid rgba(139,92,246,.3);
    font-weight: 600;
    border-radius: 8px;
    transition: all .15s;
}

.btn-ghost-purple:hover {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
}

/* ── Typography helpers ────────────────────────────────────── */
.text-purple { color: var(--accent-h) !important; }
.fw-black    { font-weight: 900 !important; }

/* ── Hero ──────────────────────────────────────────────────── */
.hero-section {
    padding: 6rem 1rem 5rem;
    text-align: center;
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    border: 1px solid rgba(139,92,246,.3);
    background: rgba(139,92,246,.1);
    color: #c4b5fd;
    border-radius: 999px;
    padding: .35em .95em;
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .05em;
    margin-bottom: 2rem;
}

.hero-badge-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent-h);
    flex-shrink: 0;
}

.hero-headline {
    font-size: clamp(2.6rem, 6vw, 5rem);
    font-weight: 900;
    line-height: 1.05;
    letter-spacing: -0.03em;
    color: #fff;
    margin-bottom: 1.5rem;
}

.hero-headline .accent-word {
    background: linear-gradient(135deg, #a78bfa, #6366f1);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    display: block;
}

.hero-sub {
    font-size: 1.1rem;
    color: var(--text-muted);
    max-width: 560px;
    line-height: 1.65;
    margin: 0 auto 2.5rem;
}

/* ── Stats bar ─────────────────────────────────────────────── */
.stats-bar {
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    background: #0d071b;
    padding: 4rem 0;
}

.stat-number {
    font-size: 3rem;
    font-weight: 900;
    color: var(--accent-h);
    letter-spacing: -0.03em;
    line-height: 1;
}

.stat-label {
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--text-dim);
    margin-top: .35rem;
}

/* ── Game cards (homepage) ─────────────────────────────────── */
.game-card {
    display: block;
    border: 1px solid var(--border);
    border-radius: 16px;
    overflow: hidden;
    text-decoration: none;
    color: var(--text);
    background: var(--card);
    transition: border-color .2s, box-shadow .2s;
}

.game-card:hover {
    border-color: rgba(139,92,246,.5);
    box-shadow: 0 0 30px -5px rgba(139,92,246,.3);
    color: var(--text);
}

.game-card-bg {
    height: 192px;
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #0a0520 0%, #160840 45%, #0c122a 100%);
}

.game-card-bg::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 60% 60% at 75% 40%, rgba(139,92,246,.2) 0%, transparent 65%),
        radial-gradient(ellipse 40% 40% at 20% 70%, rgba(50,20,120,.3) 0%, transparent 60%);
}

.game-card-bg .game-label {
    position: absolute;
    bottom: 1.5rem;
    left: 1.5rem;
    font-size: 1.5rem;
    font-weight: 900;
    letter-spacing: -0.02em;
    color: #fff;
    z-index: 1;
}

.game-card-footer {
    padding: 1rem 1.25rem;
    border-top: 1px solid var(--border);
    background: rgba(10,5,20,.5);
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: .82rem;
}

/* ── Game header (scripts page) ────────────────────────────── */
.game-header {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 2rem;
    display: flex;
    gap: 1.5rem;
    align-items: center;
    flex-wrap: wrap;
}

.game-thumb {
    width: 96px;
    height: 96px;
    border-radius: 12px;
    flex-shrink: 0;
    background: linear-gradient(135deg, #160840 0%, #0a1535 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.2rem;
    color: var(--accent-h);
    border: 1px solid var(--border);
}

/* ── Script cards ──────────────────────────────────────────── */
.script-cards {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.script-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
    transition: border-color .2s, box-shadow .2s;
}

.script-card:hover { border-color: #3a2a7e; }

.script-card:has(.accordion-button:not(.collapsed)) {
    border-color: var(--accent-h);
    box-shadow: 0 0 30px -10px rgba(139,92,246,.15);
}

.script-card .accordion-button {
    background: transparent;
    color: var(--text);
    padding: 1.25rem 1.5rem;
    box-shadow: none;
    gap: .75rem;
    border-radius: 0;
}

.script-card .accordion-button:not(.collapsed) {
    background: transparent;
    color: var(--text);
    box-shadow: none;
}

.script-card .accordion-button::after {
    filter: invert(1) opacity(.4);
    flex-shrink: 0;
}

.script-card .accordion-collapse {
    background: var(--bg);
    border-top: 1px solid var(--border);
}

.script-card .accordion-body { padding: 1.5rem 2rem; }

/* Price badges */
.price-brl { color: #6ee89e; font-weight: 700; }
.price-usd { color: #93c5fd; font-weight: 700; }

/* ── Badges ────────────────────────────────────────────────── */
.badge-platform {
    display: inline-flex;
    align-items: center;
    background: rgba(100,116,139,.15);
    color: #e2e8f0;
    border: 1px solid rgba(100,116,139,.35);
    font-weight: 700;
    font-size: .7rem;
    padding: .3em .7em;
    border-radius: 999px;
}

.badge-category,
.badge-pve     { background: rgba(16,185,129,.12); color: #6ee89e; border: 1px solid rgba(16,185,129,.25); font-weight:700; font-size:.7rem; padding:.3em .7em; border-radius:999px; }
.badge-pvp     { background: rgba(239,68,68,.12);  color: #fca5a5; border: 1px solid rgba(239,68,68,.25);  font-weight:700; font-size:.7rem; padding:.3em .7em; border-radius:999px; }
.badge-social  { background: rgba(148,163,184,.12);color: #cbd5e1; border: 1px solid rgba(148,163,184,.25);font-weight:700; font-size:.7rem; padding:.3em .7em; border-radius:999px; }
.badge-system  { background: rgba(34,197,94,.12);  color: #86efac; border: 1px solid rgba(34,197,94,.25);  font-weight:700; font-size:.7rem; padding:.3em .7em; border-radius:999px; }
.badge-addons  { background: rgba(20,184,166,.12); color: #5eead4; border: 1px solid rgba(20,184,166,.25); font-weight:700; font-size:.7rem; padding:.3em .7em; border-radius:999px; }
.badge-visuals { background: rgba(59,130,246,.12); color: #93c5fd; border: 1px solid rgba(59,130,246,.25); font-weight:700; font-size:.7rem; padding:.3em .7em; border-radius:999px; }

/* ── Cards ─────────────────────────────────────────────────── */
.card {
    background: var(--card);
    border-color: var(--border);
    border-radius: 16px;
}

/* ── Forms ─────────────────────────────────────────────────── */
.form-control, .form-select {
    background: var(--bg);
    border-color: var(--border);
    color: var(--text);
    border-radius: 8px;
    padding: .75rem 1rem;
}

.form-control:focus, .form-select:focus {
    background: var(--bg);
    border-color: var(--accent-h);
    color: var(--text);
    box-shadow: 0 0 0 .15rem rgba(139,92,246,.2);
}

.form-control::placeholder { color: var(--text-dim); }

.form-control:disabled, .form-control[readonly] {
    background: rgba(42,26,94,.15);
    opacity: .6;
}

.form-text { color: var(--text-dim); font-size: .78rem; }
.form-label { font-weight: 700; font-size: .875rem; color: #fff; }

/* ── Auth glow card ────────────────────────────────────────── */
.auth-glow-card {
    position: relative;
    overflow: hidden;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 16px;
    max-width: 448px;
    width: 100%;
}

.auth-glow-card::before {
    content: '';
    position: absolute;
    top: -96px; right: -96px;
    width: 192px; height: 192px;
    background: rgba(139,92,246,.2);
    border-radius: 50%;
    filter: blur(48px);
    pointer-events: none;
}

.auth-glow-card::after {
    content: '';
    position: absolute;
    bottom: -96px; left: -96px;
    width: 192px; height: 192px;
    background: rgba(99,102,241,.2);
    border-radius: 50%;
    filter: blur(48px);
    pointer-events: none;
}

.auth-inner {
    position: relative;
    z-index: 1;
    padding: 2.5rem;
}

.auth-icon-wrap {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--bg);
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
    color: var(--accent-h);
    margin: 0 auto 1rem;
}

/* ── Stat cards (dashboard) ────────────────────────────────── */
.stat-card-d {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 1.5rem;
}

.stat-card-label {
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--text-dim);
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: .4rem;
}

/* ── Tables ────────────────────────────────────────────────── */
.table {
    --bs-table-bg: transparent;
    --bs-table-hover-bg: rgba(26, 16, 60, 0.5);
    color: var(--text);
}

.table thead th {
    color: var(--text-dim);
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    border-bottom-color: var(--border);
    background: var(--bg);
    padding: 1rem 1.5rem;
}

.table td {
    border-color: var(--border);
    padding: 1rem 1.5rem;
    vertical-align: middle;
}

/* ── Alerts ────────────────────────────────────────────────── */
.alert-success {
    background: rgba(16,185,129,.08);
    border-color: rgba(16,185,129,.2);
    color: #6ee89e;
    border-radius: 8px;
}

.alert-danger {
    background: rgba(239,68,68,.08);
    border-color: rgba(239,68,68,.2);
    color: #fca5a5;
    border-radius: 8px;
}

/* ── Cooldown badge ────────────────────────────────────────── */
.badge-cooldown {
    background: rgba(234,179,8,.12);
    color: #fde047;
    border: 1px solid rgba(234,179,8,.25);
    font-size: .7rem;
    font-weight: 600;
    padding: .2em .55em;
    border-radius: 999px;
    white-space: nowrap;
}

/* ── Contact cards ─────────────────────────────────────────── */
.contact-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    transition: border-color .2s;
    height: 100%;
    position: relative;
}

.contact-card-discord:hover  { border-color: rgba(88,101,242,.4); }
.contact-card-whatsapp:hover { border-color: rgba(37,211,102,.3); }
.contact-card-email:hover    { border-color: rgba(139,92,246,.4); }
.contact-card-hours:hover    { border-color: rgba(234,179,8,.35); }

.contact-card-link {
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    position: relative;
}
.contact-card-link:hover { color: inherit; }

.contact-card-arrow {
    position: absolute;
    top: 1.25rem;
    right: 1.25rem;
    font-size: .85rem;
    color: var(--text-dim);
    transition: color .2s, transform .2s;
}
.contact-card-link:hover .contact-card-arrow {
    color: var(--accent-h);
    transform: translate(2px, -2px);
}

.contact-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    flex-shrink: 0;
}

.contact-label {
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--text-dim);
    margin-bottom: .25rem;
}

.contact-value {
    font-size: 1rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: .5rem;
}

.contact-desc {
    font-size: .85rem;
    color: var(--text-muted);
    line-height: 1.6;
    margin: 0;
}

/* ── Footer ────────────────────────────────────────────────── */
footer {
    border-top: 1px solid var(--border) !important;
    background: var(--bg);
}

/* ── Misc ──────────────────────────────────────────────────── */
.divider { border-color: var(--border) !important; }

.section-label {
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--text-dim);
}