/* ═══════════════ LE MENU PAUSE (Js', 03/10) ═══════════════
   « refait le menu pause quand tu fais pause en jeu afin de match le reste des UI et afin qu'il soit plus simple
   d'utilisation niveau UX, par exemple le bouton quitter en bas à gauche c'est pas pratique, et refait le bien avec des
   infos utiles ». Avant : un écran entier violet, PAUSE en grand, « Quitter » seul en bas à gauche.
   Maintenant : une fenêtre comme celles du groupe et du coffre — le dégradé aux couleurs du mode joué (Standard vert,
   Ranked rouge, battle royale violet, parties perso bleu, comme leurs onglets dans l'entrée), de fines rayures, le gros
   trait d'encre, l'ombre décalée, des cartes blanches dessus —, posée sur la partie assombrie :
   - ta balle (sa vie, son ultime) et ses attaques avec leur touche ; la partie (la carte, les chiffres, en duel qui tu
     affrontes) ; en bas, les commandes (au clavier, ou au doigt) ;
   - à droite, toutes les actions dans une carte : REPRENDRE en or, en haut, le plus gros ; Paramètres et Comment jouer ;
     « Quitter la partie » en rouge, à part, en bas de la carte (et sa confirmation en ligne, à sa place).
   Au téléphone (520 px de haut ou moins) : les mêmes trois colonnes, resserrées, sans les textes des attaques ; jamais
   de défilement. Le contenu est rempli par js/br/app.js (pauseInfos), sans rien changer à la partie. */

/* (les boutons de l'entrée — .hub-go, .hub-btn — se mesurent en --u : la pause est hors de l'entrée, on lui donne la même
   unité et les mêmes contours d'encre, comme au coffre et au groupe) */
#pause {
  --u: clamp(6px, min(0.521vw, 0.926vh), 15px);
  --out: 2px 2px 0 var(--ink), -1.5px -1.5px 0 var(--ink), 1.5px -1.5px 0 var(--ink), -1.5px 1.5px 0 var(--ink), 0 2px 0 var(--ink);
  --out3: 3px 3px 0 var(--ink), -2px -2px 0 var(--ink), 2px -2px 0 var(--ink), -2px 2px 0 var(--ink), 0 3px 0 var(--ink), 3px 0 0 var(--ink);
  /* (les parties perso, le solo, l'entraînement : le bleu de leur onglet) */
  --pz: #2D8CFF; --pz-l: #C2DEFF; --pz-d: #15479A; --pz-h1: #4FA2FF; --pz-h2: #1F63C8;
}
#pause[data-m="std"] { --pz: #1FB873; --pz-l: #BDF3D6; --pz-d: #0E6B47; --pz-h1: #34D18B; --pz-h2: #148C59; }
#pause[data-m="rk"] { --pz: #D93445; --pz-l: #FFCACD; --pz-d: #7E1626; --pz-h1: #EE5562; --pz-h2: #A81F33; }
#pause[data-m="br"] { --pz: #8E44E8; --pz-l: #E1CCFF; --pz-d: #4B1F8A; --pz-h1: #A562F5; --pz-h2: #6A2FC0; }

/* le voile : la partie reste visible derrière (en ligne, elle continue) */
#pause.pz {
  position: fixed; inset: 0; z-index: 12; display: grid; place-items: center; box-sizing: border-box; overflow: hidden;
  grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr);
  padding: max(14px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(14px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  background: radial-gradient(ellipse 75% 70% at 50% 50%, rgba(14, 10, 34, 0.58), rgba(9, 7, 24, 0.86));
  animation: pzVoile 0.18s ease-out;
}
#pause.pz[hidden] { display: none; }
@keyframes pzVoile { from { opacity: 0; } }

/* ─── la fenêtre ─── */
#pause .pz-box {
  --mbx: calc(var(--u) * 2.6);
  position: relative; box-sizing: border-box; width: min(max(calc(var(--u) * 148), 880px), 100%); max-height: 100%; min-height: 0;
  display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 0.9fr);
  grid-template-areas: "head head head" "me game act" "keys keys act"; grid-template-rows: auto minmax(0, 1fr) auto;
  align-items: stretch; gap: calc(var(--u) * 1.6) calc(var(--u) * 1.8);
  padding: 0 var(--mbx) calc(var(--u) * 2.2);
  border: calc(var(--u) * 0.5) solid var(--ink); border-radius: calc(var(--u) * 2.2); color: #fff;
  box-shadow: inset 0 0 0 calc(var(--u) * 0.35) color-mix(in srgb, var(--pz-l) 45%, transparent), calc(var(--u) * 1) calc(var(--u) * 1) 0 var(--ink);
  background:
    radial-gradient(ellipse 80% 45% at 50% 0%, color-mix(in srgb, var(--pz-l) 35%, transparent), transparent 70%),
    repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0 calc(var(--u) * 1), transparent calc(var(--u) * 1) calc(var(--u) * 2)),
    linear-gradient(170deg, var(--pz-h1), var(--pz) 45%, var(--pz-d));
  animation: pzPop 0.3s cubic-bezier(0.2, 1.4, 0.4, 1) both;
}
@keyframes pzPop { from { transform: scale(0.92) translateY(calc(var(--u) * 1.5)); opacity: 0; } }
/* (sans balle à toi — tu regardes la partie — : la partie prend toute la largeur) */
#pause .pz-box.sans-moi { grid-template-areas: "head head head" "game game act" "keys keys act"; }
#pause .pz-box.sans-moi .pz-me { display: none; }
#pause .pz-box.sans-moi .pz-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
#pause .pz-box.sans-moi .pz-st:last-child:nth-child(odd) { grid-column: auto; }

/* le bandeau du titre : l'icône pause, « PAUSE » blanc cerclé d'encre, le mode joué ; en ligne, « la partie continue » */
#pause .pz-head {
  grid-area: head; display: flex; align-items: center; gap: calc(var(--u) * 1.2); min-width: 0;
  margin: 0 calc(-1 * var(--mbx)); padding: calc(var(--u) * 1.1) var(--mbx) calc(var(--u) * 1.1) var(--mbx);
  background: repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.14) 0 calc(var(--u) * 1), transparent calc(var(--u) * 1) calc(var(--u) * 2)), linear-gradient(var(--pz-h1), var(--pz-h2));
  border-bottom: calc(var(--u) * 0.45) solid var(--ink); border-radius: calc(var(--u) * 1.7) calc(var(--u) * 1.7) 0 0;
}
#pause .pz-ico { flex: none; display: grid; place-items: center; width: calc(var(--u) * 5.2); height: calc(var(--u) * 5.2); min-width: 32px; min-height: 32px; box-sizing: border-box; border: calc(var(--u) * 0.35) solid var(--ink); border-radius: 50%; background: #fff; color: var(--pz-d); box-shadow: calc(var(--u) * 0.35) calc(var(--u) * 0.35) 0 var(--ink); }
#pause .pz-ico svg { width: 60%; height: 60%; }
#pause .pz-head h2 { flex: none; margin: 0; padding: 0 calc(var(--u) * 0.4) calc(var(--u) * 0.3) 0; font: italic 800 calc(var(--u) * 5.2)/1 var(--fc); letter-spacing: 0.5px; text-transform: uppercase; color: #fff; text-shadow: var(--out3), calc(var(--u) * 0.4) calc(var(--u) * 0.5) 0 var(--ink); }
#pause .pz-mode { flex: 0 1 auto; min-width: 0; padding: calc(var(--u) * 0.5) calc(var(--u) * 1.2) calc(var(--u) * 0.6); border: calc(var(--u) * 0.3) solid var(--ink); border-radius: calc(var(--u) * 0.9); background: var(--ink); color: var(--pz-l); font: italic 800 max(15px, calc(var(--u) * 2.3))/1 var(--fc); letter-spacing: 1px; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; box-shadow: calc(var(--u) * 0.3) calc(var(--u) * 0.3) 0 rgba(0, 0, 0, 0.3); transform: rotate(-3deg); }
#pause .pz-mode:empty { display: none; }
/* (en ligne : la partie ne s'arrête pas — une pastille rouge qui bat, à droite du bandeau) */
#pause .pz-live { flex: none; display: inline-flex; align-items: center; gap: calc(var(--u) * 0.8); margin: 0 0 0 auto; padding: calc(var(--u) * 0.6) calc(var(--u) * 1.3) calc(var(--u) * 0.7) calc(var(--u) * 1); border: calc(var(--u) * 0.3) solid var(--ink); border-radius: 999px; background: #E5484D; color: #fff; box-shadow: calc(var(--u) * 0.3) calc(var(--u) * 0.3) 0 var(--ink); font: italic 800 max(13px, calc(var(--u) * 1.9))/1 var(--fc); letter-spacing: 0.8px; text-transform: uppercase; text-shadow: var(--out); white-space: nowrap; }
#pause .pz-live[hidden] { display: none; }
#pause .pz-live i { flex: none; width: calc(var(--u) * 1.3); height: calc(var(--u) * 1.3); min-width: 8px; min-height: 8px; border: 2px solid var(--ink); border-radius: 50%; background: #fff; animation: pzBat 1s ease-in-out infinite; }
@keyframes pzBat { 50% { transform: scale(0.6); opacity: 0.55; } }

/* ─── les cartes blanches ─── */
#pause .pz-card { min-width: 0; min-height: 0; display: flex; flex-direction: column; gap: calc(var(--u) * 1.1); box-sizing: border-box; padding: calc(var(--u) * 1.4) calc(var(--u) * 1.6) calc(var(--u) * 1.6);
  border: calc(var(--u) * 0.4) solid var(--ink); border-radius: calc(var(--u) * 1.6); background: var(--card); color: var(--ink); box-shadow: calc(var(--u) * 0.6) calc(var(--u) * 0.6) 0 var(--ink); overflow: hidden; }
#pause .pz-card h3, #pause .pz-wt > small, #pause .pz-vs > small { margin: 0; font: italic 800 max(13px, calc(var(--u) * 2))/1 var(--fc); letter-spacing: 0.8px; text-transform: uppercase; color: var(--pz-d); }

/* ta balle : le portrait (cerclé de sa couleur), son nom, sa vie et son ultime */
#pause .pz-me { grid-area: me; }
#pause .pz-who { display: flex; align-items: center; gap: calc(var(--u) * 1.4); min-width: 0; }
#pause .pz-por { flex: none; display: block; width: calc(var(--u) * 10); height: calc(var(--u) * 10); min-width: 48px; min-height: 48px; box-sizing: border-box; border: calc(var(--u) * 0.45) solid var(--ink); border-radius: 50%; overflow: hidden; background: #E7E2D8; box-shadow: 0 0 0 calc(var(--u) * 0.45) var(--pz-l), calc(var(--u) * 0.5) calc(var(--u) * 0.6) 0 calc(var(--u) * 0.45) var(--ink); }
#pause .pz-por img { display: block; width: 100%; height: 100%; object-fit: cover; }
#pause .pz-wt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: calc(var(--u) * 0.6); }
#pause .pz-wt > b { min-width: 0; padding: 0 2px 1px 0; font: italic 800 max(20px, calc(var(--u) * 3.6))/1 var(--fc); letter-spacing: 0.3px; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#pause .pz-bar { display: flex; align-items: center; gap: calc(var(--u) * 0.9); min-width: 0; }
#pause .pz-bar[hidden] { display: none; }
#pause .pz-bar > span { flex: 1; min-width: 0; height: calc(var(--u) * 1.5); min-height: 9px; box-sizing: border-box; border: max(2px, calc(var(--u) * 0.28)) solid var(--ink); border-radius: 999px; background: #E7E2D8; overflow: hidden; }
#pause .pz-bar i { display: block; height: 100%; width: 0; border-radius: 999px; background: #3DDC84; transition: width 0.3s ease; }
#pause .pz-hp.bas i { background: #E5484D; }
#pause .pz-ul i { background: linear-gradient(90deg, #FFB800, #FFD23F); }
#pause .pz-ul.plein i { background: #FFD23F; box-shadow: inset 0 0 0 2px #FFF1A6; }
#pause .pz-bar em { flex: none; min-width: calc(var(--u) * 10); font: italic 800 max(12px, calc(var(--u) * 1.65))/1 var(--fc); letter-spacing: 0.5px; text-transform: uppercase; font-style: italic; color: rgba(21, 21, 21, 0.75); white-space: nowrap; }
#pause .pz-ul.plein em { color: #B37A00; }
#pause .pz-dead { margin: 0; align-self: flex-start; padding: calc(var(--u) * 0.4) calc(var(--u) * 1) calc(var(--u) * 0.5); border: max(2px, calc(var(--u) * 0.28)) solid var(--ink); border-radius: calc(var(--u) * 0.8); background: #FFE3DF; color: #B3202B; font: italic 800 max(14px, calc(var(--u) * 2))/1 var(--fc); letter-spacing: 0.6px; }
#pause .pz-dead[hidden] { display: none; }

/* ses attaques : l'icône de son bouton (les couleurs des boutons du jeu), le nom, la touche, ce qu'elle fait */
#pause .pz-kit { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: calc(var(--u) * 0.9); margin: 0; padding: calc(var(--u) * 1.1) 0 0; list-style: none; border-top: max(2px, calc(var(--u) * 0.3)) dashed rgba(21, 21, 21, 0.18); overflow: hidden; }
#pause .pz-kit li { display: flex; align-items: flex-start; gap: calc(var(--u) * 1.1); min-width: 0; }
#pause .pk-ico { flex: none; display: grid; place-items: center; width: calc(var(--u) * 4.4); height: calc(var(--u) * 4.4); min-width: 28px; min-height: 28px; box-sizing: border-box; border: max(2px, calc(var(--u) * 0.35)) solid var(--ink); border-radius: 50%; box-shadow: calc(var(--u) * 0.25) calc(var(--u) * 0.25) 0 var(--ink); }
#pause .pk-ico svg { display: block; width: 62%; height: 62%; }
#pause .pk-a .pk-ico { background: #FFD23F; color: var(--ink); }
#pause .pk-b .pk-ico { background: #8E44E8; color: #fff; }
#pause .pk-u .pk-ico { background: radial-gradient(#FFE58A, #FFB800); color: var(--ink); }
#pause .pk-p .pk-ico { background: #D9D4C7; color: #6A6252; }
#pause .pk-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: calc(var(--u) * 0.35); }
#pause .pk-h { display: flex; align-items: center; gap: calc(var(--u) * 0.8); min-width: 0; min-height: calc(var(--u) * 3); }
#pause .pk-h b { flex: 1; min-width: 0; padding: 0 2px 1px 0; font: italic 800 max(15px, calc(var(--u) * 2.25))/1.05 var(--fc); letter-spacing: 0.3px; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#pause .pk-h kbd { flex: none; min-width: 0; padding: 2px 6px 3px; border-width: 2px; border-bottom-width: 3px; border-radius: 6px; background: #fff; color: var(--ink); font: 800 max(11px, calc(var(--u) * 1.45))/1 var(--fc); letter-spacing: 0.8px; white-space: nowrap; }
#pause .pk-t p { margin: 0; font: 500 max(12px, calc(var(--u) * 1.7))/1.28 var(--fb); color: rgba(21, 21, 21, 0.74); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
#pause .pk-t p:empty { display: none; }
/* (au doigt : l'icône EST le bouton de l'écran — pas de touche à montrer) */
html.touch #pause .pk-h kbd { display: none; }

/* la partie : la carte, puis les chiffres en pavés (2 par ligne) */
#pause .pz-game { grid-area: game; }
#pause .pz-game h3 { display: flex; align-items: center; gap: calc(var(--u) * 0.8); min-width: 0; }
#pause .pz-game h3 span { flex: none; }
#pause .pz-game h3 em { flex: 0 1 auto; min-width: 0; margin-left: auto; padding: calc(var(--u) * 0.35) calc(var(--u) * 0.9) calc(var(--u) * 0.45); border: max(2px, calc(var(--u) * 0.28)) solid var(--ink); border-radius: calc(var(--u) * 0.8); background: var(--pz-l); color: var(--ink); font: italic 800 max(13px, calc(var(--u) * 1.9))/1 var(--fc); letter-spacing: 0.6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; box-shadow: 1.5px 1.5px 0 var(--ink); transform: rotate(-2deg); }
#pause .pz-game h3 em:empty { display: none; }
#pause .pz-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(var(--u) * 1); min-width: 0; }
#pause .pz-stats:empty { display: none; }
#pause .pz-st { position: relative; min-width: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; column-gap: calc(var(--u) * 0.9); align-items: center; box-sizing: border-box; padding: calc(var(--u) * 0.9) calc(var(--u) * 1) calc(var(--u) * 1);
  border: max(2px, calc(var(--u) * 0.3)) solid var(--ink); border-radius: calc(var(--u) * 1.1); background: color-mix(in srgb, var(--pz-l) 32%, #fff); }
/* (un nombre impair de pavés : le dernier prend toute la ligne) */
#pause .pz-st:last-child:nth-child(odd) { grid-column: 1 / -1; }
#pause .pz-sti { grid-row: 1 / 3; display: grid; place-items: center; width: calc(var(--u) * 4.2); height: calc(var(--u) * 4.2); min-width: 26px; min-height: 26px; box-sizing: border-box; border: max(2px, calc(var(--u) * 0.3)) solid var(--ink); border-radius: 50%; background: #fff; color: var(--ink); }
#pause .pz-sti svg { width: 64%; height: 64%; }
#pause .pz-st small { min-width: 0; font: 700 max(11px, calc(var(--u) * 1.45))/1.05 var(--fc); letter-spacing: 0.7px; text-transform: uppercase; color: rgba(21, 21, 21, 0.66); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#pause .pz-st b { min-width: 0; font: italic 800 max(22px, calc(var(--u) * 3.9))/1 var(--fc); letter-spacing: 0.3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right: 2px; }
#pause .pz-st b i { font-style: italic; font-size: 0.62em; color: rgba(21, 21, 21, 0.5); }
/* (chaque élimination donne du pouvoir : le bonus de dégâts, en orange comme dans la partie) */
#pause .pz-st em { position: absolute; right: calc(var(--u) * 0.8); top: calc(var(--u) * -1.1); padding: 2px 6px 3px; border: 2px solid var(--ink); border-radius: 7px; background: #FF9A4D; color: var(--ink); font: italic 800 max(11px, calc(var(--u) * 1.45))/1 var(--fc); letter-spacing: 0.4px; white-space: nowrap; transform: rotate(3deg); }
#pause .st-kill .pz-sti { background: #EF4B43; color: #fff; }   /* (le viseur des éliminations, comme en partie : rouge, blanc) */
#pause .st-dmg .pz-sti { background: #FF9A4D; }
#pause .st-zone .pz-sti { background: #8E44E8; color: #fff; }
#pause .st-zone.vite { background: #EBDDFF; }
#pause .st-zone.vite b { color: #6A2FC0; }
#pause .st-time .pz-sti { background: #D9D4C7; }

/* en duel : qui tu affrontes (son portrait, son pseudo, sa balle) ; éliminé, il pâlit */
#pause .pz-vs { display: flex; flex-direction: column; gap: calc(var(--u) * 0.8); min-width: 0; padding-top: calc(var(--u) * 1); border-top: max(2px, calc(var(--u) * 0.3)) dashed rgba(21, 21, 21, 0.18); }
#pause .pz-vs[hidden] { display: none; }
#pause .pz-op { display: flex; align-items: center; gap: calc(var(--u) * 1); min-width: 0; }
#pause .pz-opb { flex: none; width: calc(var(--u) * 5.4); height: calc(var(--u) * 5.4); min-width: 32px; min-height: 32px; box-sizing: border-box; border: max(2px, calc(var(--u) * 0.35)) solid var(--ink); border-radius: 50%; overflow: hidden; background: #E7E2D8; }
#pause .pz-opb img { display: block; width: 100%; height: 100%; object-fit: cover; }
#pause .pz-opt { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
#pause .pz-opt b { font: italic 800 max(15px, calc(var(--u) * 2.2))/1.05 var(--fc); text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right: 2px; }
#pause .pz-opt small { font: 600 max(12px, calc(var(--u) * 1.6))/1.1 var(--fb); color: rgba(21, 21, 21, 0.66); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#pause .pz-op.mort .pz-opb img { filter: grayscale(1); opacity: 0.55; }
#pause .pz-op.mort .pz-opt b { color: rgba(21, 21, 21, 0.45); text-decoration: line-through; text-decoration-thickness: 2px; }
/* (l'entraînement : ses raccourcis ; l'échauffement : une ligne) */
#pause .pz-tk { display: flex; flex-direction: column; gap: calc(var(--u) * 0.9); margin: 0; padding: 0; list-style: none; }
#pause .pz-tk li { display: flex; align-items: center; gap: calc(var(--u) * 0.8); min-width: 0; font: 700 max(12px, calc(var(--u) * 1.7))/1.1 var(--fc); letter-spacing: 0.5px; text-transform: uppercase; }
#pause .pz-tk kbd { flex: none; min-width: calc(var(--u) * 3.4); padding: 2px 6px 3px; border-width: 2px; border-bottom-width: 3px; border-radius: 6px; font-size: max(12px, calc(var(--u) * 1.6)); }
#pause .pz-note { margin: 0; font: 600 max(12px, calc(var(--u) * 1.75))/1.3 var(--fb); color: rgba(21, 21, 21, 0.75); }
#pause .pz-note[hidden] { display: none; }
/* (une astuce de jeu, tout en bas de la carte — à l'ordinateur) */
#pause .pz-tip { margin: auto 0 0; padding-top: calc(var(--u) * 1); border-top: max(2px, calc(var(--u) * 0.3)) dashed rgba(21, 21, 21, 0.18); font: 600 max(12px, calc(var(--u) * 1.65))/1.3 var(--fb); color: rgba(21, 21, 21, 0.72); }
#pause .pz-tip:empty { display: none; }

/* ─── les commandes, en bas, sur le dégradé ─── */
#pause .pz-keys { grid-area: keys; display: flex; flex-wrap: wrap; align-items: center; gap: calc(var(--u) * 0.8) calc(var(--u) * 2); min-width: 0; margin: 0; font: 700 max(12px, calc(var(--u) * 1.7))/1 var(--fc); letter-spacing: 0.6px; text-transform: uppercase; color: #fff; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.45); }
#pause .pz-keys > span { display: inline-flex; align-items: center; gap: calc(var(--u) * 0.45); white-space: nowrap; }
#pause .pz-keys kbd { min-width: calc(var(--u) * 3); padding: 2px 5px 3px; border-width: 2px; border-bottom-width: 3px; border-radius: 6px; color: var(--ink); font-size: max(11px, calc(var(--u) * 1.5)); letter-spacing: 0.5px; text-shadow: none; }
#pause .pz-keys kbd + kbd { margin-left: -2px; }
#pause .pz-keys kbd:last-of-type { margin-right: calc(var(--u) * 0.3); }
#pause .pz-stk { flex: none; width: calc(var(--u) * 2.6); height: calc(var(--u) * 2.6); min-width: 16px; min-height: 16px; box-sizing: border-box; border: 2px solid var(--ink); border-radius: 50%; background: radial-gradient(circle, #fff 0 34%, rgba(255, 255, 255, 0.35) 36%); margin-right: 2px; }
#pause .pz-doigt { display: none; }
html.touch #pause .pz-doigt { display: flex; }
html.touch #pause .pz-kb { display: none; }

/* ─── les actions : REPRENDRE (or, en haut), Paramètres, Comment jouer — puis, à part, Quitter la partie (rouge) ─── */
#pause .pz-act { grid-area: act; gap: calc(var(--u) * 1.1); padding: calc(var(--u) * 1.6); }
#pause .pz-act > button { width: 100%; margin: 0; }
#pause .pz-go { flex: none; gap: calc(var(--u) * 0.6); min-height: max(58px, calc(var(--u) * 10)); padding: calc(var(--u) * 1) calc(var(--u) * 2); }
#pause .pz-go b { display: inline-flex; align-items: center; gap: calc(var(--u) * 0.9); font-size: max(26px, calc(var(--u) * 4.6)); }
#pause .pz-go b svg { width: 0.82em; height: 0.82em; flex: none; }
/* (la touche, sous le mot : jamais par-dessus) */
#pause .pz-go kbd { position: static; opacity: 0.75; }
#pause .pz-b { justify-content: flex-start; min-height: max(44px, calc(var(--u) * 6.4)); padding-left: calc(var(--u) * 1.6); font-size: max(15px, calc(var(--u) * 2.3)); }
#pause .pz-b svg { width: 1.15em; height: 1.15em; }
/* (le son : « Son activé » ou « Son coupé », selon le réglage — aria-pressed, tenu à jour par syncSegs) */
#pause .pz-son[aria-pressed="false"] .s-on, #pause .pz-son:not([aria-pressed="false"]) .s-off { display: none; }
#pause .pz-son[aria-pressed="false"] { color: rgba(21, 21, 21, 0.6); }
#pause .pz-q { flex: none; display: grid; place-items: center; width: 1.25em; height: 1.25em; box-sizing: border-box; border: 2px solid currentColor; border-radius: 50%; font: italic 800 0.85em/1 var(--fc); }
#pause .pz-sep { flex: 1 1 auto; min-height: calc(var(--u) * 0.6); border-bottom: max(2px, calc(var(--u) * 0.3)) dashed rgba(21, 21, 21, 0.2); margin-bottom: calc(var(--u) * 0.5); }
#pause .hub-btn.pz-quit { flex: none; min-height: max(46px, calc(var(--u) * 6.6)); background: #E5484D; color: #fff; text-shadow: var(--out); font-size: max(15px, calc(var(--u) * 2.3)); white-space: normal; line-height: 1; text-align: center; }
#pause .hub-btn.pz-quit:hover { background: #F05A5F; }
#pause .hub-btn.pz-quit svg { width: 1.2em; height: 1.2em; filter: drop-shadow(1px 1px 0 var(--ink)); }
#pause .hub-btn.pz-quit[hidden] { display: none; }
/* « Quitter la partie ? » (en ligne, encore en vie) : à la place du bouton, la raison et les deux réponses */
#pause .pz-ask { flex: none; display: flex; flex-direction: column; gap: calc(var(--u) * 0.8); padding: calc(var(--u) * 1.1) calc(var(--u) * 1.2) calc(var(--u) * 1.2); border: max(2px, calc(var(--u) * 0.35)) solid var(--ink); border-radius: calc(var(--u) * 1.2); background: #FFE3DF; box-shadow: calc(var(--u) * 0.35) calc(var(--u) * 0.35) 0 var(--ink); animation: pzAsk 0.3s cubic-bezier(0.2, 1.5, 0.4, 1) both; }
#pause .pz-ask[hidden] { display: none; }
@keyframes pzAsk { from { transform: scale(0.9); opacity: 0; } }
#pause .pz-ask > b { font: italic 800 max(16px, calc(var(--u) * 2.5))/1 var(--fc); letter-spacing: 0.5px; text-transform: uppercase; color: #B3202B; }
#pause .pz-ask p { margin: 0; font: 600 max(12px, calc(var(--u) * 1.65))/1.3 var(--fb); color: var(--ink); }
#pause .pz-ask-b { display: flex; gap: calc(var(--u) * 0.9); }
#pause .pz-ask-b .hub-btn { flex: 1 1 0; min-width: 0; padding-left: calc(var(--u) * 0.8); padding-right: calc(var(--u) * 0.8); }

/* ═══ LE TÉLÉPHONE EN PAYSAGE (et toute fenêtre de 520 px de haut ou moins) : les mêmes trois colonnes, resserrées ═══ */
@media (max-height: 520px) {
  #pause { --u: 4px; }
  #pause.pz { padding: max(6px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) max(6px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left)); }
  #pause .pz-box { --mbx: 10px; width: min(780px, 100%); grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr) minmax(0, 0.84fr); gap: 7px 9px; padding-bottom: 8px; border-width: 4px; border-radius: 14px; box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--pz-l) 45%, transparent), 5px 5px 0 var(--ink); }
  #pause .pz-head { gap: 8px; padding: 4px 8px 4px var(--mbx); border-bottom-width: 3px; border-radius: 10px 10px 0 0; }
  #pause .pz-ico { width: 28px; height: 28px; min-width: 0; min-height: 0; border-width: 2.5px; box-shadow: 2px 2px 0 var(--ink); }
  #pause .pz-head h2 { font-size: 25px; text-shadow: var(--out), 2px 3px 0 var(--ink); }
  #pause .pz-mode { font-size: 14px; padding: 2px 7px 3px; border-width: 2px; }
  #pause .pz-live { font-size: 12px; padding: 3px 9px 4px 6px; border-width: 2px; gap: 5px; box-shadow: 2px 2px 0 var(--ink); }
  #pause .pz-live i { width: 8px; height: 8px; border-width: 1.5px; }
  #pause .pz-card { gap: 6px; padding: 6px 8px 7px; border-width: 3px; border-radius: 11px; box-shadow: 3px 3px 0 var(--ink); }
  #pause .pz-card h3, #pause .pz-wt > small, #pause .pz-vs > small { font-size: 12px; }
  #pause .pz-who { gap: 8px; }
  #pause .pz-por { width: 44px; height: 44px; min-width: 0; min-height: 0; border-width: 2.5px; box-shadow: 0 0 0 2px var(--pz-l), 2px 3px 0 2px var(--ink); }
  #pause .pz-wt { gap: 3px; }
  #pause .pz-wt > b { font-size: 18px; }
  #pause .pz-bar { gap: 5px; }
  #pause .pz-bar > span { height: 8px; min-height: 0; border-width: 1.5px; }
  #pause .pz-bar em { min-width: 58px; font-size: 11px; }
  #pause .pz-dead { font-size: 12px; padding: 2px 6px 3px; border-width: 2px; }
  #pause .pz-kit { gap: 4px; padding-top: 5px; border-top-width: 2px; }
  #pause .pz-kit li { align-items: center; gap: 6px; }
  #pause .pk-ico { width: 24px; height: 24px; min-width: 0; min-height: 0; border-width: 2px; box-shadow: 1px 1px 0 var(--ink); }
  #pause .pk-h { min-height: 24px; }
  #pause .pk-h b { font-size: 14px; }
  /* (au téléphone, pas la place pour ce que fait chaque attaque : son nom suffit — la fiche de la balle le dit) */
  #pause .pk-t p { display: none; }
  #pause .pz-game h3 em { font-size: 12px; padding: 1px 6px 2px; border-width: 2px; }
  #pause .pz-stats { gap: 5px; }
  #pause .pz-st { column-gap: 5px; padding: 4px 5px 5px; border-width: 2px; border-radius: 8px; }
  #pause .pz-sti { width: 22px; height: 22px; min-width: 0; min-height: 0; border-width: 2px; }
  #pause .pz-st small { font-size: 9.5px; letter-spacing: 0.4px; }
  #pause .pz-kit { gap: 6px; }
  #pause .pz-st b { font-size: 19px; }
  #pause .pz-st em { top: -8px; right: 4px; padding: 1px 4px 2px; font-size: 10px; border-width: 1.5px; border-radius: 5px; }
  #pause .pz-vs { gap: 4px; padding-top: 5px; border-top-width: 2px; }
  #pause .pz-opb { width: 28px; height: 28px; min-width: 0; min-height: 0; border-width: 2px; }
  #pause .pz-opt b { font-size: 13px; }
  #pause .pz-opt small { font-size: 10.5px; }
  #pause .pz-note { font-size: 11.5px; line-height: 1.25; }
  #pause .pz-tip { display: none; }
  #pause .pz-keys { gap: 3px 10px; font-size: 11px; letter-spacing: 0.3px; }
  #pause .pz-keys kbd { padding: 1px 4px 2px; font-size: 10px; border-width: 1.5px; border-bottom-width: 2.5px; border-radius: 5px; }
  #pause .pz-stk { width: 13px; height: 13px; min-width: 0; min-height: 0; border-width: 1.5px; }
  #pause .pz-act { gap: 6px; padding: 7px; }
  #pause .pz-go { min-height: 52px; padding: 4px 8px 6px; border-width: 3px; border-radius: 12px; box-shadow: inset 0 -3px 0 rgba(180, 110, 0, 0.35), 3px 3px 0 var(--ink); }
  #pause .pz-go { gap: 0; }
  #pause .pz-go b { font-size: 24px; gap: 6px; }
  #pause .pz-b { min-height: 40px; padding: 2px 8px 4px; font-size: 14px; gap: 6px; border-width: 2.5px; border-radius: 10px; box-shadow: 2px 2px 0 var(--ink); }
  #pause .pz-sep { min-height: 2px; margin-bottom: 1px; border-bottom-width: 2px; }
  #pause .hub-btn.pz-quit { min-height: 42px; padding: 2px 8px 4px; font-size: 14px; gap: 6px; border-width: 2.5px; border-radius: 10px; box-shadow: 2px 2px 0 var(--ink); }
  #pause .pz-ask { gap: 5px; padding: 5px 6px 6px; border-width: 2.5px; border-radius: 9px; box-shadow: 2px 2px 0 var(--ink); }
  /* (pendant la question, au téléphone : seulement REPRENDRE et la question — Paramètres, Comment jouer et le son
     reviennent avec « Annuler ») */
  #pause .pz-act.ask .pz-b { display: none; }
  #pause .pz-ask > b { font-size: 15px; }
  #pause .pz-ask p { font-size: 11px; line-height: 1.22; }
  #pause .pz-ask-b { gap: 5px; }
  #pause .pz-ask-b .hub-btn { min-height: 40px; font-size: 14px; padding: 2px 4px 4px; }
}
/* (le plus bas — 340 px de haut et moins : le bandeau et les pavés se resserrent encore, sans rien perdre) */
@media (max-height: 340px) {
  #pause .pz-box { gap: 5px 8px; padding-bottom: 6px; }
  #pause .pz-head { padding-top: 2px; padding-bottom: 2px; }
  #pause .pz-head h2 { font-size: 22px; }
  #pause .pz-por { width: 36px; height: 36px; }
  #pause .pz-wt > b { font-size: 16px; }
  #pause .pk-ico { width: 21px; height: 21px; }
  #pause .pk-h { min-height: 21px; }
  #pause .pz-st b { font-size: 17px; }
  #pause .pz-go { min-height: 46px; }
  #pause .pz-b, #pause .hub-btn.pz-quit { min-height: 38px; }
  #pause .pz-son { display: none; }
}
/* (les téléphones étroits — 640 px de large et moins : les colonnes se partagent autrement, les pavés sans icône) */
@media (max-height: 520px) and (max-width: 640px) {
  #pause .pz-box { grid-template-columns: minmax(0, 0.95fr) minmax(0, 0.85fr) minmax(0, 1fr); gap: 6px 7px; }
  #pause .pz-card { padding-left: 6px; padding-right: 6px; }
  #pause .pz-sti { display: none; }
  #pause .pz-st small { letter-spacing: 0; }
  #pause .pz-st { grid-template-columns: minmax(0, 1fr); padding: 3px 5px 4px; }
  #pause .pz-wt > b { font-size: 16px; }
  #pause .pk-h b { font-size: 13px; }
  #pause .pz-act { padding: 6px; }
  #pause .pz-go b { font-size: 20px; gap: 4px; }
  #pause .pz-b, #pause .hub-btn.pz-quit { padding-left: 6px; padding-right: 6px; font-size: 13px; gap: 5px; }
  #pause .pz-mode { font-size: 13px; }
  #pause .pz-ask > b { font-size: 14px; }
  #pause .pz-ask-b .hub-btn { padding-left: 2px; padding-right: 2px; font-size: 13px; letter-spacing: 0; }
}

@media (prefers-reduced-motion: reduce) {
  #pause.pz, #pause .pz-box, #pause .pz-ask, #pause .pz-live i { animation: none; }
  #pause .pz-bar i { transition: none; }
}