/* app/menus/habillage.css — l'habillage propre à ce jeu à part : accueil compact au doigt et bandeau
   de jeu (vie, gilet, arme) plus soigné. Chargée en dernier : elle passe après arene.css et
   app/menus/petit-ecran.css. */

/* ---------- Accueil au doigt : le détail se replie (app/menus/textes.js, accueilCompact) ---------- */
.arena-plus{margin-top:10px;border-radius:12px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);}
.arena-plus summary{cursor:pointer;padding:10px 14px;font-size:13px;font-weight:700;color:#d9dce6;list-style:none;
 display:flex;align-items:center;gap:8px;}
.arena-plus summary::-webkit-details-marker{display:none;}
.arena-plus summary::before{content:"";width:7px;height:7px;border:solid #ffb43d;border-width:0 2px 2px 0;rotate:-45deg;transition:rotate .2s;}
.arena-plus[open] summary::before{rotate:45deg;}
.arena-plus .arena-cols{margin:0;padding:0 14px 12px;}
html.petit-ecran .arena-panel p{margin:0 0 4px;}
html.petit-ecran .arena-head{margin-bottom:2px;}
html.petit-ecran .arena-panel > .arena-keys{margin:8px 0 0;}
/* Couché, l'accueil tient en un écran : texte d'intro plus serré. */
@media (orientation:landscape){
 html.petit-ecran .arena-panel{padding-top:18px;}
 html.petit-ecran .arena-title{font-size:22px;margin:2px 0 4px;}
 html.petit-ecran .arena-panel p{font-size:12.5px;line-height:1.4;}
 html.petit-ecran .arena-actions{margin-top:8px;padding-top:8px;}
}

/* ---------- Bandeau de jeu : néon, comme les menus ----------
   Verre très sombre, liseré d'expérience dégradé en bas ; arme dans une étiquette bordée de sa
   couleur ; boutons en verre bordé de cyan. Ni flou ni filtre : le bandeau est au-dessus du jeu,
   qui est repeint à chaque image. */
.arena-hud{padding-top:env(safe-area-inset-top,0px);background:linear-gradient(180deg,#06050d,#0b0a18);box-shadow:0 10px 26px rgba(0,0,0,.45);}
.arena-hud-time{font-size:21px;letter-spacing:.05em;color:#fff;text-shadow:0 0 12px rgba(0,224,255,.35);}
.arena-hud-pts{color:#7ff3ff;text-shadow:0 0 8px rgba(0,224,255,.4);}
.arena-hud-lvl{color:#c9b6ff;}
.arena-hud-xp{height:3px;background:#15132a;}
.arena-hud-xp i{background:linear-gradient(90deg,#00e0ff,#9a5cff,#ff2fd0);box-shadow:0 0 8px rgba(0,224,255,.6);}

/* Trois cases de même taille, chacune toujours à sa place (demande de Tris, 17/10 : rien ne
   doit se redimensionner) : Vie, Plastron (vide, « 0 », quand vous n'en avez pas) et Boss
   (« Pas de boss » en attendant). Le moteur cache le plastron et le boss (hidden) : ici, ils
   restent affichés, grisés. Jauge en pilule fine (choix de Tris, « M1 ») : titre et nombre
   au-dessus, police du téléphone, barre arrondie sans segments. L'arrondi est un masque posé
   sur la case (la barre, allongée par transform, garderait sinon des bouts écrasés). */
.arena-gauge,.arena-gauge[hidden]{display:flex;align-items:flex-end;gap:6px;min-width:0;--h:6px;}
.arena-gauge .arena-ico{display:none;}
.arena-gauge::before{flex:none;position:relative;top:2px;font:16px/1 system-ui,sans-serif;}
.arena-gauge .arena-gauge-track{flex:1 1 0;width:auto;min-width:0;max-width:none;height:26px;border:0;border-radius:0;
 background:linear-gradient(rgba(255,255,255,.09),rgba(255,255,255,.09)) left bottom/100% var(--h) no-repeat;
 -webkit-mask:linear-gradient(#000 0 0) top/100% calc(100% - var(--h) - 1px) no-repeat,linear-gradient(#000 0 0) bottom/calc(100% - var(--h)) var(--h) no-repeat,
  radial-gradient(circle closest-side,#000 96%,transparent) left bottom/var(--h) var(--h) no-repeat,radial-gradient(circle closest-side,#000 96%,transparent) right bottom/var(--h) var(--h) no-repeat;
 mask:linear-gradient(#000 0 0) top/100% calc(100% - var(--h) - 1px) no-repeat,linear-gradient(#000 0 0) bottom/calc(100% - var(--h)) var(--h) no-repeat,
  radial-gradient(circle closest-side,#000 96%,transparent) left bottom/var(--h) var(--h) no-repeat,radial-gradient(circle closest-side,#000 96%,transparent) right bottom/var(--h) var(--h) no-repeat;}
.arena-gauge-track i{top:auto;height:var(--h);border-radius:0;box-shadow:none;transition:transform .25s cubic-bezier(.3,.7,.4,1);}
.arena-gauge-track em{display:none;}
.arena-gauge .arena-gauge-track b{inset:0 0 auto 0;height:11px;padding:0;justify-content:flex-end;font:700 11px/11px system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
 letter-spacing:.02em;text-transform:none;color:#fff;text-shadow:none;font-variant-numeric:tabular-nums;}
.arena-gauge-track::before{position:absolute;left:0;top:0;font:600 11px/11px system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;letter-spacing:.06em;
 text-transform:uppercase;white-space:nowrap;}
.arena-gauge-hp [data-k="hplbl"]{display:none;}
/* Vie basse : la barre bat par son opacité (animée hors du fil principal). L'ombre animée du moteur
   était cachée par le masque de la jauge et repeignait pourtant le bandeau à chaque image. */
.arena-gauge-hp.low .arena-gauge-track{animation:none;}
.arena-gauge-hp.low .arena-gauge-track i{animation:vie-basse .6s ease-in-out infinite alternate;}
@keyframes vie-basse{to{opacity:.4;}}
@media (prefers-reduced-motion:reduce){.arena-gauge-hp.low .arena-gauge-track i{animation:none;}}

.arena-gauge-hp i{background:linear-gradient(90deg,#ff2e63,#ff5c8a 60%,#ff9ab6);}
.arena-gauge-hp::before{content:"♥";color:#ff3f78;text-shadow:0 0 8px rgba(255,47,109,.9);}
.arena-gauge-hp .arena-gauge-track::before{content:"Vie";color:rgba(255,160,185,.85);}

.arena-gauge-vest i{background:linear-gradient(90deg,#2f6bff,#4fa3ff 60%,#9fdcff);}
.arena-gauge-vest::before{content:"";width:14px;height:16px;
 background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%237fc8ff' d='M12 2 4 5v6c0 5 3.4 9.3 8 11 4.6-1.7 8-6 8-11V5z'/%3E%3C/svg%3E") center/contain no-repeat;}
.arena-gauge-vest .arena-gauge-track::before{content:"Plastron";color:rgba(160,205,255,.85);}
.arena-gauge-vest.hit .arena-gauge-track{background:linear-gradient(rgba(140,200,255,.5),rgba(140,200,255,.5)) left bottom/100% var(--h) no-repeat;}
.arena-gauge-vest[hidden]::before{opacity:.35;}
.arena-gauge-vest[hidden] .arena-gauge-track::before,.arena-gauge-vest[hidden] .arena-gauge-track b{color:#5d5a72;}
.arena-gauge-vest[hidden] .arena-gauge-track b::after{content:"0";}

/* Boss : son nom (sans article, arene.js) à la place du titre, sa couleur (--bc). */
.arena-gauge-boss::before{content:"☠";color:var(--bc);text-shadow:0 0 8px var(--bc);font-size:15px;}
.arena-gauge-boss i{background:linear-gradient(90deg,var(--bc),color-mix(in srgb,var(--bc) 55%,#fff));box-shadow:none;}
.arena-gauge-boss .arena-gauge-track b{display:block;max-width:none;text-align:left;font:600 11px/11px system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
 letter-spacing:.06em;text-transform:uppercase;color:var(--bc);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.arena-gauge-boss[hidden]::before{color:#5d5a72;text-shadow:none;}
.arena-gauge-boss[hidden] .arena-gauge-track{background:linear-gradient(rgba(255,255,255,.05),rgba(255,255,255,.05)) left bottom/100% var(--h) no-repeat;}
.arena-gauge-boss[hidden] i,.arena-gauge-boss[hidden] b{visibility:hidden;}
.arena-gauge-boss[hidden] .arena-gauge-track::before{content:"Pas de boss";color:#5d5a72;}

/* Les places du bandeau, en grille : temps et points (largeur fixe), les trois cases, puis
   l'arme, les grenades et les boutons à droite. Debout (≤ 480 px de large), deux lignes : temps,
   points et boutons en haut (de part et d'autre de l'appareil photo, --photo), les trois cases,
   l'arme et les grenades dessous. Hauteurs : hauteurBandeau() (app/main.js). */
.arena-hud{display:grid;grid-template-columns:170px repeat(3,minmax(0,200px)) 1fr auto auto auto auto;
 grid-template-areas:"l hp vest boss . wp gr stats btns";column-gap:14px;row-gap:0;}
.arena-hud-l{grid-area:l;min-width:0;}
.arena-gauge-hp{grid-area:hp;}
.arena-gauge-vest{grid-area:vest;}
.arena-gauge-boss{grid-area:boss;}
.arena-hud-wp{grid-area:wp;margin-left:0;}
.arena-hud-gren{grid-area:gr;}
.arena-hud-stats{grid-area:stats;}
.arena-hud-btns{grid-area:btns;justify-self:end;}
html.petit-ecran .arena-hud{grid-template-columns:150px repeat(3,minmax(0,150px)) 1fr auto auto auto;
 grid-template-areas:"l hp vest boss . wp gr btns";column-gap:8px;row-gap:0;}
html.petit-ecran .arena-hud-stats{display:none;}
@media (orientation:landscape){html.petit-ecran .arena-hud-wp b{display:none;}}
@media (max-width:480px){
 html.petit-ecran .arena-hud{--r1:max(var(--photo,0px),36px);padding-top:0;padding-bottom:6px;column-gap:6px;align-content:start;
  grid-template-columns:repeat(3,minmax(0,1fr)) auto auto;grid-template-rows:var(--r1) 32px;
  grid-template-areas:"l l l btns btns" "hp vest boss wp gr";}
 html.petit-ecran .arena-hud-time{font-size:20px;}
 html.petit-ecran .arena-hud-wpl{display:none;}
 html.petit-ecran .arena-hud-wp{padding:3px 6px;}
}
/* Téléphone : titres des cases en minuscules (« Plastron » en capitales mordait son nombre, « +15 »,
   dans une case étroite ; Tris, 25/10). */
html.petit-ecran .arena-gauge-track::before,html.petit-ecran .arena-gauge-boss .arena-gauge-track b{text-transform:none;letter-spacing:.02em;}
html.petit-ecran .arena-gauge-vest .arena-gauge-track::before{max-width:calc(100% - 25px);overflow:hidden;text-overflow:ellipsis;} /* (seulement si le plastron a trois chiffres) */
/* Étroit (360 à 400 px) : le titre suffit, sans le symbole devant ; le titre et le nombre tiennent (à 390 px, avec
   les symboles, « Plastron » devenait « Plast… » ; chasse aux bugs, 25/10). */
@media (max-width:400px){
 html.petit-ecran .arena-gauge::before{display:none;}
 html.petit-ecran .arena-gauge-track::before{letter-spacing:0;}
}

/* Arme : étiquette sombre bordée de sa couleur, crans de niveau cyan. */
.arena-hud-wp{border:1px solid color-mix(in srgb,var(--wc,#00e0ff) 70%,transparent);border-radius:9px;
 background:color-mix(in srgb,var(--wc,#00e0ff) 12%,#07060f);box-shadow:0 0 12px color-mix(in srgb,var(--wc,#00e0ff) 30%,transparent);}
.arena-hud-wp b{letter-spacing:.04em;}
.arena-hud-wpl i{width:8px;height:12px;border-radius:1px;background:#00e0ff;box-shadow:0 0 6px rgba(0,224,255,.7);}
.arena-hud-wpl i.off{background:#24223a;box-shadow:none;}

/* Boutons du bandeau (Son, Pause, Paramètres) et roue de l'accueil : au néon des boutons du bas (menus.css),
   verre sombre bordé de cyan, symbole au trait cyan. Ils s'allument en bleu au toucher, et restent allumés
   tant que ce qu'ils font dure (Tris, 25/10) : son coupé, partie en pause, paramètres ouverts (.on, posé par
   app/main.js et app/menus/reglages.js). Sans filtre ni flou dans le bandeau : le jeu est repeint dessous. */
.arena-icon-btn{border-radius:9px;border:1px solid rgba(0,224,255,.2);background:rgba(18,16,36,.92);color:#7ff3ff;
 transition:border-color .12s,background-color .12s,box-shadow .12s;}
.arena-icon-btn:active,.arena-icon-btn.on,.arena-hud [data-act="sound"][aria-label="Activer le son"]{color:#fff;border-color:#00e0ff;
 background:linear-gradient(rgba(0,224,255,.22),rgba(0,224,255,.22)),rgba(18,16,36,.92);box-shadow:inset 0 0 0 1px #00e0ff,0 0 12px rgba(0,224,255,.4);}
@media (hover:hover){:where(html:not(.doigt)) .arena-icon-btn:hover{border-color:rgba(0,224,255,.55);background:linear-gradient(rgba(0,224,255,.1),rgba(0,224,255,.1)),rgba(18,16,36,.92);}}
.arena-icon-btn:focus-visible{outline:2px solid #00e0ff;}
/* Les paramètres ouverts par la roue du bandeau mettent la partie en pause : seule la roue s'allume. */
html.reglages-ouverts .arena-hud [data-act="pause"].on{color:#7ff3ff;border-color:rgba(0,224,255,.2);background:rgba(18,16,36,.92);box-shadow:none;}
.arena-stat{color:#9ea6bd;}

/* ---------- Fin de partie, téléphone couché : deux colonnes ----------
   Le tableau d'honneur garde jusqu'à 10 scores : en une colonne, la fiche dépassait l'écran et
   le classement défilait sous les boutons collés en bas. Couché, le score, le message et les
   statistiques (2 × 2) et le bilan de la partie (app/progression/progression.js) vont à gauche ; le classement
   à droite, à la hauteur de toute la colonne de gauche (bilan compris : sans lui, la colonne de
   droite s'arrêtait aux statistiques et laissait un trou au-dessus des boutons), et il défile
   seul ; les boutons (Accueil, Changer de perso, Atelier, Rejouer) restent dessous, toujours vus. */
@media (orientation:landscape){
 html.petit-ecran .arena-panel.p-fin{width:min(780px,100%);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);
  column-gap:14px;align-content:start;padding-top:20px;}
 html.petit-ecran .arena-panel.p-fin > *{grid-column:1;}
 html.petit-ecran .arena-panel.p-fin > .arena-actions,
 html.petit-ecran .arena-panel.p-fin > .arena-hint{grid-column:1 / -1;}
 html.petit-ecran .arena-panel.p-fin > [data-k="board"]{grid-column:2;grid-row:1 / span 5;align-self:stretch;
  height:0;min-height:100%;overflow:auto;overscroll-behavior:contain;touch-action:pan-y;}
 html.petit-ecran .arena-panel.p-fin > [data-k="board"]{display:flex;flex-direction:column;}
 html.petit-ecran .arena-panel.p-fin .arena-scores{margin:0;flex:none;} /* à la taille de ses lignes : pas de grand vide sous la 10e */
 html.petit-ecran .arena-panel.p-fin .arena-sdate{display:none;}
 html.petit-ecran .arena-panel.p-fin .arena-scores li{grid-template-columns:22px minmax(0,1fr) auto;padding:5px 8px;}
 html.petit-ecran .arena-over{margin:4px 0 0;}
 html.petit-ecran .arena-panel.p-fin .arena-score{margin:0;}
 html.petit-ecran .arena-panel.p-fin .arena-num{font-size:min(46px, var(--score-tient));}
 html.petit-ecran .arena-panel.p-fin .arena-msg{margin:2px 0 8px;font-size:13px;}
 html.petit-ecran .arena-panel.p-fin .arena-stats{grid-template-columns:repeat(2,1fr);gap:6px;}
 html.petit-ecran .arena-panel.p-fin .arena-stats div{padding:5px 10px;}
 html.petit-ecran .arena-panel.p-fin .arena-stats b{font-size:16px;}
 html.petit-ecran .arena-panel.p-fin .arena-actions{margin-top:10px;padding-top:8px;padding-bottom:6px;}
 html.petit-ecran .arena-panel.p-fin .arena-hint{margin-top:2px;}
 /* Avec le bilan : trois colonnes (score et statistiques, bilan, classement) sur toute la hauteur
    de l'écran ; le bilan et le classement défilent chacun dans leur colonne, la fiche ne défile
    plus (avant, elle défilait sous les boutons : le haut coupé, le bilan caché dessous). Le bilan
    et le classement s'arrêtent à leur dernière ligne : pas de grand cadre vide dessous. */
 html.petit-ecran .arena-panel.p-fin.p-bilan{width:min(1040px,100%);overflow:hidden;
  height:calc(100vh - 16px - env(safe-area-inset-top,0px));height:calc(var(--haut,100dvh) - 16px - env(safe-area-inset-top,0px));
  grid-template-columns:minmax(0,1fr) minmax(0,1.15fr) minmax(0,.95fr);grid-template-rows:auto auto auto 1fr auto auto;}
 html.petit-ecran .arena-panel.p-fin.p-bilan > .arena-stats{align-self:start;}
 html.petit-ecran .arena-panel.p-fin.p-bilan .arena-stats span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
 html.petit-ecran .arena-panel.p-fin.p-bilan > .bilan,
 html.petit-ecran .arena-panel.p-fin.p-bilan > [data-k="board"]{grid-row:1 / span 4;align-self:start;
  height:auto;max-height:100%;min-height:0;box-sizing:border-box;overflow:auto;overscroll-behavior:contain;touch-action:pan-y;}
 html.petit-ecran .arena-panel.p-fin.p-bilan > .bilan{grid-column:2;margin:0;}
 html.petit-ecran .arena-panel.p-fin.p-bilan > [data-k="board"]{grid-column:3;}
 /* Couché (Tris, 25/10 : « écran fin de partie tronqué en paysage ») : le bilan coupé en bas défilait dans sa
    colonne étroite pendant que le classement laissait un grand vide. Le classement passe sous les statistiques
    (à gauche) et le bilan prend les deux colonnes de droite, sur deux colonnes de texte, plus serré. */
 @media (orientation:landscape){
  html.petit-ecran .arena-panel.p-fin.p-bilan{grid-template-columns:minmax(0,.9fr) minmax(0,1fr) minmax(0,1fr);
   grid-template-rows:auto auto auto auto minmax(0,1fr) auto auto;}
  html.petit-ecran .arena-panel.p-fin.p-bilan > [data-k="board"]{grid-column:1;grid-row:5;align-self:stretch;margin-top:6px;}
  html.petit-ecran .arena-panel.p-fin.p-bilan > .bilan{grid-column:2 / span 2;grid-row:1 / span 5;align-self:start;
   display:block;column-count:2;column-gap:16px;column-fill:balance;padding:8px 12px;}
  html.petit-ecran .arena-panel.p-fin.p-bilan > .bilan > *{break-inside:avoid;margin:0 0 3px;}
  html.petit-ecran .arena-panel.p-fin.p-bilan > .bilan > .bilan-tete{column-span:all;margin-bottom:5px;}
  html.petit-ecran .arena-panel.p-fin.p-bilan .bilan-ligne{font-size:11.5px;line-height:1.25;}
  html.petit-ecran .arena-panel.p-fin.p-bilan .bilan-tete b{font-size:20px;}
  html.petit-ecran .arena-panel.p-fin.p-bilan .bilan-objectif{padding:4px 9px;margin-top:2px;font-size:11.5px;}
  html.petit-ecran .arena-panel.p-fin.p-bilan .bilan-ligne.ordre-reussi,
  html.petit-ecran .arena-panel.p-fin.p-bilan .bilan-ligne.rapport-neuf{padding:3px 7px;}
 }
 html.petit-ecran .arena-panel.p-fin.p-bilan > .arena-actions{grid-row:5;}
 html.petit-ecran .arena-panel.p-fin.p-bilan > .arena-hint{grid-row:6;}
 @media (orientation:landscape){ /* (après les deux règles du dessus : le classement prend la rangée 5) */
  html.petit-ecran .arena-panel.p-fin.p-bilan > .arena-actions{grid-row:6;}
  html.petit-ecran .arena-panel.p-fin.p-bilan > .arena-hint{grid-row:7;}
 }
}

/* ---------- Fin de partie : les boutons ----------
   Debout (et sur ordinateur) : Accueil, Changer de perso et Atelier en trois tuiles à icône
   (celles de l'accueil, app/menus/accueil.js : habillerFin), Rejouer en grand dessous, sous le pouce.
   Téléphone couché : une seule rangée, tuiles à icône à gauche du nom, Rejouer plus large à
   droite. Un point lumineux : les cristaux de la partie permettent un achat (comme à l'accueil). */
.arena-fin{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;}
.arena-fin .arena-btn{height:auto;}
.arena-fin .arena-btn:not(.primary){position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
 min-height:62px;padding:8px 4px 7px;border-radius:12px;font-size:12.5px;line-height:1.15;color:#dfe4f0;}
.arena-fin .primary{grid-column:1 / -1;min-height:54px;font-size:17px;letter-spacing:.16em;}
.arena-fin svg{flex:none;width:24px;height:24px;fill:none;stroke:#7ff3ff;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;
 filter:drop-shadow(0 0 3px rgba(0,224,255,.65));}
.arena-fin svg .plein{fill:#ffd23d;stroke:#ffd23d;stroke-width:1;filter:drop-shadow(0 0 2px rgba(255,210,61,.7));}
.arena-fin .arena-btn:focus-visible svg{stroke:#fff;}@media (hover:hover){:where(html:not(.doigt)) .arena-fin .arena-btn:hover svg{stroke:#fff;}}
.arena-fin .point::after{content:"";position:absolute;top:6px;right:8px;width:8px;height:8px;border-radius:50%;background:#ffd63d;
 box-shadow:0 0 8px #ffd63d;animation:accueil-point 1.6s infinite;}
html.petit-ecran .arena-fin .arena-btn:not(.primary){min-height:60px;}
@media (orientation:landscape) and (max-height:560px){
 .arena-fin{grid-template-columns:repeat(3,minmax(0,1fr)) minmax(0,1.35fr);}
 .arena-fin .primary{grid-column:auto;min-height:48px;font-size:15px;}
 .arena-fin .arena-btn:not(.primary),html.petit-ecran .arena-fin .arena-btn:not(.primary){flex-direction:row;gap:7px;min-height:48px;padding:4px 8px;}
 .arena-fin svg{width:21px;height:21px;}
 .arena-fin .point::after{top:5px;right:5px;}
}

/* Boutons du bas collés au bas de l'écran : fond opaque, celui du panneau (le fondu clair de
   petit-ecran.css laissait voir à travers les boutons ce qui défile dessous). */
html.petit-ecran .arena-actions{background:linear-gradient(180deg,rgba(8,7,18,0),#080712 8px);}

/* ---------- Menus harmonisés : le néon de l'arène partout ----------
   Accueil, choix du héros, pause, améliorations, fin de partie, scores : même verre sombre,
   même liseré cyan → violet → rose, mêmes boutons. Le bouton principal est cyan, arrondi, avec
   un halo (pas de coin coupé : il rognait le halo et laissait voir des coins). */
.arena-root{--arena-accent:linear-gradient(90deg,#00e0ff,#9a5cff 52%,#ff2fd0);}
/* Fond plein : le décor ne transparaît plus sous le texte (lisibilité). */
.arena-panel{background:linear-gradient(180deg,#0e0c1e,#080712);border:1px solid rgba(0,224,255,.18);
 box-shadow:0 22px 60px rgba(0,0,0,.6),0 0 40px rgba(0,224,255,.08);}
.arena-panel::before{box-shadow:0 0 16px rgba(0,224,255,.45);}
.arena-title{font-family:'Arial Black',Impact,system-ui,sans-serif;text-transform:uppercase;letter-spacing:.01em;}
.arena-btn{border-color:rgba(0,224,255,.2);background:rgba(255,255,255,.04);}
@media (hover:hover){:where(html:not(.doigt)) .arena-btn:hover{background:rgba(0,224,255,.08);border-color:rgba(0,224,255,.4);}}
.arena-btn:focus-visible{outline-color:#ff2fd0;}
.arena-btn.primary{border:0;border-radius:12px;color:#03141a;background:#00e0ff;font-weight:900;letter-spacing:.08em;text-transform:uppercase;text-shadow:none;
 box-shadow:0 0 22px rgba(0,224,255,.45);}
.arena-btn.primary:focus-visible{outline:none;background:#5beeff;}
@media (hover:hover){:where(html:not(.doigt)) .arena-btn.primary:hover{background:#5beeff;box-shadow:0 0 32px rgba(0,224,255,.65);}}
@media (hover:hover){:where(html:not(.doigt)) .arena-link:hover{color:#00e0ff;}}
.arena-volume input{accent-color:#00e0ff;}
.arena-over{color:#7ff3ff;}
.arena-of{color:#6b7390;}
.arena-record{color:#fff;}
.arena-hero.on{border-color:#00e0ff;background:rgba(0,224,255,.08);box-shadow:0 0 0 1px #00e0ff,0 0 22px rgba(0,224,255,.3);}
.arena-hero.on b{color:#7ff3ff;}
.arena-plus summary::before{border-color:#00e0ff;}
/* Le tableau vide s'aligne sur le titre, comme les autres textes des fenêtres. */
.arena-root .arena-panel .arena-empty{text-align:left;}

/* ---------- Choix du héros sur téléphone : les 18 sur un écran, sans défiler ----------
   Couché : 9 par ligne (2 lignes) ; debout : 4 par ligne. La phrase d'intro et la description
   de chaque héros sont masquées, le nom reste. */
html.petit-ecran .arena-panel.p-heros > p{display:none;}
html.petit-ecran .arena-panel.p-heros .arena-title{font-size:20px;margin:0 0 2px;}
html.petit-ecran .arena-heroes{gap:6px;margin:6px 0 0;}
html.petit-ecran .arena-hero{padding:3px 3px 5px;min-width:0;}
html.petit-ecran .arena-hero small{display:none;}
html.petit-ecran .arena-hero b{font-size:11px;max-width:100%;white-space:nowrap;}
@media (orientation:landscape){
 html.petit-ecran .arena-heroes{grid-template-columns:repeat(9,minmax(0,1fr));}
 html.petit-ecran .arena-hero canvas{max-width:none;}
}
/* Debout : 4 par ligne, la dernière ligne (2 héros) centrée ; 3 par ligne sur les téléphones les plus
   étroits, pour que les noms longs restent lisibles. */
@media (orientation:portrait){
 html.petit-ecran .arena-heroes{display:flex;flex-wrap:wrap;justify-content:center;}
 html.petit-ecran .arena-heroes .arena-hero{flex:0 0 calc((100% - 18px) / 4);box-sizing:border-box;}
}
@media (orientation:portrait) and (max-width:379px){
 html.petit-ecran .arena-heroes .arena-hero{flex-basis:calc((100% - 12px) / 3);}
}

/* ---------- Améliorations à niveaux ----------
   Carte : « niv. 2 » et trois crans (pleins : acquis ; brillant : celui qu'on prend). Pause : les
   améliorations acquises avec leurs crans, pour voir son héros progresser. Au doigt, pas de
   compteur d'esquive dans le bandeau (il n'y a pas d'esquive). */
.arena-up-pips{display:inline-flex;gap:3px;}
.arena-up-pips i{width:14px;height:5px;border-radius:2px;background:rgba(255,255,255,.14);}
.arena-up-pips i.on{background:var(--c);}
.arena-up-pips i.new{background:#fff;box-shadow:0 0 8px var(--c);}
.arena-mesups{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 2px;}
.arena-mesups > span{display:inline-flex;align-items:center;gap:6px;padding:4px 8px;border-radius:8px;font-size:12px;
 background:rgba(255,255,255,.05);border:1px solid color-mix(in srgb,var(--c) 45%,transparent);}
.arena-mesups b{font-weight:650;color:#e7e9ee;}
html.tactile .arena-stat-dash{display:none;}

/* Passage d'un écran à l'autre (app/menus/fondu.js) : le nouvel écran apparaît en fondu, l'ancien s'efface
   dessous, opacité seule (rien ne bouge ni ne grandit : aucun calcul pour le téléphone). L'ancien
   tient presque jusqu'au bout (ease-in) pendant que le nouveau monte vite (ease-out) : le décor ne
   perce pas entre les deux.
   « backwards » et non « both » (Redmi Note 15, 29/10) : une fois le fondu fini, l'opacité tenue à 1 par
   l'animation gardait l'écran entier dans une surface à part, dessinée hors de l'écran puis recopiée, à
   chaque image tant que le menu restait ouvert (l'accueil et sa démonstration : un écran de plus par image). */
.arena-root .arena-panel{animation:menu-entre .22s ease-out backwards;}
.arena-root .arena-fondu{z-index:29;pointer-events:none;}
.arena-root .arena-fondu > .arena-panel{animation:menu-sort .22s ease-in both;}
/* La copie toute prête de l'écran quitté (app/menus/glisser.js, copieDe) s'efface pareil, en entier. */
.arena-root .arena-sortie{animation:menu-sort .22s ease-in both;}
@keyframes menu-entre{from{opacity:0;}to{opacity:1;}}
@keyframes menu-sort{from{opacity:1;}to{opacity:0;}}
@media (prefers-reduced-motion:reduce){.arena-root .arena-panel{animation:none;}}
/* ---------- Menus en pleine page (choix de Tris, 15/10) ----------
   Persos, fiche, atelier, ordres, carrière : chaque fenêtre prend toute la place (même largeur, même
   hauteur), et son bas (actions et barre des menus, app/menus/menus.css) ne change pas de place d'un écran
   à l'autre. L'écran de fin (.arena-over) et la pause gardent leur taille. */
.arena-root .arena-panel.fiche-ecran,.arena-root .arena-panel.atelier-ecran,.arena-root .arena-panel.ordres-ecran,.arena-root .arena-panel.carriere-ecran,
.arena-root .arena-panel:has(> .arena-choix-heros),.arena-root .arena-panel:has(> [data-k="board"]):not(:has(.arena-over)){
 width:min(1120px,100%);height:calc(100vh - 32px);display:flex;flex-direction:column;}
html.petit-ecran .arena-root .arena-panel.fiche-ecran,html.petit-ecran .arena-root .arena-panel.atelier-ecran,html.petit-ecran .arena-root .arena-panel.ordres-ecran,
html.petit-ecran .arena-root .arena-panel.carriere-ecran,html.petit-ecran .arena-root .arena-panel:has(> .arena-choix-heros),
html.petit-ecran .arena-root .arena-panel:has(> [data-k="board"]):not(:has(.arena-over)){
 height:calc(100vh - 16px - env(safe-area-inset-top,0px));height:calc(var(--haut,100dvh) - 16px - env(safe-area-inset-top,0px));}
/* Le contenu remplit la fenêtre, le bas est poussé en bas. */
.arena-panel.fiche-ecran > *,.arena-panel.atelier-ecran > *,.arena-panel.ordres-ecran > *,.arena-panel.carriere-ecran > *,
.arena-panel.p-choix > *,.arena-panel.p-board > *{flex:none;}
.arena-panel.fiche-ecran > .fiche,.arena-panel.atelier-ecran > .atelier,.arena-panel.ordres-ecran > .ordres-ecran,.arena-panel.carriere-ecran > .carriere{flex-grow:1;}
/* ---------- Choix du perso sans défiler (demande de Tris, 17/10) ----------
   La grille des persos prend la hauteur qui reste entre le titre, les appuis et le bas ; chaque
   carte reste carrée, à la taille --carte calculée pour que toutes tiennent (ajusterChoix,
   app/menus/menus.js). Les rangées restent centrées (la dernière aussi). */
.arena-root .arena-panel > .arena-choix-heros.ajuste{flex:1 1 0;min-height:0;display:flex;flex-wrap:wrap;justify-content:center;align-content:flex-start;}
/* .arena-root devant : la règle passe avant celle du téléphone debout (4 par ligne, petit-ecran), qui
   rendait les cartes étroites et hautes dès que la grille n'avait pas la largeur attendue. */
.arena-root .arena-choix-heros.ajuste .arena-hero{flex:0 0 var(--carte);width:var(--carte);height:var(--carte);box-sizing:border-box;min-height:0;overflow:hidden;}
.arena-choix-heros.ajuste .arena-hero canvas{flex:1 1 0;min-height:0;width:100%;height:auto;max-width:none;aspect-ratio:auto;object-fit:contain;}
html .arena-root .arena-panel > .arena-choix-heros.ajuste{width:100%;margin-left:auto;margin-right:auto;}
.arena-choix-heros.ajuste .arena-hero b,.arena-choix-heros.ajuste .arena-hero small{flex:none;}
.arena-choix-heros.ajuste .arena-hero b{font-size:clamp(11px,calc(var(--carte) * .14),12.5px);}
/* Le nom prend aussi la marge intérieure de la carte : un nom long tient sur les cartes couchées de 800×360. */
.arena-root .arena-choix-heros.ajuste .arena-hero b{margin-left:-2px;margin-right:-2px;max-width:calc(100% + 4px);}
/* Le passage du menu à la partie et de la partie à l'accueil (app/menus/passage.js) : un voile sombre, par-dessus
   tout, qui couvre l'écran en fondu, le temps que la partie se prépare dessous, puis s'efface. Opacité
   seule (rien à recalculer) ; il prend les doigts tant qu'il couvre, plus pendant qu'il s'efface. */
.passage{display:none;position:fixed;inset:0;z-index:9800;background:#120c14;opacity:0;will-change:opacity;pointer-events:auto;touch-action:none;}
.passage.vu{display:block;}
.passage.entre{animation:passage-entre .22s ease-out both;}
.passage.sort{animation:passage-sort .38s ease-in-out both;pointer-events:none;}
@keyframes passage-entre{from{opacity:0;}to{opacity:1;}}
@keyframes passage-sort{from{opacity:1;}to{opacity:0;}}