/* app/multi/duel.css — le mode Duel (app/multi/duel.js, app/arene/modes/duel.js) : 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). */

.duel-contre{font-size:9px;font-weight:800;letter-spacing:.04em;color:#c9cfdf;text-transform:lowercase;}

/* ---------- 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){:where(html:not(.doigt)) .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;}
/* Le décompte des 5 dernières secondes (moteur, duelDecompte) : un grand chiffre au milieu, qui bat à chaque seconde. */
.duel-decompte{position:absolute;left:50%;top:50%;z-index:15;pointer-events:none;opacity:0;transform:translate(-50%,-50%);
 font:900 min(30vh,30vw)/1 system-ui,sans-serif;font-variant-numeric:tabular-nums;color:#fff;text-shadow:0 0 28px rgba(196,60,255,.85),0 0 6px rgba(0,0,0,.6);}
.duel-decompte.vu{animation:duel-decompte 1s ease-out forwards;}
@keyframes duel-decompte{0%{opacity:0;transform:translate(-50%,-50%) scale(1.5);}15%{opacity:.95;transform:translate(-50%,-50%) scale(1);}100%{opacity:.15;transform:translate(-50%,-50%) scale(.92);}}
@media (prefers-reduced-motion:reduce){.duel-decompte.vu{animation:none;opacity:.8;}}
/* 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;}
}