/* ============================================================
   HOODLINGS — SCÈNE DE COMBAT façon Pokémon DS
   Présentation pure. Pixel dur : steps() partout, pas de blur,
   pas de radius, pas de tween lisse. Palette de la landing.
   ============================================================ */

#battle-overlay{position:fixed;inset:0;z-index:40;background:rgba(3,6,4,.97);display:none;overflow-y:auto}
#battle-overlay.on{display:flex;flex-direction:column}
.bs-frame{width:min(1880px,97vw);margin:auto;
  padding:calc(1rem + env(safe-area-inset-top)) calc(1rem + env(safe-area-inset-right))
    calc(1.4rem + env(safe-area-inset-bottom)) calc(1rem + env(safe-area-inset-left))}
.bs-top{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;margin-bottom:.8rem;
  width:min(100%,calc(80vh * 16 / 9));margin-left:auto;margin-right:auto}
.bs-top .bctl{display:flex;gap:.6rem;flex-wrap:wrap}

/* ---------- la scène : diorama 16:9, dimensionné par l'écran ---------- */
#bs-stage{position:relative;aspect-ratio:16/9;width:min(100%,calc(80vh * 16 / 9));margin:0 auto;
  overflow:hidden;background:#04070a;border:2px solid rgba(184,192,200,.22);
  container-type:size;
  user-select:none;-webkit-user-select:none;touch-action:manipulation}
#bs-camera{position:absolute;inset:0;will-change:transform;transform-origin:50% 55%}
#bs-camera.idlecam{animation:bscam 8.5s steps(10,end) infinite alternate}
@keyframes bscam{
  0%{transform:scale(1) translate(0,0)}
  100%{transform:scale(1.02) translate(-1.2%,-0.6%)}}
.bs-cv{position:absolute;inset:0;width:100%;height:100%;
  image-rendering:pixelated;image-rendering:crisp-edges;display:block}
/* parallaxe très légère des deux plans de sapins */
#bs-far{animation:bsfar 11s steps(8,end) infinite alternate}
#bs-near-decor{animation:bsnear 9s steps(8,end) infinite alternate}
@keyframes bsfar{from{transform:translateX(0)}to{transform:translateX(4px)}}
@keyframes bsnear{from{transform:translateX(0)}to{transform:translateX(-6px)}}

/* torches : flamme 3 frames par paliers */
.bs-torch{position:absolute;width:5%;pointer-events:none}
.bs-torch svg{display:block;width:100%;height:auto;shape-rendering:crispEdges}
.bs-tf{opacity:0;animation:bstf .72s steps(1,end) infinite}
.bs-tf1{animation-delay:-.24s}
.bs-tf2{animation-delay:-.48s}
@keyframes bstf{0%,32%{opacity:1}33%,100%{opacity:0}}
.bs-rune{animation:bsrune 3.2s steps(2,end) infinite}
@keyframes bsrune{0%,100%{opacity:.5}50%{opacity:.95}}

/* ---------- combattants : conteneurs animés, l'art des tokens intact ---------- */
.bs-fighter{position:absolute;will-change:transform;transform-origin:50% 100%}
.bs-fighter .art{position:relative;width:100%;height:100%;z-index:2;
  animation:bsbob var(--bobd,1.2s) steps(2,end) infinite;animation-delay:var(--bobp,0s)}
.bs-fighter .art svg{width:100%;height:100%;display:block}
@keyframes bsbob{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
.bs-shadow{position:absolute;left:5%;right:5%;bottom:-7%;height:14%;z-index:1;
  animation:bsshadow var(--bobd,1.2s) steps(2,end) infinite;animation-delay:var(--bobp,0s)}
.bs-shadow svg{width:100%;height:100%;display:block;shape-rendering:crispEdges}
@keyframes bsshadow{0%,100%{transform:scaleX(1)}50%{transform:scaleX(.9)}}
/* impact : flash blanc 2 alternances */
.bs-fighter.flash .art{animation:bsflash .2s steps(2,end) 2}
@keyframes bsflash{0%,100%{filter:brightness(1)}50%{filter:brightness(3.2) saturate(.2)}}
/* esquive : traînée fantôme */
.bs-ghost{position:absolute;inset:0;z-index:1;opacity:.35;pointer-events:none}
.bs-ghost svg{width:100%;height:100%}
/* KO : clignote puis se dissout (les particules font le reste) */
.bs-fighter.dying .art{animation:bsdie .8s steps(6,end) forwards}
@keyframes bsdie{0%{opacity:1}20%{opacity:.2}35%{opacity:1}50%{opacity:.15}100%{opacity:0}}
.bs-fighter.dead .art{opacity:0}
.bs-fighter.dead .bs-shadow{opacity:0}
/* plateformes de mousse dithérées */
.bs-plat{position:absolute;pointer-events:none}
.bs-plat svg{width:100%;height:100%;display:block;shape-rendering:crispEdges}

/* ---------- HUD : panneaux pixel à coins crantés, PV progressifs ---------- */
.bs-hud{position:absolute;min-width:15cqw;background:rgba(3,8,5,.88);
  border:2px solid rgba(184,192,200,.28);padding:.5cqw .6cqw;z-index:6;
  clip-path:polygon(0 6px,6px 6px,6px 0,calc(100% - 6px) 0,calc(100% - 6px) 6px,100% 6px,
    100% calc(100% - 6px),calc(100% - 6px) calc(100% - 6px),calc(100% - 6px) 100%,
    6px 100%,6px calc(100% - 6px),0 calc(100% - 6px))}
.bs-hud .nm{display:flex;justify-content:space-between;gap:.6cqw;
  font-family:var(--pixel);font-size:.85cqw;color:var(--parchment);margin-bottom:.45cqw}
.bs-hud .nm .cl{letter-spacing:.06em}
.bs-hud .hpwrap{height:1.2cqw;background:#04070a;border:2px solid rgba(184,192,200,.3);
  position:relative;overflow:hidden}
.bs-hud .hpwrap i{position:absolute;inset:0;right:auto;width:100%;
  background:#5a9e4a;box-shadow:inset 0 -3px 0 rgba(0,0,0,.35)}
.bs-hud.mid .hpwrap i{background:#d9b44a}
.bs-hud.low .hpwrap i{background:#c94f2e}
.bs-hud .sub{display:flex;justify-content:space-between;font-family:var(--pixel);
  font-size:.75cqw;color:var(--mist);margin-top:.4cqw;min-height:.6em}
.bs-hud .sh{color:#8fd0ff}
.bs-hud.dead{opacity:.35}

/* nombres de dégâts */
.bs-dmg{position:absolute;z-index:8;font-family:var(--pixel);font-size:2cqw;color:#fff;
  text-shadow:2px 2px 0 #000;pointer-events:none;animation:bsdmg .6s steps(6,end) forwards}
.bs-dmg.crit{color:var(--gold);font-size:2.6cqw}
.bs-dmg.heal{color:var(--glow)}
.bs-dmg.shield{color:#8fd0ff;font-size:1.5cqw}
@keyframes bsdmg{0%{transform:translateY(0);opacity:1}70%{opacity:1}100%{transform:translateY(-30px);opacity:0}}

/* ---------- UI contextuelle ---------- */
/* boîte de texte : uniquement pendant la résolution */
#bs-text{position:absolute;left:3%;right:3%;bottom:3.5%;z-index:10;display:none;
  background:rgba(3,7,5,.92);border:2px solid rgba(184,192,200,.3);padding:max(.6rem,1cqw) max(.8rem,1.3cqw);
  font-family:var(--pixel);font-size:max(.5rem,1.05cqw);line-height:1.8;color:var(--parchment);
  min-height:3em;clip-path:polygon(0 8px,8px 8px,8px 0,calc(100% - 8px) 0,calc(100% - 8px) 8px,100% 8px,
    100% calc(100% - 8px),calc(100% - 8px) calc(100% - 8px),calc(100% - 8px) 100%,
    8px 100%,8px calc(100% - 8px),0 calc(100% - 8px))}
#bs-text.on{display:block}
#bs-text .tw-caret{display:inline-block;width:.5em;height:.9em;background:var(--gold);
  vertical-align:-.1em;animation:bscaret .6s steps(1,end) infinite}
@keyframes bscaret{0%,49%{opacity:1}50%,100%{opacity:0}}

/* bandeau tour adverse / round */
#bs-banner{position:absolute;top:0;left:0;right:0;z-index:10;display:none;
  background:rgba(3,7,5,.85);border-bottom:2px solid rgba(184,192,200,.25);
  font-family:var(--pixel);font-size:max(.46rem,.95cqw);letter-spacing:.14em;color:var(--gold);
  text-align:center;padding:max(.45rem,.8cqw);text-transform:uppercase}
#bs-banner.on{display:block;animation:bsbanner .25s steps(3,end)}
@keyframes bsbanner{from{transform:translateY(-110%)}to{transform:translateY(0)}}

/* panneau d'actions : cartes qui glissent depuis le bas */
#bs-actions{position:absolute;left:0;right:0;bottom:0;z-index:12;display:none;
  padding:.7rem;background:linear-gradient(0deg,rgba(3,6,4,.94) 0 70%,rgba(3,6,4,0) 100%)}
#bs-actions.on{display:block;animation:bsslidein .25s steps(3,end)}
#bs-actions.out{animation:bsslideout .2s steps(3,end) forwards}
@keyframes bsslidein{from{transform:translateY(110%)}to{transform:translateY(0)}}
@keyframes bsslideout{from{transform:translateY(0)}to{transform:translateY(110%)}}
#bs-actions .who{font-family:var(--pixel);font-size:max(.42rem,.9cqw);color:var(--mist);
  text-align:center;margin-bottom:.5rem;letter-spacing:.1em}
#bs-actions .who b{color:var(--gold)}
#bs-actions .row{display:flex;gap:.6rem;justify-content:center;flex-wrap:nowrap}
.bs-card{width:max(140px,16cqw);flex:0 0 auto;background:rgba(4,10,7,.95);cursor:pointer;
  border:2px solid var(--cardc,#7a8a9e);padding:max(.5rem,.8cqw) max(.55rem,.9cqw);position:relative;
  font-family:var(--pixel);color:var(--parchment);text-align:left}
.bs-card .t{font-size:max(.44rem,.95cqw);line-height:1.5;color:var(--cardc,#e8efe6)}
.bs-card .d{font-size:max(.36rem,.78cqw);line-height:1.6;color:var(--mist);margin-top:.3rem}
.bs-card .cost{position:absolute;top:.4rem;right:.45rem;font-size:max(.38rem,.85cqw);color:var(--gold)}
.bs-card .ic{width:max(24px,2.8cqw);height:max(24px,2.8cqw);margin-bottom:.35rem}
.bs-card .ic svg{width:100%;height:100%;display:block;shape-rendering:crispEdges}
.bs-card:hover:not(.off),.bs-card.sel{transform:translateY(-6px);
  box-shadow:0 0 0 2px var(--cardc,#e8b44a),0 6px 0 rgba(0,0,0,.4)}
.bs-card.off{opacity:.35;cursor:default}
.bs-card.endturn{--cardc:#9eb098}
#bs-actions .hint{font-family:var(--pixel);font-size:max(.36rem,.8cqw);color:var(--mist);
  text-align:center;margin-top:.5rem}
#bs-actions .energy{color:var(--gold)}

/* ciblage : flèche pixel qui rebondit au-dessus des cibles valides */
.bs-arrow{position:absolute;left:50%;top:-14%;width:max(20px,2.2cqw);height:max(14px,1.6cqw);
  transform:translateX(-50%);z-index:9;
  animation:bsarrow .5s steps(2,end) infinite}
.bs-arrow svg{width:100%;height:100%;display:block;shape-rendering:crispEdges}
@keyframes bsarrow{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
.bs-fighter.targetable{cursor:pointer}
.bs-fighter.targetable .art{animation:bstarget .5s steps(2,end) infinite}
@keyframes bstarget{0%,100%{filter:brightness(1)}50%{filter:brightness(1.6)}}

/* transition d'entrée : damier qui se remplit */
#bs-wipe{position:absolute;inset:0;z-index:20;pointer-events:none}

/* écran de résultat */
#bs-result{position:absolute;inset:0;z-index:15;display:none;place-items:center;
  background:rgba(3,6,4,.78)}
#bs-result.on{display:grid;animation:bsresin .3s steps(4,end)}
@keyframes bsresin{from{opacity:0}to{opacity:1}}
#bs-result .box{min-width:280px;max-width:82%;text-align:center;background:rgba(4,10,7,.96);
  padding:1.6rem 2rem;border:3px solid var(--r-frame,#e8b44a);
  clip-path:polygon(0 10px,10px 10px,10px 0,calc(100% - 10px) 0,calc(100% - 10px) 10px,100% 10px,
    100% calc(100% - 10px),calc(100% - 10px) calc(100% - 10px),calc(100% - 10px) 100%,
    10px 100%,10px calc(100% - 10px),0 calc(100% - 10px))}
#bs-result.lose .box{--r-frame:#8a949c}
#bs-result h3{font-family:var(--pixel);font-size:1rem;color:var(--r-frame,#e8b44a);
  margin-bottom:.8rem;text-shadow:0 3px 0 rgba(0,0,0,.5)}
#bs-result .rsub{font-family:var(--pixel);font-size:.44rem;color:var(--mist);line-height:1.9}
#bs-result .acorns{font-family:var(--pixel);font-size:.72rem;color:var(--gold);margin:.9rem 0}
#bs-result .btn{margin-top:.6rem}

/* ---------- responsive ---------- */
@media(max-width:760px){
  #bs-stage{aspect-ratio:4/3;width:min(100%,calc(70vh * 4 / 3))}
  .bs-frame{padding-left:calc(.4rem + env(safe-area-inset-left));
    padding-right:calc(.4rem + env(safe-area-inset-right))}
  .bs-top .bctl{gap:.4rem}
  #bs-actions .row{justify-content:flex-start;overflow-x:auto;padding-bottom:.3rem;
    -webkit-overflow-scrolling:touch}
  .bs-card{width:118px;touch-action:manipulation}
  .bs-card .t{font-size:.4rem}
  .bs-hud{min-width:96px;padding:.3rem .4rem}
  .bs-hud .nm{font-size:.36rem}
  #bs-text{font-size:.46rem}
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  #bs-camera.idlecam,#bs-far,#bs-near-decor{animation:none}
  .bs-fighter .art,.bs-shadow{animation-duration:2.4s}
  .bs-tf{animation-duration:1.44s}
}