/* Ecran du jeu flappy. Les variables --fb-* sont posees par theme.js ; les
   valeurs ci-dessous sont celles du jeu d origine. Les couleurs de la marque
   (--accent, --fond, --couleur-texte, --police) viennent de l habillage. */
:root {
  --fb-bouton-fond: #111111; --fb-bouton-texte: #ffffff; --fb-hud-texte: #ffffff;
  --fb-voile: rgba(0, 0, 0, 0.78);
  --fb-oiseau-taille: 64px; --fb-oiseau-x: 18vw; --fb-oiseau-y: 40vh;
  --fb-tuyau-largeur: 15vw; --fb-tuyau-arrondi: 8px; --fb-tuyau-a: #2f8f2f; --fb-tuyau-b: #6ddd53; --fb-tuyau-bordure: #164d16;
  --fb-tuyau-haut: none; --fb-tuyau-bas: none;
}
.ecran-flappy { position: fixed; inset: 0; overflow: hidden; touch-action: manipulation; font-family: var(--police, Arial, Helvetica, sans-serif); background: #111; }
.ecran-flappy[hidden] { display: none; }
.fb-bandeau { position: fixed; top: 0; left: 0; right: 0; z-index: 200; padding: 6px 10px; background: #263d30; color: #d7f57b; font: 700 11px/1.3 Arial, sans-serif; letter-spacing: 1px; text-align: center; pointer-events: none; }
.fb-fond { position: fixed; inset: 0; width: 100vw; height: 100dvh; background: url('/assets/img/flappy/fond-1.jpg') center / cover no-repeat; z-index: 0; }
.fb-oiseau { position: fixed; width: min(var(--fb-oiseau-taille), 18vw); height: auto; top: var(--fb-oiseau-y); left: var(--fb-oiseau-x); object-fit: contain; z-index: 5; pointer-events: none; transform-origin: center; }
.fb-tuyau { position: fixed; width: clamp(52px, var(--fb-tuyau-largeur), 90px); height: 70vh; z-index: 4; background: linear-gradient(90deg, var(--fb-tuyau-a), var(--fb-tuyau-b), var(--fb-tuyau-a)); border: 3px solid var(--fb-tuyau-bordure); border-radius: var(--fb-tuyau-arrondi); }
.fb-tuyaux-images .fb-tuyau { background-size: cover; background-position: center; }
.fb-tuyaux-images .fb-tuyau-haut { background-image: var(--fb-tuyau-haut); }
.fb-tuyaux-images .fb-tuyau-bas { background-image: var(--fb-tuyau-bas); }
.fb-panneau { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); width: min(92vw, 440px); max-height: 94dvh; padding: 22px 18px; background: var(--fond, #ffffff); color: var(--couleur-texte, #111111); border-radius: 22px; text-align: center; overflow-y: auto; z-index: 30; box-shadow: 0 12px 40px rgba(0, 0, 0, .3); }
.fb-logo { display: block; width: min(65%, 180px); max-height: 85px; object-fit: contain; margin: 0 auto 12px; }
.fb-titre { font-size: clamp(30px, 9vw, 48px); font-weight: 900; line-height: 1; margin-bottom: 10px; }
.fb-sous-titre { font-size: clamp(15px, 4vw, 18px); font-weight: 600; margin-bottom: 18px; }
.fb-champs { display: flex; flex-direction: column; gap: 10px; }
.fb-champs input, .fb-champs select { display: block; width: 100%; min-height: 48px; padding: 12px 14px; border: 1px solid #ccc; border-radius: 12px; background: #fff; color: #111; font: inherit; font-size: 16px; outline: none; }
.fb-champs input:focus, .fb-champs select:focus { border-color: #111; }
.fb-consentement { display: flex; align-items: flex-start; gap: 9px; margin-top: 10px; text-align: left; font-size: 12px; line-height: 1.35; }
.fb-consentement input { flex: 0 0 auto; width: 18px; height: 18px; margin: 1px 0 0; }
.fb-erreur { margin: 10px 0 0; font-size: 13px; color: #b3261e; }
.fb-bouton { display: block; width: 100%; min-height: 54px; margin-top: 16px; padding: 12px 20px; border: none; border-radius: 14px; background: var(--fb-bouton-fond); color: var(--fb-bouton-texte); font: inherit; font-size: 19px; font-weight: 900; cursor: pointer; text-decoration: none; text-align: center; }
.fb-bouton:active { transform: scale(.98); }
.fb-info { margin: 12px 0 0; font-size: 12px; opacity: .6; }
.fb-hud { position: fixed; top: 18px; left: 50%; transform: translateX(-50%); width: 94vw; text-align: center; color: var(--fb-hud-texte); z-index: 15; pointer-events: none; text-shadow: 0 3px 7px rgba(0, 0, 0, .65); }
.fb-hud[hidden] { display: none; }
.fb-hud-manche { display: block; font-size: clamp(18px, 5vw, 28px); font-weight: 900; }
.fb-hud-score { display: block; margin-top: 3px; font-size: clamp(44px, 13vw, 78px); font-weight: 900; line-height: 1; }
.fb-rebours { position: fixed; inset: 0; z-index: 40; background: rgba(0, 0, 0, .35); color: #fff; text-align: center; pointer-events: none; }
.fb-rebours[hidden] { display: none; }
.fb-rebours-panneau { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: min(92vw, 420px); padding: 12px; border-radius: 22px; background: rgba(0, 0, 0, .75); }
.fb-rebours-panneau p { margin: 10px 0; font-size: 18px; line-height: 1.4; }
.fb-rebours-panneau small { font-size: 13px; }
#fb-rebours-valeur { display: block; color: var(--accent, #ffdc65); font-size: clamp(64px, 15vh, 100px); line-height: 1; }
.fb-fin { position: fixed; top: 45%; left: 50%; transform: translate(-50%, -50%); width: 90vw; text-align: center; color: #fff; font-size: clamp(28px, 8vw, 44px); font-weight: 900; line-height: 1.2; z-index: 40; text-shadow: 0 3px 10px rgba(0, 0, 0, .75); pointer-events: none; }
.fb-fin[hidden] { display: none; }
.fb-rejouer { position: fixed; top: 58%; left: 50%; transform: translate(-50%, -50%); width: min(82vw, 340px); min-height: 60px; margin: 0; font-size: 20px; z-index: 100; box-shadow: 0 6px 20px rgba(0, 0, 0, .3); }
.fb-rejouer[hidden] { display: none; }
.fb-rejouer:active { transform: translate(-50%, -50%) scale(.96); }
.fb-classement { position: fixed; inset: 0; z-index: 50; overflow-y: auto; padding: max(24px, env(safe-area-inset-top)) 16px max(24px, env(safe-area-inset-bottom)); background: var(--fb-voile); color: #fff; text-align: center; }
.fb-classement[hidden] { display: none; }
.fb-classement h1 { margin: 12px 0; font-size: clamp(24px, 7vw, 38px); }
.fb-meilleur { margin: 16px 0; color: var(--accent, #ffdc65); font-size: 24px; font-weight: 900; }
.fb-rang { margin: -6px 0 12px; font-weight: 700; }
.fb-legende, #fb-classement-etat { line-height: 1.5; }
.fb-liste { list-style: none; display: block; width: min(100%, 420px); margin: 18px auto 0; padding: 14px 18px; border-radius: 15px; background: rgba(0, 0, 0, .62); font-size: clamp(14px, 4vw, 19px); line-height: 1.7; text-align: left; overflow-wrap: anywhere; }
#fb-classement-reessayer, .fb-cta { display: inline-block; width: auto; min-height: 52px; padding: 14px 24px; background: var(--accent, #ffdc65); color: #111; font-size: 18px; }
.fb-cta[hidden], #fb-classement-reessayer[hidden] { display: none; }
@media (max-width: 480px) { .fb-panneau { width: 94vw; padding: 18px 15px; border-radius: 18px; } .fb-titre { font-size: 34px; } }
@media (max-height: 700px) { .fb-panneau { max-height: 96dvh; padding-top: 14px; padding-bottom: 14px; } .fb-titre { font-size: 29px; } .fb-champs { gap: 7px; } .fb-champs input, .fb-champs select { min-height: 42px; padding-top: 9px; padding-bottom: 9px; } .fb-bouton { margin-top: 10px; } }