/* COMPTES — le compte, les profils, le classement, les badges et ce que rapporte une partie (js/br/compte.js).
   Le style du jeu : cartes crème, gros traits noirs, ombres franches, Barlow Condensed en capitales ; la couleur du
   rang (--rk) donne le ton du profil. Rien ne défile : tout tient dans l'écran, sur PC comme sur un téléphone couché. */

/* ─── le badge d'un joueur : son niveau (rond doré) et le joyau de son rang ─── */
.cp-lv { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 4px; box-sizing: border-box; border: 2.5px solid var(--ink); border-radius: 50%; background: var(--gold, #FFD23F); color: var(--ink); font: italic 800 13px/1 var(--fc); letter-spacing: 0; text-transform: none; font-style: normal; flex: none; }
.cp-lv.big { min-width: 46px; height: 46px; border-width: 3.5px; font-size: 24px; box-shadow: 3px 3px 0 var(--ink); }
.cp-gem { width: 22px; height: 22px; flex: none; overflow: visible; vertical-align: middle; }
.cp-gem .g1 { fill: var(--rk, #D08A4E); stroke: var(--ink); stroke-width: 2; stroke-linejoin: round; }
.cp-gem .g2 { fill: none; stroke: var(--ink); stroke-width: 1.15; stroke-linejoin: round; opacity: 0.5; }
.cp-gem.big { width: 54px; height: 54px; filter: drop-shadow(3px 3px 0 var(--ink)); }
.cp-badge { display: inline-flex; align-items: center; gap: 2px; vertical-align: middle; margin-right: 6px; padding: 1px 4px 1px 1px; border-radius: 13px; background: var(--card); box-shadow: 0 0 0 2px var(--ink); line-height: 1; }
.cp-badge .cp-lv { min-width: 18px; height: 18px; border-width: 2px; font-size: 11px; }
.cp-badge .cp-gem { width: 16px; height: 16px; }
.cp-badge.cp-link { cursor: pointer; }
.cp-badge.cp-link:hover { background: #fff; transform: translateY(-1px); }

/* ─── les fenêtres ─── */
.cp-modal { padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); }
.cp-box { position: relative; gap: 10px; }
.cp-box svg:not(.cp-gem) { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.cp-head { display: flex; align-items: center; gap: 12px; margin: 0; }
.cp-head h2 { flex: 1; min-width: 0; margin: 0; font: italic 800 44px/1 var(--fc); text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cp-head .cp-back { height: 40px; font-size: 16px; }
.cp-box h3 { margin: 0; font: 800 15px/1 var(--fc); letter-spacing: 2px; text-transform: uppercase; color: var(--muted); }
.cp-small { margin: 0; font: 500 13px/1.35 var(--fb); color: var(--muted); }
.cp-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.cp-err { margin: 0; padding: 6px 10px; border-radius: 8px; background: #FFE1DC; border: 2px solid #E4352A; font: 600 14px/1.3 var(--fb); color: #8E1A12; }
.cp-err[hidden] { display: none; }
.cp-box .btn.small svg { width: 18px; height: 18px; margin: -3px 6px -3px 0; vertical-align: middle; }
.cp-box .btn:disabled { opacity: 0.5; cursor: default; transform: none; }
.cp-box form.busy { opacity: 0.7; }

/* les champs */
.cp-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.cp-field > span:first-child { font: 800 15px/1 var(--fc); letter-spacing: 1.5px; text-transform: uppercase; }
.cp-field > span:first-child em { font: 600 12px var(--fb); letter-spacing: 0; text-transform: none; font-style: normal; color: var(--muted); margin-left: 6px; }
.cp-box input:not([type="checkbox"]) { width: 100%; min-width: 0; height: 44px; box-sizing: border-box; padding: 0 12px; border: 3px solid var(--ink); border-radius: 10px; background: #fff; font: 700 20px var(--fc); letter-spacing: 0.5px; color: var(--ink); outline: none; }
.cp-box input:focus { box-shadow: 0 0 0 3px var(--gold, #FFD23F); }
.cp-box input.bad { border-color: #E4352A; background: #FFF3F1; }
.cp-at, .cp-pw { position: relative; display: flex; align-items: center; }
.cp-at i { position: absolute; left: 12px; font: italic 800 22px/1 var(--fc); color: var(--muted); pointer-events: none; }
.cp-at input { padding-left: 32px !important; text-transform: lowercase; }
.cp-pw input { padding-right: 46px !important; }
.cp-eye { position: absolute; right: 6px; width: 36px; height: 32px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 8px; background: none; color: var(--muted); cursor: pointer; }
.cp-eye[aria-pressed="true"] { color: var(--ink); background: rgba(21, 21, 21, 0.08); }
.cp-hint { min-height: 15px; font: 600 12.5px/1.2 var(--fb); color: var(--muted); }
.cp-hint.ok { color: #138A4F; }
.cp-hint.no { color: #C0261B; }
.cp-code-in { text-transform: uppercase; letter-spacing: 2px !important; }

/* ─── compte d'un invité : créer / se connecter / code de secours ─── */
.cp-guest-box { width: min(760px, 100%); }
.cp-guest { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 22px; align-items: start; }
.cp-g-left { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.cp-gtabs { width: 100%; }
.cp-gtabs button { flex: 1; justify-content: center; height: 40px; }
.cp-form { display: flex; flex-direction: column; gap: 10px; }
.cp-form .btn.primary { align-self: flex-start; font-size: 26px; padding: 9px 28px 11px; }
.cp-form .cp-row .linkish { font: 700 15px var(--fc); letter-spacing: 1px; text-transform: uppercase; }
.cp-g-right { display: flex; flex-direction: column; gap: 12px; padding: 14px 16px; border: 3px solid var(--ink); border-radius: 14px; background: linear-gradient(160deg, #FFF6D6, #FBE7A8); box-shadow: 5px 5px 0 var(--ink); }
.cp-pitch { margin: 0; font: 500 15px/1.4 var(--fb); }
.cp-pitch b { display: block; margin-bottom: 4px; font: italic 800 26px/1 var(--fc); text-transform: uppercase; }
.cp-perks { display: flex; flex-direction: column; gap: 9px; margin: 0; padding: 0; list-style: none; }
.cp-perks li { display: flex; align-items: center; gap: 10px; font: 700 16px/1.15 var(--fc); letter-spacing: 0.5px; text-transform: uppercase; }
.cp-perks li > :first-child { width: 24px; flex: none; }
.cp-perks .cp-lv { width: 24px; height: 24px; }

/* la progression d'un invité (à côté du formulaire) : la couleur de son rang, comme un profil */
.cp-prog { position: relative; overflow: hidden; gap: 9px; background: radial-gradient(circle at 18% 18%, color-mix(in srgb, var(--rk, #D08A4E) 50%, #fff) 0, color-mix(in srgb, var(--rk, #D08A4E) 20%, var(--card)) 62%); }
.cp-prog::before { content: ''; position: absolute; left: -40%; top: -70%; width: 140%; aspect-ratio: 1; background: repeating-conic-gradient(rgba(255, 255, 255, 0.22) 0 8deg, rgba(255, 255, 255, 0) 8deg 16deg); pointer-events: none; }
.cp-prog > * { position: relative; }
.cp-prog-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.cp-prog-h b { font: italic 800 24px/1 var(--fc); text-transform: uppercase; }
.cp-tag { padding: 3px 8px 4px; border-radius: 7px; background: var(--ink); color: var(--gold, #FFD23F); font: 800 13px/1 var(--fc); letter-spacing: 1.5px; text-transform: uppercase; }
.cp-prog .cp-tiles div { padding: 4px 8px 5px; }
.cp-prog .cp-tiles b { font-size: 22px; }
.cp-prog .cp-gem.big { width: 40px; height: 40px; }
.cp-prog-cta { margin: 0; padding: 7px 10px; border: 3px solid var(--ink); border-radius: 10px; background: #FFF1B8; font: 800 15px/1.15 var(--fc); letter-spacing: 0.5px; text-transform: uppercase; }

/* ─── « Crée ton compte » à chaque lancement (invité) : ta balle sur les rayons du jeu, et pourquoi ─── */
.cp-hello-box { width: min(680px, 100%); padding: 0; overflow: hidden; }
.cp-hello { display: grid; grid-template-columns: minmax(150px, 0.8fr) minmax(0, 1.4fr); min-height: 0; }
.cp-hello-art { position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 18px 10px; border-right: 4px solid var(--ink); background: radial-gradient(circle at 50% 44%, #B884FF 0, #5B1FB0 52%, #2A0B5E 100%); }
.cp-hello-rays { position: absolute; left: 50%; top: 44%; width: 260%; aspect-ratio: 1; translate: -50% -50%; background: repeating-conic-gradient(rgba(255, 255, 255, 0.1) 0 8deg, rgba(255, 255, 255, 0) 8deg 16deg); animation: cpRays 40s linear infinite; }
.cp-hello-art .cp-pic { position: relative; width: 104px; height: 104px; border: 5px solid var(--ink); background: var(--card); box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.9), 5px 7px 0 5px rgba(21, 21, 21, 0.45); animation: cpBob 2.4s ease-in-out infinite; }
.cp-hello-lv { position: relative; display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 4px; border: 3px solid var(--ink); border-radius: 20px; background: var(--card); box-shadow: 3px 3px 0 var(--ink); }
.cp-hello-lv .cp-lv { width: 26px; height: 26px; font-size: 14px; }
.cp-hello-lv .cp-gem { width: 22px; height: 22px; }
.cp-hello-lv small { font: 800 15px/1 var(--fc); letter-spacing: 0.5px; text-transform: uppercase; white-space: nowrap; }
.cp-hello-main { display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 20px 22px 22px; }
.cp-hello-main h2 { margin: 0; font: italic 800 46px/0.95 var(--fc); text-transform: uppercase; }
.cp-hello-sub { margin: 0; font: 600 15px/1.35 var(--fb); color: var(--muted); }
.cp-hello .cp-perks { gap: 8px; }
.cp-hello .cp-perks li { font-size: 17px; }
.cp-hello .cp-perks svg { width: 24px; height: 24px; }
.cp-at-ico { display: grid; place-items: center; width: 24px; height: 24px; border: 2.5px solid var(--ink); border-radius: 50%; font: italic 800 15px/1 var(--fc); }
.cp-hello-btns { margin-top: 4px; flex-wrap: nowrap; }
.cp-hello-btns .btn { font-size: 24px; padding: 9px 18px 11px; white-space: nowrap; }
.cp-hello-btns .btn.primary { padding: 9px 24px 11px; }
@keyframes cpRays { to { rotate: 360deg; } }
@keyframes cpBob { 50% { transform: translateY(-6px); } }
@media (prefers-reduced-motion: reduce) { .cp-hello-rays, .cp-hello-art .cp-pic { animation: none; } }

/* ─── le code de secours ─── */
.cp-code-box { width: min(620px, 100%); }
.cp-code { display: flex; flex-direction: column; gap: 14px; }
.cp-code-t { margin: 0; font: 500 16px/1.45 var(--fb); }
.cp-code-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.cp-code-v { flex: 1; min-width: 0; padding: 12px 14px; border: 4px dashed var(--ink); border-radius: 12px; background: #fff; font: 800 clamp(22px, 4.2vw, 34px)/1 ui-monospace, 'Cascadia Mono', Consolas, monospace; letter-spacing: 2px; text-align: center; user-select: all; -webkit-user-select: all; white-space: nowrap; }
.cp-check { display: inline-flex; align-items: center; gap: 10px; font: 800 18px var(--fc); letter-spacing: 1px; text-transform: uppercase; cursor: pointer; }
.cp-check input { width: 24px; height: 24px; accent-color: var(--ink); }
.cp-code .cp-row { justify-content: space-between; }

/* ─── les petits morceaux partagés : le portrait d'une balle, le pseudo qu'on modifie, le niveau et sa barre, les tuiles (la
   progression d'invité, le classement) ─── */
.cp-pic { position: relative; display: inline-grid; flex: none; border-radius: 50%; overflow: visible; }
.cp-pic img { display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; background: var(--card); }
.cp-nom-row { display: flex; align-items: center; gap: 6px; min-width: 0; }
.cp-edit { flex: none; width: 32px; height: 32px; display: grid; place-items: center; padding: 0; border: 2.5px solid var(--ink); border-radius: 9px; background: var(--card); color: var(--ink); cursor: pointer; box-shadow: 2px 2px 0 var(--ink); }
.cp-edit svg { width: 17px !important; height: 17px !important; }
.cp-edit:hover { background: #fff; }
.cp-nom-f { display: flex; gap: 6px; width: 100%; }
.cp-nom-f input { height: 38px !important; font-size: 20px !important; }
.cp-nom-f .btn { flex: none; }
.cp-lvrow { display: flex; align-items: center; gap: 10px; }
.cp-lvt { flex: 1; min-width: 0; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 2px 8px; }
.cp-lvt > span:first-child { font: 800 17px/1 var(--fc); letter-spacing: 1px; text-transform: uppercase; }
.cp-lvt small { font: 700 12px var(--fb); color: rgba(21, 21, 21, 0.7); }
.cp-lvt .cp-bar { grid-column: 1 / -1; }
.cp-bar { display: block; height: 12px; border: 2.5px solid var(--ink); border-radius: 8px; background: rgba(255, 255, 255, 0.85); overflow: hidden; }
.cp-bar i { display: block; height: 100%; min-width: 4px; background: linear-gradient(90deg, #FFB800, var(--gold, #FFD23F)); border-right: 2px solid var(--ink); box-sizing: border-box; }

.cp-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.cp-tiles div { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 7px 10px 8px; border: 3px solid var(--ink); border-radius: 10px; background: #fff; }
.cp-tiles b { font: italic 800 30px/1 var(--fc); }
.cp-tiles span { font: 700 12px/1.1 var(--fc); letter-spacing: 1.2px; text-transform: uppercase; color: var(--muted); }
.cp-crown { position: absolute; right: -5px; top: -7px; width: 18px; height: 18px; display: grid; place-items: center; border: 2px solid var(--ink); border-radius: 50%; background: var(--gold, #FFD23F); font: normal 800 11px/1 var(--fc); }

/* ─── la sécurité du compte ─── */
.cp-secu-box { width: min(700px, 100%); }
.cp-sec { display: flex; flex-direction: column; }
.cp-sec-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 14px; padding: 10px 0; border-top: 2px solid rgba(21, 21, 21, 0.1); }
.cp-sec-t b { display: block; font: 800 21px/1.1 var(--fc); letter-spacing: 1px; text-transform: uppercase; }
.cp-sec-t small { display: block; font: 500 13.5px/1.3 var(--fb); color: var(--muted); }
.cp-sec-f { grid-column: 1 / -1; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 4px; }
.cp-sec-f[hidden] { display: none; }
.cp-sec-f .cp-pw { flex: 1 1 180px; min-width: 0; }
.cp-sec-f .cp-err { flex-basis: 100%; }
.cp-sec-row.danger .cp-sec-t b { color: #B3241A; }
.cp-box .btn.small.primary { padding: 6px 18px 8px; font-size: 20px; box-shadow: 3px 3px 0 var(--ink); }
.cp-danger { background: #E4352A !important; color: #fff !important; }
.cp-sec > .cp-small { padding-top: 10px; border-top: 2px solid rgba(21, 21, 21, 0.1); }
/* (une seule action ouverte : les autres lignes s'effacent un peu, pour tenir dans l'écran) */
.cp-secu-box.open .cp-sec-row:not(:has(.cp-sec-f:not([hidden]))) { opacity: 0.55; }

/* ─── le classement ─── */
.cp-top-box { width: min(820px, 100%); }
.cp-tabs button { height: 38px; padding: 0 12px; font-size: 16px; }
.cp-rows { display: flex; flex-direction: column; gap: 5px; margin: 0; padding: 0; list-style: none; }
.cp-rows.loading { opacity: 0.55; }
.cp-r { display: grid; grid-template-columns: 42px 40px minmax(0, 1fr) auto minmax(150px, auto); align-items: center; gap: 10px; min-height: 46px; padding: 3px 12px 3px 4px; border: 3px solid var(--ink); border-radius: 11px; background: #fff; cursor: pointer; transition: transform 0.08s ease, box-shadow 0.08s ease; }
.cp-r:hover, .cp-r:focus-visible { transform: translate(-2px, -2px); box-shadow: 4px 4px 0 var(--ink); outline: none; }
.cp-r.me { background: color-mix(in srgb, var(--gold, #FFD23F) 45%, #fff); }
.cp-pos { display: grid; place-items: center; height: 34px; border-radius: 8px; background: var(--ink); color: var(--paper); font: normal 800 19px/1 var(--fc); }
.cp-r.top1 .cp-pos { background: var(--gold, #FFD23F); color: var(--ink); box-shadow: inset 0 0 0 2.5px var(--ink); }
.cp-r.top2 .cp-pos { background: #D6DDE6; color: var(--ink); box-shadow: inset 0 0 0 2.5px var(--ink); }
.cp-r.top3 .cp-pos { background: #E7A56B; color: var(--ink); box-shadow: inset 0 0 0 2.5px var(--ink); }
.cp-r .cp-pic { width: 38px; height: 38px; border: 2.5px solid var(--ink); }
.cp-who { display: flex; flex-direction: column; min-width: 0; }
.cp-who b { font: 800 20px/1.05 var(--fc); text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cp-who small { font: 600 12.5px/1.2 var(--fb); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cp-val { display: flex; align-items: center; justify-content: flex-end; gap: 8px; text-align: right; }
.cp-val span { display: flex; flex-direction: column; }
.cp-val b { font: italic 800 19px/1 var(--fc); text-transform: uppercase; white-space: nowrap; }
.cp-val small { font: 700 12px var(--fb); color: var(--muted); white-space: nowrap; }
.cp-val .cp-gem { width: 26px; height: 26px; }
.cp-none { padding: 18px; border: 3px dashed rgba(21, 21, 21, 0.3); border-radius: 12px; font: 600 15px var(--fb); color: var(--muted); text-align: center; }
.cp-top-foot { display: flex; align-items: center; gap: 12px; margin-top: 2px; }
.cp-me { flex: 1; min-width: 0; }
.cp-me[hidden] { display: none; }
.cp-me:empty, .cp-me[hidden] + .cp-pager { margin-left: auto; }
.cp-join { grid-template-columns: auto 1fr; padding-left: 12px; font: 800 17px/1.1 var(--fc); letter-spacing: 0.5px; text-transform: uppercase; background: #FFF6D6; }
.cp-pager { display: flex; align-items: center; gap: 8px; margin-left: auto; flex: none; }
.cp-pager .icon-btn { width: 42px; height: 42px; font-size: 30px; }
.cp-pager .icon-btn:disabled { opacity: 0.35; cursor: default; transform: none; box-shadow: 3px 3px 0 var(--ink); }
.cp-pager span { min-width: 62px; text-align: center; font: 800 18px var(--fc); letter-spacing: 1px; }
.cp-mine { font-size: 16px !important; padding: 6px 10px 7px !important; }

/* ─── l'accueil sur PC : ta pastille de profil et le classement (en haut à gauche) ─── */
.cp-chip { order: -1; display: inline-flex; align-items: center; gap: 9px; height: 52px; max-width: 320px; margin-right: 4px; padding: 0 12px 0 5px; border: 3px solid var(--ink); border-radius: 14px; background: var(--card); color: var(--ink); box-shadow: 3px 3px 0 var(--ink); cursor: pointer; text-align: left; transition: transform 0.1s ease, box-shadow 0.1s ease; }
.cp-chip[hidden] { display: none; }
.cp-chip:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--ink); background: #fff; }
.cp-chip:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
.cp-chip-pic { width: 38px; height: 38px; flex: none; display: grid; place-items: center; border: 2.5px solid var(--ink); border-radius: 50%; overflow: hidden; background: var(--gold, #FFD23F); }
.cp-chip-pic img { width: 100%; height: 100%; object-fit: cover; }
.cp-chip-pic svg { width: 24px; height: 24px; fill: none; stroke: var(--ink); stroke-width: 2.4; stroke-linecap: round; }
.cp-chip-t { display: flex; flex-direction: column; min-width: 0; }
.cp-chip-t b { font: 800 19px/1 var(--fc); text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cp-chip-t small { font: 600 12px/1.2 var(--fb); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cp-chip .cp-lv { width: 26px; height: 26px; font-size: 14px; }
.cp-chip .cp-gem { width: 26px; height: 26px; margin-left: -4px; }
.cp-top-btn { order: -1; margin-right: auto; }
.cp-top-btn svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

/* ─── l'écran de fin : ce que la partie t'a rapporté ─── */
.cp-gain { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px 10px; margin-top: 10px; }
.cp-gain[hidden] { display: none; }
.cp-g-xp, .cp-g-rk { display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px 5px 8px; border: 3px solid var(--ink); border-radius: 12px; background: var(--card); color: var(--ink); box-shadow: 3px 3px 0 var(--ink); animation: cpPop 0.45s cubic-bezier(.2, 1.6, .4, 1) both; }
.cp-g-rk { animation-delay: 0.15s; background: color-mix(in srgb, var(--rk) 30%, var(--card)); }
.cp-g-xp > b:first-child, .cp-g-rk > b { font: italic 800 22px/1 var(--fc); white-space: nowrap; }
.cp-g-xp .cp-bar { width: 70px; height: 10px; border-width: 2px; }
.cp-g-xp em, .cp-g-rk.up span { font: italic 800 17px/1 var(--fc); text-transform: uppercase; color: #138A4F; font-style: normal; }
.cp-g-rk span { font: 800 16px/1 var(--fc); text-transform: uppercase; white-space: nowrap; }
.cp-g-rk .cp-gem { width: 26px; height: 26px; }
.cp-g-rk.down > b { color: #B3241A; }
.cp-g-xp.up, .cp-g-rk.up { background: color-mix(in srgb, #3DDC84 30%, var(--card)); }
.cp-g-why { flex-basis: 100%; text-align: center; font: 600 12.5px/1.2 var(--fb); font-style: normal; color: var(--muted); }
/* (le détail des points de rang : ta place, tes éliminations) */
.cp-g-det { flex-basis: 100%; text-align: center; font: 700 13px/1.2 var(--fc); letter-spacing: 0.6px; text-transform: uppercase; color: var(--muted); }
.cp-g-det b { color: #138A4F; }
.cp-g-det b.neg { color: #B3241A; }
#over .cp-g-det { color: #fff; text-shadow: 0 1px 0 rgba(21, 21, 21, 0.75), 0 0 6px rgba(21, 21, 21, 0.45); }
#over .cp-g-det b { color: #8CF5B4; }
#over .cp-g-det b.neg { color: #FFB3A8; }
#over .cp-g-why { color: #fff; text-shadow: 0 1px 0 rgba(21, 21, 21, 0.75), 0 0 6px rgba(21, 21, 21, 0.45); }
.cp-g-cta { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px 8px 9px; border: 3px solid var(--ink); border-radius: 12px; background: #FFF1B8; color: var(--ink); box-shadow: 3px 3px 0 var(--ink); font: 800 16px/1.1 var(--fc); letter-spacing: 0.5px; text-transform: uppercase; cursor: pointer; }
.cp-g-cta:hover { background: #fff; }
.cp-g-cta.small { padding: 5px 11px 6px 7px; font-size: 14.5px; animation: cpPop 0.45s 0.3s cubic-bezier(.2, 1.6, .4, 1) both; }
.cp-g-cta svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; flex: none; }
@keyframes cpPop { from { transform: scale(0.6); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .cp-g-xp, .cp-g-rk { animation: none; } }

/* ─── téléphone couché (ou petit écran) : tout plus serré, sans défiler ─── */
@media (max-height: 520px) {
  .cp-box { gap: 7px; padding: 10px 14px 12px; }
  .cp-head h2 { font-size: 30px; }
  .cp-head .icon-btn { width: 40px; height: 40px; font-size: 22px; }
  .cp-head .cp-back { height: 34px; padding: 0 10px; font-size: 14px; }
  .cp-box input:not([type="checkbox"]) { height: 36px; font-size: 17px; border-width: 2.5px; }
  .cp-field { gap: 2px; }
  .cp-field > span:first-child { font-size: 13px; }
  .cp-hint { min-height: 0; font-size: 11px; }
  .cp-form { gap: 6px; }
  .cp-form .btn.primary { font-size: 20px; padding: 6px 20px 8px; }
  .cp-gtabs button { height: 32px; font-size: 14px; }
  .cp-g-left { gap: 7px; }
  .cp-g-right { gap: 8px; padding: 10px 12px; }
  .cp-pitch { font-size: 13px; }
  .cp-pitch b { font-size: 20px; }
  .cp-perks { gap: 6px; }
  .cp-perks li { font-size: 13.5px; }
  .cp-err { padding: 4px 8px; font-size: 12.5px; }

  .cp-code { gap: 9px; }
  .cp-code-t { font-size: 13.5px; line-height: 1.35; }
  .cp-code-v { padding: 8px 10px; font-size: 24px; }

  .cp-lv.big { min-width: 36px; height: 36px; font-size: 19px; border-width: 3px; box-shadow: 2px 2px 0 var(--ink); }
  .cp-lvt > span:first-child { font-size: 14px; }
  .cp-bar { height: 10px; }
  .cp-gem.big { width: 38px; height: 38px; filter: drop-shadow(2px 2px 0 var(--ink)); }
  .cp-tiles { gap: 5px; }
  .cp-tiles div { padding: 3px 7px 4px; border-width: 2.5px; }
  .cp-tiles b { font-size: 21px; }
  .cp-tiles span { font-size: 10px; letter-spacing: 0.8px; }
  .cp-box h3 { font-size: 12px; letter-spacing: 1.5px; }
  .cp-crown { width: 15px; height: 15px; font-size: 9px; right: -4px; top: -5px; }

  .cp-sec-row { padding: 5px 0; gap: 2px 10px; }
  .cp-sec-t b { font-size: 17px; }
  .cp-sec-t small { font-size: 11.5px; }
  .cp-secu-box .btn.small { font-size: 15px; padding: 4px 10px 6px; box-shadow: 2px 2px 0 var(--ink); }
  .cp-sec > .cp-small { padding-top: 6px; font-size: 11.5px; }

  .cp-tabs button { height: 32px; padding: 0 9px; font-size: 13.5px; }
  .cp-rows { gap: 3px; }
  .cp-r { grid-template-columns: 34px 30px minmax(0, 1fr) auto minmax(120px, auto); gap: 7px; min-height: 36px; padding: 1px 9px 1px 3px; border-width: 2.5px; border-radius: 9px; }
  .cp-pos { height: 28px; font-size: 16px; border-radius: 7px; }
  .cp-r .cp-pic { width: 28px; height: 28px; border-width: 2px; }
  .cp-who { flex-direction: row; align-items: baseline; gap: 8px; }
  .cp-who b { font-size: 16.5px; }
  .cp-who small { font-size: 11.5px; }
  .cp-r .cp-lv { min-width: 20px; height: 20px; font-size: 11px; border-width: 2px; }
  .cp-val b { font-size: 15.5px; }
  .cp-val small { font-size: 10.5px; }
  .cp-val .cp-gem { width: 20px; height: 20px; }
  .cp-val span { flex-direction: row; align-items: baseline; gap: 6px; }
  .cp-pager .icon-btn { width: 36px; height: 36px; font-size: 24px; }
  .cp-pager span { min-width: 48px; font-size: 15px; }
  .cp-join { font-size: 14px; }

  .cp-chip { height: 44px; padding: 0 10px 0 4px; }
  .cp-chip-pic { width: 32px; height: 32px; }
  .cp-chip-t b { font-size: 16px; }
  .cp-chip-t small { display: none; }

  .cp-gain { margin-top: 5px; gap: 5px 8px; }
  .cp-g-xp, .cp-g-rk { padding: 3px 9px 3px 6px; border-width: 2.5px; box-shadow: 2px 2px 0 var(--ink); }
  .cp-g-xp > b:first-child, .cp-g-rk > b { font-size: 17px; }
  .cp-g-rk span, .cp-g-xp em { font-size: 13px; }
  .cp-g-xp .cp-bar { width: 50px; height: 8px; }
  .cp-g-rk .cp-gem { width: 20px; height: 20px; }
  .cp-g-why { font-size: 11px; }
  .cp-g-det { font-size: 11.5px; letter-spacing: 0.4px; }
  .cp-g-cta { font-size: 13px; padding: 4px 10px 5px 6px; }
}
/* (téléphone couché très bas — ex. 360 px : les mêmes, un cran plus petits) */
@media (max-height: 400px) {
  .cp-head h2 { font-size: 26px; }
  .cp-tiles b { font-size: 18px; }
}
/* (téléphone couché : la progression d'invité et « Crée ton compte ») */
@media (max-height: 520px) {
  .cp-prog { gap: 6px; }
  .cp-prog-h b { font-size: 19px; }
  .cp-tag { font-size: 11px; padding: 2px 6px 3px; }
  .cp-prog .cp-gem.big { width: 30px; height: 30px; }
  .cp-prog .cp-tiles b { font-size: 17px; }
  .cp-prog-cta { padding: 5px 8px; font-size: 12.5px; border-width: 2.5px; }
  .cp-hello-box { width: min(620px, 100%); }
  .cp-hello { grid-template-columns: minmax(130px, 0.7fr) minmax(0, 1.4fr); }
  .cp-hello-art { gap: 8px; padding: 12px 8px; border-right-width: 3px; }
  .cp-hello-art .cp-pic { width: 78px; height: 78px; border-width: 4px; box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.9), 4px 5px 0 4px rgba(21, 21, 21, 0.45); }
  .cp-hello-lv small { font-size: 13px; }
  .cp-hello-main { gap: 7px; padding: 12px 16px 14px; }
  .cp-hello-main h2 { font-size: 32px; }
  .cp-hello-sub { font-size: 12.5px; }
  .cp-hello .cp-perks { gap: 5px; }
  .cp-hello .cp-perks li { font-size: 14px; }
  .cp-hello .cp-perks svg, .cp-at-ico { width: 20px; height: 20px; }
  .cp-at-ico { font-size: 13px; border-width: 2px; }
  .cp-hello-btns .btn { font-size: 19px; padding: 6px 13px 8px; box-shadow: 3px 3px 0 var(--ink); }
  .cp-hello-btns .btn.primary { padding: 6px 18px 8px; box-shadow: -4px 4px 0 var(--c1), 4px 4px 0 var(--c2); }
}
/* (téléphone couché tout petit — 667 × 300 : les barres du navigateur prennent la place) */
@media (max-height: 340px) {
  .modal.cp-modal { padding-top: 8px; padding-bottom: 8px; }
  .cp-box { gap: 5px; padding: 7px 12px 9px; max-height: calc(100vh - 16px); }
  .cp-head h2 { font-size: 23px; }
  .cp-head .icon-btn { width: 34px; height: 34px; font-size: 19px; border-width: 2.5px; box-shadow: 2px 2px 0 var(--ink); }
  .cp-head .cp-back { height: 30px; font-size: 12.5px; }
  .cp-box input:not([type="checkbox"]) { height: 30px; font-size: 15px; padding: 0 9px; border-width: 2px; border-radius: 8px; }
  .cp-at input { padding-left: 26px !important; }
  .cp-at i { left: 9px; font-size: 18px; }
  .cp-field > span:first-child { font-size: 11.5px; }
  .cp-field > span:first-child em { display: none; }
  .cp-form { gap: 4px; }
  .cp-form .btn.primary { font-size: 17px; padding: 5px 16px 6px; }
  .cp-gtabs button { height: 27px; font-size: 12.5px; }
  .cp-g-left { gap: 5px; }
  .cp-guest { gap: 12px; }
  .cp-g-right { gap: 5px; padding: 7px 9px; border-width: 2.5px; box-shadow: 3px 3px 0 var(--ink); }
  .cp-prog-h b { font-size: 16px; }
  .cp-prog .cp-lv.big { min-width: 28px; height: 28px; font-size: 15px; border-width: 2.5px; }
  .cp-prog .cp-lvt > span:first-child { font-size: 12px; }
  .cp-prog .cp-lvt small { font-size: 10.5px; }
  .cp-prog .cp-gem.big { width: 24px; height: 24px; }
  .cp-prog .cp-tiles div { padding: 2px 6px 3px; border-width: 2px; }
  .cp-prog .cp-tiles b { font-size: 14.5px; }
  .cp-prog .cp-tiles span { font-size: 9.5px; }
  .cp-prog-cta { padding: 3px 7px; font-size: 11px; border-width: 2px; }
  .cp-err { padding: 3px 7px; font-size: 11.5px; }
  .cp-pitch { font-size: 12px; }
  .cp-pitch b { font-size: 17px; }

  .cp-hello-art { gap: 6px; padding: 8px 6px; }
  .cp-hello-art .cp-pic { width: 62px; height: 62px; border-width: 3px; box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.9), 3px 4px 0 3px rgba(21, 21, 21, 0.45); }
  .cp-hello-lv { padding: 2px 7px 2px 2px; border-width: 2.5px; }
  .cp-hello-lv .cp-lv { width: 21px; height: 21px; font-size: 12px; }
  .cp-hello-lv .cp-gem { width: 18px; height: 18px; }
  .cp-hello-lv small { font-size: 11.5px; }
  .cp-hello-main { gap: 5px; padding: 9px 13px 11px; }
  .cp-hello-main h2 { font-size: 26px; }
  .cp-hello-sub { font-size: 11.5px; }
  .cp-hello .cp-perks { gap: 3px; }
  .cp-hello .cp-perks li { font-size: 12.5px; gap: 7px; }
  .cp-hello .cp-perks svg, .cp-at-ico { width: 17px; height: 17px; }
  .cp-at-ico { font-size: 11px; }
  .cp-hello-btns .btn { font-size: 16px; padding: 5px 11px 6px; }
  .cp-hello-btns .btn.primary { padding: 5px 15px 6px; }

  .cp-lv.big { min-width: 28px; height: 28px; font-size: 15px; }
  .cp-gem.big { width: 28px; height: 28px; }
  .cp-tiles { gap: 4px; }
  .cp-tiles div { padding: 2px 6px 3px; }
  .cp-tiles b { font-size: 15px; }
  .cp-tiles span { font-size: 9px; }

  .cp-r { min-height: 30px; gap: 6px; grid-template-columns: 30px 26px minmax(0, 1fr) auto minmax(110px, auto); }
  .cp-pos { height: 24px; font-size: 14px; }
  .cp-r .cp-pic { width: 24px; height: 24px; }
  .cp-who b { font-size: 14.5px; }
  .cp-pager .icon-btn { width: 30px; height: 30px; font-size: 20px; }

  .cp-code-t { font-size: 12px; }
  .cp-code-v { padding: 5px 8px; font-size: 19px; border-width: 3px; }
  .cp-sec-row { padding: 3px 0; }
  .cp-sec-t b { font-size: 15px; }
  .cp-sec-t small { font-size: 10.5px; }
}
/* (écran étroit — téléphone tenu debout, rare : le jeu se joue couché — une colonne) */
@media (max-width: 640px) {
  .cp-guest { grid-template-columns: minmax(0, 1fr); }
  .cp-g-right { display: none; }
  .cp-r { grid-template-columns: 30px 30px minmax(0, 1fr) auto; }
  .cp-r .cp-lv { display: none; }
}

/* ─── TOUS LES RANGS (#cpRangs, js/br/compte.js ouvrirRangs) : sept colonnes, du Bronze à la Légende, chacune avec son
   joyau et ses divisions (les points pour y entrer) ; ton palier entouré d'or, ta division en noir. Ton rang, dans les
   fenêtres du compte, s'ouvre d'un appui (la petite flèche) ─── */
.cp-rangs-box { width: min(920px, 100%); }
.cp-rangs { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
.cp-rg { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; padding: 10px 5px 8px; border: 3px solid var(--ink); border-radius: 14px; background: color-mix(in srgb, var(--rk) 22%, var(--card)); }
.cp-rg > b { max-width: 100%; overflow: hidden; text-overflow: ellipsis; font: italic 800 17px/1 var(--fc); text-transform: uppercase; white-space: nowrap; }
.cp-rg ul { list-style: none; display: flex; flex-direction: column; gap: 4px; width: 100%; margin: 0; padding: 0; }
.cp-rg li { display: flex; justify-content: space-between; align-items: baseline; gap: 4px; padding: 2px 7px 3px; border-radius: 7px; background: rgba(255, 255, 255, 0.62); font: 800 13px/1.2 var(--fc); }
.cp-rg li small { font: 700 11px/1.2 var(--fc); color: var(--muted); white-space: nowrap; }
.cp-rg li.me { background: var(--ink); color: var(--gold); }
.cp-rg li.me small { color: #fff; }
.cp-rg.on { box-shadow: 0 0 0 3px var(--gold), 4px 4px 0 3px var(--ink); }
.cp-rangs-me { margin: 12px 0 0; font: 600 16px/1.35 var(--fb); text-align: center; }
.cp-rangs-me b { font-weight: 800; }
.cp-rangs-me b[style] { padding: 0 6px 1px; border-radius: 6px; background: var(--rk); color: var(--ink); }
.cp-rangs-note { margin: 4px 0 0; font: 500 13px/1.35 var(--fb); color: var(--muted); text-align: center; }
html.tel #cpRangs { --band: #E0A100; }
@media (max-height: 520px) {
  .cp-rangs { gap: 6px; }
  .cp-rg { gap: 4px; padding: 6px 3px 5px; border-width: 2.5px; border-radius: 12px; }
  .cp-rg .cp-gem.big { width: 36px; height: 36px; filter: drop-shadow(2px 2px 0 var(--ink)); }
  .cp-rg > b { font-size: 14px; }
  .cp-rg ul { gap: 3px; }
  .cp-rg li { padding: 1px 5px 2px; font-size: 12px; }
  .cp-rg li small { font-size: 10px; }
  .cp-rangs-me { margin-top: 8px; font-size: 14px; }
  .cp-rangs-note { font-size: 11.5px; }
}
@media (max-height: 340px) {
  .cp-rg .cp-gem.big { width: 28px; height: 28px; }
  .cp-rangs-note { display: none; }
}
/* (« Crée ton compte », sa première seconde : les clics passent au travers — js/br/compte.js, helloShow) */
.modal.cp-shield, .modal.cp-shield * { pointer-events: none !important; }

/* ═══════════════ LE PROFIL (refait le 02/10/2026, js/br/compte.js paneProfil) ═══════════════
   Max : « refais le profil, c'est une partie oubliée ». La patte du menu et du lobby (css/hub.css) : la nuit, l'encre
   épaisse, les ombres décalées sans flou, les titres en capitales italiques, l'or pour l'action, les panneaux rayés aux
   couleurs du menu ; chaque format Ranked prend l'ambiance de son rang ([data-rk] : --t1 vive, --t2 profonde, --t3
   claire, définis dans css/hub.css), avec son grand emblème. À gauche SA CARTE (son cadre et sa balle dans son cercle,
   comme à l'écran VS), à droite le Ranked, puis les statistiques, ses balles et ses dernières parties. Mesuré en --u
   (10 px à 1 920 × 1 080, comme l'entrée) ; au téléphone couché (520 px de haut ou moins), des pixels, la carte à gauche
   et trois onglets à droite, aucun texte sous 12 px. Jamais un texte coupé ni de points de suspension : un mot long
   passe à la ligne (le plus long nom de balle : « Cosmic Armor Superman »). */
#cpModal { --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);
  --c-std: #1FB873; --c-std-d: #0E6B47; --c-rk: #E5484D; --c-rk-d: #8E1B2B; --c-br: #8E44E8; --c-br-d: #4B1F8A; --c-pp: #2D8CFF; --c-pp-d: #15479A;
  --creme: linear-gradient(#FFFBF1, #FFEFCC); }
#cpModal .pf-box { width: min(100%, calc(var(--u) * 184)); height: 100%; max-width: 100%; max-height: 100%; box-sizing: border-box; display: flex; flex-direction: column; gap: 0; padding: 0; overflow: hidden;
  border: calc(var(--u) * 0.5) solid var(--ink); border-radius: calc(var(--u) * 2); box-shadow: calc(var(--u) * 1) calc(var(--u) * 1) 0 var(--ink); color: #fff;
  background: radial-gradient(ellipse 70% 60% at 30% 30%, rgba(120, 90, 255, 0.22), transparent 70%), linear-gradient(160deg, #2E2368, #17123F 58%, #0D0A25); }
/* (les mots longs sur PC, les courts au téléphone : « Meilleur Elo » / « Record », « Dégâts infligés » / « Dégâts »…) */
#cpModal .sh { display: none; }

/* la barre du haut : retour, le titre, (au téléphone) les onglets, la saison, le classement, le compte, fermer */
#cpModal .pf-head { flex: none; display: flex; align-items: center; gap: calc(var(--u) * 1.4); margin: 0; padding: calc(var(--u) * 1.4) calc(var(--u) * 2) calc(var(--u) * 1.4) calc(var(--u) * 2.6);
  border-bottom: calc(var(--u) * 0.45) solid var(--ink); border-radius: 0; background: repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.04) 0 calc(var(--u) * 1.2), transparent calc(var(--u) * 1.2) calc(var(--u) * 2.4)), linear-gradient(#3A2C86, #241A5C); }
#cpModal .pf-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) * 4.6)/1 var(--fc); text-transform: uppercase; letter-spacing: 0.5px; color: #fff;
  text-shadow: var(--out), calc(var(--u) * 0.4) calc(var(--u) * 0.5) 0 var(--ink); white-space: nowrap; }
#cpModal .pf-head .grow { flex: 1; min-width: 0; }
#cpModal .pf-saison { flex: none; display: inline-flex; align-items: baseline; gap: calc(var(--u) * 0.8); padding: calc(var(--u) * 0.7) calc(var(--u) * 1.6) calc(var(--u) * 0.8); border: calc(var(--u) * 0.35) solid var(--ink); border-radius: 99px;
  background: linear-gradient(#FFE27A, #E9A928); color: var(--ink); box-shadow: calc(var(--u) * 0.35) calc(var(--u) * 0.35) 0 var(--ink); white-space: nowrap; }
#cpModal .pf-saison b { font: italic 800 max(14px, calc(var(--u) * 2.2))/1 var(--fc); text-transform: uppercase; }
#cpModal .pf-saison small { font: 700 max(12px, calc(var(--u) * 1.5))/1 var(--fc); letter-spacing: 0.8px; text-transform: uppercase; opacity: 0.75; }
#cpModal .pf-hcta { display: none; }
#cpModal .pf-hb, #cpModal .pf-back, #cpModal .cp-back { min-height: 44px; height: calc(var(--u) * 5.4); flex: none; }
#cpModal .pf-hb svg, #cpModal .cp-head .hub-btn svg { width: calc(var(--u) * 2.6); height: calc(var(--u) * 2.6); min-width: 18px; min-height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
#cpModal .pf-x { width: calc(var(--u) * 5.4); height: calc(var(--u) * 5.4); min-width: 44px; min-height: 44px; border-width: calc(var(--u) * 0.35); box-shadow: calc(var(--u) * 0.4) calc(var(--u) * 0.4) 0 var(--ink); font-size: calc(var(--u) * 2.8); }
/* (les onglets : au téléphone seulement — sur PC, tout se voit d'un coup) */
#cpModal .pf-tabs { display: none; }

/* le corps : sa carte à gauche, le reste à droite */
#cpModal .pf { flex: 1; min-height: 0; display: grid; grid-template-columns: calc(var(--u) * 38) minmax(0, 1fr); gap: calc(var(--u) * 2.4); padding: calc(var(--u) * 2.4); box-sizing: border-box; }

/* ─── À GAUCHE : SA CARTE ─── */
#cpModal .pf-id { min-height: 0; min-width: 0; display: flex; flex-direction: column; gap: calc(var(--u) * 1.4); }
#cpModal .pf-scene { position: relative; flex: 1; min-height: calc(var(--u) * 16); overflow: hidden; border: calc(var(--u) * 0.45) solid var(--ink); border-radius: calc(var(--u) * 1.8);
  background: radial-gradient(circle at 50% 46%, color-mix(in srgb, var(--t1) 55%, transparent) 0, transparent 62%), linear-gradient(170deg, color-mix(in srgb, var(--t2) 70%, #3A3270), var(--t2) 70%);
  box-shadow: inset 0 0 0 calc(var(--u) * 0.35) color-mix(in srgb, var(--t1) 40%, transparent), calc(var(--u) * 0.7) calc(var(--u) * 0.7) 0 var(--ink); }
#cpModal .pf[data-rk="place"] .pf-scene { --t1: #8E6BFF; --t2: #221A55; }
#cpModal .pf-rays { position: absolute; left: 50%; top: 46%; width: 260%; aspect-ratio: 1; translate: -50% -50%; background: repeating-conic-gradient(color-mix(in srgb, var(--t1) 26%, transparent) 0 6deg, transparent 6deg 15deg);
  -webkit-mask: radial-gradient(circle, #000 0 12%, transparent 46%); mask: radial-gradient(circle, #000 0 12%, transparent 46%); animation: cpRays 60s linear infinite; pointer-events: none; }
#cpModal .pf-carte { position: absolute; left: 50%; top: 50%; height: 90%; width: auto; max-width: 92%; aspect-ratio: 500 / 720; translate: -50% -50%; filter: drop-shadow(calc(var(--u) * 0.6) calc(var(--u) * 0.8) 0 rgba(10, 6, 30, 0.55)); }
/* (dedans, comme à l'écran VS : la balle en grand dans son cercle, le ruban du meilleur rang, le nom de la balle) */
#cpModal .pf-carte .cf-vitre { gap: calc(var(--u) * 0.6); justify-content: center; background: radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--t1) 45%, #3B3F9E), #1C1846 74%); }
#cpModal .pf-carte .cf-cercle { width: 100%; flex: none; }
#cpModal .pf-rub { margin-top: calc(var(--u) * -1.6); padding: calc(var(--u) * 0.4) calc(var(--u) * 1.4) calc(var(--u) * 0.6); border: calc(var(--u) * 0.3) solid var(--ink); border-radius: calc(var(--u) * 0.8); background: var(--t1); color: var(--ink);
  box-shadow: calc(var(--u) * 0.3) calc(var(--u) * 0.3) 0 var(--ink); font: italic 800 max(14px, calc(var(--u) * 2.2))/1 var(--fc); letter-spacing: 0.5px; text-transform: uppercase; white-space: nowrap; }
#cpModal .pf-rub[data-rk="elite"], #cpModal .pf-rub[data-rk="top"] { color: #fff; text-shadow: 1px 1px 0 var(--ink); }
#cpModal .pf-bn { max-width: 92%; font: 700 max(12px, calc(var(--u) * 1.6))/1.1 var(--fc); letter-spacing: 1.2px; text-transform: uppercase; color: rgba(255, 255, 255, 0.82); text-align: center; }
#cpModal .pf-heros { display: none; }
#cpModal .pf-who { display: flex; flex-direction: column; gap: calc(var(--u) * 0.4); min-width: 0; }
#cpModal .pf-who .cp-nom-row { gap: calc(var(--u) * 1); }
#cpModal .pf-nom { min-width: 0; padding: 0 calc(var(--u) * 0.4) calc(var(--u) * 0.3) 0; font: italic 800 calc(var(--u) * 4.6)/1 var(--fc); text-transform: uppercase; color: #fff; text-shadow: var(--out), calc(var(--u) * 0.35) calc(var(--u) * 0.45) 0 var(--ink); white-space: nowrap; }
#cpModal .pf-nom.l { font-size: calc(var(--u) * 3.9); }
#cpModal .pf-nom.xl { font-size: calc(var(--u) * 3.3); }
#cpModal .pf-who .cp-edit { width: calc(var(--u) * 4); height: calc(var(--u) * 4); min-width: 30px; min-height: 30px; }
#cpModal .pf-who .cp-edit svg { width: 60% !important; height: 60% !important; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
#cpModal .pf-h { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 calc(var(--u) * 1); font: 700 max(13px, calc(var(--u) * 2))/1.15 var(--fb); color: #fff; }
#cpModal .pf-h small { font: 600 max(12px, calc(var(--u) * 1.6))/1.2 var(--fb); color: rgba(255, 255, 255, 0.62); }
#cpModal .pf-tag { padding: calc(var(--u) * 0.3) calc(var(--u) * 0.9) calc(var(--u) * 0.4); border: 2px solid var(--ink); border-radius: calc(var(--u) * 0.7); background: #FFD23F; color: var(--ink); font: italic 800 max(12px, calc(var(--u) * 1.7))/1 var(--fc); letter-spacing: 1px; text-transform: uppercase; }
#cpModal .pf-who .cp-nom-f input { height: calc(var(--u) * 4.4) !important; min-height: 36px; }
/* le niveau du compte : le rond doré, la barre d'XP */
#cpModal .pf-lv { display: flex; align-items: center; gap: calc(var(--u) * 1.2); }
#cpModal .pf-lvb { flex: none; display: grid; place-items: center; width: calc(var(--u) * 5.6); height: calc(var(--u) * 5.6); min-width: 34px; min-height: 34px; box-sizing: border-box; border: calc(var(--u) * 0.4) solid var(--ink); border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #FFF1A6, #FFD23F 55%, #E9A928); color: var(--ink); box-shadow: calc(var(--u) * 0.35) calc(var(--u) * 0.35) 0 var(--ink); font: italic 800 calc(var(--u) * 2.6)/1 var(--fc); }
#cpModal .pf-lvt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: calc(var(--u) * 0.5); }
#cpModal .pf-lvt > span:first-child { display: flex; align-items: baseline; justify-content: space-between; gap: calc(var(--u) * 1); }
#cpModal .pf-lvt b { font: italic 800 max(14px, calc(var(--u) * 2.4))/1 var(--fc); text-transform: uppercase; }
#cpModal .pf-lvt small { font: 700 max(12px, calc(var(--u) * 1.6))/1 var(--fc); letter-spacing: 0.5px; color: rgba(255, 255, 255, 0.72); white-space: nowrap; }
#cpModal .pf-bar { display: block; height: calc(var(--u) * 1.5); min-height: 9px; box-sizing: border-box; border: calc(var(--u) * 0.3) solid var(--ink); border-radius: 99px; background: rgba(0, 0, 0, 0.45); overflow: hidden; }
#cpModal .pf-bar i { display: block; height: 100%; min-width: 4px; background: linear-gradient(90deg, #FFB800, #FFE27A); }
/* le coffre (le sien) ; la collection (un autre joueur) */
#cpModal .pf-coffre { position: relative; display: flex; align-items: center; gap: calc(var(--u) * 1.2); width: 100%; box-sizing: border-box; min-height: 44px; padding: calc(var(--u) * 0.8) calc(var(--u) * 1.6) calc(var(--u) * 0.8) calc(var(--u) * 1);
  border: calc(var(--u) * 0.4) solid var(--ink); border-radius: calc(var(--u) * 1.3); background: linear-gradient(90deg, #FFE7B8, #FFF7E6 70%); color: var(--ink); box-shadow: calc(var(--u) * 0.5) calc(var(--u) * 0.5) 0 var(--ink); text-align: left; cursor: pointer; transition: transform 0.1s ease, box-shadow 0.1s ease; }
#cpModal .pf-coffre:hover { transform: translate(calc(var(--u) * -0.2), calc(var(--u) * -0.2)); box-shadow: calc(var(--u) * 0.7) calc(var(--u) * 0.7) 0 var(--ink); }
#cpModal .pf-coffre:active { transform: translate(calc(var(--u) * 0.3), calc(var(--u) * 0.3)); box-shadow: calc(var(--u) * 0.2) calc(var(--u) * 0.2) 0 var(--ink); }
#cpModal .pf-coffre > svg { flex: none; width: calc(var(--u) * 4.4); height: calc(var(--u) * 3.9); min-width: 26px; min-height: 23px; }
#cpModal .pf-cft { flex: 1; display: flex; flex-direction: column; gap: calc(var(--u) * 0.3); min-width: 0; }
#cpModal .pf-coffre b { font: italic 800 max(15px, calc(var(--u) * 2.5))/1 var(--fc); text-transform: uppercase; }
#cpModal .pf-coffre small { font: 700 max(12px, calc(var(--u) * 1.5))/1 var(--fc); letter-spacing: 0.8px; text-transform: uppercase; color: rgba(21, 21, 21, 0.62); white-space: nowrap; }
#cpModal .pf-go { font: normal 800 calc(var(--u) * 3.4)/1 var(--fc); color: rgba(21, 21, 21, 0.55); }
#cpModal .pf-eq { flex: none; display: inline-flex; align-items: center; gap: calc(var(--u) * 0.8); }
#cpModal .pf-eq-c { display: block; width: calc(var(--u) * 5.4); min-width: 32px; }
#cpModal .pf-eq-k { width: calc(var(--u) * 3.6); min-width: 23px; }
#cpModal .pf-eq-k .cf-cercle { width: 92%; }
#cpModal .pf-new { position: absolute; top: calc(var(--u) * -1); right: calc(var(--u) * -1); min-width: 22px; height: 22px; box-sizing: border-box; padding: 0 5px; border: 2.5px solid var(--ink); border-radius: 11px; background: #FF3B30; color: #fff; font: normal 800 13px/17px var(--fc); text-align: center; }
#cpModal .pf-coll { cursor: default; background: rgba(255, 255, 255, 0.9); box-shadow: calc(var(--u) * 0.4) calc(var(--u) * 0.4) 0 var(--ink); }
#cpModal .pf-coll:hover, #cpModal .pf-coll:active { transform: none; box-shadow: calc(var(--u) * 0.4) calc(var(--u) * 0.4) 0 var(--ink); }
/* un invité : « Crée ton compte » */
#cpModal .pf-cta { display: flex; flex-direction: column; gap: calc(var(--u) * 1); padding: calc(var(--u) * 1.2) calc(var(--u) * 1.4); border: calc(var(--u) * 0.4) solid var(--ink); border-radius: calc(var(--u) * 1.3); background: rgba(255, 210, 63, 0.14); box-shadow: inset 0 0 0 calc(var(--u) * 0.25) rgba(255, 210, 63, 0.5); }
#cpModal .pf-cta p { margin: 0; font: 600 max(12px, calc(var(--u) * 1.6))/1.3 var(--fb); color: rgba(255, 255, 255, 0.85); }
#cpModal .pf-cta p b { display: block; margin-bottom: calc(var(--u) * 0.3); font: italic 800 max(15px, calc(var(--u) * 2.4))/1 var(--fc); text-transform: uppercase; color: #FFD23F; }
#cpModal .pf-cta-b { display: flex; align-items: center; flex-wrap: wrap; gap: calc(var(--u) * 0.8) calc(var(--u) * 1.6); }
#cpModal .pf-cta-go { padding: calc(var(--u) * 0.6) calc(var(--u) * 2) calc(var(--u) * 0.8); }
#cpModal .pf-cta-go b { font-size: max(16px, calc(var(--u) * 2.4)); }
#cpModal .pf-link { min-height: 44px; padding: 0; border: 0; background: none; color: #fff; font: 800 max(13px, calc(var(--u) * 1.7))/1 var(--fc); letter-spacing: 0.8px; text-transform: uppercase; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

/* ─── À DROITE ─── */
#cpModal .pf-main { min-height: 0; min-width: 0; display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); gap: calc(var(--u) * 2.2) calc(var(--u) * 2); }

/* UN FORMAT RANKED (comme le grand panneau du lobby) : sur PC, le grand emblème à gauche, tout le reste à droite ; les
   deux formats alignés ligne à ligne (subgrid : le rang, les chiffres, la marche tombent à la même hauteur) */
#cpModal .pf-rk { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(6, auto); column-gap: calc(var(--u) * 2); row-gap: 0; }
#cpModal .pf-rkc { grid-row: 1 / -1; position: relative; min-width: 0; display: grid; grid-template-rows: subgrid; grid-template-columns: calc(var(--u) * 22.5) minmax(0, 1fr);
  grid-template-areas: "h h" "e t" "e u" "e p" "e x" "f f"; column-gap: calc(var(--u) * 2.2); row-gap: calc(var(--u) * 1.1); padding: calc(var(--u) * 1.4) calc(var(--u) * 2) calc(var(--u) * 1.5); overflow: hidden;
  border: calc(var(--u) * 0.45) solid var(--ink); border-radius: calc(var(--u) * 1.6);
  background: radial-gradient(ellipse 30% 75% at 15% 56%, color-mix(in srgb, var(--t1) 46%, transparent), transparent 72%), linear-gradient(160deg, color-mix(in srgb, var(--t2) 78%, #3A3270), var(--t2) 58%, color-mix(in srgb, var(--t2) 60%, #000));
  box-shadow: inset 0 0 0 calc(var(--u) * 0.3) color-mix(in srgb, var(--t1) 50%, transparent), calc(var(--u) * 0.7) calc(var(--u) * 0.7) 0 var(--ink); }
#cpModal .pf-rkc::before { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.035) 0 calc(var(--u) * 1), transparent calc(var(--u) * 1) calc(var(--u) * 2)); pointer-events: none; }
#cpModal .pf-rkc > * { position: relative; }
/* (l'ambiance de chaque rang, comme au lobby : un reflet qui passe de Gold à Diamond, le feu de Hellborn, la réalité qui
   glitche en Hatred ; rien ne bouge avec « moins de mouvement ») */
#cpModal .pf-rkc::after { content: ''; position: absolute; inset: 0; pointer-events: none; }
#cpModal .pf-rkc:is([data-rk="gold"], [data-rk="platinum"], [data-rk="diamond"])::after { background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, 0.13) 48%, rgba(255, 255, 255, 0.02) 54%, transparent 60%) no-repeat; background-size: 250% 100%; animation: pfReflet 5.5s ease-in-out infinite; }
#cpModal .pf-rkc[data-rk="elite"]::after { background: radial-gradient(ellipse 80% 60% at 50% 110%, rgba(255, 70, 20, 0.38), transparent 70%); animation: hdFire 2.4s ease-in-out infinite alternate; }
#cpModal .pf-rkc[data-rk="top"]::after { inset: -10% 0; background: repeating-linear-gradient(to bottom, transparent 0 37px, rgba(255, 46, 147, 0.16) 37px 40px, transparent 40px 91px, rgba(69, 236, 255, 0.13) 91px 93px, transparent 93px 160px); animation: hdGlitch 2.2s steps(1) infinite; }
@keyframes pfReflet { 0%, 55% { background-position: 120% 0; } 85%, 100% { background-position: -20% 0; } }
@media (prefers-reduced-motion: reduce) { #cpModal .pf-rkc::after { animation: none; } }
/* le haut : le format, la série en cours, la place au classement (ou « Jouer ») */
#cpModal .pf-rkc-h { grid-area: h; display: flex; align-items: center; gap: calc(var(--u) * 1); min-width: 0; }
#cpModal .pf-fmt { flex: none; font: italic 800 max(15px, calc(var(--u) * 2.5))/1 var(--fc); letter-spacing: 0.8px; text-transform: uppercase; color: #fff; text-shadow: var(--out); white-space: nowrap; }
#cpModal .pf-chips { margin-left: auto; display: flex; align-items: center; justify-content: flex-end; gap: calc(var(--u) * 0.8); min-width: 0; }
#cpModal .pf-pos, #cpModal .pf-serie { flex: none; display: inline-flex; align-items: center; gap: calc(var(--u) * 0.45); padding: calc(var(--u) * 0.4) calc(var(--u) * 1.1) calc(var(--u) * 0.5) calc(var(--u) * 0.7); border: calc(var(--u) * 0.3) solid var(--ink); border-radius: 99px;
  box-shadow: calc(var(--u) * 0.3) calc(var(--u) * 0.3) 0 var(--ink); font: italic 800 max(12px, calc(var(--u) * 1.6))/1 var(--fc); letter-spacing: 0.3px; text-transform: uppercase; white-space: nowrap; }
#cpModal .pf-pos { background: linear-gradient(#FFE27A, #E9A928); color: var(--ink); }
#cpModal .pf-pos svg { width: calc(var(--u) * 2); height: calc(var(--u) * 2); min-width: 14px; min-height: 14px; fill: none; stroke: currentColor; stroke-width: 2.4; }
#cpModal .pf-pos b, #cpModal .pf-serie b { font-size: max(15px, calc(var(--u) * 2.3)); }
#cpModal .pf-pos b i { font-style: italic; font-size: max(12px, 0.7em); vertical-align: 0.3em; }
#cpModal .pf-pos small { font: inherit; font-size: max(12px, calc(var(--u) * 1.4)); font-style: normal; opacity: 0.75; }
/* (la série : une pastille de feu, bien visible) */
#cpModal .pf-serie { background: linear-gradient(#FFB347, #FF6A1F); color: #fff; text-shadow: 1px 1px 0 var(--ink); }
#cpModal .pf-serie svg { width: calc(var(--u) * 3.2); height: calc(var(--u) * 3.2); min-width: 20px; min-height: 20px; margin: calc(var(--u) * -0.8) calc(var(--u) * -0.3) calc(var(--u) * -0.8) calc(var(--u) * -0.4); filter: drop-shadow(1px 1px 0 var(--ink)); }
#cpModal .pf-serie svg path:first-child { fill: #FFE27A; }
#cpModal .pf-serie svg path:last-child { fill: #fff; }
#cpModal .pf-jouer { margin-left: auto; display: inline-flex; align-items: center; gap: calc(var(--u) * 0.5); min-height: 36px; padding: calc(var(--u) * 0.4) calc(var(--u) * 1.4) calc(var(--u) * 0.6); border: calc(var(--u) * 0.3) solid var(--ink); border-radius: 99px;
  background: #FFD23F; color: var(--ink); box-shadow: calc(var(--u) * 0.3) calc(var(--u) * 0.3) 0 var(--ink); cursor: pointer; font: italic 800 max(14px, calc(var(--u) * 2))/1 var(--fc); text-transform: uppercase; white-space: nowrap; }
#cpModal .pf-jouer:hover { background: #FFDC5E; transform: translate(-1px, -1px); }
#cpModal .pf-jouer i { font-style: normal; font-size: 1.3em; line-height: 0.8; }
/* le grand emblème (sur PC, à gauche du panneau, sur un halo de sa couleur) */
#cpModal .pf-rkc-top { display: contents; }
#cpModal .pf-emb { grid-area: e; align-self: center; justify-self: center; display: grid; place-items: center; width: 100%; aspect-ratio: 1; contain: size; border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--t1) 34%, transparent) 0, transparent 66%); }
#cpModal .pf-emb .rk-emb { width: 100%; height: 100%; filter: drop-shadow(0 0 calc(var(--u) * 2.2) color-mix(in srgb, var(--t1) 55%, transparent)) drop-shadow(calc(var(--u) * 0.5) calc(var(--u) * 0.6) 0 rgba(0, 0, 0, 0.55)); }
#cpModal .pf-rkc.placing .pf-emb { width: 78%; }
#cpModal .pf-rkc-t { grid-area: t; align-self: end; min-width: 0; display: flex; flex-direction: column; gap: calc(var(--u) * 0.7); }
#cpModal .pf-rkn { padding: 0 calc(var(--u) * 0.5) calc(var(--u) * 0.4) 0; font: italic 800 calc(var(--u) * 6.2)/0.92 var(--fc); text-transform: uppercase; color: var(--t1); letter-spacing: 0.5px;
  text-shadow: 3px 3px 0 var(--ink), -2px -2px 0 var(--ink), 2px -2px 0 var(--ink), -2px 2px 0 var(--ink), 0 4px 0 var(--ink); white-space: nowrap; }
#cpModal .pf-rkn.l { font-size: calc(var(--u) * 5.4); }
#cpModal .pf-rkc.placing .pf-rkn { color: #fff; font-size: calc(var(--u) * 4.6); }
#cpModal .pf-rkc-sub { font: 700 max(13px, calc(var(--u) * 2))/1 var(--fc); letter-spacing: 1px; text-transform: uppercase; color: rgba(255, 255, 255, 0.8); }
#cpModal .pf-rkc-sub b { font: italic 800 max(18px, calc(var(--u) * 3.6))/1 var(--fc); letter-spacing: 0; color: #fff; text-shadow: 2px 2px 0 var(--ink); }
#cpModal .pf-nums { grid-area: u; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: calc(var(--u) * 0.8); }
#cpModal .pf-nums > span { display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: calc(var(--u) * 0.4); padding: calc(var(--u) * 0.7) calc(var(--u) * 0.4) calc(var(--u) * 0.8); border: calc(var(--u) * 0.3) solid var(--ink); border-radius: calc(var(--u) * 1); background: rgba(0, 0, 0, 0.4); min-width: 0; text-align: center; }
#cpModal .pf-nums small { font: 700 max(12px, calc(var(--u) * 1.45))/1.05 var(--fc); letter-spacing: 0.6px; text-transform: uppercase; color: var(--t3); }
#cpModal .pf-nums b { font: italic 800 max(16px, calc(var(--u) * 2.8))/1 var(--fc); color: #fff; white-space: nowrap; }
#cpModal .pf-nums b i, #cpModal .pf-tiles b i { font-style: italic; font-size: max(12px, 0.7em); }
/* la marche : les divisions I, II, III, puis l'emblème du rang d'après ; Hatred : « ★ Rang max ★ » */
#cpModal .pf-steps { grid-area: p; display: flex; align-items: center; gap: calc(var(--u) * 0.6); }
#cpModal .pf-steps > i { position: relative; flex: 1; height: calc(var(--u) * 2.6); min-height: 18px; overflow: hidden; box-sizing: border-box; border: calc(var(--u) * 0.3) solid var(--ink); border-radius: 99px; background: rgba(0, 0, 0, 0.45); }
#cpModal .pf-steps > i > b { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(90deg, color-mix(in srgb, var(--t1) 70%, #fff), var(--t1)); }
#cpModal .pf-steps > i > em { position: absolute; inset: 0; display: grid; place-items: center; font: italic 800 max(12px, calc(var(--u) * 1.5))/1 var(--fc); color: #fff; text-shadow: 1px 1px 0 var(--ink), -1px -1px 0 var(--ink), 1px -1px 0 var(--ink), -1px 1px 0 var(--ink); }
#cpModal .pf-steps > i.full > em { color: var(--ink); text-shadow: none; }
#cpModal .pf-steps > i.top > em { font-size: max(12px, calc(var(--u) * 1.75)); color: #fff; letter-spacing: 1.5px; text-transform: uppercase; text-shadow: 1px 1px 0 var(--ink), -1px -1px 0 var(--ink), 1px -1px 0 var(--ink), -1px 1px 0 var(--ink); }
#cpModal .pf-nx { flex: none; width: calc(var(--u) * 4.4); height: calc(var(--u) * 4.4); min-width: 26px; min-height: 26px; }
#cpModal .pf-nx .rk-emb { width: 100%; height: 100%; }
#cpModal .pf-next { grid-area: x; margin: 0; font: 700 max(12px, calc(var(--u) * 1.8))/1.15 var(--fc); letter-spacing: 0.8px; text-transform: uppercase; color: var(--t3); }
#cpModal .pf-next b { color: #fff; }
/* le bas : le bilan du jour, les records de la saison */
#cpModal .pf-rkc-f { grid-area: f; display: flex; flex-wrap: wrap; align-items: center; gap: calc(var(--u) * 0.6) calc(var(--u) * 2.4); margin: 0; padding-top: calc(var(--u) * 1); border-top: 2px dashed rgba(255, 255, 255, 0.2);
  font: 700 max(12px, calc(var(--u) * 1.7))/1.1 var(--fc); letter-spacing: 0.8px; text-transform: uppercase; color: rgba(255, 255, 255, 0.8); }
#cpModal .pf-rkc-f:empty { display: none; }
#cpModal .pf-rkc-f b { font: italic 800 1.3em/1 var(--fc); color: #fff; }
#cpModal .pf-rkc-f b.up { color: #6BF0A4; }
#cpModal .pf-rkc-f b.dn { color: #FF8C80; }
#cpModal .pf-rkc-f > span { white-space: nowrap; }
/* le placement : ses cases, la plus récente à droite */
#cpModal .pf-dots { grid-area: u; align-self: center; display: flex; gap: calc(var(--u) * 0.6); }
#cpModal .pf-dots i { flex: 1; display: grid; place-items: center; height: calc(var(--u) * 3.6); min-height: 20px; box-sizing: border-box; border: calc(var(--u) * 0.3) solid rgba(255, 255, 255, 0.22); border-radius: calc(var(--u) * 0.8); background: rgba(0, 0, 0, 0.3); font: normal 800 max(12px, calc(var(--u) * 1.9))/1 var(--fc); color: var(--ink); }
#cpModal .pf-dots i.v, #cpModal .pf-dots i.d, #cpModal .pf-dots i.n, #cpModal .pf-dots i.x { border-style: solid; border-color: var(--ink); }
#cpModal .pf-dots i.v { background: #3DDC84; }
#cpModal .pf-dots i.d { background: #FF6B5E; }
#cpModal .pf-dots i.n, #cpModal .pf-dots i.x { background: #CFC9BC; }
/* (l'échelle des rangs, sous les cases du placement : les emblèmes de Bronze à Hatred, de plus en plus grands) */
#cpModal .pf-ladder { grid-area: p; display: flex; align-items: flex-end; justify-content: space-between; gap: calc(var(--u) * 0.4); padding: calc(var(--u) * 0.8) calc(var(--u) * 1.2) calc(var(--u) * 0.6); border-radius: calc(var(--u) * 1.2); background: rgba(0, 0, 0, 0.3); }
#cpModal .pf-ladder span { flex: none; width: calc(var(--u) * 4.2); aspect-ratio: 1; opacity: 0.9; }
#cpModal .pf-ladder span:nth-of-type(n+5) { width: calc(var(--u) * 5); }
#cpModal .pf-ladder span:last-of-type { width: calc(var(--u) * 5.8); }
#cpModal .pf-ladder .rk-emb { width: 100%; height: 100%; }
#cpModal .pf-ladder i { flex: 1; height: 2px; margin-bottom: calc(var(--u) * 2); background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.35) 0 4px, transparent 4px 8px); }

/* ─── LES PANNEAUX DU BAS : rayés aux couleurs du menu, leur titre dans un bandeau, des cartes crème à l'encre ─── */
#cpModal .pf-pan { --pc: var(--c-pp); --pd: var(--c-pp-d); position: relative; min-height: 0; min-width: 0; display: flex; flex-direction: column; overflow: hidden;
  border: calc(var(--u) * 0.45) solid var(--ink); border-radius: calc(var(--u) * 1.6);
  background: repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.035) 0 calc(var(--u) * 1), transparent calc(var(--u) * 1) calc(var(--u) * 2)), linear-gradient(to bottom, color-mix(in srgb, var(--pd) 70%, #17123F), color-mix(in srgb, var(--pd) 30%, #120E33));
  box-shadow: inset 0 0 0 calc(var(--u) * 0.25) color-mix(in srgb, var(--pc) 35%, transparent), calc(var(--u) * 0.7) calc(var(--u) * 0.7) 0 var(--ink); }
#cpModal .pf-st { --pc: var(--c-pp); --pd: var(--c-pp-d); }
#cpModal .pf-fav { --pc: var(--c-br); --pd: var(--c-br-d); }
#cpModal .pf-hi { --pc: var(--c-std); --pd: var(--c-std-d); }
#cpModal .pf-ph { flex: none; display: flex; align-items: center; gap: calc(var(--u) * 1); margin: 0; padding: calc(var(--u) * 0.9) calc(var(--u) * 1.4) calc(var(--u) * 1) calc(var(--u) * 1.2); border-bottom: calc(var(--u) * 0.4) solid var(--ink);
  background: repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.13) 0 calc(var(--u) * 1), rgba(255, 255, 255, 0) calc(var(--u) * 1) calc(var(--u) * 2)), linear-gradient(to bottom, color-mix(in srgb, var(--pc) 88%, #fff), color-mix(in srgb, var(--pc) 60%, var(--pd)));
  box-shadow: inset 0 calc(var(--u) * -0.5) 0 rgba(0, 0, 0, 0.18); font: italic 800 max(15px, calc(var(--u) * 2.5))/1 var(--fc); letter-spacing: 0.6px; text-transform: uppercase; color: #fff; text-shadow: var(--out); }
#cpModal .pf-ph > span:not(.pf-hi-b) { flex: 1; min-width: 0; }
#cpModal .pf-ico { flex: none; display: grid; place-items: center; width: calc(var(--u) * 3.2); height: calc(var(--u) * 3.2); min-width: 20px; min-height: 20px; }
#cpModal .pf-ico svg { width: 100%; height: 100%; filter: drop-shadow(1px 1px 0 var(--ink)); }
#cpModal .pf-pan > :not(.pf-ph) { margin-left: calc(var(--u) * 1.5); margin-right: calc(var(--u) * 1.5); }
#cpModal .pf-pan > .pf-ph + * { margin-top: calc(var(--u) * 1.4); }
#cpModal .pf-pan > :last-child:not(.pf-ph) { margin-bottom: calc(var(--u) * 1.6); }
#cpModal .pf-sub { flex: none; margin-top: calc(var(--u) * 1.6); margin-bottom: calc(var(--u) * 0.9); font: 800 max(12px, calc(var(--u) * 1.6))/1 var(--fc); letter-spacing: calc(var(--u) * 0.2); text-transform: uppercase; color: rgba(255, 255, 255, 0.78); }
/* LES STATISTIQUES : six cartes crème, leur picto, le chiffre en grand */
#cpModal .pf-tiles { flex: 1 0 auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: calc(var(--u) * 1); }
#cpModal .pf-tiles > div { min-width: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "i b" "s s"; align-items: center; align-content: center; gap: calc(var(--u) * 0.5) calc(var(--u) * 0.8); padding: calc(var(--u) * 0.8) calc(var(--u) * 1);
  border: calc(var(--u) * 0.35) solid var(--ink); border-radius: calc(var(--u) * 1.1); background: var(--creme); color: var(--ink); box-shadow: calc(var(--u) * 0.35) calc(var(--u) * 0.35) 0 var(--ink); }
#cpModal .pf-tiles .pf-ico { grid-area: i; width: calc(var(--u) * 3); height: calc(var(--u) * 3); }
#cpModal .pf-tiles b { grid-area: b; font: italic 800 max(18px, calc(var(--u) * 3.2))/1 var(--fc); color: var(--ink); white-space: nowrap; }
#cpModal .pf-tiles > div > span { grid-area: s; font: 700 max(12px, calc(var(--u) * 1.4))/1.05 var(--fc); letter-spacing: 0.4px; text-transform: uppercase; color: rgba(21, 21, 21, 0.64); }
/* les victoires par mode : chaque case à la couleur de son onglet au menu */
#cpModal .pf-modes { flex: 1 0 auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: calc(var(--u) * 1); }
#cpModal .pf-modes > div { --mc: var(--c-std); --md: var(--c-std-d); min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; align-content: center; gap: calc(var(--u) * 0.5) calc(var(--u) * 0.6); padding: calc(var(--u) * 0.7) calc(var(--u) * 1) calc(var(--u) * 0.9);
  border: calc(var(--u) * 0.35) solid var(--ink); border-radius: calc(var(--u) * 1.1); color: #fff; box-shadow: calc(var(--u) * 0.35) calc(var(--u) * 0.35) 0 var(--ink);
  background: repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.11) 0 calc(var(--u) * 0.8), rgba(255, 255, 255, 0) calc(var(--u) * 0.8) calc(var(--u) * 1.6)), linear-gradient(to bottom, color-mix(in srgb, var(--mc) 80%, #fff), var(--md)); }
#cpModal .pf-modes > .pf-m-rk { --mc: var(--c-rk); --md: var(--c-rk-d); }
#cpModal .pf-modes > .pf-m-br { --mc: var(--c-br); --md: var(--c-br-d); }
#cpModal .pf-modes > .pf-m-pp { --mc: var(--c-pp); --md: var(--c-pp-d); }
#cpModal .pf-modes > div.none { filter: saturate(0.35) brightness(0.8); }
#cpModal .pf-modes span { display: flex; flex-direction: column; gap: calc(var(--u) * 0.25); min-width: 0; font: italic 800 max(13px, calc(var(--u) * 2))/1 var(--fc); text-transform: uppercase; color: #fff; text-shadow: var(--out); white-space: nowrap; }
#cpModal .pf-modes span small { font: 700 max(12px, calc(var(--u) * 1.4))/1 var(--fc); font-style: normal; letter-spacing: 0.6px; color: rgba(255, 255, 255, 0.85); text-shadow: 1px 1px 0 var(--ink); }
#cpModal .pf-modes b { display: flex; flex-direction: column; align-items: flex-end; gap: calc(var(--u) * 0.2); font: italic 800 max(15px, calc(var(--u) * 2.4))/1 var(--fc); color: #fff; text-shadow: var(--out); white-space: nowrap; }
#cpModal .pf-modes b small { font: 700 max(12px, calc(var(--u) * 1.4))/1 var(--fc); font-style: normal; color: rgba(255, 255, 255, 0.82); text-shadow: 1px 1px 0 var(--ink); }
#cpModal .pf-mbar { grid-column: 1 / -1; display: block; height: calc(var(--u) * 1); min-height: 6px; box-sizing: border-box; border: 2px solid var(--ink); border-radius: 99px; background: rgba(0, 0, 0, 0.4); overflow: hidden; }
#cpModal .pf-mbar i { display: block; height: 100%; background: linear-gradient(90deg, #FFB800, #FFE27A); }
/* SES BALLES : une carte crème par balle, son portrait et son niveau, la barre d'XP, ses chiffres ; « Toutes » */
#cpModal .pf-all { flex: none; display: inline-flex; align-items: center; gap: calc(var(--u) * 0.5); min-height: 34px; padding: calc(var(--u) * 0.3) calc(var(--u) * 1.2) calc(var(--u) * 0.4); border: calc(var(--u) * 0.3) solid var(--ink); border-radius: calc(var(--u) * 0.9);
  background: var(--card); color: var(--ink); box-shadow: calc(var(--u) * 0.3) calc(var(--u) * 0.3) 0 var(--ink); cursor: pointer; font: italic 800 max(13px, calc(var(--u) * 1.8))/1 var(--fc); letter-spacing: 0.4px; text-transform: uppercase; text-shadow: none; white-space: nowrap; }
#cpModal .pf-all:hover { background: #fff; transform: translate(-1px, -1px); }
#cpModal .pf-all b { font-size: 1.15em; }
#cpModal .pf-favs { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: calc(var(--u) * 1); }
#cpModal .pf-fv { flex: 1 1 0; max-height: calc(var(--u) * 14); display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: calc(var(--u) * 1.4); padding: calc(var(--u) * 0.8) calc(var(--u) * 1.4) calc(var(--u) * 0.8) calc(var(--u) * 1);
  border: calc(var(--u) * 0.35) solid var(--ink); border-radius: calc(var(--u) * 1.2); background: var(--creme); color: var(--ink); box-shadow: calc(var(--u) * 0.35) calc(var(--u) * 0.35) 0 var(--ink); }
#cpModal .pf-fpic { position: relative; display: block; width: calc(var(--u) * 7.6); height: calc(var(--u) * 7.6); min-width: 38px; min-height: 38px; box-sizing: border-box; border: calc(var(--u) * 0.4) solid var(--ink); border-radius: 50%; background: #E7E2D8; box-shadow: calc(var(--u) * 0.3) calc(var(--u) * 0.3) 0 var(--ink); }
#cpModal .pf-fpic img, #cpModal .pf-gpic img { display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
#cpModal .pf-fnv { position: absolute; right: calc(var(--u) * -1); bottom: calc(var(--u) * -0.7); display: grid; place-items: center; min-width: calc(var(--u) * 3.4); height: calc(var(--u) * 3.4); min-height: 22px; box-sizing: border-box; padding: 0 calc(var(--u) * 0.4);
  border: calc(var(--u) * 0.3) solid var(--ink); border-radius: 99px; background: radial-gradient(circle at 35% 30%, #FFF1A6, #FFD23F 55%, #E9A928); color: var(--ink); font: italic 800 max(12px, calc(var(--u) * 1.7))/1 var(--fc); }
#cpModal .pf-star { position: absolute; left: calc(var(--u) * -0.8); top: calc(var(--u) * -0.8); display: grid; place-items: center; width: calc(var(--u) * 2.8); height: calc(var(--u) * 2.8); min-width: 20px; min-height: 20px; border: 2px solid var(--ink); border-radius: 50%; background: #FF6A1F; color: #fff; font: normal 800 max(12px, calc(var(--u) * 1.5))/1 var(--fc); }
#cpModal .pf-fvt { display: flex; flex-direction: column; gap: calc(var(--u) * 0.55); min-width: 0; }
#cpModal .pf-fn { font: italic 800 max(15px, calc(var(--u) * 2.4))/1 var(--fc); text-transform: uppercase; color: var(--ink); }
#cpModal .pf-fxp { display: flex; align-items: center; gap: calc(var(--u) * 0.8); min-width: 0; }
#cpModal .pf-fxp .pf-bar { flex: 1; min-width: calc(var(--u) * 4); }
#cpModal .pf-fl { flex: none; font: italic 800 max(12px, calc(var(--u) * 1.6))/1 var(--fc); letter-spacing: 0.4px; text-transform: uppercase; color: #6A2BC2; }
#cpModal .pf-fx { flex: none; font: 700 max(12px, calc(var(--u) * 1.35))/1 var(--fc); letter-spacing: 0.3px; color: rgba(21, 21, 21, 0.6); }
#cpModal .pf-fst { font: 700 max(12px, calc(var(--u) * 1.45))/1.2 var(--fc); letter-spacing: 0.4px; text-transform: uppercase; color: rgba(21, 21, 21, 0.62); }
#cpModal .pf-fst b { font: italic 800 1.15em/1 var(--fc); color: var(--ink); }
#cpModal .nw { white-space: nowrap; }
/* (rien encore, et toutes ses balles) */
#cpModal .pf-empty { margin: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(var(--u) * 1.2); padding: calc(var(--u) * 1.4); border: calc(var(--u) * 0.3) dashed rgba(255, 255, 255, 0.3); border-radius: calc(var(--u) * 1.2);
  font: 600 max(12px, calc(var(--u) * 1.6))/1.35 var(--fb); color: rgba(255, 255, 255, 0.82); text-align: center; }
#cpModal .pf-empty p { margin: 0; }
#cpModal .pf-empty p b { color: #FFD23F; }
#cpModal .pf-favs .pf-empty, #cpModal .pf-empty-g { flex: 1; }
#cpModal .pf-fv[hidden] { display: none; }
#cpModal .pf-favs > .pf-fv:nth-child(n+4) { display: none; }
/* (le sien, moins de 3 balles : les places libres, en pointillés) */
#cpModal .pf-fv-vide { border-style: dashed; border-color: rgba(255, 255, 255, 0.45); background: rgba(255, 255, 255, 0.06); color: #fff; box-shadow: none; }
#cpModal .pf-fv-vide .pf-fpic { display: grid; place-items: center; border-style: dashed; border-color: rgba(255, 255, 255, 0.5); background: rgba(0, 0, 0, 0.25); box-shadow: none; }
#cpModal .pf-fv-vide .pf-fpic b { font: italic 800 calc(var(--u) * 3.6)/1 var(--fc); color: rgba(255, 255, 255, 0.75); }
#cpModal .pf-fv-vide .pf-fn { color: #fff; }
#cpModal .pf-fv-vide .pf-fst { color: rgba(255, 255, 255, 0.72); text-transform: none; font-family: var(--fb); font-weight: 600; letter-spacing: 0; }
#cpModal .pf-fv-vide .pf-fst b { font: inherit; color: #FFD23F; font-weight: 800; }
/* (un compte neuf, à la place des dernières parties : ses premiers objectifs, et « Jouer ») */
#cpModal .pf-objs { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: calc(var(--u) * 1); }
#cpModal .pf-objs .pf-sub { margin-top: 0; }
#cpModal .pf-obj { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: calc(var(--u) * 1.2); padding: calc(var(--u) * 1) calc(var(--u) * 1.4) calc(var(--u) * 1) calc(var(--u) * 1); border: calc(var(--u) * 0.35) solid var(--ink); border-radius: calc(var(--u) * 1.1);
  background: var(--creme); color: var(--ink); box-shadow: calc(var(--u) * 0.35) calc(var(--u) * 0.35) 0 var(--ink); }
#cpModal .pf-obj > i { display: grid; place-items: center; width: calc(var(--u) * 3.6); height: calc(var(--u) * 3.6); min-width: 24px; min-height: 24px; box-sizing: border-box; border: calc(var(--u) * 0.3) solid var(--ink); border-radius: 50%; background: #fff; font: normal 800 max(14px, calc(var(--u) * 2))/1 var(--fc); }
#cpModal .pf-obj.fait > i { background: #3DDC84; }
#cpModal .pf-obj > span { display: flex; flex-direction: column; gap: calc(var(--u) * 0.6); min-width: 0; }
#cpModal .pf-obj b { font: italic 800 max(14px, calc(var(--u) * 1.9))/1.1 var(--fc); text-transform: uppercase; }
#cpModal .pf-obj small { font: italic 800 max(14px, calc(var(--u) * 2))/1 var(--fc); color: rgba(21, 21, 21, 0.7); white-space: nowrap; }
#cpModal .pf-objs .pf-go-jouer { align-self: center; margin-top: auto; }
#cpModal .pf-go-jouer { padding: calc(var(--u) * 0.6) calc(var(--u) * 3) calc(var(--u) * 0.8); }
#cpModal .pf-go-jouer b { font-size: max(18px, calc(var(--u) * 2.8)); }
/* LES DERNIÈRES PARTIES : une ligne crème par partie, son résultat en couleur à gauche */
#cpModal .pf-hi-b { flex: none; padding: calc(var(--u) * 0.35) calc(var(--u) * 0.9) calc(var(--u) * 0.45); border: calc(var(--u) * 0.3) solid var(--ink); border-radius: 99px; background: rgba(10, 7, 28, 0.75); font: italic 800 max(13px, calc(var(--u) * 1.8))/1 var(--fc); letter-spacing: 0.5px; color: #fff; text-shadow: none; white-space: nowrap; }
#cpModal .pf-hi-b:empty { display: none; }
#cpModal .pf-hi-b b.up { color: #6BF0A4; }
#cpModal .pf-hi-b b.dn { color: #FF8C80; }
#cpModal .pf-games { flex: 1; list-style: none; margin: 0; padding: 0 0 calc(var(--u) * 0.4); display: flex; flex-direction: column; gap: calc(var(--u) * 0.7); min-height: 0; overflow: hidden; }
#cpModal .pf-games li { position: relative; flex: none; display: grid; grid-template-columns: calc(var(--u) * 4.6) calc(var(--u) * 4.4) minmax(0, 1fr) auto; align-items: center; gap: calc(var(--u) * 1); min-height: calc(var(--u) * 5.4); padding: 0 calc(var(--u) * 1.1) 0 0; overflow: hidden;
  border: calc(var(--u) * 0.3) solid var(--ink); border-radius: calc(var(--u) * 1); background: var(--creme); color: var(--ink); box-shadow: calc(var(--u) * 0.25) calc(var(--u) * 0.25) 0 var(--ink); }
#cpModal .pf-games li[hidden] { display: none; }
/* (moins de parties que de place : le bas de la liste le dit, au lieu d'un vide) */
#cpModal .pf-games li.pf-fin { flex: 1 1 0; min-height: auto; overflow: visible; display: grid; grid-template-columns: minmax(0, 1fr); place-items: center; padding: calc(var(--u) * 1); border: calc(var(--u) * 0.3) dashed rgba(255, 255, 255, 0.35); background: rgba(255, 255, 255, 0.05); box-shadow: none;
  font: 700 max(12px, calc(var(--u) * 1.5))/1.3 var(--fc); letter-spacing: 0.6px; text-transform: uppercase; color: rgba(255, 255, 255, 0.72); text-align: center; }
#cpModal .pf-gr { align-self: stretch; display: grid; place-items: center; box-sizing: border-box; border-right: calc(var(--u) * 0.3) solid var(--ink); background: #CFC9BC; color: var(--ink); font: italic 800 max(14px, calc(var(--u) * 2.2))/1 var(--fc); }
#cpModal .pf-games li.win .pf-gr { background: #3DDC84; }
#cpModal .pf-games li.loss .pf-gr { background: #FF6B5E; }
#cpModal .pf-games li.top .pf-gr { background: #FFD23F; }
#cpModal .pf-games li.ab .pf-gr { background: var(--ink); color: #fff; }
#cpModal .pf-gpic { display: block; width: calc(var(--u) * 4.4); height: calc(var(--u) * 4.4); min-width: 26px; min-height: 26px; box-sizing: border-box; border: calc(var(--u) * 0.3) solid var(--ink); border-radius: 50%; background: #E7E2D8; }
#cpModal .pf-gt { display: flex; flex-direction: column; gap: calc(var(--u) * 0.3); min-width: 0; padding: calc(var(--u) * 0.6) 0; }
#cpModal .pf-gt b { font: italic 800 max(13px, calc(var(--u) * 1.9))/1 var(--fc); letter-spacing: 0.3px; text-transform: uppercase; }
#cpModal .pf-gt small { font: 700 max(12px, calc(var(--u) * 1.4))/1.15 var(--fc); letter-spacing: 0.3px; text-transform: uppercase; color: rgba(21, 21, 21, 0.62); }
#cpModal .pf-gr2 { display: flex; flex-direction: column; align-items: flex-end; gap: calc(var(--u) * 0.35); }
#cpModal .pf-gr2 small { font: 700 max(12px, calc(var(--u) * 1.35))/1 var(--fc); letter-spacing: 0.3px; text-transform: uppercase; color: rgba(21, 21, 21, 0.55); white-space: nowrap; }
#cpModal .pf-gd { font: italic 800 max(13px, calc(var(--u) * 2))/1 var(--fc); text-transform: uppercase; white-space: nowrap; color: rgba(21, 21, 21, 0.7); }
#cpModal .pf-gd.up { color: #0F8A4E; }
#cpModal .pf-gd.dn { color: #C0261B; }
#cpModal .pf-gd.xp { color: #7A4A00; }
#cpModal .pf-gd.pl { font-size: max(12px, calc(var(--u) * 1.5)); letter-spacing: 0.5px; color: #6A2BC2; }
/* L'ENTRÉE (à l'ouverture seulement) : les panneaux arrivent l'un après l'autre, les barres se remplissent */
#cpModal .pf-anim .pf-id, #cpModal .pf-anim .pf-rkc, #cpModal .pf-anim .pf-st, #cpModal .pf-anim .pf-fav, #cpModal .pf-anim .pf-hi { animation: pfIn 0.42s cubic-bezier(0.2, 1.3, 0.4, 1) both; }
#cpModal .pf-anim .pf-rkc:nth-child(1) { animation-delay: 0.06s; }
#cpModal .pf-anim .pf-rkc:nth-child(2) { animation-delay: 0.12s; }
#cpModal .pf-anim .pf-st { animation-delay: 0.18s; }
#cpModal .pf-anim .pf-fav { animation-delay: 0.22s; }
#cpModal .pf-anim .pf-hi { animation-delay: 0.26s; }
#cpModal .pf-anim .pf-steps > i > b, #cpModal .pf-anim .pf-bar i, #cpModal .pf-anim .pf-mbar i { transform-origin: left center; animation: pfBar 0.7s cubic-bezier(0.3, 0.9, 0.3, 1) 0.3s both; }
#cpModal .pf-anim .pf-emb .rk-emb { animation: pfEmb 0.6s cubic-bezier(0.2, 1.5, 0.4, 1) 0.15s both; }
@keyframes pfIn { from { opacity: 0; transform: translateY(calc(var(--u) * 2.4)) scale(0.97); } }
@keyframes pfBar { from { transform: scaleX(0); } }
@keyframes pfEmb { from { opacity: 0; transform: scale(1.5) rotate(-8deg); } }
@media (prefers-reduced-motion: reduce) { #cpModal .pf-anim *, #cpModal .pf-rays { animation: none !important; } }

/* ─── UN PC PEU HAUT (820 px ou moins : 1 366 × 768, 1 280 × 720…) : le bas plus serré, l'échelle des rangs plus petite,
   « 55 % V » dans les balles — tout tient sans rien couper ─── */
@media (max-height: 820px) and (min-height: 521px) {
  #cpModal .pf-pan > .pf-ph + * { margin-top: calc(var(--u) * 1.1); }
  #cpModal .pf-pan > :last-child:not(.pf-ph) { margin-bottom: calc(var(--u) * 1.2); }
  #cpModal .pf-tiles, #cpModal .pf-modes { gap: calc(var(--u) * 0.8); }
  #cpModal .pf-tiles > div { padding: calc(var(--u) * 0.55) calc(var(--u) * 0.9); gap: calc(var(--u) * 0.3) calc(var(--u) * 0.8); }
  #cpModal .pf-modes > div { padding: calc(var(--u) * 0.5) calc(var(--u) * 0.9) calc(var(--u) * 0.7); }
  #cpModal .pf-sub { margin-top: calc(var(--u) * 1.1); margin-bottom: calc(var(--u) * 0.6); }
  #cpModal .pf-ladder { padding-top: calc(var(--u) * 0.5); padding-bottom: calc(var(--u) * 0.4); }
  #cpModal .pf-ladder span { width: calc(var(--u) * 3.6); }
  #cpModal .pf-ladder span:nth-of-type(n+5) { width: calc(var(--u) * 4.2); }
  #cpModal .pf-ladder span:last-of-type { width: calc(var(--u) * 4.8); }
  #cpModal .pf-ladder i { margin-bottom: calc(var(--u) * 1.6); }
  #cpModal .pf-fvt .lg { display: none; }
  #cpModal .pf-fvt .sh { display: inline; }
}
/* (encore plus bas — 1 280 × 720 : les mots courts dans les chiffres, sans l'échelle des rangs) */
@media (max-height: 760px) and (min-height: 521px) {
  #cpModal .pf-tiles .lg, #cpModal .pf-nums .lg { display: none; }
  #cpModal .pf-tiles .sh, #cpModal .pf-nums .sh { display: inline; }
  #cpModal .pf-ladder { display: none; }
  #cpModal .pf-rkc { row-gap: calc(var(--u) * 0.8); padding-top: calc(var(--u) * 1.1); padding-bottom: calc(var(--u) * 1.1); }
  #cpModal .pf-sub { margin-top: calc(var(--u) * 0.8); margin-bottom: calc(var(--u) * 0.5); }
}
/* ─── UNE FENÊTRE DE PC ÉTROITE (moins de 1 180 px de large) : la carte un peu plus étroite, les mots courts ─── */
@media (max-width: 1180px) and (min-height: 521px) {
  #cpModal .pf { grid-template-columns: calc(var(--u) * 34) minmax(0, 1fr); gap: calc(var(--u) * 2); padding: calc(var(--u) * 2); }
  #cpModal .pf-main { gap: calc(var(--u) * 1.8) calc(var(--u) * 1.6); }
  #cpModal .pf-rkc { grid-template-columns: calc(var(--u) * 15) minmax(0, 1fr); column-gap: calc(var(--u) * 1.6); }
  #cpModal .pf-games li { grid-template-columns: calc(var(--u) * 4.6) minmax(0, 1fr) auto; }
  #cpModal .pf-gpic { display: none; }
  #cpModal .pf-pos small, #cpModal .pf-gr2 .lg { display: none; }
  #cpModal .pf-serie .lg, #cpModal .pf-fvt .lg, #cpModal .pf-nums .lg, #cpModal .pf-tiles .lg, #cpModal .pf-rkc-f .lg { display: none; }
  #cpModal .pf-serie .sh, #cpModal .pf-fvt .sh, #cpModal .pf-nums .sh, #cpModal .pf-tiles .sh, #cpModal .pf-rkc-f .sh { display: inline; }
  #cpModal .pf-fx { display: none; }
  #cpModal .pf-modes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ─── AU TÉLÉPHONE COUCHÉ (520 px de haut ou moins) : la fenêtre prend l'écran, sa carte à gauche, trois onglets ─── */
@media (max-height: 520px) {
  #cpModal:has(.pf-box) { padding: max(6px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) max(6px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left)); }
  #cpModal { --u: 4px; }
  #cpModal .lg { display: none; }
  #cpModal .sh { display: inline; }
  #cpModal .pf-box { width: 100%; height: 100%; border-width: 3px; border-radius: 14px; box-shadow: 4px 4px 0 var(--ink); }
  #cpModal .pf-head { gap: 8px; padding: 4px 6px 4px 12px; border-bottom-width: 3px; }
  #cpModal .pf-head h2 { font-size: 22px; }
  #cpModal .pf-hb { width: 40px; height: 40px; min-height: 40px; min-width: 40px; padding: 0; }
  #cpModal .pf-hb span { display: none; }
  #cpModal .pf-back { height: 40px; min-height: 40px; padding: 0 10px; font-size: 15px; }
  #cpModal .pf-x { width: 40px; height: 40px; min-width: 40px; min-height: 40px; font-size: 20px; border-width: 3px; box-shadow: 2px 2px 0 var(--ink); }
  #cpModal .pf-tabs { display: inline-flex; flex: none; border: 3px solid var(--ink); border-radius: 10px; background: var(--card); box-shadow: 2px 2px 0 var(--ink); overflow: hidden; }
  #cpModal .pf-tabs button { min-height: 36px; padding: 0 12px; border: 0; border-left: 2.5px solid var(--ink); background: none; color: var(--ink); font: italic 800 15px/1 var(--fc); letter-spacing: 0.5px; text-transform: uppercase; cursor: pointer; }
  #cpModal .pf-tabs button:first-child { border-left: 0; }
  #cpModal .pf-tabs button[aria-selected="true"] { background: var(--ink); color: #FFD23F; }
  #cpModal .pf { grid-template-columns: 188px minmax(0, 1fr); gap: 10px; padding: 8px 10px 10px; }
  #cpModal .pf-id { gap: 6px; }
  #cpModal .pf-scene { min-height: 70px; border-width: 3px; border-radius: 12px; box-shadow: 3px 3px 0 var(--ink); }
  #cpModal .pf-carte { display: none; }
  #cpModal .pf-heros { position: absolute; left: 50%; top: 50%; display: block; height: 96%; aspect-ratio: 1; translate: -50% -50%; filter: drop-shadow(3px 4px 0 rgba(10, 6, 30, 0.5)); }
  #cpModal .pf-heros .cf-cercle { height: 100%; }
  #cpModal .pf-saison { padding: 3px 9px 4px; border-width: 2.5px; box-shadow: 2px 2px 0 var(--ink); }
  #cpModal .pf-saison b { font-size: 14px; }
  #cpModal .pf-saison small { display: none; }
  #cpModal .pf-hcta { display: inline-flex; flex: none; min-height: 38px; padding: 2px 12px 4px; border-width: 3px; box-shadow: 2px 2px 0 var(--ink); }
  #cpModal .pf-hcta b { font-size: 16px; }
  #cpModal .pf-cta { display: none; }
  #cpModal .pf-eq-c { width: 28px; height: 28px; min-width: 28px; }
  #cpModal .pf-eq-k { width: 20px; height: 29px; min-width: 20px; }
  #cpModal .pf-st-t { display: none; }
  #cpModal .pf-jouer { min-height: 28px; padding: 2px 10px 3px; border-width: 2px; font-size: 14px; box-shadow: 2px 2px 0 var(--ink); }
  #cpModal .pf-nom { font-size: 21px; }
  #cpModal .pf-nom.l { font-size: 19px; }
  #cpModal .pf-nom.xl { font-size: 15px; }
  #cpModal .pf-h { font-size: 12px; }
  #cpModal .pf-h small { display: none; }
  #cpModal .pf-lvb { width: 30px; height: 30px; min-width: 30px; min-height: 30px; border-width: 2.5px; font-size: 15px; box-shadow: 2px 2px 0 var(--ink); }
  #cpModal .pf-lvt b { font-size: 14px; }
  #cpModal .pf-bar { min-height: 8px; border-width: 2px; }
  #cpModal .pf-coffre { min-height: 38px; gap: 6px; padding: 3px 7px 3px 6px; border-width: 2.5px; border-radius: 10px; box-shadow: 2px 2px 0 var(--ink); }
  #cpModal .pf-coffre b { font-size: 15px; }
  #cpModal .pf-coffre > svg { min-width: 24px; width: 24px; }
  /* (sa collection, à un autre : sans le coffre dessiné — le mot « Collection » et ses deux objets tiennent) */
  #cpModal .pf-coll > svg { display: none; }
  #cpModal .pf-cta { gap: 5px; padding: 6px 8px; border-width: 2.5px; border-radius: 10px; }
  #cpModal .pf-cta p { display: none; }
  #cpModal .pf-cta-go { min-height: 38px; padding: 2px 10px 4px; }
  #cpModal .pf-cta-go b { font-size: 16px; }
  #cpModal .pf-link { min-height: 28px; }
  /* (un seul onglet à la fois) */
  #cpModal .pf-main { display: block; overflow: hidden; }
  #cpModal .pf-box[data-tab="rk"] .pf-main > :not([data-pfp="rk"]), #cpModal .pf-box[data-tab="stats"] .pf-main > :not([data-pfp="stats"]), #cpModal .pf-box[data-tab="parties"] .pf-main > :not([data-pfp="parties"]) { display: none; }
  #cpModal .pf-box[data-tab="stats"] .pf-main { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); gap: 10px; height: 100%; }
  /* le Ranked : les deux formats l'un à côté de l'autre, alignés ligne à ligne ; l'emblème prend la hauteur qui reste */
  #cpModal .pf-rk { height: 100%; grid-template-rows: auto minmax(min-content, 1fr) auto auto auto auto; column-gap: 10px; }
  #cpModal .pf-rkc { grid-template-columns: minmax(0, 1fr); grid-template-areas: "h" "t" "u" "p" "x" "f"; row-gap: 5px; padding: 6px 9px 7px; border-width: 3px; border-radius: 12px; box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--t1) 50%, transparent), 3px 3px 0 var(--ink);
    background: radial-gradient(ellipse 40% 50% at 20% 40%, color-mix(in srgb, var(--t1) 42%, transparent), transparent 72%), linear-gradient(160deg, color-mix(in srgb, var(--t2) 78%, #3A3270), var(--t2) 58%, color-mix(in srgb, var(--t2) 60%, #000)); }
  #cpModal .pf-rkc-h { gap: 6px; }
  #cpModal .pf-fmt { font-size: 16px; }
  #cpModal .pf-chips { gap: 5px; }
  #cpModal .pf-pos, #cpModal .pf-serie { padding: 2px 7px 3px 5px; border-width: 2px; box-shadow: 2px 2px 0 var(--ink); gap: 3px; }
  #cpModal .pf-pos b, #cpModal .pf-serie b { font-size: 15px; }
  #cpModal .pf-pos small { display: none; }
  #cpModal .pf-serie svg { width: 19px; height: 19px; min-width: 19px; min-height: 19px; margin: -4px -1px -4px -2px; }
  #cpModal .pf-rkc-top { grid-area: t; display: flex; align-items: center; gap: 8px; min-height: 0; }
  #cpModal .pf-emb { flex: none; width: auto; height: 100%; max-height: 112px; min-height: 0; }
  #cpModal .pf-rkc.placing .pf-emb { width: auto; height: 92%; max-height: 150px; }
  #cpModal .pf-rkc-t { align-self: center; gap: 4px; }
  #cpModal .pf-rkn { font-size: 25px; }
  #cpModal .pf-rkn.l { font-size: 21px; }
  #cpModal .pf-rkc.placing .pf-rkn { font-size: 20px; }
  #cpModal .pf-rkc-sub b { font-size: 18px; }
  #cpModal .pf-nums { gap: 4px; }
  #cpModal .pf-nums > span { padding: 3px 2px 4px; border-width: 2px; border-radius: 7px; gap: 2px; }
  #cpModal .pf-nums small { letter-spacing: 0; }
  #cpModal .pf-nums b { font-size: 16px; }
  #cpModal .pf-steps > i { height: 18px; border-width: 2px; }
  #cpModal .pf-nx { width: 24px; height: 24px; min-width: 24px; min-height: 24px; }
  #cpModal .pf-next { letter-spacing: 0.4px; }
  #cpModal .pf-rkc-f { padding-top: 4px; gap: 3px 12px; letter-spacing: 0.3px; flex-wrap: nowrap; }
  #cpModal .pf-rkc-f:has(.pf-jour) .pf-recf { display: none; }
  #cpModal .pf-dots { gap: 3px; }
  #cpModal .pf-dots i { min-height: 20px; border-width: 2px; border-radius: 5px; }
  #cpModal .pf-ladder { display: none; }
  /* les panneaux du bas */
  #cpModal .pf-pan { border-width: 3px; border-radius: 12px; box-shadow: 3px 3px 0 var(--ink); }
  #cpModal .pf-ph { gap: 6px; padding: 4px 6px 5px 8px; border-bottom-width: 3px; font-size: 15px; }
  #cpModal .pf-ph .pf-ico { width: 20px; height: 20px; }
  #cpModal .pf-pan > :not(.pf-ph) { margin-left: 7px; margin-right: 7px; }
  #cpModal .pf-pan > .pf-ph + * { margin-top: 7px; }
  #cpModal .pf-pan > :last-child:not(.pf-ph) { margin-bottom: 8px; }
  #cpModal .pf-st > .pf-ph + * { margin-top: 8px; }
  #cpModal .pf-sub { margin-top: 7px; margin-bottom: 5px; letter-spacing: 1px; }
  #cpModal .pf-tiles { gap: 5px; }
  #cpModal .pf-tiles > div { padding: 3px 6px 4px; border-width: 2px; border-radius: 8px; box-shadow: 2px 2px 0 var(--ink); gap: 1px 5px; }
  #cpModal .pf-tiles .pf-ico { width: 16px; height: 16px; min-width: 16px; min-height: 16px; }
  #cpModal .pf-tiles b { font-size: 17px; }
  #cpModal .pf-tiles > div > span { letter-spacing: 0.2px; }
  #cpModal .pf-modes { gap: 5px; }
  #cpModal .pf-modes > div { padding: 3px 6px 4px; gap: 2px 4px; border-width: 2px; border-radius: 8px; box-shadow: 2px 2px 0 var(--ink); }
  #cpModal .pf-modes span { font-size: 13px; }
  #cpModal .pf-modes b { font-size: 15px; }
  #cpModal .pf-modes b small { display: none; }
  #cpModal .pf-mbar { min-height: 6px; border-width: 1.5px; }
  #cpModal .pf-all { min-height: 28px; padding: 1px 8px 2px; border-width: 2px; font-size: 13px; box-shadow: 2px 2px 0 var(--ink); }
  #cpModal .pf-favs { gap: 6px; }
  #cpModal .pf-favs { overflow: hidden; padding-bottom: 2px; }
  #cpModal .pf-favs > .pf-fv:nth-child(n+4):not([hidden]) { display: grid; }
  #cpModal .pf-fv { flex: none; gap: 8px; padding: 4px 7px 4px 5px; border-width: 2px; border-radius: 9px; max-height: none; box-shadow: 2px 2px 0 var(--ink); }
  #cpModal .pf-fv-vide { box-shadow: none; }
  #cpModal .pf-obj { gap: 7px; padding: 4px 8px 4px 5px; border-width: 2px; border-radius: 8px; box-shadow: 2px 2px 0 var(--ink); }
  #cpModal .pf-obj > i { width: 22px; height: 22px; min-width: 22px; min-height: 22px; border-width: 2px; }
  #cpModal .pf-obj b { font-size: 13px; }
  #cpModal .pf-objs { gap: 5px; }
  #cpModal .pf-fpic { width: 40px; height: 40px; border-width: 2px; box-shadow: 2px 2px 0 var(--ink); }
  #cpModal .pf-fnv { min-width: 20px; height: 20px; min-height: 20px; right: -6px; bottom: -5px; border-width: 2px; font-size: 12px; }
  #cpModal .pf-star { width: 18px; height: 18px; min-width: 18px; min-height: 18px; left: -6px; top: -6px; font-size: 12px; }
  #cpModal .pf-fvt { gap: 3px; }
  #cpModal .pf-fn { font-size: 15px; }
  #cpModal .pf-fx { display: none; }
  #cpModal .pf-fst { letter-spacing: 0.2px; }
  #cpModal .pf-go-jouer { min-height: 38px; padding: 2px 16px 4px; border-width: 3px; box-shadow: 3px 3px 0 var(--ink); }
  #cpModal .pf-go-jouer b { font-size: 18px; }
  #cpModal .pf-empty { padding: 8px; border-width: 2px; gap: 6px; }
  /* les dernières parties : deux colonnes ; le résultat posé sur le portrait */
  #cpModal .pf-hi { height: 100%; box-sizing: border-box; }
  #cpModal .pf-games { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: min-content; gap: 5px 8px; padding-bottom: 3px; }
  #cpModal .pf-games li.pf-fin { display: none; }
  #cpModal .pf-games li { grid-template-columns: 34px minmax(0, 1fr) auto; gap: 7px; min-height: 40px; padding: 0 7px 0 3px; border-width: 2px; border-radius: 8px; box-shadow: 2px 2px 0 var(--ink); }
  #cpModal .pf-gpic { width: 32px; height: 32px; min-width: 32px; min-height: 32px; border-width: 2px; }
  #cpModal .pf-gr { position: absolute; left: 1px; bottom: 1px; z-index: 1; min-width: 20px; height: 18px; padding: 0 3px; border: 2px solid var(--ink); border-radius: 6px; font-size: 12px; font-style: normal; }
  #cpModal .pf-gt { padding: 3px 0; gap: 2px; }
  #cpModal .pf-gt b { font-size: 13px; }
  #cpModal .pf-gr2 { gap: 2px; }
  #cpModal .pf-gd { font-size: 13px; }
}
/* (un téléphone assez haut — 844 × 390 : l'échelle des rangs revient sous les cases du placement) */
@media (min-height: 370px) and (max-height: 520px) {
  #cpModal .pf-ladder { display: flex; padding: 4px 8px 3px; gap: 2px; border-radius: 9px; }
  #cpModal .pf-ladder span { width: 22px; }
  #cpModal .pf-ladder span:nth-of-type(n+5) { width: 26px; }
  #cpModal .pf-ladder span:last-of-type { width: 30px; }
  #cpModal .pf-ladder i { margin-bottom: 9px; }
}
@media (max-height: 340px) {
  #cpModal .pf { grid-template-columns: 166px minmax(0, 1fr); gap: 8px; padding: 6px 8px 8px; }
  #cpModal .pf-head h2 { font-size: 20px; }
  #cpModal .pf-tabs button { min-height: 32px; padding: 0 9px; font-size: 14px; }
  #cpModal .pf-hb, #cpModal .pf-x { width: 36px; height: 36px; min-width: 36px; min-height: 36px; }
  #cpModal .pf-back { height: 36px; min-height: 36px; padding: 0 8px; font-size: 14px; }
  #cpModal .pf-rkn { font-size: 22px; }
  #cpModal .pf-rkc { row-gap: 4px; padding: 5px 8px 6px; }
  #cpModal .pf-nums b { font-size: 15px; }
  #cpModal .pf-steps > i { height: 17px; }
  #cpModal .pf-lv { gap: 6px; }
  #cpModal .pf-coffre { min-height: 34px; }
  #cpModal .pf-tiles b { font-size: 16px; }
  #cpModal .pf-sub { display: none; }
  #cpModal .pf-fpic { width: 36px; height: 36px; min-width: 36px; min-height: 36px; }
  /* (les autres fenêtres du compte, sur un téléphone très bas : la note du bas laisse la place aux réglages) */
  #cpModal .cp-sec-foot small { display: none; }
}
@media (max-width: 700px) and (max-height: 520px) {
  #cpModal .pf-head h2 { display: none; }
}

/* ─── LES AUTRES FENÊTRES DU COMPTE (créer un compte, se connecter, mot de passe oublié, le code de secours, « Ton compte »,
   toutes ses balles) : la même nuit que le profil, mesurées en --u comme lui (elles grandissent avec l'écran) ; ouvertes
   depuis le profil, elles se posent PAR-DESSUS (#cpSous) et y ramènent ─── */
#cpModal .cp-sous { position: absolute; inset: 0; z-index: 5; display: grid; place-items: center; box-sizing: border-box; padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left)); background: rgba(8, 6, 24, 0.66); }
#cpModal .cp-sous[hidden] { display: none; }
#cpModal .cp-sous > .cp-box { animation: cpSous 0.28s cubic-bezier(0.2, 1.3, 0.4, 1) both; }
@keyframes cpSous { from { opacity: 0; transform: translateY(14px) scale(0.97); } }
@media (prefers-reduced-motion: reduce) { #cpModal .cp-sous > .cp-box { animation: none; } }
#cpModal .cp-box:not(.pf-box) { max-height: 100%; padding: 0 calc(var(--u) * 2.6) calc(var(--u) * 2.4); border: calc(var(--u) * 0.5) solid var(--ink); border-radius: calc(var(--u) * 2); box-shadow: calc(var(--u) * 1) calc(var(--u) * 1) 0 var(--ink); color: #fff;
  background: radial-gradient(ellipse 70% 60% at 30% 30%, rgba(120, 90, 255, 0.22), transparent 70%), linear-gradient(160deg, #2E2368, #17123F 58%, #0D0A25); }
#cpModal .cp-guest-box { width: min(100%, max(760px, calc(var(--u) * 108))); }
#cpModal .cp-secu-box { width: min(100%, max(720px, calc(var(--u) * 104))); }
#cpModal .cp-code-box { width: min(100%, max(620px, calc(var(--u) * 84))); }
#cpModal .cp-balles-box { width: min(100%, calc(var(--u) * 150)); max-height: min(100%, calc(var(--u) * 96)); }
#cpModal .cp-box:not(.pf-box) > .cp-head { flex: none; margin: 0 calc(var(--u) * -2.6) calc(var(--u) * 1.8); padding: calc(var(--u) * 1.2) calc(var(--u) * 1.6) calc(var(--u) * 1.2) calc(var(--u) * 2); border-bottom: calc(var(--u) * 0.45) solid var(--ink); border-radius: calc(var(--u) * 1.5) calc(var(--u) * 1.5) 0 0;
  background: repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.04) 0 calc(var(--u) * 1.2), transparent calc(var(--u) * 1.2) calc(var(--u) * 2.4)), linear-gradient(#3A2C86, #241A5C); }
#cpModal .cp-box:not(.pf-box) > .cp-head h2 { padding: 0 calc(var(--u) * 0.4) calc(var(--u) * 0.3) 0; font-size: max(26px, calc(var(--u) * 4.6)); color: #fff; text-shadow: var(--out), calc(var(--u) * 0.4) calc(var(--u) * 0.5) 0 var(--ink); white-space: nowrap; overflow: visible; }
#cpModal .cp-box:not(.pf-box) .cp-head .cp-back { font-size: max(14px, calc(var(--u) * 2.1)); }
#cpModal .cp-box:not(.pf-box) .cp-head .icon-btn { flex: none; width: max(44px, calc(var(--u) * 5.4)); height: max(44px, calc(var(--u) * 5.4)); font-size: max(22px, calc(var(--u) * 2.8)); }
#cpModal .cp-box:not(.pf-box) .cp-field > span:first-child { color: #fff; font-size: max(15px, calc(var(--u) * 1.9)); }
#cpModal .cp-box:not(.pf-box) .cp-field > span:first-child em, #cpModal .cp-box:not(.pf-box) .cp-hint { color: rgba(255, 255, 255, 0.66); font-size: max(12px, calc(var(--u) * 1.5)); }
#cpModal .cp-box:not(.pf-box) input:not([type="checkbox"]) { height: max(44px, calc(var(--u) * 5.4)); font-size: max(20px, calc(var(--u) * 2.4)); border-width: max(3px, calc(var(--u) * 0.35)); }
#cpModal .cp-box:not(.pf-box) .cp-hint.ok { color: #6BF0A4; }
#cpModal .cp-box:not(.pf-box) .cp-hint.no { color: #FF8C80; }
#cpModal .cp-box:not(.pf-box) .linkish { color: #fff; font-size: max(15px, calc(var(--u) * 1.8)); }
#cpModal .cp-box:not(.pf-box) .cp-small { color: rgba(255, 255, 255, 0.66); font-size: max(13px, calc(var(--u) * 1.6)); }
#cpModal .cp-box:not(.pf-box) .btn { color: var(--ink); }
#cpModal .cp-box:not(.pf-box) .btn.primary { background: #FFD23F; color: var(--ink); box-shadow: calc(var(--u) * 0.5) calc(var(--u) * 0.5) 0 var(--ink); }
#cpModal .cp-box:not(.pf-box) .cp-form .btn.primary { font-size: max(24px, calc(var(--u) * 3)); }
#cpModal .cp-box:not(.pf-box) .seg button { color: var(--ink); height: max(40px, calc(var(--u) * 5)); font-size: max(16px, calc(var(--u) * 2)); }
#cpModal .cp-box:not(.pf-box) .seg button[aria-pressed="true"] { background: var(--ink); color: #FFD23F; }
#cpModal .cp-box:not(.pf-box) .btn.cp-danger { color: #fff; }
#cpModal .cp-tag { font-size: max(12px, calc(var(--u) * 1.4)); }
#cpModal .cp-box:not(.pf-box) .btn.primary:hover { background: #FFDC5E; }
#cpModal .cp-guest { gap: calc(var(--u) * 2.6); }
#cpModal .cp-form { gap: calc(var(--u) * 1.2); }
#cpModal .cp-code-t { font-size: max(16px, calc(var(--u) * 1.9)); }
/* « Ton compte » : qui il est à gauche ; la sécurité à droite, une ligne par réglage (son picto, ce qu'il fait, le
   bouton) ; la suppression en rouge ; « Se déconnecter de cet appareil » en bas, à part */
#cpModal .cp-secu-box { gap: 0; }
#cpModal .cp-sec { display: grid; grid-template-columns: calc(var(--u) * 26) minmax(0, 1fr); gap: calc(var(--u) * 2.4); align-items: start; }
#cpModal .cp-sec-id { display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * 0.6); padding: calc(var(--u) * 1.8) calc(var(--u) * 1.4); border: calc(var(--u) * 0.4) solid var(--ink); border-radius: calc(var(--u) * 1.4); text-align: center;
  background: 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(#3A2C86, #241A5C); box-shadow: calc(var(--u) * 0.5) calc(var(--u) * 0.5) 0 var(--ink); }
#cpModal .cp-sec-id .cp-pic { width: calc(var(--u) * 10); height: calc(var(--u) * 10); min-width: 56px; min-height: 56px; border: calc(var(--u) * 0.45) solid var(--ink); background: #E7E2D8; box-shadow: calc(var(--u) * 0.4) calc(var(--u) * 0.4) 0 var(--ink); margin-bottom: calc(var(--u) * 0.6); }
#cpModal .cp-sec-id > b { font: italic 800 max(20px, calc(var(--u) * 3.2))/1 var(--fc); text-transform: uppercase; text-shadow: var(--out); overflow-wrap: anywhere; }
#cpModal .cp-sec-id > b.l { font-size: max(18px, calc(var(--u) * 2.7)); }
#cpModal .cp-sec-id > b.xl { font-size: max(16px, calc(var(--u) * 2.2)); }
#cpModal .cp-sec-id > span { font: 700 max(14px, calc(var(--u) * 1.8))/1.1 var(--fb); }
#cpModal .cp-sec-id > small { font: 600 max(12px, calc(var(--u) * 1.4))/1.2 var(--fb); color: rgba(255, 255, 255, 0.62); }
#cpModal .cp-sec-id .cp-small { margin-top: calc(var(--u) * 1); padding-top: calc(var(--u) * 1); border-top: 2px dashed rgba(255, 255, 255, 0.2); font-size: max(12px, calc(var(--u) * 1.4)); line-height: 1.35; }
#cpModal .cp-sec-list { display: flex; flex-direction: column; gap: calc(var(--u) * 0.9); min-width: 0; }
#cpModal .cp-sec-list > h3 { margin: 0 0 calc(var(--u) * 0.2); font: 800 max(12px, calc(var(--u) * 1.6))/1 var(--fc); letter-spacing: calc(var(--u) * 0.2); color: rgba(255, 255, 255, 0.72); }
#cpModal .cp-secu-box .cp-sec-row { grid-template-columns: auto minmax(0, 1fr) auto; gap: calc(var(--u) * 0.6) calc(var(--u) * 1.4); padding: calc(var(--u) * 1) calc(var(--u) * 1.4) calc(var(--u) * 1) calc(var(--u) * 1.1); border: calc(var(--u) * 0.35) solid var(--ink); border-radius: calc(var(--u) * 1.2);
  background: rgba(255, 255, 255, 0.07); box-shadow: calc(var(--u) * 0.35) calc(var(--u) * 0.35) 0 var(--ink); }
#cpModal .cp-sec-i { display: grid; place-items: center; width: calc(var(--u) * 4.4); height: calc(var(--u) * 4.4); min-width: 30px; min-height: 30px; border: calc(var(--u) * 0.3) solid var(--ink); border-radius: 50%; background: #FFD23F; color: var(--ink); }
#cpModal .cp-sec-i svg { width: 60%; height: 60%; stroke-width: 2.4; }
#cpModal .cp-secu-box .cp-sec-t b { font: 800 max(17px, calc(var(--u) * 2.4))/1.1 var(--fc); letter-spacing: 0.8px; }
#cpModal .cp-secu-box .cp-sec-t small { font: 500 max(12px, calc(var(--u) * 1.5))/1.3 var(--fb); color: rgba(255, 255, 255, 0.7); }
#cpModal .cp-sec-go { min-width: calc(var(--u) * 16); }
#cpModal .cp-secu-box .cp-sec-f { grid-column: 1 / -1; }
#cpModal .cp-secu-box .cp-sec-row.danger { border-color: #7A1010; background: rgba(228, 53, 42, 0.12); }
#cpModal .cp-secu-box .cp-sec-row.danger .cp-sec-i { background: #FF6B5E; }
#cpModal .cp-secu-box .cp-sec-row.danger .cp-sec-t b { color: #FF8C80; }
#cpModal .cp-secu-box .cp-sec-row.danger .cp-sec-go { background: #E4352A; color: #fff; text-shadow: 1px 1px 0 var(--ink); }
#cpModal .cp-secu-box .cp-sec-row.danger .cp-sec-go:hover { background: #F04A3F; }
#cpModal .cp-sec-foot { display: flex; align-items: center; flex-wrap: wrap; gap: calc(var(--u) * 0.8) calc(var(--u) * 1.6); margin-top: calc(var(--u) * 1.8); padding-top: calc(var(--u) * 1.6); border-top: 2px dashed rgba(255, 255, 255, 0.2); }
#cpModal .cp-out svg { width: 1.2em; height: 1.2em; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
#cpModal .cp-sec-foot small { font: 600 max(12px, calc(var(--u) * 1.5))/1.3 var(--fb); color: rgba(255, 255, 255, 0.62); }
/* le code de secours */
#cpModal .cp-code-box .cp-check { color: #fff; }
#cpModal .cp-code-box .cp-check input { accent-color: #FFD23F; }
/* (à côté du formulaire d'un invité : sa progression, sur la nuit) */
#cpModal .cp-g-right { border-width: calc(var(--u) * 0.4); background: rgba(10, 7, 28, 0.62); color: #fff; box-shadow: inset 0 0 0 calc(var(--u) * 0.25) rgba(255, 210, 63, 0.4), calc(var(--u) * 0.6) calc(var(--u) * 0.6) 0 var(--ink); }
#cpModal .cp-g-right .cp-pitch { color: rgba(255, 255, 255, 0.85); }
#cpModal .cp-g-right .cp-pitch b { color: #FFD23F; }
#cpModal .cp-prog::before { display: none; }
#cpModal .cp-prog-h b { font-size: max(24px, calc(var(--u) * 3)); }
#cpModal .cp-prog .cp-lvt > span:first-child { color: #fff; font-size: max(17px, calc(var(--u) * 2)); }
#cpModal .cp-prog .cp-lvt small { color: rgba(255, 255, 255, 0.7); font-size: max(12px, calc(var(--u) * 1.5)); }
#cpModal .cp-prog .cp-tiles div { border-color: rgba(255, 255, 255, 0.16); background: rgba(255, 255, 255, 0.06); }
#cpModal .cp-prog .cp-tiles b { color: #fff; font-size: max(22px, calc(var(--u) * 2.8)); }
#cpModal .cp-prog .cp-tiles span { color: rgba(255, 255, 255, 0.62); font-size: max(12px, calc(var(--u) * 1.4)); }
#cpModal .cp-prog-cta { border-color: rgba(255, 210, 63, 0.6); background: rgba(255, 210, 63, 0.14); color: #FFE27A; font-size: max(15px, calc(var(--u) * 1.8)); }
#cpModal .cp-prog .cp-coffre { margin: 0; }
#cpModal .cp-prog .cp-coffre small { font-size: max(12px, calc(var(--u) * 1.4)); }
#cpModal .cp-prog-rk { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--u) * 0.8); }
#cpModal .cp-prog-rk > span { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; align-items: center; column-gap: calc(var(--u) * 0.8); padding: calc(var(--u) * 0.5) calc(var(--u) * 0.8); border-radius: calc(var(--u) * 1); background: rgba(255, 255, 255, 0.06); min-width: 0; }
#cpModal .cp-prog-rk .rk-emb { grid-row: 1 / 3; width: max(30px, calc(var(--u) * 4.2)); height: max(30px, calc(var(--u) * 4.2)); }
#cpModal .cp-prog-rk small { font: 700 max(12px, calc(var(--u) * 1.4))/1 var(--fc); letter-spacing: 0.8px; text-transform: uppercase; color: rgba(255, 255, 255, 0.6); }
#cpModal .cp-prog-rk b { font: italic 800 max(13px, calc(var(--u) * 1.9))/1.05 var(--fc); text-transform: uppercase; }
/* toutes ses balles : une grille de cartes qui défile */
#cpModal .cp-balles-box { display: flex; flex-direction: column; overflow: hidden; }
#cpModal .cp-balles-n { flex: none; margin: 0 0 calc(var(--u) * 1.4); font: 700 max(13px, calc(var(--u) * 1.7))/1.2 var(--fc); letter-spacing: 0.6px; text-transform: uppercase; color: rgba(255, 255, 255, 0.75); }
#cpModal .cp-balles-n b { font: italic 800 1.3em/1 var(--fc); color: #FFD23F; }
#cpModal .pf-ball-grid { flex: 0 1 auto; min-height: 0; overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(max(240px, calc(var(--u) * 34)), 1fr)); grid-auto-rows: max-content; gap: calc(var(--u) * 1.4); padding: calc(var(--u) * 0.6) calc(var(--u) * 1) calc(var(--u) * 1.2) calc(var(--u) * 0.6); }
#cpModal .pf-ball-grid .pf-fv { max-height: none; min-height: calc(var(--u) * 11); }
@media (max-height: 520px) {
  #cpModal .cp-sous { padding: max(6px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) max(6px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left)); }
  #cpModal .cp-box:not(.pf-box) { padding: 0 14px 10px; border-width: 3px; border-radius: 14px; box-shadow: 4px 4px 0 var(--ink); }
  #cpModal .cp-box:not(.pf-box) > .cp-head { margin: 0 -14px 8px; padding: 4px 6px 4px 8px; border-bottom-width: 3px; border-radius: 11px 11px 0 0; }
  #cpModal .cp-box:not(.pf-box) > .cp-head h2 { font-size: 24px; }
  #cpModal .cp-box:not(.pf-box) .cp-head .icon-btn { width: 40px; height: 40px; min-width: 40px; min-height: 40px; font-size: 20px; }
  #cpModal .cp-box:not(.pf-box) .cp-head .cp-back { height: 40px; min-height: 40px; padding: 0 10px; font-size: 15px; box-shadow: 2px 2px 0 var(--ink); }
  #cpModal .cp-box:not(.pf-box) .cp-field > span:first-child { font-size: 13px; }
  #cpModal .cp-box:not(.pf-box) input:not([type="checkbox"]) { height: 36px; font-size: 17px; }
  #cpModal .cp-box:not(.pf-box) .cp-form .btn.primary { font-size: 20px; }
  #cpModal .cp-box:not(.pf-box) .seg button { height: 32px; font-size: 14px; }
  #cpModal .cp-balles-box { width: 100%; max-height: 100%; }
  #cpModal .cp-balles-n { margin-bottom: 6px; font-size: 12px; }
  #cpModal .pf-ball-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 7px; padding: 2px 4px 6px 2px; }
  #cpModal .pf-ball-grid .pf-fv { min-height: 58px; }
  #cpModal .cp-g-right { border-width: 2.5px; box-shadow: 3px 3px 0 var(--ink); }
  #cpModal .cp-prog-rk .rk-emb { width: 26px; height: 26px; }
  /* (« Crée ton compte » : le titre de la fenêtre le dit déjà ; le coffre est sur le profil) */
  #cpModal .cp-prog-cta, #cpModal .cp-prog .cp-coffre { display: none; }
  #cpModal .cp-sec-t small, #cpModal .cp-small, #cpModal .cp-field > span:first-child, #cpModal .cp-prog .cp-tiles span, #cpModal .cp-prog .cp-lvt small { font-size: 12px !important; }
  /* « Ton compte » au téléphone : les réglages seuls (qui il est : le profil derrière le dit) */
  #cpModal .cp-secu-box { width: min(100%, 640px); }
  #cpModal .cp-sec { grid-template-columns: minmax(0, 1fr); }
  #cpModal .cp-sec-id, #cpModal .cp-sec-list > h3 { display: none; }
  #cpModal .cp-sec-list { gap: 5px; }
  #cpModal .cp-secu-box .cp-sec-row { gap: 2px 9px; padding: 4px 7px 4px 5px; border-width: 2px; border-radius: 9px; box-shadow: 2px 2px 0 var(--ink); }
  #cpModal .cp-sec-i { width: 28px; height: 28px; min-width: 28px; min-height: 28px; border-width: 2px; }
  #cpModal .cp-secu-box .cp-sec-t b { font-size: 16px; }
  #cpModal .cp-sec-go { min-width: 0; min-height: 34px; padding: 2px 10px 3px; font-size: 14px; box-shadow: 2px 2px 0 var(--ink); }
  #cpModal .cp-sec-foot { margin-top: 7px; padding-top: 6px; gap: 4px 10px; }
  #cpModal .cp-out { min-height: 36px; padding: 2px 10px 3px; font-size: 14px; box-shadow: 2px 2px 0 var(--ink); }
}
@media (max-height: 340px) {
  #cpModal .cp-box:not(.pf-box) { padding-bottom: 8px; }
  #cpModal .cp-box:not(.pf-box) > .cp-head { margin-bottom: 6px; padding-top: 3px; padding-bottom: 3px; }
  #cpModal .cp-box:not(.pf-box) > .cp-head h2 { font-size: 22px; }
  #cpModal .cp-box:not(.pf-box) .cp-head .icon-btn, #cpModal .cp-box:not(.pf-box) .cp-head .cp-back { height: 36px; min-height: 36px; }
  #cpModal .cp-box:not(.pf-box) .cp-head .icon-btn { width: 36px; min-width: 36px; }
  #cpModal .cp-secu-box .cp-sec-t small { display: none; }
  #cpModal .cp-secu-box .cp-sec-row { padding-top: 2px; padding-bottom: 2px; }
  #cpModal .cp-sec-i { width: 24px; height: 24px; min-width: 24px; min-height: 24px; }
  #cpModal .cp-sec-go { min-height: 30px; }
  #cpModal .cp-sec-list { gap: 4px; }
  #cpModal .cp-sec-foot { margin-top: 5px; padding-top: 5px; }
  #cpModal .cp-out { min-height: 32px; }
  #cpModal .cp-box:not(.pf-box) input:not([type="checkbox"]) { height: 30px; font-size: 15px; padding: 0 9px; border-width: 2px; border-radius: 8px; }
  #cpModal .cp-box:not(.pf-box) .cp-field > span:first-child { font-size: 12px; }
  #cpModal .cp-box:not(.pf-box) .cp-form { gap: 3px; }
  #cpModal .cp-box:not(.pf-box) .cp-form .btn.primary { font-size: 17px; padding: 4px 16px 5px; }
  #cpModal .cp-box:not(.pf-box) .seg button { height: 28px; font-size: 13px; }
  #cpModal .cp-box:not(.pf-box) .cp-hint:empty { display: none; }
  #cpModal .cp-guest .cp-g-left { gap: 4px; }
}