/* Jeu « Chaud ou Froid » : salon de départ, saisie, liste des essais classés par
   proximité, équipe, traînée de paliers (Classement) et pastilles des règles.
   Préfixe .cf- ; les couleurs de chaleur --heat-0…7 sont déclarées dans les
   QUATRE blocs de thème d'app.css (en rouge : rampe de clarté, sans bleu). */

/* ---------- Écran de jeu : le champ en haut, la liste défile en dessous ---------- */
.play.cf{align-items:stretch}
.cf-main{flex:1 1 auto;min-height:0;width:min(560px,100%);margin:0 auto;display:flex;
  flex-direction:column;gap:8px}
.cf-form{display:flex;gap:6px;flex:0 0 auto}
/* 16 px : en dessous, iOS zoome sur le champ au focus. */
.cf-input{flex:1;min-width:0;font-size:16px;padding:10px 12px;border-radius:11px;
  border:1px solid var(--border-strong);background:var(--surface);color:var(--text);
  font-family:inherit;outline:none}
.cf-input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.cf-input.shake{animation:cf-shake .45s}
@keyframes cf-shake{10%,90%{transform:translateX(-2px)}20%,80%{transform:translateX(4px)}
  30%,50%,70%{transform:translateX(-6px)}40%,60%{transform:translateX(6px)}}
.cf-tools{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:12px;
  color:var(--text-2);flex:0 0 auto}
.cf-count{flex:1;min-width:0}
.cf-team{font-size:12px;color:var(--text-2);flex:0 0 auto}
.cf-team .cf-quit{opacity:.55;text-decoration:line-through}
.cf-last{flex:0 0 auto}
.cf-last:empty{display:none}
.cf-last .cf-row{border:1px solid var(--accent);border-radius:12px;background:var(--surface);
  box-shadow:var(--shadow)}
/* La seule zone qui défile (même recette que .msgs des fils). */
.cf-list{flex:1 1 auto;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;border:1px solid var(--border);border-radius:12px;background:var(--surface)}
.cf-row{display:grid;grid-template-columns:58px 1fr auto auto;
  grid-template-areas:"sim word lvl rank" "bar bar bar bar";gap:2px 8px;align-items:center;
  padding:7px 10px 6px;border-top:1px solid var(--border);--heat:var(--heat-0)}
.cf-row.by{grid-template-columns:58px 20px 1fr auto auto;
  grid-template-areas:"sim by word lvl rank" "bar bar bar bar bar"}
.cf-list .cf-row:first-child{border-top:0}
/* La similarité est le nombre principal, colorée par le palier ; le rang (#12)
   n'apparaît que dans les 1 000 premiers noms. */
.cf-sim{grid-area:sim;font-weight:800;font-variant-numeric:tabular-nums;color:var(--heat)}
.cf-rank{grid-area:rank;font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums;
  min-width:40px;text-align:right}
.cf-lemme{font-weight:400;color:var(--text-2);font-size:11px}
.cf-by{grid-area:by;width:20px;height:20px;border-radius:50%;background:var(--accent-soft);
  color:var(--accent);font-size:10px;font-weight:800;display:grid;place-items:center}
.cf-word{grid-area:word;font-weight:700;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cf-row.hint .cf-word{font-style:italic}
.cf-lvl{grid-area:lvl;font-size:12px;color:var(--text-2);white-space:nowrap}
.cf-bar{grid-area:bar;height:4px;border-radius:2px;background:var(--surface-2);overflow:hidden}
.cf-bar i{display:block;height:100%;background:var(--heat);border-radius:2px}
/* En rouge, les émojis passent par le même filtre que les photos. */
.cf-emoji{font-style:normal;filter:var(--photo-filter)}
.l0{--heat:var(--heat-0)}.l1{--heat:var(--heat-1)}.l2{--heat:var(--heat-2)}.l3{--heat:var(--heat-3)}
.l4{--heat:var(--heat-4)}.l5{--heat:var(--heat-5)}.l6{--heat:var(--heat-6)}.l7{--heat:var(--heat-7)}
.cf-row.last{box-shadow:inset 0 0 0 2px var(--accent)}
/* Mot retapé : remontré dans la ligne épinglée, cadre pointillé et badge. */
.cf-last .cf-row.deja{border-style:dashed}
.cf-deja{font-size:11px;font-weight:600;color:var(--text-2);background:var(--surface-2);
  border-radius:999px;padding:1px 7px;margin-left:6px;vertical-align:middle}
.cf-empty{padding:18px 14px;color:var(--text-2);font-size:13px;text-align:center}
.cf-end{flex:0 0 auto;display:flex;justify-content:center}
.cf-end:empty{display:none}
.cf .endcard .sol{letter-spacing:1px}
/* Les voisins du secret (fin de partie) : repliés par défaut pour que la carte
   laisse de la place à la liste des essais ; dépliés, ils défilent dans la carte. */
.cf-nearest{font-size:13px;text-align:left;margin:2px 0 4px}
.cf-nearest summary{cursor:pointer;color:var(--text-2);font-size:12.5px;text-align:center;
  list-style:none;user-select:none}
.cf-nearest summary::before{content:"▸ ";font-size:11px}
.cf-nearest[open] summary::before{content:"▾ "}
.cf-nearest summary::-webkit-details-marker{display:none}
.cf-near-list{display:grid;grid-template-columns:1fr 1fr;gap:2px 12px;margin-top:6px;
  max-height:min(30vh,200px);overflow-y:auto;-webkit-overflow-scrolling:touch}
.cf-near-list span{display:flex;justify-content:space-between;gap:6px;min-width:0;
  font-weight:600;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.cf-near-list i{font-style:normal;font-weight:400;color:var(--muted);font-variant-numeric:tabular-nums}
.cf-near-list .deja{color:var(--text-2);font-weight:400;text-decoration:underline dotted}

/* ---------- Salon : seul, en équipe, rejoindre ---------- */
.cf-lobby{background:var(--surface);border:1px solid var(--border);border-radius:16px;
  box-shadow:var(--shadow);padding:14px;display:flex;flex-direction:column;gap:10px;
  overflow-y:auto;min-height:0}
.cf-lobby h3{font-size:16px;font-weight:800}
.cf-lobby .cap{font-size:12.5px;color:var(--text-2)}
.cf-lobby-league{border-top:1px solid var(--border);padding-top:10px;display:flex;
  flex-direction:column;gap:8px}
.cf-lobby-head{display:flex;justify-content:space-between;align-items:baseline;gap:8px;flex-wrap:wrap}
.cf-lobby-team{display:flex;justify-content:space-between;align-items:center;gap:8px;
  background:var(--surface-2);border-radius:12px;padding:8px 10px}
.cf-lobby-new{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.cf-check{font-size:12.5px;color:var(--text-2);display:flex;align-items:center;gap:6px}

/* ---------- Traînée (Classement) : une barre par palier, largeur fixe comme .mgrid ---------- */
.cf-trail{display:flex;align-items:flex-end;gap:2px;width:30px;height:16px;flex-shrink:0}
.cf-trail i{flex:1;min-height:2px;border-radius:1px;background:var(--heat);--heat:var(--heat-0)}

/* ---------- Règles (Profil → Comment jouer) ---------- */
.cf-pal{display:inline-block;padding:2px 7px;border-radius:999px;background:var(--surface-2);
  font-size:12px;margin:2px 0;border-left:4px solid var(--heat)}