/* app/duel.css — le mode Duel (app/duel.js, « Duel » dans app/arene/arene.js) : la tuile de l'accueil (seulement
   avec deux manettes), l'écran Duel, le bandeau du duel (classe duel du bandeau, posée par le moteur), la bande du
   bas de J1 quand l'écran est debout (html.duel-debout, posée par app/main.js), l'écran de fin.
   J1 cyan, J2 orange (ESC_COULEURS dans le moteur). Des barres pleines, sans liseré (Tris, 25/10). */

/* L'accueil : Escouade et Duel l'un sous l'autre, à droite de « Déployer » (couché) ; debout, côte à côte sous lui. */
.accueil-deux,.accueil-duel{display:none;}
html.deux-manettes .accueil-deux{display:flex;flex-direction:column;gap:6px;flex:0 0 auto;}
html.deux-manettes .accueil-deux .arena-btn{flex:1 1 0;min-height:0;}
html.deux-manettes .accueil-duel{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;height:auto;padding:6px 12px;font-size:13px;letter-spacing:.06em;}
.accueil-duel span{display:flex;align-items:center;gap:4px;}
.duel-contre{font-size:9px;font-weight:800;letter-spacing:.04em;color:#c9cfdf;text-transform:lowercase;}
/* Couché (Tris, 25/10 : « améliorer la lisibilité ») : chaque tuile sur une ligne, les pastilles devant le nom,
   rien ne se chevauche dans la demi-hauteur de « Déployer ». */
@media (orientation:landscape){
 html.deux-manettes .accueil-deux .arena-btn.accueil-escouade,html.deux-manettes .accueil-deux .arena-btn.accueil-duel{flex-direction:row;gap:7px;padding:4px 10px;
  font-size:14px;letter-spacing:.03em;line-height:1;white-space:nowrap;}
 html.deux-manettes .accueil-deux span{flex-direction:column;gap:2px;}
 html.deux-manettes .accueil-deux .escouade-pastille{min-width:20px;height:13px;padding:0 3px;font-size:9px;border-radius:7px;}
 html.deux-manettes .accueil-duel .duel-contre{display:none;}
}
@media (orientation:portrait){
 html.deux-manettes .accueil-deux{flex-direction:row;}
 html.deux-manettes .accueil-duel{flex-direction:row;gap:8px;min-height:40px;}
}

/* ---------- L'écran Duel ---------- */
.duel-ecran .duel-aide{margin:4px 0 8px;font-size:13px;color:#c9cfdf;}
.duel-grille{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:10px;align-items:start;}
.duel-reglages,.duel-joueurs{display:flex;flex-direction:column;gap:5px;min-width:0;}
.duel-joueurs{gap:8px;}
.duel-rang{display:flex;align-items:center;gap:6px;min-height:36px;padding:3px 5px 3px 9px;border-radius:10px;box-sizing:border-box;
 background:rgba(18,16,36,.7);border:1px solid rgba(255,255,255,.08);}
.duel-lib{flex:1 1 auto;min-width:0;font-size:13px;color:#c9cfdf;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.duel-val{flex:0 0 116px;display:flex;align-items:center;justify-content:center;gap:6px;min-width:0;font-size:14px;font-weight:800;color:#fff;text-align:center;white-space:nowrap;}
.duel-val b{min-width:0;overflow:hidden;text-overflow:ellipsis;}
.duel-val .arena-ico{width:34px;height:17px;flex:none;}
.duel-fleche{flex:none;width:32px;height:30px;padding:0;border-radius:8px;cursor:pointer;font:900 20px/1 system-ui,sans-serif;color:#d9f8ff;
 background:rgba(255,255,255,.05);border:1px solid rgba(0,224,255,.3);}
.duel-fleche:active{background:rgba(0,224,255,.2);}
@media (hover:hover){.duel-fleche:hover{border-color:#00e0ff;background:rgba(0,224,255,.12);}}
.duel-joueur{display:flex;flex-direction:column;gap:5px;padding:6px 7px 7px;border-radius:12px;background:rgba(18,16,36,.55);}
.duel-joueur.j1{border:1px solid rgba(70,230,240,.4);}
.duel-joueur.j2{border:1px solid rgba(255,154,60,.4);}
.duel-tete{display:flex;align-items:center;gap:7px;font-size:13px;}
.duel-tete small{color:#9ea6bd;}
.duel-joueur .duel-rang{padding-left:5px;}
.duel-joueur .duel-val{flex:1 1 auto;justify-content:flex-start;}
.duel-joueur canvas{flex:none;width:40px;height:40px;margin:-4px 0;}
.duel-joueur.j1 .duel-val b{color:#7ff3ff;}
.duel-joueur.j2 .duel-val b{color:#ffc58a;}
.duel-regles{margin:10px 0 4px;padding-left:18px;font-size:12.5px;line-height:1.35;color:#c9cfdf;}
.duel-regles li{margin:2px 0;}
/* Debout : les réglages, puis les deux joueurs côte à côte. */
@media (orientation:portrait){
 .duel-grille{grid-template-columns:1fr;}
 .duel-joueurs{flex-direction:row;}
 .duel-joueur{flex:1 1 0;min-width:0;}
 .duel-joueur .duel-rang{padding:3px;gap:3px;}
 .duel-joueur .duel-fleche{width:26px;}
 .duel-joueur canvas{width:34px;height:34px;}
 .duel-joueur .duel-val{font-size:12.5px;gap:4px;}
 .duel-joueur .duel-val .arena-ico{width:28px;height:14px;}
 /* Étroit : « manette N » caché, les noms longs sur deux lignes plutôt que coupés. */
 .duel-tete{white-space:nowrap;}
 .duel-joueur .duel-val b{white-space:normal;line-height:1.1;font-size:12px;overflow-wrap:anywhere;}
}
@media (orientation:portrait) and (max-width:480px){
 .duel-tete small{display:none;}
}
/* Téléphone couché (peu de hauteur) : tout tient sans défiler, l'aide et les règles cachées. */
@media (max-height:520px){
 .duel-ecran .duel-aide,.duel-ecran .duel-regles,.duel-ecran .escouade-manque{display:none;}
 .duel-reglages{gap:3px;}
 .duel-rang{min-height:30px;padding-top:1px;padding-bottom:1px;}
 .duel-fleche{height:26px;}
 .duel-joueurs{gap:5px;}
 .duel-joueur{padding:4px 6px 5px;gap:3px;}
 .duel-joueur canvas{width:30px;height:30px;}
}
/* Les curseurs des manettes (app/manette/manette-jeu.js) : la ligne ou le bouton visé, à la couleur du joueur. */
.duel-rang.manette-j1{border-color:#46e6f0;box-shadow:0 0 0 1px #46e6f0,0 0 16px rgba(70,230,240,.3);}
.duel-rang.manette-j2{border-color:#ff9a3c;box-shadow:0 0 0 1px #ff9a3c,0 0 16px rgba(255,154,60,.3);}
.duel-rang.manette-j1.manette-j2{box-shadow:0 0 0 1px #46e6f0,0 0 0 4px #ff9a3c;}
.duel-ecran .arena-btn.manette-j1{outline:3px solid #46e6f0;outline-offset:2px;}
.duel-ecran .arena-btn.manette-j2{outline:3px solid #ff9a3c;outline-offset:2px;}
.duel-ecran .arena-btn.manette-j1.manette-j2{outline-color:#46e6f0;box-shadow:0 0 0 7px #ff9a3c;}

/* ---------- Le bandeau du duel ----------
   Couché : J1 à gauche, le score et le temps au milieu, J2 à droite (sa barre se vide vers la droite), les
   boutons au bout. Debout : J2 et le score en haut, J1 dans la bande du bas. */
.duel-hud,.duel-bas{display:none;}
.arena-hud.duel > :not(.duel-hud):not(.arena-hud-btns){display:none !important;}
.arena-hud.duel .duel-hud{display:contents;}
.arena-hud.duel,html.petit-ecran .arena-hud.duel{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) auto;grid-template-rows:auto;grid-template-areas:"j1 score j2 btns";column-gap:14px;}
.arena-hud.duel .duel-carte.j1{grid-area:j1;}
.arena-hud.duel .duel-carte.j2{grid-area:j2;}
.arena-hud.duel .duel-score{grid-area:score;}
.duel-score{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;line-height:1;white-space:nowrap;}
.duel-score span{display:flex;align-items:baseline;gap:7px;font:900 24px/1 system-ui,sans-serif;}
.duel-score i{font-style:normal;color:#9ea6bd;font-size:16px;}
.duel-score .j1{color:#46e6f0;}
.duel-score .j2{color:#ff9a3c;}
.duel-score small{font-size:11px;font-weight:700;color:#c9cfdf;letter-spacing:.03em;}
/* Une carte : pastille, perso, arme et grenades, PV ; la vie (à la couleur du joueur), le plastron (bleu) dessous. */
.duel-carte{text-transform:none;letter-spacing:normal;display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;grid-template-rows:15px 7px 3px;column-gap:6px;row-gap:2px;align-items:center;align-content:center;min-width:0;}
.duel-carte .escouade-pastille{grid-row:1;grid-column:1;height:15px;min-width:22px;font-size:10px;}
.duel-ligne{display:contents;}
.duel-nom{grid-row:1;grid-column:2;min-width:0;font-size:12.5px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.duel-info{grid-row:1;grid-column:3;font-size:10.5px;color:#9ea6bd;white-space:nowrap;}
.duel-pv{grid-row:1;grid-column:4;font:900 14px/1 system-ui,sans-serif;font-variant-numeric:tabular-nums;color:#fff;}
.duel-vie,.duel-pl{grid-column:1 / -1;position:relative;overflow:hidden;border-radius:3px;background:rgba(255,255,255,.1);}
.duel-vie{grid-row:2;height:7px;}
.duel-pl{grid-row:3;height:3px;border-radius:2px;}
.duel-vie i,.duel-pl i{position:absolute;inset:0;transform-origin:left center;}
.duel-carte.j1 .duel-nom{color:#7ff3ff;}
.duel-carte.j2 .duel-nom{color:#ffc58a;}
.duel-carte.j1 .duel-vie i{background:linear-gradient(90deg,#1aa9c4,#46e6f0 60%,#a6f7ff);}
.duel-carte.j2 .duel-vie i{background:linear-gradient(90deg,#d8661a,#ff9a3c 60%,#ffc58a);}
.duel-pl i{background:#7fb4ff;}
/* Chez l'autre : la vie fond, la carte rougit. */
.duel-carte.chez .duel-vie i{background:#ff5a5a;}
.duel-carte.chez .duel-pv{color:#ff7a7a;animation:vie-basse .5s ease-in-out infinite alternate;}
/* Couché, la carte de J2 se lit depuis la droite : pastille au bord, barre qui se vide vers la droite. */
html:not(.duel-debout) .arena-hud.duel .duel-carte.j2{direction:rtl;}
html:not(.duel-debout) .arena-hud.duel .duel-carte.j2 > *{direction:ltr;}
html:not(.duel-debout) .arena-hud.duel .duel-carte.j2 :is(.duel-vie,.duel-pl) i{transform-origin:right center;}
/* Debout : J2 et le score en haut (le score à gauche de l'appareil photo, sur téléphone), J1 en bas. */
html.duel-debout .arena-hud.duel{grid-template-columns:minmax(0,1fr) auto auto;grid-template-areas:"j2 score btns";}
@media (max-width:480px){
 html.petit-ecran.duel-debout .arena-hud.duel{grid-template-columns:auto minmax(0,1fr) auto;grid-template-rows:var(--r1) 32px;grid-template-areas:"score . btns" "j2 j2 j2";}
 html.petit-ecran.duel-debout .arena-hud.duel .duel-score{flex-direction:row;gap:8px;justify-self:start;align-self:center;}
 html.petit-ecran.duel-debout .arena-hud.duel .duel-score span{font-size:20px;}
}
html.duel-debout .arena-root.playing .duel-bas{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:20;box-sizing:border-box;height:var(--duel-bas,44px);
 align-items:center;padding:4px calc(10px + env(safe-area-inset-right,0px)) calc(4px + env(safe-area-inset-bottom,0px)) calc(10px + env(safe-area-inset-left,0px));
 background:linear-gradient(0deg,#06050d,#0b0a18);box-shadow:0 -10px 26px rgba(0,0,0,.45);}
.duel-bas .duel-carte{flex:1 1 auto;}
/* La pause : le score aux couleurs des joueurs. */
.duel-j1{color:#7ff3ff;}
.duel-j2{color:#ffc58a;}

/* ---------- L'écran de fin du duel ---------- */
.arena-panel.duel-fin{text-align:center;}
.duel-fin-titre{margin:2px 0 4px;font:900 26px/1.1 system-ui,sans-serif;letter-spacing:.08em;text-transform:uppercase;}
.duel-fin-titre.j1{color:#46e6f0;text-shadow:0 0 22px rgba(70,230,240,.45);}
.duel-fin-titre.j2{color:#ff9a3c;text-shadow:0 0 22px rgba(255,154,60,.45);}
.duel-fin-score{display:flex;justify-content:center;align-items:baseline;gap:16px;margin:4px 0;font:900 58px/1 system-ui,sans-serif;font-variant-numeric:tabular-nums;}
.duel-fin-score span{font-size:30px;color:#9ea6bd;}
.duel-fin-score .j1,.duel-fin-persos .j1,.duel-fin-stats td.j1{color:#46e6f0;}
.duel-fin-score .j2,.duel-fin-persos .j2,.duel-fin-stats td.j2{color:#ff9a3c;}
.duel-fin-persos{margin:2px 0 8px;font-size:13px;color:#c9cfdf;}
.duel-fin-stats{width:100%;max-width:420px;margin:0 auto 10px;border-collapse:collapse;font-size:13px;}
.duel-fin-stats th{font-weight:600;color:#c9cfdf;padding:4px 6px;}
.duel-fin-stats td{width:25%;font-weight:900;font-variant-numeric:tabular-nums;padding:4px 6px;}
.duel-fin-stats tr + tr{border-top:1px solid rgba(255,255,255,.07);}
/* Couché (Tris, 25/10) : l'écran de fin prend toute la hauteur ; le vainqueur et le score à gauche, les chiffres à droite. */
@media (orientation:landscape){
 .arena-panel.duel-fin{width:min(980px,100%);height:100%;max-height:none;display:flex;flex-direction:column;justify-content:center;}
 .duel-fin-corps{flex:1 1 auto;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:24px;align-items:center;min-height:0;}
 .duel-fin-stats{margin:0 auto;font-size:15px;}
 .duel-fin-stats th,.duel-fin-stats td{padding:7px 8px;}
 .duel-fin-score{font-size:84px;}
 .duel-fin-score span{font-size:40px;}
 .duel-fin-titre{font-size:30px;}
 .duel-fin .arena-actions{flex:none;margin-top:12px;}
}
@media (max-height:520px){
 .arena-panel.duel-fin{padding-top:22px;padding-bottom:14px;}
 .duel-fin-score{font-size:64px;}
 .duel-fin-stats{font-size:12px;}
 .duel-fin-stats th,.duel-fin-stats td{padding:2px 6px;}
}