/* L'Encrier : un carnet ouvert sur un bureau de nuit. Papier vergé, encre de Chine, une seule couleur : le cuivre. */
:root {
  --bureau: #120e0b; --bureau-2: #1d1712; --papier: #f3eee2; --papier-2: #e9e2d1; --papier-ombre: #d8cfba;
  --encre: #1d1914; --encre-2: #4a4237; --pale: #8a8070; --cuivre: #a4552a; --cuivre-hi: #c8743f; --or: #c9a14a;
  --f-titre: 'Cinzel', 'Trajan Pro', Georgia, serif; --f-deco: 'Cinzel Decorative', 'Cinzel', Georgia, serif;
  --f-texte: 'IM Fell English', 'Iowan Old Style', 'Palatino Linotype', Georgia, serif;
  color-scheme: dark;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; min-height: 100%; }
body { background: radial-gradient(120% 90% at 50% 40%, var(--bureau-2) 0%, var(--bureau) 70%); color: var(--papier); font: 19px/1.55 var(--f-texte); }
button, input { font: inherit; }
:focus-visible { outline: 2px solid var(--cuivre-hi); outline-offset: 3px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
h1, h2 { margin: 0; text-wrap: balance; font-weight: 700; }
p { margin: 0; }

/* barre du haut */
.barre { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: calc(10px + env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) 10px max(16px, env(safe-area-inset-left, 0px));
  background: rgba(18, 14, 11, .92); border-bottom: 1px solid rgba(164, 85, 42, .3); }
.retour { color: var(--papier-ombre); text-decoration: none; font: 600 13px/1 var(--f-titre); letter-spacing: .1em; text-transform: uppercase; }
.retour:hover { color: var(--cuivre-hi); }
.ou { flex: 1 1 auto; min-width: 0; color: var(--pale); font-style: italic; font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.outils { display: flex; gap: 10px; align-items: center; }
.outils button { background: transparent; color: var(--papier-ombre); border: 1px solid rgba(216, 207, 186, .3); padding: 6px 12px; cursor: pointer; font: 600 12px/1 var(--f-titre); letter-spacing: .08em; text-transform: uppercase; }
.outils button:hover { border-color: var(--cuivre-hi); color: var(--cuivre-hi); }
#b-son[aria-pressed="false"] { opacity: .55; text-decoration: line-through; }
.encre { display: inline-flex; align-items: center; gap: 6px; font: 600 16px/1 var(--f-titre); color: var(--papier); padding-right: 4px; }
.encre i { width: 12px; height: 16px; background: var(--papier); border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%; transform: rotate(180deg); display: inline-block; }
.encre.perd { animation: perd .6s; }
.encre.gagne { animation: gagne .8s; }
@keyframes perd { 30% { color: var(--cuivre-hi); transform: translateY(2px); } }
@keyframes gagne { 30% { color: var(--or); transform: scale(1.15); } }

/* le livre */
.bureau { padding: 28px max(16px, env(safe-area-inset-right, 0px)) 120px max(16px, env(safe-area-inset-left, 0px)); }
.livre { max-width: 1160px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .7), 0 0 0 1px rgba(0, 0, 0, .4); animation: ouvre .5s ease-out; }
@keyframes ouvre { from { transform: translateY(6px); } }
.page { position: relative; min-width: 0; padding: clamp(24px, 4vw, 52px); color: var(--encre); min-height: min(640px, 78vh);
  background: repeating-linear-gradient(90deg, transparent 0 27px, rgba(120, 100, 70, .06) 27px 28px), repeating-linear-gradient(0deg, transparent 0 2px, rgba(120, 100, 70, .03) 2px 3px), var(--papier);
  display: flex; flex-direction: column; gap: 18px; }
.gauche { box-shadow: inset -30px 0 40px -30px rgba(60, 40, 20, .45); border-radius: 4px 0 0 4px; }
.droite { box-shadow: inset 30px 0 40px -30px rgba(60, 40, 20, .45); border-radius: 0 4px 4px 0; }
.gauche::before { content: ""; position: absolute; left: 28px; top: 0; bottom: 0; width: 1px; background: rgba(164, 85, 42, .45); }
@media (max-width: 860px) {
  .livre { grid-template-columns: minmax(0, 1fr); }
  .page { min-height: 0; }
  .gauche { border-radius: 4px 4px 0 0; box-shadow: inset 0 -24px 30px -26px rgba(60, 40, 20, .45); }
  .droite { border-radius: 0 0 4px 4px; box-shadow: inset 0 24px 30px -26px rgba(60, 40, 20, .45); }
}
.sur { font: 600 12px/1.3 var(--f-titre); letter-spacing: .18em; text-transform: uppercase; color: var(--cuivre); }
h1 { font: 900 clamp(48px, 8vw, 88px)/1 var(--f-deco); color: var(--encre); }
h2 { font: 700 clamp(30px, 4vw, 44px)/1.1 var(--f-deco); color: var(--encre); }
.sous { font-style: italic; font-size: 24px; color: var(--encre-2); }
.loi { margin-top: auto; font-style: italic; color: var(--cuivre); font-size: 20px; max-width: 26ch; }
.titre-page { justify-content: center; }
.txt { max-width: 46ch; }
.txt.grand { font-size: 23px; line-height: 1.5; }
.note { color: var(--pale); font-size: 16px; font-style: italic; }
.regles { margin: 0; padding-left: 1.2em; display: grid; gap: 6px; color: var(--encre-2); }
.actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: auto; }
.page button { background: transparent; color: var(--encre); border: 1px solid var(--encre-2); padding: 10px 18px; cursor: pointer; font: 600 13px/1.2 var(--f-titre); letter-spacing: .08em; text-transform: uppercase; }
.page button:hover { border-color: var(--cuivre); color: var(--cuivre); }
.page button:disabled { opacity: .4; cursor: default; }
.page .b-plein { background: var(--encre); color: var(--papier); border-color: var(--encre); }
.page .b-plein:hover { background: var(--cuivre); border-color: var(--cuivre); color: var(--papier); }
.lien { border: 0 !important; padding: 0 !important; text-decoration: underline; text-transform: none !important; letter-spacing: 0 !important; font: italic 15px var(--f-texte) !important; color: var(--pale) !important; }

/* table des chapitres */
.chapitres { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.chapitres button { width: 100%; display: grid; grid-template-columns: 2.6em minmax(0, 1fr) auto; gap: 14px; align-items: center; text-align: left;
  border: 0; border-bottom: 1px dashed var(--papier-ombre); padding: 14px 4px; text-transform: none; letter-spacing: 0; font: 20px/1.3 var(--f-texte); }
.chapitres button:hover:not(:disabled) { color: var(--cuivre); }
.chapitres .num { font: 700 22px/1 var(--f-titre); color: var(--cuivre); text-align: center; }
.chapitres small { display: block; font: 600 11px/1.4 var(--f-titre); letter-spacing: .12em; text-transform: uppercase; color: var(--pale); }
.chapitres .etat { font: italic 15px/1 var(--f-texte); color: var(--pale); white-space: nowrap; }
.chapitres .etat.or { color: var(--or); } .chapitres .etat.argent { color: #7d8590; } .chapitres .etat.cuivre { color: var(--cuivre); }
.titre-gagne { margin-top: auto; font-style: italic; color: var(--cuivre); }

/* page de jeu */
.indice-titre { font: 600 12px/1.3 var(--f-titre); letter-spacing: .16em; text-transform: uppercase; color: var(--pale); }
.indice { font-style: italic; font-size: 21px; color: var(--encre-2); max-width: 40ch; }
.carnet { font-size: 26px; line-height: 1.55; max-width: 34ch; padding: 18px 0; border-top: 1px solid var(--papier-ombre); border-bottom: 1px solid var(--papier-ombre); }
.trou { display: inline-flex; gap: 3px; vertical-align: baseline; padding: 0 2px; }
.trou i { font-style: normal; display: inline-block; min-width: .62em; text-align: center; border-bottom: 2px solid var(--encre-2); line-height: 1.1; color: var(--cuivre); }
.trou i.vide { color: transparent; }
.trou.trouve i { border-bottom-color: transparent; color: var(--cuivre); animation: encrer .7s both; }
.trou.trouve i:nth-child(2) { animation-delay: .05s; } .trou.trouve i:nth-child(3) { animation-delay: .1s; } .trou.trouve i:nth-child(4) { animation-delay: .15s; } .trou.trouve i:nth-child(5) { animation-delay: .2s; } .trou.trouve i:nth-child(n+6) { animation-delay: .25s; }
@keyframes encrer { from { filter: blur(2px); color: var(--cuivre-hi); } }
.reponse { min-height: 2.6em; font-style: italic; color: var(--encre-2); }
.reponse.faux { color: var(--cuivre); }
#j-dessin, #r-sceau { width: 100%; max-width: 440px; aspect-ratio: 1; margin: 0 auto; display: block; }
#r-sceau { max-width: 220px; }
.portrait { margin: 6px 0 0; display: grid; gap: 4px; justify-items: center; }
.portrait canvas { width: 100%; max-width: 420px; aspect-ratio: 500 / 340; display: block; }
.portrait figcaption { font-style: italic; font-size: 16px; color: var(--pale); }
.sceau-nom { text-align: center; font-style: italic; color: var(--cuivre); }
.ecrire { display: flex; gap: 8px; flex-wrap: wrap; }
.ecrire input, .signer input { flex: 1 1 200px; min-width: 0; padding: 10px 14px; font-size: 24px; font-style: italic; color: var(--encre); background: rgba(255, 255, 255, .45); border: 0; border-bottom: 2px solid var(--encre-2); }
.ecrire input:focus, .signer input:focus { outline: none; border-bottom-color: var(--cuivre); }
.ecrire.secoue { animation: secoue .4s; }
@keyframes secoue { 25% { transform: translateX(-6px); } 50% { transform: translateX(5px); } 75% { transform: translateX(-3px); } }
.parole { font: 600 12px/1.3 var(--f-titre); letter-spacing: .18em; text-transform: uppercase; color: var(--cuivre); }

/* serment, grimoire */
.signer { display: grid; gap: 12px; }
.signer label { font-style: italic; font-size: 21px; }
.certificat { border: 1px solid var(--cuivre); padding: 26px 24px; text-align: center; display: grid; gap: 10px; background: rgba(255, 255, 255, .3); }
.certificat .nom { font: 700 30px/1.2 var(--f-deco); color: var(--cuivre); }
.certificat .date { font-size: 15px; color: var(--pale); font-style: italic; }
.certificat.petit { padding: 16px; } .certificat.petit .nom { font-size: 22px; }
.sceaux { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.sceaux figure { margin: 0; text-align: center; font-size: 12px; color: var(--pale); }
.sceaux canvas { width: 100%; aspect-ratio: 1; display: block; }
.vignettes { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; }
.vignettes figure { margin: 0; text-align: center; border: 1px solid var(--papier-ombre); padding: 6px 4px 8px; background: rgba(255, 255, 255, .25); }
.vignettes canvas { width: 100%; aspect-ratio: 1; display: block; }
.vignettes figcaption { font-style: italic; font-size: 16px; }
.vignettes .inconnu figcaption { color: var(--pale); }
.effacer { font-size: 15px; color: var(--pale); }

/* sous-titres : un papillon de papier glissé sous le livre, écrit à l'encre au rythme de la voix */
.sous-titres { position: fixed; left: 50%; bottom: calc(22px + env(safe-area-inset-bottom, 0px)); z-index: 10;
  width: min(560px, calc(100% - 40px)); padding: 18px 26px 16px 30px; color: var(--encre);
  background: radial-gradient(120% 140% at 30% 20%, transparent 55%, rgba(140, 100, 50, .18)), repeating-linear-gradient(0deg, transparent 0 25px, rgba(120, 100, 70, .14) 25px 26px), #e6d8b8;
  clip-path: polygon(0 4%, 6% 0, 18% 3%, 31% 0, 47% 2%, 62% 0, 78% 3%, 91% 0, 100% 3%, 99% 52%, 100% 97%, 86% 100%, 70% 97%, 53% 100%, 37% 97%, 22% 100%, 8% 97%, 0 100%, 1% 50%);
  filter: drop-shadow(0 3px 2px rgba(40, 25, 10, .45)) drop-shadow(0 18px 22px rgba(0, 0, 0, .6)); transform: translateX(-50%) rotate(-1.2deg);
  font: italic 19px/26px var(--f-texte); animation: glisse .45s ease-out; display: grid; }
.sous-titres b { order: 2; }
.sous-titres::before { content: ""; position: absolute; left: 18px; top: 0; bottom: 0; width: 1px; background: rgba(164, 85, 42, .45); }
@keyframes glisse { from { transform: translateX(-50%) translateY(14px) rotate(-3deg); } }
.sous-titres #st-texte span { transition: color .35s, filter .35s; }
.sous-titres #st-texte span.a-venir { color: transparent; filter: blur(1.5px); }
.sous-titres b { display: block; text-align: right; margin-top: 6px; font: italic 17px/1.2 var(--f-texte); color: var(--cuivre); letter-spacing: 0; text-transform: none; }
.sous-titres b::before { content: "— "; }
.sous-titres b:empty { display: none; }
@media (prefers-reduced-motion: reduce) { *, *::before { animation: none !important; transition: none !important; } }