/* ══════════════════════════════════════════════
   LUDEX — Design System
   Premium, sobre, sombre. Inspiré Apple / linear.app.
   ══════════════════════════════════════════════ */

:root{
    --bg:            #08090b;
    --bg-soft:       #0c0d10;
    --surface:       rgba(255,255,255,0.045);
    --surface-2:     rgba(255,255,255,0.065);
    --surface-hover: rgba(255,255,255,0.085);
    --border:        rgba(255,255,255,0.09);
    --border-strong: rgba(255,255,255,0.16);

    --text:      #f5f5f7;
    --text-2:    #98989d;
    --text-3:    #636366;

    --accent:      #0a84ff;
    --accent-2:    #5e5ce6;
    --accent-grad: linear-gradient(135deg,#0a84ff,#5e5ce6);
    --accent-soft: rgba(10,132,255,0.14);

    --gold:      #ffd60a;
    --gold-soft: rgba(255,214,10,0.14);
    --green:      #30d158;
    --green-soft: rgba(48,209,88,0.14);
    --red:        #ff453a;
    --red-soft:   rgba(255,69,58,0.14);
    --orange:     #ff9f0a;
    --purple:     #bf5af2;
    --teal:       #40c8c0;

    --radius-sm: 10px;
    --radius-md: 16px;
    --radius-lg: 22px;
    --radius-xl: 28px;

    --shadow-sm: 0 2px 14px rgba(0,0,0,.28);
    --shadow-md: 0 14px 44px rgba(0,0,0,.38);
    --shadow-lg: 0 26px 80px rgba(0,0,0,.5);

    --ease:        cubic-bezier(.16,1,.3,1);
    --ease-spring: cubic-bezier(.34,1.56,.64,1);
    --dur-fast: .15s;
    --dur:      .25s;
    --dur-slow: .4s;

    --font: -apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Segoe UI",Helvetica,Arial,sans-serif;
}

*{ box-sizing:border-box; }

body{
    font-family: var(--font);
    background: var(--bg);
    color: var(--text);
    -webkit-font-smoothing: antialiased;
}

::selection{ background: var(--accent-soft); color:#fff; }

::-webkit-scrollbar{ width:6px; height:6px; }
::-webkit-scrollbar-track{ background:transparent; }
::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.12); border-radius:10px; }
::-webkit-scrollbar-thumb:hover{ background:rgba(255,255,255,.22); }

:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; border-radius:6px; }

/* ── Surfaces ── */
.ldx-glass{
    background: var(--surface);
    border:1px solid var(--border);
    border-radius: var(--radius-lg);
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
}

/* ── Buttons ── */
.ldx-btn{
    display:inline-flex; align-items:center; justify-content:center; gap:7px;
    font-family: var(--font); font-weight:600; font-size:.88em;
    border:none; border-radius: var(--radius-sm);
    padding:9px 16px; cursor:pointer;
    transition: transform var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
    white-space:nowrap;
}
.ldx-btn:active{ transform: scale(.96); }
.ldx-btn.primary{ background: var(--accent-grad); color:#fff; box-shadow: 0 4px 18px rgba(10,132,255,.28); }
.ldx-btn.primary:hover{ box-shadow: 0 6px 24px rgba(10,132,255,.4); transform: translateY(-1px); }
.ldx-btn.ghost{ background: var(--surface); border:1px solid var(--border); color: var(--text-2); }
.ldx-btn.ghost:hover{ background: var(--surface-hover); color: var(--text); border-color: var(--border-strong); }
.ldx-btn.danger{ background: var(--red-soft); border:1px solid rgba(255,69,58,.3); color: var(--red); }
.ldx-btn.danger:hover{ background: rgba(255,69,58,.22); }
.ldx-btn.gold{ background: var(--gold-soft); border:1px solid rgba(255,214,10,.35); color: var(--gold); }
.ldx-btn.gold:hover{ background: rgba(255,214,10,.24); }
.ldx-btn.green{ background: var(--green-soft); border:1px solid rgba(48,209,88,.32); color: var(--green); }
.ldx-btn.green:hover{ background: rgba(48,209,88,.24); }

/* ── Pills / badges ── */
.ldx-pill{
    display:inline-flex; align-items:center; gap:6px;
    border-radius:50px; padding:6px 14px; font-size:.82em; font-weight:600;
    background: var(--surface); border:1px solid var(--border);
}

/* ── Inputs ── */
.ldx-input{
    width:100%; font-family: var(--font);
    padding:11px 14px; border-radius: var(--radius-sm);
    border:1px solid var(--border); background: rgba(255,255,255,.03);
    color: var(--text); font-size:.9em; outline:none;
    transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.ldx-input:focus{ border-color: var(--accent); background: rgba(255,255,255,.05); }
.ldx-input::placeholder{ color: var(--text-3); }

/* ── Motion ── */
@keyframes ldxFadeUp{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:translateY(0); } }
@keyframes ldxPop{ from{ opacity:0; transform:scale(.94); } to{ opacity:1; transform:scale(1); } }
@keyframes ldxShimmer{ 0%{ background-position: 0% center; } 100%{ background-position: 200% center; } }
@keyframes ldxPulseSoft{ 0%,100%{ opacity:1; } 50%{ opacity:.55; } }

.ldx-in{ animation: ldxFadeUp var(--dur-slow) var(--ease) both; }
.ldx-pop{ animation: ldxPop var(--dur-slow) var(--ease-spring) both; }

/* ── Icon tiles (replaces emoji glyphs) ── */
.icon{ width:1em; height:1em; display:inline-block; vertical-align:-0.15em; }
.icon svg{ width:100%; height:100%; display:block; }

.gi{
    width:54px; height:54px; border-radius:17px; flex-shrink:0;
    display:flex; align-items:center; justify-content:center;
    background: rgba(255,255,255,.14);
    border:1px solid rgba(255,255,255,.24);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color:#fff;
    position:relative; z-index:1;
    transition: transform var(--dur-slow) var(--ease-spring);
}
.gi svg{ width:27px; height:27px; }

/* ── Rich gradient game-card banner (Apple keynote glow style) ── */
.gc-banner{
    height:118px; position:relative; overflow:hidden;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    display:flex; align-items:center; justify-content:center;
    background:
        radial-gradient(130% 160% at 22% 12%, var(--tile-vivid, var(--accent)) 0%, transparent 60%),
        var(--bg-soft);
}
.gc-banner::after{
    content:''; position:absolute; inset:0; pointer-events:none;
    background: linear-gradient(180deg, rgba(0,0,0,0) 35%, rgba(0,0,0,.4) 100%);
}
.game-card:hover .gc-banner{ }
.game-card:hover .gi{ transform: scale(1.08) translateY(-2px); }

.eyebrow{
    display:inline-block; font-size:.74em; font-weight:700;
    letter-spacing:.18em; text-transform:uppercase;
    color: var(--text-2); margin-bottom:14px;
}

/* ── Hero ambient glow (keynote background) ── */
.hero-glow{
    position:absolute; left:50%; top:-140px; transform:translateX(-50%);
    width:720px; height:460px; max-width:140vw; pointer-events:none; z-index:0;
    background: radial-gradient(closest-side, rgba(94,92,230,.4), rgba(10,132,255,.2) 45%, transparent 72%);
    filter: blur(50px);
}