/* ============================================================
   MODULE « DICTÉE — mots de la semaine »
   Styles propres à ce jeu : bande de cases à pince, cartes-lettres,
   clavier voyelles/consonnes.
   ============================================================ */
.bigword{font-family:var(--f-cur);font-size:3.4rem;color:var(--navy);line-height:1.7;word-break:break-word;padding:0 14px;
  background:repeating-linear-gradient(to bottom,transparent 0 27px,var(--lav) 27px 28px)}
.strips{display:flex;flex-wrap:wrap;justify-content:center;gap:36px 16px;margin-bottom:14px;max-width:100%}
.strip{display:flex;border:2.5px solid var(--rasp);border-radius:12px;background:#fff;max-width:100%}
.slot{width:46px;height:66px;display:grid;place-items:center;position:relative;font-family:var(--f-scr);font-weight:700;font-size:2.1rem;color:var(--lc,var(--navy));line-height:1}
.slot+.slot{border-left:1.5px solid rgba(223,28,86,.35)}
.slot.c{font-family:var(--f-cur);font-weight:400;font-size:2.6rem}
.slot.next{background:rgba(255,204,0,.22)}
.slot.next::before{content:"";position:absolute;left:8px;right:8px;bottom:6px;height:3px;border-radius:2px;background:var(--rasp);animation:blink 1s infinite}
@keyframes blink{50%{opacity:.25}}
.slot.land{animation:land .35s}
@keyframes land{0%{transform:translateY(-16px) scale(1.25)}100%{transform:none}}
.pin{position:absolute;left:50%;bottom:-24px;width:12px;height:30px;margin-left:-6px;border-radius:4px;background:var(--lc,#DF1C56);
  box-shadow:inset -3px 0 0 rgba(0,0,0,.14);animation:clip .3s}
.pin::after{content:"";position:absolute;left:3px;top:9px;width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.75)}
@keyframes clip{0%{transform:translateY(-14px);opacity:0}100%{transform:none;opacity:1}}
.tiles{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:12px}
.tile{width:60px;height:66px;font-family:var(--f-scr);font-weight:700;font-size:2.1rem;line-height:1;padding:0;color:var(--lc,var(--navy));
  background:color-mix(in srgb,var(--lc,#DF1C56) 15%,#fff);border:2.5px solid var(--lc,var(--rasp));border-radius:12px;
  box-shadow:0 4px 0 var(--lc,var(--rasp));cursor:pointer;transition:transform .15s,opacity .2s}
.tile.c{font-family:var(--f-cur);font-weight:400;font-size:2.6rem}
.tile:active{transform:translateY(3px);box-shadow:0 1px 0 var(--lc,var(--rasp))}
.tile.voy{background:var(--rasp);border-color:var(--rasp);color:#fff;box-shadow:0 4px 0 #A3103C}
.tile.cons{background:var(--blue);border-color:var(--blue);color:#fff;box-shadow:0 4px 0 #1F5C93}
.tile.voy.acc{background:#fff;color:var(--rasp);box-shadow:0 4px 0 rgba(223,28,86,.45)}
.tile.cons.acc{background:#fff;color:var(--blue);box-shadow:0 4px 0 rgba(44,124,193,.45)}
.tile.voy:active,.tile.cons:active{transform:translateY(3px);box-shadow:0 1px 0 rgba(0,0,0,.3)}
.tile:disabled{opacity:.15;cursor:default;box-shadow:none;transform:scale(.85)}
.joined{font-family:var(--f-cur);font-size:3.2rem;color:var(--rasp);line-height:1.6;animation:land .4s}
.msg{min-height:1.4em;font-family:var(--f-cur);font-size:1.9rem;color:var(--navy)}
.typed{min-width:220px;max-width:100%;min-height:80px;border-bottom:3px solid var(--rasp);font-family:var(--f-cur);font-size:2.7rem;color:var(--navy);padding:0 10px;line-height:1.75;box-sizing:border-box}
.typed.win{color:var(--green);border-bottom-color:var(--green)}
.kbd{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:5px;width:100%}
.key{font-family:var(--f-scr);font-size:1.3rem;font-weight:700;padding:10px 0;border-radius:10px;border:2px solid rgba(40,31,69,.2);background:#fff;color:var(--navy);cursor:pointer;box-shadow:0 2px 0 rgba(40,31,69,.2)}
.key.cons{color:#fff;border-color:var(--blue);background:var(--blue);box-shadow:0 3px 0 #1F5C93}
.key.voy{color:#fff;border-color:var(--rasp);background:var(--rasp);box-shadow:0 3px 0 #A3103C}
.key.cons:active,.key.voy:active{transform:translateY(2px);box-shadow:0 1px 0 rgba(0,0,0,.3)}
.key.voy.acc{background:#fff;color:var(--rasp);border-color:var(--rasp);box-shadow:0 2px 0 rgba(223,28,86,.4)}
.key.cons.acc{background:#fff;color:var(--blue);border-color:var(--blue);box-shadow:0 2px 0 rgba(44,124,193,.4)}
.key.wide{grid-column:span 2;font-family:var(--f-bold);font-weight:800;font-size:.95rem}
.key.go{grid-column:span 3;background:var(--yellow);border-color:var(--yellow);color:var(--navy);font-family:var(--f-bold);font-weight:900;font-size:1rem;box-shadow:0 3px 0 #C99F00}
.diff span{display:inline-block}
.diff .bad{color:var(--rasp);text-decoration:underline}
@media (max-width:420px){
  .tile{width:52px;height:58px;font-size:1.8rem}
  .slot{width:38px;height:60px;font-size:1.8rem}
  .bigword{font-size:2.7rem}
}

/* avec les flèches : les cases rétrécissent pour les mots longs, le clavier garde toute la largeur */
.strip{max-width:100%}
.slot{flex:0 1 46px;min-width:22px}
.stage:has(.navarrow) .kbd{width:calc(100% + 76px);margin:0 -38px}
.strips.long .slot{font-size:1.8rem}.strips.long .slot.c{font-size:2.1rem}
.strips.xlong .slot{font-size:1.4rem;height:56px}.strips.xlong .slot.c{font-size:1.65rem}
.strips.xlong .pin{width:9px;height:24px;margin-left:-4.5px;bottom:-20px}