/* ============================================================
 * Academy — Tema Gaming
 * Palette: slate-950 base, cyan-400 + violet-500 + lime-400 accenti
 * ============================================================ */

:root {
    /* ─── DARK MODE (default) ─── */
    --bg-deep:      #05070d;
    --bg-card:      rgba(15, 23, 42, 0.7);   /* slate-900 + alpha */
    --bg-card-hi:   rgba(30, 41, 59, 0.8);
    --border-neon:  rgba(34, 211, 238, 0.4); /* cyan-400/40 */
    --border-soft:  rgba(148, 163, 184, 0.15);

    --neon-cyan:    #22d3ee;
    --neon-violet:  #a855f7;
    --neon-lime:    #a3e635;
    /* Rosa H&A — colore brand "We Motivate People" */
    --neon-pink:    #ff1763;
    --brand-pink:   #ff1763;

    --text-primary: #e2e8f0;
    --text-muted:   #94a3b8;
    --text-dim:     #64748b;

    /* Modulatori intensità (alterati in light mode) */
    --glow-intensity: 1;       /* moltiplicatore opacità glow */
    --bg-blob-opacity: 1;      /* aloni di colore sullo sfondo */
    --grid-opacity: 0.06;      /* grid HUD */
}

/* ─── LIGHT MODE: override "gentile" ─── */
html[data-theme="light"] {
    --bg-deep:      #f1f5f9;                  /* slate-100 */
    --bg-card:      rgba(255, 255, 255, 0.95);
    --bg-card-hi:   rgba(248, 250, 252, 1);
    --border-neon:  rgba(34, 211, 238, 0.5);
    --border-soft:  rgba(15, 23, 42, 0.12);

    /* Neon leggermente scuriti per migliore leggibilità su bianco */
    --neon-cyan:    #0891b2;
    --neon-violet:  #7c3aed;
    --neon-lime:    #65a30d;
    --neon-pink:    #db2777;
    --brand-pink:   #db2777;

    --text-primary: #0f172a;                  /* slate-900 */
    --text-muted:   #475569;                  /* slate-600 */
    --text-dim:     #64748b;                  /* slate-500 (più leggibile su bianco di slate-400) */

    --glow-intensity: 0.35;                   /* glow ridotti del 65% */
    --bg-blob-opacity: 0.35;
    --grid-opacity: 0.04;
}

html { transition: background-color 0.25s ease, color 0.25s ease; }
body.gaming { transition: background 0.3s ease, color 0.3s ease; }

/* ----------- Sfondo globale animato ----------- */
body.gaming {
    background:
        radial-gradient(circle at 15% 20%, color-mix(in oklab, var(--neon-violet) calc(18% * var(--bg-blob-opacity)), transparent), transparent 40%),
        radial-gradient(circle at 85% 80%, color-mix(in oklab, var(--neon-cyan) calc(15% * var(--bg-blob-opacity)), transparent), transparent 45%),
        radial-gradient(circle at 50% 50%, color-mix(in oklab, #6366f1 calc(8% * var(--bg-blob-opacity)), transparent), transparent 60%),
        var(--bg-deep);
    color: var(--text-primary);
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    min-height: 100vh;
    overflow-x: hidden;
}

body.gaming::before {
    content: "";
    position: fixed;
    inset: 0;
    background-image:
        linear-gradient(color-mix(in oklab, #6366f1 calc(100% * var(--grid-opacity)), transparent) 1px, transparent 1px),
        linear-gradient(90deg, color-mix(in oklab, #6366f1 calc(100% * var(--grid-opacity)), transparent) 1px, transparent 1px);
    background-size: 40px 40px;
    pointer-events: none;
    z-index: 0;
    mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%);
}

/* ----------- Tipografia display ----------- */
.font-display {
    font-family: 'Orbitron', 'Rajdhani', 'Inter', system-ui, sans-serif;
    letter-spacing: 0.04em;
    font-weight: 700;
}

/* ----------- Header gaming ----------- */
.gaming-header {
    background:
        linear-gradient(180deg, rgba(15, 23, 42, 0.9), rgba(15, 23, 42, 0.4));
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--border-neon);
    position: relative;
    z-index: 10;
}

.gaming-header::after {
    content: "";
    position: absolute;
    bottom: -1px; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg,
        transparent, var(--neon-cyan), var(--neon-violet), transparent);
    opacity: 0.6;
}

/* ----------- Card stile HUD ----------- */
.hud-card {
    background: var(--bg-card);
    border: 1px solid var(--border-soft);
    border-radius: 14px;
    padding: 1.25rem;
    position: relative;
    transition: all 0.25s ease;
    overflow: hidden;
}

.hud-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg,
        rgba(34, 211, 238, 0.06), transparent 50%);
    pointer-events: none;
}

.hud-card:hover {
    border-color: var(--border-neon);
    box-shadow:
        0 0 20px rgba(34, 211, 238, 0.15),
        0 0 0 1px rgba(34, 211, 238, 0.3) inset;
    transform: translateY(-2px);
}

.hud-card-violet:hover {
    border-color: rgba(168, 85, 247, 0.5);
    box-shadow:
        0 0 24px rgba(168, 85, 247, 0.2),
        0 0 0 1px rgba(168, 85, 247, 0.4) inset;
}

/* ----------- Status / tag ----------- */
.tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 3px 10px;
    border-radius: 999px;
    border: 1px solid currentColor;
}

.tag-cyan   { color: var(--neon-cyan);   background: rgba(34, 211, 238, 0.08); }
.tag-violet { color: var(--neon-violet); background: rgba(168, 85, 247, 0.08); }
.tag-lime   { color: var(--neon-lime);   background: rgba(163, 230, 53, 0.1); }
.tag-pink   { color: var(--neon-pink);   background: rgba(244, 114, 182, 0.08); }
.tag-muted  { color: var(--text-dim);    background: rgba(100, 116, 139, 0.1); border-color: var(--text-dim); }

/* ----------- Progress bar XP ----------- */
.xp-track {
    height: 8px;
    background: rgba(15, 23, 42, 0.8);
    border-radius: 999px;
    overflow: hidden;
    border: 1px solid var(--border-soft);
    position: relative;
}

.xp-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--neon-cyan), var(--neon-violet));
    border-radius: 999px;
    position: relative;
    transition: width 1.2s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 0 12px var(--neon-cyan);
}
.xp-fill-trophy {
    background: linear-gradient(90deg, var(--neon-lime), var(--neon-cyan));
    box-shadow: 0 0 12px var(--neon-lime);
}

.xp-fill::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
    animation: shimmer 2.5s linear infinite;
}

@keyframes shimmer {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

/* ----------- Avatar / livello ----------- */
.level-badge {
    width: 56px; height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--neon-violet), var(--neon-cyan));
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: 'Orbitron', sans-serif;
    font-weight: 800;
    color: #0f172a;
    font-size: 1.4rem;
    position: relative;
    box-shadow: 0 0 24px rgba(34, 211, 238, 0.4);
}

.level-badge::after {
    content: "";
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    border: 1px dashed rgba(34, 211, 238, 0.4);
    animation: rotate-slow 8s linear infinite;
}

/* ----------- Avatar evolutivo (cresce coi trofei) ----------- */
.avatar-evolved {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    position: relative;
    background: radial-gradient(circle at 30% 30%,
                rgba(255, 255, 255, 0.08),
                rgba(15, 23, 42, 0.85) 70%);
    border: 2px solid var(--avatar-color, var(--neon-cyan));
    box-shadow: 0 0 24px var(--avatar-glow, rgba(34, 211, 238, 0.4)),
                inset 0 0 12px rgba(15, 23, 42, 0.5);
    transition: all 0.4s ease;
    overflow: visible;
}

.avatar-image {
    display: block;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.4));
    user-select: none;
    -webkit-user-drag: none;
    /* DiceBear robot: spazio interno per non toccare il bordo */
    width: 78%;
    height: 78%;
    object-fit: contain;
}

/* Foto utente reale: croppata a cerchio pieno */
.avatar-image-photo {
    width: 92%;
    height: 92%;
    object-fit: cover;
    border-radius: 50%;
}

.avatar-evolved-sm  { width: 44px; height: 44px; font-size: 1.4rem; }
.avatar-evolved-md  { width: 64px; height: 64px; font-size: 1.9rem; }
.avatar-evolved-lg  { width: 96px; height: 96px; font-size: 2.8rem; }
.avatar-evolved-xl  { width: 128px; height: 128px; font-size: 3.6rem; }

/* Anello rotante di tier (decorativo) */
.avatar-evolved::after {
    content: "";
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    border: 1px dashed var(--avatar-color, var(--neon-cyan));
    opacity: 0.4;
    animation: rotate-slow 12s linear infinite;
}

/* Progress ring SVG (per la barra di avanzamento al tier successivo) */
.avatar-progress-ring {
    position: absolute;
    inset: -10px;
    width: calc(100% + 20px);
    height: calc(100% + 20px);
    transform: rotate(-90deg);
    pointer-events: none;
}

.avatar-progress-ring circle {
    fill: none;
    stroke-width: 3;
    stroke-linecap: round;
}
.avatar-progress-ring .bg   { stroke: rgba(148, 163, 184, 0.15); }
.avatar-progress-ring .fill { stroke: var(--avatar-color, var(--neon-cyan));
                              transition: stroke-dashoffset 1.2s cubic-bezier(0.16, 1, 0.3, 1);
                              filter: drop-shadow(0 0 4px var(--avatar-glow, rgba(34, 211, 238, 0.5))); }

/* Decorazioni tier sopra l'avatar (stella, scudo, ali, corona…) */
.avatar-deco {
    position: absolute;
    top: -10%;
    right: -10%;
    width: 38%;
    height: 38%;
    filter: drop-shadow(0 0 6px var(--avatar-glow, rgba(34, 211, 238, 0.5)));
    z-index: 2;
    pointer-events: none;
    animation: deco-bob 3.5s ease-in-out infinite;
}

.avatar-deco-wings {
    top: -22%;
    right: 50%;
    transform: translateX(50%);
    width: 70%;
    height: 30%;
}

.avatar-deco-crown {
    top: -32%;
    right: 50%;
    transform: translateX(50%);
    width: 70%;
    height: 32%;
    animation: deco-crown 2.5s ease-in-out infinite;
}

@keyframes deco-bob {
    0%, 100% { transform: translateY(0) rotate(-4deg); }
    50%      { transform: translateY(-3px) rotate(4deg); }
}

@keyframes deco-crown {
    0%, 100% { transform: translateX(50%) translateY(0)    scale(1); }
    50%      { transform: translateX(50%) translateY(-2px) scale(1.05); }
}

/* Tier badge mini (numero) sotto l'avatar */
.tier-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: 'Orbitron', sans-serif;
    font-size: 0.65rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 3px 9px;
    border-radius: 999px;
    color: var(--avatar-color, var(--neon-cyan));
    background: rgba(15, 23, 42, 0.7);
    border: 1px solid var(--avatar-color, var(--neon-cyan));
}

@keyframes rotate-slow {
    from { transform: rotate(0); }
    to   { transform: rotate(360deg); }
}

/* ----------- Bottoni gaming ----------- */
.btn-neon {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0.6rem 1.2rem;
    font-family: 'Orbitron', sans-serif;
    font-weight: 600;
    font-size: 0.85rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border-radius: 8px;
    border: 1px solid var(--neon-cyan);
    background: linear-gradient(135deg,
        rgba(34, 211, 238, 0.15),
        rgba(168, 85, 247, 0.15));
    color: var(--neon-cyan);
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
    position: relative;
    overflow: hidden;
}

.btn-neon:hover {
    background: linear-gradient(135deg,
        rgba(34, 211, 238, 0.3),
        rgba(168, 85, 247, 0.3));
    box-shadow: 0 0 16px rgba(34, 211, 238, 0.5);
    transform: translateY(-1px);
}

.btn-neon-ghost {
    background: transparent;
    border-color: var(--text-dim);
    color: var(--text-muted);
}

.btn-neon-ghost:hover {
    color: var(--neon-cyan);
    border-color: var(--neon-cyan);
    background: rgba(34, 211, 238, 0.05);
    box-shadow: 0 0 12px rgba(34, 211, 238, 0.2);
}

/* ----------- Mission card progress ----------- */
.mission-progress {
    height: 4px;
    background: rgba(15, 23, 42, 0.8);
    border-radius: 999px;
    overflow: hidden;
    margin-top: 12px;
}

.mission-progress-fill {
    height: 100%;
    border-radius: 999px;
    transition: width 1s ease;
}

.mission-progress-fill.locked    { background: var(--text-dim); width: 0; }
.mission-progress-fill.todo      { background: linear-gradient(90deg, var(--neon-cyan), transparent); width: 5%; }
.mission-progress-fill.in-progress { background: linear-gradient(90deg, var(--neon-cyan), var(--neon-violet)); width: 55%; }
.mission-progress-fill.completed { background: linear-gradient(90deg, var(--neon-lime), var(--neon-cyan)); width: 100%;
    box-shadow: 0 0 10px var(--neon-lime); }

/* ----------- Trofei ----------- */
.trophy {
    width: 80px; height: 80px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--neon-violet), var(--neon-pink));
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    box-shadow: 0 0 24px rgba(168, 85, 247, 0.5);
    position: relative;
}

.trophy.locked {
    background: rgba(30, 41, 59, 0.6);
    box-shadow: none;
    filter: grayscale(1);
    opacity: 0.4;
}

/* ----------- Animazioni di ingresso ----------- */
.fade-up {
    animation: fadeUp 0.7s ease both;
}

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

.stagger-1 { animation-delay: 0.05s; }
.stagger-2 { animation-delay: 0.15s; }
.stagger-3 { animation-delay: 0.25s; }
.stagger-4 { animation-delay: 0.35s; }

/* ============================================================
 * LIGHT MODE — OVERRIDE MIRATI
 * Tutto ciò che usa già le variabili eredita il light automatic.
 * Qui ridefiniamo solo le regole con colori HEX/RGBA hardcoded.
 * ============================================================ */
html[data-theme="light"] body.gaming {
    color: var(--text-primary);
}

/* Card HUD: bordo soft più visibile, shadow elegante invece di glow neon */
html[data-theme="light"] .hud-card {
    border-color: var(--border-soft);
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05), 0 1px 2px rgba(15, 23, 42, 0.04);
}
html[data-theme="light"] .hud-card::before {
    background: linear-gradient(135deg, rgba(34, 211, 238, 0.03), transparent 50%);
}
html[data-theme="light"] .hud-card:hover {
    box-shadow: 0 0 0 1px var(--neon-cyan), 0 4px 12px rgba(8, 145, 178, 0.12);
}

/* Header glassmorphism light */
html[data-theme="light"] .gaming-header {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.7));
}

/* Tag pills: sfondo più contrastato */
html[data-theme="light"] .tag-cyan   { background: rgba(8, 145, 178, 0.1); }
html[data-theme="light"] .tag-violet { background: rgba(124, 58, 237, 0.1); }
html[data-theme="light"] .tag-lime   { background: rgba(101, 163, 13, 0.12); }
html[data-theme="light"] .tag-pink   { background: rgba(219, 39, 119, 0.1); }
html[data-theme="light"] .tag-muted  {
    background: rgba(15, 23, 42, 0.06);
    color: #475569;
    border-color: #94a3b8;
}

/* Mission card / hover state in light */
html[data-theme="light"] .mission-card,
html[data-theme="light"] .news-card-v2,
html[data-theme="light"] .panel,
html[data-theme="light"] .trophy-slot {
    background: var(--bg-card);
    border-color: var(--border-soft);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
html[data-theme="light"] .mission-card:hover {
    border-color: var(--neon-cyan);
    box-shadow: 0 4px 14px rgba(8, 145, 178, 0.15);
}
html[data-theme="light"] .news-card-v2:hover {
    border-color: var(--neon-violet);
    box-shadow: 0 4px 14px rgba(124, 58, 237, 0.15);
}

/* XP track in light: bordo più visibile */
html[data-theme="light"] .xp-track {
    background: rgba(15, 23, 42, 0.06);
    border-color: var(--border-soft);
}

/* Section hero: meno gradient overlay in light */
html[data-theme="light"] .section-hero {
    background: linear-gradient(90deg,
        color-mix(in oklab, var(--sec-color) 7%, transparent),
        transparent 60%);
}

/* Nav item attivo: sfondo più visibile in light */
html[data-theme="light"] .nav-item {
    color: var(--text-muted);
}
html[data-theme="light"] .nav-item:hover {
    background: rgba(15, 23, 42, 0.04);
    color: var(--text-primary);
}
html[data-theme="light"] .nav-item.is-active {
    background: color-mix(in oklab, var(--sec-color, var(--neon-cyan)) 12%, transparent);
}

/* Filter chips (missioni, news, classifica) */
html[data-theme="light"] .filter-chip-bg { background: rgba(15, 23, 42, 0.04); }

/* Footer cyber: testo più scuro */
html[data-theme="light"] footer { color: var(--text-muted); }

/* Form input: bordi visibili */
html[data-theme="light"] input[type="text"],
html[data-theme="light"] input[type="email"],
html[data-theme="light"] input[type="url"],
html[data-theme="light"] input[type="number"],
html[data-theme="light"] input[type="password"],
html[data-theme="light"] textarea,
html[data-theme="light"] select {
    background: white !important;
    color: var(--text-primary) !important;
    border-color: var(--border-soft) !important;
}

/* Btn neon: più contrastato in light */
html[data-theme="light"] .btn-neon {
    color: var(--neon-cyan);
    background: linear-gradient(135deg,
        color-mix(in oklab, var(--neon-cyan) 10%, transparent),
        color-mix(in oklab, var(--neon-violet) 10%, transparent));
    border-color: var(--neon-cyan);
}
html[data-theme="light"] .btn-neon:hover {
    background: linear-gradient(135deg,
        color-mix(in oklab, var(--neon-cyan) 20%, transparent),
        color-mix(in oklab, var(--neon-violet) 20%, transparent));
    box-shadow: 0 2px 12px rgba(8, 145, 178, 0.3);
}

/* Slate text overrides per Tailwind classi hardcoded usate ovunque */
html[data-theme="light"] .text-white { color: var(--text-primary); }
html[data-theme="light"] .text-slate-300,
html[data-theme="light"] .text-slate-200 { color: var(--text-muted); }
html[data-theme="light"] .text-slate-400,
html[data-theme="light"] .text-slate-500 { color: var(--text-dim); }

/* ────────── FIX BACKGROUND SCURI INLINE ──────────
 * Alcuni pannelli (HUD player, filtri leaderboard/missioni, barre)
 * hanno background scuro via style inline → in light mode restano scuri.
 * Li sovrascrivo qui (gli stessi selettori attribute funzionano solo se
 * lo style inline contiene esattamente quella stringa). */
html[data-theme="light"] [style*="rgba(15, 23, 42, 0.4)"],
html[data-theme="light"] [style*="rgba(15, 23, 42, 0.5)"],
html[data-theme="light"] [style*="rgba(15, 23, 42, 0.6)"],
html[data-theme="light"] [style*="rgba(15, 23, 42, 0.7)"],
html[data-theme="light"] [style*="rgba(15, 23, 42, 0.9)"] {
    background: rgba(248, 250, 252, 0.85) !important;
    border-color: var(--border-soft) !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
}

/* HUD player nella dashboard (gradient con due colori) */
html[data-theme="light"] [style*="linear-gradient(135deg, rgba(34, 211, 238, 0.06), rgba(15, 23, 42, 0.7))"] {
    background: linear-gradient(135deg, rgba(8, 145, 178, 0.04), rgba(255, 255, 255, 0.95)) !important;
    border-color: rgba(8, 145, 178, 0.25) !important;
}

/* ECCEZIONE: lo splash deve restare dark anche in light mode */
html[data-theme="light"] .splash-root [style*="rgba(15, 23, 42"],
html[data-theme="light"] .splash-content [style*="rgba(15, 23, 42"],
html[data-theme="light"] .splash-bg,
html[data-theme="light"] .stat-pill {
    background: rgba(15, 23, 42, 0.7) !important;
    border-color: var(--sc, var(--neon-cyan)) !important;
    box-shadow: 0 0 18px var(--sg, rgba(34, 211, 238, 0.5)) !important;
    color: white !important;
}
html[data-theme="light"] .splash-headline,
html[data-theme="light"] .splash-body,
html[data-theme="light"] .splash-cta,
html[data-theme="light"] .splash-kicker,
html[data-theme="light"] .splash-position,
html[data-theme="light"] .splash-source {
    color: white;
}

/* Login page resta dark (è la prima impressione brand) */
html[data-theme="light"] body.gaming > .w-full.max-w-md [style*="rgba(15, 23, 42, 0.9)"] {
    background: rgba(15, 23, 42, 0.9) !important;
    color: white;
}

/* Section hero (header sezione "I tuoi trofei", "Missioni", "Classifica"…)
   In light: titolo prende il colore della sezione + bordo colorato su tutti i lati */
html[data-theme="light"] .section-hero {
    background: linear-gradient(90deg,
        color-mix(in oklab, var(--sec-color) 10%, white),
        color-mix(in oklab, var(--sec-color) 5%, white) 100%);
    border: 1.5px solid color-mix(in oklab, var(--sec-color) 55%, white);
    border-left: 4px solid var(--sec-color);
    box-shadow: 0 1px 4px color-mix(in oklab, var(--sec-color) 18%, transparent);
}
html[data-theme="light"] .section-hero .section-title {
    color: var(--sec-color);
}

/* Mission card footer: barra grigia in fondo alla card */
html[data-theme="light"] .mission-card .mc-footer {
    background: rgba(248, 250, 252, 0.85);
    border-top-color: var(--border-soft);
}

/* Mission progress track (la barretta sotto la card) */
html[data-theme="light"] .mission-progress {
    background: rgba(15, 23, 42, 0.06);
}

/* Avatar evolved: sfondo radiale interno */
html[data-theme="light"] .avatar-evolved {
    background: radial-gradient(circle at 30% 30%,
                rgba(255, 255, 255, 0.6),
                rgba(241, 245, 249, 0.95) 70%);
}

/* Theme toggle button */
.theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    border: 1px solid var(--border-soft);
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.2s ease;
}
.theme-toggle:hover {
    color: var(--neon-cyan);
    border-color: var(--neon-cyan);
    background: color-mix(in oklab, var(--neon-cyan) 8%, transparent);
}
.theme-toggle svg { transition: transform 0.4s ease, opacity 0.3s ease; }
.theme-toggle .sun  { display: none; }
.theme-toggle .moon { display: block; }
html[data-theme="light"] .theme-toggle .sun  { display: block; }
html[data-theme="light"] .theme-toggle .moon { display: none; }

/* ============================================================
 * COLOR CODING PER SEZIONE
 * Ogni sezione ha un colore identificativo per dare senso di
 * orientamento nell'interfaccia.
 * ============================================================ */
.sec-plancia  { --sec-color: var(--neon-cyan);   --sec-glow: rgba(34, 211, 238, 0.4); }
.sec-classifica { --sec-color: var(--brand-pink); --sec-glow: rgba(255, 23, 99, 0.4); }
.sec-trofei  { --sec-color: var(--neon-lime);   --sec-glow: rgba(163, 230, 53, 0.45); }
.sec-news    { --sec-color: var(--neon-violet); --sec-glow: rgba(168, 85, 247, 0.4); }

/* Header sezione: barra colorata + icona */
.section-hero {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    border-radius: 14px;
    background: linear-gradient(90deg,
        color-mix(in oklab, var(--sec-color) 12%, transparent),
        transparent 60%);
    border-left: 4px solid var(--sec-color);
    margin-bottom: 1.5rem;
}

.section-hero .section-icon {
    width: 52px; height: 52px;
    flex-shrink: 0;
    border-radius: 12px;
    background: linear-gradient(135deg,
        color-mix(in oklab, var(--sec-color) 15%, transparent),
        color-mix(in oklab, var(--sec-color) 5%, transparent));
    border: 1px solid var(--sec-color);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 18px var(--sec-glow),
                inset 0 0 12px color-mix(in oklab, var(--sec-color) 10%, transparent);
    color: var(--sec-color);
    position: relative;
}
.section-hero .section-icon::before {
    /* scanline sottile per effetto HUD */
    content: "";
    position: absolute;
    inset: 4px;
    border-radius: 8px;
    background-image: repeating-linear-gradient(
        0deg,
        transparent 0 3px,
        color-mix(in oklab, var(--sec-color) 10%, transparent) 3px 4px);
    opacity: 0.4;
    pointer-events: none;
}
.section-hero .section-icon svg {
    filter: drop-shadow(0 0 6px var(--sec-glow));
    z-index: 1;
}

.section-hero .section-title {
    font-family: 'Orbitron', sans-serif;
    font-size: 1.6rem;
    color: white;
    letter-spacing: 0.05em;
    line-height: 1.1;
}

.section-hero .section-sub {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var(--sec-color);
    margin-top: 4px;
}

/* Pannelli interni con bordo colorato del settore */
.panel {
    border-radius: 12px;
    background: var(--bg-card);
    border: 1px solid var(--border-soft);
    padding: 1rem 1.25rem;
}
.panel.panel-accent {
    border-color: color-mix(in oklab, var(--sec-color) 35%, var(--border-soft));
}

/* ============================================================
 * MISSION CARD — variante per missioni (orientata all'azione)
 * ============================================================ */
.mission-card {
    background: var(--bg-card);
    border: 1px solid var(--border-soft);
    border-radius: 14px;
    padding: 0;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: all 0.25s ease;
}
.mission-card:hover {
    border-color: var(--neon-cyan);
    transform: translateY(-3px);
    box-shadow: 0 0 28px rgba(34, 211, 238, 0.2);
}
.mission-card.is-completed {
    border-color: var(--neon-lime);
    background: linear-gradient(135deg, rgba(163, 230, 53, 0.05), var(--bg-card));
}
.mission-card.is-completed:hover {
    box-shadow: 0 0 28px rgba(163, 230, 53, 0.2);
}

.mission-card .mc-header {
    padding: 1rem 1.25rem 0.75rem;
}
.mission-card .mc-body {
    padding: 0 1.25rem 1rem;
    flex: 1;
}
.mission-card .mc-footer {
    padding: 0.75rem 1.25rem;
    background: rgba(15, 23, 42, 0.5);
    border-top: 1px solid var(--border-soft);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Mission card "primary" — la missione attiva/in evidenza in dashboard */
.mission-card-primary {
    background: linear-gradient(135deg,
        rgba(255, 23, 99, 0.05),
        rgba(34, 211, 238, 0.06));
    border: 1px solid var(--brand-pink);
    border-radius: 16px;
    padding: 1.5rem;
    position: relative;
    overflow: hidden;
}
.mission-card-primary::before {
    content: "";
    position: absolute;
    top: -2px; left: -2px; right: -2px; bottom: -2px;
    border-radius: 16px;
    background: linear-gradient(135deg, var(--brand-pink), var(--neon-cyan));
    z-index: -1;
    opacity: 0.5;
    filter: blur(20px);
}

/* ============================================================
 * NEWS — layout editoriale verticale (timeline)
 * ============================================================ */
.news-timeline {
    position: relative;
}
.news-timeline::before {
    content: "";
    position: absolute;
    left: 24px;
    top: 24px;
    bottom: 24px;
    width: 2px;
    background: linear-gradient(180deg,
        transparent,
        var(--neon-violet) 20%,
        var(--neon-violet) 80%,
        transparent);
    opacity: 0.3;
}

.news-item {
    position: relative;
    padding-left: 64px;
    margin-bottom: 1.5rem;
}
.news-item::before {
    content: "";
    position: absolute;
    left: 16px;
    top: 22px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--neon-violet);
    border: 3px solid var(--bg-deep);
    box-shadow: 0 0 0 2px var(--neon-violet),
                0 0 12px rgba(168, 85, 247, 0.6);
}

.news-card-v2 {
    background: var(--bg-card);
    border: 1px solid var(--border-soft);
    border-radius: 12px;
    padding: 1.25rem 1.5rem;
    transition: all 0.2s ease;
    overflow: hidden;
}
.news-card-v2:hover {
    border-color: var(--neon-violet);
    transform: translateX(4px);
}

/* Cover image: thumbnail laterale a sinistra, testo a destra */
.news-card-v2.has-cover {
    display: flex;
    gap: 1.25rem;
    align-items: stretch;
}
.news-card-v2 .news-cover {
    flex-shrink: 0;
    width: 180px;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.1), rgba(15, 23, 42, 0.8));
    border-radius: 8px;
    border: 1px solid rgba(168, 85, 247, 0.2);
    position: relative;
    align-self: flex-start;
}
.news-card-v2 .news-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}
.news-card-v2:hover .news-cover img {
    transform: scale(1.05);
}
.news-card-v2.has-cover .news-body-wrap {
    flex: 1;
    min-width: 0;
}

@media (max-width: 640px) {
    .news-card-v2.has-cover { flex-direction: column; gap: 0.75rem; }
    .news-card-v2 .news-cover { width: 100%; aspect-ratio: 16 / 9; }
}

.news-card-v2 .news-date {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.65rem;
    color: var(--neon-violet);
    text-transform: uppercase;
    letter-spacing: 0.2em;
    margin-bottom: 6px;
}

.news-card-v2 .news-title {
    font-family: 'Orbitron', sans-serif;
    font-size: 1.15rem;
    font-weight: 600;
    color: white;
    line-height: 1.3;
    margin-bottom: 8px;
}

/* Link inline nel corpo delle news */
.news-link {
    color: var(--neon-cyan);
    text-decoration: underline;
    text-decoration-color: rgba(34, 211, 238, 0.4);
    text-underline-offset: 3px;
    transition: all 0.2s ease;
    word-break: break-word;
}
.news-link:hover {
    color: white;
    text-decoration-color: var(--neon-cyan);
    text-shadow: 0 0 8px rgba(34, 211, 238, 0.5);
}
.news-body { word-break: break-word; }

/* ============================================================
 * TROPHY CARD — slot tipo "collezione"
 * ============================================================ */
.trophy-slot {
    background: var(--bg-card);
    border: 1px solid var(--border-soft);
    border-radius: 14px;
    padding: 1.5rem 1.25rem;
    text-align: center;
    position: relative;
    transition: all 0.25s ease;
}
.trophy-slot.is-unlocked {
    border-color: var(--neon-lime);
    background: linear-gradient(180deg,
        rgba(163, 230, 53, 0.06),
        var(--bg-card) 60%);
    box-shadow: 0 0 22px rgba(163, 230, 53, 0.12);
}
.trophy-slot.is-locked {
    opacity: 0.55;
    filter: saturate(0.3);
}
.trophy-slot.is-unlocked:hover {
    transform: translateY(-4px);
    box-shadow: 0 0 32px rgba(163, 230, 53, 0.3);
}

.trophy-slot .trophy-icon {
    width: 76px; height: 76px;
    margin: 0 auto 1rem;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--neon-lime), var(--neon-cyan));
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 2.2rem;
    position: relative;
    box-shadow: 0 0 24px rgba(163, 230, 53, 0.4);
}
.trophy-slot.is-locked .trophy-icon {
    background: rgba(30, 41, 59, 0.6);
    box-shadow: none;
}

/* ============================================================
 * NAV ITEMS V2 — icone + colore per sezione
 * ============================================================ */
.nav-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: 10px;
    font-family: 'Orbitron', sans-serif;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--text-muted);
    transition: all 0.2s ease;
    border: 1px solid transparent;
    text-decoration: none;
}
.nav-item:hover {
    color: white;
    background: rgba(148, 163, 184, 0.05);
}
.nav-item.is-active {
    color: var(--sec-color, var(--neon-cyan));
    background: color-mix(in oklab, var(--sec-color, var(--neon-cyan)) 10%, transparent);
    border-color: color-mix(in oklab, var(--sec-color, var(--neon-cyan)) 35%, transparent);
}
.nav-item .nav-icon {
    width: 16px;
    height: 16px;
    line-height: 1;
    display: inline-flex;
}
.nav-item.is-active .nav-icon svg {
    filter: drop-shadow(0 0 4px var(--sec-color, var(--neon-cyan)));
}

/* Icone generiche */
.icon {
    display: inline-block;
    flex-shrink: 0;
}
.icon-glow svg, svg.icon-glow {
    filter: drop-shadow(0 0 5px currentColor);
}

/* Trofeo SVG sostituto dell'emoji 🏆 dentro .trophy-icon (gradient + glow) */
.trophy-icon svg {
    width: 56%;
    height: 56%;
    color: #0f172a;
    filter: drop-shadow(0 1px 1px rgba(0,0,0,0.3));
}
.trophy-slot.is-locked .trophy-icon svg {
    color: var(--text-dim);
}

/* Podio: corona/award stylized */
.podium-icon {
    color: currentColor;
    filter: drop-shadow(0 0 8px currentColor);
}

/* ============================================================
 * Big primary CTA — usato per "Avvia missione"/"Avvia sfida"
 * ============================================================ */
.cta-primary {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 0.85rem 1.75rem;
    font-family: 'Orbitron', sans-serif;
    font-weight: 700;
    font-size: 0.9rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    border-radius: 10px;
    border: 1px solid var(--brand-pink);
    background: linear-gradient(135deg, var(--brand-pink), var(--neon-violet));
    color: white;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
    box-shadow: 0 0 18px rgba(255, 23, 99, 0.4);
    position: relative;
}
.cta-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 26px rgba(255, 23, 99, 0.5);
}
.cta-primary::after {
    content: "→";
    transition: transform 0.2s ease;
}
.cta-primary:hover::after {
    transform: translateX(3px);
}

/* ----------- Logo brand H&A ----------- */
.brand-logo {
    display: block;
    max-width: 100%;
    height: auto;
}
.brand-logo-sm  { height: 28px; width: auto; }
.brand-logo-md  { height: 40px; width: auto; }
.brand-logo-lg  { height: 64px; width: auto; }
.brand-logo-xl  { height: 90px; width: auto; }

/* Glow brand opzionale */
.brand-logo-glow {
    filter: drop-shadow(0 0 12px rgba(255, 23, 99, 0.5));
}