/* Lecteur VN — scène souple, cartouche de lecture opaque, commandes au doigt et au clavier.
   Les illustrations et le récit viennent toujours du lecteur existant. */
#introVN {
  box-sizing: border-box;
  height: 100dvh;
  padding: calc(76px + env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) calc(12px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  overflow: hidden;
  background: #172137;
}
#introVN #ivBg { inset: 0; opacity: 1; }
#introVN:after { position: absolute; inset: 0; height: auto; z-index: 0; pointer-events: none; content: ''; background: linear-gradient(180deg, #101a3540, transparent 36%, #11192c99); }
#introVN #ivCharacter {
  position: relative; top: auto; bottom: auto; left: auto; right: auto;
  display: none; flex: 1 1 0; min-height: 0; width: min(100%, 640px);
  z-index: 2; pointer-events: none;
}
#introVN.has-character #ivCharacter { display: flex; }
#introVN.has-speaker #ivCharacter { display: flex; flex: 0 0 38px; }
#introVN #ivPortrait {
  position: absolute; inset: 0 0 24px;
  display: block; width: 100%; height: calc(100% - 24px);
  object-fit: contain; object-position: center bottom;
  filter: drop-shadow(0 8px 14px #11192c66);
}
#introVN.has-speaker #ivPortrait { display: none; }
#introVN #ivName {
  position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);
  max-width: 100%; box-sizing: border-box; padding: 7px 18px;
  border: 0; border-radius: 12px; background: #263652; box-shadow: 0 4px 12px #11192c33;
  color: #ffe0a0; font: 800 15px/1.2 var(--body); text-align: center;
  white-space: normal; overflow-wrap: anywhere; text-transform: none; letter-spacing: .2px;
}
#introVN #ivSprite { position: relative; z-index: 1; flex: 1 1 0; min-height: 0; display: grid; place-items: center; margin: 0; font-size: clamp(64px, 16dvh, 140px); }
#introVN.has-character #ivSprite, #introVN.has-speaker #ivSprite, #introVN.has-art #ivSprite { display: none; }
#introVN #ivText,
#introVN.has-art #ivText,
#introVN.has-character #ivText,
#introVN.has-speaker #ivText {
  position: relative; left: auto; bottom: auto; transform: none; z-index: 2; flex: 0 1 auto;
  width: min(100%, 640px); max-width: min(100%, 640px); max-height: 32dvh; box-sizing: border-box;
  overflow: auto; overscroll-behavior: contain; margin: 0; padding: 18px 20px;
  border: 0; border-radius: 18px; background: #fff3d8; backdrop-filter: none;
  box-shadow: 0 8px 24px #10172c40;
  color: #302b3e; font: 700 clamp(17px, 2.6vw, 21px)/1.5 var(--body);
  text-align: left; text-shadow: none; transition: opacity .15s ease;
}
#introVN #ivText .iv-s { border-radius: 4px; transition: background-color .18s ease; }
#introVN #ivText .iv-s.now{ background: #ffe09b; box-shadow: 0 0 0 2px #ffe09b; color: #302b3e; }
#introVN #ivVoice, #introVN #ivSkip {
  position: absolute; top: calc(12px + env(safe-area-inset-top)); z-index: 3;
  min-height: 44px; padding: 10px 16px; border: 0; border-radius: 14px;
  background: #263652; color: #fff3d8; font: 800 14px/1.2 var(--body); cursor: pointer;
}
#introVN #ivVoice { left: max(16px, env(safe-area-inset-left)); }
#introVN #ivSkip { right: max(16px, env(safe-area-inset-right)); }
#introVN #ivHint {
  position: relative; bottom: auto; z-index: 2; flex: 0 0 auto;
  width: min(100%, 640px); min-height: 46px; margin: 0; padding: 10px 16px;
  border: 0; border-radius: 14px; background: #263652; color: #fff3d8;
  font: 800 14px/1.2 var(--body); letter-spacing: .1px;
  text-align: center; text-shadow: none; animation: none; cursor: pointer;
}
#introVN #ivHint.waiting { color: #c9d4e8; cursor: default; }
#ivHint.waiting::before {
  content: ''; display: block; width: 72px; height: 2px; margin: 0 auto 4px;
  border-radius: 2px; background: #ffdf98; transform: scaleX(0); transform-origin: left;
  animation: iv-reading-progress var(--vn-wait,2500ms) linear forwards;
}
@keyframes iv-reading-progress { to { transform: scaleX(1); } }
#introVN #ivChoices {
  position: relative; left: auto; bottom: auto; transform: none; z-index: 3;
  flex: 0 1 auto; width: min(100%, 640px); min-height: 0; max-height: 28dvh;
  gap: 8px; overflow: auto; overscroll-behavior: contain;
}
#introVN .iv-choice {
  appearance: none; width: 100%; min-height: 48px; padding: 12px 16px;
  border: 0; border-radius: 14px; background: #ffde98; box-shadow: none;
  color: #382b22; font: 800 15px/1.3 var(--body); text-align: left; cursor: pointer;
}
#introVN .iv-choice:disabled { background: #bdaf95; color: #403c39; cursor: default; }
#introVN .iv-choice:active:not(:disabled) { transform: translateY(1px); background: #ffe9b9; }
#introVN button:focus-visible { outline: 3px solid #ffdc85; outline-offset: 3px; }
@keyframes iv-character-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
#introVN.has-character #ivPortrait { animation: iv-character-in .35s ease-out both; }
@media (max-height: 680px) {
  #introVN { gap: 7px; padding-top: calc(64px + env(safe-area-inset-top)); padding-bottom: calc(8px + env(safe-area-inset-bottom)); }
  #introVN #ivText { max-height: 34dvh; padding: 12px 15px; font-size: 17px; line-height: 1.4; }
}
@media (orientation: landscape) and (max-height: 540px) {
  #introVN { align-items: flex-end; }
  #introVN.has-character #ivCharacter { position: absolute; top: 66px; bottom: 12px; left: 12px; width: 38%; }
  #introVN.has-character #ivText, #introVN.has-character #ivChoices, #introVN.has-character #ivHint { width: 57%; }
  #introVN #ivText { max-height: 42dvh; }
}
@media (prefers-reduced-motion: reduce) {
  #introVN.has-character #ivPortrait, #ivHint.waiting::before { animation: none; }
  #introVN #ivText, #introVN #ivText .iv-s { transition: none; }
}

/* Tableaux narratifs : l'image entière au premier plan, son ambiance derrière. */
#introVN #ivIllustration{display:none}
#introVN.has-tableau #ivIllustration{display:block;position:relative;z-index:1;flex:1 1 0;min-height:0;width:min(100%,1100px);object-fit:contain;object-position:center;border-radius:14px}
#introVN.has-tableau #ivBg{filter:blur(14px) brightness(.52);transform:scale(1.08)}
#introVN.has-tableau #ivSprite{display:none}
@media(orientation:landscape) and (max-height:540px){
  #introVN.has-tableau #ivIllustration{position:absolute;top:68px;bottom:12px;left:16px;width:52%;height:calc(100% - 80px)}
  #introVN.has-tableau #ivText,#introVN.has-tableau #ivChoices,#introVN.has-tableau #ivHint{width:44%}
}

#introVN .sf-story-music-toggle{position:absolute;z-index:12;top:70px;left:max(16px,env(safe-area-inset-left));min-height:44px;padding:8px 12px;border-radius:14px;background:#26324c;color:#fff;border:1px solid #75849d}