/* =========================================================================
   STYLE_V2.CSS — TOMMY 25 — GRIMOIRE VIVANT
   Esthétique : Dark Fantasy Aristocratique
   Typographie : Cinzel (display) + Share Tech Mono (système)
   Palette : Obsidienne #08060e · Or ancien #c9a227 · Cramoisi #8b1a1a · Cyan spectral #0af5e8
   Effets : Runes dorées · Parchemin corrompu · Vignette dramatique · Glow arcanique
========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Cinzel+Decorative:wght@400;700;900&family=Cinzel:wght@400;600;700&family=Share+Tech+Mono&family=Noto+Sans+JP:wght@300;400;700&display=swap');

/* ── VARIABLES ── */
:root {
  /* Palette principale */
  --obsidian:     #08060e;
  --obsidian-2:   #0e0b1a;
  --obsidian-3:   #16122a;
  --gold:         #c9a227;
  --gold-bright:  #f0c945;
  --gold-dim:     #7a611a;
  --crimson:      #8b1a1a;
  --crimson-2:    #c0392b;
  --cyan:         #0af5e8;
  --cyan-dim:     #06a89e;
  --slime:        #00ffcc;
  --purple:       #7b2fff;
  --rune-glow:    rgba(201, 162, 39, 0.15);

  /* Typographie fluide */
  --title-size:    clamp(26px, 4.5vw, 56px);
  --subtitle-size: clamp(10px, 1.3vw, 13px);
  --input-size:    clamp(22px, 3.8vw, 36px);
  --dialogue-size: clamp(14px, 1.9vw, 17px);
  --speaker-size:  clamp(15px, 2.3vw, 22px);
  --boot-size:     clamp(11px, 1.6vw, 15px);

  /* Fonts */
  --font-display: 'Cinzel Decorative', serif;
  --font-title:   'Cinzel', serif;
  --font-mono:    'Share Tech Mono', monospace;
  --font-body:    'Noto Sans JP', sans-serif;
}

/* ── RESET ── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

/* =========================================================================
   BODY — FOND OBSIDIENNE AVEC TEXTURE PARCHMIN NUMÉRIQUE
========================================================================= */
body {
  background: var(--obsidian);
  font-family: var(--font-mono);
  overflow: hidden;
  height: 100vh; height: 100dvh;
  width: 100%;
  color: #ddd;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  /* Grain de parchemin subtil */
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
}

/* =========================================================================
   VIGNETTE GLOBALE — Légère, uniquement sur les bords extrêmes
   z-index bas pour ne JAMAIS passer devant le contenu
========================================================================= */
body::before {
  content: '';
  position: fixed; inset: 0; z-index: 2; pointer-events: none;
  background: radial-gradient(ellipse at 50% 50%,
    transparent 50%,
    rgba(8, 6, 14, 0.18) 80%,
    rgba(8, 6, 14, 0.35) 100%
  );
}

/* =========================================================================
   EFFETS GLOBAUX — Scanlines & Bruit
========================================================================= */
#static-noise {
  position: fixed; inset: 0; z-index: 999; pointer-events: none;
  background-image: url('data:image/svg+xml,%3Csvg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"%3E%3Cfilter id="noiseFilter"%3E%3CfeTurbulence type="fractalNoise" baseFrequency="0.65" numOctaves="3" stitchTiles="stitch"/%3E%3C/filter%3E%3Crect width="100%25" height="100%25" filter="url(%23noiseFilter)"/%3E%3C/svg%3E');
  opacity: 0.05; animation: noiseJitter 0.2s infinite;
}
@keyframes noiseJitter { 0% { background-position: 0 0; } 100% { background-position: 100% 100%; } }

.scanlines {
  position: fixed; inset: 0; pointer-events: none; z-index: 1;
  background: repeating-linear-gradient(0deg,
    transparent, transparent 3px,
    rgba(0,0,0,0.08) 3px, rgba(0,0,0,0.08) 4px
  );
}

#bg {
  position: fixed; inset: 0; background-color: var(--obsidian); z-index: 0;
  transition: background 0.5s ease;
}

/* =========================================================================
   RUNES DÉCORATIVES — Coins de l'interface
========================================================================= */
.hud-element::before,
.hud-element::after {
  content: '';
  position: absolute;
  width: 6px; height: 6px;
  border-color: var(--gold-dim);
  border-style: solid;
  opacity: 0.4;
}

/* =========================================================================
   HUD — Style grimoire
========================================================================= */
.hud-element {
  position: fixed; z-index: 50;
  font-size: clamp(7px, 1vw, 9px);
  font-family: var(--font-mono);
  color: rgba(201, 162, 39, 0.65);   /* lisible sans être envahissant */
  letter-spacing: 2px; pointer-events: none;
  line-height: 1.7;
}
#hud-top-left  { top: 14px; left: 14px; }
#hud-top-right { top: 14px; right: 14px; text-align: right; }
#hud-bottom {
  bottom: 14px; left: 50%; transform: translateX(-50%);
  color: rgba(201, 162, 39, 0.45);
  white-space: nowrap;
  letter-spacing: 4px;
}
/* Coins décoratifs HUD */
#hud-top-left::before  { top: -4px; left: -4px; border-width: 1px 0 0 1px; }
#hud-top-right::before { top: -4px; right: -4px; border-width: 1px 1px 0 0; left: auto; }

@media (max-width: 480px) {
  #hud-top-right { display: none; }
  #hud-top-left  { font-size: 7px; }
  #hud-bottom    { font-size: 7px; }
}

.blink { animation: cursorBlink 1.2s ease-in-out infinite; }
@keyframes cursorBlink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }

.glitch-anim { animation: glitch 0.2s infinite; }
@keyframes glitch {
  0%   { transform: translate(0); }
  20%  { transform: translate(-2px,  2px); clip-path: inset(10% 0 60% 0); }
  40%  { transform: translate(-2px, -2px); clip-path: inset(70% 0 5% 0); }
  60%  { transform: translate( 2px,  2px); clip-path: inset(40% 0 30% 0); }
  80%  { transform: translate( 2px, -2px); clip-path: inset(0); }
  100% { transform: translate(0); }
}

/* =========================================================================
   ÉCRAN DE DÉMARRAGE — Grimoire s'allumant
========================================================================= */
#start-screen {
  position: fixed; inset: 0;
  background: radial-gradient(ellipse at 50% 50%, #0d0920 0%, #000 100%);
  z-index: 10000;
  display: flex; align-items: center; justify-content: center;
  flex-direction: column;
  cursor: pointer; color: var(--gold);
  font-size: clamp(12px, 2vw, 16px);
  text-align: center; padding: 20px;
  /* Lignes de rune en décoration */
  border: 1px solid rgba(201, 162, 39, 0.08);
}
#start-screen::before {
  content: '✦ ── ── ── ── ── ── ── ── ── ── ── ── ✦';
  position: absolute; top: clamp(20px, 5vh, 60px); left: 50%; transform: translateX(-50%);
  color: rgba(201, 162, 39, 0.12); font-size: 11px; letter-spacing: 3px; white-space: nowrap;
}
#start-screen::after {
  content: '✦ ── ── ── ── ── ── ── ── ── ── ── ── ✦';
  position: absolute; bottom: clamp(20px, 5vh, 60px); left: 50%; transform: translateX(-50%);
  color: rgba(201, 162, 39, 0.12); font-size: 11px; letter-spacing: 3px; white-space: nowrap;
}

#loading-indicator {
  font-family: var(--font-mono);
  letter-spacing: 5px;
  text-shadow: 0 0 15px rgba(201, 162, 39, 0.5);
  animation: goldPulse 2s ease-in-out infinite;
}
@keyframes goldPulse {
  0%, 100% { text-shadow: 0 0 10px rgba(201,162,39,0.4); }
  50%       { text-shadow: 0 0 25px rgba(201,162,39,0.8), 0 0 50px rgba(201,162,39,0.3); }
}

#boot-text {
  font-family: var(--font-title);
  font-size: clamp(14px, 2.5vw, 18px);
  letter-spacing: 6px;
  color: var(--gold);
  text-shadow: 0 0 20px rgba(201,162,39,0.6);
  margin-top: 30px;
  border: 1px solid rgba(201,162,39,0.3);
  padding: 12px 30px;
  position: relative;
}
#boot-text::before { content: '◈'; position: absolute; left: -20px; top: 50%; transform: translateY(-50%); opacity: 0.5; }
#boot-text::after  { content: '◈'; position: absolute; right: -20px; top: 50%; transform: translateY(-50%); opacity: 0.5; }

/* =========================================================================
   FX OVERLAY
========================================================================= */
#fx-overlay { position: fixed; inset: 0; z-index: 150; pointer-events: none; display: none; }
.fx-wind {
  background: repeating-linear-gradient(90deg, transparent, transparent 80px, rgba(10,245,232,0.06) 80px, rgba(10,245,232,0.06) 85px);
  animation: windBlow 0.2s linear infinite;
}
@keyframes windBlow { 0% { background-position: 0 0; } 100% { background-position: 500px 0; } }
.text-tremble { animation: textShake 0.1s infinite alternate; }
@keyframes textShake {
  0%   { transform: translate(0, 0) skewX(0); }
  100% { transform: translate(-4px, 2px) skewX(-5deg); }
}
.fx-blood {
  background: radial-gradient(circle, transparent 20%, rgba(100,0,0,0.85) 100%);
  animation: heartbeat 1s infinite; box-shadow: inset 0 0 100px #8b0000;
}
@keyframes heartbeat { 0%, 100% { transform: scale(1); } 15% { transform: scale(1.05); filter: brightness(1.5); } }
.fx-lightning { background: #000; animation: fxLightningFlash 2s infinite; }
@keyframes fxLightningFlash {
  0%, 90%, 100% { background-color: rgba(0,0,0,0.8); }
  92%, 96%      { background-color: rgba(200,220,255,0.9); box-shadow: inset 0 0 200px #4169e1; }
}

/* =========================================================================
   GESTION DES PHASES
========================================================================= */
.phase-container {
  position: absolute; inset: 0; z-index: 10;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 0.9s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.9s;
  padding: 20px;
  overflow-y: auto;
  overflow-x: hidden;
}
.phase-container.active { opacity: 1; visibility: visible; pointer-events: auto; }

/* =========================================================================
   BOOT SEQUENCE — Terminal grimoire
========================================================================= */
#boot-sequence {
  align-items: center; justify-content: center;
  background: radial-gradient(ellipse at 50% 50%, rgba(10, 245, 232, 0.03) 0%, var(--obsidian) 80%);
}

.boot-bg-decor {
  position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(circle at 50% 50%, transparent 40%, rgba(0, 255, 204, 0.04) 41%, transparent 42%),
    radial-gradient(circle at 50% 50%, transparent 55%, rgba(201, 162, 39, 0.03) 56%, transparent 57%);
  animation: spinDecor 40s linear infinite;
}
@keyframes spinDecor { 100% { transform: rotate(360deg); } }

.boot-terminal {
  position: relative; z-index: 10;
  width: 100%; max-width: 750px;
  background: rgba(8, 6, 14, 0.75);
  border: 1px solid rgba(0, 255, 204, 0.15);
  border-top: 3px solid var(--slime);
  padding: clamp(20px, 4vw, 40px);
  box-shadow: 0 20px 60px rgba(0,0,0,0.9), inset 0 0 40px rgba(0, 255, 204, 0.05);
  backdrop-filter: blur(8px);
}
.boot-terminal::before, .boot-terminal::after {
  content: ''; position: absolute; bottom: -1px; width: 15px; height: 15px;
  border-bottom: 2px solid var(--slime);
}
.boot-terminal::before { left: -1px; border-left: 2px solid var(--slime); }
.boot-terminal::after { right: -1px; border-right: 2px solid var(--slime); }

.boot-header {
  display: flex; justify-content: space-between;
  font-family: var(--font-mono); color: rgba(0, 255, 204, 0.6);
  font-size: 11px; letter-spacing: 4px;
  border-bottom: 1px solid rgba(0, 255, 204, 0.2);
  padding-bottom: 12px; margin-bottom: 24px;
}
.boot-line {
  font-size: var(--boot-size);
  font-family: var(--font-mono);
  color: rgba(201, 162, 39, 0.7);
  text-shadow: 0 0 6px rgba(201, 162, 39, 0.3);
  margin-bottom: 10px; min-height: 18px;
}
/* Lignes système en cyan discret */
.boot-line.sys-line { color: rgba(10, 245, 232, 0.5); text-shadow: 0 0 4px rgba(10,245,232,0.2); }

.progress-wrapper { width: 100%; max-width: 500px; margin-top: 20px; display: none; }
.progress-label   { font-size: 10px; color: var(--gold-dim); margin-bottom: 6px; letter-spacing: 3px; display: flex; justify-content: space-between; }
.progress-track   { width: 100%; height: 2px; background: rgba(201,162,39,0.1); overflow: hidden; position: relative; }
.progress-fill    { width: 0%; height: 100%; background: linear-gradient(90deg, var(--gold-dim), var(--gold-bright)); box-shadow: 0 0 12px var(--gold), 0 0 25px rgba(201,162,39,0.4); transition: width 0.1s linear; }
/* Lueur qui pulse derrière la barre */
.progress-track::before {
  content: ''; position: absolute; inset: -3px 0; background: rgba(201,162,39,0.05); filter: blur(4px);
}

/* =========================================================================
   TITRES & SOUS-TITRES — Hiérarchie Cinzel
========================================================================= */
.sys-title {
  font-family: var(--font-display);
  font-size: var(--title-size);
  color: #e8d5a3;
  text-shadow:
    0 0 20px rgba(201,162,39,0.4),
    0 0 60px rgba(201,162,39,0.15),
    0 2px 4px rgba(0,0,0,0.8);
  text-align: center; letter-spacing: 3px; line-height: 1.15; margin-bottom: 12px;
  font-weight: 700;
}
.sys-subtitle {
  font-family: var(--font-mono);
  color: var(--gold-dim);
  letter-spacing: clamp(4px, 1.2vw, 9px);
  margin-bottom: 12px; text-align: center;
  font-size: var(--subtitle-size);
  text-transform: uppercase;
  /* Ligne décorative autour */
  display: flex; align-items: center; gap: 10px;
}
.sys-subtitle::before, .sys-subtitle::after {
  content: '──────';
  color: rgba(201,162,39,0.2);
  letter-spacing: -2px;
  font-size: 10px;
}

/* =========================================================================
   INPUT CODE — Portail de validation arcanique
========================================================================= */
.code-input {
  background: rgba(201, 162, 39, 0.03);
  border: none;
  border-bottom: 1px solid rgba(201,162,39,0.4);
  color: var(--gold-bright);
  font-family: var(--font-mono);
  font-size: var(--input-size);
  letter-spacing: clamp(10px, 2.5vw, 18px);
  text-align: center;
  width: clamp(160px, 50vw, 240px);
  padding: 12px 10px; outline: none; margin-bottom: 22px;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  text-transform: uppercase;
}
.code-input:focus {
  background: rgba(201,162,39,0.07);
  border-bottom-color: var(--gold);
  box-shadow:
    0 6px 30px rgba(201,162,39,0.15),
    0 1px 0 rgba(201,162,39,0.6);
  color: var(--gold-bright);
  text-shadow: 0 0 12px rgba(201,162,39,0.5);
}
.code-input::placeholder { color: rgba(201,162,39,0.2); }

@media (max-width: 768px) {
  .code-input { font-size: max(16px, var(--input-size)); }
}

.btn-submit {
  background: transparent;
  border: 1px solid rgba(201,162,39,0.4);
  color: var(--gold-dim);
  padding: clamp(10px, 2vw, 15px) clamp(22px, 4.5vw, 45px);
  cursor: pointer;
  font-family: var(--font-title);
  letter-spacing: 5px; font-size: clamp(11px, 1.4vw, 13px);
  transition: all 0.35s ease;
  text-transform: uppercase;
  position: relative;
  overflow: hidden;
}
.btn-submit::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(201,162,39,0.1) 0%, transparent 100%);
  opacity: 0; transition: opacity 0.3s;
}
.btn-submit:hover::before, .btn-submit:active::before { opacity: 1; }
.btn-submit:hover, .btn-submit:active {
  border-color: var(--gold);
  color: var(--gold-bright);
  text-shadow: 0 0 10px rgba(201,162,39,0.5);
  box-shadow: 0 0 20px rgba(201,162,39,0.15), inset 0 0 20px rgba(201,162,39,0.05);
}

.error-msg {
  color: var(--crimson-2);
  height: 20px; font-size: 12px; margin-bottom: 10px; letter-spacing: 2px;
  text-shadow: 0 0 8px rgba(192,57,43,0.5);
}

/* =========================================================================
   MÉDIAS PLACEHOLDER — Cadre grimoire
========================================================================= */
.media-placeholder {
  width: clamp(200px, 60%, 600px);
  height: clamp(120px, 25vh, 300px);
  border: 1px solid rgba(201,162,39,0.2);
  background: rgba(8,6,14,0.8);
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; margin-bottom: 22px;
  text-align: center; padding: 15px;
  position: relative;
  /* Coins de cadre décoratifs */
  box-shadow: inset 0 0 40px rgba(201,162,39,0.03), 0 0 20px rgba(0,0,0,0.5);
}
/* Coins calligraphiques */
.media-placeholder::before, .media-placeholder::after {
  content: '';
  position: absolute;
  width: 14px; height: 14px;
  border-color: var(--gold-dim);
  border-style: solid;
  opacity: 0.5;
}
.media-placeholder::before { top: -1px; left: -1px; border-width: 2px 0 0 2px; }
.media-placeholder::after  { bottom: -1px; right: -1px; border-width: 0 2px 2px 0; }

.fullscreen-bg {
  position: absolute; inset: 0; z-index: -1;
  width: 100%; height: 100%; opacity: 0.4;
}

/* Split layout */
.split-layout {
  display: flex; flex-direction: row;
  width: min(80%, 900px); gap: 35px; align-items: center;
}
@media (max-width: 600px) {
  .split-layout { flex-direction: column; width: 90%; gap: 15px; }
  .split-layout .media-placeholder { width: 100%; }
  .split-layout > div:last-child { width: 100% !important; text-align: center !important; }
  .split-layout .sys-title { font-size: clamp(26px, 8vw, 42px); text-align: center !important; }
  .split-layout .sys-subtitle { text-align: center !important; }
  .split-layout .code-input { text-align: center; width: 100% !important; }
}

/* =========================================================================
   MOTEUR DE DIALOGUE — Visual Novel Grimoire
========================================================================= */
.speaker-inner-thought {
  font-style: italic !important;
  opacity: 0.65;
  letter-spacing: 1px !important;
  color: rgba(201,162,39,0.7) !important;
}
.speaker-inner-thought::before { content: '「 '; }
.speaker-inner-thought::after  { content: ' 」'; }

.dialogue-box {
  width: clamp(280px, 82%, 780px);
  border: 1px solid rgba(201,162,39,0.2);
  background: linear-gradient(
    160deg,
    rgba(14, 11, 26, 0.96) 0%,
    rgba(8, 6, 14, 0.98) 100%
  );
  padding: clamp(18px, 3vw, 32px);
  position: relative;
  box-shadow:
    0 0 40px rgba(0,0,0,0.6),
    inset 0 0 30px rgba(201,162,39,0.03),
    0 -1px 0 rgba(201,162,39,0.1);
}
/* Ornements aux coins de la boîte de dialogue */
.dialogue-box::before, .dialogue-box::after {
  content: '';
  position: absolute;
  width: 12px; height: 12px;
  border-color: rgba(201,162,39,0.35);
  border-style: solid;
}
.dialogue-box::before { top: -1px; left: -1px; border-width: 2px 0 0 2px; }
.dialogue-box::after  { bottom: -1px; right: -1px; border-width: 0 2px 2px 0; }

#speaker-name {
  font-family: var(--font-title);
  font-size: var(--speaker-size);
  letter-spacing: 4px;
  margin-bottom: 14px;
  padding-bottom: 8px;
  position: relative;
  font-weight: 600;
}
/* Ligne de séparation sous le nom */
#speaker-name::after {
  content: '';
  position: absolute; bottom: 0; left: 0;
  width: 100%; height: 1px;
  background: linear-gradient(90deg, rgba(201,162,39,0.4) 0%, transparent 100%);
}

#dialogue-text {
  font-size: var(--dialogue-size);
  font-family: var(--font-body);
  line-height: 1.75;
  min-height: 52px;
  color: rgba(220, 210, 195, 0.9);
  word-wrap: break-word; overflow-wrap: break-word;
  font-weight: 300;
}

.continue-hint {
  font-size: 10px;
  font-family: var(--font-mono);
  color: rgba(201,162,39,0.2);
  text-align: right;
  margin-top: 18px;
  animation: pulseHint 2s ease-in-out infinite;
  letter-spacing: 2px;
}
#system-notification {
  position: fixed; top: clamp(40px, 12vh, 100px); left: 50%; transform: translateX(-50%);
  width: clamp(300px, 80%, 750px);
  background: rgba(8, 5, 15, 0.9);
  border: 1px solid var(--slime); border-top: 4px solid var(--slime);
  flex-direction: column;
  padding: 15px 20px;
  box-shadow: 0 5px 30px rgba(0,0,0,0.5);
  gap: 10px;
}
#system-title {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 3px;
  text-transform: uppercase;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(0, 255, 204, 0.3);
}

#system-text {
  font-family: var(--font-body);
  font-size: var(--dialogue-size);
  line-height: 1.7;
  color: #ddd;
}

#system-notification .continue-hint {
  text-align: center;
  font-size: 10px;
  opacity: 0.6;
  margin-top: 5px;
}
.system-notification-small {
    width: clamp(250px, 60%, 500px) !important;
    border-color: var(--purple) !important;
}
.system-notification-small #system-title {
    font-size: 14px !important;
}
.system-notification-small {
    width: clamp(280px, 70%, 650px) !important;
    border-color: var(--purple) !important;
}
/* =========================================================================
   SPRITES — Portraits Visual Novel
========================================================================= */
.sprite {
  position: absolute;
  bottom: clamp(159px, 38vh, 360px); /* Encore plus haut */
  height: clamp(300px, 60vh, 850px);
  max-height: 70vh;
  width: auto;
  max-width: 45vw; /* Slightly reduced to avoid overlap on smaller viewports */

  object-fit: contain;
  transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
  opacity: 0.95;
  filter: brightness(0.85) contrast(1.05);
  z-index: 15;
  pointer-events: none;
}

/* Alignement sur la boîte de dialogue (max-width: clamp(320px, 60vw, 850px)) */
.sprite-left {
  left: max(2%, calc(50% - 472px)); /* Recentré vers l'intérieur */
  transform-origin: bottom left;
}
.sprite-right {
  right: max(2%, calc(50% - -40px)); /* Recentré vers l'intérieur */
  left: auto;
  transform: scaleX(-1);
  transform-origin: bottom right;
}
.sprite-center {
  left: 50%;
  transform: translateX(-50%);
  transform-origin: bottom center;
  max-width: 55vw;
}
.sprite.active {
  opacity: 1;
  filter: brightness(1.15) drop-shadow(0 0 25px rgba(10,245,232,0.15));
  z-index: 25; /* Passe légèrement devant les autres sprites */
}
.sprite-left.active   { transform: scale(1.05); }
.sprite-right.active  { transform: scaleX(-1) scale(1.05); }
.sprite-center.active { transform: translateX(-50%) scale(1.05); }

.sprite-left.is-talking   { animation: talkBounceLeft 0.25s infinite alternate ease-in-out; }
.sprite-right.is-talking  { animation: talkBounceRight 0.25s infinite alternate ease-in-out; }
.sprite-center.is-talking { animation: talkBounceCenter 0.25s infinite alternate ease-in-out; }

@keyframes talkBounceLeft   { 0% { transform: scale(1.05) translateY(0); } 100% { transform: scale(1.05) translateY(-5px); } }
@keyframes talkBounceRight  { 0% { transform: scaleX(-1) scale(1.05) translateY(0); } 100% { transform: scaleX(-1) scale(1.05) translateY(-5px); } }
@keyframes talkBounceCenter { 0% { transform: translateX(-50%) scale(1.05) translateY(0); } 100% { transform: translateX(-50%) scale(1.05) translateY(-5px); } }

@media (max-width: 480px) {
  .sprite { height: clamp(180px, 35vh, 400px); max-width: 45vw; bottom: clamp(50px, 10vh, 100px); }
  .sprite-center { max-width: 60vw; }
  .sprite-left  { left: calc(50% - 30vw); }
  .sprite-right { left: calc(50% + 30vw); }
}

/* Silhouette CSS pour Ainz Ooal Gown (Phase 8, 9c, 10) */
.ainz-silhouette {
    background: #400;
    clip-path: polygon(25% 100%, 30% 60%, 20% 50%, 40% 15%, 50% 5%, 60% 15%, 80% 50%, 70% 60%, 75% 100%);
    filter: drop-shadow(0 0 20px #f00) blur(1px);
}

/* =========================================================================
   LE GRAND SAGE — EFFET HOLOGRAMME & POSITIONNEMENT HAUTEUR (Anime)
========================================================================= */
.sprite-sage {
  position: fixed !important;
  top: clamp(20px, 4vh, 60px) !important;
  right: clamp(10px, 4vw, 40px) !important;
  width: clamp(220px, 30vw, 400px) !important;
  height: auto !important;
  max-height: 55vh !important;
  z-index: 250 !important;
  mix-blend-mode: screen !important;
  /* Masque ultra-doux pour fondre le noir parfaitement dans le décor */
  -webkit-mask-image: radial-gradient(circle at center, black 10%, transparent 55%);
  mask-image: radial-gradient(circle at center, black 10%, transparent 55%);
  opacity: 0.95;
  filter: brightness(1.5) contrast(1.2); /* Hologramme beaucoup plus lumineux */
  transition: all 0.5s ease;
  pointer-events: none;
  object-fit: contain;
}

.sprite-sage.active {
  transform: scale(1.05) !important;
  opacity: 1 !important;
  filter: brightness(1.8) contrast(1.3) drop-shadow(0 0 20px rgba(0, 255, 204, 0.8)) drop-shadow(0 0 50px rgba(0, 255, 204, 0.5)) !important;
}

.sage-intro {
    animation: sage-intro-animation 2s ease-in-out forwards;
}

@keyframes sage-intro-animation {
    0% {
        top: 40%; right: 50%;
        transform: translate(50%, -50%) scale(2.5);
        opacity: 0;
    }
    15%, 60% {
        top: 40%; right: 50%;
        transform: translate(50%, -50%) scale(2.5);
        opacity: 1;
    }
    100% {
        top: clamp(20px, 4vh, 60px); right: clamp(10px, 4vw, 40px); left: auto;
        width: clamp(220px, 30vw, 400px);
        transform: scale(1);
        opacity: 1;
    }
}

/* =========================================================================
   ÉCRAN MATRIX DÉCRYPTAGE — Runes en cascade
========================================================================= */
#decryption-screen {
  background: radial-gradient(ellipse at 30% 70%, rgba(139,26,26,0.1) 0%, var(--obsidian) 60%);
  z-index: 90; color: var(--gold);
  display: none; flex-direction: column;
  align-items: flex-start; justify-content: flex-end;
  padding: clamp(20px, 5vw, 50px);
  position: absolute; inset: 0;
}
#decryption-title {
  font-family: var(--font-title) !important;
  letter-spacing: 8px !important;
  color: var(--gold) !important;
  text-shadow: 0 0 20px rgba(201,162,39,0.5) !important;
}
.matrix-line {
  font-size: clamp(10px, 1.4vw, 12px);
  margin-bottom: 4px; opacity: 0.7;
  color: var(--gold-dim);
  text-shadow: 0 0 5px rgba(201,162,39,0.3);
}

/* =========================================================================
   SÉQUENCE GLITCH / SCAN
========================================================================= */
.glitch-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; opacity: 0; }
.glitch-anim-heavy { animation: heavyGlitch 0.4s infinite; }
@keyframes heavyGlitch {
  0%   { transform: translate(0)          scale(1);    filter: hue-rotate(0deg)   contrast(1);   opacity: 1; }
  20%  { transform: translate(-10px,10px) scale(1.05); filter: hue-rotate(90deg)  contrast(1.5); opacity: 0.8; }
  40%  { transform: translate(10px,-10px) scale(1.05); filter: hue-rotate(-90deg) invert(0.2);   opacity: 1; }
  60%  { transform: translate(-5px,-5px)  scale(1);    filter: invert(1);                         opacity: 0.9; }
  80%  { transform: translate(5px,5px)    scale(1.02); filter: hue-rotate(45deg);                 opacity: 1; }
  100% { transform: translate(0)          scale(1);    filter: hue-rotate(0deg);                  opacity: 1; }
}
.scanner-line {
  position: absolute; top: 0; left: 0; width: 100%; height: 4px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  box-shadow: 0 0 20px var(--gold), 0 0 50px rgba(201,162,39,0.3);
  animation: scanDown 2.5s infinite linear; z-index: 5;
}
@keyframes scanDown {
  0%   { top: -10px; opacity: 0; }
  5%   { opacity: 1; }
  95%  { opacity: 1; }
  100% { top: 100%;  opacity: 0; }
}
.loading-overlay {
  position: absolute; inset: 0; background: rgba(0,0,0,0.75); z-index: 10;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}

/* =========================================================================
   FLASH AUTO-SUBMIT
========================================================================= */
.flash-success {
  position: absolute; inset: 0; z-index: 9999; pointer-events: none;
  animation: flashGold 0.4s ease-out forwards;
}
@keyframes flashGold {
  0%   { background-color: rgba(201,162,39,0.25); box-shadow: inset 0 0 120px rgba(201,162,39,0.4); }
  100% { background-color: transparent; box-shadow: none; }
}

/* =========================================================================
   ÉCRAN FAUX APPEL ANDROID — Style Messenger
========================================================================= */
#phase-call { background: #050505; }
.swipe-container {
  display: flex; justify-content: space-between; align-items: center;
  width: clamp(220px, 60vw, 280px); height: 70px; margin-top: 50px; position: relative;
}
.swipe-track {
  position: absolute; width: 100%; height: 100%; border-radius: 35px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.07);
  display: flex; align-items: center;
  padding: 0 10px; justify-content: center;
}
.swipe-hint {
  color: rgba(255,255,255,0.25); font-size: 11px; letter-spacing: 2px;
  animation: pulseHint 2s infinite; pointer-events: none;
}
.call-btn {
  width: 60px; height: 60px; border-radius: 50%; border: none; cursor: grab;
  display: flex; align-items: center; justify-content: center;
  font-size: 28px; position: absolute; z-index: 2;
}
.btn-accept { background: radial-gradient(circle, #2ecc71, #27ae60); color: white; left: 5px; box-shadow: 0 0 20px rgba(46,204,113,0.4); }
.btn-decline { background: radial-gradient(circle, #e74c3c, #c0392b); color: white; right: 5px; cursor: pointer; }

/* =========================================================================
   MENU DEBUG
========================================================================= */
#debug-menu {
  display: none; position: fixed; top: 50px; left: 10px;
  background: rgba(8,6,14,0.97);
  border: 1px solid rgba(139,26,26,0.5);
  padding: 12px; z-index: 9999;
  font-family: var(--font-mono);
  max-height: 85vh; overflow-y: auto;
  width: clamp(180px, 40vw, 260px);
  box-shadow: 0 0 30px rgba(139,26,26,0.15);
}
.debug-btn {
  display: block; width: 100%; background: transparent;
  border: 1px solid rgba(10,245,232,0.2);
  color: rgba(10,245,232,0.6);
  margin-bottom: 4px; padding: 6px 8px; cursor: pointer;
  text-align: left; font-family: var(--font-mono);
  font-size: clamp(10px, 1.4vw, 11px);
  transition: all 0.2s;
  letter-spacing: 1px;
}
.debug-btn:hover, .debug-btn:active {
  background: rgba(10,245,232,0.1);
  color: var(--cyan);
  border-color: var(--cyan-dim);
  text-shadow: 0 0 8px rgba(10,245,232,0.5);
}

/* =========================================================================
   HOLOGRAMME
========================================================================= */
.hologram-glow { animation: pulseHologram 2s infinite alternate; }
@keyframes pulseHologram {
  0%   { filter: drop-shadow(0 0 5px var(--cyan))  brightness(0.2); }
  100% { filter: drop-shadow(0 0 20px var(--cyan)) drop-shadow(0 0 40px rgba(10,245,232,0.3)) brightness(0.5); }
}

/* Animation des points d'attente système */
.waiting-dots span { animation: waitDot 1.4s infinite both; font-size: 32px; color: #555; }
.waiting-dots span:nth-child(2) { animation-delay: 0.2s; }
.waiting-dots span:nth-child(3) { animation-delay: 0.4s; }
@keyframes waitDot { 0%, 80%, 100% { opacity: 0; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-5px); } }

/* =========================================================================
   TEXTE ENRICHI (lore.js balises)
========================================================================= */
@keyframes pulseDanger {
  0%, 100% { text-shadow: 0 0 6px #cc2222; opacity: 1; }
  50%       { text-shadow: 0 0 18px #cc2222, 0 0 35px rgba(200,0,0,0.4); opacity: 0.85; }
}
@keyframes richGlitch {
  0%   { transform: translate(0);          filter: none; }
  20%  { transform: translate(-3px, 1px);  filter: hue-rotate(90deg); }
  40%  { transform: translate(3px, -1px);  filter: hue-rotate(-90deg) brightness(1.4); }
  60%  { transform: translate(-2px, 2px);  filter: invert(0.3); }
  80%  { transform: translate(2px, -2px);  filter: brightness(1.2); }
  100% { transform: translate(0);          filter: none; }
}
@keyframes richShake {
  0%   { transform: translate(0, 0)     rotate(0deg); }
  100% { transform: translate(-2px, 1px) rotate(-1deg); }
}

/* =========================================================================
   CLAVIER NUMÉRIQUE PHASE 8
========================================================================= */
.num-btn {
  background: rgba(8,6,14,0.9);
  border: 1px solid rgba(139,26,26,0.4);
  color: rgba(200,50,50,0.9);
  font-family: var(--font-mono);
  font-size: clamp(18px, 3vw, 26px);
  padding: 14px 10px;
  cursor: pointer;
  transition: all 0.2s;
  letter-spacing: 1px;
  text-shadow: 0 0 10px rgba(200,50,50,0.3);
  border-radius: 2px;
}
.num-btn:hover, .num-btn:active {
  background: rgba(139,26,26,0.3);
  border-color: rgba(200,50,50,0.7);
  text-shadow: 0 0 15px rgba(200,50,50,0.6);
  box-shadow: inset 0 0 15px rgba(139,26,26,0.2);
}
.num-btn-del { color: rgba(255,100,100,0.7); }
.num-btn-ok  {
  background: rgba(139,26,26,0.2);
  border-color: rgba(200,50,50,0.5);
  color: rgba(220,80,80,0.9);
}

/* =========================================================================
   CINÉMATIQUE AINZ
========================================================================= */
@keyframes ainzFogPulse {
  0%, 100% { opacity: 0.5; transform: scale(1) translateY(0); }
  30%      { opacity: 0.8; transform: scale(1.02) translateY(-1%); }
  50%      { opacity: 1;   transform: scale(1.04) translateY(-2%); }
  70%      { opacity: 0.7; transform: scale(1.01) translateY(-1%); }
}
@keyframes ainzScanDown {
  0%   { top: -8px;  opacity: 0; }
  5%   { opacity: 1; }
  95%  { opacity: 1; }
  100% { top: 100vh; opacity: 0; }
}
@keyframes ainzTrembleLight {
  0%, 100% { transform: translate(0, 0); }
  25%       { transform: translate(-1px, 1px); }
  75%       { transform: translate(1px, -1px); }
}
.ainz-tremble-light { animation: ainzTrembleLight 0.15s infinite; }
@keyframes ainzTrembleHeavy {
  0%, 100% { transform: translate(0, 0)       rotate(0deg); }
  20%       { transform: translate(-4px, 2px)  rotate(-0.3deg); }
  40%       { transform: translate(4px, -2px)  rotate(0.3deg); }
  60%       { transform: translate(-3px,-3px)  rotate(-0.2deg); }
  80%       { transform: translate(3px, 3px)   rotate(0.2deg); }
}
.ainz-tremble-heavy { animation: ainzTrembleHeavy 0.1s infinite; }
@keyframes ainzHeavyGlitch {
  0%   { transform: translate(0)         skew(0deg);  filter: none; }
  15%  { transform: translate(-8px, 3px) skew(-3deg); filter: hue-rotate(90deg)  brightness(2); }
  30%  { transform: translate(8px, -3px) skew(3deg);  filter: hue-rotate(-90deg) invert(0.3); }
  45%  { transform: translate(-4px,-4px) skew(-1deg); filter: brightness(3)      saturate(0); }
  60%  { transform: translate(4px, 4px)  skew(1deg);  filter: hue-rotate(180deg); }
  75%  { transform: translate(-6px, 2px) skew(-2deg); filter: invert(0.5); }
  100% { transform: translate(0)         skew(0deg);  filter: none; }
}
.ainz-glitch-heavy { animation: ainzHeavyGlitch 0.12s infinite !important; }

/* =========================================================================
   UTILITAIRES
========================================================================= */
@keyframes pulseHint { 0%, 100% { opacity: 0.15; } 50% { opacity: 0.6; } }

/* =========================================================================
   TV / OVERSCAN
========================================================================= */
@media (min-width: 1280px) {
  body {
    padding: env(safe-area-inset-top, 0px)
             env(safe-area-inset-right, 0px)
             env(safe-area-inset-bottom, 0px)
             env(safe-area-inset-left, 0px);
  }
              .sprite {
        bottom: calc(clamp(60px, 12vh, 140px) + env(safe-area-inset-bottom));
              }
}

/* =========================================================================
   CINÉMATIQUES — Conserver compatibilité exacte
========================================================================= */

/* ── VELDRA — éclairs cyan ── */
.cin-lightning-anim    { animation: cyanLightning 0.5s infinite; }
.cin-lightning-intense { animation: cyanLightning 0.18s infinite; }
@keyframes cyanLightning {
  0%, 85%, 100% { background: transparent; box-shadow: none; }
  87% { background: rgba(10,245,232,0.07); box-shadow: inset 0 0 150px rgba(10,245,232,0.3); }
  90% { background: transparent; }
  93% { background: rgba(10,245,232,0.04); box-shadow: inset 0 0 80px rgba(10,245,232,0.15); }
}

/* ── RANGA — éclairs violets ── */
.cin-lightning-purple { animation: purpleLightning 0.5s infinite; }
@keyframes purpleLightning {
  0%, 85%, 100% { background: transparent; box-shadow: none; }
  87% { background: rgba(123,47,255,0.1); box-shadow: inset 0 0 150px rgba(123,47,255,0.35); }
  90% { background: transparent; }
  93% { background: rgba(123,47,255,0.04); }
}

/* ── FATE — pulse rouge ── */
.fate-pulse-anim {
  background: radial-gradient(ellipse at center, rgba(136,0,0,0.3) 0%, transparent 65%);
  animation: fatePulse 1.2s ease-in-out infinite;
}
@keyframes fatePulse {
  0%, 100% { transform: scale(1);    opacity: 0.5; }
  50%       { transform: scale(1.2); opacity: 1;   }
}

/* ── FATE — œil SVG ── */
.fate-eye-open .eyelid-top { transform-origin: 100px 25px; animation: eyelidTopOpen 1.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards; }
@keyframes eyelidTopOpen { 0% { transform: scaleY(1) translateY(0); } 30% { transform: scaleY(0.6) translateY(-8px); } 70% { transform: scaleY(0.15) translateY(-18px); } 100% { transform: scaleY(0) translateY(-22px); } }
.fate-eye-open .eyelid-bottom { transform-origin: 100px 75px; animation: eyelidBottomOpen 1.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards; }
@keyframes eyelidBottomOpen { 0% { transform: scaleY(1) translateY(0); } 30% { transform: scaleY(0.6) translateY(8px); } 70% { transform: scaleY(0.15) translateY(18px); } 100% { transform: scaleY(0) translateY(22px); } }
.fate-eye-open .eye-iris { animation: eyeIrisGlow 2.5s ease-in forwards; }
@keyframes eyeIrisGlow { 0% { filter: brightness(0.1); transform: scale(0.8); } 40% { filter: brightness(0.5); transform: scale(0.95); } 100% { filter: brightness(1.2) drop-shadow(0 0 12px #ff0000) drop-shadow(0 0 24px rgba(170,0,0,0.5)); transform: scale(1); } }
.fate-eye-open .eye-pupil { animation: eyePupilReveal 2s ease-in-out forwards; }
@keyframes eyePupilReveal { 0% { transform: scaleX(0.3); opacity: 0; } 30% { transform: scaleX(1.4); opacity: 1; } 100% { transform: scaleX(1); opacity: 1; } }
.fate-eye-open .eye-white { animation: eyeMicroMove 4s ease-in-out 2s infinite; }
@keyframes eyeMicroMove { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(2px); } 75% { transform: translateX(-1px); } }

/* ── RANGA — brume violette ── */
@keyframes ranFogPulse { 0%, 100% { opacity: 0.5; transform: scale(1) translateY(0); } 30% { opacity: 0.8; transform: scale(1.03) translateY(-1%); } 50% { opacity: 1; transform: scale(1.06) translateY(-2%); } 70% { opacity: 0.7; transform: scale(1.02) translateY(-1%); } }

/* ── MYNOGHRA ── */
.myn-ui-corrupt { animation: mynUiCorrupt 0.3s steps(1) infinite; }
@keyframes mynUiCorrupt { 0% { filter: none; transform: translate(0); } 20% { filter: hue-rotate(180deg) saturate(3) brightness(0.5); transform: translate(-3px, 0); } 40% { filter: none; transform: translate(2px, 1px); } 60% { filter: invert(0.15) hue-rotate(90deg); transform: translate(0); } 80% { filter: brightness(2) saturate(0); transform: translate(-1px, -1px); } 100% { filter: none; transform: translate(0); } }
.myn-glitch-overlay { background: repeating-linear-gradient(0deg, transparent 0px, transparent 4px, rgba(80,0,20,0.08) 4px, rgba(80,0,20,0.08) 5px); animation: mynGlitchLines 0.15s steps(1) infinite; }
@keyframes mynGlitchLines { 0% { background-position: 0 0; opacity: 0.6; } 33% { background-position: 0 3px; opacity: 0.9; } 66% { background-position: 0 1px; opacity: 0.4; } 100% { background-position: 0 0; opacity: 0.7; } }
.tentacle { stroke-dasharray: 200; stroke-dashoffset: 200; animation: tentacleGrow 2.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards; }
.tentacle.t1 { animation-delay: 0.0s; stroke: #2a0040; stroke-width: 4; }
.tentacle.t2 { animation-delay: 0.3s; stroke: #1a0028; stroke-width: 5; }
.tentacle.t3 { animation-delay: 0.15s; stroke: #220035; stroke-width: 4.5; }
.tentacle.t4 { animation-delay: 0.45s; stroke: #0d0016; stroke-width: 6; }
.tentacle.t5 { animation-delay: 0.6s; stroke: #330044; stroke-width: 3; }
.tentacle.t6 { animation-delay: 0.25s; stroke: #1a0030; stroke-width: 3.5; }
@keyframes tentacleGrow { 0% { stroke-dashoffset: 200; opacity: 0; } 8% { opacity: 0.6; } 60% { stroke-dashoffset: 40; opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 1; } }
.tentacle.alive { animation: tentacleGrow 2.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards, tentacleWrithe 3s ease-in-out 2.5s infinite; }
@keyframes tentacleWrithe { 0%, 100% { transform: translate(0, 0) rotate(0deg); filter: none; } 25% { transform: translate(1px, -2px) rotate(0.5deg); filter: drop-shadow(0 0 4px rgba(68,0,102,0.4)); } 50% { transform: translate(-1px, 1px) rotate(-0.3deg); } 75% { transform: translate(2px, 1px) rotate(0.3deg); filter: drop-shadow(0 0 6px rgba(51,0,85,0.27)); } }
.myn-eyes-open .myn-lid-top { transform-origin: center 0%; animation: mynLidTopOpen 1.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards; }
@keyframes mynLidTopOpen { 0% { transform: scaleY(1) translateY(0); } 40% { transform: scaleY(0.5) translateY(-5px); } 100% { transform: scaleY(0) translateY(-12px); } }
.myn-eyes-open .myn-lid-bot { transform-origin: center 100%; animation: mynLidBotOpen 1.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards; }
@keyframes mynLidBotOpen { 0% { transform: scaleY(1) translateY(0); } 40% { transform: scaleY(0.5) translateY(5px); } 100% { transform: scaleY(0) translateY(12px); } }
.myn-eyes-open .myn-eye-iris { animation: mynIrisGlow 2.5s ease-in forwards; }
@keyframes mynIrisGlow { 0% { filter: brightness(0.1); transform: scale(0.7); } 40% { filter: brightness(0.5); transform: scale(0.9); } 100% { filter: brightness(1.3) drop-shadow(0 0 8px #cc0033) drop-shadow(0 0 16px rgba(136,0,17,0.4)); transform: scale(1); } }
.myn-eyes-open .myn-eye-pupil { animation: mynPupilReveal 2s ease-in-out forwards, mynPupilPulse 2s ease-in-out 2.5s infinite; }
@keyframes mynPupilReveal { 0% { transform: scaleY(0.2); opacity: 0; } 50% { transform: scaleY(1.3); opacity: 1; } 100% { transform: scaleY(1); opacity: 1; } }
@keyframes mynPupilPulse { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(1.18); filter: brightness(0.8); } }
.myn-eyes-open .myn-eye-white { animation: mynEyeShift 5s ease-in-out 3s infinite; }
@keyframes mynEyeShift { 0%, 100% { transform: translateX(0); } 30% { transform: translateX(1.5px); } 70% { transform: translateX(-1px); } }
.myn-cursor { animation: mynCursorMove 3s ease-in-out infinite; }
@keyframes mynCursorMove { 0% { cx: 48; cy: 32; opacity: 1; } 30% { cx: 55; cy: 28; opacity: 1; } 60% { cx: 42; cy: 38; opacity: 0.7; } 100% { cx: 48; cy: 32; opacity: 0; } }

/* =========================================================================
   SHION + BENIMARU
========================================================================= */
.sb-flame-main { animation: sbFlameRise 1.5s ease-out infinite alternate; }
.sb-flame-left  { animation: sbFlameRise 1.2s ease-out infinite alternate-reverse; }
.sb-flame-right { animation: sbFlameRise 1.8s ease-out infinite alternate; }
@keyframes sbFlameRise { 0% { ry: 55; opacity: 0.7; } 100% { ry: 72; opacity: 1; } }
.sb-flame-col { stroke-dasharray: 120; stroke-dashoffset: 120; animation: sbColGrow 1.5s ease-out forwards; }
.sb-flame-col.f2 { animation-delay: 0.1s; }
.sb-flame-col.f3 { animation-delay: 0.2s; }
.sb-flame-col.f4 { animation-delay: 0.3s; }
@keyframes sbColGrow { to { stroke-dashoffset: 0; } }
.sb-lightning-orange { animation: sbOrangeLightning 0.45s infinite; }
@keyframes sbOrangeLightning { 0%, 84%, 100% { background: transparent; } 86% { background: rgba(255,102,0,0.07); box-shadow: inset 0 0 120px rgba(255,102,0,0.25); } 90% { background: transparent; } 93% { background: rgba(255,68,0,0.04); } }
.sb-shion-shake { animation: sbShake 0.12s infinite; }
@keyframes sbShake { 0%, 100% { transform: translate(0); } 20% { transform: translate(-5px, 2px); } 40% { transform: translate(5px, -2px); } 60% { transform: translate(-3px, -3px); } 80% { transform: translate(3px, 3px); } }
.sb-crack-line { animation: sbCrackDraw 0.8s ease-out forwards; }
.sb-crack-line.c2 { animation-delay: 0.4s; }
.sb-crack-line.c3 { animation-delay: 0.5s; }
@keyframes sbCrackDraw { to { stroke-dashoffset: 0; } }
.sb-crack-glow { stroke-dasharray: 150; stroke-dashoffset: 150; animation: sbCrackDraw 1.2s ease-out forwards; }

/* =========================================================================
   DIABLO
========================================================================= */
.dbl-base-flame  { animation: dblFlameBreath 2s ease-in-out infinite alternate; }
.dbl-inner-flame { animation: dblFlameBreath 1.5s ease-in-out infinite alternate-reverse; }
@keyframes dblFlameBreath { 0% { ry: 50; opacity: 0.6; } 100% { ry: 65; opacity: 0.9; } }
.dbl-col { stroke-dasharray: 120; stroke-dashoffset: 120; animation: dblColRise 2s ease-out forwards; }
.dbl-col.df2 { animation-delay: 0.15s; }
.dbl-col.df3 { animation-delay: 0.3s; }
.dbl-col.df4 { animation-delay: 0.45s; }
.dbl-col.df5 { animation-delay: 0.6s; }
@keyframes dblColRise { to { stroke-dashoffset: 0; } }

/* =========================================================================
   FONDS DE DIALOGUE — narrative-screen
========================================================================= */
/* narrative-screen : défini en détail dans la section Responsive ci-dessous */
#narrative-screen .sprite       { z-index: 10; }
#narrative-screen .dialogue-box { z-index: 20; }

/* ── Ken Burns — zoom lent ── */
.dialogue-bg-kenburns {
  animation: kenBurns 22s ease-in-out infinite alternate;
  background-size: 110% !important;
}
@keyframes kenBurns {
  0%   { background-size: 100% !important; background-position: 40% 50% !important; }
  100% { background-size: 118% !important; background-position: 60% 45% !important; }
}

/* ── Storm — flash éclair ── */
@keyframes stormFlash {
  0%, 89%, 91%, 93%, 100% { opacity: 0; }
  90%  { opacity: 0.12; }
  92%  { opacity: 0.04; }
  94%  { opacity: 0.08; }
}

/* ── Parallax slow ── */
@keyframes parallaxSlow {
  0%   { background-position: 50% 50%; }
  100% { background-position: 55% 45%; }
}

/* ── Fog drift ── */
@keyframes fogDrift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* ── Corruption pulse ── */
@keyframes corruptionPulse {
  0%, 100% { filter: hue-rotate(0deg) saturate(1); }
  25%       { filter: hue-rotate(15deg) saturate(1.3); }
  75%       { filter: hue-rotate(-10deg) saturate(0.8); }
}

/* ── Nazarick pulsation ── */
@keyframes nazarickPulse {
  0%, 100% { opacity: 0.6; }
  50%       { opacity: 1; }
}

/* =========================================================================
   PHASE SPÉCIFIQUES — Ambiances chromatiques
========================================================================= */

/* Phase 0 — Identification */
#phase-0 {
  background: radial-gradient(ellipse at 50% 50%, rgba(10,245,232,0.04) 0%, var(--obsidian) 70%);
}

/* Phase 1 — Limule (vert) */
#phase-1 {
  background: radial-gradient(ellipse at 50% 30%, rgba(0,255,204,0.05) 0%, var(--obsidian) 70%);
}

/* Phase 2 — Tome (or) */
#phase-2 {
  background: radial-gradient(ellipse at 50% 40%, rgba(201,162,39,0.06) 0%, var(--obsidian) 65%);
}

/* Phase 4 — Veldra (cyan électrique) */
#phase-4 {
  background: radial-gradient(ellipse at 50% 50%, rgba(0,212,255,0.08) 0%, rgba(0,30,40,0.9) 60%, var(--obsidian) 100%);
}

/* Phase 5 — Fate (rouge sang) */
#phase-5 {
  background: radial-gradient(ellipse at 50% 60%, rgba(139,26,26,0.15) 0%, var(--obsidian) 70%);
}

/* Phase 6 — Ranga (bleu royal sombre) */
#phase-6 {
  background: radial-gradient(ellipse at 50% 40%, rgba(65,105,225,0.08) 0%, var(--obsidian) 70%);
}

/* Phase 7 — Mynoghra (violet corrompu) */
#phase-7 {
  background: radial-gradient(ellipse at 50% 50%, rgba(90,30,110,0.1) 0%, #050008 100%);
}

/* Phase 8 — Ainz (rouge alarme) */
#phase-8 {
  background: radial-gradient(ellipse at 50% 50%, rgba(139,26,26,0.12) 0%, #050000 100%);
}

/* Phase 9 — Appel Messenger */
#phase-9 {
  background: linear-gradient(180deg, #12112a 0%, #16213e 50%, #0f3460 100%);
}

/* =========================================================================
   ÉCRAN FIN — Parade de personnages
========================================================================= */
#phase-end {
  background: radial-gradient(ellipse at 50% 40%, rgba(201,162,39,0.08) 0%, var(--obsidian) 70%);
}

/* =========================================================================
   PULSE ANIMATION APPEL
========================================================================= */
@keyframes callPulse {
  0%   { transform: scale(1); opacity: 0.7; }
  100% { transform: scale(1.4); opacity: 0; }
}

/* =========================================================================
   CHESS MODE — Partie Immortelle
========================================================================= */
#chess-board-container {
  background: rgba(0,0,0,0.4);
  border-bottom: 2px solid var(--gold-dim);
  /* La ligne dorée a été déplacée sur la zone de dialogue pour passer devant les sprites */
}
#chess-grid {
  border: 4px solid var(--gold);
  box-shadow: 0 0 30px var(--gold-dim);
}
.chess-piece-unicode {
  font-size: clamp(28px, 4.5vw, 64px);
  line-height: 1;
  font-family: Arial, sans-serif;
  cursor: default;
  user-select: none;
  pointer-events: none;
  position: relative; z-index: 10;
  text-shadow: 0 0 15px currentColor, 0 5px 10px rgba(0,0,0,0.9);
}
#chess-move-label {
  height: 20px;
  text-align: center;
  width: 100%;
  font-family: var(--font-title);
  color: var(--gold-dim);
  letter-spacing: 3px;
  font-size: clamp(10px, 1.5vw, 13px);
}

/* =========================================================================
   SÉQUENCE BOOT VIDEO INTRO
========================================================================= */
#phase-video-intro p {
  font-family: var(--font-title) !important;
  color: rgba(201,162,39,0.4) !important;
  text-shadow: 0 0 12px rgba(201,162,39,0.3) !important;
  letter-spacing: 8px !important;
}

/* =========================================================================
   TOAST NOTIFICATIONS
========================================================================= */
.toast-item {
  background: rgba(14,11,26,0.95) !important;
  border: 1px solid rgba(201,162,39,0.25) !important;
  color: var(--gold) !important;
  font-family: var(--font-mono) !important;
  letter-spacing: 2px;
  padding: 10px 20px !important;
  box-shadow: 0 0 20px rgba(201,162,39,0.1) !important;
}

/* =========================================================================
   PREMIUM BOOT PROGRESS BAR (Override de .progress-wrapper)
========================================================================= */
#boot-progress {
  max-width: 100%;
  margin-top: 40px;
  padding-top: 25px;
  border-top: 1px solid rgba(255, 215, 0, 0.15);
  position: relative;
}
#boot-progress::before {
  content: '[ PROCESSUS EN COURS ]';
  position: absolute;
  top: -9px; left: 50%; transform: translateX(-50%);
  background: rgba(8, 6, 14, 1);
  padding: 0 15px;
  color: rgba(255, 215, 0, 0.5);
  font-size: 10px;
  letter-spacing: 4px;
  white-space: nowrap;
}
#boot-progress .progress-label {
  font-size: 13px;
  color: #ffd700;
  margin-bottom: 12px;
  align-items: flex-end;
  text-shadow: 0 0 10px rgba(255, 215, 0, 0.3);
}
#boot-progress #bp-percent {
  font-size: 22px;
  color: #fff;
  text-shadow: 0 0 15px #ffd700, 0 0 30px #ffd700;
  font-weight: bold;
  letter-spacing: 2px;
  line-height: 0.8;
}
#boot-progress .progress-track {
  height: 6px;
  background: rgba(0, 0, 0, 0.8);
  border: 1px solid rgba(255, 215, 0, 0.3);
  border-radius: 3px;
  overflow: visible; /* Permet à la tête de lecture de dépasser */
}
#boot-progress .progress-track::before {
  display: none; /* Désactive le blur global par défaut */
}
#boot-progress .progress-fill {
  background: linear-gradient(90deg, rgba(255,215,0,0.1) 0%, rgba(255,215,0,0.8) 80%, #ffffff 100%);
  box-shadow: 0 0 20px rgba(255, 215, 0, 0.5);
  border-radius: 2px;
  position: relative;
}
/* Tête de lecture brillante qui dépasse de la barre */
#boot-progress .progress-fill::after,
.reboot-premium-fill::after {
  content: '';
  position: absolute;
  right: -2px; top: -4px; bottom: -4px;
  width: 4px;
  background: #ffffff;
  box-shadow: 0 0 15px #ffffff, 0 0 30px currentColor;
  border-radius: 2px;
}
#boot-progress .progress-fill::after { color: #ffd700; }
.reboot-premium-fill::after { color: #ff0000; }

/* =========================================================================
   RESPONSIVE COMPLET — TABLETTE & MOBILE
   Objectif : tout le contenu visible, rien qui déborde ni se superpose
   Corrections :
   - Boîtes de dialogue : toujours en bas, fixe, même position sur tous devices
   - Boot text : lisible sans flou excessif
   - Phases sans dialogue : contenu centré verticalement
   - Manga : plein écran sur tablette
   - Échecs tablette : plateau centré + sprites côté + dialogue dessous
   - Échecs mobile : plateau réduit mais visible
========================================================================= */

/* ── PHASE CONTAINERS — centrage vertical propre ── */
.phase-container {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: clamp(12px, 3vw, 24px);
  padding-top: clamp(50px, 10vh, 90px); /* espace HUD */
  justify-content: center; /* centré par défaut */
}

/* ==========================================================================
   ① BOÎTES DE DIALOGUE — ANCRÉES EN BAS, MÊME POSITION SUR TOUS DEVICES
   La boîte reste fixe en bas. Seuls les sprites bougent autour.
========================================================================== */

/* Narrative screen : fond absolu, dialogue TOUJOURS en bas */
#narrative-screen {
  position: fixed;
  inset: 0;
  display: none;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-end;  /* dialogue collé en bas */
  z-index: 200;
  overflow: hidden;
}

/* Zone dialogue : band fixe en bas, row = sprites gauche/droite + boîte centre */
#dialogue-area {
  flex-shrink: 0;
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  justify-content: center;
  width: 100%;
  /* Hauteur fixe en bas — assez pour la boîte + les grands sprites */
  height: clamp(180px, 35vh, 300px);
  position: relative;
  z-index: 10;
  padding: 0 0 clamp(0px, 1vh, 10px);
  box-sizing: border-box;
  /* Fond dégradé vers le bas pour lisibilité sur tout background */
  background: linear-gradient(
    to top,
    rgba(8, 6, 14, 0.85) 0%,
    rgba(8, 6, 14, 0.6)  50%,
    transparent 100%
  );
}

/* En mode NON-chess : sprites occupent la hauteur plein écran (positionnés absolu) */
#narrative-screen:not(.chess-mode) #dialogue-area {
  height: clamp(160px, 32vh, 280px);
  background: linear-gradient(
    to top,
    rgba(8, 6, 14, 0.92) 0%,
    rgba(8, 6, 14, 0.65) 55%,
    transparent 100%
  );
}
/* =========================================================================


/* Boîte de dialogue — occupe l'espace central sans être poussée */
#dialogue-area .dialogue-box {
  flex-grow: 0; /* Ne grandit pas pour remplir l'espace vide */
  width: 100%;
  max-width: clamp(320px, 60vw, 850px); 
  margin: 0 auto; /* Centrage horizontal */
  position: relative;
  align-self: flex-end;
  background: linear-gradient(160deg, rgba(12, 9, 22, 0.97) 0%, rgba(8, 6, 14, 0.99) 100%);
  border: 1px solid rgba(201, 162, 39, 0.25);
  box-shadow:
    0 -4px 30px rgba(0,0,0,0.7),
    inset 0 0 20px rgba(201,162,39,0.02);
}

/* Texte de dialogue — pas de text-shadow, contraste maximal */
#dialogue-text {
  font-size: var(--dialogue-size);
  font-family: var(--font-body);
  line-height: 1.75;
  min-height: 48px;
  color: #e8e2d8;   /* crème clair — max lisibilité sur fond sombre */
  word-wrap: break-word;
  overflow-wrap: break-word;
  font-weight: 300;
  /* Pas de text-shadow sur le corps du texte */
  text-shadow: none;
}

/* Nom du speaker — léger glow OK, mais pas excessif */
#speaker-name {
  font-family: var(--font-title);
  font-size: var(--speaker-size);
  letter-spacing: 4px;
  margin-bottom: 12px;
  padding-bottom: 8px;
  font-weight: 600;
  /* Glow subtil uniquement sur le nom, pas le corps */
  text-shadow: 0 0 8px currentColor;
  position: relative;
}
#speaker-name::after {
  content: '';
  position: absolute; bottom: 0; left: 0;
  width: 100%; height: 1px;
  background: linear-gradient(90deg, rgba(201,162,39,0.35) 0%, transparent 100%);
}

/* ==========================================================================
   ② BOOT SEQUENCE — LISIBILITÉ SANS FLOU EXCESSIF
========================================================================== */

/* Boot lines : pas de glow flou, texte net */
.boot-line {
  font-size: var(--boot-size);
  font-family: var(--font-mono);
  color: rgba(201, 162, 39, 0.85);
  /* Suppression du text-shadow flou — garder juste un léger soulignement lumineux */
  text-shadow: none;
  margin-bottom: 8px; min-height: 18px;
  letter-spacing: 1px;
}

/* Loading indicator de démarrage — lisible */
#loading-indicator {
  font-family: var(--font-mono);
  letter-spacing: 4px;
  color: var(--gold);
  /* Animation de pulsation sur opacity, pas sur le glow */
  animation: loadPulse 2s ease-in-out infinite;
  text-shadow: none;
}
@keyframes loadPulse {
  0%, 100% { opacity: 0.7; }
  50%       { opacity: 1; }
}

/* Barre de progression — net */
.progress-fill {
  width: 0%;
  height: 100%;
  background: linear-gradient(90deg, var(--gold-dim), var(--gold-bright));
  /* Box-shadow modéré — visible sans déborder */
  box-shadow: 0 0 8px rgba(201,162,39,0.5);
  transition: width 0.1s linear;
}

/* ==========================================================================
   ③ PHASES SANS DIALOGUE — CENTRAGE VERTICAL PROPRE
   Évite que les éléments soient trop hauts sur mobile
========================================================================== */

/* Par défaut : centrage vertical avec un décalage léger vers le bas
   pour compenser visuellement le HUD en haut */
.phase-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-top: clamp(50px, 10vh, 90px);
  padding-bottom: clamp(20px, 5vh, 50px);
}

/* Sur mobile < 480px : décalage vers le milieu-bas */
@media (max-width: 480px) {
  .phase-container {
    justify-content: center;
    padding-top: clamp(40px, 12vh, 70px);
    padding-bottom: clamp(20px, 8vh, 50px);
  }
}

/* ==========================================================================
   ④ TABLETTE — PHASES CODE (tous les inputs)
========================================================================== */
@media (max-width: 900px) {
  .sys-title    { font-size: clamp(20px, 5vw, 36px); margin-bottom: 8px; }
  .sys-subtitle {
    font-size: clamp(9px, 1.8vw, 12px);
    letter-spacing: 2px;
    margin-bottom: 8px;
  }
  .media-placeholder {
    height: clamp(80px, 18vh, 200px);
    width: clamp(160px, 58%, 430px);
    margin-bottom: 12px;
  }
  .code-input {
    font-size: clamp(20px, 4.5vw, 30px);
    letter-spacing: clamp(8px, 2vw, 14px);
    width: clamp(150px, 48vw, 230px);
    padding: 10px 8px;
    margin-bottom: 14px;
  }
  .btn-submit {
    padding: 10px clamp(18px, 3.5vw, 34px);
    font-size: clamp(10px, 1.4vw, 12px);
  }
}

/* ==========================================================================
   ④b PHASE 8 — NUMPAD VISIBLE EN ENTIER
========================================================================== */
@media (max-width: 900px) {
  #phase-8 {
    justify-content: flex-start;
    padding-top: clamp(10px, 2vh, 24px);
    overflow-y: auto;
    gap: 0;
  }
  #phase-8 .sys-subtitle { margin-bottom: 4px; }
  #phase-8 .media-placeholder {
    height: clamp(60px, 13vh, 120px);
    width: clamp(130px, 48%, 280px);
    margin-bottom: 6px;
  }
  #phase-8 .sys-title { font-size: clamp(13px, 2.5vw, 20px); margin: 4px 0; }
  #numpad-display {
    font-size: clamp(20px, 4.5vw, 34px) !important;
    letter-spacing: clamp(8px, 2vw, 13px) !important;
    margin: 6px 0 !important;
    min-height: 40px !important;
  }
  #numpad {
    max-width: clamp(190px, 52vw, 270px) !important;
    gap: clamp(5px, 1.2vw, 9px) !important;
  }
  .num-btn {
    font-size: clamp(15px, 3.5vw, 22px) !important;
    padding: clamp(9px, 2.2vh, 15px) 6px !important;
  }
}
/* Mobile très compact : masquer le placeholder pour tout voir */
@media (max-width: 480px) {
  #phase-8 .media-placeholder { display: none; }
}

/* ==========================================================================
   ④c PHASE 3 — SPLIT LAYOUT tablette
========================================================================== */
@media (max-width: 768px) {
  .split-layout {
    flex-direction: column;
    width: 92%;
    gap: 10px;
  }
  .split-layout .media-placeholder {
    width: 100%;
    height: clamp(120px, 22vh, 220px);
    flex: none;
  }
  .split-layout > div:last-child { width: 100% !important; text-align: center !important; }
  .split-layout .sys-title     { text-align: center !important; }
  .split-layout .sys-subtitle  { text-align: center !important; justify-content: center; }
  .split-layout .code-input    { text-align: center; width: 90% !important; }
}

/* Phase 4 — box Veldra */
@media (max-width: 768px) {
  #phase-4 > div {
    padding: clamp(14px, 3.5vw, 30px) !important;
    width: 90% !important;
    box-sizing: border-box;
  }
}

/* ==========================================================================
   ⑤ MANGA — JAMAIS CROPÉ, TOUJOURS ENTIER
   Stratégie : overlay = colonne flex 100vh.
   Le viewer prend le flex restant, l'image est en object-fit:contain.
========================================================================== */

/* Overlay : colonne flex stricte, sans débordement */
#manga-mid-overlay {
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  padding: clamp(8px, 2vh, 16px) clamp(8px, 2vw, 16px) !important;
  box-sizing: border-box !important;
}

/* Titre (premier enfant de l'overlay) : ne grandit pas */
#manga-mid-overlay > div:first-child {
  flex-shrink: 0 !important;
  margin-bottom: 6px !important;
}

/* Viewer : occupe tout l'espace vertical restant */
#manga-mid-viewer {
  flex: 1 1 auto !important;
  min-height: 0 !important;        /* autorise le shrink dans flex */
  width: min(90vw, 62vh) !important;
  max-width: min(90vw, 62vh) !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  max-height: 100% !important;
}

/* Zone pages : prend tout l'espace du viewer */
#manga-mid-pages {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  position: relative !important;
  overflow: hidden !important;
}

/* Image : remplit la zone en contain — jamais cropée */
#manga-mid-img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  display: block !important;
}

/* Compteur : sorti du flux absolu, intégré en bas du viewer */
#manga-mid-counter {
  position: relative !important;
  transform: none !important;
  left: auto !important;
  bottom: auto !important;
  align-self: center;
  flex-shrink: 0;
  margin: 3px 0 !important;
}

/* Hint et bouton : ne grandissent pas */
#manga-mid-hint     { flex-shrink: 0 !important; margin-top: 6px !important; }
#manga-mid-continue { flex-shrink: 0 !important; margin-top: 8px !important; }

/* Tablette landscape */
@media (max-width: 1024px) and (orientation: landscape) {
  #manga-mid-viewer {
    width: min(55vw, 85vh * 0.67) !important;
    max-width: min(55vw, 85vh * 0.67) !important;
  }
}

/* Mobile portrait : plein écran, titre masqué */
@media (max-width: 480px) {
  #manga-mid-overlay { padding: 6px !important; }
  #manga-mid-viewer  { width: 96vw !important; max-width: 96vw !important; }
  #manga-mid-overlay > div:first-child { display: none !important; }
}

/* ==========================================================================
   ⑥ PARTIE D'ÉCHECS — TOUS DEVICES
   Structure JS (après chessInit) :
     #narrative-screen.chess-mode  (flex-column)
       #chess-board-container       → flex-row : char-left | #chess-grid | char-right
       #dialogue-area               → boîte de dialogue seule, pleine largeur en bas
========================================================================== */

/* ── NARRATIVE-SCREEN en chess-mode : colonne, plateau haut / dialogue bas ── */

/* ── CHESS-BOARD-CONTAINER : COLUMN centré pour ne plus bouger en largeur ── */
#chess-board-container {
  flex: 0 0 auto;
  display: none; /* flex quand actif via JS */
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100%;
  /* Hauteur adaptative : laisse ~38% pour le dialogue en bas */
  height: 62vh;
  gap: 10px !important;
  padding: clamp(8px, 2vh, 20px) clamp(8px, 2vw, 20px);
  box-sizing: border-box;
  position: relative;
}

/* ── GRILLE D'ÉCHECS : carré centré ── */
#chess-grid {
  flex-shrink: 0;
  margin: 0 auto;
  /* Carré qui tient dans la zone disponible */
  width:  auto !important;
  height: auto !important;
  aspect-ratio: 1 / 1;
  max-width:  none !important;
  max-height: 52vh !important;
}

/* Pousse les sprites sur les bords pour l'échiquier */
/* ── POSITIONNEMENT DES SPRITES DURANT LES ÉCHECS ── */
/* Remplace ces valeurs par celles que tu as trouvées avec l'outil */
.chess-mode .sprite { bottom: 255px !important; }
.chess-mode .sprite { 
  /* On le descend un peu plus (-40px) pour bien l'ancrer sous la ligne dorée */
  bottom: calc(clamp(140px, 36vh, 260px) - 40px) !important; 
  /* Masque en fondu ultra-doux (effet brume) : absorbe visuellement les 5px de saut ! */
  -webkit-mask-image: linear-gradient(to bottom, black 65%, transparent 95%);
  mask-image: linear-gradient(to bottom, black 65%, transparent 95%);
  z-index: 15 !important;
}
.chess-mode .sprite.active { z-index: 25 !important; }
.chess-mode .sprite-left { left: -2% !important; }
.chess-mode .sprite-right { right: 21% !important; }

/* ── DIALOGUE-AREA en chess-mode : bande en bas, boîte seule ── */
.chess-mode #dialogue-area {
  flex: 0 0 auto;
  height: auto !important;
  min-height: clamp(140px, 36vh, 260px);
  flex-direction: row !important;
  align-items: flex-end !important;
  justify-content: center !important;
  padding: 0 clamp(8px, 2vw, 20px) clamp(10px, 2vh, 20px) !important;
  background: linear-gradient(to top,
    rgba(8,6,14,0.97) 0%,
    rgba(8,6,14,0.80) 60%,
    transparent 100%
  );
  
  /* Modification : Ligne dorée intégrée ici + fond opaque pour cacher les sprites derrière */
  border-top: 2px solid var(--gold-dim);
  /* Fond translucide + effet verre fumé (blur) pour voir l'arène magnifiquement ! */
  background: linear-gradient(to top, rgba(8,6,14,0.94) 0%, rgba(12,9,20,0.65) 100%) !important;
  backdrop-filter: blur(4px);
  box-shadow: 0 -10px 30px rgba(0,0,0,0.4);
  position: relative;
  z-index: 50; /* Passe strictement au-dessus des sprites ! */
}


/* Boîte de dialogue : pleine largeur centrale */
.chess-mode #dialogue-area .dialogue-box {
  flex: 1 !important;
  max-width: clamp(300px, 75vw, 760px) !important;
  height: clamp(100px, 20vh, 180px); /* FIXE LA HAUTEUR POUR EMPÊCHER LE BOARD DE BOUGER */
  align-self: flex-end !important;
  padding: clamp(12px, 2vw, 22px) !important;
}
.chess-mode #dialogue-text  { font-size: clamp(13px, 1.8vw, 16px); }
.chess-mode #speaker-name   { font-size: clamp(14px, 2vw, 19px); margin-bottom: 8px; }
.chess-mode .continue-hint  { font-size: 9px; margin-top: 8px; }

/* ── MOBILE portrait (≤ 480px) : plateau plus petit, dialogue en bas ── */
@media (max-width: 480px) {
  #chess-board-container {
    height: 52vh;
    gap: clamp(4px, 2vw, 12px);
    padding: 6px;
  }
  #chess-grid {
    width:  auto !important;
    height: auto !important;
    max-height: 48vh !important;
  }
  #chess-board-container .sprite {
    width: clamp(50px, 14vw, 100px) !important;
  }
  .chess-mode .sprite {
    bottom: calc(clamp(120px, 42vh, 220px) - 20px) !important; /* Ajustement proportionnel pour mobile */
  }
  .chess-mode #dialogue-area {
    min-height: clamp(120px, 42vh, 220px);
  }
}

/* ── MOBILE landscape chess : tout en row ── */
@media (max-width: 900px) and (orientation: landscape) and (max-height: 500px) {
  #narrative-screen.chess-mode { flex-direction: row !important; }
  #chess-board-container {
    height: 100% !important;
    width: 65% !important;
    flex-shrink: 0;
  }
  #chess-grid {
    width:  min(40vh, 50vw) !important;
    height: min(40vh, 50vw) !important;
  }
  #chess-board-container .sprite { width: clamp(40px, 10vw, 90px) !important; }
  .chess-mode #dialogue-area {
    height: 100% !important;
    width: 35%;
    flex-direction: column !important;
    align-items: center;
    justify-content: flex-end;
    padding: 8px !important;
    min-height: unset !important;
    border-top: none; /* En format paysage la barre est sur le côté */
    border-left: 2px solid var(--gold-dim);
  }
  .chess-mode #dialogue-area .dialogue-box { max-width: 100% !important; }
}

/* Transformation choc lors du Rang S */
.rank-s-glitch {
  color: #ff2a2a !important;
  text-shadow: 0 0 15px #ff0000, 0 0 30px #ff0000;
  font-size: 1.25em;
  font-weight: bold;
  animation: heavyGlitch 0.2s 3, pulseDanger 1s infinite 0.6s;
  padding: 8px 12px;
  background: rgba(255, 0, 0, 0.1);
  border-left: 4px solid #ff2a2a;
  margin: 10px 0;
}

/* ==========================================================================
   ⑦ HUD — discret sur mobile
========================================================================== */
@media (max-width: 480px) {
  #hud-top-left  { font-size: 7px; opacity: 0.6; }
  #hud-top-right { display: none; }
  #hud-bottom    { display: none; }
  #start-screen::before, #start-screen::after { display: none; }
}

/* ==========================================================================
   ⑧ PHASE CALL (9) — compact sur tablette
========================================================================== */
@media (max-width: 900px) {
  #phase-9 > div:nth-child(2) {
    padding: 50px 16px 10px !important;
    gap: 10px !important;
  }
}

/* ==========================================================================
   ⑨ SAFE AREA iOS
========================================================================== */
@supports (padding: env(safe-area-inset-bottom)) {
  .phase-container {
    padding-bottom: calc(clamp(10px,3vh,30px) + env(safe-area-inset-bottom));
  }
  #dialogue-area {
    padding-bottom: calc(clamp(10px,2vh,22px) + env(safe-area-inset-bottom));
  }
}

/* Animation générique de fin */
@keyframes creditsRoll {
    0% { top: 100%; }
    100% { top: -400%; }
}