/* ============================================================
   RAFALE — feed solo plein écran (moteur rafale.js).
   Sombre immersif, briques brutalist HOMIES, offline-safe
   (emojis unicode, aucune ressource externe).
   ============================================================ */
#sec-rafale {
  --ink:#0A0A0A; --paper:#FFFEF7; --magenta:#FF2E93; --yellow:#FFD600;
  --green:#5BE885; --red:#FF5252; --cyan:#5BD8E5; --purple:#9D4EDD;
  --teal:#4ECDC4; --blue:#4D7CFF; --orange:#FF9F45; --pink:#FF80AB;
  --fd:'Anton',sans-serif; --fm:'IBM Plex Mono',monospace;
}
/* overlay plein écran au-dessus de la nav */
#sec-rafale.sec { position:fixed; inset:0; z-index:2000; display:none; padding:0; margin:0; max-width:none; }
#sec-rafale.sec.active { display:block; }
#sec-rafale .rf-stage { position:absolute; inset:0; overflow:hidden;
  background:radial-gradient(130% 70% at 50% -5%, #3a1670, #16092e 60%, #0a0518); }

.rf-close { position:absolute; top:calc(10px + env(safe-area-inset-top)); left:12px; z-index:30;
  width:40px; height:40px; border:3px solid #000; background:var(--paper); color:var(--ink);
  font-family:var(--fd); font-size:18px; line-height:1; box-shadow:3px 3px 0 #000; cursor:pointer; }

/* ---------- carte ---------- */
.rf-card { position:absolute; inset:0; display:flex; flex-direction:column; color:var(--paper);
  transition:transform .22s ease, opacity .22s ease; }
.rf-card.rf-out { transform:translateY(-30px); opacity:0; }
.rf-card.is-ok::after, .rf-card.is-ko::after { content:''; position:absolute; inset:0; pointer-events:none; }
.rf-card.is-ok::after { box-shadow:inset 0 0 0 4px rgba(91,232,133,.7); }
.rf-card.is-ko::after { box-shadow:inset 0 0 0 4px rgba(255,82,82,.7); }

.rf-hud { display:flex; align-items:center; gap:8px; padding:calc(12px + env(safe-area-inset-top)) 14px 4px 60px; }
.rf-badge { font-family:var(--fd); font-size:15px; letter-spacing:1.5px; background:var(--magenta); color:#fff;
  border:3px solid #000; box-shadow:3px 3px 0 #000; padding:4px 11px; transform:rotate(-3deg); }
.rf-streak { margin-left:auto; font-family:var(--fd); font-size:20px; line-height:1; }
.rf-streak b { color:var(--yellow); }
.rf-score { font-family:var(--fm); font-weight:700; font-size:12px; border:2px solid rgba(255,255,255,.32); padding:4px 8px; }
.rf-timer { height:6px; margin:8px 14px 0; background:rgba(255,255,255,.12); border:2px solid rgba(255,255,255,.3); overflow:hidden; }
.rf-timer > i { display:block; height:100%; width:100%; background:var(--yellow); }

/* ---------- MISE EN PAGE : question EN HAUT · arène AU MILIEU · action EN BAS ----------
   Plus de bloc de réponses qui flotte au milieu du vide : le visuel (image, drapeau,
   vinyle, lettres…) occupe l'espace libre, les boutons restent sous le pouce. */
.rf-body { flex:1; min-height:0; display:flex; flex-direction:column; gap:12px; padding:12px 12px 4px; }
.rf-top { flex:0 0 auto; display:flex; flex-direction:column; gap:10px; min-height:0; }
.rf-arena { flex:0 0 auto; min-height:0; display:flex; align-items:center; justify-content:center; overflow:hidden; }
/* CALÉ SUR LE JEU NORMAL : tout à taille NATURELLE, packé en haut, espace propre en bas.
   Plus rien n'est étiré (ni la question, ni les réponses). */
.rf-noarena .rf-q .bd { max-height:38vh; overflow:auto; }

/* pilule de type */
.rf-pill { position:relative; align-self:flex-start; transform:rotate(-1deg); }
.rf-pill .sh { position:absolute; top:3px; left:3px; right:-3px; bottom:-3px; background:#000; }
.rf-pill .bd { position:relative; display:inline-block; padding:6px 14px; border:3px solid #000; background:var(--cyan);
  color:var(--ink); font-family:var(--fd); font-size:13px; letter-spacing:1.2px; }
.rf-pill.p-yellow .bd { background:var(--yellow); }
.rf-pill.p-purple .bd { background:var(--purple); color:var(--paper); }
.rf-pill.p-orange .bd { background:var(--orange); }
.rf-pill.p-green .bd { background:var(--green); }
.rf-pill.p-blue .bd { background:var(--blue); color:var(--paper); }

/* question */
.rf-q { position:relative; }
.rf-q .sh { position:absolute; top:4px; left:4px; right:-4px; bottom:-4px; background:#000; }
.rf-q .bd { position:relative; border:3px solid rgba(255,255,255,.28); background:rgba(255,255,255,.07);
  color:var(--paper); font-family:var(--fd); font-size:21px; line-height:1.18; padding:16px; }
.rf-blank { display:inline-block; min-width:70px; border-bottom:5px solid var(--magenta); vertical-align:bottom; }

/* zone action : toujours en bas de carte */
/* réponses : NATURELLES (mêmes proportions que le jeu normal : ~68px, gap 10) — jamais étirées */
.rf-ans { flex:0 0 auto; display:flex; flex-direction:column; gap:10px; }

.rf-opts { gap:11px; }
.rf-opt { position:relative; display:flex; border:0; background:none; padding:0; cursor:pointer; text-align:left; }
.rf-opt .sh { position:absolute; top:5px; left:5px; right:-5px; bottom:-5px; background:#000; }
.rf-opt .bd { position:relative; flex:1; display:flex; align-items:center; gap:12px; padding:15px 14px; border:3px solid #000; }
.rf-opt .lw { flex-shrink:0; }
.rf-opt .lb { display:flex; align-items:center; justify-content:center; width:38px; height:38px; border:2px solid #000;
  background:var(--paper); color:var(--ink); font-family:var(--fd); font-size:22px; }
.rf-opt .tx { font-family:var(--fd); font-size:clamp(18px,4.8vw,22px); letter-spacing:.3px; line-height:1.15; flex:1; }
.rf-opt.c0 .bd { background:var(--yellow); color:var(--ink); }
.rf-opt.c1 .bd { background:var(--purple); color:var(--paper); }
.rf-opt.c2 .bd { background:var(--red); color:var(--paper); }
.rf-opt.c3 .bd { background:var(--teal); color:var(--paper); }

/* ---------- MARQUE DE CORRECTION ✓ / ✗ (révélation) ----------
   Marque TRACÉE en CSS (jamais un glyphe), grand trait posé sur la réponse comme
   un coup de stylo — surtout PAS une case à cocher : ici on ne coche rien, on corrige.
   La case à cocher, c'est uniquement le vrai/faux (plus bas). */
.rf-opt .stamp { position:absolute; top:50%; right:20px; width:34px; height:46px; display:none; z-index:3;
  transform:translateY(-50%) rotate(-8deg); }
.rf-opt .stamp .mk { position:absolute; left:50%; top:50%; display:block; }
/* états révélés — la réponse laisse la place à la marque */
.rf-opt.correct .bd, .rf-opt.wrong .bd { border-width:5px; padding-right:62px; }
.rf-opt.correct .bd { background:var(--green); color:var(--ink); }
.rf-opt.wrong .bd { background:var(--red); color:var(--paper); }
.rf-opt.faded { opacity:.4; }
/* ✓ : rectangle bordé bas+droite tourné à 45° */
.rf-opt.correct .stamp { display:block; }
.rf-opt.correct .stamp .mk { width:19px; height:38px; margin:-24px 0 0 -12px; box-sizing:border-box;
  border:solid var(--ink); border-width:0 8px 8px 0; transform:rotate(45deg); }
/* ✗ : deux barres croisées */
.rf-opt.wrong .stamp { display:block; }
.rf-opt.wrong .stamp .mk::before, .rf-opt.wrong .stamp .mk::after { content:''; position:absolute; left:0; top:0;
  width:7px; height:44px; margin:-22px 0 0 -3.5px; background:var(--paper); border-radius:2px; }
.rf-opt.wrong .stamp .mk::before { transform:rotate(45deg); }
.rf-opt.wrong .stamp .mk::after { transform:rotate(-45deg); }
.rf-opt.lock { pointer-events:none; }

/* ---------- VRAI / FAUX : la CASE À COCHER de la maquette (s27 · D) ----------
   Une seule marque par bouton : la case. Pas d'icône décorative en plus —
   on coche, et la case se remplit ✓ (bonne) ou ✗ (ratée) à la révélation. */
.rf-tf { gap:13px; }
.rf-tf .rf-opt .bd { min-height:86px; justify-content:center; gap:16px; }
.rf-tf .rf-opt .tx { font-size:30px; letter-spacing:2px; flex:none; text-align:center; }
.rf-chk { position:relative; flex-shrink:0; width:36px; height:36px; border:3px solid var(--ink);
  background:var(--paper); box-shadow:3px 3px 0 var(--ink); }
.rf-chk .mk { position:absolute; left:50%; top:50%; display:none; }
.rf-tfb.correct .rf-chk .mk { display:block; width:10px; height:19px; margin:-12px 0 0 -6px; box-sizing:border-box;
  border:solid var(--ink); border-width:0 4px 4px 0; transform:rotate(45deg); }
.rf-tfb.wrong .rf-chk .mk { display:block; }
.rf-tfb.wrong .rf-chk .mk::before, .rf-tfb.wrong .rf-chk .mk::after { content:''; position:absolute; left:0; top:0;
  width:5px; height:22px; margin:-11px 0 0 -2.5px; background:var(--red); border-radius:1px; }
.rf-tfb.wrong .rf-chk .mk::before { transform:rotate(45deg); }
.rf-tfb.wrong .rf-chk .mk::after { transform:rotate(-45deg); }
.rf-tfb:not(.lock):active .rf-chk { box-shadow:1px 1px 0 var(--ink); }

/* anagramme — les cases dans l'arène, les lettres à taper en bas */
.rf-slots { width:100%; box-sizing:border-box; display:flex; gap:8px; justify-content:center; flex-wrap:wrap; padding:20px 10px;
  background:rgba(255,255,255,.06); border:3px solid rgba(255,255,255,.28); }
.rf-slots.ok { border-color:var(--green); } .rf-slots.ko { border-color:var(--red); }
.rf-slot { width:42px; height:54px; border:3px solid #000; box-shadow:3px 3px 0 #000; background:var(--yellow);
  color:var(--ink); font-family:var(--fd); font-size:28px; display:flex; align-items:center; justify-content:center; }
.rf-slot.empty { background:rgba(255,255,255,.14); box-shadow:none; }
.rf-pool { display:flex; gap:9px; justify-content:center; flex-wrap:wrap; }
.rf-ltile { width:50px; height:60px; border:3px solid #000; box-shadow:3px 3px 0 #000; background:var(--paper);
  color:var(--ink); font-family:var(--fd); font-size:28px; cursor:pointer; }
.rf-ltile.used { opacity:.25; pointer-events:none; }

/* estimation — le chiffre dans l'arène, le curseur en bas */
.rf-num { text-align:center; font-family:var(--fd); font-size:clamp(46px,14vw,66px); color:var(--yellow); line-height:1; -webkit-text-stroke:2px #000; margin-top:4px; }
.rf-num small { -webkit-text-stroke:0; font-size:16px; }
.rf-num.ok { color:var(--green); } .rf-num.near { color:var(--yellow); } .rf-num.ko { color:var(--red); }
.rf-slider { width:100%; margin:0; accent-color:var(--magenta); height:26px; }
.rf-lim { display:flex; justify-content:space-between; margin-top:-6px; font-family:var(--fd); font-size:12px; color:rgba(255,255,255,.55); }

/* bouton valider générique */
.rf-go { align-self:stretch; border:4px solid #000; box-shadow:5px 5px 0 #000; background:var(--yellow);
  color:var(--ink); font-family:var(--fd); font-size:19px; letter-spacing:1px; padding:14px; cursor:pointer; }
.rf-go.lock { pointer-events:none; opacity:.7; }

/* plus / moins — cartes COMPACTES (serrées autour du contenu), calées en haut */
.rf-hilo { display:flex; gap:10px; width:100%; height:min(26vh,178px); }
.rf-hcard { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
  border:3px solid #000; box-shadow:4px 4px 0 #000; background:var(--paper); color:var(--ink);
  padding:10px 6px; text-align:center; }
.rf-hcard.target { background:var(--yellow); }
.rf-hcard .e { font-size:clamp(32px,10vw,44px); line-height:1; }
.rf-hcard .nm { font-family:var(--fd); font-size:13px; margin-top:6px; }
.rf-hcard .v { font-family:var(--fd); font-size:22px; margin-top:2px; color:var(--magenta); }
.rf-hcard.target .v { color:var(--ink); }
.rf-pm { display:flex; gap:10px; }
.rf-pm .rf-opt { flex:1; }
.rf-pm .rf-opt .bd { justify-content:center; padding:18px; background:var(--blue); color:var(--paper); }
.rf-pm .rf-opt .tx { flex:0; font-size:22px; white-space:nowrap; }
.rf-pm .rf-opt.pm-dn .bd { background:var(--purple); }
/* révélation PLUS/MOINS = JUSTE la couleur (plus de tampon ✓/✗) — vert/rouge, padding normal */
.rf-pm .rf-opt.correct .bd { background:var(--green); color:var(--ink); padding:18px; border-width:3px; }
.rf-pm .rf-opt.wrong .bd { background:var(--red); color:var(--paper); padding:18px; border-width:3px; }

/* ---------- VRAI / FAUX : EXACTEMENT le design des boutons PLUS/MOINS ----------
   2 boutons côte à côte, compacts (padding:18px = hauteur naturelle ~58px, PAS étirés),
   VRAI vert / FAUX rouge. Révélation : bon = vert, mauvais = rouge. */
.rf-ans.rf-tf2 { flex-direction:row; gap:10px; }
.rf-tf2 .rf-opt { flex:1; }
.rf-tf2 .rf-opt .bd { justify-content:center; padding:18px; }
.rf-tf2 .rf-opt .tx { flex:0; font-size:22px; white-space:nowrap; }
.rf-tf2 .tf0 .bd { background:var(--green); color:var(--ink); }
.rf-tf2 .tf1 .bd { background:var(--red); color:var(--paper); }
.rf-tf2 .rf-opt.correct .bd { background:var(--green); color:var(--ink); padding:18px; border-width:3px; }
.rf-tf2 .rf-opt.wrong .bd { background:var(--red); color:var(--paper); padding:18px; border-width:3px; }

/* saisie texte (emoji / 4 images / rébus) */
.rf-bigemoji { text-align:center; font-size:clamp(100px,42vw,200px); line-height:1.05; }
/* 4 IMAGES · 1 MOT — la grille prend TOUTE la largeur (plus de marges vides) */
.rf-grid4 { display:grid; grid-template-columns:1fr 1fr; gap:10px; width:100%; aspect-ratio:1; max-height:100%; }
.rf-grid4 .im { min-height:0; border:3px solid #000; box-shadow:4px 4px 0 #000; background:var(--paper);
  display:flex; align-items:center; justify-content:center; font-size:clamp(44px,17vw,92px); }
/* RÉBUS : mêmes cartes que PLUS/MOINS — grandes, pleine largeur, peu d'espace sur les côtés */
.rf-rebus { display:flex; align-items:stretch; justify-content:center; gap:8px; width:100%; height:min(27vh,182px); }
.rf-rebus .e { flex:1; border:4px solid #000; box-shadow:4px 4px 0 #000; background:var(--paper);
  display:flex; align-items:center; justify-content:center; font-size:clamp(52px,20vw,88px); }
.rf-rebus .e img.rf-nemoji { width:clamp(56px,22vw,96px); height:clamp(56px,22vw,96px); display:block; }
.rf-rebus .plus { flex:0 0 auto; align-self:center; font-family:var(--fd); font-size:36px; }

/* DRAPEAUX — image flagcdn (mise en cache par le SW), repli emoji hors-ligne */
.rf-flag { position:relative; width:100%; max-width:330px; aspect-ratio:3/2; max-height:100%;
  border:4px solid #000; box-shadow:7px 7px 0 #000; background:var(--paper); overflow:hidden;
  display:flex; align-items:center; justify-content:center; }
.rf-flag img { width:100%; height:100%; object-fit:cover; display:block; }
.rf-flag .fb { display:none; width:100%; text-align:center; font-size:clamp(70px,24vw,120px); line-height:1; }
.rf-flag.nopic img { display:none; }
.rf-flag.nopic .fb { display:block; }

/* BLIND TEST — vinyle qui tourne pendant l'extrait */
.rf-disc { display:flex; flex-direction:column; align-items:center; gap:14px; }
.rf-disc .vinyl { position:relative; width:min(46vw,168px); aspect-ratio:1; border-radius:50%; border:5px solid #000;
  box-shadow:7px 7px 0 #000; display:grid; place-items:center;
  background:repeating-radial-gradient(circle at 50% 50%, #1b1b22 0 5px, #292933 5px 10px); }
.rf-disc .vinyl::after { content:''; width:38%; aspect-ratio:1; border-radius:50%; background:var(--magenta); border:4px solid #000; }
.rf-disc .hole { position:absolute; z-index:2; width:12px; height:12px; border-radius:50%; background:#0a0518; border:2px solid #000; }
.rf-disc.spin .vinyl { animation:rf-spin 2.6s linear infinite; }
@keyframes rf-spin { to { transform:rotate(360deg); } }
.rf-disc .st { font-family:var(--fm); font-weight:700; font-size:12px; color:rgba(255,255,255,.7); }
.rf-play { border:3px solid #000; box-shadow:4px 4px 0 #000; background:var(--yellow); color:var(--ink);
  font-family:var(--fd); font-size:16px; letter-spacing:1px; padding:9px 18px; cursor:pointer; }
.rf-input { width:100%; box-sizing:border-box; border:4px solid #000; box-shadow:4px 4px 0 #000; background:var(--paper);
  color:var(--ink); font-family:var(--fd); font-size:22px; letter-spacing:1px; text-transform:uppercase; padding:14px; }
.rf-input.ok { background:var(--green); } .rf-input.ko { background:var(--red); color:var(--paper); }
.rf-hint { font-family:var(--fm); font-weight:700; font-size:12px; color:rgba(255,255,255,.6); text-align:center; }

/* pied : état de la carte + barre d'enchaînement (la suivante arrive toute seule) */
.rf-foot { flex-shrink:0; text-align:center; padding:6px 0 calc(14px + env(safe-area-inset-bottom)); }
/* ▲ PASSER : affordance discrète et centrée (saute sans perdre le streak ; devient le résultat une fois répondu) */
.rf-swipe { display:inline-flex; flex-direction:column; align-items:center; gap:1px; font-family:var(--fm); font-weight:700; font-size:11px; letter-spacing:1.5px; color:rgba(255,255,255,.52); cursor:pointer; }
.rf-swipe .up { font-size:17px; line-height:1; opacity:.65; animation:rf-up 1.2s ease-in-out infinite; }
.rf-swipe.ready .up { opacity:1; color:var(--yellow); }
.rf-swipe .tx { opacity:.85; }
@keyframes rf-up { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-4px)} }
.rf-next-bar { display:none; width:132px; height:4px; margin:8px auto 0; background:rgba(255,255,255,.18); }
.rf-next-bar.run { display:block; }
.rf-next-bar > i { display:block; height:100%; background:var(--yellow); transform-origin:left;
  animation:rf-drain var(--d,2s) linear forwards; }
@keyframes rf-drain { from { transform:scaleX(1); } to { transform:scaleX(0); } }
.rf-peek { position:absolute; left:0; right:0; bottom:0; height:22px; border-top:2px dashed rgba(255,255,255,.14); pointer-events:none; }

/* palier de série */
.rf-palier { position:absolute; inset:0; z-index:20; display:flex; align-items:center; justify-content:center;
  background:radial-gradient(130% 70% at 50% 35%, rgba(255,46,147,.96), rgba(20,9,38,.96)); opacity:0; transition:opacity .2s; }
.rf-palier.show { opacity:1; }
.rf-palier .in { text-align:center; color:var(--paper); display:flex; flex-direction:column; align-items:center; gap:16px; padding:24px; }
.rf-palier .big { font-size:96px; line-height:1; }
.rf-palier .ttl { font-family:var(--fd); font-size:40px; -webkit-text-stroke:1.5px #000; }
.rf-palier .sub { font-family:var(--fm); font-weight:700; font-size:13px; }

.rf-empty { position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  color:var(--paper); font-family:var(--fd); font-size:24px; }

/* ---------- ANIMATIONS (game-feel) ---------- */
/* entrée : le contenu monte à chaque nouvelle carte */
.rf-hud { animation: rf-rise .34s ease both; }
.rf-body { animation: rf-rise .34s ease both; animation-delay:.05s; }
.rf-foot { animation: rf-rise .34s ease both; animation-delay:.10s; }
@keyframes rf-rise { from { opacity:0; transform:translateY(16px); } to { opacity:1; transform:none; } }

/* révélation : le bon rebondit, le mauvais tremble ; le tampon apparaît */
.rf-opt.correct .bd { animation: rf-pop .45s ease; }
.rf-opt.wrong .bd { animation: rf-shake .42s ease; }
@keyframes rf-pop { 0%{transform:scale(1);} 35%{transform:scale(1.05);} 100%{transform:scale(1);} }
@keyframes rf-shake { 0%,100%{transform:translateX(0);} 20%{transform:translateX(-6px);} 40%{transform:translateX(6px);} 60%{transform:translateX(-4px);} 80%{transform:translateX(4px);} }
.rf-opt.correct .stamp, .rf-opt.wrong .stamp { animation: rf-stamp .3s cubic-bezier(.2,1.5,.4,1) both; }
@keyframes rf-stamp { from{transform:translateY(-50%) rotate(14deg) scale(0);} to{transform:translateY(-50%) rotate(-8deg) scale(1);} }
.rf-tfb.correct .rf-chk, .rf-tfb.wrong .rf-chk { animation: rf-pop .35s cubic-bezier(.2,1.5,.4,1); }
.rf-slots.ok, .rf-slots.ko { animation: rf-pop .45s ease; }

/* série / score qui pulsent quand ils changent */
.rf-bump { animation: rf-bumpk .42s ease; }
@keyframes rf-bumpk { 0%{transform:scale(1);} 30%{transform:scale(1.3);} 100%{transform:scale(1);} }

/* palier */
.rf-palier.show .big { animation: rf-pop2 .55s cubic-bezier(.2,1.4,.4,1) both; }
.rf-palier.show .ttl, .rf-palier.show .sub, .rf-palier.show .rf-go { animation: rf-rise .4s ease both; animation-delay:.12s; }
@keyframes rf-pop2 { 0%{transform:scale(.3);opacity:0;} 60%{transform:scale(1.18);} 100%{transform:scale(1);opacity:1;} }

/* petit souffle sur le gros emoji « devine » */
.rf-bigemoji { animation: rf-float 2.6s ease-in-out infinite; }
@keyframes rf-float { 0%,100%{transform:translateY(0);} 50%{transform:translateY(-9px);} }

/* enfoncement des boutons au clic */
.rf-opt:not(.lock):active .bd, .rf-ltile:not(.used):active, .rf-go:not(.lock):active { transform:translate(2px,2px); }

@media (prefers-reduced-motion: reduce) {
  .rf-hud, .rf-body, .rf-foot, .rf-opt.correct .bd, .rf-opt.wrong .bd,
  .rf-opt.correct .stamp, .rf-opt.wrong .stamp, .rf-slots.ok, .rf-slots.ko,
  .rf-tfb.correct .rf-chk, .rf-tfb.wrong .rf-chk, .rf-disc.spin .vinyl,
  .rf-bump, .rf-palier.show .big, .rf-palier.show .ttl, .rf-bigemoji, .rf-swipe .up { animation:none !important; }
  .rf-next-bar > i { animation:none !important; }
  .rf-card { transition:none !important; }
}

/* tablette/desktop : on centre une colonne façon téléphone */
@media (min-width:700px) {
  #sec-rafale .rf-stage { max-width:440px; left:50%; transform:translateX(-50%); border-left:3px solid rgba(0,0,0,.4); border-right:3px solid rgba(0,0,0,.4); }
}