/* app/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. */
.arena-panel{touch-action:pan-y;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;}
html.petit-ecran .arena-panel-wrap{padding:8px 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);max-height:calc(var(--haut,100dvh) - 16px);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:56px;}
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);}}
/* Champ du nom : sélectionnable et saisissable (le jeu interdit la sélection ailleurs), 16 px
   pour que le téléphone n'agrandisse pas la page en l'ouvrant. */
.arena-name input{user-select:text;-webkit-user-select:text;touch-action:manipulation;font-size:16px;}

/* Bandeau de jeu (46 px de haut) : temps et points, jauge de vie souple, arme, son, pause,
   quitter ; tout tient sur la largeur d'un téléphone debout. */
html.petit-ecran .arena-hud{gap:8px;padding:0 calc(8px + env(safe-area-inset-right,0px)) 4px calc(8px + env(safe-area-inset-left,0px));}
html.petit-ecran .arena-hud-l{min-width:0;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-gauge{flex:1 1 auto;min-width:0;gap:4px;}
html.petit-ecran .arena-gauge .arena-ico{display:none;}
html.petit-ecran .arena-gauge-track{width:100%;max-width:250px;min-width:70px;height:20px;}
html.petit-ecran .arena-gauge-track b{font-size:11px;}
html.petit-ecran .arena-hud-wp{margin-left:0;padding:3px 8px;height:28px;}
html.petit-ecran .arena-icon-btn{width:30px;height:30px;}
@media (max-width:480px){
 html.petit-ecran .arena-gauge-vest,html.petit-ecran .arena-gauge-boss{display:none;}
 html.petit-ecran .arena-hud-wpl{display:none;}
}