/* ═══════════════════════════════════════════════
   MULTIPLAYER.CSS — Multijoueur & Classement
   CHAMPION. — composants additionnels
   (chargé après screens.css sur les écrans concernés)
═══════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════
   HUB MULTIJOUEUR
════════════════════════════════════════════════════ */
.mp-page {
  align-items: center;
  justify-content: flex-start;
}

.mp-hub {
  flex: 1;
  width: 100%;
  max-width: min(880px, 100%);
  align-self: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(18px, 3vh, 30px);
  padding: clamp(12px, 3vh, 28px) 0;
}

.mp-choices {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(12px, 2.5vw, 20px);
}

.mp-tile {
  position: relative;
  border-radius: var(--radius-lg);
  padding: clamp(22px, 3.5vw, 34px);
  background: var(--card-bg);
  border: 1.5px solid var(--card-border);
  box-shadow: var(--elevation-2);
  cursor: pointer;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: clamp(190px, 30vh, 260px);
  transition: transform .25s var(--ease-out), box-shadow .25s, border-color .2s;
  animation: slideUp .5s var(--ease-spring) both;
}
.mp-tile:nth-child(2) { animation-delay: .08s; }
.mp-tile::before {
  content: '';
  position: absolute;
  inset: 0;
  height: 42%;
  background: linear-gradient(180deg, rgba(255,255,255,.16), transparent);
  pointer-events: none;
}
.mp-tile:hover {
  transform: translateY(-4px);
  box-shadow: var(--elevation-4);
  border-color: var(--accent-2);
}
.mp-tile__icon {
  width: 64px; height: 64px;
  border-radius: var(--radius-md);
  background: var(--glass-strong);
  border: 1px solid var(--glass-border);
  display: flex; align-items: center; justify-content: center;
  color: var(--text);
  transition: transform .3s var(--ease-spring);
}
.mp-tile:hover .mp-tile__icon { transform: scale(1.1) rotate(-4deg); }
.mp-tile--primary .mp-tile__icon {
  background: var(--btn-gradient);
  color: var(--btn-text);
  border: none;
}
.mp-tile__title {
  font-family: var(--font-display);
  font-size: clamp(22px, 3.4vw, 30px);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--text);
  line-height: 1;
  margin-top: auto;
}
.mp-tile__desc {
  font-family: var(--font-body);
  font-size: clamp(12px, 2vw, 14px);
  font-weight: 600;
  color: var(--sub);
  line-height: 1.4;
}
.mp-tile__cta {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 11px; font-weight: 800;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--accent-2);
  margin-top: 4px;
}

/* Reprise de salle active */
.mp-resume {
  display: flex; align-items: center; gap: 14px;
  padding: 16px 20px;
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, var(--card-bg), rgba(45,186,110,.08));
  border: 1.5px solid rgba(45,186,110,.3);
  box-shadow: var(--elevation-1);
  cursor: pointer;
  transition: transform .2s, box-shadow .2s;
  animation: slideUp .5s var(--ease-out) .16s both;
}
.mp-resume:hover { transform: translateY(-2px); box-shadow: var(--elevation-2); }
.mp-resume__body { flex: 1; min-width: 0; }
.mp-resume__label {
  font-size: 10px; font-weight: 800; letter-spacing: .18em;
  text-transform: uppercase; color: var(--color-correct);
}
.mp-resume__code {
  font-family: var(--font-display);
  font-size: clamp(18px, 3vw, 22px); font-weight: 800;
  letter-spacing: .04em; color: var(--text); margin-top: 2px;
}

/* Stat strip (joueurs en ligne, salles actives) */
.mp-stats {
  display: flex; gap: clamp(10px, 2vw, 18px);
  justify-content: center; flex-wrap: wrap;
}
.mp-stat {
  display: flex; align-items: baseline; gap: 7px;
}
.mp-stat__num {
  font-family: var(--font-display);
  font-size: clamp(18px, 3vw, 24px); font-weight: 800;
  color: var(--text); letter-spacing: -0.03em;
}
.mp-stat__lbl {
  font-size: 10px; font-weight: 800; letter-spacing: .14em;
  text-transform: uppercase; color: var(--sub);
}
.mp-stat__sep { width: 1px; align-self: stretch; background: var(--glass-border); }

/* ════════════════════════════════════════════════════
   CODE INPUT (rejoindre) — pavé OTP
════════════════════════════════════════════════════ */
.code-input {
  display: flex; align-items: center; justify-content: center;
  gap: 10px; flex-wrap: wrap;
}
.code-prefix {
  font-family: var(--font-display);
  font-size: clamp(26px, 5vw, 38px); font-weight: 900;
  letter-spacing: .02em; color: var(--muted);
  user-select: none;
}
.code-cells { display: flex; gap: 8px; }
.code-cell {
  width: clamp(48px, 11vw, 64px);
  height: clamp(58px, 13vw, 78px);
  border-radius: var(--radius-md);
  border: 2px solid var(--glass-border);
  background: var(--glass);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display);
  font-size: clamp(26px, 5vw, 38px); font-weight: 900;
  color: var(--text);
  text-transform: uppercase;
  transition: all .2s var(--ease-out);
}
.code-cell--active {
  border-color: var(--accent-2);
  background: var(--glass-strong);
  box-shadow: 0 0 0 4px rgba(201,102,58,.14);
  transform: translateY(-2px);
}
.code-cell--filled { border-color: var(--text); }
.code-cell--error {
  border-color: var(--color-error);
  animation: wrongShake .4s ease both;
}
.code-hidden-input {
  position: absolute; opacity: 0; pointer-events: none;
  width: 1px; height: 1px;
}

/* Parties publiques (liste) */
.room-list {
  display: flex; flex-direction: column; gap: 8px;
}
.room-row {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 16px;
  border-radius: var(--radius-md);
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  cursor: pointer;
  transition: transform .18s, border-color .2s, box-shadow .2s;
  box-shadow: var(--elevation-1);
  animation: playerIn .4s ease both;
}
.room-row:hover {
  transform: translateY(-2px);
  border-color: var(--accent-2);
  box-shadow: var(--elevation-2);
}
.room-row__icon {
  width: 42px; height: 42px; border-radius: var(--radius-sm);
  background: var(--glass-strong); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 800;
  font-size: 13px; color: var(--text); letter-spacing: -0.02em;
}
.room-row__body { flex: 1; min-width: 0; }
.room-row__name {
  font-family: var(--font-body);
  font-size: 14px; font-weight: 700; color: var(--text);
}
.room-row__meta {
  font-size: 11px; font-weight: 600; color: var(--sub);
  margin-top: 2px;
}
.room-row__count {
  display: flex; align-items: center; gap: 6px;
  font-family: var(--font-display);
  font-size: 14px; font-weight: 800; color: var(--text);
  letter-spacing: -0.02em;
  white-space: nowrap;
}

/* Avatar picker (choix couleur) */
.avatar-picker {
  display: flex; gap: 10px; justify-content: center; flex-wrap: wrap;
}
.avatar-swatch {
  width: 40px; height: 40px; border-radius: 50%;
  cursor: pointer; border: 3px solid transparent;
  transition: transform .2s, border-color .2s;
  position: relative;
}
.avatar-swatch:hover { transform: scale(1.12); }
.avatar-swatch--active {
  border-color: var(--text);
  transform: scale(1.12);
  box-shadow: 0 0 0 3px var(--bg), 0 0 0 5px var(--text);
}

/* ════════════════════════════════════════════════════
   LOBBY — salle d'attente
════════════════════════════════════════════════════ */
.lobby-page { gap: clamp(12px, 2vh, 18px); }
.lobby-layout {
  flex: 1;
  width: 100%;
  max-width: min(1100px, 100%);
  align-self: center;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(12px, 2vw, 18px);
  min-height: 0;
}
@media (min-width: 768px) {
  .lobby-layout { grid-template-columns: 1.4fr 1fr; align-items: start; }
}

/* Bloc code + QR */
.lobby-code-card {
  padding: clamp(18px, 3vw, 26px);
  display: flex; flex-direction: column; gap: 16px;
}
.lobby-code-big {
  font-family: var(--font-display);
  font-size: clamp(40px, 9vw, 68px); font-weight: 900;
  letter-spacing: .06em; text-align: center;
  color: var(--text); line-height: 1;
}
.lobby-code-label {
  text-align: center;
  font-size: 11px; font-weight: 800; letter-spacing: .22em;
  text-transform: uppercase; color: var(--sub);
}
.lobby-share {
  display: flex; gap: 18px; align-items: center;
  padding-top: 4px;
}
.qr-box {
  width: clamp(84px, 18vw, 116px);
  height: clamp(84px, 18vw, 116px);
  border-radius: var(--radius-md);
  flex-shrink: 0;
  background:
    linear-gradient(90deg, var(--text) 7px, transparent 7px) 0 0 / 20px 20px,
    linear-gradient(var(--text) 7px, transparent 7px) 0 0 / 20px 20px,
    var(--glass-strong);
  border: 6px solid var(--card-bg);
  box-shadow: var(--elevation-1);
  opacity: .85;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 900;
  letter-spacing: .08em;
  color: var(--text);
}
.qr-box img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
.qr-box--ready {
  background: #fff;
  opacity: 1;
}
.lobby-share__text {
  font-size: 12px; font-weight: 600; color: var(--sub);
  line-height: 1.6;
}

/* Joueurs */
.lobby-players { padding: clamp(16px, 2.5vw, 22px); }
.lobby-players__head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 14px;
}
.lobby-players__count {
  font-family: var(--font-display);
  font-size: clamp(15px, 2.5vw, 18px); font-weight: 800;
  letter-spacing: -0.02em; color: var(--text);
  white-space: nowrap;
}
.lobby-player {
  display: flex; align-items: center; gap: 13px;
  padding: 11px 8px;
  position: relative;
  animation: playerIn .4s ease both;
}
.lobby-player:not(:last-child)::after {
  content: ''; position: absolute; bottom: 0; left: 8px; right: 8px;
  height: 1px; background: var(--glass-border);
}
.lobby-player__name {
  font-family: var(--font-body);
  font-size: 14px; font-weight: 700; color: var(--text); flex: 1;
  display: flex; align-items: center; gap: 8px;
}
.host-crown { color: var(--manche1-color); display: inline-flex; }
.lobby-player--empty { opacity: .4; }
.lobby-player--empty .lobby-player__name { font-style: italic; }
.empty-av {
  width: var(--avatar-md); height: var(--avatar-md);
  border-radius: 50%;
  border: 2px dashed var(--glass-border);
  display: flex; align-items: center; justify-content: center;
  color: var(--muted); flex-shrink: 0;
}
.ready-pill {
  font-size: 10px; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase;
  padding: 5px 11px; border-radius: var(--radius-full);
  white-space: nowrap;
}
.ready-pill--yes {
  color: var(--color-correct);
  background: rgba(45,186,110,.14);
  border: 1px solid rgba(45,186,110,.4);
}
.ready-pill--no {
  color: var(--sub);
  background: var(--glass);
  border: 1px solid var(--glass-border);
}

/* Barre de réactions */
.reaction-bar {
  display: flex; gap: 8px; justify-content: center;
  padding-top: 8px; flex-wrap: wrap;
}
.reaction-btn {
  width: 44px; height: 44px; border-radius: var(--radius-full);
  background: var(--glass-strong); border: 1px solid var(--glass-border);
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; cursor: pointer;
  transition: transform .15s, background .2s;
}
.reaction-btn:hover { transform: translateY(-3px) scale(1.1); background: var(--glass); }
.reaction-btn:active { transform: scale(.9); }
.reaction-float {
  position: absolute; font-size: 28px; pointer-events: none; z-index: 20;
  animation: reactionUp 1.4s ease-out forwards;
}

/* ════════════════════════════════════════════════════
   ATTENTE INTER-MANCHE (synchro)
════════════════════════════════════════════════════ */
.sync-page { align-items: center; justify-content: center; }
.sync-wrap {
  width: 100%; max-width: min(620px, 100%);
  display: flex; flex-direction: column; align-items: center;
  gap: clamp(20px, 4vh, 36px); text-align: center;
}
.sync-spinner {
  width: clamp(72px, 16vw, 100px);
  height: clamp(72px, 16vw, 100px);
  border-radius: 50%;
  border: 4px solid var(--glass-border);
  border-top-color: var(--accent-2);
  animation: spin 1s linear infinite;
}
.sync-title {
  font-family: var(--font-display);
  font-size: clamp(24px, 4.5vw, 36px); font-weight: 800;
  letter-spacing: -0.03em; color: var(--text);
  text-wrap: balance;
}
.sync-sub {
  font-size: 12px; font-weight: 700; letter-spacing: .2em;
  text-transform: uppercase; color: var(--sub);
}
.sync-players {
  display: flex; flex-wrap: wrap; gap: 14px; justify-content: center;
  width: 100%;
}
.sync-player {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  position: relative;
  animation: popIn .4s var(--ease-spring) both;
}
.sync-player__check {
  position: absolute; top: -4px; right: -4px;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--color-correct); color: #fff;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--bg);
  opacity: 0; transform: scale(0);
  transition: all .3s var(--ease-spring);
}
.sync-player--done .sync-player__check { opacity: 1; transform: scale(1); }
.sync-player--waiting { opacity: .5; }
.sync-player__name {
  font-size: 11px; font-weight: 700; color: var(--text);
  max-width: 80px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sync-progress {
  width: 100%; max-width: 320px;
  height: 6px; border-radius: 3px;
  background: var(--glass-border); overflow: hidden;
}
.sync-progress__fill {
  height: 100%; border-radius: 3px;
  background: var(--accent-2);
  transition: width .6s var(--ease-out);
}

/* ════════════════════════════════════════════════════
   CLASSEMENT LIVE (en partie)
════════════════════════════════════════════════════ */
.lb-live-page { gap: clamp(12px, 2vh, 18px); }
.lb-live-list {
  flex: 1; width: 100%; max-width: min(820px, 100%);
  align-self: center;
  display: flex; flex-direction: column; gap: 10px;
  justify-content: center;
  position: relative;
}
.lb-row {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 18px;
  border-radius: var(--radius-md);
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  box-shadow: var(--elevation-1);
  position: relative;
  transition: transform .55s var(--ease-spring), box-shadow .3s, border-color .3s;
}
.lb-row--leader {
  background: linear-gradient(135deg, var(--card-bg), rgba(244,196,48,.1));
  border-color: rgba(244,196,48,.4);
  box-shadow: 0 0 24px rgba(244,196,48,.1), var(--elevation-2);
}
.lb-row--me {
  border-color: var(--accent-2);
  box-shadow: 0 0 0 2px rgba(201,102,58,.18), var(--elevation-1);
}
.lb-rank {
  font-family: var(--font-display);
  font-size: clamp(20px, 3.5vw, 28px); font-weight: 900;
  letter-spacing: -0.04em; width: 38px; text-align: center;
  color: var(--text); flex-shrink: 0;
}
.lb-row--leader .lb-rank { color: var(--manche1-color); }
.lb-move {
  display: inline-flex; align-items: center;
  font-size: 10px; font-weight: 800; gap: 1px;
  width: 20px; flex-shrink: 0;
}
.lb-move--up   { color: var(--color-correct); }
.lb-move--down { color: var(--color-error); }
.lb-move--same { color: var(--muted); opacity: .6; }
.lb-info { flex: 1; min-width: 0; }
.lb-name {
  font-family: var(--font-body);
  font-size: 15px; font-weight: 700; color: var(--text);
  display: flex; align-items: center; gap: 8px;
}
.lb-bar-bg {
  height: 4px; border-radius: 2px; background: var(--glass);
  margin-top: 7px; overflow: hidden;
}
.lb-bar-fill {
  height: 100%; border-radius: 2px;
  background: var(--accent);
  transition: width .7s var(--ease-out);
}
.lb-row--leader .lb-bar-fill { background: var(--manche1-color); }
.lb-score {
  font-family: var(--font-display);
  font-size: clamp(20px, 3.5vw, 26px); font-weight: 800;
  letter-spacing: -0.03em; color: var(--text);
  white-space: nowrap; flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}
.lb-delta {
  font-family: var(--font-display);
  font-size: 13px; font-weight: 800;
  color: var(--color-correct);
  margin-left: 6px;
  opacity: 0;
}
.lb-delta--show { animation: scoreFloat 1.1s ease-out; }

/* ════════════════════════════════════════════════════
   CLASSEMENT GÉNÉRAL (all-time)
════════════════════════════════════════════════════ */
.lb-gen-page { gap: clamp(10px, 2vh, 16px); }

/* Filtres période */
.period-tabs {
  display: flex; gap: 6px; justify-content: center;
  padding: 4px; border-radius: var(--radius-full);
  background: var(--glass); border: 1px solid var(--glass-border);
  width: fit-content; align-self: center;
}
.period-tab {
  font-family: var(--font-body);
  font-size: 11px; font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase;
  padding: 9px 18px; border-radius: var(--radius-full);
  cursor: pointer; color: var(--sub);
  background: transparent; border: none;
  transition: all .2s; min-height: 40px;
}
.period-tab--active {
  background: var(--text); color: var(--bg);
}

/* Podium top 3 */
.lb-podium {
  display: grid;
  grid-template-columns: 1fr 1.15fr 1fr;
  align-items: end; gap: clamp(8px, 2vw, 16px);
  width: 100%; max-width: min(620px, 100%); align-self: center;
  padding: 8px 0;
}
.lb-pod {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  position: relative;
  opacity: 0; transform: translateY(26px);
  transition: opacity .5s var(--ease-out), transform .6s var(--ease-spring);
}
.lb-pod--revealed { opacity: 1; transform: none; }
.lb-pod__crown {
  position: absolute; top: -22px; left: 50%; transform: translateX(-50%) scale(0);
  color: var(--manche1-color);
  transition: transform .5s var(--ease-spring) .15s;
}
.lb-pod--revealed .lb-pod__crown { transform: translateX(-50%) scale(1); }
.lb-pod__medal {
  font-family: var(--font-display);
  font-size: 13px; font-weight: 900;
  width: 26px; height: 26px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff;
}
.lb-pod__medal--1 { background: var(--manche1-color); color: #3a2c00; }
.lb-pod__medal--2 { background: #B8C0C4; color: #2a3133; }
.lb-pod__medal--3 { background: #C9885A; color: #3a2410; }
.lb-pod__name {
  font-family: var(--font-body);
  font-size: clamp(12px, 2vw, 14px); font-weight: 800; color: var(--text);
  text-align: center; line-height: 1.1;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lb-pod__score {
  font-family: var(--font-display);
  font-size: clamp(14px, 2.4vw, 17px); font-weight: 800;
  letter-spacing: -0.02em; color: var(--sub);
  font-variant-numeric: tabular-nums;
}
.lb-pod__base {
  width: 100%;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  background: var(--glass-strong);
  border: 1px solid var(--glass-border);
  border-bottom: none;
  position: relative;
  transform-origin: bottom center;
  transform: scaleY(0);
  transition: transform .55s var(--ease-spring);
}
.lb-pod--revealed .lb-pod__base { transform: scaleY(1); }
.lb-pod__base--1 { height: clamp(70px, 14vw, 100px); background: linear-gradient(180deg, var(--manche1-color), rgba(244,196,48,.3)); }
.lb-pod__base--2 { height: clamp(50px, 10vw, 72px); }
.lb-pod__base--3 { height: clamp(38px, 8vw, 56px); }

/* Emphase 1ʳᵉ place à la révélation */
.lb-pod--first.lb-pod--revealed .avatar { animation: champPop .6s var(--ease-spring) .15s both; }
.lb-pod--first.lb-pod--revealed .lb-pod__base--1 {
  box-shadow: 0 0 28px rgba(244,196,48,.45);
}
@keyframes champPop {
  0%   { transform: scale(1); }
  45%  { transform: scale(1.16); }
  100% { transform: scale(1); }
}

/* Liste générale scrollable */
.lb-gen-scroll {
  flex: 1; width: 100%; max-width: min(720px, 100%);
  align-self: center;
  overflow-y: auto; scrollbar-width: none;
  display: flex; flex-direction: column; gap: 7px;
  padding: 4px 2px 12px;
  min-height: 0;
}
.lb-gen-scroll::-webkit-scrollbar { display: none; }
.lb-gen-row {
  display: flex; align-items: center; gap: 13px;
  padding: 11px 15px; border-radius: var(--radius-md);
  background: var(--card-bg); border: 1px solid var(--card-border);
  animation: playerIn .35s ease both;
}
.lb-gen-row--me {
  border-color: var(--accent-2);
  box-shadow: 0 0 0 2px rgba(201,102,58,.16);
  position: sticky; bottom: 0;
}
.lb-gen-rank {
  font-family: var(--font-display);
  font-size: 15px; font-weight: 800; letter-spacing: -0.02em;
  width: 30px; text-align: center; color: var(--sub); flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}
.lb-gen-info { flex: 1; min-width: 0; }
.lb-gen-name {
  font-family: var(--font-body);
  font-size: 14px; font-weight: 700; color: var(--text);
  display: flex; align-items: center; gap: 7px;
}
.lb-gen-sub {
  font-size: 11px; font-weight: 600; color: var(--sub); margin-top: 2px;
}
.lb-gen-score {
  font-family: var(--font-display);
  font-size: clamp(15px, 2.4vw, 18px); font-weight: 800;
  letter-spacing: -0.02em; color: var(--text);
  white-space: nowrap; flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}
.you-tag {
  font-size: 9px; font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; color: var(--accent-2);
  padding: 2px 7px; border-radius: var(--radius-full);
  border: 1px solid var(--accent-2);
}

/* ════════════════════════════════════════════════════
   PROFIL JOUEUR
════════════════════════════════════════════════════ */
.profile-page { gap: clamp(12px, 2vh, 18px); }
.profile-scroll {
  flex: 1; width: 100%; max-width: min(780px, 100%);
  align-self: center;
  overflow-y: auto; scrollbar-width: none;
  display: flex; flex-direction: column; gap: clamp(14px, 2.5vh, 22px);
  padding: 4px 2px 16px; min-height: 0;
}
.profile-scroll::-webkit-scrollbar { display: none; }

.profile-hero {
  display: flex; align-items: center; gap: clamp(16px, 3vw, 24px);
  padding: clamp(20px, 3.5vw, 30px);
}
.profile-id { flex: 1; min-width: 0; }
.profile-name {
  font-family: var(--font-display);
  font-size: clamp(26px, 5vw, 40px); font-weight: 800;
  letter-spacing: -0.04em; color: var(--text); line-height: 1;
}
.profile-title {
  display: inline-flex; align-items: center; gap: 7px;
  margin-top: 10px;
  font-size: 11px; font-weight: 800; letter-spacing: .14em;
  text-transform: uppercase; color: var(--accent-2);
}
.profile-rank-chip {
  text-align: center; flex-shrink: 0;
  display: flex; flex-direction: column; gap: 2px;
}
.profile-rank-chip__num {
  font-family: var(--font-display);
  font-size: clamp(28px, 5vw, 40px); font-weight: 900;
  letter-spacing: -0.04em; color: var(--text);
  font-variant-numeric: tabular-nums;
}
.profile-rank-chip__lbl {
  font-size: 9px; font-weight: 800; letter-spacing: .16em;
  text-transform: uppercase; color: var(--sub);
}

.profile-section-label {
  font-family: var(--font-body);
  font-size: 11px; font-weight: 800; letter-spacing: .22em;
  text-transform: uppercase; color: var(--sub);
  padding-left: 4px;
}
.profile-stats {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px;
}
@media (min-width: 560px) {
  .profile-stats { grid-template-columns: repeat(4, 1fr); }
}
.pstat {
  padding: 16px; border-radius: var(--radius-md);
  background: var(--card-bg); border: 1px solid var(--card-border);
  box-shadow: var(--elevation-1);
  display: flex; flex-direction: column; gap: 4px;
  animation: popIn .4s var(--ease-spring) both;
}
.pstat__val {
  font-family: var(--font-display);
  font-size: clamp(22px, 4vw, 30px); font-weight: 800;
  letter-spacing: -0.03em; color: var(--text);
  font-variant-numeric: tabular-nums;
}
.pstat__lbl {
  font-size: 10px; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; color: var(--sub);
}

/* Trophées */
.trophy-row {
  display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none;
  padding: 2px 2px 6px;
}
.trophy-row::-webkit-scrollbar { display: none; }
.trophy {
  flex-shrink: 0; width: clamp(96px, 22vw, 124px);
  padding: 16px 12px; border-radius: var(--radius-md);
  background: var(--card-bg); border: 1px solid var(--card-border);
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  text-align: center; box-shadow: var(--elevation-1);
}
.trophy--locked { opacity: .42; filter: saturate(.3); }
.trophy__icon {
  width: 44px; height: 44px; border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  background: var(--glass-strong); color: var(--accent-2);
}
.trophy__name {
  font-family: var(--font-body);
  font-size: 11px; font-weight: 800; color: var(--text); line-height: 1.2;
}
.trophy__desc {
  font-size: 9px; font-weight: 600; color: var(--sub); line-height: 1.3;
}

/* Historique des parties */
.history-list { display: flex; flex-direction: column; gap: 8px; }
.history-row {
  display: flex; align-items: center; gap: 14px;
  padding: 13px 16px; border-radius: var(--radius-md);
  background: var(--card-bg); border: 1px solid var(--card-border);
  animation: playerIn .35s ease both;
}
.history-medal {
  width: 38px; height: 38px; border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 900; font-size: 15px;
  flex-shrink: 0; letter-spacing: -0.02em;
}
.history-medal--win  { background: rgba(244,196,48,.18); color: var(--manche1-color); }
.history-medal--good { background: var(--glass-strong); color: var(--text); }
.history-body { flex: 1; min-width: 0; }
.history-mode {
  font-family: var(--font-body);
  font-size: 13px; font-weight: 700; color: var(--text);
}
.history-meta {
  font-size: 11px; font-weight: 600; color: var(--sub); margin-top: 2px;
}
.history-pts {
  font-family: var(--font-display);
  font-size: 15px; font-weight: 800; letter-spacing: -0.02em;
  color: var(--text); white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* ════════════════════════════════════════════════════
   RESPONSIVE
════════════════════════════════════════════════════ */
@media (max-width: 600px) {
  .mp-choices { grid-template-columns: 1fr; }
  .code-cell { width: 52px; height: 64px; }
}

@keyframes reactionUp {
  0%   { opacity: 0; transform: translateY(0) scale(.6); }
  20%  { opacity: 1; transform: translateY(-10px) scale(1.1); }
  100% { opacity: 0; transform: translateY(-90px) scale(1); }
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ════════════════════════════════════════════════════
   CHOIX DE MODE MULTIJOUEUR
════════════════════════════════════════════════════ */
.modes-page { align-items: center; }
.modes-wrap {
  flex: 1; width: 100%; max-width: min(760px, 100%);
  align-self: center;
  display: flex; flex-direction: column; justify-content: center;
  gap: clamp(12px, 2vh, 18px);
  padding: clamp(8px, 2vh, 20px) 0;
}
.mode-card {
  position: relative;
  display: flex; align-items: center; gap: clamp(16px, 3vw, 22px);
  padding: clamp(18px, 3vw, 26px);
  border-radius: var(--radius-lg);
  background: var(--card-bg);
  border: 1.5px solid var(--card-border);
  box-shadow: var(--elevation-2);
  cursor: pointer; overflow: hidden;
  transition: transform .25s var(--ease-out), box-shadow .25s, border-color .2s;
  animation: slideUp .5s var(--ease-spring) both;
}
.mode-card:nth-child(2) { animation-delay: .08s; }
.mode-card:nth-child(3) { animation-delay: .16s; }
.mode-card::before {
  content: ''; position: absolute; inset: 0; height: 42%;
  background: linear-gradient(180deg, rgba(255,255,255,.14), transparent);
  pointer-events: none;
}
.mode-card:not(.mode-card--locked):hover {
  transform: translateY(-3px);
  box-shadow: var(--elevation-4);
  border-color: var(--accent-2);
}
.mode-card__num {
  font-family: var(--font-display);
  font-size: clamp(28px, 5vw, 44px); font-weight: 900;
  letter-spacing: -0.05em; color: var(--muted);
  width: clamp(40px, 8vw, 60px); flex-shrink: 0; text-align: center;
  line-height: 1;
}
.mode-card__icon {
  width: clamp(52px, 10vw, 68px); height: clamp(52px, 10vw, 68px);
  border-radius: var(--radius-md); flex-shrink: 0;
  background: var(--glass-strong); border: 1px solid var(--glass-border);
  display: flex; align-items: center; justify-content: center;
  color: var(--text);
  transition: transform .3s var(--ease-spring);
}
.mode-card:not(.mode-card--locked):hover .mode-card__icon { transform: scale(1.08) rotate(-3deg); }
.mode-card--primary .mode-card__icon { background: var(--btn-gradient); color: var(--btn-text); border: none; }
.mode-card__body { flex: 1; min-width: 0; }
.mode-card__title {
  font-family: var(--font-display);
  font-size: clamp(19px, 3vw, 26px); font-weight: 800;
  letter-spacing: -0.03em; color: var(--text); line-height: 1;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.mode-card__desc {
  font-family: var(--font-body);
  font-size: clamp(12px, 2vw, 14px); font-weight: 600;
  color: var(--sub); line-height: 1.4; margin-top: 7px;
}
.mode-card__arrow { flex-shrink: 0; color: var(--accent-2); }
.mode-tag {
  font-size: 9px; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; padding: 4px 9px;
  border-radius: var(--radius-full); white-space: nowrap;
}
.mode-tag--new { color: var(--color-correct); background: rgba(45,186,110,.14); border: 1px solid rgba(45,186,110,.4); }

/* Battle royale verrouillé */
.mode-card--locked {
  cursor: not-allowed;
  background: linear-gradient(135deg, #1a1d22, #2a2e36);
  border-color: rgba(255,255,255,.12);
}
.mode-card--locked .mode-card__num { color: rgba(255,255,255,.22); }
.mode-card--locked .mode-card__icon {
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.14);
  color: rgba(255,255,255,.55);
}
.mode-card--locked .mode-card__title { color: rgba(255,255,255,.92); }
.mode-card--locked .mode-card__desc { color: rgba(255,255,255,.5); }
.mode-card--locked::after {
  content: ''; position: absolute; inset: 0;
  background:
    repeating-linear-gradient(45deg, transparent, transparent 14px, rgba(255,255,255,.025) 14px, rgba(255,255,255,.025) 28px);
  pointer-events: none;
}
.lock-tag {
  font-size: 9px; font-weight: 800; letter-spacing: .14em;
  text-transform: uppercase; padding: 4px 10px;
  border-radius: var(--radius-full);
  color: #E9C46A; background: rgba(233,196,106,.12);
  border: 1px solid rgba(233,196,106,.4);
  display: inline-flex; align-items: center; gap: 5px;
}

/* Case mystère — rien n'est lisible */
.mode-card--mystery .mode-card__num {
  font-size: clamp(34px, 6vw, 52px);
  color: rgba(233,196,106,.55);
}
.mode-card--mystery .mystery-q {
  color: #E9C46A;
  animation: mysteryPulse 2.6s ease-in-out infinite;
}
.mystery-blur {
  filter: blur(10px);
  opacity: .8;
  user-select: none;
  pointer-events: none;
  width: max-content; max-width: 70%;
}
.mystery-redact {
  display: flex; flex-direction: column; gap: 7px; margin-top: 11px;
}
.redact-bar {
  height: 9px; border-radius: 5px;
  background: rgba(255,255,255,.16);
  position: relative; overflow: hidden;
}
.redact-bar::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.1), transparent);
  animation: redactShimmer 2.4s ease-in-out infinite;
}
@keyframes mysteryPulse {
  0%, 100% { opacity: .7; transform: scale(1); }
  50%      { opacity: 1;  transform: scale(1.06); }
}
@keyframes redactShimmer {
  0%   { transform: translateX(-100%); }
  60%, 100% { transform: translateX(100%); }
}

/* ════════════════════════════════════════════════════
   QUIZ — pads de réponse (système original)
   4 formes / 4 couleurs
════════════════════════════════════════════════════ */
:root {
  --quiz-a: #C2603A;  /* terracotta · triangle */
  --quiz-b: #7C5FA6;  /* améthyste · losange */
  --quiz-c: #C2912B;  /* or profond · cercle */
  --quiz-d: #2F6E68;  /* céladon profond · carré */
}

/* ── Écran HÔTE (moniteur grand écran) ── */
.host-page {
  padding: clamp(20px, 3.5vmin, 44px);
  gap: clamp(14px, 2.5vh, 26px);
}
.host-topbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-shrink: 0;
}
.host-qmeta {
  font-family: var(--font-body);
  font-size: clamp(11px, 1.6vw, 14px); font-weight: 800;
  letter-spacing: .22em; text-transform: uppercase; color: var(--sub);
}
.host-answered {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-display);
  font-size: clamp(16px, 2.5vw, 22px); font-weight: 800;
  color: var(--text); letter-spacing: -0.02em;
  white-space: nowrap;
}
.host-answered__dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--color-correct); animation: dotPulse 1.3s ease-in-out infinite;
}
.host-question {
  flex: 1; display: flex; align-items: center; justify-content: center;
  text-align: center; min-height: 0;
}
.host-question__text {
  font-family: var(--font-display);
  font-size: clamp(28px, 5vw, 64px); font-weight: 800;
  letter-spacing: -0.03em; line-height: 1.1; color: var(--text);
  overflow-wrap: anywhere; hyphens: auto;
  text-wrap: balance; max-width: 1200px;
}
.host-timer-ring {
  position: relative; flex-shrink: 0;
  width: clamp(56px, 9vw, 88px); height: clamp(56px, 9vw, 88px);
}
.host-timer-ring svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.host-timer-ring__val {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display);
  font-size: clamp(20px, 3.5vw, 34px); font-weight: 800;
  color: var(--text); letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}

/* Grille des réponses (quadrants) */
.host-answers {
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(10px, 1.6vw, 16px);
  flex-shrink: 0;
}

/* Attente de buzz (hôte) */
.host-buzz-wait {
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; gap: 16px;
  padding: clamp(20px, 4vh, 40px);
  border-radius: var(--radius-lg);
  background: var(--glass-strong);
  border: 1.5px dashed var(--glass-border);
}
.host-buzz-wait--hit {
  border-style: solid;
  border-color: var(--color-correct);
  background: var(--color-correct-bg);
}
.host-buzz-wait__pulse {
  color: var(--color-correct);
  display: flex; animation: dotPulse 1.2s ease-in-out infinite;
}
.host-buzz-wait--hit .host-buzz-wait__pulse { animation: champPop .5s var(--ease-spring) both; }
.host-buzz-wait__text {
  font-family: var(--font-display);
  font-size: clamp(18px, 3vw, 28px); font-weight: 800;
  letter-spacing: -0.02em; color: var(--text);
}
.host-ans {
  display: flex; align-items: center; gap: clamp(12px, 2vw, 18px);
  padding: clamp(16px, 2.4vw, 26px);
  border-radius: var(--radius-md);
  color: #fff; position: relative; overflow: hidden;
  min-height: clamp(72px, 11vh, 120px);
  box-shadow: var(--elevation-2);
}
.host-ans__shape { width: clamp(28px, 4vw, 40px); height: clamp(28px, 4vw, 40px); flex-shrink: 0; }
.host-ans__text {
  font-family: var(--font-display);
  font-size: clamp(16px, 2.6vw, 30px); font-weight: 800;
  letter-spacing: -0.02em; line-height: 1.1; flex: 1;
  text-shadow: 0 1px 3px rgba(0,0,0,.2);
}
.host-ans__count {
  font-family: var(--font-display);
  font-size: clamp(18px, 3vw, 32px); font-weight: 900;
  letter-spacing: -0.03em; font-variant-numeric: tabular-nums;
  opacity: 0; transition: opacity .3s;
}
.host-ans--revealed .host-ans__count { opacity: 1; }
.host-ans--a { background: var(--quiz-a); }
.host-ans--b { background: var(--quiz-b); }
.host-ans--c { background: var(--quiz-c); }
.host-ans--d { background: var(--quiz-d); }
.host-ans--dim { opacity: .32; filter: saturate(.6); }
.host-ans--correct {
  box-shadow: 0 0 0 4px #fff, 0 0 0 8px var(--color-correct), var(--elevation-3);
  animation: correctPop .5s ease both;
}
.host-ans__check {
  position: absolute; top: 10px; right: 12px;
  width: 28px; height: 28px; border-radius: 50%;
  background: #fff; color: var(--color-correct);
  display: none; align-items: center; justify-content: center;
}
.host-ans--correct .host-ans__check { display: flex; }

/* Bandeau bas hôte */
.host-controls {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-shrink: 0;
}
.host-avatars { display: flex; gap: 8px; align-items: center; }
.host-mini-av {
  width: clamp(32px, 5vw, 42px); height: clamp(32px, 5vw, 42px);
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(11px, 1.6vw, 14px); color: #fff;
  border: 2px solid var(--card-bg);
  position: relative; transition: transform .3s var(--ease-spring);
  opacity: .42; filter: grayscale(.4);
}
.host-mini-av--answered { opacity: 1; filter: none; transform: scale(1.06); }
.host-mini-av--answered::after {
  content: ''; position: absolute; bottom: -1px; right: -1px;
  width: 13px; height: 13px; border-radius: 50%;
  background: var(--color-correct); border: 2px solid var(--card-bg);
}

/* ── Écran JOUEUR (téléphone) ── */
.player-page {
  padding: clamp(16px, 4vmin, 32px);
  gap: clamp(12px, 2vh, 18px);
}
.player-topbar {
  display: flex; align-items: center; justify-content: space-between;
  flex-shrink: 0;
}
.player-name-chip {
  display: flex; align-items: center; gap: 9px;
  font-family: var(--font-body); font-weight: 700; font-size: 14px;
  color: var(--text);
}
.player-score-chip {
  font-family: var(--font-display);
  font-size: clamp(16px, 3vw, 22px); font-weight: 800;
  letter-spacing: -0.02em; color: var(--text);
  font-variant-numeric: tabular-nums;
}
.player-qhint {
  text-align: center; flex-shrink: 0;
  padding: clamp(14px, 3vh, 24px) 16px;
}
.player-qhint__label {
  font-size: 11px; font-weight: 800; letter-spacing: .2em;
  text-transform: uppercase; color: var(--sub);
}
.player-qhint__text {
  font-family: var(--font-display);
  font-size: clamp(18px, 4vw, 26px); font-weight: 800;
  letter-spacing: -0.02em; color: var(--text); line-height: 1.2;
  margin-top: 8px; text-wrap: balance;
}
.player-pads {
  flex: 1; display: grid; grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr; gap: clamp(10px, 2vw, 16px);
  min-height: 0;
}

/* Zone buzzer joueur (avant de répondre) */
.player-buzz {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 22px;
}
.player-buzz .buzzer { animation: buzzerIdle 2.4s ease-in-out infinite; }
.player-buzz__hint {
  font-family: var(--font-body);
  font-size: 12px; font-weight: 800; letter-spacing: .18em;
  text-transform: uppercase; color: var(--sub); text-align: center;
}
.player-pad {
  border-radius: var(--radius-lg);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: clamp(8px, 1.6vw, 14px);
  cursor: pointer; color: #fff; position: relative; overflow: hidden;
  border: none; transition: transform .12s, opacity .25s, filter .25s;
  box-shadow: var(--elevation-2);
  min-height: clamp(80px, 18vh, 200px);
  padding: clamp(12px, 2.6vw, 24px);
}
.player-pad::before {
  content: ''; position: absolute; inset: 0; height: 45%;
  background: linear-gradient(180deg, rgba(255,255,255,.2), transparent);
  pointer-events: none;
}
.player-pad:active { transform: scale(.95); }
.player-pad__shape { width: clamp(40px, 12vw, 72px); height: clamp(40px, 12vw, 72px); position: relative; z-index: 1; }
.player-pad__text {
  position: relative; z-index: 1;
  font-family: var(--font-body);
  font-size: clamp(13px, 2.5vw, 18px);
  font-weight: 900;
  line-height: 1.18;
  text-align: center;
  max-width: 100%;
  overflow-wrap: anywhere;
}
.player-pad--a { background: var(--quiz-a); }
.player-pad--b { background: var(--quiz-b); }
.player-pad--c { background: var(--quiz-c); }
.player-pad--d { background: var(--quiz-d); }
.player-pads--locked .player-pad:not(.player-pad--chosen) { opacity: .28; filter: saturate(.5); pointer-events: none; }
.player-pad--chosen { box-shadow: 0 0 0 4px var(--bg), 0 0 0 8px #fff, var(--elevation-3); }

/* États plein écran joueur (attente / feedback) */
.player-state {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 18px; text-align: center;
}
.player-state__icon {
  width: clamp(80px, 20vw, 120px); height: clamp(80px, 20vw, 120px);
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  animation: popIn .5s var(--ease-spring) both;
}
.player-state__icon--correct { background: var(--color-correct-bg); color: var(--color-correct); }
.player-state__icon--wrong   { background: var(--color-error-bg); color: var(--color-error); }
.player-state__icon--wait    { background: var(--glass-strong); color: var(--text); }
.player-state__title {
  font-family: var(--font-display);
  font-size: clamp(26px, 6vw, 40px); font-weight: 800;
  letter-spacing: -0.03em; color: var(--text);
}
.player-state__sub {
  font-size: 13px; font-weight: 700; letter-spacing: .04em; color: var(--sub);
}
.player-state__pts {
  font-family: var(--font-display);
  font-size: clamp(30px, 7vw, 48px); font-weight: 900;
  letter-spacing: -0.04em; color: var(--color-correct);
  animation: popIn .5s var(--ease-spring) .15s both;
}

.player-state--summary {
  justify-content: stretch;
  width: 100%;
  min-height: 0;
}

.round-summary {
  width: min(1280px, 100%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, .76fr) minmax(420px, 1.24fr);
  grid-template-areas:
    "answer answer"
    "board fact"
    "next fact";
  gap: clamp(12px, 2vw, 18px);
  align-content: center;
  padding: clamp(8px, 1.8vw, 16px);
}

.round-answer,
.round-board,
.round-fact {
  border: 1px solid rgba(255,255,255,.26);
  background: color-mix(in srgb, var(--glass) 78%, rgba(255,255,255,.18));
  box-shadow: var(--elevation-2);
  border-radius: 22px;
  backdrop-filter: blur(16px);
}

.round-answer {
  grid-area: answer;
  padding: clamp(16px, 3vw, 24px);
  display: grid;
  gap: 8px;
  text-align: left;
  min-height: 118px;
}

.round-answer span,
.round-board__title,
.round-fact span {
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--sub);
}

.round-answer strong {
  font-family: var(--font-display);
  font-size: clamp(26px, 5vw, 44px);
  line-height: 1;
  color: var(--text);
}

.round-answer--ok { border-color: color-mix(in srgb, var(--color-correct) 42%, transparent); }
.round-answer--ko { border-color: color-mix(in srgb, var(--color-error) 36%, transparent); }

.round-board {
  grid-area: board;
  padding: clamp(14px, 2.4vw, 20px);
  display: grid;
  gap: 9px;
}

.round-rank {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: 14px;
  background: rgba(255,255,255,.18);
  color: var(--text);
}

.round-rank span {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(255,255,255,.18);
  font-weight: 900;
}

.round-rank b {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.round-rank strong { font-family: var(--font-display); }
.round-rank--me { outline: 2px solid rgba(255,255,255,.48); }

.round-fact {
  grid-area: fact;
  overflow: hidden;
  display: grid;
  grid-template-rows: minmax(320px, 46vh) auto;
  text-align: left;
}

.round-fact img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: var(--glass-strong);
}

.round-fact div {
  padding: clamp(14px, 2.4vw, 20px);
  display: grid;
  gap: 8px;
}

.round-fact p {
  margin: 0;
  color: var(--text);
  font-weight: 800;
  line-height: 1.35;
}

.round-fact small {
  color: var(--muted);
  font-weight: 700;
}

.round-next {
  grid-area: next;
  justify-self: start;
  align-self: center;
  padding: 12px 16px;
  border-radius: 999px;
  background: rgba(255,255,255,.16);
  color: var(--text);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .14em;
  text-transform: uppercase;
}

@media (max-width: 820px) {
  .host-answers { grid-template-columns: 1fr; }
  .round-summary {
    grid-template-columns: 1fr;
    grid-template-areas:
      "answer"
      "board"
      "fact"
      "next";
  }
  .round-fact { grid-template-rows: minmax(240px, 34vh) auto; }
}

@media (max-width: 520px) {
  .round-fact { grid-template-rows: minmax(210px, 32vh) auto; }
}

/* ════════════════════════════════════════════════════
   ÉCRANS MULTIJOUEUR TEMPS RÉEL
════════════════════════════════════════════════════ */
.jeu-multi-page .host-answered {
  font-size: clamp(13px, 2.4vw, 16px);
}

.jeu-multi-page {
  --bg: #EFE4D2;
  --bg-deep: #D9C7A8;
  --text: #1E160C;
  --sub: #6F5A41;
  --muted: #8B765C;
  --card-bg: rgba(255, 253, 248, .82);
  --card-border: rgba(255, 255, 255, .72);
  --accent: #1E160C;
  --accent-2: #B8482A;
  --glass: rgba(30, 22, 12, .05);
  --glass-strong: rgba(30, 22, 12, .11);
  --glass-border: rgba(30, 22, 12, .14);
  --shadow: rgba(30, 22, 12, .15);
  width: 100%;
  min-height: 100dvh;
  overflow: hidden;
}

.jeu-multi-page .topbar {
  width: 100%;
  align-self: stretch;
}

.jeu-multi-page .q-card {
  width: 100%;
}

.jeu-multi-page .q-text {
  font-size: clamp(26px, 3.1vw, 54px);
  line-height: 1.15;
}

.jeu-multi-page .buzzer {
  width: clamp(118px, 12vw, 156px);
  height: clamp(118px, 12vw, 156px);
}

.jeu-multi-page .scores-bar {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: clamp(8px, 1vw, 12px);
}

.jeu-multi-page .score-chip {
  min-width: 0;
}

.jeu-multi-page .streak-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 22px;
  font-size: 14px;
}

@media (min-width: 900px) {
  .jeu-multi-page {
    display: grid !important;
    grid-template-columns: minmax(0, 1.08fr) minmax(360px, .92fr) !important;
    grid-template-rows: auto minmax(0, 1fr) auto !important;
    grid-template-areas:
      "topbar topbar"
      "question answers"
      "scores scores" !important;
    align-items: stretch;
    gap: clamp(16px, 2vw, 28px);
  }

  .jeu-multi-page .topbar {
    grid-area: topbar;
  }

  .jeu-multi-page .q-section {
    grid-area: question;
    min-height: 0;
    justify-content: center;
    width: 100%;
    justify-self: stretch;
  }

  .jeu-multi-page .answers-section {
    grid-area: answers;
    min-height: 0;
    justify-content: center;
    width: 100%;
    justify-self: stretch;
  }

  .jeu-multi-page .buzzer-section {
    grid-area: question;
    align-self: end;
    justify-self: center;
    transform: translateY(clamp(18px, 4vh, 42px));
    z-index: 5;
  }

  .jeu-multi-page .scores-bar {
    grid-area: scores;
    align-self: end;
  }

  .jeu-multi-page:has(.answers-section--hidden) {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto minmax(220px, auto) auto minmax(72px, auto) !important;
    grid-template-areas:
      "topbar"
      "question"
      "buzzer"
      "scores" !important;
    align-content: center;
  }

  .jeu-multi-page:has(.answers-section--hidden) .q-section {
    width: min(100%, 1500px) !important;
    justify-self: center !important;
    align-self: center;
    flex: initial;
  }

  .jeu-multi-page:has(.answers-section--hidden) .q-card {
    width: 100% !important;
    min-height: clamp(220px, 32vh, 350px);
    padding-inline: clamp(36px, 7vw, 120px);
  }

  .jeu-multi-page:has(.answers-section--hidden) .q-text {
    font-size: clamp(34px, 3.8vw, 62px);
  }

  .jeu-multi-page:has(.answers-section--hidden) .buzzer-section {
    grid-area: buzzer !important;
    align-self: center;
    justify-self: center;
    transform: none;
  }

  .jeu-multi-page:has(.answers-section--hidden) .answers-section {
    display: none !important;
    grid-area: auto;
  }

  .jeu-multi-page:has(.answers-section--hidden) .scores-bar {
    width: min(100%, 1500px) !important;
    justify-self: center !important;
  }
}

@media (max-width: 899px) {
  .jeu-multi-page {
    display: flex;
    flex-direction: column;
  }

  .jeu-multi-page .q-card {
    min-height: auto;
  }

  .jeu-multi-page .answers-grid {
    grid-template-columns: 1fr;
  }
}

.resume-question-page {
  --bg: #EFE4D2;
  --bg-deep: #D9C7A8;
  --text: #1E160C;
  --sub: #6F5A41;
  --muted: #8B765C;
  --card-bg: rgba(255, 253, 248, .82);
  --card-border: rgba(255, 255, 255, .72);
  --accent: #1E160C;
  --accent-2: #B8482A;
  --glass: rgba(30, 22, 12, .05);
  --glass-strong: rgba(30, 22, 12, .11);
  --glass-border: rgba(30, 22, 12, .14);
  --shadow: rgba(30, 22, 12, .15);
  gap: clamp(16px, 3vh, 26px);
}

.resume-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  max-width: min(1080px, 100%);
  align-self: center;
  padding: clamp(14px, 2.5vw, 24px) clamp(16px, 3vw, 30px);
  border-radius: var(--radius-lg);
  background: var(--card-bg);
  border: 1.5px solid var(--card-border);
  box-shadow: var(--elevation-2);
  animation: slideUp .45s var(--ease-spring) both;
}

.resume-verdict {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.resume-verdict__icon {
  width: clamp(44px, 8vw, 62px);
  height: clamp(44px, 8vw, 62px);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  animation: popIn .5s var(--ease-spring) both;
}

.resume-verdict--ok .resume-verdict__icon {
  background: var(--color-correct-bg);
  color: var(--color-correct);
}

.resume-verdict--ko .resume-verdict__icon {
  background: var(--color-error-bg);
  color: var(--color-error);
}

.resume-verdict__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(24px, 4vw, 38px);
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--text);
}

.resume-verdict__sub {
  margin-top: 7px;
  color: var(--sub);
  font-weight: 700;
}

.resume-gain {
  font-family: var(--font-display);
  font-size: clamp(36px, 7vw, 58px);
  font-weight: 900;
  letter-spacing: -0.05em;
  color: var(--color-correct);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}

.resume-gain--zero {
  color: var(--muted);
}

.resume-layout {
  flex: 1;
  min-height: 0;
  width: 100%;
  max-width: min(1080px, 100%);
  align-self: center;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(280px, .95fr);
  gap: clamp(14px, 2.4vw, 22px);
  align-content: center;
}

.trivia-card,
.resume-rank {
  border-radius: var(--radius-lg);
  background: var(--card-bg);
  border: 1.5px solid var(--card-border);
  box-shadow: var(--elevation-2);
  overflow: hidden;
}

.trivia-card {
  display: flex;
  flex-direction: column;
  animation: slideUp .5s var(--ease-out) .1s both;
}

.trivia-img {
  min-height: clamp(150px, 28vh, 230px);
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,.18) 0 16px, rgba(0,0,0,.035) 16px 32px),
    var(--glass-strong);
  background-size: cover;
  background-position: center;
  border-bottom: 1px solid var(--glass-border);
  display: flex;
  align-items: flex-end;
}

.trivia-img__tag {
  margin: 14px;
  padding: 6px 12px;
  border-radius: var(--radius-full);
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  color: var(--text);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .18em;
}

.trivia-body {
  padding: clamp(18px, 2.8vw, 26px);
}

.trivia-label,
.resume-rank__head {
  color: var(--accent-2);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .2em;
  text-transform: uppercase;
}

.trivia-text {
  margin-top: 12px;
  color: var(--text);
  font-size: clamp(15px, 2.4vw, 20px);
  font-weight: 750;
  line-height: 1.45;
}

.resume-rank {
  padding: clamp(16px, 2.6vw, 24px);
  animation: slideUp .5s var(--ease-out) .18s both;
}

.resume-rank__head {
  color: var(--sub);
  margin-bottom: 18px;
}

.resume-rank-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 8px;
  position: relative;
  animation: playerIn .4s ease both;
}

.resume-rank-row:not(:last-child)::after {
  content: '';
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 0;
  height: 1px;
  background: var(--glass-border);
}

.resume-rank-row--me {
  border-radius: var(--radius-sm);
  background: rgba(201,102,58,.1);
}

.resume-rank-num,
.resume-rank-score {
  font-family: var(--font-display);
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}

.resume-rank-num {
  width: 24px;
  color: var(--sub);
  text-align: center;
}

.resume-rank-name {
  flex: 1;
  min-width: 0;
  color: var(--text);
  font-weight: 800;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.resume-rank-score {
  color: var(--text);
  font-size: 18px;
}

.resume-next {
  width: 100%;
  max-width: min(360px, 100%);
  align-self: center;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
}

.resume-next__bar {
  height: 5px;
  border-radius: 999px;
  background: var(--glass-border);
  overflow: hidden;
}

.resume-next__fill {
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: var(--accent-2);
}

@media (max-width: 760px) {
  .resume-head {
    align-items: flex-start;
  }

  .resume-layout {
    grid-template-columns: 1fr;
    align-content: start;
  }

  .resume-question-page {
    overflow-y: auto;
  }
}

/* ════════════════════════════════════════════════════
   HOST SUMMARY — Résumé post-question (hote-quiz)
════════════════════════════════════════════════════ */
.host-summary {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr clamp(200px, 28vw, 320px);
  gap: clamp(14px, 2vw, 22px);
  min-height: 0;
  animation: slideUp .4s var(--ease-out) both;
}

.host-summary__fact {
  display: flex;
  flex-direction: column;
  gap: 10px;
  border-radius: var(--radius-lg);
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  overflow: hidden;
  box-shadow: var(--elevation-2);
}

.host-summary__media {
  min-height: clamp(140px, 22vh, 220px);
  background: var(--glass-strong);
  background-size: cover;
  background-position: center;
  border-bottom: 1px solid var(--glass-border);
  flex-shrink: 0;
}

.host-summary__label {
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--accent-2);
  padding: 0 clamp(14px, 2vw, 22px);
}

.host-summary__text {
  font-family: var(--font-body);
  font-size: clamp(13px, 1.8vw, 17px);
  font-weight: 600;
  line-height: 1.45;
  color: var(--text);
  padding: 0 clamp(14px, 2vw, 22px) clamp(14px, 2vw, 22px);
  flex: 1;
}

.host-summary__credit {
  font-size: 10px;
  font-weight: 600;
  color: var(--muted);
  padding: 0 clamp(14px, 2vw, 22px) 10px;
  font-style: italic;
}

.host-summary__rank {
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-radius: var(--radius-lg);
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  padding: clamp(14px, 2vw, 20px);
  overflow-y: auto;
  box-shadow: var(--elevation-1);
}

.host-summary__rank-title {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--sub);
  margin-bottom: 4px;
}

/* Ligne de classement dans le host-summary */
.host-rank-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 6px;
  border-radius: var(--radius-sm);
  transition: background .2s;
}
.host-rank-row:hover { background: var(--glass); }

.host-rank-row__name {
  flex: 1;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.host-rank-row__score {
  font-family: var(--font-display);
  font-size: clamp(14px, 2vw, 17px);
  font-weight: 800;
  color: var(--text);
  letter-spacing: -0.02em;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 768px) {
  .host-summary {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
  }
  .host-summary__media { min-height: clamp(100px, 18vh, 160px); }
}

/* ────────────────────────────────────────────
   PLAYER SELECT OVERLAY (manche 1 multi)
──────────────────────────────────────────── */
.player-select-overlay {
  position: absolute;
  inset: 0;
  z-index: 8;
  background: rgba(0, 0, 0, .55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: none;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 16px;
}
.player-select-overlay.visible { display: flex; }

/* ────────────────────────────────────────────
   TRIVIA CREDIT (resume-question)
──────────────────────────────────────────── */
.trivia-credit {
  font-size: 11px;
  font-weight: 500;
  color: var(--muted);
  font-style: italic;
  margin-top: 4px;
}

/* ────────────────────────────────────────────
   QUIZ WAITING state (jeu-multi)
──────────────────────────────────────────── */
.jeu-multi-page.quiz-waiting {
  grid-template-columns: minmax(0, 1fr) !important;
  align-content: center;
}