/* ============================================================
   DOMINOS DES TRANSPORTS — style.css
   Palette : ciel #4FB8E8, route #FF8A4C, nuit #2B2E4A,
             réussite #4CAF6D, erreur #E85C5C, soleil #FFD166
   Police : Baloo 2 (titres/UI) + Quicksand (texte courant)
   ============================================================ */

:root{
  --ciel: #4FB8E8;
  --ciel-clair: #CDEFFF;
  --route: #FF8A4C;
  --route-fonce: #E8703A;
  --nuit: #2B2E4A;
  --nuit-clair: #454A72;
  --blanc: #FFFFFF;
  --succes: #4CAF6D;
  --erreur: #E85C5C;
  --soleil: #FFD166;
  --ombre: rgba(43,46,74,0.18);
  --rayon: 22px;
}

*{ box-sizing: border-box; }
html,body{
  margin:0; padding:0; height:100%;
  font-family:'Quicksand', sans-serif;
  color: var(--nuit);
  overflow:hidden;
  -webkit-tap-highlight-color: transparent;
}
h1,h2,h3, .btn, .jeu-consigne{ font-family:'Baloo 2', sans-serif; }

body{
  background:
    radial-gradient(circle at 15% 10%, #ffffff55, transparent 40%),
    linear-gradient(180deg, var(--ciel) 0%, var(--ciel-clair) 55%, #FFF7E8 100%);
}

button{ font-family: inherit; cursor:pointer; border:none; background:none; }
button:focus-visible, a:focus-visible{
  outline: 3px solid var(--nuit);
  outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce){
  *{ animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

.hidden{ display:none !important; }

.screen{
  position:fixed; inset:0;
  width:100%; height:100%;
  display:flex; align-items:center; justify-content:center;
}

/* ============================================================
   ÉCRAN DE TÉLÉCHARGEMENT
   ============================================================ */
.screen--loading{
  background: linear-gradient(180deg, var(--ciel) 0%, #2B7CB8 100%);
}
.loading-wrap{ text-align:center; color:var(--blanc); }
.loading-icon{ font-size: 64px; margin-bottom:10px; }
.loading-icon__vehicle{
  display:inline-block;
  animation: chugge 1.1s ease-in-out infinite;
}
@keyframes chugge{
  0%,100%{ transform: translateX(0) rotate(0deg); }
  50%{ transform: translateX(10px) rotate(-2deg); }
}
.loading-title{
  font-size: clamp(22px, 5vw, 34px);
  margin: 0 0 24px;
  text-shadow: 0 3px 0 rgba(0,0,0,0.15);
}
.loading-bar{
  width: min(320px, 70vw);
  height: 18px;
  background: rgba(255,255,255,0.35);
  border-radius: 20px;
  overflow:hidden;
  margin: 0 auto;
  border: 3px dashed rgba(255,255,255,0.7);
}
.loading-bar__fill{
  height:100%; width:0%;
  background: linear-gradient(90deg, var(--soleil), var(--route));
  border-radius: 20px;
  transition: width 0.2s ease-out;
}
.loading-text{ margin-top:14px; font-weight:600; letter-spacing:0.5px; }

/* ============================================================
   ÉCRAN D'ACCUEIL
   ============================================================ */
.screen--accueil{ padding: 24px; }
.accueil-content{
  width:min(880px, 100%);
  display:flex; flex-direction:column; align-items:center;
  gap: 22px;
  text-align:center;
}
.accueil-titre img{
  max-width: min(480px, 82vw);
  filter: drop-shadow(0 8px 0 rgba(43,46,74,0.12));
}

.btn{
  border-radius: 999px;
  font-weight: 700;
  letter-spacing: 0.5px;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.btn:active{ transform: translateY(2px); }

.btn--jouer{
  background: linear-gradient(180deg, #FFA166, var(--route));
  color: var(--blanc);
  font-size: clamp(20px, 4vw, 26px);
  padding: 16px 48px;
  box-shadow: 0 6px 0 var(--route-fonce), 0 10px 18px var(--ombre);
  display:flex; align-items:center; gap:12px;
}
.btn--jouer:hover{ transform: translateY(-2px); }
.btn--jouer:active{ box-shadow: 0 2px 0 var(--route-fonce); }

.btn--secondaire{
  background: var(--blanc);
  color: var(--nuit);
  font-size: 16px;
  padding: 12px 26px;
  box-shadow: 0 4px 0 #d8dae8, 0 6px 12px var(--ombre);
  border: 2px solid #E4E7F5;
}
.btn--secondaire:active{ box-shadow: 0 1px 0 #d8dae8; }

.accueil-textes{
  display:flex; gap:20px; flex-wrap:wrap; justify-content:center;
  width:100%;
}
.accueil-texte{
  flex: 1 1 240px;
  max-width: 320px;
  background: rgba(255,255,255,0.75);
  border: 2px solid rgba(255,255,255,0.9);
  border-radius: var(--rayon);
  padding: 16px 18px;
  font-size: 15px;
  line-height:1.5;
  box-shadow: 0 4px 14px var(--ombre);
}

/* ============================================================
   MODALE "COMMENT JOUER"
   ============================================================ */
.modal{ position:fixed; inset:0; z-index:50; display:flex; align-items:center; justify-content:center; }
.modal__overlay{ position:absolute; inset:0; background: rgba(43,46,74,0.55); }
.modal__panel{
  position:relative;
  background: var(--blanc);
  border-radius: 26px;
  padding: 32px 28px 26px;
  width:min(480px, 88vw);
  box-shadow: 0 20px 40px rgba(0,0,0,0.25);
  text-align:center;
  animation: pop-in 0.25s ease-out;
}
@keyframes pop-in{
  from{ transform: scale(0.85); opacity:0; }
  to{ transform: scale(1); opacity:1; }
}
.modal__panel h2{ margin:0 0 14px; color: var(--nuit); font-size: 24px; }
.modal__contenu p{ font-size: 15px; line-height:1.6; margin: 0 0 10px; text-align:left; }
.modal__fermer{
  position:absolute; top:14px; right:14px;
  width:34px; height:34px; border-radius:50%;
  background:#F0F2FA; font-size:16px; font-weight:700;
  display:flex; align-items:center; justify-content:center;
}
.modal__fermer:hover{ background:#E4E7F5; }

/* ============================================================
   ÉCRAN DE JEU
   ============================================================ */
.screen--jeu{
  flex-direction:column; justify-content:flex-start;
  padding: 0;
}
.jeu-contenu{
  width:100%; height:100%;
  display:flex; flex-direction:column; align-items:center;
  padding: 14px 18px 20px;
  overflow:auto;
}

/* Message invitant à tourner l'écran (jeu conçu pour le mode paysage) */
.rotate-hint{
  display:none;
  position:absolute; inset:0;
  flex-direction:column; align-items:center; justify-content:center;
  gap:14px; text-align:center; padding: 30px;
  background: linear-gradient(180deg, var(--ciel) 0%, #2B7CB8 100%);
  color:#fff;
}
.rotate-hint__icone{
  font-size:48px;
  animation: tourne 1.6s ease-in-out infinite;
}
.rotate-hint p{ font-family:'Baloo 2', sans-serif; font-size:18px; font-weight:700; max-width:280px; }
@keyframes tourne{
  0%,100%{ transform: rotate(0deg); }
  50%{ transform: rotate(90deg); }
}
@media (orientation: portrait) and (max-width: 820px){
  .jeu-contenu{ display:none; }
  .rotate-hint{ display:flex; }
}

.jeu-topbar{
  width:100%; max-width: 960px;
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom: 8px;
}
.jeu-topbar__droite{ display:flex; gap:10px; }
.btn-rond{
  width:48px; height:48px; border-radius:50%;
  background: var(--blanc);
  font-size: 20px;
  display:flex; align-items:center; justify-content:center;
  box-shadow: 0 4px 0 #d8dae8, 0 6px 10px var(--ombre);
  transition: transform 0.12s ease;
}
.btn-rond:active{ transform: translateY(2px); box-shadow: 0 1px 0 #d8dae8; }

.score-dots{
  display:flex; flex-wrap:wrap; gap:7px; justify-content:center;
  max-width: 960px; width:100%;
  margin: 4px 0 6px;
}
.score-dot{
  width:16px; height:16px; border-radius:50%;
  background: #ffffffaa;
  border: 2px solid #ffffff;
  box-shadow: inset 0 0 0 2px #d8dae8;
  transition: background 0.25s ease, transform 0.2s ease;
}
.score-dot.bonne{ background: var(--succes); box-shadow: inset 0 0 0 2px #2f8a4d; transform: scale(1.15); }
.score-dot.mauvaise{ background: var(--erreur); box-shadow: inset 0 0 0 2px #b23f3f; transform: scale(1.15); }

.jeu-zone{
  width:100%; max-width: 1100px;
  flex: 1 1 auto;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap: clamp(24px, 6vh, 56px);
  margin-top: 6px;
}

.route-separatrice{
  width: 100%;
  display:flex; justify-content:center;
  margin: 0;
}
.route-separatrice__texte{
  background: #FFF7E8;
  padding: 2px 16px;
  border-radius: 20px;
  font-family:'Baloo 2', sans-serif;
  font-weight:700;
  font-size: clamp(13px, 2.2vw, 16px);
  color: var(--nuit);
  box-shadow: 0 2px 6px var(--ombre);
}

.rangee{
  display:flex;
  gap: clamp(6px, 1.6vw, 16px);
  justify-content:center;
  flex-wrap: nowrap;
  width:100%;
  max-width: 100%;
  overflow-x:auto;
  padding: 6px 2px 10px;
}

/* --- Domino : tuile horizontale divisée en deux par une ligne verticale --- */
.domino{
  flex: 0 0 auto;
  width: clamp(120px, 20vw, 190px);
  height: clamp(64px, 11vw, 100px);
  background: var(--blanc);
  border-radius: 14px;
  border: 3px solid #E4E7F5;
  box-shadow: 0 6px 0 #d8dae8, 0 8px 14px var(--ombre);
  display:flex; flex-direction:row; overflow:hidden;
  position:relative;
  user-select:none;
}
.domino__image{
  flex: 1 1 50%;
  display:flex; align-items:center; justify-content:center;
  padding: 6px;
  background: #FBFCFF;
}
.domino__image img{
  width: 80%; height: 80%; object-fit:contain;
}
.domino__separateur{
  width:0; border-left: 3px dashed #D5D9EC;
  margin: 8px 0;
}
.domino__mot{
  flex: 1 1 50%;
  display:flex; align-items:center; justify-content:center;
  text-align:center;
  font-family:'Baloo 2', sans-serif;
  font-weight:700;
  font-size: clamp(12px, 2vw, 16px);
  color: var(--nuit);
  padding: 4px 6px;
}

/* domino vide (case à remplir) */
.domino--vide{
  background: repeating-linear-gradient(135deg, #EEF1FB, #EEF1FB 10px, #E4E8F8 10px, #E4E8F8 20px);
  border: 3px dashed #B9C0E0;
  box-shadow: none;
  display:flex; align-items:center; justify-content:center;
}
.domino--vide::after{
  content:"?";
  font-family:'Baloo 2', sans-serif;
  font-size: clamp(24px, 5vw, 36px);
  color:#B9C0E0;
  font-weight:800;
}
.domino--vide.survole{
  border-color: var(--route);
  background: repeating-linear-gradient(135deg, #FFEFE3, #FFEFE3 10px, #FFE1CC 10px, #FFE1CC 20px);
}

/* domino décoratif rempli dans la rangée du haut */
.domino--decor{ opacity: 0.96; }

/* domino choix (bas) */
.domino--choix{
  cursor:pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.domino--choix:hover{ transform: translateY(-4px); box-shadow: 0 10px 0 #d8dae8, 0 14px 18px var(--ombre); }
.domino--choix:active{ transform: translateY(1px); }
.domino--choix.glisse{ opacity:0.4; }

.domino--choix.bonne-reponse{
  animation: envole 0.55s ease forwards;
}
@keyframes envole{
  to{ transform: scale(0.4); opacity:0; }
}
.domino--choix.mauvaise-reponse{
  animation: secoue 0.45s ease;
  border-color: var(--erreur);
}
@keyframes secoue{
  0%,100%{ transform: translateX(0); }
  20%{ transform: translateX(-8px); }
  40%{ transform: translateX(8px); }
  60%{ transform: translateX(-6px); }
  80%{ transform: translateX(6px); }
}

.marque-resultat{
  position:absolute; top:-10px; right:-10px;
  width:34px; height:34px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:20px; color:#fff; font-weight:800;
  box-shadow: 0 3px 8px rgba(0,0,0,0.25);
  animation: pop-in 0.2s ease-out;
}
.marque-resultat--ok{ background: var(--succes); }
.marque-resultat--ko{ background: var(--erreur); }

.feedback-scene{
  min-height: 30px;
  margin-top: 10px;
  font-weight:700;
  font-size: 16px;
  text-align:center;
}
.feedback-scene.ok{ color: var(--succes); }
.feedback-scene.ko{ color: var(--erreur); }

/* ============================================================
   ÉCRAN DE FIN
   ============================================================ */
.screen--fin{ padding: 24px; }
.fin-content{
  width:min(520px, 100%);
  background: rgba(255,255,255,0.9);
  border-radius: 28px;
  padding: 36px 30px;
  text-align:center;
  box-shadow: 0 16px 30px var(--ombre);
}
.fin-icone{ font-size: 54px; margin-bottom: 6px; }
.fin-content h2{ margin: 0 0 8px; font-size: 26px; color: var(--nuit); }
.fin-score{ font-size: 20px; font-weight:700; color: var(--route-fonce); margin: 0 0 14px; }
.score-dots--fin{ margin-bottom: 16px; }
.fin-message{ font-size: 15px; margin: 0 0 22px; line-height:1.5; }
.fin-content .btn{ margin: 6px auto; display:flex; }
.fin-content .btn--jouer{ justify-content:center; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 480px){
  .accueil-textes{ flex-direction:column; align-items:stretch; }
  .accueil-texte{ max-width: none; }
  .jeu-topbar{ padding: 0 2px; }
}