/* Croisemots — habillage.
   Bois clair et jetons ivoire : c'est l'image qu'on a d'un jeu de lettres.
   Les cases primées se distinguent par la COULEUR ET PAR LEUR ÉTIQUETTE — une
   information portée par la seule teinte est perdue pour une partie des
   joueurs, et sur 225 cases ça se paie cher.

   Plateau en DOM : chaque case est un bouton, donc focalisable et annonçable.
   Un canevas aurait été plus court et muet. */

.game-croisemots .game-stage{
  background:
    radial-gradient(ellipse 110% 70% at 50% 0%, rgba(210,170,110,.18), transparent 60%),
    linear-gradient(170deg, #3B3026 0%, #2A231B 55%, #1C1713 100%);
}
@media(min-width:720px){
  .game-croisemots .game-stage{border-color:rgba(255,255,255,.12);box-shadow:0 18px 50px rgba(20,16,12,.45)}
}

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

/* ---------- bandeau ---------- */
.cm-haut{display:flex;gap:6px;width:100%;max-width:560px;flex:none}
.cm-stat{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:4px;border-radius:9px;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.10);
}
.cm-stat small{font-size:9.5px;letter-spacing:.07em;text-transform:uppercase;opacity:.62}
.cm-stat b{font-size:16px;font-variant-numeric:tabular-nums}
.cm-aide-btn{
  flex:none;width:32px;border-radius:9px;font:600 15px/1 inherit;color:inherit;cursor:pointer;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.10);
}

/* ---------- le plateau ----------
   IL DOIT RESTER CARRÉ quoi qu'il arrive : une grille de 15 sur 15 aplatie
   devient illisible, on ne suit plus une colonne. On le borne donc à la fois
   par la largeur et par la hauteur disponibles. */
.cm-plateau-cadre{
  flex:1;min-height:0;width:100%;
  display:flex;align-items:center;justify-content:center;
}
.cm-plateau{
  display:grid;
  grid-template-columns:repeat(15,1fr);
  aspect-ratio:1;
  width:min(100%, 68vh, 520px);
  gap:1px;padding:3px;
  background:#6B5540;
  border-radius:7px;
  box-shadow:0 8px 26px rgba(15,10,6,.45);
}

.cm-case{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:0;margin:0;border:0;border-radius:2px;cursor:pointer;
  background:#C9B48F;
  font:700 clamp(7px,1.5vw,13px)/1 inherit;color:#2B2318;
  position:relative;overflow:hidden;
}
.cm-case:hover:not(.posee){filter:brightness(1.12)}
.cm-case:focus-visible{outline:none;box-shadow:inset 0 0 0 2px #2B2318}

/* Les primes : une couleur ET une étiquette. La couleur se voit d'un coup
   d'œil, l'étiquette dit ce que c'est — et reste lisible pour qui ne
   distingue pas bien les teintes. */
.cm-case.p-ld{background:#A8C4DC}
.cm-case.p-lt{background:#5E93C4}
.cm-case.p-md{background:#E8B0A8}
.cm-case.p-mt{background:#D4685C}
.cm-case.p-centre{background:#E0A93C}
.cm-case.p-ld::after{content:'L2'}
.cm-case.p-lt::after{content:'L3'}
.cm-case.p-md::after{content:'M2'}
.cm-case.p-mt::after{content:'M3'}
.cm-case.p-centre::after{content:'★'}
.cm-case::after{
  font:600 clamp(5px,1.05vw,9px)/1 inherit;opacity:.72;letter-spacing:-.02em;
}
/* Une case couverte n'affiche plus son étiquette : c'est le jeton qui parle. */
.cm-case.posee::after, .cm-case.attente::after{content:''}

/* ---------- les jetons posés ---------- */
.cm-case.posee, .cm-case.attente{
  background:linear-gradient(160deg,#FBF4E4 0%,#EFE2C8 100%);
  color:#2B2318;
  box-shadow:inset 0 0 0 1px #B9A484, 0 1px 2px rgba(0,0,0,.3);
}
/* Celles qu'on vient de poser et qu'on peut encore reprendre : un liseré vif,
   parce qu'on doit savoir en un regard ce qui est définitif. */
.cm-case.attente{
  box-shadow:inset 0 0 0 2px #E0A93C, 0 2px 6px rgba(0,0,0,.4);
  animation:cm-pose .18s ease-out;
}
@keyframes cm-pose{from{transform:scale(.6);opacity:0}}
.cm-case.joker{color:#9A3F8F}
.cm-case b{font:800 clamp(8px,1.9vw,16px)/1 inherit}
.cm-case i{
  position:absolute;right:1px;bottom:0;
  font:600 clamp(4px,.85vw,8px)/1 inherit;font-style:normal;opacity:.65;
}

/* ---------- le mot en cours ---------- */
.cm-mot{
  margin:0;flex:none;min-height:1.25em;max-width:560px;text-align:center;
  font:600 clamp(11px,2.6vw,14px)/1.3 inherit;color:#F6E7C8;
  opacity:0;transition:opacity .15s;
}
.cm-mot.plein{opacity:.98}
.cm-mot.mauvais{color:#FFB4A8}

/* ---------- le chevalet ---------- */
.cm-chevalet{
  display:flex;gap:4px;flex:none;justify-content:center;flex-wrap:wrap;
  width:100%;max-width:560px;
  padding:5px 7px;border-radius:9px;
  background:linear-gradient(180deg,#7A5F42,#5C462F);
  box-shadow:inset 0 2px 6px rgba(0,0,0,.35);
  min-height:calc(clamp(30px,7.5vw,44px) * 1.32);
  align-items:center;
}
.cm-jeton{
  position:relative;
  width:clamp(30px,7.5vw,44px);aspect-ratio:1;
  display:flex;align-items:center;justify-content:center;
  border-radius:5px;cursor:pointer;
  background:linear-gradient(160deg,#FDF7E8 0%,#F0E3CA 100%);
  color:#2B2318;border:1px solid #B9A484;
  box-shadow:0 2px 5px rgba(0,0,0,.35);
  font:800 clamp(13px,3.2vw,19px)/1 inherit;
}
.cm-jeton:hover:not(:disabled){transform:translateY(-3px)}
.cm-jeton.choisie{
  box-shadow:0 0 0 3px #E0A93C, 0 4px 10px rgba(0,0,0,.45);
  transform:translateY(-5px);
}
/* Une lettre déjà posée sur le plateau reste VISIBLE à sa place, éteinte :
   la retirer ferait sauter les autres, et l'on perdrait son repère. */
.cm-jeton.prise{opacity:.25;cursor:default;box-shadow:none}
.cm-jeton.joker{color:#9A3F8F}
.cm-jeton i{
  position:absolute;right:2px;bottom:0;
  font:600 9px/1 inherit;font-style:normal;opacity:.6;
}

/* ---------- actions ---------- */
.cm-actions{display:flex;gap:4px;flex:none;flex-wrap:wrap;justify-content:center;width:100%;max-width:560px}
.cm-btn{
  flex:1 1 auto;min-width:78px;
  padding:7px 9px;border-radius:9px;cursor:pointer;
  font:600 12px/1 inherit;color:#F3EADA;
  background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.14);
}
.cm-btn:hover:not(:disabled){background:rgba(255,255,255,.16)}
.cm-btn:disabled{opacity:.38;cursor:default}
.cm-fort{background:#E0A93C !important;border-color:#E0A93C !important;color:#2B2318 !important}
.cm-fort:disabled{opacity:.42}

.cm-aide{
  margin:0;flex:none;text-align:center;font-size:11px;color:#E7D8BC;opacity:.55;
  min-height:1.1em;
}

/* ---------- le choix du niveau, sur l'écran d'ouverture ---------- */
.cm-niveaux{display:flex;gap:6px;justify-content:center;margin:12px 0 2px;flex-wrap:wrap}
.cm-niv{
  padding:6px 13px;border-radius:999px;cursor:pointer;
  font:600 12.5px/1 inherit;color:inherit;
  background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.20);
}
.cm-niv:hover{background:rgba(255,255,255,.18)}
.cm-niv.actif{background:#E0A93C;border-color:#E0A93C;color:#2B2318}

@media(max-height:640px){
  .cm-aide{display:none}
  .cm-plateau{width:min(100%, 58vh, 520px)}
}
@media(prefers-reduced-motion:reduce){
  .cm-case.attente{animation:none}
  .cm-jeton:hover:not(:disabled), .cm-jeton.choisie{transform:none}
}