body { padding-top: 60px; }
#app { max-width: 800px; padding: 32px 28px 28px; }

.header { text-align: center; margin-bottom: 32px; }
.header h1 { font-size: 2rem; margin-bottom: 8px; }
.header .date-jour { font-size: 1rem; color: var(--texte-doux); }

.back-link { display: inline-block; margin-bottom: 20px; }

.non-connecte {
  text-align: center; padding: 40px 20px;
  background: var(--surface-2); border-radius: 16px; margin-bottom: 32px;
}
.non-connecte p { color: var(--texte-doux); margin-bottom: 16px; font-size: 0.95rem; }


.defi-status {
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: 16px; padding: 24px; margin-bottom: 24px;
}
.defi-status-actions { margin-top: 12px; }
.defi-status .btn { font-size: 0.9rem; padding: 10px 24px; border-radius: 10px; }
.defi-status .statut-badge {
  font-size: 0.85rem; font-weight: 700; padding: 6px 16px; border-radius: 8px;
  display: inline-block; margin-bottom: 12px;
}
.statut-badge.non-tente { background: color-mix(in srgb, var(--color-mid) 20%, transparent); color: var(--color-light); }
.statut-badge.en-cours { background: rgba(234, 179, 8, 0.2); color: #fbbf24; }
.statut-badge.gagne { background: rgba(16, 185, 129, 0.2); color: #34d399; }
.statut-badge.perdu { background: rgba(248, 113, 113, 0.2); color: #f87171; }
.statut-badge.abandonne { background: rgba(148, 163, 184, 0.2); color: #94a3b8; }


#zone-jeu { display: none; margin-bottom: 24px; }
.jeu-header {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 12px; flex-wrap: wrap; gap: 8px;
}
.jeu-header .btn { margin: 0 2px; }
.jeu-timer { font-size: 1.2rem; font-weight: 700; color: var(--color-light); font-variant-numeric: tabular-nums; }
.fondation-info { color: #4ade80; font-weight: 700; }


.msg-fin {
  text-align: center; padding: 20px; margin-top: 16px; border-radius: 12px;
  font-size: 1.1rem; font-weight: 700; display: none;
}
.msg-fin.victoire { background: rgba(16, 185, 129, 0.15); color: #34d399; border: 1px solid rgba(16, 185, 129, 0.3); }
.msg-fin.defaite { background: rgba(248, 113, 113, 0.15); color: #f87171; border: 1px solid rgba(248, 113, 113, 0.3); }


.classement-section {
  margin-top: 32px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 22px 20px 18px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.classement-section h2 { font-size: 1.2rem; font-weight: 700; color: var(--color-light); text-align: center; margin-bottom: 16px; }
.podium { display: flex; justify-content: center; gap: 16px; margin-bottom: 16px; }
.podium-item { text-align: center; padding: 16px; background: rgba(255, 255, 255, 0.05); border-radius: 12px; min-width: 100px; }
.podium-rang { font-size: 1.5rem; margin-bottom: 4px; }
.podium-pseudo { font-size: 0.85rem; font-weight: 700; color: var(--color-light); }
.podium-temps { font-size: 0.78rem; color: var(--texte-doux); margin-top: 2px; font-variant-numeric: tabular-nums; }
.classement-liste { max-width: 500px; margin: 0 auto; }
.classement-ligne {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 16px; border-bottom: 1px solid rgba(255, 255, 255, 0.06); font-size: 0.85rem;
}
.classement-rang { color: var(--texte-faible); width: 30px; }
.classement-pseudo { flex: 1; color: var(--texte); font-weight: 600; }
.classement-temps-val { color: var(--color-light); font-weight: 700; font-variant-numeric: tabular-nums; }
.classement-vide { text-align: center; color: var(--texte-faible); font-style: italic; padding: 20px; font-size: 0.85rem; }
.lien-classement { display: block; text-align: center; margin-top: 16px; color: var(--color-light); text-decoration: none; font-size: 0.85rem; font-weight: 600; }
.lien-classement:hover { color: var(--color-accent); }

footer { margin-top: 32px; text-align: center; }

@media (max-width: 600px) {
  .classement-section { padding: 18px 12px 14px; border-radius: 14px; }
  .header h1 { font-size: 1.5rem; }
  .podium { flex-direction: column; align-items: center; }
}
@media (max-height: 500px) and (orientation: landscape) {
  .header { margin-bottom: 10px; }
  .header h1 { font-size: 1.3rem; margin-bottom: 2px; }
  .back-link { margin-bottom: 6px; }
  .defi-status { padding: 8px 12px; margin-bottom: 10px; }
  .jeu-header { margin-bottom: 6px; }
}