/* Design system de BoardBox — style « aurora » : fond lumineux animé, cartes en verre,
   titres en dégradé. Palette chaude rouge/orange (contrastes WCAG vérifiés). Thèmes clair et sombre.
   Les pages chargent ce fichier (polices incluses, voir @font-face ci-dessous), puis leur propre CSS. */

/* Polices auto-hébergées (SIL Open Font License, voir fonts/OFL-*.txt). Générées depuis Google Fonts :
   aucune requête vers Google à l'utilisation. Polices variables : un fichier par police et par sous-ensemble. */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url('fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url('fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400 600; font-display: swap;
  src: url('fonts/jetbrains-mono-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400 600; font-display: swap;
  src: url('fonts/jetbrains-mono-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Sora'; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url('fonts/sora-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Sora'; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url('fonts/sora-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }


/* ---------- Couleurs : thème clair (par défaut) ---------- */
:root {
  --bg: #fbf5f1;
  --surface: rgba(255, 255, 255, .64);      /* verre */
  --surface-2: rgba(255, 255, 255, .86);    /* verre plus opaque */
  --field: rgba(255, 255, 255, .92);        /* fond des champs */
  --ink: #2b1712;
  --muted: #7a5a50;
  --line: rgba(43, 23, 18, .12);
  --accent: #c2410c;                        /* orange brûlé : boutons, liens */
  --accent-2: #d9650b;                      /* orange */
  --accent-3: #b91c3c;                      /* rouge */
  --on-accent: #ffffff;
  --grad: linear-gradient(135deg, #b91c3c 0%, #c2410c 50%, #d9650b 100%);
  --signal: #d97706; --signal-soft: #fdebd3; --signal-ink: #5a2d00;
  --ok: #0f8a5f; --danger: #c42b3a;
  --shadow: 0 18px 40px -18px rgba(43, 23, 18, .22);
  --orb-1: rgba(194, 65, 12, .18); --orb-2: rgba(217, 101, 11, .16); --orb-3: rgba(185, 28, 60, .12);
  --grid-line: rgba(43, 23, 18, .045);

  --f-display: "Sora", system-ui, sans-serif;
  --f-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --ease: cubic-bezier(.2, .8, .2, 1);
  color-scheme: light;

  /* Alias historiques utilisés par tirage/ (même sens que ci-dessus) */
  --glass: var(--surface); --glass-strong: var(--surface-2); --border: var(--line);
  --text: var(--ink); --text-dim: var(--muted); --accent-1: var(--accent); --error: var(--danger);
}

/* ---------- Thème sombre ---------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #150c0a;
    --surface: rgba(255, 240, 232, .055);
    --surface-2: rgba(255, 240, 232, .095);
    --field: rgba(0, 0, 0, .3);
    --ink: #f7ece7;
    --muted: #c9aca2;
    --line: rgba(255, 236, 228, .12);
    --accent: #f47a55;
    --accent-2: #f6a75e;
    --accent-3: #ee6366;
    --on-accent: #1f0d07;
    --grad: linear-gradient(135deg, #ee6366 0%, #f47a55 50%, #f6a75e 100%);
    --signal: #f6a75e; --signal-soft: #3d2410; --signal-ink: #ffd8b0;
    --ok: #34d399; --danger: #ff6b78;
    --shadow: 0 20px 50px rgba(0, 0, 0, .4);
    --orb-1: rgba(244, 122, 85, .26); --orb-2: rgba(246, 167, 94, .18); --orb-3: rgba(238, 99, 102, .16);
    --grid-line: rgba(255, 236, 228, .028);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #150c0a;
  --surface: rgba(255, 240, 232, .055);
  --surface-2: rgba(255, 240, 232, .095);
  --field: rgba(0, 0, 0, .3);
  --ink: #f7ece7;
  --muted: #c9aca2;
  --line: rgba(255, 236, 228, .12);
  --accent: #f47a55;
  --accent-2: #f6a75e;
  --accent-3: #ee6366;
  --on-accent: #1f0d07;
  --grad: linear-gradient(135deg, #ee6366 0%, #f47a55 50%, #f6a75e 100%);
  --signal: #f6a75e; --signal-soft: #3d2410; --signal-ink: #ffd8b0;
  --ok: #34d399; --danger: #ff6b78;
  --shadow: 0 20px 50px rgba(0, 0, 0, .4);
  --orb-1: rgba(244, 122, 85, .26); --orb-2: rgba(246, 167, 94, .18); --orb-3: rgba(238, 99, 102, .16);
  --grid-line: rgba(255, 236, 228, .028);
  color-scheme: dark;
}

/* ---------- Jetons de composants ----------
   Les outils n'utilisent QUE ces variables (aucune couleur en dur, ni en CSS ni en JS) :
   changer de charte = modifier ce fichier uniquement. */
:root {
  --shadow-color: rgba(43, 23, 18, .18);      /* ombres portées */
  --overlay: rgba(43, 23, 18, .35);           /* voile derrière les fenêtres */
  --highlight-line: rgba(255, 255, 255, .75); /* liseré lumineux en haut des cartes en verre */
  /* Équipes de jeu (Nom de code…) : rouge, bleu, carte neutre, assassin */
  --team-red: #c8322f; --team-blue: #2563c9; --card-neutral: #dccbb9; --card-assassin: #1f1512;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --shadow-color: rgba(0, 0, 0, .45); --overlay: rgba(8, 4, 3, .62); --highlight-line: rgba(255, 255, 255, .3);
    --team-red: #cc3a35; --team-blue: #2f6fdc; --card-neutral: #6a5649; --card-assassin: #050302;
  }
}
:root[data-theme="dark"] {
  --shadow-color: rgba(0, 0, 0, .45); --overlay: rgba(8, 4, 3, .62); --highlight-line: rgba(255, 255, 255, .3);
  --team-red: #cc3a35; --team-blue: #2f6fdc; --card-neutral: #6a5649; --card-assassin: #050302;
}
:root {
  --on-color: #ffffff;                        /* texte sur une pastille colorée (avatars) */
  --on-signal: #1d1400;                       /* texte sur --signal (gagnant, meneur) */
  /* QR codes : toujours sombre sur clair, quel que soit le thème (certains lecteurs ne lisent pas l'inverse) */
  --qr-fg: #000000; --qr-bg: #ffffff;
  --shadow-lg: 0 30px 80px var(--shadow-color);
  --scrollbar: color-mix(in srgb, var(--ink) 20%, transparent);
  /* Bouton principal : même rendu dans tous les outils */
  --btn-primary-bg: var(--grad);
  --btn-primary-ink: var(--on-accent);
  --btn-primary-shadow: 0 8px 22px -8px color-mix(in srgb, var(--accent) 70%, transparent);
  /* Couleurs d'identité des joueurs (compteur…) : distinctes entre elles, lisibles avec --on-color */
  --player-1: #e8590c; --player-2: #3a7bd5; --player-3: #0f9a6c; --player-4: #b03fd4;
  --player-5: #c27c00; --player-6: #0884b5; --player-7: #d63447; --player-8: #4f8a0f;
  --player-9: #7a4bd8; --player-10: #a8560f; --player-11: #1a8585; --player-12: #c2347a;
}

/* ---------- Bouton principal partagé ---------- */
.btn-primary { background: var(--btn-primary-bg); color: var(--btn-primary-ink); border-color: transparent; box-shadow: var(--btn-primary-shadow); }

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; min-height: 100vh; background: var(--bg); color: var(--ink); font-family: var(--f-body); font-size: 16px; line-height: 1.5; overflow-x: hidden; transition: background-color .4s var(--ease), color .4s var(--ease); }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
input::placeholder { color: var(--muted); opacity: .8; }
/* iPhone : Safari zoome sur tout champ dont le texte fait moins de 16px quand il reçoit le focus.
   Sur écran tactile, on impose donc 16px minimum à tous les champs de saisie. */
@media (pointer: coarse) {
  input, select, textarea { font-size: max(16px, 1em) !important; }
}
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }

/* ---------- Fond aurora (sans balisage : pseudo-éléments du body) ---------- */
body::before {
  content: ""; position: fixed; inset: -20vmax; z-index: -2; pointer-events: none;
  background:
    radial-gradient(38vmax 34vmax at 18% 16%, var(--orb-1), transparent 70%),
    radial-gradient(34vmax 30vmax at 86% 28%, var(--orb-2), transparent 70%),
    radial-gradient(38vmax 34vmax at 60% 92%, var(--orb-3), transparent 70%);
  filter: blur(20px);
  animation: aurora 26s ease-in-out infinite alternate;
}
body::after {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image: linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(circle at 50% 30%, #000, transparent 75%);
  -webkit-mask-image: radial-gradient(circle at 50% 30%, #000, transparent 75%);
}
@keyframes aurora {
  0% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(3vmax, 2vmax) scale(1.06); }
  100% { transform: translate(-2vmax, 3vmax) scale(1.02); }
}

/* ---------- Verre : cartes, panneaux, fenêtres ---------- */
.card, .glass, dialog {
  backdrop-filter: blur(18px) saturate(1.2);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  box-shadow: var(--shadow);
}
.card { position: relative; }
.card::before {
  content: ""; position: absolute; top: 0; left: 12%; right: 12%; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .45), transparent);
}

/* ---------- Titres en dégradé ---------- */
/* Dégradé cyclique (orange brûlé → orange → rouge → orange → orange brûlé) : avec background-size 200%,
   l'orange reste visible quelle que soit la position de l'animation. */
:root { --grad-title: linear-gradient(90deg, var(--accent) 0%, var(--accent-2) 25%, var(--accent-3) 50%, var(--accent-2) 75%, var(--accent) 100%); }
.grad-text {
  background: var(--grad-title); background-size: 200% auto;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: shimmer 6s linear infinite;
}
@keyframes shimmer { to { background-position: 200% center; } }

/* ---------- Barre du haut commune : retour à l'accueil + bouton de thème ---------- */
.topbar { display: flex; align-items: center; justify-content: space-between; gap: .8rem; padding: calc(env(safe-area-inset-top, 0px) + 12px) 16px 12px; }
.back-link { display: inline-flex; align-items: center; gap: .4rem; height: 36px; padding: 0 .9rem; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); text-decoration: none; font-size: .85rem; font-weight: 600; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.theme-btn { width: 36px; height: 36px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); display: grid; place-items: center; padding: 0; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.topbar-actions { display: flex; align-items: center; gap: .5rem; }
.lang-btn { min-width: 36px; height: 36px; padding: 0 .6rem; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font-family: var(--f-mono); font-size: .75rem; font-weight: 600; letter-spacing: .04em; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.back-link:hover, .theme-btn:hover, .lang-btn:hover { border-color: var(--accent); }
.theme-btn svg { width: 16px; height: 16px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}