/* =========================================================================
   Thèmes de l'interface (chargé en dernier). <html data-theme="light|dark">
   est posé par index.html avant le premier affichage, puis par ui/theme.js
   (réglage Auto / Clair / Sombre ; Auto = comme le navigateur).
   Le monde du jeu ne change pas : seul le papier des menus passe en « nuit ».
   ========================================================================= */

/* --------------------------------------------- écran de chargement : papier */
#boot {
  background:
    radial-gradient(ellipse 70% 60% at 50% 42%, var(--paper) 0%, transparent 70%),
    repeating-linear-gradient(0deg, transparent 0 3px, var(--grain) 3px 4px),
    repeating-linear-gradient(90deg, transparent 0 5px, var(--grain) 5px 6px),
    linear-gradient(180deg, var(--paper) 0%, var(--paper-2) 100%) !important;
}
#boot::after {   /* cadre de cuir autour de l'écran, comme le carnet */
  content: ""; position: absolute; inset: 14px; border-radius: 16px; pointer-events: none;
  box-shadow: 0 0 0 3px var(--leather), 0 0 0 7px var(--leather-d), inset 0 0 40px var(--vignette);
}
.boot-sky { display: none; }
#boot h1 { color: var(--ink) !important; text-shadow: 0 4px 0 var(--title-shadow), 0 0 0 transparent !important; }
#boot h1 em { color: var(--gold) !important; text-shadow: 0 4px 0 var(--gold-d) !important; }
#boot .boot-card { min-width: min(340px, 80vw); }
#boot .boot-track { background: var(--paper-2); }
#boot-tip { background: var(--card-bg) !important; box-shadow: var(--card-frame) !important; color: var(--ink) !important; }

/* ------------------------------------------------------- variables du thème */
:root {
  --grain: rgba(120, 85, 50, 0.035);
  --vignette: rgba(120, 85, 50, 0.18);
  --title-shadow: rgba(120, 85, 50, 0.28);
  color-scheme: light;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  /* papier de nuit : brun-prune profond, encre crème, cuir plus clair pour garder le cadre lisible */
  --paper: #2b2230; --paper-2: #211a26; --ink: #f2e6cc; --ink-soft: #bba78c;
  --leather: #7a5038; --leather-d: #120b10; --gold: #f0bc58; --gold-d: #7a4c14;
  --pk-edge: #7a5038; --pk-paper: #2b2230; --pk-ink: #f2e6cc;
  --frame: 0 0 0 3px var(--leather), 0 4px 0 3px var(--leather-d), 0 14px 30px rgba(0, 0, 0, 0.6);
  --card-frame: 0 0 0 2px var(--leather), 0 3px 0 2px var(--leather-d), 0 8px 18px rgba(0, 0, 0, 0.5);
  --text: #f2e6cc; --muted: #bba78c;
  --grain: rgba(255, 230, 190, 0.025);
  --vignette: rgba(0, 0, 0, 0.45);
  --title-shadow: #120b10;
  /* surfaces claires codées en dur dans les feuilles plus anciennes */
  --btn-top: #3a2f40; --btn-hover: #463a4c; --ghost-top: #30263a; --ghost-bot: #241c2a;
  --chip: rgba(255, 240, 210, 0.08); --chip-strong: rgba(255, 240, 210, 0.14);
}

/* =========================================================================
   Thème sombre : surfaces et encres codées en dur dans les feuilles d'origine
   ========================================================================= */
:root[data-theme="dark"] {
  --night-hi: rgba(240, 188, 88, 0.16);      /* « choisi » / survol : lueur dorée */
  --night-face: #3a2f42;                     /* fond des portraits */
  --night-blue: #a9c4f0;                     /* mots dans la langue apprise (bleu encre) */
  --night-red: #ff8a7a;
  --night-brown: #e0a070;
}

/* le carnet : pages de nuit, lignes bleutées discrètes, marge rouge */
[data-theme="dark"] .page {
  color: var(--ink);
  background:
    repeating-linear-gradient(to bottom, transparent 0 31px, rgba(150, 180, 230, 0.07) 31px 32px),
    radial-gradient(ellipse at 50% 40%, #30263a 0%, #261e2c 70%, #1c1520 100%);
}
[data-theme="dark"] .page-left { box-shadow: inset -26px 0 30px -18px rgba(0, 0, 0, 0.7); }
[data-theme="dark"] .page-right { box-shadow: inset 26px 0 30px -18px rgba(0, 0, 0, 0.7); }
[data-theme="dark"] .gutter { background: linear-gradient(to right, #120d14, #2a2130 30%, #2a2130 70%, #120d14); }
[data-theme="dark"] .chapter-title, [data-theme="dark"] .entry-target { color: var(--ink); }
[data-theme="dark"] .chapter-sub { color: var(--ink-soft); }
[data-theme="dark"] .menu-tab.on { background: linear-gradient(180deg, #3a2f42, #2b2230); color: var(--ink); }
[data-theme="dark"] .menu-tab { color: var(--ink); }

/* boutons */
[data-theme="dark"] .btn, [data-theme="dark"] .quiz-choice, [data-theme="dark"] .cr-turn, [data-theme="dark"] .dialogue .btn {
  background: linear-gradient(180deg, var(--btn-top), var(--paper-2)); color: var(--ink);
}
[data-theme="dark"] .btn:hover, [data-theme="dark"] .quiz-choice:hover { background: linear-gradient(180deg, var(--btn-hover), #2b2230); }
[data-theme="dark"] .btn.ghost, [data-theme="dark"] .panel:not(.book-panel) .btn.ghost { background: linear-gradient(180deg, var(--ghost-top), var(--ghost-bot)); color: var(--ink); }
[data-theme="dark"] .btn.primary, [data-theme="dark"] .dialogue .btn.primary { background: linear-gradient(180deg, #ffd770, #e0a038); color: #2a1a08; }
[data-theme="dark"] .btn.primary:hover { background: linear-gradient(180deg, #ffe08c, #eeb04a); }
[data-theme="dark"] .btn.danger { background: linear-gradient(180deg, #6a2a28, #4a1a1a); color: #ffd6cc; }
[data-theme="dark"] .btn kbd { background: rgba(255, 240, 210, 0.14); color: var(--ink); }
[data-theme="dark"] .btn.primary kbd { background: rgba(60, 30, 8, 0.2); color: #2a1a08; }
[data-theme="dark"] .quiz-choice kbd { color: #2a1a08; }

/* petites cartes translucides posées sur le papier */
[data-theme="dark"] :is(.entry-pic, .cr-opt.word, .toast-pic, .act, .qside, .qstud, .badge-card, .badge-list .badge-card,
  .rf, .page .set-row, .game-card, .tr-row, .seg-btn, .tl-acc, .tl-card, .tl-chip, .lb-row, .end2-stats div, .end-coin,
  .sl-card, .lang, .lesson-card, .order-choice, .sum-open, .pin, .pin-btn, .rival, .toast-icon, .aid-preview) {
  background: var(--chip); color: var(--ink);
}
[data-theme="dark"] :is(.act.active, .seg-btn:hover, .seg-btn.on, .tl-acc.guest:hover, .tl-card:hover, .tl-card.on, .tl-chip.on,
  .sl-card.on, .sl-open:hover, .lang:hover, .lang.on, .sum-tracked, .sum-open:hover, .pin.on, .pin:hover, .pin-btn.on, .tl-toast, .qz-ear) {
  background: var(--night-hi); color: var(--ink);
}
[data-theme="dark"] .qz-ear:hover { background: var(--chip-strong); }
[data-theme="dark"] .tr-row.gold { background: linear-gradient(90deg, rgba(240, 188, 88, 0.28), rgba(255, 240, 210, 0.05)); }
[data-theme="dark"] .lb-row.top1 { background: linear-gradient(90deg, rgba(240, 188, 88, 0.35), rgba(255, 240, 210, 0.05)); }
[data-theme="dark"] .lb-row.top2 { background: linear-gradient(90deg, rgba(200, 210, 228, 0.25), rgba(255, 240, 210, 0.05)); }
[data-theme="dark"] .lb-row.top3 { background: linear-gradient(90deg, rgba(220, 150, 100, 0.28), rgba(255, 240, 210, 0.05)); }

/* portraits */
[data-theme="dark"] :is(.cr-face, .qstud img, .badge-emblem, .rf img, .end-student img, .order-face, .rival img) { background: var(--night-face); }
[data-theme="dark"] .badge-list .badge-card.locked .badge-emblem { background: radial-gradient(circle at 35% 30%, #4a4052, #2a2230); }

/* champs de saisie */
[data-theme="dark"] :is(.tl-in, .cr-name, input[type="text"], input[type="password"], .master-input) {
  background: #1a1420; color: var(--ink); caret-color: var(--gold);
}
[data-theme="dark"] .tl-box { background: var(--paper); }

/* cartes dorées / bleutées */
[data-theme="dark"] :is(.toast.gold, .fc-btn.big, .ph-tile.in) { background: linear-gradient(180deg, #4a3a22, #33281a); color: var(--ink); }
[data-theme="dark"] .toast.scan { background: linear-gradient(180deg, #1f3a38, #172a2a); }
[data-theme="dark"] .fc-back { background: linear-gradient(180deg, #33293a, #261e2c); }
[data-theme="dark"] .m-boss { background: rgba(43, 34, 48, 0.92); }
[data-theme="dark"] .ph-answer { background: rgba(43, 34, 48, 0.4); }
[data-theme="dark"] :is(.order-bubble, .exclaim) { background: var(--paper); color: var(--ink); }
[data-theme="dark"] .wlabel.locked { background: #3a2228; }
[data-theme="dark"] .dlg-face { background: radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--accent) 35%, #2b2230) 0%, #1c1520 100%); }

/* encres codées en dur */
[data-theme="dark"] :is(.tr-run b, .lb-time, .fc-target, .end2-time, .sc-word, .dlg-text.foreign, .order-ask, .phrase-target) { color: var(--night-blue); }
[data-theme="dark"] :is(.rec b, .set-group h4) { color: var(--night-brown); }
[data-theme="dark"] :is(.stamp, .order-feedback.ko, .rival.ready .rival-status, .dlg-name, .dialogue .btn.ghost.next, .wlabel.locked .wl-main) { color: var(--night-red); }
[data-theme="dark"] .lb-name, [data-theme="dark"] .badge-count { color: var(--ink); }
[data-theme="dark"] .word-row.unknown .w-target { color: #8a8098; }
[data-theme="dark"] .wl-sub { color: color-mix(in srgb, var(--accent) 70%, #fff); }

/* textes posés directement sur le monde : toujours crème (le papier, lui, change) */
[data-theme="dark"] :is(.title-logo h1, .intro-line, .master-foot, .res-title, .res-name, .res-medal, .end-title, .wf-sub, .ph-placeholder, .lang-flag) { color: #fbf4e2; }
[data-theme="dark"] :is(.tagline, .title-foot, .end-body) { color: #efe0bd; }
[data-theme="dark"] .cr-view {
  background: radial-gradient(ellipse at 50% 92%, rgba(232, 176, 72, 0.25), transparent 55%), linear-gradient(180deg, #3a2f44 0%, #241c2a 100%);
  box-shadow: inset 0 0 0 2px rgba(255, 230, 190, 0.12);
}
[data-theme="dark"] .spread { filter: drop-shadow(0 3px 0 #3a3042) drop-shadow(0 6px 0 #2a2230); }   /* tranche des feuilles */

/* reflet qui glisse sur la barre : animé par le compositeur (transform), il bouge
   même pendant les gros calculs du démarrage */
#boot #boot-bar { position: relative; overflow: hidden; }
#boot #boot-bar::after {
  content: ""; position: absolute; inset: 0; width: 40%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.55), transparent);
  animation: bootShine 1.1s linear infinite; will-change: transform;
}
@keyframes bootShine { from { transform: translateX(-100%); } to { transform: translateX(260%); } }
@media (prefers-reduced-motion: reduce) { #boot #boot-bar::after { animation: none; } }

/* carte du village (onglet Aventure) en sombre : cadre de cuir, médaillons un peu moins blancs */
html[data-theme="dark"] .pg-map-wrap { background: #4a3a34; }
html[data-theme="dark"] .pg-map-wrap::after { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.7), inset 0 0 22px rgba(0, 0, 0, 0.45); }
html[data-theme="dark"] .pg-pin > span, html[data-theme="dark"] .pg-compass { background: #e8dcc4; }

/* page Contrôles en sombre */
html[data-theme="dark"] .kb-slot { background: rgba(255, 255, 255, 0.06); box-shadow: inset 0 0 0 2px rgba(255, 220, 160, 0.16); }
html[data-theme="dark"] .kb-slot:hover, html[data-theme="dark"] .kb-slot.waiting { background: rgba(240, 176, 32, 0.16); box-shadow: inset 0 0 0 2px #e0a030; }
html[data-theme="dark"] .kb-wait, html[data-theme="dark"] .kb-note { background: rgba(240, 176, 32, 0.14); }