/* ============================================================
   Fleur Kong — page de jeu (jeu.html)
   ============================================================ */

body.jeu{
  overflow:hidden;height:100vh;
  display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle at 50% 20%,#1c2740,#0b1018 75%);
  color:var(--creme-2);
}

#wrap{position:relative;width:100%;height:100%;max-width:660px;max-height:759px;aspect-ratio:20/23;}

canvas#game{
  display:block;width:100%;height:100%;
  border-radius:var(--radius);
  box-shadow:var(--ombre-forte), inset 0 0 0 1px rgba(255,255,255,.06);
  touch-action:none;background:#101826;
}

/* ---------- petit logo en haut du jeu ---------- */
.jeu-logo{
  position:absolute;top:14px;left:50%;transform:translateX(-50%);
  z-index:5;pointer-events:none;opacity:.9;
}
.jeu-logo .df-logo-img{height:20px;}

/* ---------- Overlays (accueil, inscription, fin) ---------- */
.overlay{
  position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;
  padding:30px;gap:16px;border-radius:var(--radius);
  background:radial-gradient(circle at 50% 35%,rgba(28,39,64,.93),rgba(11,16,24,.96));
  backdrop-filter:blur(4px);z-index:10;
}
.overlay.hidden{display:none!important;}

.overlay .kicker{font-family:'Caveat',cursive;font-size:clamp(20px,4vw,30px);color:var(--rose);}
.overlay h1{
  font-weight:800;font-size:clamp(34px,9vw,64px);line-height:.95;letter-spacing:-1px;
  background:linear-gradient(180deg,var(--or-doux),#e8894f);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 4px 14px rgba(232,137,79,.35));
}
.overlay .tag{max-width:440px;font-weight:600;font-size:clamp(12px,2.3vw,15px);line-height:1.6;color:var(--gris-doux);}
.overlay .tag b{color:var(--or-doux);font-weight:700;}

.keys{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;font-size:11px;font-weight:600;color:#a9b6cf;}
.keys span{background:rgba(255,255,255,.07);padding:7px 13px;border-radius:10px;border:1px solid rgba(255,255,255,.08);}
.keys b{color:var(--or-doux);}

/* ---------- Formulaire d'inscription ---------- */
.form-inscription{display:flex;flex-direction:column;gap:12px;width:100%;max-width:340px;}
.form-inscription input{
  font-family:'Poppins';font-size:15px;font-weight:600;
  padding:14px 18px;border-radius:14px;border:2px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.06);color:#fff;outline:none;
  transition:border-color .15s;
}
.form-inscription input::placeholder{color:rgba(255,255,255,.4);}
.form-inscription input:focus{border-color:var(--rose);}
.form-inscription .rgpd{font-size:10px;color:#8794ad;line-height:1.5;text-align:left;display:flex;gap:8px;align-items:flex-start;}
.form-inscription .rgpd input{width:auto;flex:none;margin-top:2px;}
.form-erreur{color:var(--rose);font-size:12px;font-weight:600;min-height:16px;}

/* ---------- Barème rappel ---------- */
.bareme-mini{display:flex;flex-direction:column;gap:6px;font-size:12px;color:var(--gris-doux);width:100%;max-width:340px;}
.bareme-mini .ligne{display:flex;justify-content:space-between;background:rgba(255,255,255,.05);padding:8px 14px;border-radius:10px;}
.bareme-mini .ligne b{color:var(--or-doux);}

/* ---------- Écran de fin / bon gagné ---------- */
.bon-gagne{
  background:linear-gradient(160deg,var(--creme),#f0e6d2);
  color:var(--encre);border-radius:20px;padding:24px 28px;max-width:380px;width:100%;
  box-shadow:0 14px 40px rgba(0,0,0,.4);position:relative;overflow:hidden;
}
.bon-gagne::before{content:"";position:absolute;top:-30px;right:-30px;width:100px;height:100px;background:radial-gradient(circle,var(--rose),transparent 70%);opacity:.5;}
.bon-gagne .pourcent{font-weight:800;font-size:56px;line-height:1;color:var(--rose-fonce);}
.bon-gagne .pourcent span{font-size:28px;}
.bon-gagne .label{font-weight:700;font-size:16px;color:var(--vert-fonce);margin:4px 0 14px;}
.bon-gagne .code{
  font-family:'Poppins';font-weight:800;font-size:22px;letter-spacing:2px;
  background:#fff;border:2px dashed var(--rose);border-radius:12px;
  padding:12px;color:var(--encre-2);margin-bottom:8px;
}
.bon-gagne .code-info{font-size:11px;color:var(--encre);opacity:.6;}

.stat-fin{display:flex;gap:20px;justify-content:center;font-size:13px;color:var(--gris-doux);}
.stat-fin b{color:#fff;font-size:18px;display:block;}

/* ---------- Invitation ami ---------- */
.invitation{display:flex;flex-direction:column;gap:10px;width:100%;max-width:380px;}
.inv-titre{font-weight:700;font-size:14px;color:var(--or-doux);}
.inv-form{display:flex;gap:8px;}
.inv-form input{
  flex:1;font-family:'Poppins';font-size:14px;font-weight:600;
  padding:11px 14px;border-radius:12px;border:2px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.06);color:#fff;outline:none;transition:border-color .15s;
}
.inv-form input::placeholder{color:rgba(255,255,255,.35);}
.inv-form input:focus{border-color:var(--rose);}
.inv-msg{font-size:12px;font-weight:600;min-height:16px;text-align:left;}
.inv-msg.erreur{color:#ff7b7b;}
.inv-msg.succes{color:#7be8a0;}

/* ---------- Actions fin de partie ---------- */
.fin-actions{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;width:100%;max-width:380px;}
.fin-actions .btn{flex:1;min-width:140px;}

/* Bouton vert pour "Envoyer mon bon" */
.btn-vert{
  background:linear-gradient(135deg,#4f9a5a,#2e6e38);
  color:#fff;font-family:'Poppins';font-weight:700;font-size:15px;
  border:none;border-radius:40px;padding:14px 22px;cursor:pointer;
  transition:transform .1s,filter .1s;
}
.btn-vert:hover{transform:translateY(-2px);filter:brightness(1.1);}
.btn-vert:disabled{opacity:.6;cursor:default;transform:none;filter:none;}

.bon-msg{font-size:13px;font-weight:600;min-height:18px;text-align:center;}
.bon-msg.erreur{color:#ff7b7b;}
.bon-msg.succes{color:#7be8a0;}

/* ============================================================
   Boutons tactiles HTML (sous le canvas)
   ============================================================ */
#touch-pad {
  display: none; /* caché sur desktop */
  width: 100%;
  max-width: 660px;
  flex-shrink: 0;
  justify-content: space-between;
  align-items: center;
  padding: clamp(5px,1.5vw,10px) clamp(6px,2vw,12px);
  padding-bottom: max(clamp(6px,1.5vw,10px), env(safe-area-inset-bottom, 8px));
  background: rgba(10,16,26,.6);
}

.tp-side {
  display: flex;
  align-items: center;
  gap: clamp(4px, 1.2vw, 9px);
}

/* Bouton de base */
.tp-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(52px, 12vw, 74px);
  height: clamp(52px, 12vw, 74px);
  border-radius: 50%;
  background: rgba(20,30,50,.65);
  border: 2px solid rgba(255,255,255,.48);
  color: #f3ede3;
  font-family: 'Poppins', sans-serif;
  font-size: clamp(22px, 5vw, 32px);
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
  outline: none;
  transition: background .06s, border-color .06s, color .06s;
}

/* Boutons secondaires ▲ ▼ */
.tp-btn.tp-aux {
  width: clamp(42px, 9.5vw, 58px);
  height: clamp(42px, 9.5vw, 58px);
  font-size: clamp(18px, 4vw, 26px);
}

/* Bouton JUMP central */
.tp-btn.tp-jump {
  width: clamp(64px, 15vw, 90px);
  height: clamp(64px, 15vw, 90px);
  font-size: clamp(11px, 2.8vw, 15px);
  font-weight: 800;
  letter-spacing: .1em;
  color: #ffd98a;
  border: 2.5px solid rgba(255,195,70,.58);
  background: rgba(250,120,48,.28);
}

.tp-btn.active {
  background: rgba(250,122,48,.82);
  border-color: #ffd98a;
  color: #fff;
}

/* ============================================================
   Mobile — layout & overlays
   ============================================================ */
@media (pointer: coarse) {
  /* Masquer raccourcis clavier (inutiles sur mobile) */
  .keys { display: none; }

  /* Body en colonne : canvas au-dessus, touch-pad en bas */
  body.jeu {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100vh;
    height: 100dvh;
    padding-bottom: 0;
  }

  /* Le wrap se contente d'envelopper le canvas — JS fixe les dimensions */
  #wrap {
    width: 100%;
    height: auto;
    flex-shrink: 0;
  }

  /* Le canvas a ses dimensions fixées inline par JS (W×H) */
  canvas#game { display: block; }

  /* #touch-pad visibility entièrement contrôlée par JS (showPad/hidePad) */

  /* Overlays scrollables si contenu trop long */
  .overlay {
    padding: 16px 14px;
    gap: 8px;
    overflow-y: auto;
    justify-content: flex-start;
    padding-top: 18px;
  }
  .overlay h1 { font-size: clamp(22px,7vw,38px); }
  .overlay .tag { font-size: 12px; line-height: 1.4; }
  .bon-gagne { padding: 14px 16px; }
  .bon-gagne .pourcent { font-size: 42px; }
  .stat-fin { gap: 12px; }
  .stat-fin b { font-size: 16px; }
  .inv-titre { font-size: 13px; }
  .bareme-mini .ligne { padding: 6px 10px; font-size: 11px; }
  .fin-actions { gap: 8px; }
  .fin-actions .btn,
  .btn-vert { font-size: 13px; padding: 12px 14px; min-width: 120px; }
}

/* ============================================================
   Avertissement mode paysage sur mobile
   ============================================================ */
.landscape-hint {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(10,16,26,.97);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  text-align: center;
  padding: 40px;
  color: #f3ede3;
  font-family: 'Poppins', sans-serif;
}
.landscape-hint .lh-icon { font-size: 54px; line-height: 1; }
.landscape-hint p { font-size: 15px; line-height: 1.65; opacity: .85; max-width: 280px; margin: 0; }

@media (orientation: landscape) and (max-height: 500px) {
  .landscape-hint { display: flex; }
}