/* ============================================================
   LAMUS — ESTILO "MODERNO"
   Se carga encima de lamus.css cuando data-style="modern".
   Objetivo: más aire, jerarquía clara, tipografía display,
   esquinas suaves, botones pill, micro-interacciones y una UI
   más amigable. Respeta light/dark y el acento por juego.
   ============================================================ */
:root[data-style="modern"] {
    --font: 'Inter', system-ui, sans-serif;
    --radius: 10px;
    --radius-sm: 7px;
    --pill: 10px;
    --shadow:    0 6px 24px rgba(20,20,50,.07);
    --shadow-lg: 0 24px 60px rgba(20,20,50,.16);
}
:root[data-style="modern"][data-theme="dark"] {
    --bg:    #0b0d12;
    --bg-2:  #12151c;
    --panel: #14171f;
    --line:  #232833;
    --shadow:    0 8px 26px rgba(0,0,0,.45);
    --shadow-lg: 0 26px 60px rgba(0,0,0,.6);
}

/* Fondo con un leve tinte de acento (aurora sutil) */
[data-style="modern"] body {
    background:
        radial-gradient(900px 480px at 100% -5%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 60%),
        radial-gradient(700px 420px at 0% 0%, color-mix(in srgb, var(--brand) 7%, transparent), transparent 55%),
        var(--bg);
    background-attachment: fixed;
}
[data-style="modern"] h1,
[data-style="modern"] h2,
[data-style="modern"] h3,
[data-style="modern"] .gb-title,
[data-style="modern"] .net-name { font-family: var(--font); letter-spacing: -0.02em; }

/* ---------- Topbar más aireado y flotante ---------- */
[data-style="modern"] .topbar-inner { height: 74px; }
[data-style="modern"] .net-name { font-size: 1.55rem; }
[data-style="modern"] .gs-item { padding: 9px 15px; border-radius: var(--pill); font-weight: 600; }
[data-style="modern"] .gs-item.active { background: color-mix(in srgb, var(--brand) 12%, transparent); }
[data-style="modern"] .gs-item.active::after { display: none; }
[data-style="modern"] .theme-toggle { border-radius: var(--pill); }

/* ---------- Botones pill con sombra de acento ---------- */
[data-style="modern"] .btn { border-radius: var(--pill); font-weight: 600; }
[data-style="modern"] .btn-primary { box-shadow: none; }
[data-style="modern"] .btn-primary:hover { transform: translateY(-2px); }
[data-style="modern"] .btn-lg { padding: 15px 34px; }

/* ---------- Hero con gradiente de acento (NO en heroes con imagen) ---------- */
[data-style="modern"] .hero:not(.hero-img) {
    border: none; border-radius: var(--radius); padding: 90px 24px 74px;
    background:
        radial-gradient(600px 260px at 50% -10%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 70%),
        var(--panel);
}
[data-style="modern"] .hero.hero-img { border-radius: var(--radius); }
[data-style="modern"] .hero h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); letter-spacing: -0.015em; }
[data-style="modern"] .hero .eyebrow { display: inline-block; padding: 6px 14px; border-radius: var(--pill); background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent-ink); letter-spacing: 1px; }

/* ---------- Cards con más relieve ---------- */
[data-style="modern"] .card { border-radius: var(--radius); padding: 28px; }
[data-style="modern"] .card .ico { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: var(--radius-sm); font-size: 1.4rem; background: color-mix(in srgb, var(--accent) 12%, transparent); margin-bottom: 14px; }
[data-style="modern"] .card:hover { transform: translateY(-5px); }

/* Stats: número enorme con acento */
[data-style="modern"] .stat { text-align: left; padding: 24px; border-radius: var(--radius); }
[data-style="modern"] .stat .num { font-family: var(--font); font-size: 2.3rem; color: var(--accent-ink); }
[data-style="modern"] .stat .lbl { letter-spacing: .5px; text-transform: none; font-size: .9rem; }

/* ---------- Banners de juego: cinta -> pill moderno ---------- */
[data-style="modern"] .game-banner { border-radius: var(--radius); border: none; }
[data-style="modern"] .gb-shade { background: linear-gradient(180deg, rgba(8,10,16,.05) 0%, rgba(8,10,16,.45) 55%, rgba(8,10,16,.9) 100%); }
[data-style="modern"] .gb-ribbon {
    top: 18px; right: 18px; left: auto; transform: none; padding: 7px 16px;
    border-radius: var(--pill); font-size: .68rem; letter-spacing: 1.5px;
    background: rgba(0,0,0,.55); backdrop-filter: blur(6px); border: 1px solid rgba(255,255,255,.2);
}
[data-style="modern"] .gb-title { font-size: clamp(1.8rem, 3.2vw, 2.7rem); }
[data-style="modern"] .gb-cta { border-radius: var(--pill); padding: 10px 20px; box-shadow: 0 8px 22px rgba(0,0,0,.35); }
[data-style="modern"] .game-banner:hover { transform: translateY(-6px); }

/* ---------- Tabs tipo segmented control ---------- */
[data-style="modern"] .tabs { display: flex; gap: 4px; padding: 5px; border-radius: var(--pill); background: var(--panel); border: 1px solid var(--line); box-shadow: var(--shadow); max-width: 100%; overflow-x: auto; }
[data-style="modern"] .tab { border: none; border-radius: var(--pill); padding: 9px 18px; }
[data-style="modern"] .tab.active { box-shadow: none; }
[data-style="modern"] .section:has(.tabs) .tabs { margin-left: auto; margin-right: auto; }

/* ---------- Tabla más suave ---------- */
[data-style="modern"] .panel { border-radius: var(--radius); }
[data-style="modern"] table.rank thead th { background: transparent; }
[data-style="modern"] table.rank tbody tr:hover { background: color-mix(in srgb, var(--accent) 7%, transparent); }

/* ---------- Auth / inputs redondeados ---------- */
[data-style="modern"] .form-card { border-radius: var(--radius); }
[data-style="modern"] .field input { border-radius: var(--radius-sm); padding: 13px 16px; }

/* ---------- Selector de estilo activo ---------- */
[data-style="modern"] .style-switch { box-shadow: var(--shadow-lg); }