/* Captain Recruitment's HUD; its look (the bar, the clock, the rule line) is every Captain Clash's too (the owner, 2026-10-11:
   "use the same as recruitment clash arrows UI"), under :where(#app.duel) so the states in style.css still win. The controller
   under it, its keys and its Ki screen, is style.css's (the owner's design of 2026-10-15). Live rules and controls are unchanged. */
#recHudTitle{display:none}
:where(#app.duel) .duelBar{border-color:var(--gold);background:linear-gradient(150deg,rgba(15,20,39,.96),rgba(6,10,24,.94));box-shadow:0 .3rem 1rem #0008,inset 0 0 .5rem #ffd24a12}
:where(#app.duel) .dClock{display:grid;place-items:center;width:2.6rem;height:2.6rem;border:2px solid var(--gold);border-radius:50%;background:radial-gradient(circle at 40% 25%,#594119,#101527 65%);color:var(--gold);box-shadow:0 0 .6rem #ffd24a35}
/* the Recruitment's top bar (the owner's design of 2026-10-15, option 10 of the top-bar round): a header strip (the title at
   its left; the enemies in order at its right as icons, ui/duel.js duelRecFrame: the one fought ringed gold, the next ones
   dimmed, a recruit ticked green, one that got away grey), the clock as a countdown ring on the bar's top edge (--t, the
   share of its time left), and the fight under it in two halves cut on a slant (yours blue, the enemy's red), each a big
   portrait, a name, the health with its numbers and the Ki; VS in the middle */
#app.dRecFight .duelBar{position:relative;width:min(56rem,calc(100vw - 1.5rem));margin-top:1.375rem;padding:0 .875rem .75rem;row-gap:.625rem;column-gap:1rem;border:2px solid #2d3a5e;border-radius:.75rem;background:linear-gradient(105deg,#1c2b66 0%,#0d1638 49.8%,#3a0c12 50.2%,#661c22 100%);box-shadow:0 .375rem 1.125rem #000c}
#app.dRecFight #recHudTitle{display:flex;grid-column:1/-1;align-items:center;justify-content:space-between;gap:.75rem;margin:0 -.875rem;padding:.3125rem .875rem;min-height:1.875rem;box-sizing:border-box;background:#0b1020;border-bottom:2px solid #2d3a5e;border-radius:.625rem .625rem 0 0}
#recHudTitle>b{font:400 .875rem var(--disp);letter-spacing:.04em;text-transform:uppercase;color:var(--gold);white-space:nowrap}
#app.dRecFight #dRec{display:flex;align-items:center;gap:.5rem}
.recProgress{font:400 .75rem var(--disp);text-transform:uppercase;white-space:nowrap}.recProgress b{font-weight:400}.recProgress em{font-style:normal;color:var(--gold)}
.recQueue{display:flex;align-items:center;gap:.375rem}
.recFoe{position:relative;display:block;width:1.75rem;height:1.75rem;box-sizing:border-box;border-radius:.4375rem;overflow:hidden;border:1px solid var(--line);flex:none}
.recFoe img{width:100%;height:100%;object-fit:cover;object-position:50% 15%;display:block}
.recFoe.now{border:2px solid var(--gold);box-shadow:0 0 .5rem #ffd24a99}.recFoe.next{opacity:.6;filter:saturate(.6)}.recFoe.away{opacity:.4;filter:grayscale(1)}
.recFoe.got{border:2px solid var(--good)}.recFoe.got::after{content:"✓";position:absolute;inset:0;display:grid;place-items:center;background:#0008;color:var(--good);font:400 1rem var(--disp)}
#app.dRecFight .dSide{gap:.75rem}#app.dRecFight .dSide.me{padding-right:2.5rem}#app.dRecFight .dSide.foe{padding-left:2.5rem}
#app.dRecFight .dSide .av{width:5.25rem;height:5.25rem;border-radius:.75rem;border-width:3px;box-shadow:0 0 .875rem #ffc94a55}#app.dRecFight .dSide.foe .av{box-shadow:0 0 .875rem #ff6a5a55}
#app.dRecFight .dNm{margin-bottom:.3125rem}#app.dRecFight .dNm b{font-size:1.0625rem}#app.dRecFight .dNm small{font-size:.65625rem}
#app.dRecFight .dHp{height:1.125rem}#app.dRecFight .dHp em{font-size:.75rem;line-height:1.125rem}
#app.dRecFight .dKi{height:.4375rem;margin-top:.25rem}
#app.dRecFight .dMid{min-width:3.5rem}
#app.dRecFight .dMom,#app.dRecFight #dAwkA,#app.dRecFight #dDmgBox{display:none}
#dVs{display:none}#app.dRecFight #dVs{display:block;font:400 2.875rem/1 'Bangers',var(--disp);letter-spacing:.05em;color:#fff;text-shadow:0 0 .75rem var(--gold),.1875rem .1875rem 0 #000}
#app.dRecFight #dClock{position:absolute;left:50%;top:-1.625rem;transform:translateX(-50%);z-index:2;width:3rem;height:3rem;box-sizing:content-box;padding:.1875rem;border:2px solid #2d3a5e;border-radius:50%;background:radial-gradient(circle,#0b1020 0 61%,transparent 62%) content-box,conic-gradient(var(--ring,var(--gold)) calc(var(--t,1) * 1turn),#273044 0) content-box,#0b1020;font:400 1.25rem var(--disp);color:var(--gold);box-shadow:0 .25rem .625rem #000a}
#app.dRecFight #dClock.soon{--ring:var(--foe);color:var(--foe)}   /* its last seconds red */
:where(#app.duel) .dRule{font-size:.65rem;color:#dfe5ff}
/* the intro card wears the result's shared frame (style.css, "Shared outcome frame"); the first enemy takes the gold accent (--c) */
#recOv.reveal .recCard.upcoming{opacity:.8}
#recOv.reveal{transition:opacity var(--recFade,1s) ease}#recOv.reveal.faded{opacity:0}   /* from REC_UI.fadeAtMs into the intro the card fades (over REC_UI.fadeMs) so the stage and both fighters show before the fight */
#recOv.reveal .recCard.first p{color:var(--gold)}#recOv.reveal #recClock{display:grid;place-items:center;width:3rem;height:3rem;border:2px solid var(--gold);border-radius:50%;background:#111829;color:var(--gold);font-family:var(--disp);font-size:1.6rem}
@media(max-width:760px){#app.dRecFight .duelBar{width:calc(100vw - 1rem);margin-top:1.25rem;padding:0 .5rem .5rem;column-gap:.375rem;row-gap:.375rem}#app.dRecFight #recHudTitle{margin:0 -.5rem;padding:.25rem .5rem;gap:.375rem}#recHudTitle>b{font-size:.625rem}.recProgress{font-size:.5625rem}.recFoe{width:1.375rem;height:1.375rem}#app.dRecFight .dSide .av{width:2.75rem;height:2.75rem;border-width:2px}#app.dRecFight .dSide.me{padding-right:.75rem}#app.dRecFight .dSide.foe{padding-left:.75rem}#app.dRecFight .dNm small{display:none}#app.dRecFight .dNm b{font-size:.875rem}#app.dRecFight #dVs{font-size:1.75rem}#app.dRecFight .dMid{min-width:1.75rem}#app.dRecFight #dClock{width:2.25rem;height:2.25rem;top:-1.25rem;font-size:1rem}:where(#app.duel) .dRule{font-size:.55rem}}
@media(max-height:560px){#app.dRecFight .dSide .av{width:3rem;height:3rem}#app.dRecFight .duelBar{padding-bottom:.375rem;row-gap:.375rem}#app.dRecFight #dVs{font-size:2rem}:where(#app.duel):not(.dRecFight) .dClock{width:2rem;height:2rem;font-size:1.1rem}}
@media(prefers-reduced-motion:reduce){.dBeam>i,.dTip,.dMeterBar>i,.dFlame{transition:none}}