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

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

/* ============================================================
   ÉCRAN — fond photo montagne, colonne flex, hauteur viewport
============================================================ */
.screen {
  position: relative;
  width: 100%;
  height: 100dvh;
  background-image: url('img/Fond_page20a_150dpi.jpg');
  background-size: cover;
  background-position: center top;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ============================================================
   TITRE : LIB_Felicitations (grand) + sous-titre bisses
============================================================ */
.titre-zone {
  flex: 0 0 auto;
  text-align: center;
  padding: clamp(10px, 2dvh, 20px) clamp(10px, 4%, 24px) clamp(5px, 1dvh, 12px);
  animation: fadeIn 0.5s ease 0.05s both;
}

/* Orange/ambre = félicitations (défaut) — taille augmentée */
.felicitations-text {
  font-size: clamp(1.15rem, 5vw, 2.5rem);
  font-weight: 800;
  color: #07d039;
  /*text-shadow:
    0 1px 5px rgba(255,255,255,0.8),
    0 0 14px rgba(255,255,255,0.5);
  line-height: 1.2;*/
  margin-bottom: clamp(4px, 0.8dvh, 9px);
}

/* Rouge = dommage (classe ajoutée par JS) */
.felicitations-text.dommage {
  color: #cc0000;
}

/* Bleu gras = sous-titre bisses — taille augmentée */
.bisses-text {
  font-size: clamp(1.15rem, 5vw, 2.5rem);
  font-weight: 700;
  color: #0f6bdf;
  /*text-shadow:
    0 1px 5px rgba(255,255,255,0.85),
    0 0 10px rgba(255,255,255,0.5);*/
  line-height: 1.3;
  margin-top: 5%;
}

/* ============================================================
   ZONE CENTRALE : Cloé (gauche) + Manuscrit (droite), même niveau
   flex:1 → absorbe l'espace vertical disponible
============================================================ */
.central-row {
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  animation: fadeIn 0.5s ease 0.1s both;
}

/* Cloé — centrée verticalement dans la zone centrale */
.cloe-img {
  flex: 0 0 auto;
  width: clamp(72px, 22%, 148px);
  align-self: center;
  object-fit: contain;
  object-position: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  margin-left: 5%;
}

/* Manuscrit — occupe le reste de la largeur, image + légende empilées */
.manuscrit-zone {
  flex: 1 1 0;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: clamp(4px, 1dvh, 10px) clamp(6px, 2.5%, 16px);
  gap: clamp(3px, 0.6dvh, 7px);
}

/* Légende sous le manuscrit */
.manuscrit-hint {
  flex: 0 0 auto;
  font-size: clamp(0.55rem, 2.5vw, 1.2rem);
  color: #000;
  text-align: center;
  font-style: italic;
  opacity: 0.85;
  line-height: 1.2;
  pointer-events: none;
  text-shadow: 0 1px 3px rgba(0,0,0,0.6);
}

.manuscrit-img {
  max-height: 100%;
  max-width: 100%;
  object-fit: contain;
  cursor: pointer;
  border: 2px solid #666;
  box-shadow: 4px 4px 16px rgba(0,0,0,0.6);
  border-radius: 2px;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}
.manuscrit-img:active { transform: scale(0.97); }

/* ============================================================
   TEXTE BAS — fond bleu pétrole, bordure blanche 2px
============================================================ */
.texte-zone {
  flex: 0 0 auto;
  background: #006778;
  border: 4px solid #ffffff;
  border-radius: 6px;
  margin: 0 clamp(8px, 3%, 18px) clamp(5px, 1dvh, 10px);
  padding: clamp(7px, 1.4dvh, 14px) clamp(10px, 3.5%, 22px);
  display: flex;
  align-items: center;
  animation: fadeIn 0.5s ease 0.15s both;
}

.texte-narratif {
  font-size: clamp(0.72rem, 3vw, 1.5rem);
  color: #ffffff;
  text-align: center;
  line-height: 1.55;
}

/* MyRMyw — rouge vif sur fond sombre */
.myrmiw {
  color: #ff4444;
  font-weight: 700;
}

/* ============================================================
   BAS DE PAGE
   Trick 3 colonnes : score(flex:1) | lézard | spacer(flex:1)
   → lézard centré visuellement
============================================================ */
.bas-zone {
  flex: 0 0 auto;
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: clamp(4px, 0.9dvh, 10px) clamp(10px, 3%, 20px) clamp(6px, 1.3dvh, 12px);
  animation: fadeIn 0.5s ease 0.2s both;
}

.score-zone {
  flex: 1;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: clamp(4px, 1.2vw, 10px);
}

.coffre-img {
  height: clamp(28px, 6dvh, 48px);
  width: auto;
  display: block;
}

.points-box {
  background: #cc0000;
  color: #fff;
  font-weight: 700;
  font-size: clamp(0.80rem, 2.8vw, 1.1rem);
  min-width: clamp(32px, 9vw, 58px);
  padding: clamp(3px, 0.6dvh, 6px) clamp(4px, 1vw, 9px);
  border-radius: 5px;
  text-align: center;
  line-height: 1.2;
}

.lezard-img {
  flex: 0 0 auto;
  height: clamp(44px, 9dvh, 70px);
  width: auto;
  display: block;
  cursor: pointer;
  border-radius: clamp(4px, 1.5vw, 10px);
  filter: drop-shadow(1px 2px 5px rgba(0,0,0,0.4));
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}
.lezard-img:active { transform: scale(0.93); }

.bas-spacer { flex: 1; }

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

/* ============================================================
   POP-UP MANUSCRIT AGRANDI
============================================================ */
.panel-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.78);
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(10px, 2.5%, 20px);
  animation: fadeIn 0.25s ease;
}

.panel-manuscrit {
  position: relative;
  background: #fff;
  border-radius: clamp(6px, 1.5vw, 12px);
  box-shadow: 0 4px 28px rgba(0,0,0,0.55);
  max-width: 92vw;
  max-height: 90dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: clamp(32px, 6vw, 46px) clamp(8px, 2%, 16px) clamp(8px, 2%, 16px);
}

.manuscrit-grand-img {
  max-width: 100%;
  max-height: calc(88dvh - 50px);
  object-fit: contain;
  display: block;
}

.fermer-btn {
  position: absolute;
  top: clamp(6px, 1.5vw, 12px);
  right: clamp(6px, 1.5vw, 12px);
  background: rgba(30,30,30,0.75);
  color: #fff;
  border: none;
  border-radius: 50%;
  width: clamp(28px, 7vw, 40px);
  height: clamp(28px, 7vw, 40px);
  font-size: clamp(16px, 4vw, 24px);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  z-index: 5;
  -webkit-tap-highlight-color: transparent;
}
.fermer-btn:active { transform: scale(0.88); }

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

/* ============================================================
   RESPONSIVE — PORTRAIT ÉTROIT (≤ 360px)
============================================================ */
@media (max-width: 360px) {
  .felicitations-text { font-size: 0.90rem; }
  .bisses-text        { font-size: 0.75rem; }
  .cloe-img           { width: 60px; }
  .texte-narratif     { font-size: 0.58rem; line-height: 1.4; }
  .coffre-img         { height: 24px; }
  .points-box         { font-size: 0.70rem; min-width: 28px; }
  .lezard-img         { height: 38px; }
}

/* ============================================================
   RESPONSIVE — TABLETTE (≥ 600px)
============================================================ */
@media (min-width: 600px) {
  .felicitations-text { font-size: clamp(1.25rem, 3.2vw, 2.2rem); }
  .bisses-text        { font-size: clamp(1.05rem, 2.6vw, 1.7rem); }
  .cloe-img           { width: clamp(96px, 20%, 180px); }
  .texte-narratif     { font-size: clamp(0.92rem, 2.4vw, 1.35rem); }
  .manuscrit-hint     { font-size: clamp(0.68rem, 1.6vw, 0.92rem); }
  .coffre-img         { height: clamp(34px, 6dvh, 54px); }
  .points-box         { font-size: clamp(0.9rem, 2.2vw, 1.15rem); }
  .lezard-img         { height: clamp(50px, 9dvh, 80px); }
}

/* ============================================================
   RESPONSIVE — TABLETTE PORTRAIT CONTRAINTE (≥ 600px, ≤ 1099px h)
   Cible iPad 6e génération
============================================================ */
@media (min-width: 600px) and (max-height: 1099px) {
  .titre-zone  { padding: clamp(6px, 1.2dvh, 14px) clamp(10px, 4%, 24px) clamp(3px, 0.6dvh, 8px); }
  .texte-zone  { padding: clamp(6px, 1.2dvh, 12px) clamp(10px, 3.5%, 22px); }
  .bas-zone    { padding: clamp(3px, 0.6dvh, 7px) clamp(10px, 3%, 20px) clamp(4px, 0.8dvh, 8px); }
}

/* ============================================================
   RESPONSIVE — PAYSAGE MOBILE (hauteur ≤ 450px)
============================================================ */
@media (max-height: 450px) and (orientation: landscape) {
  .titre-zone         { padding: 3px 10px 2px; }
  .felicitations-text { font-size: 0.72rem; }
  .bisses-text        { font-size: 0.60rem; }
  .manuscrit-zone     { padding: 2px 8px; }
  .cloe-img           { width: 50px; }
  .texte-zone         { padding: 4px 10px; margin: 0 8px 3px; }
  .texte-narratif     { font-size: 0.50rem; line-height: 1.3; }
  .bas-zone           { padding: 2px 10px 4px; }
  .coffre-img         { height: 22px; }
  .lezard-img         { height: 34px; }
}