/* app/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/petit-ecran.css. */

/* ---------- Accueil au doigt : le détail se replie (app/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 ---------- */
.arena-hud{background:linear-gradient(180deg,rgba(12,8,14,.92),rgba(12,8,14,.78));backdrop-filter:blur(6px);
 box-shadow:0 1px 0 rgba(255,255,255,.06),0 8px 24px rgba(0,0,0,.4);}
.arena-hud-time{font-size:22px;letter-spacing:.04em;text-shadow:0 2px 0 rgba(0,0,0,.6);}
.arena-hud-pts{color:#ffd23d;text-shadow:0 0 8px rgba(255,190,40,.35);}

/* Jauges : capsules biseautées, reflet en haut, crans fins, pastille d'icône à gauche. */
.arena-gauge{position:relative;}
.arena-gauge-track{height:20px;border:0;border-radius:999px;background:linear-gradient(180deg,#1c141d,#2a1f2b);
 box-shadow:inset 0 2px 4px rgba(0,0,0,.6),0 0 0 2px rgba(255,255,255,.12),0 2px 6px rgba(0,0,0,.5);}
.arena-gauge-track i{border-radius:999px;transition:width .25s cubic-bezier(.3,.7,.4,1);}
.arena-gauge-track i::after{content:"";position:absolute;left:6px;right:6px;top:2px;height:35%;border-radius:999px;
 background:linear-gradient(180deg,rgba(255,255,255,.55),rgba(255,255,255,0));}
.arena-gauge-track em{background:repeating-linear-gradient(90deg,transparent 0 calc(10% - 1px),rgba(0,0,0,.35) calc(10% - 1px) 10%);
 border-radius:999px;}
.arena-gauge-track b{font-size:11px;letter-spacing:.06em;text-shadow:0 1px 0 rgba(0,0,0,.8),0 0 6px rgba(0,0,0,.6);}

.arena-gauge-hp i{background:linear-gradient(90deg,#ff2d55,#ff5d7e 60%,#ff8aa3);box-shadow:0 0 10px rgba(255,60,100,.55);}
.arena-gauge-hp.tank i{background:linear-gradient(90deg,#7d9a3a,#a9c454 60%,#d3e78a);box-shadow:0 0 10px rgba(170,210,80,.5);}
.arena-gauge-hp::before{content:"♥";position:relative;z-index:1;flex:none;display:grid;place-items:center;width:26px;height:26px;
 margin-right:-14px;border-radius:50%;font-size:14px;color:#fff;background:radial-gradient(circle at 35% 30%,#ff7d98,#d0103e);
 box-shadow:0 0 0 2px #1a1019,0 2px 6px rgba(0,0,0,.6);}
.arena-gauge-hp .arena-gauge-track{padding-left:10px;}

.arena-gauge-vest .arena-gauge-track{border:0;}
.arena-gauge-vest i{background:linear-gradient(90deg,#2f6bff,#4f9bff 60%,#8cd0ff);box-shadow:0 0 10px rgba(80,150,255,.6);}
.arena-gauge-vest::before{content:"";position:relative;z-index:1;flex:none;width:26px;height:26px;margin-right:-14px;border-radius:50%;
 background:
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' 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/14px no-repeat,
  radial-gradient(circle at 35% 30%,#8cc8ff,#2a5de0);
 box-shadow:0 0 0 2px #1a1019,0 2px 6px rgba(0,0,0,.6);}
.arena-gauge-vest.hit .arena-gauge-track{box-shadow:inset 0 2px 4px rgba(0,0,0,.6),0 0 0 2px #8cc8ff,0 0 16px rgba(80,150,255,.9);}

/* Arme : étiquette vitrée, liseré à la couleur de l'arme. */
.arena-hud-wp{border:0;border-radius:999px;background:linear-gradient(180deg,rgba(255,255,255,.1),rgba(255,255,255,.03));
 box-shadow:inset 0 0 0 2px var(--wc,#ff356d),0 0 12px color-mix(in srgb,var(--wc,#ff356d) 45%,transparent);}
.arena-hud-wpl i{border-radius:2px;box-shadow:0 0 6px rgba(255,214,61,.6);}
.arena-hud-wpl i.off{box-shadow:none;}

/* Boutons du bandeau : ronds, vitrés. */
.arena-icon-btn{border-radius:50%;background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.14);}
.arena-gauge .arena-ico{display:none;}
/* Debout : temps et points gardent leur place ; le gilet reste visible, en petite jauge sans texte. */
html.petit-ecran .arena-hud-l{flex:none;}
@media (max-width:480px){
 html.petit-ecran .arena-hud{gap:6px;}
 html.petit-ecran .arena-gauge-vest:not([hidden]){display:flex;flex:0 1 76px;min-width:60px;}
 html.petit-ecran .arena-gauge-vest .arena-gauge-track{width:auto;min-width:30px;flex:1 1 40px;}
 html.petit-ecran .arena-gauge-vest b{display:none;}
 html.petit-ecran .arena-gauge-hp .arena-gauge-track b{font-size:10px;}
 html.petit-ecran .arena-hud-wp{padding:3px 6px;}
}