/* ui_tema.css — Lenguaje visual compartido de toda la interfaz.
 *
 * Un shooter se juega mirando el centro de la pantalla: el HUD tiene que
 * leerse de reojo y no tapar nada. De ahí las tres decisiones de este tema:
 *
 *  - Paneles oscuros con bisel diagonal (`clip-path`) en lugar de cajas con
 *    esquinas redondeadas: se reconocen por la silueta, no por el relleno.
 *  - Tipografía condensada en mayúsculas para las etiquetas y monoespaciada de
 *    ancho fijo para los números (la munición y el reloj no deben "saltar"
 *    cuando cambian de dígito).
 *  - Un solo color de acento (ámbar) para lo que el jugador tiene que mirar,
 *    rojo para el daño y cian para lo secundario. Nada más: si todo resalta,
 *    nada resalta.
 *
 * Se carga desde index.html y configuracion.html; los módulos del
 * multijugador inyectan su propio CSS pero usan estas variables y clases.
 */

:root {
    color-scheme: dark;

    /* --- tipografía --- */
    /* Condensada para títulos y etiquetas; se degrada a la narrow del sistema
       sin pedir nada a la red (el juego tiene que arrancar offline). */
    --ui-fuente: "Bahnschrift SemiCondensed", "DIN Alternate", "Roboto Condensed",
        "Arial Narrow", "Helvetica Neue", Arial, Helvetica, sans-serif;
    --ui-mono: ui-monospace, "Cascadia Mono", "JetBrains Mono", "Consolas",
        "DejaVu Sans Mono", monospace;

    /* --- color --- */
    --ui-acento: #ffb224;          /* lo importante: munición, propio nombre */
    --ui-acento-tenue: rgba(255,178,36,0.22);
    --ui-apoyo: #46dcff;           /* secundario: aguante, enlaces */
    --ui-peligro: #ff3f30;
    --ui-ok: #55d06a;
    --ui-texto: #e9eef4;
    --ui-texto-2: rgba(233,238,244,0.62);
    --ui-texto-3: rgba(233,238,244,0.38);

    /* --- superficies --- */
    --ui-panel: linear-gradient(170deg, rgba(16,21,30,0.60), rgba(4,6,10,0.74));
    --ui-panel-solido: linear-gradient(170deg, rgba(18,24,34,0.95), rgba(6,9,14,0.97));
    --ui-filo: rgba(255,255,255,0.09);
    --ui-filo-fuerte: rgba(255,255,255,0.16);
    --ui-sombra: 0 8px 22px rgba(0,0,0,0.42);
    --ui-sombra-texto: 0 1px 2px rgba(0,0,0,0.9);

    /* tamaño del bisel de las esquinas cortadas */
    --ui-corte: 11px;
}

/* ------------------------------------------------------------------ */
/* Paneles                                                             */
/* ------------------------------------------------------------------ */

/* Corte en la esquina superior derecha e inferior izquierda: da la
   diagonal característica sin romper la lectura del contenido. */
.ui-panel {
    position: relative;
    background: var(--ui-panel);
    box-shadow: inset 0 0 0 1px var(--ui-filo), var(--ui-sombra);
    clip-path: polygon(0 0, calc(100% - var(--ui-corte)) 0, 100% var(--ui-corte),
        100% 100%, var(--ui-corte) 100%, 0 calc(100% - var(--ui-corte)));
}

/* Variante opaca para los overlays (menú, login, configuración). */
.ui-panel--solido {
    --ui-corte: 18px;
    background: var(--ui-panel-solido);
    box-shadow: inset 0 0 0 1px var(--ui-filo-fuerte), 0 24px 70px rgba(0,0,0,0.6);
}

/* Barra de acento sobre el filo izquierdo: marca el panel "activo". */
.ui-panel--acento::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--ui-acento);
    box-shadow: 0 0 8px var(--ui-acento-tenue);
}

/* ------------------------------------------------------------------ */
/* Texto                                                               */
/* ------------------------------------------------------------------ */

.ui-tit {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 2.5px;
    text-transform: uppercase;
}

/* Etiqueta chica: "VIDA", "MUNICIÓN", "RONDA"... */
.ui-lbl {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: var(--ui-texto-2);
}

/* Cifras: ancho fijo para que no bailen al cambiar de dígito. */
.ui-num {
    font-family: var(--ui-mono);
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}

/* ------------------------------------------------------------------ */
/* Controles                                                           */
/* ------------------------------------------------------------------ */

.ui-kbd {
    display: inline-block;
    min-width: 17px;
    padding: 1px 5px;
    font-family: var(--ui-mono);
    font-size: 10.5px;
    text-align: center;
    color: var(--ui-texto);
    background: rgba(255,255,255,0.10);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.14);
    clip-path: polygon(0 0, calc(100% - 4px) 0, 100% 4px, 100% 100%, 4px 100%, 0 calc(100% - 4px));
}

.ui-btn {
    display: block;
    width: 100%;
    padding: 11px 14px;
    font-family: var(--ui-fuente);
    font-size: 13.5px;
    font-weight: 700;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    text-align: center;
    text-decoration: none;
    color: var(--ui-texto);
    background: rgba(255,255,255,0.07);
    border: 0;
    box-shadow: inset 0 0 0 1px var(--ui-filo);
    cursor: pointer;
    transition: background 120ms linear, color 120ms linear, box-shadow 120ms linear;
    clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 9px, 100% 100%, 9px 100%, 0 calc(100% - 9px));
}
.ui-btn:hover { background: rgba(255,255,255,0.14); box-shadow: inset 0 0 0 1px var(--ui-filo-fuerte); }
.ui-btn:active { background: rgba(255,255,255,0.20); }
.ui-btn:disabled { opacity: .45; cursor: default; }

.ui-btn--principal {
    color: #140c00;
    background: linear-gradient(100deg, var(--ui-acento), #ffd166);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.25), 0 0 18px var(--ui-acento-tenue);
}
.ui-btn--principal:hover { background: linear-gradient(100deg, #ffc247, #ffe09a); }

.ui-btn--peligro {
    color: #ffd4cf;
    background: rgba(255,63,48,0.14);
    box-shadow: inset 0 0 0 1px rgba(255,63,48,0.38);
}
.ui-btn--peligro:hover { background: rgba(255,63,48,0.24); }

.ui-input {
    width: 100%;
    padding: 11px 13px;
    font-family: var(--ui-fuente);
    font-size: 15px;
    letter-spacing: .5px;
    color: var(--ui-texto);
    background: rgba(0,0,0,0.42);
    border: 0;
    box-shadow: inset 0 0 0 1px var(--ui-filo-fuerte);
    outline: none;
    clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px));
}
.ui-input::placeholder { color: var(--ui-texto-3); }
.ui-input:focus {
    background: rgba(0,0,0,0.55);
    box-shadow: inset 0 0 0 1px var(--ui-acento), 0 0 0 1px var(--ui-acento-tenue);
}

/* ------------------------------------------------------------------ */
/* Fondos de overlay                                                   */
/* ------------------------------------------------------------------ */

/* Grilla técnica muy tenue + viñeta: da profundidad a las pantallas
   completas (carga, login, menú) sin competir con el contenido. */
.ui-trama {
    background-color: #070a0f;
    background-image:
        radial-gradient(ellipse at 50% 32%, rgba(255,178,36,0.10), transparent 58%),
        linear-gradient(rgba(255,255,255,0.028) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.028) 1px, transparent 1px),
        radial-gradient(ellipse at 50% 50%, transparent 40%, rgba(0,0,0,0.78) 100%);
    background-size: 100% 100%, 44px 44px, 44px 44px, 100% 100%;
}