/* ============================================================
   Gros Monsieur vs Schüblig — feuille de style
   ============================================================ */

/* Polices auto-hébergées (SIL OFL, voir fonts/OFL.txt).
   Chargées localement : le jeu reste fonctionnel hors-ligne. */
@font-face {
  font-family: 'Baloo 2';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('fonts/baloo2.woff2') format('woff2');
}
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('fonts/nunito.woff2') format('woff2');
}
  :root {
    --biome: #35e0b4;
    --biome-fonce: #075f4b;
    --biome-doux: rgba(53,224,180,.14);
    --or: #ffd166;
    --danger: #ef476f;
    --encre: #15151f;
  }
  body[data-biome="desert"] {
    --biome: #ffad5c;
    --biome-fonce: #8b3d16;
    --biome-doux: rgba(255,173,92,.15);
  }
  body[data-biome="foret"] {
    --biome: #9bd66f;
    --biome-fonce: #245c35;
    --biome-doux: rgba(155,214,111,.14);
  }
  * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
  .bibliotheque-icones { position: absolute; width: 0; height: 0; overflow: hidden; }
  .icone { width: 1.2em; height: 1.2em; display: inline-block; vertical-align: -.2em; flex: 0 0 auto; }
  html, body {
    overscroll-behavior: none;
    touch-action: manipulation;
  }
  body {
    margin: 0;
    min-height: 100vh;
    background: radial-gradient(circle at 50% 15%, var(--biome-doux), transparent 52%),
      radial-gradient(circle at 50% 20%, #34344d, #181823 72%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-family: 'Nunito', 'Segoe UI', 'Trebuchet MS', sans-serif;
    color: #fff;
    user-select: none;
    -webkit-user-select: none;
    padding: 8px;
  }
  /* Baloo 2 (arrondi) pour les titres, valeurs et boutons ; Nunito pour
     le reste. Polices auto-hébergées dans fonts/ (SIL OFL). */
  h1, h2, h3,
  #btnJouer, #btnSauvegarder, #btnRejouer, .btnTactile,
  .carte .val, #transitionNiveau .compteur, .medaille {
    font-family: 'Baloo 2', 'Trebuchet MS', sans-serif;
  }
  h1 {
    margin: 0 0 14px;
    font-size: 26px;
    letter-spacing: 1px;
    text-align: center;
    /* Ombre renforcée : le texte est en dégradé transparent, sans ça les
       tons rouge/vert se perdent sur le fond bleu nuit */
    text-shadow: 0 3px 0 rgba(0,0,0,.45), 0 8px 22px rgba(0,0,0,.55);
    background: linear-gradient(100deg, #fff0ae, #ffd166 45%, #f39a4a);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
  #titreJeu { display: flex; align-items: center; justify-content: center; gap: 10px; }
  #titreJeu .titre-icone { width: 34px; height: 34px; color: #df8054; filter: drop-shadow(0 3px 2px rgba(0,0,0,.35)); }
  #labelObjet { display: inline-flex; align-items: center; gap: 5px; }
  .icone-coeur { color: var(--danger); }
  .icone-niveau { color: #7fd8ff; }
  .carteBonus { border-color: color-mix(in srgb, var(--or) 28%, transparent); }
  .carteBonus > .icone { color: var(--or); }
  #hud {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 10px;
    width: 100%;
    max-width: 860px;
    margin-bottom: 10px;
  }
  .carte {
    background: linear-gradient(135deg, var(--biome-doux), rgba(255,255,255,.055));
    border: 1px solid rgba(255,255,255,.16);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    border-radius: 12px;
    padding: 6px 12px;
    font-size: 15px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 7px;
    box-shadow: 0 4px 14px rgba(0,0,0,.3);
    white-space: nowrap;
  }
  .carte .val { font-size: 18px; color: #ffd166; }
  /* Cœurs SVG du compteur de vies */
  #vies svg { vertical-align: -3px; margin: 0 1px; }
  /* Le score est LA donnée du jeu : il mérite une carte plus grande */
  .carteScore {
    padding: 8px 18px;
    font-size: 17px;
    background: rgba(255,209,102,.14);
    border-color: rgba(255,209,102,.35);
  }
  .carteScore .val {
    font-size: 27px;
    font-weight: 800;
    min-width: 34px;
    text-align: center;
  }
  .carteScore .val.pop { animation: popScore .32s ease-out; }
  @keyframes popScore {
    0% { transform: scale(1); }
    35% { transform: scale(1.45); color: #fff; }
    100% { transform: scale(1); }
  }
  #zoneJeu { width: 100%; max-width: 860px; position: relative; }
  /* Vignette par-dessus le jeu, en CSS : elle ne coûte rien au rendu du
     canvas (avant : un dégradé radial plein écran recréé à chaque image) */
  #zoneJeu::after {
    content: '';
    position: absolute;
    inset: 3px;
    border-radius: 11px;
    pointer-events: none;
    background: radial-gradient(ellipse at 50% 50%, rgba(0,0,0,0) 42%, rgba(0,0,0,.28) 100%);
  }
  canvas {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 14px;
    border: 3px solid rgba(0,0,0,.55);
    box-shadow: 0 20px 50px rgba(0,0,0,.5), inset 0 0 60px rgba(0,0,0,.15);
    touch-action: none;
  }
  #msg {
    margin-top: 10px;
    font-size: 13.5px;
    min-height: 20px;
    opacity: .75;
    text-align: center;
    max-width: 720px;
    line-height: 1.45;
  }
  #msg.bad { color: #ff8b8b; opacity: 1; }
  #msg.good { color: #9dffb0; opacity: 1; }
  #btnSon, #btnPleinEcran {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 38px;
    padding: 0;
    background: linear-gradient(135deg, var(--biome-doux), rgba(255,255,255,.055));
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 12px;
    color: #fff;
    cursor: pointer;
    transition: background .15s;
    flex: 0 0 auto;
  }
  #btnSon:hover, #btnPleinEcran:hover { background: rgba(255,255,255,.18); }
  /* Icônes SVG : un emoji 🔊/🔇 s'affiche en monochrome voire en carré
     vide selon les systèmes — ici le rendu est identique partout */
  #btnSon svg, #btnPleinEcran svg { width: 21px; height: 21px; display: block; }
  #btnSon .icSonOff { display: none; }
  #btnSon.coupe .icSonOn { display: none; }
  #btnSon.coupe .icSonOff { display: block; }
  /* Plein écran : coins qui s'écartent, puis qui se rapprochent */
  #btnPleinEcran .icQuitterEcran { display: none; }
  #btnPleinEcran.actif .icPleinEcran { display: none; }
  #btnPleinEcran.actif .icQuitterEcran { display: block; }

  /* ---------- Boutons tactiles ---------- */
  #controles {
    display: flex;
    justify-content: space-between;
    width: 100%;
    max-width: 860px;
    margin-top: 14px;
    padding: 0 10px;
    gap: 12px;
  }
  .btnTactile {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    max-width: 140px;
    height: 76px;
    background: linear-gradient(#4a4a66, #33334a);
    border: 2px solid rgba(255,255,255,.25);
    border-radius: 20px;
    color: #fff;
    box-shadow: 0 6px 0 #1c1c2b, 0 10px 20px rgba(0,0,0,.4);
    cursor: pointer;
    touch-action: none;
    transition: transform .06s, box-shadow .06s;
  }
  .btnTactile svg { width: 38px; height: 38px; display: block; }
  .btnTactile.appuye {
    transform: translateY(5px);
    box-shadow: 0 1px 0 #1c1c2b, 0 4px 10px rgba(0,0,0,.4);
    background: linear-gradient(#5a5a7a, #44445e);
  }
  /* ---------- Bouton bonus : vide → chargement → prêt ---------- */
  .btnBonus {
    color: #9b9277;
    opacity: .68;
    cursor: default;
    background: linear-gradient(#414154, #2c2c3d);
  }
  .btnBonus:disabled { cursor: default; }
  .btnBonus .bonus-visuel { width: 44px; height: 44px; overflow: visible; }
  .btnBonus .jauge-fond, .btnBonus .jauge-valeur {
    fill: none;
    stroke-width: 2.6;
    transform: rotate(-90deg);
    transform-origin: 24px 24px;
  }
  .btnBonus .jauge-fond { stroke: rgba(255,255,255,.13); }
  .btnBonus .jauge-valeur {
    stroke: var(--or);
    stroke-linecap: round;
    stroke-dasharray: 100;
    stroke-dashoffset: 100;
    transition: stroke-dashoffset .25s ease-out;
  }
  .btnBonus .bonus-etoile { fill: currentColor; }
  .btnBonus.charge { opacity: 1; color: #e4c774; }
  .btnBonus.pret {
    opacity: 1;
    color: #fff4bf;
    background: linear-gradient(#ff9d3c, #d35c08);
    border-color: rgba(255,230,160,.9);
    animation: pulseBonus .8s infinite alternate;
  }
  .btnBonus.pret .jauge-valeur { stroke: #fff7cf; stroke-dashoffset: 0 !important; }
  .btnBonus.rage { opacity: 1; color: #ff9b72; border-color: rgba(255,130,90,.65); }
  .btnBonus.rage .jauge-valeur { stroke: #ff7657; }
  @keyframes pulseBonus {
    from { box-shadow: 0 6px 0 #7a3d08, 0 0 12px rgba(255,180,60,.45); }
    to   { box-shadow: 0 6px 0 #7a3d08, 0 0 34px rgba(255,205,90,.95); }
  }
  @media (hover: none) {
    #controles { padding: 0 4px; }
    .btnTactile { max-width: none; }
  }
  /* Souris : ces boutons servent au clavier, on les allège visuellement */
  @media (hover: hover) and (pointer: fine) {
    #controles { margin-top: 10px; }
    .btnTactile { height: 58px; max-width: 118px; border-radius: 16px; }
    .btnTactile svg { width: 30px; height: 30px; }
    .btnBonus .bonus-visuel { width: 38px; height: 38px; }
  }

  /* ---------- Écran d'accueil ---------- */
  #accueil {
    position: fixed;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 18px;
    text-align: center;
    background:
      radial-gradient(circle at 50% 18%, rgba(255,209,102,.12), transparent 32%),
      radial-gradient(circle at 50% 35%, #30304a, #14141e 75%);
    z-index: 100;
    padding: 20px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
  }
  /* Barre de scroll discrète sur les écrans plein page */
  #accueil, #overlayFin {
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,.22) transparent;
  }
  #accueil::-webkit-scrollbar, #overlayFin::-webkit-scrollbar { width: 8px; }
  #accueil::-webkit-scrollbar-thumb, #overlayFin::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,.22);
    border-radius: 8px;
  }
  #accueil::-webkit-scrollbar-track, #overlayFin::-webkit-scrollbar-track {
    background: transparent;
  }
  .hero-accueil {
    width: clamp(180px, 30vw, 250px);
    margin: -8px 0 -20px;
    filter: drop-shadow(0 14px 20px rgba(0,0,0,.3));
    animation: heroFlotte 3.8s ease-in-out infinite;
  }
  .hero-accueil svg { display: block; width: 100%; height: auto; }
  @keyframes heroFlotte { 50% { transform: translateY(-6px) rotate(1deg); } }
  #accueil .titre {
    font-size: clamp(25px, 6vw, 46px);
    line-height: .98;
    margin: 0;
  }
  #accueil .titre span { color: #ffd166; }
  #accueil .sous-titre {
    font-size: 16px;
    opacity: .82;
    max-width: 540px;
    line-height: 1.5;
    margin: 0;
  }
  #accueil .regles {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    width: min(100%, 620px);
  }
  #accueil .regles .carte {
    font-size: 13px;
    line-height: 1.35;
    padding: 13px 12px;
    min-width: 0;
    flex-direction: column;
    justify-content: flex-start;
    gap: 4px;
    white-space: normal;
    overflow-wrap: break-word;
    border-radius: 16px;
  }
  #accueil .regles strong { font-family: 'Baloo 2', sans-serif; font-size: 19px; color: #fff; }
  #accueil .regles span { opacity: .75; }
  #accueil .regle-icone { width: 32px; height: 32px; color: #e88b5e; margin-bottom: 3px; }
  #accueil .regle-icone.danger { color: #ff7b93; }
  #accueil .regle-icone.bonus { color: var(--or); }
  .aide-controles { margin: -5px 0 0; font-size: 13px; opacity: .65; }
  #btnJouer {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-size: 26px;
    font-weight: 700;
    letter-spacing: 1px;
    padding: 16px 58px;
    border-radius: 30px;
    border: none;
    color: #3a2410;
    background: linear-gradient(180deg, #ffd166, #f4a93c);
    box-shadow: 0 8px 0 #a86a14, 0 16px 30px rgba(0,0,0,.45);
    cursor: pointer;
    transition: transform .08s, box-shadow .08s;
  }
  #btnJouer:hover { filter: brightness(1.06); }
  #btnJouer:active {
    transform: translateY(6px);
    box-shadow: 0 2px 0 #a86a14, 0 8px 16px rgba(0,0,0,.45);
  }
  @media (hover: none) {
    #btnJouer { min-height: 70px; width: 100%; max-width: 380px; }
  }

  /* ---------- Classement sur l'accueil ---------- */
  #classementAccueil {
    flex: 0 0 auto; /* ne pas écraser le tableau pour remplir l'écran : les 20 lignes doivent faire défiler la page */
    width: 100%;
    max-width: 500px;
    margin: 0 0 20px;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 14px;
    background: rgba(255,255,255,.035);
    overflow: hidden;
  }
  #classementAccueil summary {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 16px;
    color: var(--biome);
    font-family: 'Baloo 2', sans-serif;
    font-size: 17px;
    cursor: pointer;
    list-style: none;
  }
  #classementAccueil summary::-webkit-details-marker { display: none; }
  #classementAccueil summary::after { content: '+'; margin-left: auto; opacity: .55; }
  #classementAccueil summary::before { content: ''; margin-left: auto; }
  #classementAccueil[open] summary::after { content: '−'; }
  #classementAccueil[open] summary { border-bottom: 1px solid rgba(255,255,255,.08); }
  #tableauScoresAccueil {
    width: 100%;
    border-collapse: collapse;
    font-size: 15px;
  }
  #tableauScoresAccueil th {
    padding: 6px 10px;
    border-bottom: 2px solid rgba(255,255,255,.2);
    color: #ffd166;
    text-align: left;
  }
  #tableauScoresAccueil td {
    padding: 5px 10px;
    border-bottom: 1px solid rgba(255,255,255,.07);
  }
  #tableauScoresAccueil tr:nth-child(1) td { color: #ffd166; font-weight: 700; }
  #tableauScoresAccueil tr:nth-child(2) td { color: #c0c0c0; font-weight: 600; }
  #tableauScoresAccueil tr:nth-child(3) td { color: #cd7f32; font-weight: 600; }
  #tableauScoresAccueil .rang { width: 36px; text-align: center; opacity: .7; }
  #tableauScoresAccueil .pts  { text-align: right; font-weight: 700; color: #ffd166; }

  /* ---------- Overlay Game Over + Classement ---------- */
  #overlayFin {
    position: fixed;
    inset: 0;
    display: none;
    flex-direction: column;
    align-items: center;
    /* pas "center" : quand le contenu dépasse l'écran (Top 20 sur mobile),
       le centrage flex rend le haut inaccessible au scroll */
    justify-content: flex-start;
    gap: 16px;
    text-align: center;
    background: rgba(10,10,25,.9);
    /* Floute le jeu derrière l'overlay : net, et ça masque les coins
       arrondis du canvas qui transparaissaient */
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    z-index: 200;
    padding: 20px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  /* Espacements élastiques : centrent le contenu quand il y a de la place,
     et se réduisent à 0 sinon, pour que tout reste scrollable */
  #overlayFin::before,
  #overlayFin::after { content: ''; flex: 1 0 auto; }
  #overlayFin.visible { display: flex; }
  #overlayFin h2 {
    margin: 0;
    font-size: clamp(28px, 6vw, 48px);
    background: linear-gradient(90deg, #ef476f, #ffd166, #ef476f);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
  .carte-fin {
    position: relative;
    width: min(100%, 500px);
    padding: 20px 24px 16px;
    border: 1px solid rgba(255,209,102,.22);
    border-radius: 22px;
    background: linear-gradient(145deg, rgba(255,209,102,.09), rgba(255,255,255,.035));
    box-shadow: 0 18px 50px rgba(0,0,0,.28);
  }
  .carte-fin .sur-titre { font-size: 11px; letter-spacing: 3px; opacity: .55; }
  #overlayFin .scoreFinal {
    font-size: 26px;
    color: #ffd166;
    margin: 3px 0 0;
  }
  #meilleurScore { margin: 0; font-size: 14px; opacity: .68; }
  #badgeRecord {
    display: none;
    margin: 8px auto -4px;
    width: max-content;
    padding: 4px 12px;
    border-radius: 20px;
    background: #ffd166;
    color: #4b2c0c;
    font-family: 'Baloo 2', sans-serif;
    font-weight: 800;
    letter-spacing: 1px;
  }
  #overlayFin.record #badgeRecord { display: block; animation: popRecord .65s ease-out both; }
  @keyframes popRecord { 0% { transform: scale(.3) rotate(-8deg); } 65% { transform: scale(1.12) rotate(2deg); } 100% { transform: scale(1); } }
  #confettisRecord { position: fixed; inset: 0; overflow: hidden; pointer-events: none; }
  .confetti {
    position: absolute;
    top: -20px;
    width: 9px;
    height: 16px;
    border-radius: 2px;
    animation: tomberConfetti 2.8s ease-in forwards;
  }
  @keyframes tomberConfetti { to { transform: translate3d(35px, 105vh, 0) rotate(620deg); opacity: .1; } }
  #saisieNom {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin-top: 6px;
  }
  #saisieNom input {
    font-size: 18px;
    padding: 10px 16px;
    border-radius: 12px;
    border: 2px solid rgba(255,255,255,.25);
    background: rgba(255,255,255,.1);
    color: #fff;
    width: 220px;
    text-align: center;
    outline: none;
    transition: border-color .2s;
  }
  #saisieNom input:focus { border-color: #ffd166; }
  #saisieNom input::placeholder { color: rgba(255,255,255,.4); }
  #btnSauvegarder {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    font-size: 18px;
    font-weight: 700;
    padding: 10px 30px;
    border-radius: 20px;
    border: none;
    color: #3a2410;
    background: linear-gradient(180deg, #ffd166, #f4a93c);
    box-shadow: 0 4px 0 #a86a14, 0 8px 16px rgba(0,0,0,.35);
    cursor: pointer;
    transition: transform .08s, box-shadow .08s;
  }
  #btnSauvegarder:active {
    transform: translateY(4px);
    box-shadow: 0 1px 0 #a86a14, 0 4px 8px rgba(0,0,0,.35);
  }
  #btnSauvegarder:disabled { opacity: .5; cursor: default; }
  #classement {
    width: 100%;
    max-width: 500px;
    margin-top: 10px;
  }
  #classement h3 {
    margin: 0 0 8px;
    font-size: 20px;
    color: #06d6a0;
  }
  #tableauScores {
    width: 100%;
    border-collapse: collapse;
    font-size: 15px;
  }
  #tableauScores th {
    padding: 6px 10px;
    border-bottom: 2px solid rgba(255,255,255,.2);
    color: #ffd166;
    text-align: left;
  }
  #tableauScores td {
    padding: 5px 10px;
    border-bottom: 1px solid rgba(255,255,255,.07);
  }
  #tableauScores tr:nth-child(1) td { color: #ffd166; font-weight: 700; }
  #tableauScores tr:nth-child(2) td { color: #c0c0c0; font-weight: 600; }
  #tableauScores tr:nth-child(3) td { color: #cd7f32; font-weight: 600; }
  #tableauScores .rang { width: 36px; text-align: center; opacity: .7; }
  #tableauScores .pts  { text-align: right; font-weight: 700; color: #ffd166; }

  /* Rang en pastille colorée : podium or / argent / bronze */
  .medaille {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 26px;
    height: 26px;
    padding: 0 5px;
    border-radius: 13px;
    background: rgba(255,255,255,.08);
    font-size: 13px;
    font-weight: 700;
    opacity: 1;
  }
  tr:nth-child(1) .medaille { background: rgba(255,209,102,.3); color: #ffd166; }
  tr:nth-child(2) .medaille { background: rgba(200,205,215,.24); color: #d8dce6; }
  tr:nth-child(3) .medaille { background: rgba(205,127,50,.28); color: #e8a878; }
  #overlayFin.visible tr:nth-child(-n+3) .medaille { animation: arriveeMedaille .45s ease-out both; }
  #overlayFin.visible tr:nth-child(2) .medaille { animation-delay: .08s; }
  #overlayFin.visible tr:nth-child(3) .medaille { animation-delay: .16s; }
  @keyframes arriveeMedaille { from { transform: scale(.25) rotate(-18deg); opacity: 0; } to { transform: scale(1) rotate(0); opacity: 1; } }
  #tableauScores tr:nth-child(-n+3) td, #tableauScoresAccueil tr:nth-child(-n+3) td { padding-top: 8px; padding-bottom: 8px; }
  .chargement { opacity: .5; text-align: center; }
  /* Ligne du joueur qui vient d'enregistrer son score */
  #tableauScores tr.moi td, #tableauScoresAccueil tr.moi td {
    background: rgba(6,214,160,.16);
  }
  #tableauScores tr.moi td:first-child, #tableauScoresAccueil tr.moi td:first-child {
    box-shadow: inset 3px 0 0 #06d6a0;
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
  }
  #btnRejouer {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    font-size: 22px;
    font-weight: 700;
    padding: 14px 48px;
    border-radius: 26px;
    border: none;
    color: #3a2410;
    background: linear-gradient(180deg, #06d6a0, #04b88a);
    box-shadow: 0 6px 0 #027a5a, 0 12px 24px rgba(0,0,0,.35);
    cursor: pointer;
    margin-top: 8px;
    transition: transform .08s, box-shadow .08s;
  }
  #btnRejouer:active {
    transform: translateY(5px);
    box-shadow: 0 1px 0 #027a5a, 0 6px 12px rgba(0,0,0,.35);
  }
  #msgSauvegarde {
    font-size: 14px;
    min-height: 20px;
    opacity: .8;
  }
  #msgSauvegarde.ok   { color: #9dffb0; }
  #msgSauvegarde.err  { color: #ff8b8b; }

  /* ---------- Écran de transition entre niveaux ---------- */
  #transitionNiveau {
    position: fixed;
    inset: 0;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    text-align: center;
    z-index: 150;
    padding: 20px;
    overflow: hidden;
  }
  #transitionNiveau.visible { display: flex; animation: fonduTransition .45s ease-out both; }
  @keyframes fonduTransition { from { opacity: 0; } to { opacity: 1; } }
  #zoneJeu.arrivee-biome canvas { animation: arriveeBiome .75s ease-out both; }
  @keyframes arriveeBiome { from { opacity: .15; filter: brightness(1.8) saturate(.4); transform: scale(.985); } to { opacity: 1; filter: none; transform: scale(1); } }
  .silhouettes-biome { position: absolute; inset: auto 0 0; height: 30%; display: flex; align-items: flex-end; justify-content: space-around; opacity: .16; overflow: hidden; }
  .silhouettes-biome span { display: block; width: 20%; height: 70%; background: #160f18; clip-path: polygon(50% 0, 67% 38%, 62% 38%, 83% 73%, 57% 73%, 57% 100%, 43% 100%, 43% 73%, 17% 73%, 38% 38%, 33% 38%); }
  .silhouettes-biome span:nth-child(even) { height: 100%; transform: scaleX(.8); }
  #transitionNiveau.desert .silhouettes-biome span { height: 45%; clip-path: polygon(0 100%, 22% 58%, 42% 74%, 65% 28%, 100% 100%); }
  #transitionNiveau.desert .silhouettes-biome span:nth-child(even) { height: 65%; }
  #transitionNiveau.desert {
    background: radial-gradient(circle at 50% 40%, #e8a84c, #c47420 50%, #6b3410 90%);
  }
  #transitionNiveau.foret {
    background: radial-gradient(circle at 50% 40%, #8ed162, #2e7d32 52%, #14451c 92%);
  }
  /* Étincelles décoratives : écran riche, comme le jeu */
  #transitionNiveau .etincelle {
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255,238,190,.9);
    box-shadow: 0 0 14px rgba(255,220,150,.95);
    pointer-events: none;
    animation: scintiller 2.6s ease-in-out infinite;
  }
  @keyframes scintiller {
    0%, 100% { opacity: 0; transform: scale(.4) translateY(12px); }
    50% { opacity: 1; transform: scale(1) translateY(-16px); }
  }
  #transitionNiveau h2 {
    margin: 0;
    font-size: clamp(28px, 6vw, 48px);
    color: #fff;
    text-shadow: 0 4px 12px rgba(0,0,0,.5), 0 8px 30px rgba(0,0,0,.35);
  }
  #transitionNiveau p {
    font-size: clamp(16px, 3vw, 22px);
    color: rgba(255,255,255,.9);
    max-width: 500px;
    line-height: 1.5;
    margin: 0;
    text-shadow: 0 2px 10px rgba(0,0,0,.35);
  }
  #transitionNiveau .compteur {
    font-size: clamp(56px, 11vw, 92px);
    font-weight: 900;
    color: #ffd166;
    text-shadow: 0 6px 0 rgba(0,0,0,.35), 0 0 46px rgba(255,205,110,.75);
    animation: pulseCompteur .6s infinite alternate;
  }
  @keyframes pulseCompteur {
    from { transform: scale(1); }
    to   { transform: scale(1.15); }
  }
  #transitionNiveau .trans-illustration {
    width: clamp(76px, 13vw, 112px);
    color: #fff0c2;
    filter: drop-shadow(0 8px 14px rgba(0,0,0,.3));
    animation: flotter 2.6s ease-in-out infinite;
    z-index: 1;
  }
  #transitionNiveau .trans-illustration svg { display: block; width: 100%; height: auto; }
  #transitionNiveau h2, #transitionNiveau p, #transitionNiveau .compteur { z-index: 1; }
  @keyframes flotter {
    0%, 100% { transform: translateY(0) rotate(-3deg); }
    50% { transform: translateY(-12px) rotate(3deg); }
  }

  /* ---------- Plein écran / paysage : tout l'espace pour le jeu ----------
     La classe « jeu-agrandi » est posée par jeu.js en plein écran, ou
     quand un petit écran est déjà tenu en paysage. Titre et cartes se
     font compacts, le canvas occupe la hauteur disponible et les
     commandes passent aux angles pour ne rien lui voler. */
  body.jeu-agrandi {
    padding: 6px 8px;
    justify-content: flex-start;
    overflow: hidden;
  }
  body.jeu-agrandi #titreJeu { display: none; }
  body.jeu-agrandi #hud { margin-bottom: 4px; gap: 6px; }
  body.jeu-agrandi .carte { padding: 3px 9px; font-size: 12px; border-radius: 9px; }
  body.jeu-agrandi .carte .val { font-size: 14px; }
  body.jeu-agrandi .carteScore { padding: 4px 12px; font-size: 13px; }
  body.jeu-agrandi .carteScore .val { font-size: 19px; min-width: 26px; }
  body.jeu-agrandi #vies svg { width: 15px; height: 15px; }
  body.jeu-agrandi #btnSon, body.jeu-agrandi #btnPleinEcran { width: 34px; height: 30px; }
  body.jeu-agrandi #btnSon svg, body.jeu-agrandi #btnPleinEcran svg { width: 18px; height: 18px; }
  /* Le canvas prend la hauteur disponible, sans déformer sa proportion
     (860×520 = 43/26). dvh tient compte de la barre du navigateur mobile,
     vh reste le repli pour les navigateurs qui ne connaissent pas dvh. */
  body.jeu-agrandi #zoneJeu {
    max-width: 1200px;
    width: min(100%, calc((100vh - 92px) * 43 / 26));
    width: min(100%, calc((100dvh - 92px) * 43 / 26));
  }
  body.jeu-agrandi #msg {
    margin-top: 4px;
    font-size: 11px;
    min-height: 14px;
    line-height: 1.25;
    max-width: none;
  }

  /* En paysage, les commandes passent aux angles : elles ne prennent
     aucune hauteur, grosses à la main, et le canvas leur laisse la place
     en largeur pour ne jamais les recouvrir */
  @media (orientation: landscape) {
    body.jeu-agrandi #zoneJeu {
      width: min(100% - 210px, calc((100vh - 92px) * 43 / 26));
      width: min(100% - 210px, calc((100dvh - 92px) * 43 / 26));
    }
    body.jeu-agrandi #msg { padding: 0 clamp(88px, 13vw, 120px); }
    body.jeu-agrandi #controles {
      position: fixed;
      left: 0; right: 0; bottom: 6px;
      margin: 0;
      padding: 0 8px;
      gap: 8px;
    }
    body.jeu-agrandi .btnTactile {
      /* flex: 0 0 auto : sans ça, le flex: 1 des boutons les fait gonfler */
      flex: 0 0 auto;
      width: clamp(66px, 11vw, 96px);
      height: clamp(56px, 17vh, 84px);
      max-width: none;
      border-radius: 18px;
    }
    body.jeu-agrandi .btnTactile svg { width: clamp(30px, 5.5vw, 48px); height: clamp(30px, 5.5vw, 48px); }
    body.jeu-agrandi .btnBonus svg { width: clamp(28px, 5vw, 44px); height: clamp(28px, 5vw, 44px); }
    /* Le bonus s'empile au-dessus du bouton gauche : le centre reste libre */
    body.jeu-agrandi #btnBonus {
      position: absolute;
      left: 8px;
      bottom: calc(clamp(56px, 17vh, 84px) + 12px);
    }
  }

  /* ---------- Bandeau « tourne ton téléphone » ---------- */
  #conseilRotation {
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    /* max-content : sans ça, le positionnement à 50% étrangle le texte */
    width: max-content;
    max-width: calc(100% - 16px);
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    background: rgba(18,18,32,.88);
    border: 1px solid rgba(255,255,255,.2);
    border-radius: 12px;
    box-shadow: 0 6px 18px rgba(0,0,0,.4);
    font-size: 12.5px;
    line-height: 1.25;
    z-index: 5;
  }
  #conseilRotation[hidden] { display: none; }
  #conseilRotation .icTelephone {
    width: 20px; height: 20px;
    flex: 0 0 auto;
    animation: pivoterTelephone 2.4s ease-in-out infinite;
  }
  @keyframes pivoterTelephone {
    0%, 30% { transform: rotate(0deg); }
    65%, 100% { transform: rotate(-90deg); }
  }
  #btnConseilPleinEcran {
    flex: 0 0 auto;
    padding: 5px 10px;
    border: none;
    border-radius: 9px;
    background: linear-gradient(180deg, #ffd166, #f4a93c);
    color: #3a2410;
    font-family: 'Baloo 2', 'Trebuchet MS', sans-serif;
    font-weight: 700;
    font-size: 12px;
    cursor: pointer;
    white-space: nowrap;
  }
  #btnFermerConseil {
    flex: 0 0 auto;
    width: 24px; height: 24px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(255,255,255,.12);
    color: #fff;
    font-size: 13px;
    line-height: 1;
    cursor: pointer;
  }

  /* Transitions sur natel en paysage : la colonne dépassait de l'écran et
     overflow:hidden coupait l'illustration et le compte à rebours. */
  @media (orientation: landscape) and (max-height: 620px) {
    #transitionNiveau.visible {
      display: grid;
      grid-template-columns: auto minmax(0, 1fr) auto;
      grid-template-rows: auto auto;
      align-items: center;
      align-content: safe center;
      gap: 4px 12px;
      /* Les encoches latérales ne doivent couvrir ni l'icône ni le compteur. */
      padding: max(8px, env(safe-area-inset-top)) max(18px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left));
      text-align: center;
      overflow-x: hidden;
      overflow-y: auto; /* repli sur les très petites hauteurs : plus rien n'est masqué */
      -webkit-text-size-adjust: 100%;
      text-size-adjust: 100%;
    }
    #transitionNiveau .trans-illustration {
      grid-column: 1;
      grid-row: 1 / 3;
      width: clamp(40px, 11vh, 56px);
    }
    #transitionNiveau h2 {
      grid-column: 2;
      grid-row: 1;
      max-width: 100%;
      font-size: clamp(18px, 6vh, 28px);
      line-height: 1;
    }
    #transitionNiveau p {
      grid-column: 2;
      grid-row: 2;
      max-width: 520px;
      font-size: clamp(11px, 3.3vh, 15px);
      line-height: 1.18;
      overflow-wrap: break-word;
    }
    #transitionNiveau .compteur {
      grid-column: 3;
      grid-row: 1 / 3;
      font-size: clamp(38px, 14vh, 60px);
      line-height: 1;
    }
    .silhouettes-biome { height: 20%; }
  }

  @media (max-width: 600px) {
    #accueil { gap: 14px; padding: 14px; }
    .hero-accueil { width: 175px; margin-bottom: -18px; }
    #accueil .regles { gap: 7px; }
    #accueil .regles .carte { padding: 10px 7px; font-size: 11.5px; }
    #accueil .regles strong { font-size: 17px; }
    #accueil .regle-icone { width: 27px; height: 27px; }
    .aide-controles { max-width: 330px; }
    #titreJeu { font-size: 20px; gap: 6px; }
    #titreJeu .titre-icone { display: none; }
    #overlayFin.visible { padding-bottom: 100px; }
    #overlayFin #btnRejouer {
      position: fixed;
      z-index: 3;
      bottom: max(12px, env(safe-area-inset-bottom));
      left: 50%;
      transform: translateX(-50%);
      width: min(calc(100% - 32px), 360px);
      margin: 0;
      box-shadow: 0 6px 0 #027a5a, 0 10px 30px rgba(0,0,0,.65);
    }
    #overlayFin #btnRejouer:active { transform: translate(-50%, 5px); }
    .carte-fin { padding: 16px; }
  }

  /* Respect des préférences système : on coupe les animations décoratives */
  @media (prefers-reduced-motion: reduce) {
    #btnJouer, #btnSauvegarder, #btnRejouer, .btnTactile, #btnSon, #btnPleinEcran, .carte,
    #saisieNom input { transition: none; }
    .btnBonus.pret, .carteScore .val.pop,
    #transitionNiveau .compteur, #transitionNiveau .trans-illustration,
    #transitionNiveau .etincelle, #conseilRotation .icTelephone,
    .hero-accueil, #zoneJeu.arrivee-biome canvas, .confetti,
    #overlayFin.visible tr:nth-child(-n+3) .medaille, #badgeRecord { animation: none !important; }
    .btnBonus .jauge-valeur { transition: none; }
  }

  /* Pas de backdrop-filter (vieux Firefox, certains navigateurs mobiles) :
     fonds plus opaques pour garder un rendu net, sans flou logiciel */
  @supports not ((backdrop-filter: blur(6px)) or (-webkit-backdrop-filter: blur(6px))) {
    .carte { background: rgba(255,255,255,.13); }
    #overlayFin { background: rgba(10,10,25,.97); }
  }