:root {
  --parchemin: #f3e7c9;
  --encre: #2b1d0e;
  --bois: #3b2a1a;
  --bois-clair: #5a3f25;
  --or: #e0b04a;
  --fond: #14110d;
  --doux: #b9a57e;
  --rouge: #c9533d;
  --vert: #6fb75a;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--fond); color: var(--parchemin);
  font: 14px/1.45 Georgia, "Iowan Old Style", "Palatino Linotype", serif; }
#toile { position: fixed; inset: 0; width: 100%; height: 100%; display: block; image-rendering: pixelated;
  cursor: grab; touch-action: none; }
#toile.tire { cursor: grabbing; }
button { font: inherit; cursor: pointer; }

#bandeau { position: fixed; top: 0; left: 0; right: 0; display: flex; flex-wrap: wrap; gap: 6px 16px;
  align-items: center; padding: 8px 14px; background: linear-gradient(#14110df2, #14110d00);
  z-index: 3; pointer-events: none; }
#bandeau > * { pointer-events: auto; }
#titre { font-size: 18px; letter-spacing: .04em; color: var(--or); }
#bandeau span { color: var(--parchemin); text-shadow: 0 1px 2px #000; }
#cerveau.actif::before { content: "● "; color: var(--vert); }
#cerveau.endormi::before { content: "● "; color: var(--doux); }
#archive { color: var(--or) !important; font-weight: bold; }
#direct { background: var(--or); color: var(--encre); border: 0; border-radius: 4px; padding: 3px 10px; }

.panneau-base { background: var(--parchemin); color: var(--encre); border: 3px solid var(--bois);
  box-shadow: 0 6px 24px #000a; border-radius: 6px; }

#fiche { position: fixed; top: 52px; left: 12px; width: min(360px, calc(100% - 24px)); bottom: 12px;
  overflow-y: auto; padding: 14px 16px; z-index: 4; }
#fiche[hidden] { display: none; }
#fiche, #panneau { background: var(--parchemin); color: var(--encre); border: 3px solid var(--bois);
  box-shadow: 0 6px 24px #000a; border-radius: 6px; }
.fermer { position: sticky; top: 0; float: right; background: var(--bois); color: var(--parchemin); border: 0;
  border-radius: 4px; width: 28px; height: 28px; }
#fiche h2 { margin: 0 0 2px; font-size: 22px; }
#fiche .sous { color: #6b5536; margin-bottom: 8px; }
#fiche h3 { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: #7a5a2e; margin: 14px 0 4px;
  border-bottom: 1px solid #d6c39a; }
.pensee { font-style: italic; background: #fff8e6; border-left: 3px solid var(--or); padding: 6px 8px; }
.traits span, .liens span { display: inline-block; background: #e6d3a8; border-radius: 10px; padding: 1px 8px;
  margin: 2px 4px 2px 0; font-size: 12px; }
.jauge { display: grid; grid-template-columns: 70px 1fr 30px; gap: 6px; align-items: center; font-size: 12px; }
.jauge .barre { height: 7px; background: #d9c7a0; border-radius: 4px; overflow: hidden; }
.jauge .barre i { display: block; height: 100%; background: var(--bois-clair); }
.relation { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; padding: 2px 0;
  cursor: pointer; }
.relation:hover { background: #efe1bf; }
.relation .aff { font-variant-numeric: tabular-nums; }
.pos { color: #2f7a2f; } .neg { color: var(--rouge); }
.souvenir { font-size: 13px; padding: 3px 0; border-bottom: 1px dotted #d6c39a; }
.souvenir small, .evt small { color: #8a7250; }

#panneau { position: fixed; top: 52px; right: 12px; width: min(380px, calc(100% - 24px)); bottom: 70px;
  display: flex; flex-direction: column; z-index: 3; transition: transform .2s; }
#panneau[hidden] { display: none; }
#onglets { display: flex; gap: 4px; margin-left: auto; flex-wrap: wrap; }
#panneau-contenu { overflow-y: auto; padding: 10px 14px; flex: 1; }
.gazette { background: #fff8e6; border: 1px solid #d6c39a; padding: 10px 12px; margin-bottom: 12px; }
.gazette h4 { margin: 0 0 4px; font-size: 17px; }
.gazette .date { font-size: 12px; color: #8a7250; }
.evt { font-size: 13px; padding: 3px 0; border-bottom: 1px dotted #d6c39a; }
.dialogue { background: #fff8e6; border: 1px solid #d6c39a; padding: 8px 10px; margin-bottom: 10px; }
.dialogue .entete { font-size: 12px; color: #8a7250; margin-bottom: 4px; }
.replique { margin: 3px 0; }
.replique b { color: #6b3f12; }
.vide { color: #8a7250; font-style: italic; }
canvas.courbe { width: 100%; height: 120px; background: #fff8e6; border: 1px solid #d6c39a; margin-bottom: 4px; }
.legende { font-size: 12px; color: #6b5536; margin-bottom: 12px; }
.stocks { display: grid; grid-template-columns: 1fr 1fr; gap: 3px 14px; font-size: 13px; }
input[type=range] { width: 100%; }

#fil { position: fixed; left: 12px; right: 12px; bottom: 10px; display: flex; flex-direction: column-reverse; gap: 4px;
  align-items: flex-start; pointer-events: none; z-index: 2; }
#fil div { background: #14110dd9; border: 1px solid var(--bois-clair); color: var(--parchemin); border-radius: 4px;
  padding: 3px 10px; font-size: 13px; animation: apparait .4s; max-width: 70ch; }
@keyframes apparait { from { opacity: 0; transform: translateY(6px); } }
#info-batiment { position: fixed; z-index: 5; background: var(--parchemin); color: var(--encre);
  border: 2px solid var(--bois); border-radius: 4px; padding: 6px 10px; font-size: 13px; max-width: 260px;
  pointer-events: none; }

@media (max-width: 720px) {
  #panneau { top: auto; left: 0; right: 0; bottom: 0; width: 100%; height: 42%; border-radius: 10px 10px 0 0; }
  #fiche { top: 48px; left: 0; right: 0; width: 100%; bottom: auto; max-height: 55%; border-radius: 0 0 10px 10px; }
  #fil { bottom: calc(42% + 8px); }
  #bandeau { font-size: 12px; gap: 2px 10px; }
  #onglets { margin-left: 0; width: 100%; }
  #onglets button { font-size: 12px; padding: 0 5px; }
  #fiche { top: 84px; }
}

/* ---------------------------------------------------------------------------
   Habillage CraftPix : cadres de bois et parchemin (decoupe en 9, pixels nets).
   ------------------------------------------------------------------------ */
#fiche, #panneau {
  background: none; border: 16px solid transparent; border-radius: 0; box-shadow: 0 10px 30px #000c;
  border-image: url(/static/art/cadre.png) 6 fill round; image-rendering: pixelated;
}
#fiche { padding: 6px 10px; }
#onglets button, .fermer, #direct, #panneau-contenu button {
  border: 6px solid transparent; border-image: url(/static/art/bois.png) 3 fill stretch;
  background: none !important; color: #f3e2b8 !important; border-radius: 0; padding: 1px 8px;
  image-rendering: pixelated; text-shadow: 0 1px 0 #2a1408;
}
#onglets button.actif {
  border-image: url(/static/art/titre.png) 5 fill stretch; color: #2a1d10 !important; text-shadow: none;
}
#replier { margin-left: 6px; }
#onglets button { font-size: 13px; padding: 0 8px; }
#bandeau { background: none; padding: 10px 14px; }
#bandeau::before {
  content: ""; position: absolute; inset: 4px 8px 2px 8px; z-index: -1;
  border: 8px solid transparent; border-image: url(/static/art/bois.png) 3 fill stretch; image-rendering: pixelated;
  opacity: .92;
}
#titre { color: #ffd98a; text-shadow: 0 2px 0 #2a1408; }
#fil div { background: none; border: 6px solid transparent; border-image: url(/static/art/cadre_petit.png) 4 fill stretch;
  color: #2b1d0e; image-rendering: pixelated; border-radius: 0; }
.gazette, .dialogue, .pensee { background: #f6ebc8; border: 1px solid #b9965e; }
#info-batiment { border: 8px solid transparent; border-image: url(/static/art/cadre_petit.png) 4 fill stretch;
  background: none; border-radius: 0; }
#fiche h3 { border-bottom: 1px solid #b9965e; color: #6b3f12; }

/* Le menu debug. */
.debug { margin: 10px 0 4px; }
.debug h4 { margin: 0 0 6px; font-size: 14px; color: #6b3f12; border-bottom: 1px solid #b9965e; }
.debug .grille { display: flex; flex-wrap: wrap; gap: 4px; }
.debug .grille button { font-size: 12px; }
.debug .grille button.actif { border-image: url(/static/art/titre.png) 5 fill stretch; color: #2a1d10 !important; text-shadow: none; }
.debug .grille button.impossible { opacity: .6; }
.debug-etat { margin: 0 0 4px; font-weight: bold; color: #4a2c10; }
.debug-message { min-height: 1.2em; font-size: 13px; font-style: italic; color: #6b3f12; }
#onglets [data-onglet="debug"] { filter: hue-rotate(-30deg) saturate(1.4); }

/* L'interieur des batiments. */
#interieur { position: fixed; inset: 0; z-index: 8; display: flex; align-items: center; justify-content: center;
  background: rgba(10, 7, 4, 0.72); animation: entrer .35s ease-out; }
#interieur[hidden] { display: none; }
.cadre-interieur { border: 16px solid transparent; border-image: url(/static/art/cadre.png) 6 fill round;
  image-rendering: pixelated; padding: 4px 8px 8px; max-width: 96vw; color: #2b1d0e; }
.cadre-interieur h3 { margin: 0; color: #6b3f12; }
#interieur-detail { margin: 2px 0 8px; font-size: 14px; }
#interieur-toile { display: block; image-rendering: pixelated; border: 2px solid #6b4424; }
#info-batiment .entrer { margin-top: 4px; font-style: italic; color: #6b3f12; }
@keyframes entrer { from { opacity: 0; transform: scale(1.04); } to { opacity: 1; transform: none; } }

/* Les credits. */
#credits { position: fixed; right: 14px; bottom: 8px; z-index: 3; font-size: 12px; color: #f3e2b8;
  text-shadow: 0 1px 2px #000; opacity: .85; }
#credits a { color: #ffd98a; }
#credits button { background: none; border: 0; padding: 0; color: #ffd98a; text-decoration: underline; font-size: 12px;
  text-shadow: 0 1px 2px #000; }
@media (max-width: 720px) { #credits { bottom: auto; top: 86px; right: 8px; font-size: 11px; } }

/* L'intro : lever de soleil, logo, deux villageois, puis le village. */
#intro { position: fixed; inset: 0; z-index: 50; background: #0c1028; overflow: hidden; }
#intro canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; image-rendering: pixelated; }
.intro-logo { position: absolute; left: 50%; top: 9%; width: min(84vw, 760px); transform: translate(-50%, -60px) scale(.35) rotate(-4deg);
  opacity: 0; filter: blur(6px) drop-shadow(0 10px 18px #0008); transition: none; }
.intro-logo img { display: block; width: 100%; height: auto; }
.intro-logo.visible { animation: logo-arrive 1.3s cubic-bezier(.2, 1.5, .4, 1) forwards, logo-flotte 4s ease-in-out 1.3s infinite; }
.intro-logo.part { animation: logo-part .9s ease-in forwards !important; }
.intro-logo .reflet { position: absolute; inset: 0; pointer-events: none; -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
  background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 230, .75) 48%, transparent 58%) no-repeat;
  background-size: 250% 100%; background-position: 130% 0; }
.intro-logo.visible .reflet { animation: reflet 2.6s ease-in-out 1.1s infinite; }
@keyframes logo-arrive {
  0% { opacity: 0; transform: translate(-50%, -60px) scale(.35) rotate(-4deg); filter: blur(6px) drop-shadow(0 10px 18px #0008); }
  60% { opacity: 1; filter: blur(0) drop-shadow(0 10px 18px #0008); }
  100% { opacity: 1; transform: translate(-50%, 0) scale(1) rotate(0); filter: blur(0) drop-shadow(0 10px 18px #0008); }
}
@keyframes logo-flotte { 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, -6px); } }
@keyframes logo-part { to { opacity: 0; transform: translate(-50%, -80px) scale(1.15); } }
@keyframes reflet { 0% { background-position: 130% 0; } 55%, 100% { background-position: -30% 0; } }
.intro-sous-titre { position: absolute; left: 50%; top: calc(9% + min(84vw, 760px) * .37); transform: translateX(-50%);
  margin: 0; width: 90vw; text-align: center; color: #fff4d6; font-style: italic; font-size: clamp(14px, 2.2vw, 22px);
  text-shadow: 0 2px 6px #000c; opacity: 0; transition: opacity 1.2s; }
#intro.sous-titre .intro-sous-titre { opacity: 1; }
.intro-bulle { position: absolute; transform: translate(-50%, -100%) scale(.6); max-width: min(46vw, 340px);
  padding: 6px 12px; background: #fffaeb; color: #2b1d0e; border: 3px solid #6b4424; border-radius: 10px;
  font-size: clamp(13px, 1.8vw, 18px); line-height: 1.3; text-align: center; box-shadow: 0 4px 10px #0006;
  opacity: 0; transition: opacity .25s, transform .3s cubic-bezier(.2, 1.6, .4, 1); pointer-events: none; }
.intro-bulle::after { content: ""; position: absolute; left: 50%; bottom: -11px; margin-left: -8px;
  border: 8px solid transparent; border-top-color: #6b4424; }
.intro-bulle.visible { opacity: 1; transform: translate(-50%, -100%) scale(1); }
.intro-passer { position: absolute; right: 18px; bottom: 16px; font-size: 15px; color: #fff4d6; background: #0006;
  border: 1px solid #fff4d680; border-radius: 6px; padding: 6px 14px; }
.intro-passer:hover { background: #000a; }
@media (prefers-reduced-motion: reduce) {
  .intro-logo.visible, .intro-logo.visible .reflet { animation: none; opacity: 1; transform: translate(-50%, 0); filter: none; }
}