/* ==========================================================================
   PVP · Sistema de diseño compartido
   Todas las interfaces del servidor cargan este fichero:
   <link rel="stylesheet" href="nui://pvp_ui/web/tokens.css">
   ========================================================================== */
@font-face { font-family: 'Inter'; font-weight: 400; src: url('fonts/Inter-400.ttf') format('truetype'); }
@font-face { font-family: 'Inter'; font-weight: 500; src: url('fonts/Inter-500.ttf') format('truetype'); }
@font-face { font-family: 'Inter'; font-weight: 600; src: url('fonts/Inter-600.ttf') format('truetype'); }
@font-face { font-family: 'Rajdhani'; font-weight: 600; src: url('fonts/Rajdhani-600.ttf') format('truetype'); }
@font-face { font-family: 'Rajdhani'; font-weight: 700; src: url('fonts/Rajdhani-700.ttf') format('truetype'); }

:root {
  /* Superficies */
  --bg-0: #07070a;
  --panel: rgba(12, 12, 15, .80);
  --panel-solid: #101014;
  --panel-2: rgba(24, 24, 29, .86);
  --line: rgba(255, 255, 255, .08);
  --line-strong: rgba(255, 255, 255, .16);

  /* Texto */
  --text: #f4f4f6;
  --text-2: #a4a4af;
  --text-3: #686873;

  /* Acento */
  --red: #e11d2e;
  --red-hi: #ff3b4d;
  --red-dim: rgba(225, 29, 46, .16);
  --red-glow: rgba(225, 29, 46, .35);

  /* Estados */
  --ok: #3ddc84;
  --warn: #f5a524;
  --err: #ff3b4d;
  --info: #8ab4ff;

  /* Forma y movimiento */
  --r: 8px;
  --r-sm: 5px;
  --blur: blur(10px);
  --ease: cubic-bezier(.2, .8, .2, 1);
  --t: .18s;

  /* Tipografía */
  --font-ui: 'Inter', 'Segoe UI', system-ui, sans-serif;
  --font-display: 'Rajdhani', 'Inter', system-ui, sans-serif;
}

/* Escala con la resolución: 1rem = 16px a 1080p */
html { font-size: calc(100vh / 67.5); }
* { box-sizing: border-box; margin: 0; padding: 0; user-select: none; -webkit-user-select: none; }
html, body { width: 100%; height: 100%; overflow: hidden; background: transparent; color: var(--text); font-family: var(--font-ui); font-size: 1rem; }
.hidden { display: none !important; }

/* Componentes base */
.panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r);
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  box-shadow: 0 .8rem 2.4rem rgba(0, 0, 0, .45);
}
.display { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
.kbd {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 1.5rem; height: 1.5rem; padding: 0 .4rem;
  font-family: var(--font-display); font-weight: 700; font-size: .85rem;
  color: var(--text); background: rgba(255, 255, 255, .07);
  border: 1px solid var(--line-strong); border-bottom-width: 2px; border-radius: var(--r-sm);
}
.kbd.red { background: var(--red); border-color: var(--red-hi); box-shadow: 0 0 .9rem var(--red-glow); }
.bar { height: 2px; width: 2.2rem; background: var(--red); box-shadow: 0 0 .6rem var(--red-glow); border-radius: 2px; }