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

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  font-family: 'Helvetica Neue', Arial, sans-serif;
  background: #ffffff;
}

/* ============================================================
   ÉCRAN PRINCIPAL — colonne flex simple
   ┌ header   (auto)
   ├ bulle    (auto — taille par son contenu)
   └ perso    (1 — remplit l'espace restant)
============================================================ */
.screen {
  position: relative;
  width: 100%;
  height: 100dvh;
  overflow: hidden;
  background: #ffffff;
  display: flex;
  flex-direction: column;
}

/* ============================================================
   EN-TÊTE : "Consignes de jeu" + flèche
============================================================ */
.page-header {
  flex: 0 0 auto;
  position: relative;           /* ancre la flèche en absolu */
  display: flex;
  align-items: center;
  justify-content: center;      /* titre reste centré */
  padding: clamp(8px, 2dvh, 20px) clamp(12px, 4vw, 28px) clamp(16px, 3dvh, 28px);
  animation: fadeIn 0.5s ease 0.1s both;
}

.page-title {
  font-size:   clamp(1rem, 5vw, 2rem);
  font-weight: 800;
  color: #1a9696;
  letter-spacing: 0.01em;
  line-height: 1.2;
  text-align: center;
  user-select: none;
}

.btn-suivant {
  position: absolute;           /* bord droit du header */
  right: clamp(12px, 4vw, 28px);
  height: clamp(20px, 4.5dvh, 36px);   /* plus petite que avant */
  width: auto;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  filter: drop-shadow(1px 1px 3px rgba(0,0,0,0.2));
  transition: transform 0.15s;
}
.btn-suivant:hover  { transform: scale(1.08); }
.btn-suivant:active { transform: scale(0.92); }

/* ============================================================
   BULLE DE DIALOGUE — auto (taille selon le texte)
   Queue pointant vers Marc (::after, visible car overflow visible)
============================================================ */
.bubble-wrapper {
  flex: 0 0 auto;           /* ← NE s'étire PAS : taille exacte du contenu */
  padding: 0 clamp(12px, 4vw, 28px) clamp(18px, 4dvh, 28px); /* bas = espace pour la queue */
  animation: fadeIn 0.55s ease 0.2s both;
  overflow: visible;        /* queue visible sous le wrapper */
}

.speech-bubble {
  position: relative;
  background: #6dbf6d;
  border-radius: clamp(10px, 2vw, 18px);
  padding: clamp(10px, 2dvh, 18px) clamp(12px, 3vw, 22px);
  padding-left: calc(clamp(12px, 3vw, 22px) + 5px); /* RetraitGauche = 5 */
}

/* Queue pointant vers Marc */
.speech-bubble::after {
  content: '';
  position: absolute;
  bottom: -16px;
  left: 50%;
  transform: translateX(-50%);
  border-left:  14px solid transparent;
  border-right: 14px solid transparent;
  border-top:   16px solid #6dbf6d;
}

.speech-bubble p {
  font-size:   clamp(0.78rem, 2.6vw, 1.05rem);
  font-weight: 600;
  color: #1a3a1a;
  line-height: 1.45;
  margin-bottom: clamp(5px, 1dvh, 10px);
}
.speech-bubble p:last-child { margin-bottom: 0; }

/* ============================================================
   ZONE PERSONNAGES — remplit tout l'espace restant
   Le groupe est centré verticalement dans cet espace.
   Lézard et QR sont centrés sur la hauteur de Marc.
============================================================ */
.characters-zone {
  flex: 1 1 0;              /* remplit exactement l'espace restant */
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;  /* centrage vertical du groupe dans l'espace restant */
  overflow: visible;
}

.characters-group {
  display: flex;
  align-items: center;      /* lézard et QR centrés sur Marc */
  justify-content: space-around;
  padding: 0 clamp(12px, 4vw, 28px);
}

.char-img {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  transition: transform 0.15s;
  object-fit: contain;
  flex: 0 0 auto;
}
.char-img:hover  { transform: scale(1.05); }
.char-img:active { transform: scale(0.93); }

/* Lézard — ~1/3 de Marc */
.lezard-img {
  height: clamp(55px, 13dvh, 105px);
  width: auto;
  border-radius: clamp(6px, 1vw, 10px);
  filter: drop-shadow(1px 2px 4px rgba(0,0,0,0.25));
  animation: fadeIn 0.6s ease 0.35s both;
}

/* Marc — personnage central dominant */
.marc-img {
  height: clamp(190px, 42dvh, 340px);
  width: auto;
  animation: fadeIn 0.6s ease 0.25s both;
}

/* QR Code — même taille que le lézard */
.qr-img {
  height: clamp(55px, 13dvh, 105px);
  width: auto;
  border-radius: clamp(4px, 0.8vw, 8px);
  filter: drop-shadow(1px 2px 4px rgba(0,0,0,0.25));
  animation: fadeIn 0.6s ease 0.4s both;
}

/* ============================================================
   SCORE — bas gauche, position absolue
============================================================ */
.score-widget {
  position: absolute;
  bottom: clamp(8px, 2dvh, 18px);
  left:   clamp(10px, 3vw, 20px);
  z-index: 4;
  display: flex;
  align-items: center;
  gap: clamp(4px, 1vw, 8px);
  animation: fadeIn 0.5s ease 0.5s both;
}

.score-icon {
  height: clamp(30px, 7dvh, 56px);
  width: auto;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  transition: transform 0.15s;
}
.score-icon:hover  { transform: scale(1.10); }
.score-icon:active { transform: scale(0.92); }

.score-label {
  min-width: clamp(32px, 9vw, 64px);
  height: clamp(22px, 5dvh, 38px);
  background: #ffffff;
  border: 1.5px solid #cccccc;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size:   clamp(0.75rem, 2.5vw, 1.1rem);
  font-weight: 700;
  color: #1a3266;
  padding: 0 6px;
}

/* ============================================================
   OVERLAY DE TRANSITION
============================================================ */
.transition-overlay {
  position: fixed;
  inset: 0;
  background: #000;
  z-index: 100;
  opacity: 1;
  pointer-events: all;
  transition: opacity 0.4s ease;
}

/* ============================================================
   ANIMATIONS
============================================================ */
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ============================================================
   RESPONSIVE — PORTRAIT ÉTROIT (≤ 360 px)
============================================================ */
@media (max-width: 360px) {
  .page-title      { font-size: 0.9rem; }
  .speech-bubble p { font-size: 0.68rem; }
  .marc-img        { height: 160px; }
  .lezard-img,
  .qr-img          { height: 50px; }
}

/* ============================================================
   RESPONSIVE — PAYSAGE MOBILE (hauteur ≤ 450 px)
============================================================ */
@media (max-height: 450px) and (orientation: landscape) {
  .page-header     { padding: 4px 12px; }
  .page-title      { font-size: 0.82rem; }
  .speech-bubble p { font-size: 0.60rem; line-height: 1.3; }
  .marc-img        { height: 110px; }
  .lezard-img,
  .qr-img          { height: 42px; }
}