/* Round 69: team knights + the matchup duel (app/knights.py, knights.js). Own file: the theme generators never touch it.
   The knights stand on the bottom edge of the matchup header in the open space either side of the VS pill. */
/* Round 70: the box is the bottom-middle opening of the header; everything (the launched loser, sparks, fireworks)
   is clipped to it. Knights stand on its bottom edge either side of the VS pill. */
.kduel{position:absolute;left:0;right:0;bottom:0;height:calc(var(--kh,66px) * 2.1);z-index:2;pointer-events:none;overflow:hidden;--kh:66px}
.kduel.kd-run{z-index:4}
.kd-fx{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.kn{position:absolute;bottom:2px;height:var(--kh);width:calc(var(--kh) * .86);padding:0;margin:0 0 0 calc(var(--kh) * -.43);
  border:0;background:none;pointer-events:auto;cursor:pointer;-webkit-tap-highlight-color:transparent;transform-origin:50% 100%}
.kd-ready .kn{cursor:default}
.kn-l{left:37.5%}.kn-r{left:62.5%}
@media (min-width:600px){.kduel{--kh:80px}.kn-l{left:40%}.kn-r{left:60%}}
.kn-fig{position:absolute;inset:0;display:block;transform-origin:50% 100%}
.kn-mir .kn-fig{transform:scale(-1,1)}                       /* face each other: mirrored when the art faces outward (round 74) */
.kn-img{position:absolute;left:50%;bottom:0;height:100%;width:auto;max-width:none;transform:translateX(-50%);pointer-events:none;
  filter:drop-shadow(0 2px 2px rgba(0,0,0,.5))}
.kn-smear{position:absolute;left:-30%;right:-30%;top:22%;bottom:10%;border-radius:50%;opacity:0;pointer-events:none;
  background:radial-gradient(closest-side,rgba(255,250,220,.0) 40%,rgba(255,240,180,.55) 70%,rgba(255,255,255,0));filter:blur(2px)}
/* idle breathing */
.kn .kn-img{animation:knbreath 3.2s ease-in-out infinite}
.kn-r .kn-img{animation-delay:-1.6s}
@keyframes knbreath{0%,100%{transform:translateX(-50%) scale(1,1)}50%{transform:translateX(-50%) translateY(-1px) scale(1.012,.988)}}
.kd-run .kn .kn-img,.kd-done .kn .kn-img{animation:none}
/* slash arcs: bright yellow-white strokes drawn on with stroke-dashoffset */
.kd-arc{position:absolute;left:0;bottom:0;opacity:0;overflow:visible;pointer-events:none;filter:drop-shadow(0 0 3px #ffe9a0) drop-shadow(0 0 6px rgba(255,200,80,.8))}
.kd-arc path{fill:none;stroke:#fffbe8;stroke-width:5;stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:100}
.kd-arc1{width:calc(var(--kh) * 1.25);height:calc(var(--kh) * .75)}
.kd-arc2{width:calc(var(--kh) * .7);height:calc(var(--kh) * 1.15)}
.kn:focus-visible{outline:2px solid #ff8a1f;outline-offset:2px;border-radius:8px}
/* settings + commissioner picker */
.ou-ic.kn-ic{overflow:hidden;padding:0;background:#101c3d}.ou-ic.kn-ic img{width:100%;height:100%;object-fit:cover;display:block}
.pe-knights{border:0;padding:0;margin:0}
.pe-kgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px 8px;margin-top:8px}
@media (min-width:520px){.pe-kgrid{grid-template-columns:repeat(6,minmax(0,1fr))}}
@media (min-width:760px){.pe-kgrid{grid-template-columns:repeat(8,minmax(0,1fr))}}
.pe-k{position:relative;display:flex;flex-direction:column;align-items:center;gap:3px;cursor:pointer;text-align:center}
.pe-k input{position:absolute;opacity:0;pointer-events:none;width:1px;height:1px}
.pe-k img{width:100%;height:auto;aspect-ratio:1;border-radius:12px;border:3px solid transparent;object-fit:cover}
.pe-k input:checked+img{border-color:#ff8a1f;box-shadow:0 0 0 2px rgba(255,138,31,.35)}
.pe-k input:focus-visible+img{outline:2px solid #1557c0}
.pe-k small{display:block;max-width:100%;font-size:11px;font-weight:600;line-height:1.2;color:var(--muted,#5b6b86);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pe-k input:checked~small{color:#ff8a1f;font-weight:800}
@media (prefers-reduced-motion:reduce){.kn .kn-img{animation:none}}
/* Round 79C: phones (320-599 px). The status line ("2 playing · 5 yet to play") used to run under the bobbleheads.
   It now breaks into two short lines, and the bobbleheads are sized to the screen and stand right beside the VS pill,
   so text and figures never share pixels in idle, duel or final pose (tests/test_header_layout.py measures it). */
@media (max-width:599px){
  .mh2 .mh-left{white-space:normal;line-height:1.25}
  .mh2 .mh-left .mhl-a,.mh2 .mh-left .mhl-b{white-space:nowrap}
  .mh2 .mh-left .mhl-sep{display:block;height:0;overflow:hidden}      /* a line break, text keeps its alignment */
  .kduel{--kh:clamp(46px,14.5vw,62px)}
  .kn-l{left:calc(50% - 15px - var(--kh) * .36)}.kn-r{left:calc(50% + 15px + var(--kh) * .36)}
}