/* Anagrammes — habillage.
   Quatrième ambiance du portail : prune et magenta, après le violet de Blocs,
   l'ambre de 2048 et l'ardoise du Mot du jour. Interface en DOM : c'est un jeu
   de texte, il doit rester lisible et accessible. Mobile d'abord. */

.game-anagrammes .game-stage{
  background:
    radial-gradient(ellipse 120% 60% at 50% -10%, rgba(230,80,170,.38), transparent 62%),
    linear-gradient(170deg, #3B1338 0%, #2A0E2B 52%, #1B0A1D 100%);
}
@media(min-width:720px){
  .game-anagrammes .game-stage{border-color:rgba(255,255,255,.12);box-shadow:0 18px 50px rgba(27,10,29,.42)}
}

.ag{
  position:absolute;inset:0;
  display:flex;flex-direction:column;align-items:center;
  padding:10px 12px calc(8px + env(safe-area-inset-bottom));
  gap:10px;color:#FCEFF7;
  user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;
}

/* ---------- bandeau ---------- */
.ag-haut{display:flex;gap:8px;width:100%;max-width:520px;flex:none}
.ag-stat{
  flex:1;min-width:0;padding:5px 11px;line-height:1.15;
  background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.15);
  border-radius:13px;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
}
.ag-stat small{
  display:block;font-size:.64rem;text-transform:uppercase;letter-spacing:.07em;
  color:rgba(252,239,247,.62);font-weight:500;
}
.ag-stat b{
  display:block;font-family:'Fredoka','Outfit',sans-serif;font-size:1.2rem;font-weight:600;color:#fff;
}
.ag-stat.urgent b{color:#FF8A8A}

/* jauge de temps */
.ag-jauge{
  flex:none;width:100%;max-width:520px;height:6px;border-radius:99px;
  background:rgba(255,255,255,.12);overflow:hidden;
}
.ag-jauge i{
  display:block;height:100%;width:100%;border-radius:99px;
  background:linear-gradient(90deg,#F06FBD,#C13B91);
  transition:width .25s linear;
}
.ag-jauge.urgent i{background:linear-gradient(90deg,#FF9A8A,#E6483D)}

/* ---------- mot en cours : des traits à remplir ---------- */
.ag-slots{
  flex:none;display:flex;align-items:flex-end;justify-content:center;gap:8px;
  min-height:60px;
}
.ag-slots i{
  display:flex;align-items:center;justify-content:center;
  width:40px;height:52px;font-style:normal;
  border-bottom:4px solid rgba(255,255,255,.22);
  border-radius:3px;
  font-family:'Fredoka','Outfit',sans-serif;font-size:1.6rem;font-weight:600;
  text-transform:uppercase;color:#fff;
  transition:border-color .12s ease, transform .12s ease;
}
.ag-slots i.pleine{
  border-bottom-color:#F06FBD;
  transform:translateY(-2px);
}
.ag-slots i.active{border-bottom-color:rgba(240,111,189,.55)}

.ag-message{
  flex:none;min-height:22px;text-align:center;font-size:.9rem;font-weight:600;
}
.ag-message:empty{visibility:hidden}
.ag-message.bon{color:#7DE8B0}
.ag-message.mauvais{color:#FFB4A8}

/* ---------- lettres en cercle ---------- */
.ag-cercle{
  flex:none;position:relative;
  width:min(272px, 74vw);aspect-ratio:1;
}
.ag-tuile{
  position:absolute;
  width:74px;height:74px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  border-radius:50%;border:1px solid rgba(255,255,255,.4);
  background:linear-gradient(180deg,#F8EDF5,#E2C6DC);
  color:#3B1338;font-family:'Fredoka','Outfit',sans-serif;
  font-size:2rem;font-weight:600;text-transform:uppercase;
  box-shadow:0 4px 0 rgba(0,0,0,.32);
  transition:transform .12s ease, background-color .12s ease, opacity .12s ease;
}
.ag-tuile:active{transform:translate(-50%,-50%) scale(.94)}
.ag-tuile:focus-visible{outline:3px solid #F06FBD;outline-offset:3px}
.ag-tuile.prise{
  background:rgba(255,255,255,.08);color:rgba(255,255,255,.3);
  border-color:rgba(255,255,255,.14);box-shadow:none;pointer-events:none;
}

/* ---------- actions ---------- */
.ag-actions{flex:none;display:flex;gap:8px;width:100%;max-width:420px}
.ag-btn{
  flex:1;min-height:56px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;gap:6px;
  border-radius:15px;border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.12);color:#fff;
  font-family:'Fredoka','Outfit',sans-serif;font-weight:600;font-size:1rem;
  box-shadow:0 4px 0 rgba(0,0,0,.28);
}
.ag-btn:active{transform:translateY(4px);box-shadow:0 0 0 rgba(0,0,0,.28)}
.ag-btn:focus-visible{outline:3px solid #F06FBD;outline-offset:2px}
.ag-btn.valider{flex:1.5;background:linear-gradient(180deg,#E055A8,#C13B91);border-color:transparent;box-shadow:0 4px 0 #8A2265}
.ag-btn.valider:active{box-shadow:0 0 0 #8A2265}

/* ---------- mots trouvés ---------- */
.ag-trouves{
  flex:1;min-height:0;width:100%;max-width:520px;overflow-y:auto;
  display:flex;flex-wrap:wrap;gap:6px;align-content:flex-start;
  padding:2px;
}
.ag-trouves span{
  padding:5px 11px;border-radius:999px;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.16);
  font-size:.9rem;font-weight:600;text-transform:uppercase;letter-spacing:.03em;
}
.ag-trouves span b{font-weight:600;color:#F7B8DE;margin-left:6px;font-size:.82em}
.ag-vide{color:rgba(252,239,247,.45);font-size:.88rem;font-weight:500;padding:4px}

/* ---------- bilan ---------- */
.ag-bilan{display:flex;justify-content:center;gap:16px;margin:2px 0 12px;flex-wrap:wrap}
.ag-bilan div{text-align:center;font-size:.7rem;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-soft)}
.ag-bilan b{display:block;font-family:'Fredoka','Outfit',sans-serif;font-size:1.5rem;color:var(--ink);font-weight:600}
.ag-liste{text-align:left;max-height:180px;overflow-y:auto;margin-bottom:12px}
.ag-liste h3{font-size:.8rem;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-soft);margin:8px 0 4px}
.ag-liste p{font-size:.92rem;line-height:1.5;margin:0;word-spacing:.2em}
.ag-liste .trouve{color:var(--c-mahjong);font-weight:600}

@media(min-width:600px){
  .ag-cercle{width:320px}
  .ag-tuile{width:86px;height:86px;font-size:2.3rem}
  .ag-slots i{width:46px;height:58px;font-size:1.8rem}
  .ag-actions{max-width:480px}
}
@media(min-width:720px){
  .ag{padding:18px;gap:14px;justify-content:flex-start}
}
@media (prefers-reduced-motion: reduce){
  .ag-tuile,.ag-btn{transition:none}
}

/* un mot rare rapporte des points mais ne compte pas dans l'objectif affiché */
.ag-trouves span.rare{border-color:rgba(247,184,222,.5);background:rgba(247,184,222,.16)}