/* ============================================================
   MODULE « CONFUSION b, d, p, q »
   Styles propres à ce jeu : carte à pince (mot à trou, dessin,
   colonne de lettres), pince en bois, carte de l'oiseau.
   ============================================================ */

/* --- la carte à pince, comme celle de la boîte --- */
.bq-card{display:flex;align-items:stretch;width:100%;background:#fff;border:3px solid var(--rasp);border-radius:22px;overflow:visible;box-sizing:border-box}
.bq-left{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 10px 14px}
.bq-word{font-family:var(--f-scr);font-weight:400;font-size:2.4rem;color:var(--navy);line-height:1.25;white-space:nowrap;letter-spacing:.01em}
.bq-word.long{font-size:1.9rem}
.bq-word.xlong{font-size:1.45rem;white-space:normal;text-wrap:balance}
.bq-gap{display:inline-block;position:relative;min-width:.72em;vertical-align:baseline;line-height:1.25;margin:0 .04em;text-align:center;color:var(--blue)}
.bq-gap::after{content:"";position:absolute;left:0;right:0;bottom:-.04em;height:.14em;min-height:4px;border-radius:2px;background:var(--rasp)}
.bq-gap.next{background:rgba(255,204,0,.28);border-radius:6px}
.bq-gap.next::after{animation:bqblink 1s infinite}
@keyframes bqblink{50%{opacity:.25}}
.bq-gap.land{animation:bqland .35s;min-width:0}
.bq-gap.land::after{background:var(--blue)}
@keyframes bqland{0%{transform:translateY(-14px) scale(1.3)}100%{transform:none}}
.bq-word.win .bq-gap{color:var(--rasp)}
.bq-word.out{animation:bqout .22s forwards}
@keyframes bqout{to{opacity:0;transform:translateY(-6px)}}
.bq-word.done{display:none}
.bq-pin{position:absolute;left:50%;bottom:-.9em;width:9px;height:.7em;min-height:18px;margin-left:-4.5px;border-radius:3px;background:var(--blue);
  box-shadow:inset -2px 0 0 rgba(0,0,0,.15);animation:bqclip .3s}
@keyframes bqclip{0%{transform:translateY(-12px);opacity:0}100%{transform:none;opacity:1}}
.bq-joined{font-family:var(--f-cur);font-size:2.4rem;color:var(--rasp);line-height:1.35;animation:bqshow .3s both}
.bq-pic{width:100%;max-width:220px;height:150px;object-fit:contain;flex:1 1 auto;min-height:0}

/* colonne de lettres comme sur la carte de la boîte : fond blanc, lettres noires, traits noirs */
.bq-col{flex:none;width:76px;display:flex;flex-direction:column;border-left:3px solid #1E1A1B}
.bq-letter{position:relative;flex:1;min-height:58px;border:none;border-top:3px solid #1E1A1B;background:#fff;color:#1E1A1B;
  font-family:var(--f-scr);font-weight:400;font-size:2.6rem;line-height:1;padding:0 0 6px;cursor:pointer;transition:background .15s}
.bq-letter:first-child{border-top:none;border-top-right-radius:19px}
.bq-letter:last-child{border-bottom-right-radius:19px}
.bq-letter:active{background:#F1EDF6}
.bq-letter:focus-visible{outline:3px solid var(--yellow);outline-offset:-4px}
.bq-letter.shake{color:#B9B3C2}
.bq-letter.ok{background:color-mix(in srgb,var(--yellow) 35%,#fff)}

/* la pince en bois qui vient serrer la bonne lettre */
.bq-clip{position:absolute;right:-60px;top:50%;width:86px;height:34px;margin-top:-17px;z-index:3;pointer-events:none;
  transform:rotate(-6deg);transform-origin:10% 50%;animation:bqpince .3s ease-out;filter:drop-shadow(0 2px 0 rgba(40,31,69,.25))}
.bq-clip svg{display:block;width:100%;height:100%}
@keyframes bqpince{0%{transform:translateX(26px) rotate(-6deg);opacity:0}70%{transform:translateX(-3px) rotate(-6deg);opacity:1}100%{transform:rotate(-6deg)}}

.bq-tools{display:flex;gap:14px;align-items:center;justify-content:center}
.bq-birdbtn{background:#fff;border:3px solid var(--yellow);box-shadow:0 4px 0 #C99F00}

/* --- la carte de l'oiseau --- */
.bq-bird{position:relative;width:100%;max-width:300px;border:3px solid var(--rasp);border-radius:18px;overflow:hidden;background:#fff;box-sizing:border-box}
.bq-bird.small{max-width:230px}
.bq-bird img{display:block;width:100%;height:auto}
.bq-bird.pulse{animation:bqpulse .7s}
@keyframes bqpulse{30%{transform:scale(1.06)}60%{transform:scale(.98)}}
/* la croix de la carte n'est pas au milieu : les quatre parties se coupent à --cx / --cy */
.bq-bird,.bq-discover{--cx:47.36%;--cy:41.92%}
.bq-hl{position:absolute;opacity:0;pointer-events:none;transition:opacity .25s;
  background:color-mix(in srgb,var(--hc) 22%,transparent);box-shadow:inset 0 0 0 4px var(--hc)}
.bq-hl.on{opacity:1;animation:bqblink 1.1s 3}
.bq-hl.tl,.bq-zone.tl{left:0;top:0;width:var(--cx);height:var(--cy)}
.bq-hl.tr,.bq-zone.tr{right:0;top:0;width:calc(100% - var(--cx));height:var(--cy)}
.bq-hl.bl,.bq-zone.bl{left:0;bottom:0;width:var(--cx);height:calc(100% - var(--cy))}
.bq-hl.br,.bq-zone.br{right:0;bottom:0;width:calc(100% - var(--cx));height:calc(100% - var(--cy))}

/* --- étape 1 : je touche les parties de l'oiseau --- */
.bq-discover{position:relative;width:100%;border:3px solid var(--rasp);border-radius:22px;overflow:hidden;background:#fff;box-sizing:border-box}
.bq-discover > img:first-child{display:block;width:100%;height:auto}
.bq-zone{position:absolute;border:none;background:transparent;cursor:pointer;padding:0;z-index:1}
.bq-zone:focus-visible{outline:3px solid var(--yellow);outline-offset:-4px}
.bq-zone.shake{background:rgba(229,49,43,.12)}
.bq-zone.found{background:color-mix(in srgb,var(--hc) 10%,transparent);cursor:default}
/* morceaux découpés de la carte : mot, première lettre, lettre du centre */
.bq-piece{position:absolute;height:auto;pointer-events:none;z-index:2}
.bq-piece.show{animation:bqshow .35s both}
.bq-piece.pop{z-index:3;transform-origin:50% 60%;animation:bqpop 1.3s .15s both}
.bq-piece.pop.late{animation-delay:.9s}
@keyframes bqshow{0%{opacity:0;transform:translateY(-6px)}100%{opacity:1;transform:none}}
@keyframes bqpop{0%{opacity:0;transform:scale(.8)}20%{opacity:1;transform:scale(1.45)}60%{transform:scale(1.45)}100%{opacity:1;transform:scale(1)}}

/* espace parent */
.bq-mix{font-family:var(--f-scr);font-weight:700;font-size:1.2rem;color:var(--rasp)}

@media (max-width:420px){
  .bq-word{font-size:1.9rem}.bq-word.long{font-size:1.5rem}.bq-word.xlong{font-size:1.2rem}
  .bq-col{width:58px}.bq-letter{font-size:2rem;min-height:50px}
  .bq-pic{height:118px}
  .bq-joined{font-size:1.9rem}
  .bq-clip{right:-46px;width:62px;height:22px;margin-top:-11px}
}
.kpill.bq-chip{font-family:var(--f-scr);font-weight:700;font-size:1.5rem;min-width:52px;justify-content:center}

/* bulle « q comme queue » : la lettre en grand et en gras, le reste en noir, 1re lettre du mot en rouge */
.bq-comme{color:#1E1A1B}
.bq-comme .bq-cl{font-family:var(--f-scr);font-weight:700;font-size:1.7em;line-height:.8;vertical-align:-.08em;color:#1E1A1B;margin-right:.08em}
.bq-comme .bq-cf{font-family:var(--f-scr);font-weight:700;font-size:1.15em;color:var(--red)}

/* menu : « L'oiseau » (leçon) et « Je joue » */
.bq-miniart{display:block;width:min(180px,96%);height:auto;border-radius:10px;background:#fff;border:3px solid var(--rasp)}
.bq-minicard{display:flex;flex-direction:column;align-items:center;gap:2px;width:min(150px,92%);background:#fff;border:3px solid var(--rasp);border-radius:14px;padding:6px 4px 8px}
.bq-minicard img{width:70%;height:auto}
.bq-miniword{font-family:var(--f-scr);font-size:1.5rem;color:var(--navy);line-height:1.1}
.bq-miniword b{font-weight:400;color:var(--blue);border-bottom:3px solid var(--rasp);padding:0 2px}
.bq-miniart{padding:4px 6px;box-sizing:border-box}