/*
  Thème « Méduse » de DriftZone (VISION.md, sections 5.1 et 5.5).
  Les interfaces des autres modules le réutilisent :
      <link rel="stylesheet" href="https://cfx-nui-driftzone_ui/html/theme.css">
  Les polices sont embarquées (fonts/), jamais chargées depuis internet.
  Changer un token : l'autotest de driftzone_ui relit ce fichier à chaque démarrage et refuse un contraste trop faible.
*/

@font-face { font-family: 'Rubik'; font-style: normal; font-weight: 400; font-display: block; src: url('fonts/rubik-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Rubik'; font-style: normal; font-weight: 500; font-display: block; src: url('fonts/rubik-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Rubik'; font-style: normal; font-weight: 600; font-display: block; src: url('fonts/rubik-latin-600-normal.woff2') format('woff2'); }

:root {
  --driftzone-bg: #120F1C;
  --driftzone-panel: #1A1628;
  --driftzone-line: #3A3352;
  --driftzone-text: #EEEAF6;
  --driftzone-muted: #9A92B3;
  --driftzone-accent: #F09AC0;
  --driftzone-on-accent: #2A0E1C;
  --driftzone-select: #241E36;
  --driftzone-success: #7FD1B4;
  --driftzone-warning: #F2C46B;
  --driftzone-danger: #F0727A;
}

/* Échelle : 1 rem = 17,6 px à 1080p (16 px × 1,1), proportionnelle à la hauteur de l'écran. */
html { font-size: calc(100vh / 67.5 * 1.1); }

/* À poser sur <body>. Le fond reste transparent : l'interface est posée sur le jeu, seuls les panneaux sont opaques. */
.driftzone-ui {
  margin: 0;
  font-family: 'Rubik', sans-serif;
  font-weight: 400;
  font-size: 0.875rem;
  line-height: 1.45;
  color: var(--driftzone-text);
}
.driftzone-ui *, .driftzone-ui *::before, .driftzone-ui *::after { box-sizing: border-box; }

/* Textes (tailles à 1080p : titre ≈ 19,8 px, texte ≈ 15,4 / 14,3 px, étiquette ≈ 13,2 px) */
.driftzone-title { margin: 0; font-size: 1.125rem; font-weight: 600; line-height: 1.4; color: var(--driftzone-text); }
.driftzone-body { margin: 0; font-size: 0.875rem; }
.driftzone-small { margin: 0; font-size: 0.8125rem; }
.driftzone-label { margin: 0; font-size: 0.75rem; color: var(--driftzone-muted); }
.driftzone-muted { color: var(--driftzone-muted); }
.driftzone-number { font-weight: 500; font-variant-numeric: tabular-nums; }

/* Panneau opaque : tout texte posé sur le jeu est dans un panneau. */
.driftzone-panel {
  background: var(--driftzone-panel);
  border: 1px solid var(--driftzone-line);
  border-radius: 1.125rem;
  padding: 1rem;
}

/* Boutons en pilule */
.driftzone-button {
  font: inherit;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.3;
  border-radius: 999px;
  padding: 0.5rem 1.125rem;
  cursor: pointer;
}
.driftzone-button--primary { background: var(--driftzone-accent); color: var(--driftzone-on-accent); border: 1px solid var(--driftzone-accent); }
.driftzone-button--secondary { background: transparent; color: var(--driftzone-text); border: 1px solid var(--driftzone-line); }
.driftzone-button:focus-visible, .driftzone-focus { outline: 2px solid var(--driftzone-accent); outline-offset: 2px; }

/* Lignes de liste en pilule ; la sélection se lit au texte rose. */
.driftzone-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  border-radius: 999px;
  padding: 0.5rem 0.875rem;
  font-size: 0.875rem;
}
.driftzone-row__info { font-size: 0.8125rem; color: var(--driftzone-muted); }
.driftzone-row--selected { background: var(--driftzone-select); color: var(--driftzone-accent); }
.driftzone-row--selected .driftzone-row__info { color: var(--driftzone-accent); }

/* Emplacement du logo (js/logo.js) : <span class="driftzone-logo" data-driftzone-logo>DriftZone</span>. Le nom reste écrit en
   Rubik tant qu'aucun fichier html/img/logo.svg ou logo.png n'est déposé dans driftzone_ui ; ensuite l'image le remplace.
   Taille réglable par page : --driftzone-logo-text (le nom) et --driftzone-logo-height (l'image). */
.driftzone-logo {
  display: inline-flex;
  align-items: center;
  font-size: var(--driftzone-logo-text, 1.375rem);
  font-weight: 600;
  line-height: 1.2;
  color: var(--driftzone-text);
}
.driftzone-logo__image { display: block; height: var(--driftzone-logo-height, 2.5rem); width: auto; max-width: 16rem; object-fit: contain; }