/* ============================================================
   Scrabble — outil d'analyse (duplicate)
   Couleurs du plateau fidèles au plateau physique (reprises de
   l'original) : MT #E33, MD #FBB, LT #48B, LD #BCE, fond vert.
   Refonte ergonomique du programme d'avril 2014 en juin 2026.
   © 2026 JP. Zanotti | IMATH — Université de TOULON.
   ============================================================

   CARTE DE LA FEUILLE DE STYLE (qui stylise quoi dans l'UI).
   La structure DOM est montée par duplicate.js ([3] INTERFACE) ; cette CSS
   l'habille. Repères :
     • :root  — tokens (couleurs, tailles) ; --cell pilote l'échelle du plateau,
                --bigtiles-size celle des jetons du rack (lu aussi par rackGeom()).
     • .app   — grille générale : colonne gauche (plateau+rack+histo+aide),
                colonne droite (panneaux Coups/Motif/Dico + historique).
     • Plateau (.board/.cell)         — cases, primes, tuiles, ancres, fantôme,
                                        numéros d'ordre des coups.
     • Rack (.rack/.glissiere/.rtile) — sablier+minuteur | glissière | sac, plus
                                        l'histogramme des lettres restantes.
     • Panneau droit (.panel/.list)   — listes de coups, recherche par motif,
                                        historique, aide repliable.
   Les classes d'ÉTAT posées par le JS et stylées ici : .anchor/.armed (ancres),
   .ghost (prévisualisation), .moveno/.seq/.show-seq/.seq-hot (numéros d'ordre),
   .hot (ligne synchronisée au curseur), .dragging (jeton en cours de glissé),
   .wcheck-ok/.wcheck-bad (validation du mot du bloc gauche), .filled/.empty, etc.
   ============================================================ */

/* Police d'affichage des titres (Space Mono), servie en local (woff2). */
@font-face{
  font-family:"Space Mono";
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url("../fonts/space-mono-v17-latin-regular.woff2") format("woff2");
}
@font-face{
  font-family:"Space Mono";
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url("../fonts/space-mono-v17-latin-700.woff2") format("woff2");
}

/* TOKENS GLOBAUX. Changer --cell redimensionne tout le plateau (les cases ET ce
   qui en dépend : largeur du rack, taille des labels, des numéros d'ordre…).
   --bigtiles-size est aussi LU EN JS par rackGeom() pour positionner les jetons :
   garder CSS et JS cohérents. Les couleurs de primes (--w3/--w2/--l3/--l2)
   reprennent le plateau physique. --tileorder-bg/--tileorder = pastille des
   numéros d'ordre ; --accent/--good/--warn = bleu d'action / vert OK / rouge alerte. */
:root{
  /* =============== DIMENSIONS =============== */
  --cell-size: 36px;                 /* taille d'une case */
  /* Le PLATEAU commande tout. Sa largeur découle de ces trois jetons ; chevalet,
     rangée d'action, histogramme, panneaux et aide s'y conforment via --board-w. */
  --coord: 24px;                     /* largeur des 4 bandes de coordonnées */
  --board-gap: 2px;                  /* gouttière entre cases (16 gouttières) */
  --board-w: calc(2 * var(--coord) + 15 * var(--cell-size) + 16 * var(--board-gap));
  --rightpannel-width: 520px;        /* Largeur des blocs à droite */  
  --ghost-size:calc(var(--cell-size) * .63);   /* lettres de tuile / fantôme — proportionnelles à la case (22.7px à 36px) */
  --btnrack-size:44px;               /* sablier & sac */
  --bigtiles-size:42px;              /* jetons du rack (aussi lu par rackGeom() en JS) */
  /* =============== COULEURS ==================*/
  --board-green:#3A5;
  --w3:#E33; --w2:#FBB; --l3:#48B; --l2:#BCE;            /* mot ×3 / ×2, lettre ×3 / ×2 */
  --tile:#f3e2b8; --tile-edge:#cdb478; --tile-ink:#3a2f1c; /* tuiles : fond / bord / encre */
  --ink:#1d2126; --panel:#fafaf7; --line:#C8C8C2;        /* texte / fond de panneau / filets */
  --accent:#1463b8; --good:#2a8a3e; --warn:#b8341c;      /* action / valide / alerte */
  --ghost:#1463b8;
  --tileorder-bg:#B00;                /* fond de la pastille « numéro d'ordre » */
  --tileorder:rgba(255,255,255,0.8);  /* couleur du chiffre d'ordre */
  --button-bgcolor:rgba(192,192,192,1);
  --freeletter:#243292;               /* lettres libres sur motif */
  --fixedletter:#A42;                 /* lettres fixées sur motif */
  --bingo:#FAD000;                    /* lettres d'un scrabble dans l'historique */
  --board-border:#081624;             /* bord du plateau */
  --board-bg:#121828;                 /* fond du plateau */
  --anchor:rgba(243,226,184,1.0);     /* ancre */
  --fillet:#AAA;                      /* filet */
  --wordcycle:#000;                   /* défilement mots  */
  --wordcycle-bg:#BCE;                /* défilement mots  */
  --wordcycle-hover:#A22;                /* défilement mots  */        
  font-synthesis:none;
}
*{box-sizing:border-box}

/* Page : fond neutre, police système, pas de zoom auto du texte sur mobile. */
body{
  margin:0; background:#eef0ee; color:var(--ink);
  font:14px/1.4 "Segoe UI", system-ui, Arial, sans-serif;
  -webkit-text-size-adjust:100%;
}

/* Titre principal : capitales fines très espacées (Space Mono). */
h1{font-size:large;margin:2px 0 10px;font-weight:200;font-family:"Space Mono";text-transform:uppercase;letter-spacing:0.1em;}
/* Disposition générale : 2 colonnes (gauche auto = plateau, droite 360px =
   panneaux), 2 rangées que la colonne gauche/droite enjambe (grid-row span 2). */
.app{
  display:grid;
  grid-template-columns: auto var(--rightpannel-width);
  grid-template-rows:auto auto;
  gap:18px; align-items:start;
  max-width:1200px; margin:1em auto; padding:0 1em;
}
.left{grid-column:1;grid-row:1 / span 2;display:flex;flex-direction:column;align-items:center;min-width:0}
.left .muted{max-width:640px;text-align:center}
.right{grid-column:2;grid-row:1 / span 2;margin-top:6em;min-width:0}
/* Barre d'actions au-dessus du plateau (Analyser, Sauver, Charger…). */
.bar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;justify-content:center;margin-bottom:12px;height:2.5em;}
/* Boutons : style neutre par défaut, surbrillance accent au survol ; .primary =
   bouton d'action plein (ex. « Analyser »). */
button,.btn{min-height:2.25em;
            font:inherit;border:1px solid var(--line);background:var(--button-bgcolor);color:var(--ink);
            padding:4px 8px;border-radius:6px;cursor:pointer;
           }
button:hover{border-color:var(--accent);color:var(--accent);border-width:2px;font-weight:700;}
.btn:hover{border-color:var(--accent);color:var(--accent);border-width:2px;font-weight:700;}
button.primary{min-height:2.25em;background:var(--accent);color:#fff;border-color:var(--accent);text-transform:uppercase}
button.primary:hover{filter:brightness(1.08);color:#FF0;font-weight:700}
/* Ligne de statut sous le plateau (messages de setStatus()). */
.status{min-height:18px;color:#555;font-size:12.5px;margin-top:6px}

/* ======================== PLATEAU ======================== */
/* Cadre sombre autour de la grille (effet « plateau posé »). */
.board-wrap{
  display:inline-block;
  position:relative;
  background:var(--board-border);
  padding:6px;
  border-radius:6px
}

/* La grille : 20px de gouttière (coordonnées) + 15 colonnes/lignes de --cell-size. */
.board{
  display:grid;
  grid-template-columns:var(--coord) repeat(15,var(--cell-size)) var(--coord);
  grid-template-rows:var(--coord) repeat(15,var(--cell-size)) var(--coord);
  gap:var(--board-gap); background:var(--board-bg);
}

/* Étiquettes de coordonnées (chiffres en haut/bas, lettres sur les côtés). */
.coord{
  display:flex;
  align-items:center;
  justify-content:center;
  color:#9fb7a6;
  font-size:calc(var(--coord) * .62)
}

/* Case de base (vide) : fond vert, contenu centré, curseur cliquable
   (sélection d'ancre). overflow:hidden borne les labels de prime. */
.cell{
  position:relative;display:flex;align-items:center;justify-content:center;
  background:var(--board-green); color:#04210f; font-size:calc(var(--cell-size) * .25); text-align:center;
  border-radius:3px; user-select:none; cursor:pointer; line-height:1.05;
  overflow:hidden; touch-action:pinch-zoom;   /* le swipe de pose (mode Manuel) bloque le défilement à un doigt, mais PAS le pincement */
}
/* Cases à prime (couleurs fidèles au plateau physique) + case centrale. */
.cell.w3{background:var(--w3);color:#fff}
.cell.w2{background:var(--w2)}
.cell.l3{background:var(--l3);color:#fff}
.cell.l2{background:var(--l2)}
.cell.center{background:var(--w2)}

/* Libellé d'une prime (« MOT COMPTE DOUBLE »…) : petit texte multi-lignes. */
.cell .premlabel{display:block;width:100%;font-family:Arial,Calibri,Helvetica,sans-serif;
                 font-size:calc(var(--cell-size) * .1875);line-height:1.25;font-weight:400;letter-spacing:0.25px;text-align:center;
                 word-break:break-word;opacity:.92;padding:0 1px}
/* Étoile de la case centrale. */
.cell.center .star{font-size:calc(var(--cell-size) * .556);line-height:1;color:#B00}

/* tuile posée */
/* Une case occupée prend l'aspect d'une tuile (dégradé crème, bord, encre). */
.cell.tile{
  background:linear-gradient(180deg,#f7eccd,var(--tile));
  border:1px solid var(--tile-edge); color:var(--tile-ink);
  font-size:var(--ghost-size);font-weight:700;cursor:default;
}
.cell.tile.blank{color:#9a3; }            /* joker posé : lettre verdâtre */
/* Petite valeur en bas à droite d'une tuile. */
.cell .val{position:absolute;right:2px;bottom:1px;font-size:calc(var(--cell-size) * .278);font-weight:600;opacity:.8}

/* ancres disponibles (après analyse) */
/* étoile crème marquant une case-ancre jouable (posée par renderBoard). */
.cell.anchor::after{
  content:"\2605";position:absolute;inset:auto;border-radius:50%;
  font-size:150%;
  color:var(--anchor);
  /*    background:var(--anchor);*/
}
/* Ancre ARMÉE (sélectionnée) : liseré accent (le curseur de candidats est actif). */
.cell.anchor.armed{outline:3px solid var(--anchor);outline-offset:-3px}
.cell.anchor.armed::after{content:"";}

/* mot fantôme (prévisualisation) */
/* Aperçu d'un coup candidat (survol de liste / curseur) : voile sombre + lettre
   crème, SANS modifier le plateau réel. */
.cell.ghost{
  background:rgba(18,26,22,.66)!important;
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.55);
}
.cell.ghost .gl{font-size:var(--ghost-size);font-weight:700;color:#f3e2b8}
/* pose manuelle refusée : clignotement rouge des tuiles tentées (increment 3) */
@keyframes badflash{0%,100%{background:transparent}25%,75%{background:rgba(201,42,42,.8)}}
.cell.badflash{animation:badflash .6s ease-in-out}
.cell.badflash .gl{font-size:var(--ghost-size);font-weight:700;color:#fff}

/* numéro d'ordre du coup : discret, en haut à gauche, visible au survol du groupe */
/* Pastille « n° du coup » sur la 1ʳᵉ tuile fraîche de chaque coup. Taille et
   marge en fonction de --cell-size (donc à l'échelle du plateau), chiffre centré par
   flex. opacity:0 par défaut : invisible tant qu'on ne survole pas (cf. règles
   .show-seq / :has ci-dessous). */
.cell .seq{
  position:absolute; top:1px; left:2px;
  display:inline-flex; align-items:center; justify-content:center;
  padding:calc(var(--cell-size) * .03) calc(var(--cell-size) * .06);
  border-radius:2px;
  font:700 calc(var(--cell-size) * .2)/1 roboto, system-ui, sans-serif;
  font-variant-numeric:tabular-nums;
  color:var(--tileorder); background:var(--tileorder-bg);
  opacity:0; transition:opacity .12s; pointer-events:none;
}

/* Survol d'UNE tuile numérotée -> tous les numéros s'allument (lecture d'ensemble). */
.board:has(.cell.moveno:hover) .cell.moveno .seq{opacity:1}
/* numéros révélés aussi au survol d'une ligne de l'historique */
/* (classe .show-seq posée en JS au survol d'une ligne de « Coups joués ».) */
.board.show-seq .cell.moveno .seq{opacity:1}
/* le coup survolé dans la liste ressort parmi les autres */
/* (.seq-hot posée en JS sur le coup correspondant : plus gros + fond accent.) */
.board .cell.moveno.seq-hot .seq{
  opacity:1; color:#fff; background:var(--accent);
  font-size:calc(var(--cell-size) * .30); z-index:2;
}
/* mini-curseur de candidats ancré à la case */
/* Barre flottante ◀ pos/total mot pts ▶ ✓ affichée sous le plateau quand une
   ancre est armée (showCursor). Largeurs fixes en « ch » -> pas de sautillement. */
.cursor{background:#fff;border:1px solid var(--accent);
        border-radius:8px;padding:4px 6px;display:flex;gap:6px;align-items:center;
        box-shadow:0 2px 8px rgba(0,0,0,.12);font-size:16px;white-space:nowrap;
        box-sizing:border-box;max-width:100%;min-width:0;
       }
#cursor-host{display:none;justify-content:center;margin:8px 0 0;width:var(--board-w);max-width:100%}   /* masqué tant qu'aucune ancre n'est armée ; borné par le plateau */
.cursor button{padding:2px 8px;border-radius:6px;flex:none}
.cursor .pos{color:#555;font-variant-numeric:tabular-nums;display:inline-block;min-width:7ch;text-align:center;flex:none}
.cursor .pts{font-weight:700;color:var(--good);font-variant-numeric:tabular-nums;display:inline-block;min-width:7ch;text-align:right;flex:none}
/* le mot absorbe l'espace restant (au lieu d'un 15ch figé qui faisait déborder la barre) */
.cursor .word{font-family:ui-monospace,Consolas,monospace;flex:1 1 auto;width:auto;min-width:15ch;text-align:center;display:inline-block;overflow:hidden;text-overflow:ellipsis;font-size:large;}

/* ========== RACK + HISTOGRAMME (SOUS LE PLATEAU) ========== */
/* Barre du chevalet, calée EXACTEMENT sur la largeur du plateau
   (96px de gouttières + 15 cases). Trois zones flex (gauche|centre|droite). */
.rack{display:flex;align-items:center;gap:4px;
      width:var(--board-w);   /* largeur exacte du plateau */
      margin:14px 0 6px}
/* Zones latérales : la gauche pousse son contenu à droite (vers la glissière),
   la droite à gauche -> sablier et sac « collés » au porte-jetons central. */
.rack-side{flex:1 1 0;min-width:0;display:flex;flex-direction:row;flex-wrap:nowrap;align-items:center;gap:6px}
.rack-side.rs-left{justify-content:flex-end}
.rack-side.rs-right{justify-content:flex-start}

/* Rangée d'action : [minuteur] [bouton] [vide]. La grille « 1fr auto 1fr » donne
   aux deux zones latérales la MÊME largeur, donc le bouton reste centré quelle que
   soit la largeur du minuteur — et la rangée a la largeur exacte du plateau, comme
   .rack, donc bouton et chevalet partagent le même axe de symétrie. */
.action-row{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
      width:var(--board-w);
      margin:10px 0 2px}
.action-side{min-width:0;display:flex;align-items:center}
.action-side.as-left{justify-content:flex-end;padding-right:12px}
.action-row #btn-analyze{margin:0}
.action-side .timer-run{margin-right:0}

/* Sélecteur de lettre du joker (mode Manuel) : masqué tant qu'aucun joker n'est en
   attribution — même patron que #cursor-host. Réutilise les pastilles .hcell/.htile
   de l'histogramme. File qui passe à la ligne, bornée par le plateau : pas de
   colonnes figées (cf. la leçon de .histo). */
#joker-host{display:none}
#joker-host.open{display:block;width:var(--board-w);max-width:100%;margin:6px 0 2px}
.joker-pick{display:flex;flex-wrap:wrap;gap:5px;justify-content:center;
            background:var(--panel);border:1px solid var(--accent);border-radius:8px;padding:8px}
.joker-pick .htile{cursor:pointer}
.joker-pick .jk-clear{color:#9a3;font-weight:400}   /* re-vierger le joker */

/* ============ SABLIER + SAC RESERVE ===================*/
/* (démarre/arrête le minuteur ; .running = en marche).  */
.hourglassbtn, .bagbtn{
  flex:0 0 var(--btnrack-size);
  width:var(--btnrack-size);
  height:var(--btnrack-size);
  padding:0;
  border:1px solid var(--line);
  border-radius:8px;
  background:#DDE;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#7a5a2a
}
.hourglassbtn:hover, .bagbtn:hover{
  border-color:var(--accent);
  background:#f4f8fd
}
.hourglassbtn.running{
  border-color:var(--accent);
  background:#eef5fd
}
.hourglassbtn::before{
  font-size:x-large;
  content:"⏳";
}
.bagbtn::before{
  font-size:x-large;
  content:"👜";
}

/* ================= TIMER =========================== */
/* Affichage mm:ss du minuteur. .settable = réglable (à l'arrêt) -> champs
   survolables ; .running = bleu (décompte) ; .over = rouge (temps écoulé). */
.timer-run{
  display:flex;
  align-items:center;
  font-size:24px;
  font-family:monospace;
  font-weight:200;
  color:#555;
  line-height:1;
  user-select:none;
  margin-right:0.5em;
}
.timer-run .t-col{
  margin:0 1px
}
.timer-run .t-field{
  padding:1px;
  border-radius:4px;
  border:1px solid transparent
}
.timer-run.settable .t-field{
  cursor:pointer;
}
.timer-run.settable .t-field:hover{
  background:#eef5fd;
  color:var(--accent);
  border-color:black}
.timer-run.running{
  color:var(--accent)
}
.timer-run.over{
  color:var(--warn)
}

/* (.slot/.slot-wrap : ancien rack à « cases » fixes, conservé pour compat ;
 le  chevalet actif est la glissière .glissiere/.rtile plus bas.) */
.slot{
  width:var(--bigtiles-size);
  height:var(--bigtiles-size);
  border:2px solid var(--tile-edge);
  border-radius:6px;
  background:#FFF;
  text-align:center;
  font-size:28px;
  font-weight:700;
  color:var(--tile-ink);
  text-transform:uppercase;

}
.slot:focus{outline:2px solid var(--accent);background:#fffef5}
.slot-wrap{position:relative;display:inline-flex}
.slot-wrap.filled .slot{background:var(--tile)}    /* crème dès qu'un jeton est posé */
.slot-wrap .sval{position:absolute;right:3px;bottom:1px;font-size:10px;font-weight:600;
                 color:var(--tile-ink);opacity:.8;pointer-events:none}

/* CHEVALET : cadre visible qui matérialise son étendue */
/* Le cadre bleu (plus large que 7 jetons) rend visible l'espace où l'on peut
   SÉPARER les deux blocs (mot | réserve). */
.rack-tray{flex:0 0 auto;padding:6px;border-radius:8px 8px 0 0;
           background:linear-gradient(180deg,#DDF,#AAC);
           border-style:solid;border-color:#1463B8;border-width:2px 2px 4px 2px;
           box-shadow:inset 0 1px 0 rgba(255,255,255,.18), inset 0 -2px 4px rgba(0,0,0,.3), 0 1px 2px rgba(0,0,0,.2)}
/* glissière : jetons déplaçables en deux blocs (mot à gauche | réserve à droite) */
/* Conteneur à position relative : les jetons (.rtile) sont positionnés en absolu
   à l'intérieur, leur `left` étant calculé par rackTileX() en JS. */
.glissiere{position:relative;height:var(--bigtiles-size);outline:none}
.glissiere:focus-visible{box-shadow:0 0 0 2px var(--accent);border-radius:6px}
/* Un jeton du rack : tuile crème positionnée en absolu ; transition sur `left`
   pour animer le glissement de coupure. */
.rtile{position:absolute;top:0;width:var(--bigtiles-size);height:var(--bigtiles-size);
       display:flex;align-items:center;justify-content:center;
       border:2px solid var(--tile-edge);border-radius:6px;
       background:linear-gradient(180deg,#f7eccd,var(--tile));color:var(--tile-ink);
       font:700 calc(var(--bigtiles-size) * .667)/1 "Segoe UI",system-ui,Arial,sans-serif;text-transform:uppercase;
       cursor:grab;user-select:none;touch-action:none;transition:left .14s ease}
.rtile.joker{color:#9a3}                       /* joker : lettre verdâtre (vide si non assigné) */
.rtile.desjoker{text-transform:none}           /* joker attribué : minuscule, même fonte/couleur sombre qu'une tuile [3b] */
/* en mode Manuel, un joker (vierge ou attribué) est ÉDITABLE au clavier -> curseur « | » plutôt que la main de préhension [3b] */
.glissiere.manuel .rtile.joker, .glissiere.manuel .rtile.desjoker{cursor:text}
.rtile.editing{outline:2px solid var(--accent,#1463b8);outline-offset:-2px}  /* joker en cours d'attribution [3b] */
.rtile .rv{position:absolute;right:calc(var(--bigtiles-size) * .07);bottom:calc(var(--bigtiles-size) * .024);
           font-size:calc(var(--bigtiles-size) * .238);font-weight:600;opacity:.8;pointer-events:none}
/* Jeton en cours de glissé : décollé, agrandi, ombré ; pas de transition (suit
   le doigt/souris au pixel). */
.rtile.dragging{transition:none;z-index:6;transform:translateY(-10px) scale(1.05);
                border-color:var(--accent);box-shadow:0 8px 16px rgba(0,0,0,.35);cursor:grabbing}

/* Histogramme des lettres (14 colonnes) : valeur + nb restant ; clic = ajout au rack. */
/* Les 26 pièces + joker + tuile de langue : FILE qui passe à la ligne, bornée par
   la largeur du plateau (la symétrie 13+13 n'est plus imposée). Sans cela, une
   grille figée (repeat(14,34px) = 541px) forçait la colonne et empêchait le
   plateau de rétrécir sur mobile. */
.histo{display:flex;flex-wrap:wrap;gap:5px;margin-top:12px;justify-content:start;
       width:var(--board-w);max-width:100%}
.hcell{display:flex;flex-direction:column;align-items:center;gap:2px;cursor:pointer}
.hcell:hover .htile{border-color:var(--accent);color:#88F;border-width:2px}
.htile{position:relative;width:32px;height:32px;border-radius:4px;
       background:linear-gradient(180deg,#f0dca6,#e3c986);border:1px solid #b39450;
       box-shadow:inset 0 1px 0 rgba(255,255,255,.5), 0 1px 2px rgba(0,0,0,.15);
       color:#3a2f1c;font-weight:700;font-size:18px;
       display:flex;align-items:center;justify-content:center}
.htile .v{position:absolute;right:2px;bottom:1px;font-size:8px;font-weight:600;opacity:.75}
/* le joker partage le fond des autres tuiles */
.hcell .rem{font-size:11px;color:#444;font-variant-numeric:tabular-nums}   /* « ×n » restant */
.hcell.empty .htile{opacity:.4}        /* lettre épuisée : grisée */
.hcell.empty .rem{opacity:.55}

/* =============== PANNEAU DROIT ================ */
/* Carte générique des panneaux de droite (Coups/Motif/Dico, Historique). */
.panel{background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:12px;margin-bottom:0.25em;}
.panel h2{font-size:14px;margin:0 0 8px;color:#654;text-transform:uppercase;letter-spacing:.4px}
.htot{color:var(--good);font-weight:700;text-transform:none;margin-right:1.15em;letter-spacing:0}   /* total points de l'historique */
#moves-info{font-size:11px;line-height:1.3}   /* ligne d'info de l'analyse */
/* Conteneur scrollable d'une liste (coups, historique). */
.list{max-height:340px;overflow:auto;font-variant-numeric:tabular-nums;line-height:1.0}
/* Une ligne de liste : rang | mot | coordonnée | points | lien déf. Survol et
   .hot (ligne synchronisée au curseur) la surlignent. */
.row{display:flex;gap:8px;padding:2px 6px;border-radius:4px;cursor:pointer;font-size:90%;align-items:baseline}
.row:hover, .row.hot{background:#46B8CF;}
.row .rk{color:var(--tileorder-bg);width:3ch;text-align:right}   /* rang */
.row:hover .rk{color:#FFF;background:#1463b8;border-radius:2px;padding-right:2px;font-weight:700}
.row .wd{font-weight:700;flex:1}                                   /* mot */
.row .wd .onb{color:var(--fixedletter)}        /* lettres déjà sur le plateau */
/* HISTORIQUE : mot ET tirage dans la MÊME chasse fixe (alignement + cohérence).
   Le tirage occupe 7 cases figées ; posées sombres (.u), reliquat clair (.l),
   cases vides du chevalet (.e). Largeurs fixes -> « → » et le mot s'alignent. */
.hist .row .wd, .hist .row .draw{font-family:monospace,ui-monospace,"Space Mono";letter-spacing:0.5px}
.hist .row .draw{display:inline-block;width:7ch;white-space:nowrap;flex:none}
.hist .row .draw .u{color:#1a1a1a;font-weight:400}    /* tuile posée */
.hist .row .draw .l{color:#c7b0b9;font-weight:400}    /* reste au chevalet */
.hist .row .draw .e{color:#c7b0b9;font-weight:400}    /* case vide du chevalet (_) */
.hist .row .arw{display:inline-block;width:1.6ch;text-align:center;color:#9fb7a6;flex:none}  /* → */
.row .co{color:#666;width:4ch;white-space:nowrap}                 /* coordonnée */
.row .pt{font-weight:700;color:var(--good);width:4ch;text-align:right}  /* points */
.row.bingo .wd{color:var(--bingo)}       /* scrabble (7 tuiles) : mot en bleu */
/* Onglets du panneau droit ; .active = onglet courant (plein accent). */
.tabs{display:flex;gap:6px;margin-bottom:10px}
.tabs button.active{background:var(--accent);color:#fff;border-color:var(--accent)}
/* Boîte de saisie du motif (champ + bouton) ; saisie forcée en MAJUSCULES. */
.motifbox{display:flex;gap:6px;margin-bottom:8px}
.motifbox input{flex:1;font:inherit;padding:3px 5px;border:1px solid var(--line);border-radius:6px;text-transform:uppercase;letter-spacing:1px;font-size:100%;font-weight:700;color:#C22}
.motifbox input::placeholder{color:#A8A8A8;font-weight:200}
/* Couleurs pour les mots qui satisfont le motif */
/* Résultats du motif : par défaut en rouge (lettres FIXÉES), .wc = en encre
   (positions LIBRES : '.', classes). */
.rawlist{font-weight:700;font-family:ui-monospace,Consolas,monospace;font-size:12px;word-spacing:0px;line-height:1.6;color:var(--fixedletter);max-height:360px;overflow:auto}
.rawlist .wc{color:var(--freeletter)}

/* Lien « mot » discret (hérite la couleur, souligné au survol). */
a.dico{color:inherit;text-decoration:none}
a.dico:hover{text-decoration:underline}
/* Petite flèche « définition » (↗) en fin de ligne. */
.row .def{width:18px;text-align:center;color:#c2c2bb;text-decoration:none;font-weight:700}
.row .def:hover{color:var(--accent)}
/* Historique : lignes non cliquables, sauf .replayable (double-clic = rembobiner). */
.hist .row{cursor:default}
.hist .row.replayable{cursor:pointer}
.hist .row.bingo .wd{color:var(--bingo)}    /* scrabble dans l'historique : doré */
.muted{color:#888}                     /* texte secondaire */
/* Touche clavier stylisée dans l'aide (ex. la barre d'espace, Entrée…). */
.kbd{font:10px ui-monospace,monospace;background:#FFF;border:1px solid #888;border-radius:4px;padding:2px 5px 2px 5px;margin: 0px 2px 0px 2px}


/* Panneau d'aide repliable, calé sur la largeur du plateau, sous le rack. */
.left details.help.panel{
  width:var(--board-w);   /* largeur du plateau */
  max-width:100%;
  margin-top:1em;
}

/* Masque le marqueur natif de <details> (on stylise notre propre en-tête). */
details.help > summary{
  list-style:none; cursor:pointer;
}

details.help > summary::-webkit-details-marker{display:none}
details.help .help-title{
  font-size:13px;color:#444;text-transform:uppercase;letter-spacing:.4px;font-weight:700;
}

/* Réglage de taille du texte d'aide : deux boutons +/- flottant en haut à droite. */
details.help .help-size{float:right;display:inline-flex;margin:-2.25rem 0 0 6px;
                        border:2px solid #c7d4e3;border-radius:8px;overflow:hidden;background:#e8eef6}
details.help .help-size button{
  border:0;border-radius:0;margin:0;padding:2px 10px;
  background:transparent;color:var(--accent);
  font:700 16px/1.4 "Segoe UI",system-ui,sans-serif;cursor:pointer}
details.help .help-size button + button{border-left:4px solid #b0c5e3}
details.help .help-size button:hover{background:var(--accent);color:#fff}
details.help .help-size button:disabled{opacity:.45;cursor:default;background:transparent;color:var(--accent)}

details.help .help-body{margin-top:8px;text-align:justify}
details.help .help-body .kbd{font-size:.85em}          /* le kbd suit la taille */
/* trois paliers : actuel → ×1,5 → ×2 */
/* (classes .sz-1 / .sz-2 posées par setupHelp() en JS.) */
#help .help-body{font-size:.75rem}
#help.sz-1 .help-body{font-size:1.125rem}
#help.sz-2 .help-body{font-size:1.5rem}

/* Vérification « à la volée » du mot formé par le bloc gauche du chevalet */
/* Bord vert / rouge sur les jetons du bloc gauche selon que ces lettres forment
   (ou non) un mot valide. :not(.dragging) -> on ne colore pas un jeton en plein
   glissé (le style .dragging prime alors). */
.rtile.wcheck-ok:not(.dragging){
  border-color:var(--good);
  box-shadow:0 0 0 2px rgba(32,128,42,.35);
}
.rtile.wcheck-bad:not(.dragging){
  border-color:var(--warn);
  box-shadow:0 0 0 2px rgba(128,32,32,.35);
}

#cur-ok, #cur-prev, #cur-next{
    min-width:2em;
    min-height:2em;    
    max-width:2em;
    max-height:2em;
    font-size:100%;
    font-weight:700;
    padding:0px 0px 1px 0px;
    line-height:baseline;
    background:var(--wordcycle-bg);
    color:var(--wordcycle);    
}
#cur-ok:hover, #cur-prev:hover, #cur-next:hover{
    color:var(--wordcycle-hover);    
}


#btn-analyze[data-mode="manuel"]::before{
  content: "";
  font-weight:200;
}
#btn-analyze[data-mode="manuel"]::after{
  content: "⚙ ANALYSER";
  font-weight:200;
}
#btn-analyze[data-mode="analyse"]::after{
  content: "";
  font-weight:200;    
}
#btn-analyze[data-mode="analyse"]::before{
  content: "⌨ SAISIR UN MOT";
  font-weight:200;
}

#btn-analyze[data-mode="manuel"]:hover::before,
#btn-analyze[data-mode="analyse"]:hover::after{
  color:#FFF;
  font-weight:200;    
}

#btn-analyze[data-mode="analyse"]:hover::before,
#btn-analyze[data-mode="manuel"]:hover::after{
  color:#FF0;
  font-weight:700;    
}

/* Boutons de dictionnaire : un seul flux, passage à la ligne si ça déborde.
   Préréglages (ODS9, CSW24…) et « votre dico » sont traités à l'identique. */
.dico-presets{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-bottom:8px}
.dictionnary{
  background:#ED0;
  font-family:calibri;
  font-size:small;
  text-transform:uppercase;
  transition:background .15s, opacity .15s;
}
.dictionnary::before{
  content:"\01F56E\2000";
}
/* Les dictionnaires s'excluent (XOR) : l'ACTIF garde la couleur pleine,
   les inactifs sont atténués (mais se réveillent au survol). */
.dictionnary:not(.active){background:#F2EBC7;color:#777;opacity:.6}
.dictionnary:not(.active):hover{opacity:1;color:#333}
.dictionnary.active{background:#ED0;color:#000;font-weight:700;box-shadow:inset 0 0 0 2px #A80}


@media (max-width: 760px){
  /* Le PLATEAU commande : on rétrécit d'abord ses bandes de coordonnées (elles
     étaient plus larges qu'une case), puis on déduit --cell-size de la largeur
     disponible via la formule même de --board-w. Tout le reste (chevalet, rangée
     d'action, histogramme, panneaux, aide) s'y conforme automatiquement. */
  :root{
      --coord: 13px;
      --board-gap: 1px;
      --cell-size: min(36px, calc((100vw - 2 * var(--coord) - 16 * var(--board-gap) - 4px) / 15));
      /* ATTENTION : --bigtiles-size est LU EN JS (rackGeom, parseInt) -> il doit rester
       une valeur px LITTÉRALE. Un calc() renverrait NaN. Idem par cohérence pour le
       sablier/sac.  Sinon le chevalet (7 jetons + sablier + sac) déborde du plateau. */
      --bigtiles-size: 28px; /* <============ !!!!! */
      --btnrack-size: 30px;
  }

  h1{font-size:small;letter-spacing:.04em;text-align:center}   /* le titre ne doit plus imposer la largeur */

  /* Barre d'actions au-dessus du plateau : réduite sur mobile pour tenir sans que
     « Jouer » (bouton en plus) ne fasse déborder/casser la ligne. Hauteur libérée
     (la hauteur fixe 2.5em clipperait en cas de passage à la ligne). */
  .bar{height:auto;gap:5px;margin-bottom:8px}
  .bar button{font-size:.82em;padding:3px 6px;min-height:1.9em}

  /* cibles tactiles : les pastilles de l'histogramme (32px) sont trop justes pour le pouce */
  .joker-pick .htile{width:40px;height:40px;font-size:22px}

  /* Le bandeau des meilleurs coups est AGRANDI sur mobile. */
  .cursor       { font-size:15px; gap:4px; padding:4px 4px; }
  .cursor button{ padding:3px 8px; }
  .cursor .pos  { min-width:5ch }
  .cursor .pts  { min-width:4ch }

  .app{
    padding:0px;
    grid-template-columns: minmax(0,1fr);   /* une seule colonne, qui peut rétrécir */
    grid-template-rows: auto;               /* plus de 2e rangée imposée */
  }
  .left { grid-column:1; grid-row:auto; }   /* annule le span 2 rangées */
  /* .right passe sous .left, calée sur la largeur du plateau et centrée. */
  .right{ grid-column:1; grid-row:auto; margin-top:0em !important;
          width:var(--board-w); max-width:100%;
          margin-left:auto; margin-right:auto; }
}
/* Écrans très étroits : les jetons du rack doivent encore rétrécir (px littéral). */
@media (max-width: 399px){
  :root{ --bigtiles-size: 36px; --btnrack-size: 32px; }
}


/* [bloc 4e] Feuille de match (mode jeu, dans #history) — pile, format figé. */
#history{overflow-x:auto;max-width:100%}   /* si le plateau (donc le panneau) est plus étroit que la ligne (mobile) : défilement, pas de débordement */
/* Historique du mode ANALYSE : ne pas étaler sur toute la largeur du panneau élargi (520) ;
   on borne ces lignes à ~l'ancienne largeur, alignées à gauche. La feuille de match (.row.match) n'est pas concernée. */
#history .row:not(.match){max-width:380px}
.hist .row.match{display:block;white-space:pre;font-family:monospace,ui-monospace,"Space Mono";
  font-size:85%;letter-spacing:0;line-height:1.5;cursor:default}
.hist .row.match .rk{color:var(--tileorder-bg)}
.hist .row.match .draw{color:#8a7f86;font-weight:400}
.hist .row.match .cj,.hist .row.match .co,.hist .row.match .rr{color:#8a7f86;font-weight:400}
/* cellules mot : largeur fixe 15ch, joué vers la DROITE, optimal vers la GAUCHE (miroir) */
.hist .row.match .wj{display:inline-block;width:15ch;text-align:right;font-weight:700;vertical-align:baseline}
.hist .row.match .wo{display:inline-block;width:15ch;text-align:left;font-weight:700;vertical-align:baseline}
.hist .row.match .wj .muted,.hist .row.match .wo .muted{font-weight:400;color:#9aa}
.hist .row.match .sep{color:#9aa}
.hist .row.match .pc{font-weight:700;color:var(--good)}
.hist .row.match .pc.top{color:var(--fixedletter)}   /* joué = optimal : =100% en gras rouge */
.hist .row.match.top100{background:rgba(255,215,0,.06)}