/* ─────────────── AU DOIGT : LE CHOIX DES BALLES façon Brawl Stars (Js', 1er/10) ───────────────
   LA LISTE (« des cases rectangle en longueur… les balles un peu plus grandes… 3 cases de hauteur… une barre de scroll à
   droite… les noms bien centrés… la recherche et le au hasard en haut vers le titre, le reste retire ») : trois rangées
   de cases en longueur qui défilent de gauche à droite (--th, la hauteur d'une case : js/br/app.js fitRoster), chaque
   catégorie précédée de son nom à la verticale ; à droite, une barre qui montre où on en est (on peut la tirer).
   LA BALLE (« pas une fiche : la balle au milieu, des infos à gauche et à droite, comme sur Brawl Stars ») : en plein
   écran sur un fond de sa couleur — à gauche son nom, son étiquette et ses barres ; au milieu la balle en grand ; à droite
   ses attaques, et « Choisir » en bas à droite. Sur ordinateur : rien ne change. */
html.tel #chars { --th: 92px; --tb: 44px; }
html.tel #chars .chars-body { display: flex; gap: 0; min-height: 0; flex: 1; }
html.tel #chars:not(.detail) .hero { display: none; }
html.tel #chars.detail .roster-col { display: none; }

/* ── la barre du haut : retour, titre, recherche, au hasard… puis plein écran et réglages — tout à la même hauteur ── */
html.tel #chars > .topbar { flex-wrap: nowrap; align-items: center; gap: 8px; min-width: 0; }
html.tel #chars > .topbar .grow { display: block; flex: 1 1 0; min-width: 0; }
html.tel #chars > .topbar .menu-title { flex: none; min-width: 0; margin: 0; padding: 2px 4px 4px 2px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: clamp(22px, 7.5vh, 36px); line-height: 1; }
html.tel #chars > .topbar .chip.back, html.tel #chars > .topbar .icon-btn, html.tel #chars > .topbar #charSearch, html.tel #chars > .topbar .dice-btn { flex: none; height: var(--tb); box-sizing: border-box; margin: 0; border-radius: 12px; }
html.tel #chars > .topbar .chip.back { padding: 0 12px; font-size: 15px; }
html.tel #chars > .topbar .icon-btn { width: var(--tb); }
html.tel #chars > .topbar #charSearch { flex: 0 1 220px; min-width: 96px; width: auto; padding-left: 38px; background-position: 11px 50%; background-size: 18px 18px; font-size: 16px; }
html.tel #chars > .topbar .dice-btn { padding: 0 12px; font-size: 15px; }
html.tel #chars.detail > .topbar #charSearch, html.tel #chars.detail > .topbar .dice-btn { display: none; }
html.tel #chars .roster-tools { display: none; }   /* (plus de catégories en haut) */
/* (écran étroit : « Au hasard » devient un dé, le titre reste entier) */
@media (max-width: 760px) {
  html.tel #chars > .topbar .dice-btn { width: var(--tb); padding: 0; font-size: 0; }
  html.tel #chars > .topbar .dice-btn::before { content: '🎲'; font-size: 20px; line-height: 1; }
}

/* ── la liste ── */
html.tel #chars .roster-col { position: relative; flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; padding: 0 26px 0 0; background: none; border: 0; border-radius: 0; box-shadow: none; overflow: visible; }
html.tel #chars .roster { flex: 1; min-height: 0; display: flex; flex-direction: row; align-items: stretch; gap: 14px; margin: 0; padding: 6px 10px 10px 4px; overflow-x: auto; overflow-y: hidden; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; touch-action: pan-x; scrollbar-width: none; }
html.tel #chars .roster::-webkit-scrollbar { display: none; }
html.tel #chars .roster .group { flex: none; display: flex; flex-direction: row; align-items: stretch; gap: 8px; margin: 0; padding: 0; }
html.tel #chars .roster .group > h3 { flex: none; display: grid; place-items: center; margin: 0; padding: 10px 5px; box-sizing: border-box; writing-mode: vertical-rl; transform: rotate(180deg); border: 3px solid var(--ink); border-radius: 12px; background: var(--ink); color: var(--gold); font: italic 800 14px/1 var(--fc); letter-spacing: 1.5px; text-transform: uppercase; white-space: nowrap; }
html.tel #chars .roster .group .grid { display: grid; grid-auto-flow: column; grid-template-rows: repeat(3, var(--th)); grid-template-columns: none; grid-auto-columns: calc(var(--th) * 1.6); align-content: start; gap: 8px; }
/* (une case en longueur : la scène de couleur de la balle, la balle en grand au milieu, son nom centré en bas, cerclé
   d'encre comme les titres) */
html.tel #chars .roster .card { position: relative; scroll-snap-align: start; width: auto; min-width: 0; height: auto; min-height: 0; margin: 0; padding: 0; display: block; overflow: hidden; border-radius: 12px; }
/* (les cases hors de l'écran ne sont ni mises en page ni peintes : la première ouverture de la grille — pendant les 25 s
   de la re-sélection de la revanche, par exemple — ne fige plus le téléphone ; leur taille vient de la grille) */
html.tel #chars .roster .card { content-visibility: auto; contain-intrinsic-size: calc(var(--th) * 1.6) var(--th); }
html.tel #chars .roster .card .cs { position: absolute; inset: 0; aspect-ratio: auto; display: block; }
html.tel #chars .roster .card .cs::after { bottom: 12%; width: 42%; }
html.tel #chars .roster .card canvas { position: absolute; z-index: 1; left: 50%; top: 1%; width: auto; height: 94%; max-width: none; aspect-ratio: 1; margin: 0; translate: -50% 0; }
html.tel #chars .roster .card .txt { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; width: auto; height: auto; min-height: 0; box-sizing: border-box; padding: 0 4px 3px; display: block; text-align: center; background: none; }
html.tel #chars .roster .card .n { display: block; box-sizing: border-box; width: 100%; margin: 0; padding: 2px 3px 3px; overflow: hidden; color: #fff; text-align: center; text-shadow: var(--tout); font-size: clamp(12px, calc(var(--th) * 0.17), 24px); line-height: 1.1; white-space: nowrap; text-overflow: ellipsis; -webkit-line-clamp: unset; }
html.tel #chars .roster .card .p { display: none; }
html.tel #chars .roster .card.sel .txt { background: none; }
html.tel #chars .roster .card.sel .n { color: var(--gold); }
html.tel #chars .roster .card .fav-star { z-index: 3; }
html.tel #chars .roster .card.sel::after { z-index: 3; }
/* (la barre de droite : où on en est dans la liste ; on peut la tirer — js/br/app.js rosterBar) */
.roster-bar { display: none; }
html.tel #chars .roster-bar { position: absolute; z-index: 3; right: 3px; top: 6px; bottom: 10px; width: 16px; display: block; box-sizing: border-box; border: 3px solid var(--ink); border-radius: 9px; background: rgba(21, 21, 21, 0.38); touch-action: none; cursor: pointer; }
html.tel #chars .roster-bar i { position: absolute; left: 0; right: 0; top: var(--t, 0px); height: var(--h, 30px); box-sizing: border-box; border-radius: 6px; background: var(--gold); box-shadow: inset 0 -3px 0 rgba(21, 21, 21, 0.22); }
html.tel #chars .roster-bar.drag i { background: #FFE97A; }
html.tel #chars .roster-bar.off { visibility: hidden; }

/* ── la balle, en plein écran (pas une fiche) : le fond prend sa couleur ── */
html.tel #chars.detail::before { content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: repeating-conic-gradient(from 0deg at 50% 55%, rgba(255, 255, 255, 0.07) 0 9deg, rgba(255, 255, 255, 0) 9deg 18deg), radial-gradient(ellipse 60% 75% at 50% 55%, color-mix(in srgb, var(--c1) 35%, #fff) 0, color-mix(in srgb, var(--c1) 85%, #fff) 30%, color-mix(in srgb, var(--c1) 88%, #000) 75%, color-mix(in srgb, var(--c1) 50%, #000) 100%); }
html.tel #chars.detail .hero { flex: 1; min-width: 0; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr) minmax(0, 1.15fr); grid-template-rows: minmax(0, 1fr) auto; grid-template-areas: "txt stage kit" "txt stage ok"; column-gap: 12px; padding: 0; background: none; border: 0; border-radius: 0; box-shadow: none; overflow: visible; }
/* (au milieu : la balle en grand, des rayons derrière elle, son ombre au sol ; carrée, jamais plus large que sa colonne) */
html.tel #chars.detail .hero-stage { grid-area: stage; container-type: size; aspect-ratio: auto; min-height: 0; height: auto; overflow: visible; border: 0; background: none; }
html.tel #chars.detail .hero-stage::before { top: 50%; width: min(150cqh, 150cqw); -webkit-mask: radial-gradient(circle, #000 25%, transparent 66%); mask: radial-gradient(circle, #000 25%, transparent 66%); }
html.tel #chars.detail .hero-stage .hero-cv { top: 50%; height: min(94cqh, 100cqw); translate: -50% -50%; }
html.tel #chars.detail .hero-stage::after { top: calc(50% + min(94cqh, 100cqw) * 0.36); bottom: auto; width: calc(min(94cqh, 100cqw) * 0.5); height: calc(min(94cqh, 100cqw) * 0.09); }
html.tel #chars.detail .hero-cat { display: none; }
/* (à gauche : son nom, son étiquette, ses barres — en blanc sur le fond) */
html.tel #chars.detail .hero-txt { grid-area: txt; align-self: center; min-width: 0; padding: 0 0 0 4px; border: 0; background: none; }
html.tel #chars.detail .hero .slot-tag { display: none; }
html.tel #chars.detail .hero h2 { margin: 0; padding: 2px 4px 5px 2px; color: #fff; text-shadow: var(--tout); font-size: clamp(26px, 10vh, 52px); line-height: 0.95; }
html.tel #chars.detail .hero .pw { margin-top: 6px; box-shadow: 2px 2px 0 var(--ink); }
html.tel #chars.detail .hero-stats { margin-top: 12px; padding: 9px 10px 10px; border-radius: 12px; background: rgba(21, 21, 21, 0.55); }
html.tel #chars.detail .hs-l { color: rgba(255, 255, 255, 0.85); }
html.tel #chars.detail .hs-v { color: #fff; }
/* (à droite : ses attaques, chacune dans une case sombre, et « Choisir » en dessous) */
html.tel #chars.detail .kit { grid-area: kit; align-self: center; min-height: 0; max-height: 100%; box-sizing: border-box; margin: 0; padding: 2px 2px 2px 0; display: flex; flex-direction: column; gap: 5px; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; border: 0; background: none; }
html.tel #chars.detail .kit li { flex: none; margin: 0; padding: 5px 9px 6px; grid-template-columns: 28px minmax(0, 1fr); gap: 9px; border: 2.5px solid var(--ink); border-radius: 12px; background: rgba(21, 21, 21, 0.62); color: #fff; }
html.tel #chars.detail .kit-ico { width: 28px; height: 28px; border-width: 2.5px; }
html.tel #chars.detail .kit-h { min-height: 20px; }
html.tel #chars.detail .kit-h strong { color: #fff; font-size: 17px; }
html.tel #chars.detail .kit-d { color: rgba(255, 255, 255, 0.86); }
html.tel #chars.detail .kit .kit-num { background: var(--gold); color: var(--ink); }
/* (attaques repliées quand tout ne tient pas — js/br/app.js fitHero : le nom et les chiffres ; un appui montre ce que
   fait l'attaque dans une bulle au milieu, par-dessus la balle — placée dans la fiche, pas dans la liste qui la couperait) */
html.tel #chars.detail .kit.compact li { cursor: pointer; }
html.tel #chars.detail .kit.compact li.open { border-color: var(--gold); background: rgba(21, 21, 21, 0.8); }
html.tel #chars.detail .kit.compact .kit-d { display: none; }
html.tel #chars.detail .kit.compact li.open .kit-d { position: absolute; z-index: 6; left: 47.5%; top: 50%; translate: -50% -50%; display: block; width: min(300px, 33%); max-height: 92%; box-sizing: border-box; margin: 0; padding: 12px 14px 13px; overflow: hidden; border: 3px solid var(--ink); border-radius: 14px; background: var(--card); box-shadow: 4px 4px 0 var(--ink); color: var(--ink); font-size: 14px; line-height: 1.35; }
html.tel #chars.detail .kit.compact li.open .kit-d::before { content: attr(data-name); display: block; margin: 0 0 5px; font: italic 800 18px/1.05 var(--fc); text-transform: uppercase; color: var(--ink); }
html.tel #chars.detail .kit.compact .kit-h::after { content: ''; flex: none; width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 8px solid var(--gold); }
html.tel #chars.detail .kit.compact li.open .kit-h::after { border-top: 0; border-bottom: 8px solid var(--gold); }
html.tel #chars.detail #charsOk { grid-area: ok; align-self: end; justify-self: stretch; margin: 8px 0 4px; }
@media (max-height: 340px) {
  html.tel #chars { --tb: 40px; }
  html.tel #chars > .topbar .chip.back, html.tel #chars > .topbar .dice-btn { font-size: 14px; padding: 0 10px; }
  html.tel #chars.detail #charsOk { margin: 6px 0 2px; padding-top: 4px; padding-bottom: 6px; font-size: 22px; }
  html.tel #chars.detail .hero-stats { margin-top: 6px; padding: 6px 8px 7px; gap: 4px; }
  html.tel #chars.detail .kit { gap: 4px; }
  html.tel #chars.detail .kit li { padding: 3px 8px 4px; grid-template-columns: 24px minmax(0, 1fr); gap: 8px; }
  html.tel #chars.detail .kit-ico { width: 24px; height: 24px; border-width: 2px; box-shadow: 1px 1px 0 var(--ink); }
  html.tel #chars.detail .kit-h strong { font-size: 15px; }
}