/* ==========================================================================
   PEE.CHAT · Battle Camera, retouches du 11/10/2026 (agent « battle »)
   1. Le widget ne saute plus : l'animation d'entree n'est jouee qu'a l'entree (pas a chaque mise a jour).
   2. Le chat passe au-dessus : sur telephone / tablette il vient juste sous les cameras (avant le panneau
      des tips), sur ordinateur il reste colle a l'ecran pendant qu'on descend vers les tips.
   3. Rubrique admin « Battle Camera » (vue d'ensemble, mises, battles bloquees), meme style que « Unlock content ».
   ========================================================================== */

/* ---- 1. pas d'animation rejouee quand l'etat se met a jour ---- */
#battlePanel .bc-bt.bc-still, #battlePanel .bc-wrap.bc-still, #battlePanel .bc-wrap.bc-load { animation: none !important; }

/* ---- 2. le chat ---- */
#battlePanel .bc-bt .bc-chs { position: relative; z-index: 2; }
@media (min-width: 901px) {
    #battlePanel .bc-bt .bc-chs { position: sticky; top: 10px; }
}
@media (max-width: 900px) {
    /* ordre : cameras, barre de score, CHAT, puis soutien (camp, votes, tips) */
    #battlePanel .bc-bt .bc-body { display: flex; flex-direction: column; align-items: stretch; gap: 10px; }
    #battlePanel .bc-bt .bc-main { display: contents; }
    #battlePanel .bc-bt .bc-stage { order: 1; width: 100%; }
    #battlePanel .bc-bt .bc-main > .bc-sbar { order: 2; }
    #battlePanel .bc-bt .bc-chs { order: 3; height: clamp(250px, 40vh, 420px); height: clamp(250px, 40dvh, 420px); }
    #battlePanel .bc-bt [data-slot="sup"] { order: 4; }
}
@media (max-width: 768px) {
    /* scene un peu moins haute : cameras + chat (avec sa saisie) tiennent dans le premier ecran */
    #battlePanel .bc-bt .bc-stage { height: min(48vh, 460px); height: min(48dvh, 460px); min-height: 300px; }
    #battlePanel .bc-bt .bc-chs { height: clamp(220px, 34vh, 380px); height: clamp(220px, 34dvh, 380px); }
    #battlePanel .bc-bt .bc-chs-t button { padding: .36rem; }
    #battlePanel .bc-bt .bc-chi { padding: 6px 8px; }
}

/* ---- accord des conditions sur ordinateur : la scene s'agrandit le temps de l'accord (la carte n'est plus ecrasee) ---- */
@media (min-width: 769px) {
    #battlePanel .bc-bt .bc-stage:has(> .bc-terms .bc-terms-c) { aspect-ratio: auto; height: 470px; min-height: 0; }
}

/* ---- 3. admin « Battle Camera » ---- */
.admin-tab[data-tab="battle"] .bci, .admin-tab[data-tab="unlock"] .xb-tic { vertical-align: -3px; margin-right: 6px; }
.admin-tab .xb-tic { display: inline-flex; width: 15px; height: 15px; }
.admin-tab .xb-tic svg { width: 15px; height: 15px; }
.admin-tab.active .xb-tic svg * { stroke: #0A0A0A !important; }
/* Unlock content (paid-hub.js) : la 5e carte de stats seule sur sa ligne est centree sur toute la largeur (symetrie) */
@media (max-width: 1100px) { #adminUnlockTab .ua-stats > .ua-sc:last-child:nth-child(odd) { grid-column: 1 / -1; } }
#adminBattleTab.xb { text-align: center; }
#adminBattleTab .xb-stats { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; margin-bottom: 10px; }
#adminBattleTab .xb-sc { background: linear-gradient(160deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .01)), #111; border-radius: 12px; padding: .65rem .6rem; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05); display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 0; }
#adminBattleTab .xb-sc span { font: 600 .6rem Rajdhani, sans-serif; color: rgba(255, 255, 255, .5); text-transform: uppercase; letter-spacing: 1px; }
#adminBattleTab .xb-sc b { font: 800 .95rem Orbitron, sans-serif; color: #FF6B35; display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
#adminBattleTab .xb-sc small { font-size: .66rem; color: rgba(255, 255, 255, .5); display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
#adminBattleTab .xb-sc.warn b { color: #F7C948; }
#adminBattleTab .xb-sc.bad b { color: #FF6B6B; }
#adminBattleTab .xb-sc.live b i { width: 8px; height: 8px; border-radius: 50%; background: #FF3B3B; box-shadow: 0 0 0 3px rgba(255, 59, 59, .2); animation: xbPulse 1.4s ease-in-out infinite; }
@keyframes xbPulse { 50% { box-shadow: 0 0 0 6px rgba(255, 59, 59, 0); } }
#adminBattleTab .xb-chips { display: flex; gap: 5px; flex-wrap: wrap; margin-bottom: 10px; align-items: center; justify-content: center; }
#adminBattleTab .xb-sg { display: inline-flex; align-items: center; gap: .3rem; padding: 5px 11px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .12); background: linear-gradient(145deg, #222, #151515); color: rgba(255, 255, 255, .78); font: 700 .74rem Rajdhani, sans-serif; cursor: pointer; white-space: nowrap; }
#adminBattleTab .xb-sg.on { background: linear-gradient(135deg, #FF6B35, #F7C948); color: #0A0A0A; border-color: transparent; }
#adminBattleTab .xb-sg em { font-style: normal; font: 800 .56rem Orbitron, sans-serif; opacity: .75; }
#adminBattleTab .xb-sg.alert:not(.on) em { color: #F7C948; opacity: 1; }
#adminBattleTab .xb-tools { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; justify-content: center; margin-bottom: 10px; padding: 8px 10px; border-radius: 12px; background: rgba(255, 255, 255, .03); }
#adminBattleTab .xb-in { background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .1); border-radius: 8px; padding: .4rem .65rem; color: #fff; font-size: .76rem; color-scheme: dark; outline: none; }
#adminBattleTab .xb-in:focus { border-color: #FF6B35; }
#adminBattleTab .xb-in.q { flex: 0 1 260px; min-width: 150px; }
#adminBattleTab .xb-l { font: 800 .52rem Orbitron, sans-serif; letter-spacing: .14em; color: rgba(255, 255, 255, .4); margin: 0 2px; }
#adminBattleTab .xb-tw { overflow-x: auto; border-radius: 12px; background: #111; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05); margin-bottom: 10px; }
#adminBattleTab .xb-t { width: 100%; border-collapse: collapse; font-size: .74rem; min-width: 860px; }
#adminBattleTab .xb-t th { font: 800 .52rem Orbitron, sans-serif; letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 255, 255, .45); text-align: center; padding: 8px; background: rgba(255, 255, 255, .03); white-space: nowrap; }
#adminBattleTab .xb-t td { padding: 8px; border-top: 1px solid rgba(255, 107, 53, .06); vertical-align: middle; color: rgba(255, 255, 255, .84); text-align: center; }
#adminBattleTab .xb-t tr.xb-open > td { background: rgba(255, 107, 53, .05); }
#adminBattleTab .xb-t tr.xb-det > td { background: #0c0c0c; padding: 10px 12px 12px; }
#adminBattleTab .xb-b { display: flex; flex-direction: column; align-items: center; gap: 3px; }
#adminBattleTab .xb-b .bc-duo b { max-width: 10ch; }
#adminBattleTab .xb-b small, #adminBattleTab .xb-dim { color: rgba(255, 255, 255, .42); font-size: .64rem; }
#adminBattleTab .xb-mono { font-family: ui-monospace, Menlo, monospace; font-size: .6rem; }
#adminBattleTab .xb-c { display: inline-flex; align-items: center; justify-content: center; gap: 4px; white-space: nowrap; }
#adminBattleTab .xb-c .bc-coinlogo { width: 13px; height: 13px; font-size: 13px; }
#adminBattleTab .xb-coins { display: flex; flex-direction: column; align-items: center; gap: 2px; }
#adminBattleTab .xb-act { display: flex; gap: 4px; flex-wrap: wrap; justify-content: center; }
#adminBattleTab .xb-btn { display: inline-flex; align-items: center; justify-content: center; gap: 5px; padding: 6px 11px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .12); background: linear-gradient(145deg, #252525, #141414); color: #fff; font: 800 .72rem Rajdhani, sans-serif; cursor: pointer; white-space: nowrap; }
#adminBattleTab .xb-btn.h { background: linear-gradient(135deg, #FF6B35, #F7C948); color: #0A0A0A; border-color: transparent; }
#adminBattleTab .xb-btn.r { color: #FF7A7A; }
#adminBattleTab .xb-btn.b { color: #8EC5FF; }
#adminBattleTab .xb-btn:disabled { opacity: .45; cursor: default; }
#adminBattleTab .xb-badge { display: inline-block; padding: .14rem .45rem; border-radius: 4px; font-size: .56rem; font-weight: 800; letter-spacing: .5px; text-transform: uppercase; white-space: nowrap; }
#adminBattleTab .xb-live { background: rgba(255, 59, 59, .12); color: #FF5555; border: 1px solid rgba(255, 59, 59, .3); }
#adminBattleTab .xb-ok { background: rgba(0, 200, 81, .12); color: #00C851; border: 1px solid rgba(0, 200, 81, .28); }
#adminBattleTab .xb-ref { background: rgba(74, 158, 255, .15); color: #4A9EFF; border: 1px solid rgba(74, 158, 255, .3); }
#adminBattleTab .xb-wait { background: rgba(247, 201, 72, .12); color: #F7C948; border: 1px solid rgba(247, 201, 72, .3); }
#adminBattleTab .xb-off { background: rgba(255, 255, 255, .06); color: rgba(255, 255, 255, .7); border: 1px solid rgba(255, 255, 255, .14); }
#adminBattleTab .xb-side { display: inline-flex; align-items: center; gap: 4px; font: 800 .56rem Orbitron, sans-serif; letter-spacing: .06em; padding: 2px 7px; border-radius: 99px; }
#adminBattleTab .xb-side.a { background: rgba(255, 107, 53, .15); color: #FF8C5A; }
#adminBattleTab .xb-side.b { background: rgba(247, 201, 72, .14); color: #F7C948; }
#adminBattleTab .xb-score { display: inline-flex; align-items: center; gap: 6px; font: 800 .8rem Orbitron, sans-serif; }
#adminBattleTab .xb-score .a { color: #FF8C5A; } #adminBattleTab .xb-score .b { color: #F7C948; } #adminBattleTab .xb-score i { font-style: normal; color: rgba(255, 255, 255, .35); font-size: .6rem; }
#adminBattleTab .xb-win { color: #00C851; font-weight: 800; }
#adminBattleTab .xb-empty { text-align: center; color: rgba(255, 255, 255, .45); padding: 1.6rem 1rem; font-size: .84rem; }
#adminBattleTab .xb-note { max-width: 720px; margin: 0 auto 10px; font-size: .72rem; color: rgba(255, 255, 255, .55); line-height: 1.45; }
#adminBattleTab .xb-h { font: 800 .62rem Orbitron, sans-serif; letter-spacing: .14em; color: rgba(255, 255, 255, .55); margin: 6px 0 8px; text-transform: uppercase; }
#adminBattleTab .xb-sub { width: 100%; border-collapse: collapse; font-size: .72rem; }
#adminBattleTab .xb-sub th { font: 800 .5rem Orbitron, sans-serif; letter-spacing: .12em; color: rgba(255, 255, 255, .4); padding: 6px; text-align: center; }
#adminBattleTab .xb-sub td { padding: 6px; border-top: 1px solid rgba(255, 255, 255, .05); text-align: center; }
#adminBattleTab .xb-set { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
#adminBattleTab .xb-set > div { background: #111; border-radius: 12px; padding: 10px 12px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05); }
#adminBattleTab .xb-set label { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: .76rem; color: rgba(255, 255, 255, .8); padding: 7px 0; border-top: 1px solid rgba(255, 255, 255, .05); text-align: left; }
#adminBattleTab .xb-set input[type=number] { width: 80px; padding: .3rem .5rem; border-radius: 8px; border: 1px solid rgba(255, 255, 255, .12); background: #0e0e0e; color: #fff; text-align: center; }
#adminBattleTab .xb-one { display: flex; justify-content: center; margin-top: 10px; }
#adminBattleTab video, #adminBattleTab audio { max-width: 220px; border-radius: 8px; }
@media (max-width: 1100px) { #adminBattleTab .xb-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 768px) {
    #adminBattleTab .xb-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    #adminBattleTab .xb-set { grid-template-columns: 1fr; }
    #adminBattleTab .xb-sc b { font-size: .82rem; }
}
@media (prefers-reduced-motion: reduce) { #adminBattleTab .xb-sc.live b i { animation: none; } }

/* ---- AA_BATTLE2 11/10 : visionnage payant dans les 3 monnaies ---- */
.bc-ppc { display: grid; grid-template-columns: repeat(3, 1fr); }
.bc-ppg { display: grid; gap: 8px; margin-top: 8px; }
.bc-ppg.n1 { grid-template-columns: minmax(0, 220px); justify-content: center; }
.bc-ppg.n2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bc-ppg.n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.bc-pp { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 8px; border-radius: 12px; background: #0d0d0d; border: 1px solid rgba(255, 255, 255, .08); min-width: 0; }
.bc-pp > span { display: inline-flex; align-items: center; gap: 5px; font: 800 .7rem 'Rajdhani', sans-serif; letter-spacing: .06em; color: #fff; }
.bc-pp > span .bc-coinlogo { width: 14px; height: 14px; }
.bc-pp .bc-in { text-align: center; padding: 8px 6px; font-weight: 800; }
.bc-pp small { font-size: .62rem; color: rgba(255, 255, 255, .55); text-align: center; line-height: 1.25; }
.bc-pp small b { color: #F7C948; }
.bc-ppc button.on img.bc-coinlogo, .bc-ppc button.on .btc-cyber { filter: brightness(0); }
.bc-unl-c { display: grid; gap: 6px; }
.bc-unl-c.n2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bc-unl-c.n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.bc-unl-c .bc-gb { width: 100%; min-width: 0; justify-content: center; }
.bc-unl-c.n3 .bc-gb, .bc-unl-c.n2 .bc-gb { padding: .62rem .3rem; font-size: .66rem; gap: 4px; white-space: nowrap; }
.bc-unl-c .bc-gb:disabled { opacity: .55; }

/* ---- AA_BATTLE3 11/10 : partage avec les logos des reseaux (4 + 3 centres) ---- */
.bc-nets { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 0; }
.bc-net { flex: 0 0 25%; min-width: 0; }
.bc-net span { width: 44px; height: 44px; color: #fff; transition: transform .18s ease, box-shadow .25s ease, color .2s ease; }
.bc-net span svg { width: 22px; height: 22px; fill: currentColor; stroke: none; display: block; }
.bc-net span svg [stroke] { fill: none; }
.bc-net:hover span, .bc-net:focus-visible span { color: #F7C948; transform: translateY(-2px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 6px 16px rgba(255, 107, 53, .25), 0 0 0 1px rgba(255, 107, 53, .55); }
/* ---- Effects : pilules compactes ---- */
.bc-fxrow { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.bc-fxrow + .bc-fxrow { margin-top: 6px; }
.bc-fxp { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 36px; padding: 0 12px; border-radius: 99px; border: 1px solid rgba(255, 255, 255, .12); background: linear-gradient(145deg, #222, #151515); color: rgba(255, 255, 255, .8); font: 700 .76rem 'Rajdhani', sans-serif; letter-spacing: .02em; white-space: nowrap; cursor: pointer; transition: background .2s ease, color .2s ease, border-color .2s ease; }
.bc-fxp.on { background: linear-gradient(135deg, #FF6B35, #F7C948); color: #0A0A0A; border-color: transparent; }
.bc-fxp:disabled { opacity: .4; cursor: not-allowed; }
.bc-fxp .sw { flex: 0 0 auto; width: 14px; height: 14px; border-radius: 50%; background: linear-gradient(135deg, #f2c4a0 0 45%, #7a4058 46% 100%); box-shadow: 0 0 0 1px rgba(255, 255, 255, .25); }
.bc-fxp .sw-warm { filter: sepia(.3) saturate(1.35) hue-rotate(-8deg); }
.bc-fxp .sw-noir { filter: grayscale(1) contrast(1.2); }
.bc-fxp .sw-cool { filter: hue-rotate(18deg) saturate(.85) brightness(1.06); }
.bc-fxp .sw-neon { filter: saturate(1.9) hue-rotate(-28deg) contrast(1.12); }
.bc-fxp .sw-frame.sw-none { background: transparent; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .45); }
.bc-fxp .sw-frame.sw-penta { border-radius: 0; clip-path: polygon(50% 0%, 100% 37.2%, 84.1% 100%, 15.9% 100%, 0% 37.2%); background: linear-gradient(135deg, #FF6B35, #F7C948); box-shadow: none; }
.bc-fxp .sw-frame.sw-gold { background: transparent; box-shadow: inset 0 0 0 2px #F7C948, 0 0 0 1px rgba(247, 201, 72, .45); }
.bc-fxp .sw-frame.sw-flame { background: linear-gradient(0deg, #FF6B35, rgba(255, 107, 53, .1)); }
.bc-fxp.on .sw { box-shadow: 0 0 0 1.5px #0A0A0A; }
.bc-fxp.on .sw-frame.sw-none { box-shadow: inset 0 0 0 1.5px #0A0A0A; }
.bc-fxp.on .sw-frame.sw-gold { box-shadow: inset 0 0 0 2px #0A0A0A; }
.bc-fxt { flex: 0 1 172px; }
.bc-fxt .ck { width: 14px; height: 14px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .45); position: relative; flex: 0 0 auto; }
.bc-fxt.on .ck { background: #0A0A0A; box-shadow: none; }
.bc-fxt.on .ck::after { content: ""; position: absolute; left: 4.5px; top: 2.5px; width: 3.5px; height: 6.5px; border: solid #F7C948; border-width: 0 1.8px 1.8px 0; transform: rotate(45deg); }
/* onglets de la feuille de reglages : 5 onglets sans debordement sur telephone */
@media (max-width: 768px) {
    .bc-sh-tabs { overflow: visible; padding: 0 10px 10px; gap: 4px; }
    .bc-sh-tabs button { flex: 1 1 0; min-width: 0; padding: 7px 3px; gap: 4px; font-size: .66rem; }
    .bc-sh-tabs button svg { width: 12px; height: 12px; flex: 0 0 auto; }
    .bc-fxp { padding: 0 10px; gap: 5px; }
}