/* LA RE-SÉLECTION DE LA REVANCHE (Max, 02/10 : « 25 secondes pour choisir un personnage ; on peut confirmer le personnage
   qu'une fois »). La grille des balles (#chars, css/br.css et css/balles.css) en mode « revanche » (#chars.rev, rempli
   par js/br/app.js : revAfficher, revRendre, revEtat) : en haut, un bandeau aux couleurs de l'écran VS — ton camp en bleu
   à gauche, les adversaires en rouge à droite, le minuteur sur la couture — et sa légende ; « Confirmer », puis « Prêt ✓ »
   et la grille voilée. Au PC, le bandeau prend sa ligne sous le titre ; au téléphone, il remplace le titre. */

#chars .rv-band, #chars .rv-lock { display: none; }
#chars.rev .rv-band { display: grid; }
#chars.rev [data-open="settings"] { display: none; }   /* (pas de fenêtre pendant les 25 s) */

/* ─── le bandeau : les deux camps et le minuteur ─── */
#chars.rev > .topbar { flex-wrap: wrap; row-gap: 12px; }
.rv-band { position: relative; order: 20; flex: 1 0 100%; box-sizing: border-box; min-width: 0;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; column-gap: 22px;
  padding: 10px 14px 16px; border: 4px solid var(--ink); border-radius: 16px; box-shadow: 6px 6px 0 var(--ink);
  background:
    repeating-linear-gradient(100deg, rgba(255, 255, 255, 0.07) 0 14px, rgba(255, 255, 255, 0) 14px 28px),
    linear-gradient(100deg, #2D6BFF 0, #3F7BFF 47%, var(--ink) 47%, var(--ink) 53%, #D8352A 53%, #E5484D 100%); }
.rv-camp { display: flex; align-items: center; gap: 12px; min-width: 0; }
.rv-c0 { justify-content: flex-start; }
.rv-c1 { justify-content: flex-end; }

/* une carte de joueur : sa balle (animée), son nom, son état (« Prêt ✓ », « Choisit… », « À confirmer ») et sa balle */
.rv-j { --c: #8A93A3; position: relative; display: flex; align-items: center; gap: 12px; min-width: 0; max-width: 380px; flex: 0 1 auto;
  padding: 5px 16px 5px 5px; border: 3px solid var(--ink); border-radius: 14px; background: var(--card); box-shadow: 3px 3px 0 var(--ink); }
.rv-c1 .rv-j { flex-direction: row-reverse; padding: 5px 5px 5px 16px; text-align: right; }
.rv-j.toi { background: #FFF4C8; }
.rv-av { position: relative; flex: none; width: 74px; height: 74px; box-sizing: border-box; overflow: hidden; border: 3px solid var(--ink); border-radius: 11px;
  background: radial-gradient(circle at 50% 56%, color-mix(in srgb, var(--c) 18%, #fff) 0 18%, color-mix(in srgb, var(--c) 70%, #fff) 55%, color-mix(in srgb, var(--c) 90%, #000) 100%); }
.rv-av canvas { position: absolute; left: 3%; top: 3%; width: 94%; height: 94%; }
.rv-av i { position: absolute; inset: 0; display: none; place-items: center; font: italic 800 40px/1 var(--fc); color: #fff; text-shadow: 2px 2px 0 var(--ink); padding-right: 0.06em; }
.rv-j.vide .rv-av { background: repeating-linear-gradient(135deg, #5E6575 0 8px, #535a69 8px 16px); }
.rv-j.vide .rv-av canvas { display: none; }
.rv-j.vide .rv-av i { display: grid; }
.rv-j.attente .rv-av i { animation: rvAttend 1.2s ease-in-out infinite; }
/* (ta balle pas encore confirmée : un cadre en pointillés — rien n'est parti) */
.rv-j.brouillon .rv-av { border-style: dashed; }
/* (confirmée : la pastille verte, et un petit bond à l'instant où elle l'est) */
.rv-j.pret .rv-av { animation: rvPop 0.38s cubic-bezier(0.2, 1.5, 0.4, 1); }
.rv-j.pret::after { content: '✓'; position: absolute; left: 60px; top: -7px; z-index: 2; width: 24px; height: 24px; box-sizing: border-box; display: grid; place-items: center;
  border: 3px solid var(--ink); border-radius: 50%; background: #3DDC84; color: var(--ink); font: 900 13px/1 var(--fb); }
.rv-c1 .rv-j.pret::after { left: auto; right: 60px; }
.rv-j.deco { opacity: 0.75; }
.rv-t { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-width: 0; }
.rv-c1 .rv-t { align-items: flex-end; }
.rv-l { display: flex; align-items: center; gap: 6px; min-width: 0; max-width: 100%; }
.rv-c1 .rv-l { flex-direction: row-reverse; }
.rv-n { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: italic 800 28px/1 var(--fc); text-transform: uppercase; color: var(--ink); padding-right: 0.06em; }
.rv-bot { display: none; flex: none; padding: 1px 5px 2px; border-radius: 5px; background: var(--ink); color: #fff; font: 800 11px/1.2 var(--fc); letter-spacing: 1px; text-transform: uppercase; }
.rv-j.bot .rv-bot { display: block; }
.rv-e { max-width: 100%; box-sizing: border-box; overflow: hidden; text-overflow: ellipsis; padding: 2px 8px 3px; border: 2.5px solid var(--ink); border-radius: 7px; background: #E6E0D4; color: var(--ink); font: 800 14px/1.1 var(--fc); letter-spacing: 1px; text-transform: uppercase; white-space: nowrap; }
.rv-j.pret .rv-e { background: #3DDC84; }
.rv-j.brouillon .rv-e { background: var(--gold); }
.rv-j.deco .rv-e { background: #FF6B5E; color: #fff; }
.rv-b { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 700 14px/1.15 var(--fb); font-style: normal; color: var(--muted); }
.rv-j.vide .rv-b { display: none; }
.rv-j:not(.vide) { cursor: pointer; }   /* (un appui montre sa balle : js/br/app.js revVoir) */
/* la revanche annulée : les cartes s'éteignent (« Parti », « Annulée ») */
.rv-j.annule { filter: grayscale(0.6); opacity: 0.85; }
.rv-j.annule .rv-e { background: #D8352A; color: #fff; }

/* le minuteur : un anneau qui se vide, le chiffre au milieu ; rouge pour les 5 dernières secondes, vert quand tout le monde
   est prêt */
.rv-mid { display: flex; flex-direction: column; align-items: center; }
.rv-timer { position: relative; width: 92px; height: 92px; box-sizing: border-box; display: grid; place-items: center; border: 4px solid var(--ink); border-radius: 50%;
  background: #131119; box-shadow: 4px 4px 0 var(--ink), 0 0 0 3px #fff inset; }
.rv-timer svg { position: absolute; inset: 3px; width: calc(100% - 6px); height: calc(100% - 6px); rotate: -90deg; overflow: visible; }
.rv-tr { fill: none; stroke: rgba(255, 255, 255, 0.14); stroke-width: 9; }
.rv-tp { fill: none; stroke: var(--gold); stroke-width: 9; stroke-dasharray: 100; stroke-dashoffset: 0; transition: stroke-dashoffset 0.2s linear, stroke 0.2s; }
.rv-s { position: relative; font: italic 800 48px/1 var(--fc); color: #fff; text-shadow: 3px 3px 0 var(--ink); padding: 0 0.06em 0.04em 0; }
.rv-band.urgent .rv-tp { stroke: #FF4A3D; }
.rv-band.urgent .rv-s { color: #FF8A80; }
.rv-timer.bat { animation: rvBat 0.38s cubic-bezier(0.2, 1.5, 0.4, 1); }
#chars.rv-fini .rv-tp { stroke: #3DDC84; }
#chars.rv-fini .rv-s { color: #9DF5C3; }
#chars.rv-annule .rv-tp { stroke: transparent; }

/* la légende, accrochée sous le bandeau : ce qu'il faut faire, ou ce qu'on attend */
.rv-msg { position: absolute; left: 50%; bottom: -17px; z-index: 3; translate: -50% 0; max-width: calc(100% - 40px); margin: 0; box-sizing: border-box;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 4px 14px 5px; border: 3px solid var(--ink); border-radius: 10px;
  background: var(--card); color: var(--ink); box-shadow: 3px 3px 0 var(--ink); font: 800 15px/1.1 var(--fc); letter-spacing: 0.8px; text-transform: uppercase; }
.rv-msg:empty { display: none; }
.rv-band.rv-rouge .rv-msg { background: #D8352A; color: #fff; }
#chars.rev .chars-body { margin-top: 6px; }

/* « Salon », armé : un deuxième appui annule la revanche pour tous */
#chars.rev #charsBack { min-width: 134px; text-align: center; }   /* (« ← Salon » et « Annuler ? » de la même largeur : le titre ne bouge pas) */
#chars.rev #charsBack.rv-arme { background: #D8352A; color: #fff; }

/* « Confirmer », puis « Prêt ✓ » (verrouillé) */
#chars.rev #charsOk.rv-ok, #chars.rev #charsOk.rv-ok:disabled { background: #3DDC84; color: var(--ink); box-shadow: 5px 5px 0 #157A45; cursor: default; transform: none; opacity: 1; }
#chars.rev #charsOk:disabled:not(.rv-ok) { background: #DCD6C8; color: rgba(21, 21, 21, 0.5); box-shadow: 4px 4px 0 rgba(21, 21, 21, 0.4); cursor: default; transform: none; }
#chars.rev #charsOk.nope { animation: needshake 0.35s ease; }

/* une fois confirmée : la grille voilée, « Prêt ✓ » et la balle choisie au milieu */
#chars.rev.rv-pret .rv-lock, #chars.rev.rv-fini .rv-lock, #chars.rev.rv-annule .rv-lock { display: grid; }
.rv-lock { position: absolute; z-index: 6; box-sizing: border-box; place-items: center; border-radius: 16px; background: rgba(21, 21, 21, 0.5); backdrop-filter: grayscale(0.7) blur(1.5px); -webkit-backdrop-filter: grayscale(0.7) blur(1.5px); }
.rv-lock-box { display: grid; justify-items: center; gap: 6px; max-width: calc(100% - 32px); box-sizing: border-box; padding: 18px 34px 20px; border: 4px solid var(--ink); border-radius: 16px; background: var(--card); box-shadow: 7px 7px 0 var(--ink); text-align: center; animation: rvPop 0.4s cubic-bezier(0.2, 1.4, 0.4, 1) both; }
.rv-lock-t { font: italic 800 60px/0.95 var(--fc); text-transform: uppercase; color: #17A35C; padding-right: 0.06em; }
#chars.rv-annule .rv-lock-t { color: #D8352A; font-size: 44px; }
#chars.rv-fini:not(.rv-pret):not(.rv-annule) .rv-lock-t { color: var(--ink); font-size: 44px; }
.rv-lock-n { font: italic 800 28px/1 var(--fc); text-transform: uppercase; color: var(--ink); }
.rv-lock-n:empty { display: none; }
.rv-lock-s { font: 600 15px/1.3 var(--fb); color: var(--muted); }

/* l'arrivée : le bandeau descend, la grille suit */
#chars.rv-entre .rv-band { animation: rvDescend 0.42s cubic-bezier(0.2, 0.9, 0.3, 1.1) both; }
#chars.rv-entre .chars-body { animation: rvFondu 0.35s ease-out both 0.12s; }
@keyframes rvDescend { from { transform: translateY(-30px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes rvFondu { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes rvPop { 0% { transform: scale(0.8); } 60% { transform: scale(1.08); } 100% { transform: scale(1); } }
@keyframes rvBat { 0% { transform: scale(1); } 40% { transform: scale(1.12); } 100% { transform: scale(1); } }
@keyframes rvAttend { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  #chars.rv-entre .rv-band, #chars.rv-entre .chars-body, .rv-j.pret .rv-av, .rv-timer.bat, .rv-lock-box, .rv-j.attente .rv-av i { animation: none; }
}

/* ─── une fenêtre d'ordinateur plus basse ou plus étroite ─── */
@media (max-width: 1300px), (max-height: 800px) {
  .rv-band { padding: 8px 10px 14px; column-gap: 14px; }
  .rv-av { width: 54px; height: 54px; }
  .rv-j.pret::after { left: 40px; }
  .rv-c1 .rv-j.pret::after { right: 40px; }
  .rv-n { font-size: 21px; }
  .rv-e, .rv-b { font-size: 12.5px; }
  .rv-timer { width: 72px; height: 72px; }
  .rv-s { font-size: 36px; }
  .rv-lock-t { font-size: 48px; }
}

/* ─── au téléphone (paysage) : le bandeau prend la place du titre, dans la barre du haut ─── */
html.tel #chars.rev > .topbar { flex-wrap: nowrap; }
html.tel #chars.rev > .topbar .menu-title, html.tel #chars.rev > .topbar .grow { display: none; }
html.tel #chars.rev .rv-band { order: 0; flex: 1 1 auto; height: calc(var(--tb) + 8px); margin: -4px 0; padding: 3px 8px; column-gap: 8px; border-width: 3px; border-radius: 12px; box-shadow: 3px 3px 0 var(--ink); }
html.tel #chars.rev .rv-camp { gap: 6px; }
html.tel #chars.rev .rv-j { gap: 6px; max-width: none; padding: 2px 8px 2px 2px; border-width: 2.5px; border-radius: 10px; box-shadow: 2px 2px 0 var(--ink); }
html.tel #chars.rev .rv-c1 .rv-j { padding: 2px 2px 2px 8px; }
html.tel #chars.rev .rv-av { width: 36px; height: 36px; border-width: 2px; border-radius: 8px; }
html.tel #chars.rev .rv-av i { font-size: 24px; }
html.tel #chars.rev .rv-j.pret::after { left: 26px; top: -5px; width: 17px; height: 17px; border-width: 2px; font-size: 9px; }
html.tel #chars.rev .rv-c1 .rv-j.pret::after { left: auto; right: 26px; }
html.tel #chars.rev .rv-t { gap: 1px; }
html.tel #chars.rev .rv-n { font-size: 16px; }
html.tel #chars.rev .rv-bot { font-size: 9px; padding: 0 4px 1px; }
html.tel #chars.rev .rv-e { padding: 0 5px 1px; border-width: 2px; border-radius: 5px; font-size: 10.5px; letter-spacing: 0.5px; }
/* (la balle d'un joueur, dès que tous la connaissent — confirmée, ou la sélection close — : son nom prend la place de
   l'état, en pastille verte ; la pastille ✓ du portrait dit déjà « Prêt ») */
html.tel #chars.rev .rv-b { display: none; }
html.tel #chars.rev .rv-j.nomme .rv-e { display: none; }
html.tel #chars.rev .rv-j.nomme .rv-b { display: block; box-sizing: border-box; padding: 0 5px 1px; border: 2px solid var(--ink); border-radius: 5px; background: #3DDC84; color: var(--ink); font: 800 10.5px/1.1 var(--fc); letter-spacing: 0.5px; text-transform: uppercase; }
html.tel #chars.rev .rv-j.nomme:not(.pret) .rv-b { background: #E6E0D4; }
html.tel #chars.rev .rv-timer { width: 44px; height: 44px; border-width: 3px; box-shadow: 2px 2px 0 var(--ink), 0 0 0 2px #fff inset; }
html.tel #chars.rev .rv-timer svg { inset: 2px; width: calc(100% - 4px); height: calc(100% - 4px); }
html.tel #chars.rev .rv-s { font-size: 23px; text-shadow: 2px 2px 0 var(--ink); }
html.tel #chars.rev .rv-msg { top: calc(100% + 1px); bottom: auto; padding: 1px 10px 2px; border-width: 2.5px; border-radius: 8px; box-shadow: 2px 2px 0 var(--ink); font-size: 11.5px; letter-spacing: 0.5px; }
html.tel #chars.rev .chars-body { margin-top: 20px; }
html.tel #chars.rev #charsBack { min-width: 116px; }
html.tel #chars.rev .rv-lock { border-radius: 12px; }
html.tel #chars.rev .rv-lock-box { padding: 10px 22px 12px; gap: 3px; border-width: 3px; border-radius: 12px; box-shadow: 4px 4px 0 var(--ink); }
html.tel #chars.rev .rv-lock-t { font-size: 36px; }
html.tel #chars.rev .rv-lock-n { font-size: 20px; }
html.tel #chars.rev .rv-lock-s { font-size: 12px; }
@media (max-width: 760px) {
  html.tel #chars.rev .rv-n { font-size: 14px; }
  html.tel #chars.rev #charsBack { min-width: 100px; padding: 0 9px; font-size: 13.5px; }
}
/* ─── au téléphone, à quatre (2 VS 2) : des cartes debout — le portrait, et dessous le nom de sa balle dès qu'elle est
   connue (sinon son pseudo ; « Toi » pour la tienne ; un appui sur la carte dit les deux) ; l'étiquette « Bot » sur le
   portrait. Le bandeau prend 10 px de plus. (Couchées, quatre cartes coupaient pseudos et états, même à 844.) ─── */
html.tel #chars.rev .rv-band.rv-4 { height: calc(var(--tb) + 18px); padding: 2px 6px; column-gap: 6px; }
html.tel #chars.rev .rv-4 .rv-camp { gap: 4px; }
html.tel #chars.rev .rv-4 .rv-j, html.tel #chars.rev .rv-4 .rv-c1 .rv-j { flex: 0 1 auto; flex-direction: column; justify-content: center; gap: 1px; min-width: 40px; padding: 2px 4px 2px; text-align: center; }
html.tel #chars.rev .rv-4 .rv-av { width: 30px; height: 30px; }
html.tel #chars.rev .rv-4 .rv-av i { font-size: 20px; }
html.tel #chars.rev .rv-4 .rv-t, html.tel #chars.rev .rv-4 .rv-c1 .rv-t { align-items: center; max-width: 100%; gap: 0; }
html.tel #chars.rev .rv-4 .rv-l, html.tel #chars.rev .rv-4 .rv-c1 .rv-l { justify-content: center; }
html.tel #chars.rev .rv-4 .rv-n { font-size: 11.5px; }
html.tel #chars.rev .rv-4 .rv-e { display: none; }
html.tel #chars.rev .rv-4 .rv-j.nomme:not(.toi) .rv-n { display: none; }
html.tel #chars.rev .rv-4 .rv-j.nomme.toi .rv-b { display: none; }
html.tel #chars.rev .rv-4 .rv-j.nomme .rv-b { padding: 0 4px; border-width: 1.5px; border-radius: 4px; font-size: 9.5px; }
html.tel #chars.rev .rv-4 .rv-j.annule .rv-e { display: block; padding: 0 4px; font-size: 9.5px; }
html.tel #chars.rev .rv-4 .rv-j.annule .rv-n, html.tel #chars.rev .rv-4 .rv-j.annule .rv-b { display: none; }
html.tel #chars.rev .rv-4 .rv-j.bot .rv-bot { position: absolute; left: 50%; top: 24px; z-index: 2; translate: -50% 0; padding: 0 3px; border-radius: 4px; font-size: 7.5px; letter-spacing: 0.6px; box-shadow: 0 0 0 1.5px #fff; }
html.tel #chars.rev .rv-4 .rv-j.pret::after, html.tel #chars.rev .rv-4 .rv-c1 .rv-j.pret::after { left: calc(50% + 7px); right: auto; top: -5px; width: 15px; height: 15px; font-size: 8px; }