:root {
  --rules-symbole: '2048';
}


.deco-tuile {
  width: 44px; height: 44px;
  border-radius: 8px;
  font-size: 1rem; font-weight: 900;
}
.deco-tuile.t2 { background: #eee4da; color: #4a4038; }
.deco-tuile.t8 { background: #f2b179; color: #3b2410; }
.deco-tuile.t128 { background: #edcf72; color: #3b2a08; font-size: 0.86rem; }
.deco-tuile.t2048 { background: #edc22e; color: #3b2a08; font-size: 0.74rem; }
@media (max-width: 480px) {
  .deco-tuile { width: 36px; height: 36px; font-size: 0.85rem; }
  .deco-tuile.t2048 { font-size: 0.62rem; }
}


.badge-multi { background: transparent; color: #c99a49; border: 1px solid #6b5227; }
.badge-entrainement { background: transparent; color: #64ab7c; border: 1px solid #2f5a3e; }


a.mode-card { color: inherit; text-decoration: none; }


@media (min-width: 601px) {
  .modes { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 600px) {
  .modes > .mode-card:last-child:nth-child(odd) { grid-column: 1 / -1; }
}


.section-panel .form-label { margin-top: 12px; }
.section-panel .input-row { margin-top: 12px; }
.input-code { text-transform: uppercase; max-width: 96px; text-align: center; letter-spacing: 0.12em; }
.choix-segment { display: flex; flex-wrap: wrap; gap: 8px; }
.choix-segment button {
  flex: 1 1 96px; min-height: 44px; padding: 8px 10px;
  font: inherit; font-size: 0.85rem; font-weight: 700;
  background: transparent; color: var(--texte-doux, #cbd5e1);
  border: 1px solid var(--line-forte, rgba(255, 255, 255, 0.2)); border-radius: 6px;
  cursor: pointer;
}
.choix-segment button small { display: block; font-weight: 600; font-size: 0.72rem; opacity: 0.8; }
.choix-segment button[aria-pressed="true"] { color: #fff; border-color: var(--color-light); background: var(--surface-2, rgba(255, 255, 255, 0.06)); }
.note-variante { margin-top: 8px; font-size: 0.82rem; color: var(--texte-doux, #cbd5e1); }
.carte-publique .details { font-size: 0.8rem; }


.lien-classement-accueil {
  display: block;
  width: fit-content; max-width: 100%;
  margin: 0 auto 28px;
  padding: 12px 20px;
  border: 1px solid var(--line, rgba(255, 255, 255, 0.15));
  border-radius: 999px;
  background: var(--surface-2, transparent);
  color: var(--texte-doux, #cbd5e1);
  font-size: 0.92rem; font-weight: 600;
  text-align: center; text-decoration: none;
  transition: color 0.2s, border-color 0.2s;
}
.lien-classement-accueil:hover { color: var(--color-light); border-color: var(--color-mid); }

.rules a { color: var(--color-light); }
.rules + .rules { margin-top: 20px; }
.definition-jeu { font-size: 1rem; line-height: 1.6; margin-bottom: 14px; }


.tableau-chiffres { width: 100%; border-collapse: collapse; margin: 6px 0 14px; font-size: 0.9rem; }
.tableau-chiffres th, .tableau-chiffres td { padding: 8px 10px; text-align: left; border-bottom: 1px solid var(--line, rgba(255, 255, 255, 0.08)); }
.tableau-chiffres th { color: var(--color-light); font-weight: 700; }
.tableau-chiffres td:not(:first-child), .tableau-chiffres th:not(:first-child) { text-align: right; font-variant-numeric: tabular-nums; }
.tableau-defile { overflow-x: auto; }


.faq-accueil h3 { font-size: 1rem; margin: 16px 0 4px; }
.faq-accueil p { margin: 0; }