/* ============================================================================
   QUADRIX — DESIGN SYSTEM
   ============================================================================
   Palette des 4 rangées : rose, jaune, vert, bleu -- choisies avec des
   luminosités bien différenciées pour rester lisibles même en cas de
   daltonisme ou en niveaux de gris (la position de la rangée et son nom
   écrit restent de toute façon des indices indépendants de la couleur).
   Esprit : fiche de score papier + crayon, jeu de société convivial.
   ============================================================================ */

:root {
  /* --- Couleurs neutres (papier / encre) --- */
  --paper: #faf7f0;
  --paper-raised: #ffffff;
  --ink: #2b2b2b;
  --ink-soft: #6b6660;
  --line: #ddd6c8;
  --line-strong: #b8af9c;

  /* --- 4 couleurs des rangées : rose, jaune, vert, bleu (ordre demandé) ---
     Choisies pour rester bien distinctes même en niveaux de gris (luminosité
     très différente d'une couleur à l'autre), en plus d'avoir des teintes
     éloignées sur le cercle chromatique. */
  --row-a: #e6457a; /* rose */
  --row-a-bg: #fad7e3;
  --row-b: #d4a300; /* jaune (doré, plus sombre pour rester lisible en texte) */
  --row-b-bg: #fbecb8;
  --row-c: #1a9c5b; /* vert */
  --row-c-bg: #cdebdb;
  --row-d: #2a6fdb; /* bleu */
  --row-d-bg: #cfdff8;

  /* --- États / feedback --- */
  --success: #009e73;
  --danger: #d55e00;
  --danger-bg: #fbe7da;
  --warning-bg: #fdf0d9;
  --focus-ring: #0072b2;

  /* --- Typographie --- */
  --font-display: 'Patrick Hand', 'Segoe Print', cursive;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', 'Courier New', monospace;

  /* --- Échelle d'espacement --- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-8: 3rem;

  /* --- Coins / ombres --- */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --shadow-card: 0 2px 8px rgba(43, 43, 43, 0.08), 0 1px 2px rgba(43, 43, 43, 0.06);
  --shadow-raised: 0 6px 20px rgba(43, 43, 43, 0.12);
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #1d1b17;
    --paper-raised: #262320;
    --ink: #f0ece2;
    --ink-soft: #b5ada0;
    --line: #3c3833;
    --line-strong: #524c44;
    --row-a-bg: #3a2e10;
    --row-b-bg: #16303d;
    --row-c-bg: #103530;
    --row-d-bg: #3a2433;
    --danger-bg: #3a2114;
    --warning-bg: #3a2e10;
  }
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3 {
  font-family: var(--font-display);
  font-weight: 400;
  margin: 0;
  letter-spacing: 0.01em;
}

h1 {
  font-size: 2.5rem;
}

h2 {
  font-size: 1.75rem;
}

h3 {
  font-size: 1.3rem;
}

/* Garantit que l'attribut HTML "hidden" masque toujours l'élément, même
   quand une classe (ex: .auth-screen, .game-screen) impose display:flex
   ou display:grid -- sans cette règle, la spécificité de la classe gagne
   sur la règle UA par défaut de [hidden] et l'élément reste visible. */
[hidden] {
  display: none !important;
}

p {
  margin: 0;
}

button {
  font-family: var(--font-body);
  cursor: pointer;
}

a {
  color: var(--focus-ring);
}

/* --- Focus visible (accessibilité clavier) --- */
:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}

/* ============================================================================
   COMPOSANTS PARTAGÉS
   ============================================================================ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-md);
  border: 2px solid var(--ink);
  background: var(--paper-raised);
  color: var(--ink);
  font-size: 1rem;
  font-weight: 600;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.btn:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-card);
}

.btn:active {
  transform: translateY(0);
}

.btn-primary {
  background: var(--ink);
  color: var(--paper-raised);
}

.btn-primary:hover {
  background: #000;
}

.btn-danger {
  border-color: var(--danger);
  color: var(--danger);
}

.btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.btn-block {
  width: 100%;
}

.card {
  background: var(--paper-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: var(--space-6);
}

.field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.field label {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--ink-soft);
}

.field input {
  padding: var(--space-3) var(--space-4);
  border: 2px solid var(--line);
  border-radius: var(--radius-sm);
  font-size: 1rem;
  font-family: var(--font-body);
  background: var(--paper);
  color: var(--ink);
}

.field input:focus {
  border-color: var(--focus-ring);
}

.error-banner {
  background: var(--danger-bg);
  color: var(--danger);
  border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-4);
  font-size: 0.9rem;
  font-weight: 600;
  margin-bottom: var(--space-4);
}

.eyebrow {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-soft);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}