/* app/menus/petit-ecran.css — le jeu sur un téléphone (html.petit-ecran, posé par app/main.js quand
   le petit côté de l'écran fait moins de 560 px) : écrans plus serrés, défilement au doigt,
   bouton principal toujours visible en bas de l'écran. Chargée après arene.css. */
/* Hauteur des écrans : la zone de l'appareil photo (plein écran) s'ajoute au retrait du haut ;
   sans la retirer aussi de la hauteur, le bas de l'écran (bord, « Changer de perso ») sortait de l'écran. */
.arena-panel{touch-action:pan-y;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;}
html.petit-ecran .arena-panel-wrap{padding:calc(8px + env(safe-area-inset-top,0px)) calc(8px + env(safe-area-inset-right,0px)) 8px calc(8px + env(safe-area-inset-left,0px));}
html.petit-ecran .arena-panel{max-height:calc(100vh - 16px - env(safe-area-inset-top,0px));max-height:calc(var(--haut,100dvh) - 16px - env(safe-area-inset-top,0px));padding:24px 16px 0;border-radius:14px;}
html.petit-ecran .arena-panel.wide{padding:22px 16px 0;}
html.petit-ecran .arena-panel::before{top:10px;}
html.petit-ecran .arena-title{font-size:24px;margin:4px 0 6px;}
html.petit-ecran .arena-panel p{font-size:13px;line-height:1.45;}
/* Boutons du bas collés au bas de l'écran, sur un fond qui cache ce qui défile dessous. */
html.petit-ecran .arena-actions{position:sticky;bottom:0;z-index:2;margin:14px -16px 0;padding:10px 16px calc(12px + env(safe-area-inset-bottom,0px));
 background:linear-gradient(180deg,rgba(24,22,32,0),#191722 30%);}
html.petit-ecran .arena-actions .arena-btn{min-height:44px;flex:1;}
html.petit-ecran .arena-hint{padding-bottom:10px;}
/* Choix du héros couché : 6 par ligne, cartes plus basses ; le reste défile. */
@media (orientation:landscape){
 html.petit-ecran .arena-heroes{grid-template-columns:repeat(6,minmax(0,1fr));gap:6px;margin-top:8px;}
 html.petit-ecran .arena-hero{padding:4px 4px 6px;}
 html.petit-ecran .arena-hero canvas{max-width:84px;}
 html.petit-ecran .arena-hero small{display:none;}
}
/* Fin de partie : score moins haut, statistiques sur une ligne, champ du nom bien visible. */
html.petit-ecran .arena-num{font-size:min(56px, var(--score-tient));} /* plafonds : voir .arena-score (arene.css) */
html.petit-ecran .arena-stats{grid-template-columns:repeat(4,1fr);gap:6px;}
@media (max-width:480px){html.petit-ecran .arena-stats{grid-template-columns:repeat(2,1fr);}}

/* Bandeau de jeu : temps et points, les trois jauges, l'arme, les grenades, les boutons (leur
   place : app/menus/habillage.css). Ici, la taille des éléments sur un téléphone. */
html.petit-ecran .arena-hud{gap:8px;padding:env(safe-area-inset-top,0px) calc(8px + env(safe-area-inset-right,0px)) 4px calc(8px + env(safe-area-inset-left,0px));}
html.petit-ecran .arena-hud-l{gap:6px;}
html.petit-ecran .arena-hud-time{font-size:18px;}
html.petit-ecran .arena-hud-sub{display:flex;}
html.petit-ecran .arena-hud-lvl,html.petit-ecran .arena-hud-xpt{display:none;}
html.petit-ecran .arena-hud-wp{padding:3px 8px;height:28px;}
html.petit-ecran .arena-icon-btn{width:30px;height:30px;}
/* Grenades, le compteur sur un petit écran. */
html.petit-ecran .arena-hud-gren{height:28px;padding:2px 8px 2px 4px;}
html.petit-ecran .arena-hud-gren .arena-ico{width:30px;height:20px;}
@media (max-width:480px){
 html.petit-ecran .arena-hud-gren{gap:3px;padding:2px 6px 2px 3px;}
 html.petit-ecran .arena-hud-gren .arena-ico{width:22px;height:15px;margin:0 -2px;}
 html.petit-ecran .arena-hud-gren b{font-size:14px;}
}