/* Duel board (shared by Champion's Duel ways games, boards/duel.js): the ways board's grid (ways.css: one track, no
   pegs) plus the Shield-Split ×count badge in its cell, the damage number that flies into the HP banner and the banner's
   structure (champions I…n, the HP bar, the multiplier, the spin and the round's win). Colours are tokens the game's
   skin sets: --dl-x-bg / --dl-x-ink / --dl-x-edge (badge), --dl-dmg-ink / --dl-dmg-edge (damage number), --dl-hp /
   --dl-hp-lo / --dl-track / --dl-track-edge (HP bar), --dl-medal / --dl-medal-ink / --dl-medal-edge / --dl-now
   (champions), --dl-medal-down / --dl-medal-down-ink / --dl-medal-down-edge / --dl-slash (a downed champion: a hollow
   medal, its numeral at full opacity on its own contrast-checked pair, struck through), --dl-ink / --dl-muted / --dl-gold
   (banner text), --dl-dmg-shadow (the damage number's halo). No banner text is faded by opacity (the ×count badge
   dims only with its non-winning cell, like the symbol art). Animated properties: transform and opacity only. */
.duel-board .dl-split{position:relative;width:100%;height:100%;display:flex;align-items:center;justify-content:center}
/* the badge sits over the art's own ×2 (bottom centre), so the count shown is always the maths' count */
.duel-board .dl-x{position:absolute;left:50%;bottom:3%;transform:translateX(-50%);z-index:1;min-width:calc(var(--cell)*.34);padding:0 calc(var(--cell)*.05);
  font:700 calc(var(--cell)*.19)/1.25 var(--display,serif);text-align:center;letter-spacing:.02em;border-radius:calc(var(--cell)*.06);
  background:var(--dl-x-bg,#2A1A0C);color:var(--dl-x-ink,#FFF4DC);border:1.5px solid var(--dl-x-edge,#C7A27A);transition:opacity .2s}
/* dimmed with its non-winning cell, yet its ×count stays readable over the darkened art (≥ 3:1 for its large type) */
.duel-board .cell.dim .dl-x{opacity:.55}
.duel-board .dl-split::after{content:"";position:absolute;inset:8%;border-radius:50%;pointer-events:none;opacity:0;border:2px solid var(--dl-x-edge,#C7A27A)}
.duel-board .dl-split.ring::after{animation:dl-ring .6s ease-out}
@keyframes dl-ring{0%{opacity:.9;transform:scale(.7)}100%{opacity:0;transform:scale(1.18)}}

/* the damage number on its way to the HP bar (over the game, under a skin's transition cover and the overlays) */
.dl-dmg{position:fixed;z-index:19;pointer-events:none;margin:0;white-space:nowrap;transform:translate(-50%,-50%);
  font:700 clamp(20px,3.2vw,34px)/1 var(--display,serif);color:var(--dl-dmg-ink,#FFE9B8);
  -webkit-text-stroke:1px var(--dl-dmg-edge,#2A1205);paint-order:stroke;text-shadow:var(--dl-dmg-shadow,0 2px 6px rgba(0,0,0,.55))}

/* ---- the HP banner (inside the shell's #fsbar): one row on wide screens, two on phones ---- */
.dl-bar{display:flex;align-items:center;gap:clamp(8px,1.4vw,18px);color:var(--dl-ink,#F6EEDF);min-width:0}
.dl-champs{display:flex;gap:5px;flex:none}
.dl-champ{position:relative;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;flex:none;
  background:var(--dl-medal,#C7A27A);color:var(--dl-medal-ink,#21160B);border:2px solid var(--dl-medal-edge,#5E3C1C);box-shadow:inset 0 2px 0 rgba(255,255,255,.35)}
.dl-bar .dl-champ b{font:700 13px/1 var(--display,serif);letter-spacing:.02em;color:var(--dl-medal-ink,#21160B)}
.dl-champ.now{box-shadow:0 0 0 2px var(--dl-now,#FFE9B8),inset 0 2px 0 rgba(255,255,255,.35);transform:scale(1.08)}
.dl-champ .dl-slash{position:absolute;left:-3px;right:-3px;top:50%;height:3px;border-radius:2px;background:var(--dl-slash,var(--dl-medal-edge,#5E3C1C));transform:rotate(-38deg) scaleX(0);transition:transform .25s}
/* downed: a hollow medal (its own background, edge and ink; the numeral stays fully opaque) and the slash */
.dl-champ.down{background:var(--dl-medal-down,#2A1A12);border-color:var(--dl-medal-down-edge,#7A5028);box-shadow:none}
.dl-bar .dl-champ.down b{color:var(--dl-medal-down-ink,#D6C6AC)}
.dl-champ.down .dl-slash{transform:rotate(-38deg) scaleX(1)}
.dl-champ.fell{animation:dl-fall .6s cubic-bezier(.34,1.56,.64,1)}
@keyframes dl-fall{0%{transform:scale(1.08)}35%{transform:scale(1.3) rotate(-8deg)}100%{transform:scale(1) rotate(0)}}
.dl-hp{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:8px;row-gap:3px;align-items:center;min-width:clamp(150px,22vw,300px);flex:1 1 auto}
.dl-name{grid-column:1;grid-row:1;font:400 14px/1.1 var(--display,serif);letter-spacing:.08em;text-transform:uppercase;color:var(--dl-gold,#E8C394);white-space:nowrap}
.dl-num{grid-column:2;grid-row:1;justify-self:end;font-size:13px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--dl-ink,#F6EEDF);white-space:nowrap}
.dl-bar .dl-num b{color:var(--dl-gold,#E8C394)}
.dl-track{grid-column:1/3;grid-row:2;position:relative;display:block;height:10px;border-radius:5px;overflow:hidden;background:var(--dl-track,#2A1A12);box-shadow:inset 0 0 0 1.5px var(--dl-track-edge,#7A5028)}
.dl-fill{position:absolute;inset:2px;border-radius:3px;transform-origin:0 50%;transform:scaleX(var(--hp,1));transition:transform .36s cubic-bezier(.34,1.3,.64,1);
  background:linear-gradient(90deg,var(--dl-hp-lo,#8E2A1C),var(--dl-hp,#E0553A))}
.dl-bar.all-down .dl-track{opacity:.5}
.dl-mult{display:grid;place-items:center;min-width:44px;height:32px;padding:0 8px;border-radius:6px;flex:none;background:var(--dl-medal,#C7A27A);color:var(--dl-medal-ink,#21160B);border:2px solid var(--dl-medal-edge,#5E3C1C)}
.dl-bar .dl-mult b{font:700 18px/1 var(--display,serif);color:var(--dl-medal-ink,#21160B)}
.dl-mult.locked{box-shadow:0 0 0 2px var(--dl-now,#FFE9B8)}
.dl-spin,.dl-won{white-space:nowrap;font-size:14px;color:var(--dl-ink,#F6EEDF)}
.dl-bar .dl-spin b,.dl-bar .dl-won b{color:var(--dl-gold,#E8C394)}
/* a knockout in slow motion: the winning symbols throb three times slower while the champion falls */
body.dl-slow .duel-board .cell.win .sym{animation-duration:1.8s}
@media (max-width:860px),(max-aspect-ratio:4/5){
  .dl-bar{display:grid;grid-template-columns:auto 1fr auto;grid-template-areas:"champs hp mult" "spin spin won";row-gap:4px;column-gap:8px;width:100%}
  .dl-champs{grid-area:champs}.dl-hp{grid-area:hp;min-width:0}.dl-mult{grid-area:mult}.dl-spin{grid-area:spin;font-size:13px}.dl-won{grid-area:won;font-size:13px;justify-self:end}
  .dl-champ{width:24px;height:24px}.dl-bar .dl-champ b{font-size:11px}
  /* the standing champion is the ringed medal: the HP alone over the bar */
  .dl-name{display:none}.dl-num{grid-column:1/3;justify-self:start;font-size:12px}
  .dl-mult{min-width:38px;height:28px}.dl-bar .dl-mult b{font-size:16px}
}
/* reduced motion: no ring, no fall, no slow motion, the bar jumps (shell.css caps every other animation) */
body.still .duel-board .dl-split.ring::after,body.still .dl-champ.fell{animation:none}
body.still .dl-fill,body.still .dl-champ .dl-slash{transition:none}
@media (prefers-reduced-motion:reduce){.duel-board .dl-split.ring::after,.dl-champ.fell{animation:none}.dl-fill,.dl-champ .dl-slash{transition:none}}