/* ============================================================
   LE VOYAGE DU PÈLERIN — feuille de style (mobile-first)
   ============================================================ */
* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html, body { height:100%; overflow:hidden; background:#110d07; touch-action:none;
  -webkit-user-select:none; user-select:none; overscroll-behavior:none; }
:root {
  --px-font:'Press Start 2P', monospace;
  --txt-font:'VT323', 'Courier New', monospace;
  --gold:#d9b96a; --gold-dark:#9c8347; --parch:#e8dcc0; --ink:#2a2018;
  --panel:#241c12; --panel-edge:#5d4a32; --panel-hi:#8a7350;
  --sai-t:env(safe-area-inset-top,0px); --sai-b:env(safe-area-inset-bottom,0px);
  --sai-l:env(safe-area-inset-left,0px); --sai-r:env(safe-area-inset-right,0px);
}
#game { position:fixed; inset:0; }
#c3d { position:absolute; inset:0; width:100%; height:100%;
  image-rendering:pixelated; image-rendering:crisp-edges; }

.hidden { display:none !important; }
.blink { animation:blink 1.1s steps(2) infinite; }
@keyframes blink { 50% { opacity:0; } }

.screen { position:absolute; inset:0; z-index:30; display:flex;
  align-items:center; justify-content:center; text-align:center; }

/* ---------- Boutons pixel ---------- */
.pxbtn {
  font-family:var(--px-font); font-size:clamp(10px, 2.9vw, 14px);
  color:var(--parch); background:linear-gradient(#46371f, #2b2010);
  border:3px solid; border-color:var(--panel-hi) #14100a #14100a var(--panel-hi);
  padding:14px 18px; min-height:52px; min-width:230px; cursor:pointer;
  text-shadow:2px 2px 0 #000; letter-spacing:1px; image-rendering:pixelated;
  box-shadow:0 4px 0 #0b0805, inset 0 0 0 1px #00000055;
}
.pxbtn:active { transform:translateY(3px); box-shadow:0 1px 0 #0b0805; }
.pxbtn.small { min-width:0; padding:10px 12px; min-height:44px; font-size:clamp(8px,2.4vw,11px); }

/* ---------- Boot ---------- */
#boot { background:#110d07; z-index:60; flex-direction:column; }
.boot-inner { display:flex; flex-direction:column; gap:22px; align-items:center; }
.boot-book { font-size:54px; color:var(--gold); text-shadow:0 0 18px #d9b96a66; }
.boot-title { font-family:var(--px-font); color:var(--gold);
  font-size:clamp(12px,3.4vw,18px); letter-spacing:2px; text-shadow:2px 2px 0 #000; }
.boot-tap { font-family:var(--txt-font); color:#c9bd9e; font-size:clamp(18px,5vw,24px); }

/* ---------- Titre ---------- */
#title { z-index:40; flex-direction:column; }
.title-vignette { position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(ellipse at 50% 38%, transparent 30%, #110d0788 80%, #110d07ee 100%); }
.title-inner { position:relative; display:flex; flex-direction:column; align-items:center;
  gap:14px; padding:calc(var(--sai-t) + 4vh) 16px calc(var(--sai-b) + 2vh); width:100%; }
#title-ornament { color:var(--gold); font-size:14px; letter-spacing:8px; opacity:.9; }
#title-logo { font-family:var(--px-font); color:var(--gold);
  font-size:clamp(20px, 6.4vw, 44px); line-height:1.5; letter-spacing:2px;
  text-shadow:0 3px 0 #5a4520, 0 6px 0 #2a200c, 0 0 26px #d9b96a55, 4px 4px 0 #00000088;
  animation:floaty 4s ease-in-out infinite; }
@keyframes floaty { 50% { transform:translateY(-5px); } }
#title-sub { font-family:var(--txt-font); color:#d9cfb4; font-size:clamp(17px,4.4vw,23px);
  text-shadow:1px 1px 0 #000; }
#title-menu { display:flex; flex-direction:column; gap:13px; margin-top:3vh; align-items:center; }
.title-row { display:flex; gap:10px; }
#title-chapter { font-family:var(--txt-font); color:var(--gold);
  font-size:clamp(16px,4vw,21px); margin-top:2vh; text-shadow:1px 1px 0 #000; }
#title-credits { font-family:var(--txt-font); color:#998a6e; font-size:clamp(13px,3.2vw,16px);
  line-height:1.35; margin-top:1.2vh; text-shadow:1px 1px 0 #000; }

/* ---------- Cartes (chapitre / narration plein écran) ---------- */
#card { background:#110d07; z-index:58; flex-direction:column; padding:24px; }
#card-content { font-family:var(--txt-font); color:var(--parch); max-width:640px;
  font-size:clamp(21px,5.6vw,30px); line-height:1.45; text-shadow:1px 1px 0 #000; white-space:pre-line; }
#card-content .card-chap { font-family:var(--px-font); color:var(--gold);
  font-size:clamp(13px,3.6vw,19px); display:block; margin-bottom:18px; line-height:1.8; }
#card-content .card-verse { color:#a39a78; font-size:clamp(17px,4.4vw,22px); font-style:italic;
  display:block; margin-top:20px; }
#card-hint { position:absolute; bottom:calc(var(--sai-b) + 18px); font-family:var(--txt-font);
  color:#8a7a58; font-size:18px; }

/* ---------- HUD ---------- */
#hud { position:absolute; inset:0; z-index:20; pointer-events:none; }
#objective { position:absolute; top:calc(var(--sai-t) + 8px); left:50%; transform:translateX(-50%);
  background:#1a1409d9; border:2px solid var(--panel-edge); color:var(--parch);
  font-family:var(--txt-font); font-size:clamp(16px,4.2vw,20px); padding:6px 14px 4px;
  max-width:72vw; text-align:center; text-shadow:1px 1px 0 #000; }
#objective::before { content:'✦ '; color:var(--gold); }
#btn-pause, #btn-journal { position:absolute; top:calc(var(--sai-t) + 6px);
  width:46px; height:46px; pointer-events:auto; cursor:pointer;
  background:#1a1409d9; border:2px solid var(--panel-edge); color:var(--parch);
  font-size:17px; font-family:var(--px-font); }
#btn-pause { right:calc(var(--sai-r) + 8px); }
#btn-journal { left:calc(var(--sai-l) + 8px); font-size:22px; }
#stick-zone { position:absolute; left:0; bottom:0; width:55%; height:62%; pointer-events:auto; }
#stick-base { position:absolute; width:104px; height:104px; border-radius:50%;
  border:3px solid #ffffff2e; background:#110d0740; pointer-events:none; z-index:21;
  transform:translate(-50%,-50%); }
#stick-nub { position:absolute; left:50%; top:50%; width:46px; height:46px; border-radius:50%;
  background:#e8dcc0cc; border:3px solid #8a7350; transform:translate(-50%,-50%);
  box-shadow:0 0 10px #00000088; }
#btn-action { position:absolute; right:calc(var(--sai-r) + 18px); bottom:calc(var(--sai-b) + 56px);
  width:86px; height:86px; border-radius:50%; pointer-events:auto; cursor:pointer;
  background:radial-gradient(circle at 35% 30%, #8a7350, #3a2c16 70%);
  border:4px solid var(--gold-dark); color:var(--parch); font-family:var(--txt-font);
  font-size:21px; text-shadow:1px 1px 0 #000; box-shadow:0 5px 0 #0b0805, 0 0 16px #d9b96a33;
  animation:pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 50% { box-shadow:0 5px 0 #0b0805, 0 0 26px #d9b96a77; } }
#btn-action:active { transform:translateY(3px); }
#kb-hint { position:absolute; bottom:calc(var(--sai-b) + 8px); left:50%; transform:translateX(-50%);
  font-family:var(--txt-font); color:#8a7a5890; font-size:16px; white-space:nowrap; }

/* ---------- Dialogue ---------- */
#dlg { position:absolute; left:50%; transform:translateX(-50%);
  bottom:calc(var(--sai-b) + 10px); width:min(96vw, 680px); z-index:35; }
#dlg-box { display:flex; gap:12px; align-items:flex-start; position:relative;
  background:linear-gradient(#2a2114f2, #150f22f2);
  border:3px solid; border-color:var(--panel-hi) #0b0805 #0b0805 var(--panel-hi);
  box-shadow:0 0 0 2px #0b0805, 0 8px 24px #000000aa; padding:12px 14px 16px; min-height:108px; }
#dlg-portrait { width:72px; height:72px; image-rendering:pixelated; flex:none;
  border:2px solid var(--panel-edge); background:#110d07; margin-top:2px; }
#dlg-main { flex:1; min-width:0; }
#dlg-name { font-family:var(--px-font); font-size:clamp(9px,2.6vw,12px); color:var(--gold);
  margin-bottom:7px; text-shadow:1px 1px 0 #000; letter-spacing:1px; }
#dlg-text { font-family:var(--txt-font); font-size:clamp(20px,5.4vw,26px); line-height:1.3;
  color:var(--parch); text-shadow:1px 1px 0 #000; min-height:3.9em; white-space:pre-wrap; }
#dlg-next { position:absolute; right:12px; bottom:6px; color:var(--gold); font-size:15px; }
#dlg-choices { display:flex; flex-direction:column; gap:8px; margin-top:8px; }
.dlg-choice { font-family:var(--txt-font); font-size:clamp(19px,5vw,24px); text-align:left;
  color:var(--parch); background:#2a2114f2; border:2px solid var(--panel-edge);
  padding:10px 14px; cursor:pointer; min-height:48px; }
.dlg-choice:active, .dlg-choice:hover { border-color:var(--gold); color:var(--gold); }

/* ---------- Narration ---------- */
#narr { position:absolute; left:50%; transform:translateX(-50%);
  top:max(12vh, calc(var(--sai-t) + 48px)); width:min(94vw, 640px); z-index:35; }
#narr-box { position:relative; background:#e8dcc0f0; border:3px solid #8a6b42;
  box-shadow:0 0 0 2px #2a2018, 0 8px 24px #000000aa, inset 0 0 34px #b89a6a55;
  padding:16px 18px 20px; }
#narr-text { font-family:var(--txt-font); font-style:italic; color:var(--ink);
  font-size:clamp(20px,5.2vw,25px); line-height:1.32; white-space:pre-wrap; }
#narr-next { position:absolute; right:12px; bottom:4px; color:#8a6b42; font-size:14px; }

/* ---------- Toast ---------- */
#toast { position:absolute; top:calc(var(--sai-t) + 64px); left:50%; transform:translateX(-50%);
  z-index:36; background:#110d07e8; border:2px solid var(--gold-dark); color:var(--gold);
  font-family:var(--txt-font); font-size:clamp(18px,4.6vw,22px); padding:9px 18px 7px;
  text-align:center; max-width:86vw; text-shadow:1px 1px 0 #000;
  animation:toastin .3s ease-out; }
@keyframes toastin { from { opacity:0; transform:translate(-50%,-8px); } }

/* ---------- Journal ---------- */
#journal { z-index:45; background:#110d07c8; }
#journal-book { background:linear-gradient(#f0e6cc, #d8c8a4); border:4px solid #6a4e2a;
  box-shadow:0 0 0 3px #2a2018, 0 14px 40px #000; width:min(92vw, 540px);
  max-height:80vh; overflow-y:auto; padding:22px 22px 18px; display:flex;
  flex-direction:column; gap:14px; align-items:center; }
#journal-title { font-family:var(--px-font); color:#6a4e2a; font-size:clamp(11px,3vw,15px); }
#journal-body { font-family:var(--txt-font); color:var(--ink); font-size:clamp(19px,5vw,23px);
  line-height:1.4; text-align:left; width:100%; white-space:pre-line; }
#journal-body em { color:#7a5a2a; }

/* ---------- Pause ---------- */
#pause { z-index:46; background:#110d07d8; }
.pause-inner { display:flex; flex-direction:column; gap:13px; align-items:center; }
.pause-title { font-family:var(--px-font); color:var(--gold); font-size:clamp(14px,4vw,20px);
  margin-bottom:10px; text-shadow:2px 2px 0 #000; }

/* ---------- Sondage de fin de chapitre ---------- */
#sondage { z-index:59; background:#110d07e8; }
#sondage-boite { background:linear-gradient(#2a2114, #181206); border:3px solid;
  border-color:var(--panel-hi) #0b0805 #0b0805 var(--panel-hi);
  box-shadow:0 0 0 2px #0b0805, 0 14px 44px #000;
  width:min(94vw, 460px); max-height:92dvh; overflow-y:auto; touch-action:pan-y;
  overscroll-behavior:contain; padding:20px 18px 16px; text-align:center; }
#sondage-boite > div { display:flex; flex-direction:column; gap:12px; align-items:center; }
.sondage-titre { font-family:var(--px-font); color:var(--gold); font-size:clamp(12px,3.4vw,16px);
  text-shadow:2px 2px 0 #000; line-height:1.6; }
.sondage-txt { font-family:var(--txt-font); color:var(--parch); font-size:clamp(19px,5vw,23px);
  line-height:1.3; }
.sondage-txt em, .sondage-label em { color:#998a6e; font-style:italic; }
.sondage-label { font-family:var(--txt-font); color:#c9bd9e; font-size:clamp(17px,4.4vw,20px);
  width:100%; text-align:left; display:flex; flex-direction:column; gap:4px; }
.sondage-label input, .sondage-label textarea {
  font-family:var(--txt-font); font-size:19px; color:var(--parch);
  background:#14100a; border:2px solid var(--panel-edge); padding:9px 10px;
  width:100%; outline:none; resize:none; border-radius:0; -webkit-appearance:none; }
.sondage-label input:focus, .sondage-label textarea:focus { border-color:var(--gold-dark); }
.notation { width:100%; display:flex; align-items:center; gap:2px;
  font-family:var(--txt-font); color:var(--parch); font-size:clamp(17px,4.4vw,20px); }
.notation span { flex:1; text-align:left; }
.etoile { background:none; border:none; cursor:pointer; font-size:25px; line-height:1;
  color:#4a3e2a; padding:4px 3px; min-width:34px; text-shadow:1px 1px 0 #000;
  transition:color .1s, transform .1s; }
.etoile.on { color:var(--gold); transform:scale(1.12); }
#sondage-erreur { font-family:var(--txt-font); color:#c97a5a; font-size:18px; min-height:20px; }
.sondage-rgpd { font-family:var(--txt-font); color:#8a7a58; font-size:15px; line-height:1.25; }
#sondage .pxbtn { min-width:240px; }
#sondage .pxbtn.small { min-width:0; }

/* ---------- Fondu & cris ---------- */
#fade { position:absolute; inset:0; background:#110d07; z-index:55; pointer-events:none;
  opacity:1; transition:opacity .8s ease; }
#fade.clear { opacity:0; }
#fade.slow { transition-duration:1.8s; }
#shouts { position:absolute; inset:0; z-index:25; pointer-events:none; overflow:hidden; }
.shout { position:absolute; transform:translate(-50%,-100%); font-family:var(--txt-font);
  color:#fff; background:#1a1409d0; border:2px solid #ffffff44; padding:4px 10px 2px;
  font-size:clamp(16px,4.2vw,20px); white-space:nowrap; text-shadow:1px 1px 0 #000;
  animation:shoutfade 2.6s ease forwards; }
.shout::after { content:''; position:absolute; left:50%; bottom:-7px; transform:translateX(-50%);
  border:5px solid transparent; border-top-color:#ffffff44; }
@keyframes shoutfade { 0% { opacity:0; margin-top:6px; } 12% { opacity:1; margin-top:0; }
  80% { opacity:1; } 100% { opacity:0; margin-top:-10px; } }

/* Paysage : boîte de dialogue plus basse et compacte */
@media (orientation:landscape) and (max-height:500px) {
  #dlg-box { min-height:88px; }
  #dlg-text { min-height:2.6em; font-size:clamp(18px,3.6vh,22px); }
  #narr { top:calc(var(--sai-t) + 14px); }
  #btn-action { bottom:calc(var(--sai-b) + 20px); width:76px; height:76px; }
}