/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  height: var(--tap-target);
  padding: 0 var(--space-4);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  background: var(--bg-elev-2);
  color: var(--text);
  font-weight: 600;
  text-decoration: none;
  transition: background 0.15s ease, border-color 0.15s ease, opacity 0.15s ease, transform 0.05s ease;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.btn:hover,
.btn:focus-visible {
  text-decoration: none;
}

.btn:active {
  transform: translateY(1px);
}

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

.btn--primary {
  background: var(--primary);
  color: var(--primary-on);
  border-color: var(--primary);
}

.btn--primary:hover,
.btn--primary:focus-visible {
  background: var(--cherry-700);
  border-color: var(--cherry-700);
  color: var(--primary-on);
}

.btn--ghost {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text);
}

.btn--ghost:hover,
.btn--ghost:focus-visible {
  background: var(--bg-elev);
  border-color: var(--cherry-700);
}

.btn--danger {
  background: var(--danger);
  border-color: var(--danger);
  color: #ffffff;
}

.btn--danger:hover,
.btn--danger:focus-visible {
  background: #c84a56;
  border-color: #c84a56;
}

.btn--full {
  width: 100%;
}

.btn--sm {
  height: 36px;
  padding: 0 var(--space-3);
  font-size: 0.9em;
}

/* Inputs */
.input-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.input-group label {
  font-size: 0.9em;
  color: var(--text-muted);
  font-weight: 500;
}

.input-group .hint {
  font-size: 0.8em;
  color: var(--text-muted);
}

.input-group input,
.input-group textarea {
  height: var(--tap-target);
  padding: 0 var(--space-3);
  background: var(--bg-elev);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  width: 100%;
}

.input-group textarea {
  height: auto;
  padding: var(--space-2) var(--space-3);
  min-height: 100px;
  resize: vertical;
}

.input-group input:focus,
.input-group textarea:focus {
  border-color: var(--cherry-500);
  box-shadow: 0 0 0 3px rgba(255, 201, 207, 0.25);
}

.input-group input::placeholder {
  color: var(--text-muted);
  opacity: 0.6;
}

/* Card */
.card {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  box-shadow: var(--shadow-md);
}

.card--auth {
  max-width: 420px;
  width: 100%;
}

.card__title {
  margin-bottom: var(--space-4);
  text-align: center;
}

.card__footer {
  margin-top: var(--space-4);
  text-align: center;
  font-size: 0.9em;
}

/* Topbar */
.topbar {
  position: sticky;
  top: 0;
  z-index: 100;
  height: 56px;
  background: var(--bg-elev);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--space-3);
  gap: var(--space-3);
}

.topbar__left,
.topbar__center,
.topbar__right {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  /* min-width: 0 → autorise les flex-items à shrink quand le contenu pousse,
     évite le débordement horizontal de la topbar sur écrans étroits. */
  min-width: 0;
}

.topbar__center {
  flex: 1;
  justify-content: center;
}

/* Sur petit écran, on cache le label de marque pour faire de la place
   et on garde le solde visible (info la plus importante). La balance-pill
   se compacte sur mobile via sa propre règle plus bas. */
@media (max-width: 480px) {
  .topbar__center {
    flex: 0 0 auto;
  }
  .balance-pill {
    padding: 4px var(--space-2);
    font-size: 0.85em;
  }
}

/* Brand */
.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--text);
  font-weight: 700;
  text-decoration: none;
}

.brand:hover,
.brand:focus-visible {
  color: var(--text);
  text-decoration: none;
}

.brand__logo {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
}

.brand__name {
  font-size: 1rem;
  letter-spacing: -0.01em;
}

@media (max-width: 480px) {
  .brand__name {
    display: none;
  }
}

.brand--lg .brand__logo {
  width: 72px;
  height: 72px;
}

.brand--lg .brand__name {
  font-size: 1.4rem;
  display: inline;
}

/* Avatar */
.avatar {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-full);
  background: var(--cherry-700);
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 0.85em;
  overflow: hidden;
  text-decoration: none;
  flex-shrink: 0;
  border: 1px solid var(--border);
}

.avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.avatar--lg {
  width: 96px;
  height: 96px;
  font-size: 2rem;
}

/* Balance pill */
.balance-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background: var(--bg-elev-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  padding: 6px var(--space-3);
  color: var(--text);
  font-weight: 600;
  font-size: 0.95em;
  white-space: nowrap;
}

/* Évite le layout shift entre "—" et le vrai solde "1 234,56 €". */
.balance-pill__value {
  display: inline-block;
  min-width: 5ch;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.balance-pill__icon {
  width: 18px;
  height: 18px;
  border-radius: var(--radius-full);
  background: var(--gold);
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75em;
  font-weight: 700;
}

/* Form feedback */
.form-error {
  color: var(--danger);
  font-size: 0.9em;
  margin-top: var(--space-2);
  display: none;
}

.form-error.is-visible {
  display: block;
}

.form-success {
  color: var(--success);
  font-size: 0.9em;
  margin-top: var(--space-2);
  display: none;
}

.form-success.is-visible {
  display: block;
}

/* Placeholder content — désormais avec animation shimmer pour signaler le chargement. */
.placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 80px;
  color: var(--text-muted);
  font-style: italic;
  font-size: 0.95em;
  background: var(--bg-elev-2);
  border: 1px dashed var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  position: relative;
  overflow: hidden;
}
.placeholder::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.06) 50%,
    transparent 100%
  );
  transform: translateX(-100%);
  animation: shimmer 1.6s ease-in-out infinite;
}
@keyframes shimmer {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}
@media (prefers-reduced-motion: reduce) {
  .placeholder::after { animation: none; }
}

/* Variante "skeleton" : barres rectangulaires (pour préfigurer du contenu). */
.skeleton {
  background: var(--bg-elev-2);
  border-radius: var(--radius-sm);
  position: relative;
  overflow: hidden;
}
.skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.08) 50%,
    transparent 100%
  );
  transform: translateX(-100%);
  animation: shimmer 1.5s ease-in-out infinite;
}
.skeleton--line { height: 14px; margin-bottom: 8px; }
.skeleton--line:last-child { margin-bottom: 0; }
.skeleton--avatar { width: 36px; height: 36px; border-radius: var(--radius-full); }
.skeleton--card { height: 60px; }

/* Bonus pill — dans la topbar, à côté de l'avatar. Cliquable, ouvre la
   modale bonus (fusionne l'ancienne section "Bonus quotidien" pour gagner
   du scroll). État cherry quand le bonus est disponible (pulse léger),
   neutre quand déjà claim (affiche l'heure du prochain reset). */
.bonus-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 10px;
  border-radius: var(--radius-full);
  border: 1px solid var(--border);
  background: var(--bg-elev);
  color: var(--text);
  font-weight: 600;
  font-size: var(--fs-sm);
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease;
  white-space: nowrap;
}
.bonus-pill__icon { font-size: 1rem; line-height: 1; }
.bonus-pill__amount { font-weight: 700; }
.bonus-pill:hover { border-color: var(--cherry-500); }
.bonus-pill--available {
  background: linear-gradient(135deg, rgba(212,36,58,0.22), rgba(212,36,58,0.08));
  border-color: var(--cherry-500);
  color: var(--text);
  animation: bonus-pill-pulse 2.2s ease-in-out infinite;
}
.bonus-pill--claimed { opacity: 0.65; }
/* État loading : pendant que loadBonus() n'a pas répondu (ou en erreur).
   Le pill reste visible — l'utilisateur sait que le bonus existe — mais
   muet (pas de pulse, opacité réduite, curseur attente). */
.bonus-pill--loading { opacity: 0.55; cursor: progress; }
.bonus-pill--loading .bonus-pill__amount::after { content: '…'; }
@keyframes bonus-pill-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(212,36,58,0); }
  50%      { box-shadow: 0 0 0 4px rgba(212,36,58,0.15); }
}
@media (prefers-reduced-motion: reduce) {
  .bonus-pill--available { animation: none; }
}
@media (max-width: 480px) {
  /* Sur mobile très étroit, on cache le montant pour garder le pill compact. */
  .bonus-pill__amount { display: none; }
  .bonus-pill { padding: 0 8px; }
}

/* Section heading */
.section-title {
  margin-bottom: var(--space-3);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-1) var(--space-3);
  flex-wrap: wrap;
}

/* Le h2 prend toute la place restante, le link "Tout voir →" se replie
   en-dessous si vraiment ça déborde (au lieu de chevaucher). */
.section-title h2 {
  min-width: 0;
  flex: 1 1 auto;
}

/* Home — densification verticale pour minimiser le scroll. Pattern scopé
   sur `.home-main` (cf public/index.html) pour ne pas impacter account/admin
   /Polymarket/Football qui utilisent encore stack-lg standard. */
.home-main > * + * { margin-top: var(--space-2); }
.home-main .section-title { margin-bottom: 6px; }
.home-main .section-title h2 { font-size: var(--fs-md); }
.home-main .card { padding: 12px var(--space-3); }
.home-main .bonus-card, .home-main .coinflip-card { padding: 10px var(--space-3); }
/* Le bandeau prédictions a déjà son padding interne, on neutralise le gap dégât. */
.home-main .predictions-marquee + * { margin-top: var(--space-3); }
.section-title__link {
  font-size: var(--fs-sm);
  color: var(--cherry-500);
  text-decoration: none;
  white-space: nowrap;
}
.section-title__link:hover { text-decoration: underline; }

/* Live matches (encart home — alimenté par GET /api/football/live).
   Strip horizontal scrollable avec flèches prev/next, calqué sur le
   bandeau jeux. Affiche 4 cartes à la fois sur desktop, scroll pour
   voir les autres. */
.live-strip-wrap {
  position: relative;
}
.live-strip-wrap .game-strip-nav { z-index: 2; }
.live-strip {
  display: flex;
  gap: var(--space-2);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  padding-bottom: 4px; /* place pour la scrollbar discrète */
  scrollbar-width: thin;
}
.live-strip::-webkit-scrollbar { height: 6px; }
.live-strip::-webkit-scrollbar-track { background: transparent; }
.live-strip::-webkit-scrollbar-thumb {
  background: var(--cherry-700);
  border-radius: 3px;
}
/* 4 cartes visibles desktop : (100% - 3 gaps) / 4. Gap = 8 px (--space-2). */
.live-strip > .live-match-card {
  flex: 0 0 calc((100% - 3 * var(--space-2)) / 4);
  scroll-snap-align: start;
}
@media (max-width: 900px) {
  /* 2 cartes visibles tablette */
  .live-strip > .live-match-card {
    flex: 0 0 calc((100% - 1 * var(--space-2)) / 2);
  }
}
@media (max-width: 540px) {
  /* 1 + un quart de la suivante (signale qu'il y a la suite) */
  .live-strip > .live-match-card {
    flex: 0 0 80%;
  }
}

.live-match-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 14px;
  border-radius: var(--radius-md);
  background: var(--bg-elev);
  border: 1px solid var(--border);
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s ease, transform 0.1s ease;
}
.live-match-card:hover {
  border-color: var(--cherry-500);
  transform: translateY(-1px);
}
.live-match-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: var(--fs-xs);
  color: var(--text-muted);
}
.live-match-card__league {
  display: flex;
  align-items: center;
  gap: 6px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.live-match-card__league img {
  width: 16px;
  height: 16px;
  object-fit: contain;
}
.live-match-card__status {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--cherry-500);
  font-weight: 600;
}
.live-match-card__status::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--cherry-500);
  animation: pulse-dot 1.4s ease-in-out infinite;
}
@keyframes pulse-dot {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}
.live-match-card__body {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 10px;
}
.live-match-card__team {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.live-match-card__team--away { justify-content: flex-end; }
.live-match-card__team img {
  width: 24px;
  height: 24px;
  object-fit: contain;
  flex-shrink: 0;
}
.live-match-card__team span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 500;
}
.live-match-card__score {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: var(--fs-lg);
  padding: 2px 10px;
  border-radius: var(--radius-sm);
  background: var(--bg-elev-2, rgba(255,255,255,0.04));
}
@media (prefers-reduced-motion: reduce) {
  .live-match-card__status::before { animation: none; }
}

/* Modal */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--space-3);
  z-index: 200;
  transition: opacity 0.15s ease;
}

.modal-backdrop.is-open {
  display: flex;
}

.modal {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  box-shadow: var(--shadow-lg);
  max-width: 420px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
}

.modal__title {
  margin-bottom: var(--space-3);
}

.modal__actions {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-4);
  justify-content: flex-end;
}

/* Inline editable */
.inline-edit {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  background: var(--bg-elev-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-3);
  min-height: var(--tap-target);
}

.inline-edit__value {
  flex: 1;
  background: transparent;
  border: none;
  color: var(--text);
  font-size: 1rem;
  outline: none;
  padding: 0;
  height: 100%;
}

.inline-edit__value:focus {
  outline: none;
}

/* Avatar control row */
.avatar-row {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.avatar-actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

/* File input hidden */
.file-input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

/* Stats rows */
.stat-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--border);
}

.stat-row:last-child {
  border-bottom: none;
}

/* "Continuer à jouer" — carte large mise en avant. */
.continue-card {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2);
  background: var(--bg-elev);
  border: 1px solid var(--primary);
  border-radius: var(--radius-lg);
  text-decoration: none;
  color: var(--text);
  transition: transform 0.1s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.continue-card:hover,
.continue-card:focus-visible {
  text-decoration: none;
  color: var(--text);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
  border-color: var(--cherry-700);
}
.continue-card__thumb {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-md);
  object-fit: cover;
  flex-shrink: 0;
}
.continue-card__thumb--fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-elev-2);
  color: var(--primary);
  font-weight: 700;
  font-size: 1.6rem;
}
.continue-card__body {
  flex: 1;
  min-width: 0;
}
.continue-card__label {
  font-size: 0.78rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
}
.continue-card__name {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.continue-card__arrow {
  font-size: 1.4rem;
  color: var(--primary);
  flex-shrink: 0;
  padding-right: var(--space-2);
}

/* Game strip — carrousel statique (plus d'auto-scroll). On peut donc activer
   scroll-snap proximity, cohérent avec .live-strip (utilisateurs swipe et
   ça s'arrête sur une carte, plus de cartes coupées en deux). */
.game-strip {
  display: flex;
  gap: var(--space-3);
  overflow-x: auto;
  padding-bottom: var(--space-2);
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--cherry-700) transparent;
  position: relative;
  scroll-snap-type: x proximity;
}

.game-strip > .game-card {
  scroll-snap-align: start;
}

.game-strip::-webkit-scrollbar {
  height: 8px;
}
.game-strip::-webkit-scrollbar-track {
  background: transparent;
}
.game-strip::-webkit-scrollbar-thumb {
  background: var(--cherry-700);
  border-radius: var(--radius-full);
}
.game-strip::-webkit-scrollbar-thumb:hover {
  background: var(--cherry-500);
}

/* Mobile : on cache la scrollbar (le swipe touch suffit) */
@media (max-width: 719px) {
  .game-strip {
    scrollbar-width: none;
  }
  .game-strip::-webkit-scrollbar {
    display: none;
  }
}

.game-strip > * {
  flex: 0 0 auto;
}

/* Wrapper avec fades + flèches pour signaler le scroll horizontal sur PC */
.game-strip-wrap {
  position: relative;
}
.game-strip-wrap::before,
.game-strip-wrap::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: var(--space-3);
  width: 32px;
  pointer-events: none;
  z-index: 1;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.game-strip-wrap::before {
  left: 0;
  background: linear-gradient(to right, var(--bg), transparent);
}
.game-strip-wrap::after {
  right: 0;
  background: linear-gradient(to left, var(--bg), transparent);
}
.game-strip-wrap.has-overflow-left::before  { opacity: 1; }
.game-strip-wrap.has-overflow-right::after  { opacity: 1; }

.game-strip-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  border-radius: var(--radius-full);
  background: var(--bg-elev);
  border: 1px solid var(--border);
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 2;
  box-shadow: var(--shadow-md);
  opacity: 0;
  transition: opacity 0.2s ease, background 0.15s ease;
  font-size: 1.1rem;
  font-weight: 700;
}
.game-strip-nav:hover { background: var(--bg-elev-2); border-color: var(--cherry-700); }
.game-strip-nav--prev { left: -10px; }
.game-strip-nav--next { right: -10px; }
.game-strip-wrap.has-overflow-left  .game-strip-nav--prev { opacity: 1; }
.game-strip-wrap.has-overflow-right .game-strip-nav--next { opacity: 1; }

/* Pas de flèches sur mobile (tactile = swipe) */
@media (max-width: 719px) {
  .game-strip-nav { display: none; }
}

.game-card {
  width: 180px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  text-decoration: none;
  color: var(--text);
  transition: border-color 0.15s ease, transform 0.1s ease;
}

.game-card:hover,
.game-card:focus-visible {
  border-color: var(--cherry-700);
  color: var(--text);
  text-decoration: none;
  transform: translateY(-2px);
}

.game-card__thumb {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-md);
  background: var(--bg-elev-2);
  display: block;
  object-fit: cover;
  overflow: hidden;
}

.game-card__thumb--fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--cherry-500);
  font-weight: 700;
  font-size: 2rem;
}

.game-card__title {
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
}

.game-card__tagline {
  font-size: 0.85em;
  color: var(--text-muted);
  line-height: 1.3;
  flex: 1;
}

.game-card__cta {
  margin-top: var(--space-2);
}

/* Jeu en chantier : grisé + non-cliquable pour les non-admins, avec une
   tagline gold "🚧 Chantier en cours" qui remplace la tagline normale. */
.game-card--chantier {
  cursor: not-allowed;
  opacity: 0.55;
  filter: grayscale(0.6);
  pointer-events: none;
}
.game-card__tagline--chantier {
  color: var(--gold);
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* Pour l'admin : la card reste cliquable mais un badge orange l'avertit
   que le jeu est sous chantier (uniquement visible par lui). */
.game-card--admin-only {
  position: relative;
  border-color: var(--gold);
}
.game-card__admin-badge {
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
  background: var(--gold);
  color: var(--ink);
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

@media (min-width: 720px) {
  .game-card {
    width: 220px;
  }
}

/* Roi du jour */
@keyframes king-pulse {
  0%, 100% { box-shadow: 0 0 0 1px var(--gold), 0 0 16px rgba(230, 179, 74, 0.30); }
  50%      { box-shadow: 0 0 0 2px var(--gold), 0 0 28px rgba(230, 179, 74, 0.55); }
}

.king-frame {
  border: 2px solid var(--gold);
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, rgba(230,179,74,0.10), rgba(230,179,74,0.02));
  animation: king-pulse 3s ease-in-out infinite;
  padding: var(--space-4);
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

@media (prefers-reduced-motion: reduce) {
  .king-frame { animation: none; }
}

.king-frame__crown {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  color: var(--gold);
}

.king-frame__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
}

.king-frame__name {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.king-frame__balance {
  font-size: 0.95em;
  color: var(--gold);
  font-weight: 600;
}

.king-frame__title {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
  color: var(--gold);
  opacity: 0.85;
}

/* Encadré à droite : ancienneté du roi sur le trône. */
.king-frame__streak {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 6px 12px;
  background: rgba(230, 179, 74, 0.12);
  border: 1px solid var(--gold);
  border-radius: var(--radius-md);
  min-width: 70px;
}
.king-frame__streak-value {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.king-frame__streak-label {
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin-top: 2px;
  text-align: center;
}
@media (max-width: 380px) {
  .king-frame__streak { padding: 4px 8px; min-width: 56px; }
  .king-frame__streak-value { font-size: 0.95rem; }
  .king-frame__streak-label { font-size: 0.55rem; }
}

.king-frame__avatar {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-full);
  background: var(--cherry-700);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1.1rem;
  overflow: hidden;
  flex-shrink: 0;
  border: 2px solid var(--gold);
}

.king-frame__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.king-frame__empty {
  color: var(--text-muted);
  font-style: italic;
}

/* Leaderboard */
.leaderboard-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.leaderboard-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  min-height: var(--tap-target);
  width: 100%;
  background: var(--bg-elev);
  border: none;
  border-bottom: 1px solid var(--border);
  border-left: 3px solid transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.leaderboard-row:last-child {
  border-bottom: none;
}

.leaderboard-row:hover,
.leaderboard-row:focus-visible {
  background: var(--bg-elev-2);
}

.leaderboard-row--me {
  background: var(--bg-elev-2);
  border-left-color: var(--cherry-500);
}

.leaderboard-row__rank {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-full);
  background: var(--cherry-700);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.9em;
  flex-shrink: 0;
}

.leaderboard-row__rank--gold {
  background: var(--gold);
  color: var(--ink);
}

.leaderboard-row__rank--silver {
  background: #b8b8c2;
  color: var(--ink);
}

.leaderboard-row__rank--bronze {
  background: #b07744;
  color: #fff;
}

.leaderboard-row__trend {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.78rem;
  font-weight: 700;
  min-width: 26px;
  height: 22px;
  padding: 0 4px;
  border-radius: var(--radius-sm);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}
.leaderboard-row__trend--up {
  color: var(--success);
  background: rgba(107, 158, 90, 0.15);
}
.leaderboard-row__trend--down {
  color: var(--danger);
  background: rgba(227, 93, 106, 0.15);
}
.leaderboard-row__trend--flat {
  color: var(--text-muted);
}
.leaderboard-row__trend--new {
  color: var(--gold);
}

.leaderboard-row__avatar {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-full);
  background: var(--cherry-700);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 0.8em;
  overflow: hidden;
  flex-shrink: 0;
}

.leaderboard-row__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.leaderboard-row__name {
  flex: 1;
  min-width: 0;
  max-width: 50%;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.leaderboard-row__balance {
  font-weight: 600;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  flex-shrink: 0;
}

.leaderboard-row__more {
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-muted);
  width: var(--tap-target);
  height: var(--tap-target);
  border-radius: var(--radius-full);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  font-weight: 700;
  cursor: pointer;
  flex-shrink: 0;
}

.leaderboard-row__more:hover,
.leaderboard-row__more:focus-visible {
  background: var(--bg-elev-2);
  color: var(--text);
}

/* Top-wins modal */
.top-wins-modal .modal__title {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.top-wins-modal .modal__title .avatar {
  width: 40px;
  height: 40px;
}

.top-wins-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.top-wins-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  background: var(--bg-elev-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}

.top-wins-row__ratio {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
  min-width: 90px;
}

.top-wins-row__details {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 0.9em;
}

.top-wins-row__line {
  color: var(--text);
}

.top-wins-row__sub {
  color: var(--text-muted);
  font-size: 0.85em;
}

.top-wins-empty {
  color: var(--text-muted);
  font-style: italic;
  text-align: center;
  padding: var(--space-3);
}

/* Bonus / coinflip cards */
.bonus-card,
.coinflip-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.bonus-card__amount {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--gold);
}

.bonus-card__next {
  font-size: 0.9em;
  color: var(--text-muted);
}

.coinflip-card__result {
  font-weight: 600;
  text-align: center;
  padding: var(--space-3);
  border-radius: var(--radius-md);
  background: var(--bg-elev-2);
}

.coinflip-card__result--win {
  color: var(--gold);
  border: 1px solid var(--gold);
}

.coinflip-card__result--lose {
  color: var(--danger);
  border: 1px solid var(--danger);
}

/* Toast */
.toast {
  position: fixed;
  bottom: calc(var(--space-4) + env(safe-area-inset-bottom, 0));
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  background: var(--bg-elev);
  color: var(--text);
  border: 1px solid var(--gold);
  border-radius: var(--radius-full);
  padding: var(--space-2) var(--space-4);
  box-shadow: var(--shadow-lg);
  font-weight: 600;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
  z-index: 300;
}

.toast.is-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.toast--error {
  border-color: var(--danger);
  color: var(--danger);
}
.toast--success {
  border-color: var(--success);
  color: var(--success);
}

/* Toolbar minimaliste pour pages d'auth (login/register/set-password) :
   uniquement le bouton de thème en haut à droite, par-dessus le contenu. */
.auth-toolbar {
  position: fixed;
  top: var(--space-3);
  right: var(--space-3);
  z-index: 10;
}

/* Chips de mise grisés au-delà du tier débloqué — pattern partagé entre jeux. */
.is-tier-locked {
  opacity: 0.32 !important;
  cursor: not-allowed !important;
  position: relative;
  pointer-events: none;
}
.is-tier-locked::after {
  content: '🔒';
  position: absolute;
  top: -4px;
  right: -2px;
  font-size: 0.55rem;
  opacity: 0.8;
  pointer-events: none;
}

/* Bouton icône générique (topbar : toggle thème, mute, etc.) */
.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-full);
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text);
  font-size: 1rem;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}
.icon-btn:hover,
.icon-btn:focus-visible {
  background: var(--bg-elev-2);
  border-color: var(--primary);
}

/* Admin link in topbar (caché par défaut via [hidden], révélé par JS si admin).
   La règle [hidden] DOIT venir APRÈS le display:inline-flex sinon l'attribut
   HTML `hidden` (équivalent à display:none) est overridé → l'admin link
   reste visible pour les non-admins (bug). */
.topbar__admin-link {
  display: inline-flex;
  align-items: center;
  height: 36px;
  padding: 0 var(--space-3);
  border-radius: var(--radius-full);
  border: 1px solid var(--gold);
  color: var(--gold);
  font-weight: 600;
  font-size: 0.85em;
  text-decoration: none;
  white-space: nowrap;
}
.topbar__admin-link[hidden] { display: none; }

.topbar__admin-link:hover,
.topbar__admin-link:focus-visible {
  background: rgba(230, 179, 74, 0.12);
  color: var(--gold);
  text-decoration: none;
}

/* Tabs */
.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  border-bottom: 1px solid var(--border);
  margin-bottom: var(--space-3);
}

.tab {
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-weight: 600;
  padding: var(--space-2) var(--space-3);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  font-size: 0.95em;
  -webkit-tap-highlight-color: transparent;
}

.tab:hover,
.tab:focus-visible {
  color: var(--text);
}

.tab--active {
  color: var(--cherry-500);
  border-bottom-color: var(--cherry-500);
}

.tab-panel[hidden] {
  display: none;
}

/* Admin > Paris — gestion incidents (override) */
.admin-bets__filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: end;
  margin-bottom: var(--space-3);
}
.admin-bets__filters label {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 0.8rem;
}
.admin-bets__filters input,
.admin-bets__filters select {
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-elev);
  color: var(--text);
  min-width: 140px;
}
.bet-status {
  font-weight: 700;
  text-transform: uppercase;
  font-size: 0.7rem;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  letter-spacing: 0.05em;
  display: inline-block;
}
.bet-status--pending  { background: var(--bg-elev-2); color: var(--text); }
.bet-status--won      { background: rgba(74,160,80,0.25); color: #6ec072; }
.bet-status--lost     { background: rgba(212,36,58,0.2); color: var(--cherry-500); }
.bet-status--refunded { background: rgba(230,179,74,0.18); color: var(--gold); }
.btn--sm { padding: 4px 10px; font-size: 0.8rem; }

/* Admin > APIs externes — boutons sync manuels + log d'exécutions */
.admin-apis {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.admin-apis__group h3 {
  margin: 0 0 8px;
  font-size: var(--fs-md);
  color: var(--text);
}
.admin-apis__row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.admin-apis__row .btn { white-space: nowrap; }
.admin-apis__log {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 320px;
  overflow-y: auto;
  background: var(--bg-elev-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 8px 10px;
  font-size: 0.8rem;
  font-family: ui-monospace, 'Courier New', monospace;
}
.admin-apis__log-line {
  display: grid;
  grid-template-columns: auto auto auto 1fr auto;
  gap: 8px;
  align-items: baseline;
  padding: 4px 0;
  border-bottom: 1px dashed var(--border);
}
.admin-apis__log-line:last-child { border-bottom: none; }
.admin-apis__log-line.is-error .admin-apis__log-status { color: var(--cherry-500); }
.admin-apis__log-time { color: var(--text-muted); font-variant-numeric: tabular-nums; }
.admin-apis__log-action { font-weight: 700; color: var(--cherry-500); }
.admin-apis__log-status { color: #6ec072; font-weight: 700; }
.admin-apis__log-detail {
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.admin-apis__log-ms { color: var(--text-muted); font-variant-numeric: tabular-nums; }

/* Admin table */
.admin-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}

.admin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9em;
  background: var(--bg-elev);
}

.admin-table th,
.admin-table td {
  text-align: left;
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}

.admin-table thead th {
  background: var(--bg-elev-2);
  color: var(--text-muted);
  font-weight: 600;
  font-size: 0.8em;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.admin-table tbody tr:hover {
  background: var(--bg-elev-2);
}

.admin-table tbody tr:last-child td {
  border-bottom: none;
}

.amount-pos { color: var(--success); font-variant-numeric: tabular-nums; }
.amount-neg { color: var(--danger); font-variant-numeric: tabular-nums; }

.user-cell {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.user-cell__name {
  font-weight: 600;
}

.user-cell__id {
  font-size: 0.8em;
}

/* Badges */
.badges {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
}

.badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  font-size: 0.75em;
  font-weight: 600;
  background: var(--bg-elev-2);
  color: var(--text-muted);
  border: 1px solid var(--border);
  white-space: nowrap;
}

.badge--admin {
  background: rgba(230, 179, 74, 0.15);
  color: var(--gold);
  border-color: var(--gold);
}

.badge--banned {
  background: rgba(227, 93, 106, 0.15);
  color: var(--danger);
  border-color: var(--danger);
}

.badge--no-pred {
  background: var(--bg-elev-2);
  color: var(--text-muted);
}

/* Cards de l'onglet Maintenance admin (toggle chantier par jeu) */
.maintenance-card__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-2);
}
.maintenance-reason {
  width: 100%;
  padding: 8px 10px;
  font-size: 0.9rem;
  background: var(--bg-elev-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  color: var(--text);
}
.maintenance-reason:focus-visible {
  outline: 2px solid var(--cherry-500);
  outline-offset: 1px;
}

/* Action row (buttons inline) */
.action-row {
  display: inline-flex;
  gap: var(--space-1);
  flex-wrap: wrap;
}

.action-row .btn--sm {
  height: 32px;
  padding: 0 10px;
  font-size: 0.85em;
  min-width: 32px;
}

/* Danger zone */
.danger-zone {
  border: 1px solid var(--danger);
  background: rgba(227, 93, 106, 0.08);
  border-radius: var(--radius-md);
  padding: var(--space-3);
}

.danger-zone h3 {
  margin-top: 0;
  color: var(--danger);
}

/* Confirm input (RESET) */
.confirm-input {
  letter-spacing: 0.2em;
  text-align: center;
  font-weight: 700;
  font-size: 1.1rem;
}

/* Banword list */
.banword-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.banword-item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background: var(--bg-elev-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  padding: 4px 4px 4px var(--space-3);
  font-size: 0.9em;
}

.banwords-form,
.audit-filters {
  display: flex;
  gap: var(--space-2);
  align-items: flex-end;
  flex-wrap: wrap;
}

.banwords-form .input-group,
.audit-filters .input-group {
  flex: 1 1 200px;
}

.audit-filters select {
  height: var(--tap-target);
  padding: 0 var(--space-3);
  background: var(--bg-elev);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  outline: none;
  width: 100%;
}

.pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  flex-wrap: wrap;
}

/* ------- Bandeau prédictions défilant ------- */
.predictions-marquee {
  display: flex;
  align-items: stretch;
  gap: 0;
  background: linear-gradient(90deg,
    rgba(212, 36, 58, 0.18) 0%,
    rgba(20, 8, 12, 0.55) 40%,
    rgba(20, 8, 12, 0.55) 60%,
    rgba(212, 36, 58, 0.18) 100%);
  border: 1px solid rgba(212, 36, 58, 0.35);
  border-radius: var(--radius-sm);
  overflow: hidden;
  font-size: 0.85rem;
  min-height: 36px;
}

.predictions-marquee__label {
  display: inline-flex;
  align-items: center;
  padding: 0 12px;
  background: rgba(212, 36, 58, 0.85);
  color: #fff4d8;
  font-weight: 700;
  letter-spacing: 0.03em;
  flex-shrink: 0;
  white-space: nowrap;
}

.predictions-marquee__viewport {
  flex: 1 1 auto;
  overflow: hidden;
  position: relative;
}

.predictions-marquee__track {
  display: inline-flex;
  align-items: center;
  gap: 0;
  white-space: nowrap;
  animation: predictions-marquee-scroll linear infinite;
  will-change: transform;
}

.predictions-marquee:hover .predictions-marquee__track {
  animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
  .predictions-marquee__track { animation: none; }
}

@keyframes predictions-marquee-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

.predictions-marquee__item {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 16px;
  color: inherit;
  text-decoration: none;
  border-right: 1px solid rgba(255, 255, 255, 0.08);
  transition: background 0.2s ease;
}

.predictions-marquee__item:hover {
  background: rgba(255, 255, 255, 0.06);
}

.predictions-marquee__title {
  font-weight: 600;
  max-width: 36ch;
  overflow: hidden;
  text-overflow: ellipsis;
}

.predictions-marquee__pot {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: Georgia, "Times New Roman", serif;
}

.predictions-marquee__pot-label {
  opacity: 0.7;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.predictions-marquee__pot-value {
  font-weight: 700;
  color: #ffd166;
}

.predictions-marquee__bolt {
  margin-left: 4px;
  padding: 1px 6px;
  border-radius: 999px;
  background: rgba(255, 209, 102, 0.18);
  color: #ffd166;
  font-size: 0.75rem;
  font-weight: 700;
}

.predictions-marquee__bolt.is-pending {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-muted, #b8a8ad);
}

/* Badge hype — affiché à gauche du titre de prédiction dans le bandeau.
   3 tiers visuels (warm/hot/fire), cool n'affiche rien. Le tier #1 hype
   reçoit aussi un mini-rank gold. */
.predictions-marquee__rank {
  margin-right: 6px;
  padding: 1px 6px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--gold), var(--gold-dark, #b88a2a));
  color: #1a0e10;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  box-shadow: 0 0 8px rgba(230, 179, 74, 0.45);
}
.predictions-marquee__hype {
  margin-right: 6px;
  font-size: 0.85rem;
  filter: drop-shadow(0 0 3px rgba(212, 36, 58, 0.55));
}
.predictions-marquee__hype--warm  { opacity: 0.85; }
.predictions-marquee__hype--hot   { opacity: 1; }
.predictions-marquee__hype--fire  {
  animation: hype-pulse 1.8s ease-in-out infinite;
}
@keyframes hype-pulse {
  0%, 100% { transform: scale(1); filter: drop-shadow(0 0 3px rgba(212, 36, 58, 0.55)); }
  50%      { transform: scale(1.15); filter: drop-shadow(0 0 7px rgba(212, 36, 58, 0.85)); }
}
@media (prefers-reduced-motion: reduce) {
  .predictions-marquee__hype--fire { animation: none; }
}

@media (max-width: 540px) {
  .predictions-marquee__label { padding: 0 8px; font-size: 0.75rem; }
  .predictions-marquee__title { max-width: 22ch; }
  .predictions-marquee__rank { font-size: 0.65rem; padding: 0 4px; }
  .predictions-marquee__hype { font-size: 0.75rem; }
}

/* =========================================================================
   Admin Prédictions — cards + modale détail + barre stats
   ========================================================================= */

/* Card prédiction (admin panel). Hérite déjà de .card pour le fond/bordure. */
.poly-card {
  /* Spacing interne géré par .stack (gap entre head/meta/actions). */
  position: relative;
}

.poly-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.poly-card__title {
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
  /* Cherry accent sur les titres prédiction admin pour démarquer du flow. */
  color: var(--text);
  font-size: 1.05rem;
  line-height: 1.3;
  word-break: break-word;
}

.poly-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px var(--space-2);
  font-size: 0.9em;
  align-items: center;
}

/* Ligne d'un bet dans la modale détail prédiction. */
.poly-bet-row {
  padding: var(--space-1) var(--space-2);
  background: var(--bg-elev-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  font-size: 0.9em;
  word-break: break-word;
}

/* Modale large : utilisée par openCustomModal (édition / détail prédiction).
   Override le max-width de .modal de 420px pour gérer les listes longues. */
.modal--wide {
  max-width: 720px;
}

/* Bloc "raison de remboursement" affiché dans la modale détail si la
   prédiction est cancelled / auto_refunded. Utilise l'accent cherry doux. */
.poly-failure-box {
  background: rgba(227, 93, 106, 0.08);
  border: 1px solid var(--cherry-700, var(--border));
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-3);
}

.poly-failure-list {
  margin: var(--space-2) 0 0;
  padding-left: var(--space-4);
  font-size: 0.9em;
}

/* Avertissement dans la modale édition (labels verrouillés). */
.poly-edit-warning {
  margin: 0;
  padding: var(--space-2) var(--space-3);
  background: rgba(217, 162, 32, 0.12); /* gold accent */
  border: 1px solid var(--gold-500, #d9a220);
  border-radius: var(--radius-md);
  font-size: 0.9em;
}

/* Titre encadré dans la confirmation forte (résolution sensible). */
.poly-confirm-title {
  background: var(--bg-elev-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-3);
  margin: 0;
  word-break: break-word;
}

/* Barre stats en tête du panel Prédictions. */
.poly-stats-bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding: var(--space-2);
  background: var(--bg-elev-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}

.poly-stat-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px var(--space-3);
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  font-size: 0.85em;
  color: var(--text-muted);
}

.poly-stat-chip strong {
  color: var(--text);
  font-weight: 700;
}

.poly-stat-chip--locked {
  border-color: var(--cherry-700);
  background: rgba(184, 26, 50, 0.08);
}

.poly-stat-chip--pot {
  border-color: var(--gold-500, #d9a220);
  background: rgba(217, 162, 32, 0.1);
}

/* Barre de filtres (statut + recherche + actions). */
.poly-filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: flex-end;
}

.poly-filters .input-group {
  flex: 1 1 200px;
  min-width: 160px;
}

.poly-filters__actions {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
  align-items: center;
}

.poly-load-more {
  display: flex;
  justify-content: center;
  padding-top: var(--space-2);
}

@media (max-width: 540px) {
  .modal--wide {
    /* Sur mobile, max-width n'a pas d'effet (déjà 100% via .modal),
       mais on garde le padding réduit pour éviter le débordement. */
    padding: var(--space-3);
  }
  .poly-card__title { font-size: 1rem; }
  .poly-card__meta { font-size: 0.85em; }
}

/* ============================================================================
   Responsive fixes — audit 2026-05
   Corrige les débordements et tap-targets identifiés sur 320–414 px,
   ajuste le confort tablette (414–719 px) et permet un meilleur usage
   des grands écrans (≥ 1280 px).
   ============================================================================ */

/* --- Très petits écrans (Galaxy Fold, iPhone SE 1ʳᵉ gen) ------------------ */
@media (max-width: 360px) {
  .topbar {
    padding: 0 var(--space-2);
    gap: var(--space-1);
  }
  /* Le solde reste lisible mais compact pour laisser de la place aux autres
     éléments de la topbar. */
  .balance-pill {
    padding: 3px var(--space-2);
    font-size: 0.78em;
  }
  .balance-pill__value {
    min-width: 4ch;
  }
  .topbar__admin-link {
    padding: 0 var(--space-2);
    font-size: 0.75em;
  }
  /* Bonus pill : déjà compact via @max-480, on rétrécit encore le padding. */
  .bonus-pill {
    padding: 0 6px;
    height: 32px;
  }
}

/* --- Tap targets 44×44 sur dispositifs tactiles --------------------------- */
/* WCAG 2.5.5 + Apple HIG. On gonfle les zones tactiles sans changer la
   présentation visuelle (via min-height/min-width sur le wrapper, le contenu
   visuel garde sa taille). Ne touche PAS les pointeurs fins (souris desktop)
   pour ne pas alourdir la topbar inutilement. */
@media (pointer: coarse) {
  .avatar,
  .icon-btn,
  .bonus-pill,
  .topbar__admin-link {
    min-height: 44px;
  }
  .icon-btn,
  .avatar {
    min-width: 44px;
  }
  .leaderboard-row__more {
    min-width: 44px;
    min-height: 44px;
  }
}

/* --- King-frame compact sur mobile ---------------------------------------- */
@media (max-width: 480px) {
  .king-frame {
    padding: var(--space-3);
    gap: var(--space-2);
  }
  .king-frame__crown {
    width: 32px;
    height: 32px;
  }
  .king-frame__avatar {
    width: 48px;
    height: 48px;
    font-size: 1rem;
  }
  .king-frame__name {
    font-size: 1rem;
  }
}

/* --- Leaderboard-row compact mobile : trend caché, balance plus petite,
       gap réduit pour éviter le chevauchement avec les longs montants. ---- */
@media (max-width: 480px) {
  .leaderboard-row {
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
  }
  .leaderboard-row__trend {
    display: none;
  }
  .leaderboard-row__name {
    max-width: 40%;
  }
  .leaderboard-row__balance {
    font-size: 0.85em;
  }
  .leaderboard-row__rank {
    width: 28px;
    height: 28px;
    font-size: 0.85em;
  }
  .leaderboard-row__avatar {
    width: 32px;
    height: 32px;
  }
}

/* --- Live-match-card encore plus serrée < 380 px -------------------------- */
@media (max-width: 380px) {
  .live-match-card {
    padding: 10px;
  }
  .live-match-card__score {
    font-size: var(--fs-md);
  }
}

/* --- Marquee : titres lisibles dès 480 px (pas 540 comme avant) ----------- */
@media (max-width: 480px) {
  .predictions-marquee__title {
    max-width: 22ch;
    font-size: 0.85em;
  }
}

/* --- Modales : padding compact + ratio top-wins lisible < 480 ------------- */
@media (max-width: 480px) {
  .modal-backdrop {
    padding: var(--space-2);
  }
  .modal {
    padding: var(--space-3);
  }
  .top-wins-row {
    gap: var(--space-2);
    padding: var(--space-2);
  }
  .top-wins-row__ratio {
    min-width: 64px;
    font-size: 1.2rem;
  }
}

/* --- Continue-card : arrow plus petite, padding-right minimal ------------- */
@media (max-width: 480px) {
  .continue-card__arrow {
    padding-right: 6px;
    font-size: 1.2rem;
  }
}

/* ============================================================================
   Theme picker (page profil) — segmented control 3 options : clair / sombre /
   système. Remplace l'icône topbar qui prenait de la place sur mobile.
   ============================================================================ */
.theme-picker {
  display: flex;
  gap: 4px;
  background: var(--bg-elev-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 4px;
}

.theme-picker__btn {
  flex: 1 1 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: var(--tap-target);
  padding: 8px var(--space-2);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  font-weight: 600;
  font-size: 0.9em;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.theme-picker__btn:hover {
  color: var(--text);
  border-color: var(--border);
}

.theme-picker__btn.is-selected {
  background: var(--primary);
  color: var(--primary-on);
  border-color: var(--primary);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

.theme-picker__btn:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 1px;
}

.theme-picker__icon {
  font-size: 1.05em;
  line-height: 1;
}

/* Sur très étroit, on cache le label texte pour garder 3 boutons côte à côte. */
@media (max-width: 360px) {
  .theme-picker__btn span:not(.theme-picker__icon) {
    display: none;
  }
}