/* ============================================================
   motscroises/assets/css/game.css
   Page visiteur Mots Croisés (CruceX) — famille MOTS (rouge)
   Prefixe .cxg-* (le admin utilise .cx-*)
   ============================================================ */

.cxg { padding-bottom: var(--space-12); }

/* ===== Sections ===== */
.cxg-section { margin-top: var(--space-8); }
.cxg-section__head {
  display: flex; align-items: baseline; gap: var(--space-4);
  margin-bottom: var(--space-5);
}
.cxg-section__title {
  font-family: var(--font-title); font-size: 1.25rem; letter-spacing: 4px;
  color: var(--red);
}
.cxg-section__line { flex: 1; height: 1px; background: var(--border); }
.cxg-section__meta { font-size: .72rem; color: var(--muted); letter-spacing: 1px; white-space: nowrap; }

/* ===== Etats (chargement / aucune partie) ===== */
.cxg-state {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--space-3); text-align: center;
  padding: var(--space-12) var(--space-6); color: var(--muted-2);
}
.cxg-state--sm { padding: var(--space-6); }
.cxg-state__big {
  font-family: var(--font-title); font-size: 1.1rem; letter-spacing: 3px; color: var(--muted);
}
.cxg-state__sub { font-size: .85rem; color: var(--muted-2); max-width: 440px; }
.cxg-spin {
  width: 26px; height: 26px; border-radius: 50%;
  border: 2px solid var(--border-2); border-top-color: var(--red);
  animation: cxg-spin .8s linear infinite;
}
@keyframes cxg-spin { to { transform: rotate(360deg); } }

/* ===== Plateau : grille + definitions ===== */
.cxg-board {
  display: flex; gap: var(--space-8); align-items: flex-start; flex-wrap: wrap;
}
.cxg-gridwrap { flex-shrink: 0; }
.cxg-grid {
  display: grid; gap: 2px; background: #262636; padding: 2px;
  border-radius: var(--radius-sm);
}
.cxg-cell {
  position: relative; background: var(--surface-2);
  border: 1px solid #2a2a3a; border-radius: 2px;
  display: flex; align-items: center; justify-content: center;
}
.cxg-cell--black { background: #0a0a14; border: none; }
.cxg-cell--found { background: rgba(255, 60, 110, .18); border-color: rgba(255, 60, 110, .45); }
.cxg-cell__num {
  position: absolute; top: 1px; left: 3px;
  font-size: 9px; line-height: 1; color: var(--muted);
}
.cxg-cell--found .cxg-cell__num { color: var(--pink); }
.cxg-cell__letter { font-weight: 500; color: var(--pink); }

/* ===== Definitions ===== */
.cxg-clues {
  flex: 1; min-width: 240px; display: flex; gap: var(--space-8);
}
.cxg-clues__col { flex: 1; min-width: 0; }
.cxg-clues__title {
  font-family: var(--font-title); font-size: .95rem; letter-spacing: 4px;
  color: var(--red); margin-bottom: var(--space-3); font-weight: 400;
}
.cxg-clues__list { list-style: none; }
.cxg-clues__list li {
  font-size: .8rem; line-height: 1.5; color: #d2d2e0; margin-bottom: var(--space-2);
}
.cxg-clues__list li.is-found { color: var(--muted); text-decoration: line-through; text-decoration-color: rgba(255, 60, 110, .5); }
.cxg-clues__list .n { color: var(--pink); margin-right: 6px; font-weight: 500; }
.cxg-clues__list li.is-found .n { color: var(--red); }
.cxg-clues__list .len { color: var(--muted); }
.cxg-clues__list .who { color: var(--green); font-size: .72rem; margin-left: 4px; }

/* ===== Rappel comment jouer ===== */
.cxg-howto {
  margin-top: var(--space-5); padding: var(--space-3) var(--space-4);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-md); font-size: .8rem; color: var(--muted-2);
}
.cxg-howto strong { color: var(--text); font-weight: 500; }
.cxg-howto__note { color: var(--muted); margin-left: 4px; }

/* ===== Mini classement ===== */
.cxg-lb { margin-top: var(--space-4); display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; }
.cxg-lb__title { font-family: var(--font-title); font-size: .8rem; letter-spacing: 3px; color: var(--muted); }
.cxg-lb__row { display: flex; gap: var(--space-3); flex-wrap: wrap; }
.cxg-lb__item {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: var(--space-1) var(--space-3); border-radius: var(--radius-pill);
  background: var(--surface); border: 1px solid var(--border); font-size: .78rem;
}
.cxg-lb__item .pts { color: var(--gold); font-weight: 500; }
.cxg-lb__item:first-child { border-color: rgba(255, 209, 102, .35); }

/* ===== Propose tes mots ===== */
.cxg-propose { padding: var(--space-6); }
.cxg-propose__head { margin-bottom: var(--space-2); }
.cxg-propose__sub { font-size: .82rem; color: var(--muted-2); line-height: 1.6; margin-bottom: var(--space-5); max-width: 620px; }

.cxg-form__row { display: flex; gap: var(--space-4); flex-wrap: wrap; }
.cxg-field { display: flex; flex-direction: column; gap: var(--space-2); min-width: 160px; }
.cxg-field--grow { flex: 1; min-width: 220px; }
.cxg-label {
  font-family: var(--font-title); font-size: .72rem; letter-spacing: 2px;
  color: var(--muted-2); text-transform: uppercase;
}
.cxg-opt { color: var(--muted); letter-spacing: 1px; }
.cxg-input {
  width: 100%; padding: var(--space-3) var(--space-4);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-md); color: var(--text);
  font-family: var(--font-body); font-size: .9rem; transition: var(--transition);
}
.cxg-input:focus { outline: none; border-color: var(--red); background: var(--surface-2); }
.cxg-input::placeholder { color: var(--muted); }
#cxg-word { text-transform: uppercase; letter-spacing: 1px; }

.cxg-form__foot {
  display: flex; align-items: center; justify-content: flex-end;
  gap: var(--space-4); margin-top: var(--space-4); flex-wrap: wrap;
}
.cxg-form__msg { font-size: .8rem; margin-right: auto; }
.cxg-form__msg.is-ok  { color: var(--green); }
.cxg-form__msg.is-err { color: var(--red); }

.cxg-login { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; }
.cxg-login p { font-size: .85rem; color: var(--muted-2); }

/* ===== Mes propositions ===== */
.cxg-hist { display: flex; flex-direction: column; gap: var(--space-2); }
.cxg-hist__item {
  display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap;
  padding: var(--space-3) var(--space-4);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
.cxg-hist__word { color: var(--text); font-weight: 500; letter-spacing: 1px; }
.cxg-hist__def { color: var(--muted-2); font-size: .82rem; flex: 1; min-width: 120px; }
.cxg-hist__status {
  padding: 2px 10px; border-radius: var(--radius-pill);
  font-size: .65rem; letter-spacing: 1px; text-transform: uppercase; white-space: nowrap;
}
.cxg-st-pending  { background: rgba(255, 209, 102, .12); color: var(--gold); }
.cxg-st-accepted { background: rgba(60, 255, 180, .1);   color: var(--green); }
.cxg-st-rejected { background: rgba(255, 255, 255, .05); color: var(--muted); }

/* ===== Toast ===== */
.cxg-toast {
  position: fixed; left: 50%; bottom: var(--space-8); transform: translateX(-50%);
  padding: var(--space-3) var(--space-6); border-radius: var(--radius-pill);
  background: var(--surface-2); border: 1px solid var(--border-2);
  color: var(--text); font-size: .85rem; z-index: var(--z-toast);
  box-shadow: var(--shadow-md);
}
.cxg-toast.is-ok  { border-color: rgba(60, 255, 180, .4); }
.cxg-toast.is-err { border-color: rgba(255, 60, 110, .4); }

/* ===== Responsive ===== */
@media (max-width: 640px) {
  .cxg-board { gap: var(--space-5); }
  .cxg-clues { gap: var(--space-5); }
  .cxg-form__row { flex-direction: column; }
}