/* ═══════════════════════════════════════════════════════
   GARIX.IO — base.css
   Reset, CSS variables, global styles
   ═══════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

:root {
    /* Colors */
    --bg:               #000000;
    --bg-card:          #0a0a0a;
    --bg-card-inner:    #111111;
    --bg-row:           #0d0d0d;
    --bg-row-hover:     #161616;
    --bg-input:         #0d0d0d;

    --blur-menu: blur(2px) saturate(120%);
    --overlay-opacity-mult: 0.8; /* multiplicador 0-1 */
    --bg-card-rgb: 10, 10, 10; /* equivalente de #0a0a0a en r,g,b */
    --bg-card-alpha: 1;

        /* Accent — cyan blue from the image */
    --accent:           #00b4ff;
    --accent-dim:       rgba(0, 180, 255, 0.15);
    --accent-border:    rgba(0, 180, 255, 0.4);
    --accent-glow:      rgba(0, 180, 255, 0.25);

    /* Borders */
    --border:           rgba(255, 255, 255, 0.07);
    --border-light:     rgba(255, 255, 255, 0.12);

    /* Text */
    --text:             #ffffff;
    --text-secondary:   rgba(255, 255, 255, 0.5);
    --text-muted:       rgba(255, 255, 255, 0.25);

    /* Radius */
    --radius-sm:        4px;
    --radius:           8px;
    --radius-lg:        2px;

    /* Typography */
    --font:             'Inter', 'Segoe UI', sans-serif;
    --font-mono:        'JetBrains Mono', 'Fira Code', monospace;
    --font-game:        'Rajdhani', 'Orbitron', sans-serif;

    /* ── Motion (pase de pulido UX/animaciones) ──
       Un solo lugar para duración/curva por defecto de toda la UI: hover,
       focus, click, tabs, dropdowns. Antes: `all 0.18s ease` — 180ms +
       `ease` (arranque y cierre lentos) se sentía perceptiblemente más
       lento que las excepciones ya existentes en el propio código (varios
       `transition: background 0.12s ease` puntuales en settings.css, ya
       "corrigiendo" el default a mano). Se sube ese valor más rápido a
       nivel global en vez de seguir repitiéndolo por elemento: 120ms +
       cubic-bezier(0.4,0,0.2,1) (curva "standard" — sin el arranque lento
       de `ease` ni rebote — feedback visual casi inmediato).
       Se mantiene `all` (no se acota a propiedades puntuales): un grep
       encontró casos reales que SÍ dependen de transicionar layout
       (.profile-row--clickable:hover anima margin/padding, .server-option
       .selected anima border-left/padding-left) — acotar el shorthand acá
       habría vuelto esos hovers instantáneos sin querer. Los casos nuevos
       agregados en este pase (aperturas de modal) se escriben aparte, ya
       explícitamente solo con transform/opacity — ver --ease-out abajo. */
    --transition:       all 0.12s cubic-bezier(0.4, 0, 0.2, 1);
    --ease:             cubic-bezier(0.4, 0, 0.2, 1);
    /* Para apariciones/entradas (modales, popups, dropdowns propios): pura
       desaceleración, sin rebote — "se asienta" en vez de "salta". */
    --ease-out:         cubic-bezier(0, 0, 0.2, 1);
    /* Único curva con rebote de toda la UI, reservada para momentos de
       celebración/recompensa (level up, checkmark de éxito) — no para
       navegación/estructura (modales, tabs, dropdowns), que usan
       --ease-out. Antes había DOS curvas de rebote ligeramente distintas
       (cubic-bezier(0.34,1.3,0.64,1) en varios lados y (0.175,0.885,0.32,
       1.275) en el checkmark) — se unifican en esta. */
    --ease-bounce:      cubic-bezier(0.34, 1.3, 0.64, 1);
    --dur-modal:        0.15s;

    /* Shadows */
    --shadow:           0 4px 20px rgba(0, 0, 0, 0.6);
    --shadow-lg:        0 12px 40px rgba(0, 0, 0, 0.8);
}

html, body {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: fixed;
    background: var(--bg);
    font-family: var(--font);
    color: var(--text);
    -webkit-text-size-adjust: none;
}

/* ── Canvas ── */
#canvas {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
}
/* ── Mobile ── */
#instructions { display: none; }

#touchpad { position: fixed; }
#touchpad { z-index: 2; }

#touchpad {
    background: #000;
    opacity: 0.3;
    width: 20vw;
    height: 20vh;
    left: 0;
    bottom: 0;
}

/* ── Bootstrap modal (legacy) ── */
.modal-content {
    border-radius: var(--radius);
    border: none;
    box-shadow: var(--shadow-lg);
}

.modal-header {
    background: #111;
    color: white;
    border-radius: var(--radius) var(--radius) 0 0;
    border: none;
}

.modal-title { font-weight: 600; }

/* ── Spinner (Bootstrap loader) ── */
.loader {
    border: 5px solid #f3f3f3;
    border-top: 5px solid #3498db;
    border-radius: 50%;
    width: 38px; height: 38px;
    animation: spin 1.5s linear infinite;
}

.center { display: table; margin: 0 auto; }

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* ── Entradas compartidas (pase de pulido UX/animaciones) ──
   @keyframes tiene scope global en CSS (no por archivo) — se definen acá
   una sola vez y las usa cualquier overlay/modal de la app (settings,
   shop, ban, skins), en vez de que cada uno reinvente su propia curva.
   Solo transform+opacity (baratas, no disparan layout/paint del resto de
   la página) — nada de box-shadow/backdrop-filter animados, que si son
   costosos. fade-in es para el overlay de fondo (backdrop); pop-in para
   el cuadro de contenido adentro (mismo timing, sensación de "un solo
   golpe", no de dos animaciones independientes que se notan desfasadas). */
@keyframes fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes pop-in {
    from { opacity: 0; transform: scale(0.97); }
    to   { opacity: 1; transform: scale(1); }
}

/* ── Feedback de click inmediato (pase de microinteracciones/rendimiento
   percibido) ── Antes casi ningún botón de la app tenía un estado :active
   (mouse/touch down) — el único grep que devolvía algo era
   .social-icon-btn:active, y ni siquiera era un "press": es la forma
   correcta de agrupar :link/:visited/:active para no perder el color en
   ningún estado de un <a>, no un efecto de click. La única respuesta a un
   click era la que el propio handler de React disparara después (a veces
   con round-trip de red) — nada instantáneo entremedio.
   :active es puro CSS: el navegador lo aplica en el mismo frame del
   mousedown/touchstart, antes de que corra una sola línea de JS — es la
   confirmación visual más rápida que existe, así que es el punto de mayor
   impacto para "sensación de respuesta inmediata". scale(0.97) es sutil a
   propósito (no es un rediseño, es la misma UI "asentándose" un toque al
   tocarla) y no declara transition propia: hereda la que cada botón ya
   tiene (var(--transition) en casi todos, 120ms) tanto para entrar en
   :active como para volver — mismo ritmo que el resto de la UI, sin un
   token nuevo. `button` cubre la enorme mayoría de los clickables reales
   de la app (sidebar-btn, subtab-btn, close-btn, shop-tab, chat-tab,
   restore-btn, region-btn, social/login buttons, etc. son todos <button>
   de verdad) de una sola vez; los clickables que NO son <button> (tarjetas
   .shop-item/.skins-item, filas .server-option/.profile-row--clickable)
   tienen su propio :active al lado de su :hover en su archivo — ver
   modals.css/skins.css/layout.css. :not(:disabled) por prolijidad, aunque
   los navegadores ya no disparan :active en un <button disabled> de por
   sí. */
button:not(:disabled):active {
    transform: scale(0.97);
}

@media (max-width: 768px) {
    .main-container {
        width: 1000px;
        position: absolute;
        left: 50%;
        transform-origin: top center;
        transform: translateX(-50%) scale(0.55);
    }
}