/* board-fight.css: owned by one lane of the 2026-10-07 learning-and-balance pass (tftsolid) */
/* ---- the fight side (2026-10-07, Eric: "upgrading heros should feel intentional and cool"): trained skills on the
   chips and the tray's cards, the power card put on a crew (src/quick-board.js startAim, aimAt), the skill calls in a
   fight (callOut) and the result card's line and Upgrades button (showResult). The look is board.css's: ink outlines
   (--ol), outlined white type, chunky pills. ---- */

/* a chip's lower edge (2026-10-08): in planning, the rival crew it faces ("vs Archers", left, in the rival's red; cut
   with an ellipsis on a narrow chip, the whole of it in the title); a trained unit's role mark, right */
.bd-f-foot { position: absolute; left: 4px; right: 6px; bottom: -8px; z-index: 2; display: flex; justify-content: flex-end; align-items: center; gap: 3px; min-width: 0;
  pointer-events: none; }
.bd-f-vs { flex: 0 1 auto; min-width: 0; margin-right: auto; padding: 0 5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10px; font-weight: 800;
  line-height: 13px; color: #fff; background: #e8606b; border: 2px solid var(--ol); border-radius: 7px; -webkit-text-stroke: 2px var(--ol); paint-order: stroke fill; }
.bd.wide .bd-own { gap: 16px; }   /* room for the lower edge's pills between the column's chips */
.bd-chip.new .bd-f-foot { left: 36px; }   /* a new crew's NEW tag holds the corner (board.css) */
/* five chips beside FIGHT: a smaller NEW, clear of two skill icons */
.bd.tb[data-mode="plan"] .bd-own:has(> .bd-chip:nth-of-type(5)) .bd-chip.new::before { padding: 0 3px; font-size: 9px; letter-spacing: 0; }
.bd.tb[data-mode="plan"] .bd-own:has(> .bd-chip:nth-of-type(5)) .bd-chip.new .bd-f-foot { left: 24px; }
/* a trained unit's chip: the first letters of its skills */
.bd-f-role { flex: none; padding: 0 5px; font-size: 10px; font-weight: 800; letter-spacing: 0.6px; line-height: 13px;
  white-space: nowrap; color: #fff; background: #b06ee8; border: 2px solid var(--ol); border-radius: 7px; -webkit-text-stroke: 2px var(--ol); paint-order: stroke fill;
  pointer-events: none; }
/* (2026-10-09) the trained skills as their icons, straddling the chip's lower edge */
.bd-f-role.bd-f-ico { display: flex; gap: 1px; padding: 0; background: none; border: 0; line-height: 0; }
.bd-f-role.bd-f-ico svg { display: block; width: 18px; height: 18px; filter: drop-shadow(0 1.5px 0 rgba(14, 10, 26, 0.45)); }

/* the power card in hand: the crews it can go on light up, the one it is on already is gold, the others dim */
.bd-chip.bd-f-can { box-shadow: 0 0 0 3px #9fe0ff, 0 4px 0 rgba(47, 36, 55, 0.3); animation: bdFPulse 1s ease-in-out infinite; }
.bd-chip.bd-f-cur { background: linear-gradient(180deg, #ffe08a, #f0a93e); }
.bd-chip.bd-f-cur .t { color: #4a3a1c; }
.bd-chip.bd-f-dim { filter: grayscale(0.75) brightness(0.7); box-shadow: none; }
@keyframes bdFPulse { 50% { box-shadow: 0 0 0 6px #9fe0ff, 0 4px 0 rgba(47, 36, 55, 0.3); } }
.bd-ask.bd-f-asking { color: #9fe0ff; }
.bd-ask.bd-f-nudge { animation: bdNudge 0.4s ease both; }
.bd-in.bd-f-x { background: #e05460; }

/* the card's mark over each crew it can go on, following the bodies */
.bd-f-marks { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.bd-f-mark { position: absolute; left: 0; top: 0; padding: 0 8px; transform: translate(-50%, -100%); font-size: 22px; font-weight: 800; line-height: 28px; color: #9fe0ff;
  background: #3b3350; border: 3px solid var(--ol); border-radius: 14px; -webkit-text-stroke: 5px var(--ol); paint-order: stroke fill; box-shadow: 0 3px 0 rgba(47, 36, 55, 0.35);
  animation: bdFBob 0.9s ease-in-out infinite; }
.bd-f-mark.cur { color: #fff; background: #f0a93e; }
/* PROMOTE's mark: the stars that crew would have, in the chips' gold */
.bd-f-mark.star { color: #ffd34d; letter-spacing: -2px; }
.bd-f-mark.star.cur { color: #fff3b0; }
@keyframes bdFBob { 50% { transform: translate(-50%, calc(-100% - 6px)); } }

/* a crew's tier as stars on its chip (2026-10-08): ★ to ★★★ on every chip, those PROMOTE added brighter (board.css
   .bd-tierb places them) */
.bd-tierb b { font-weight: inherit; color: #fff3b0; filter: drop-shadow(0 0 3px #ffd34d); }

/* a skill used in a fight, named over the unit: yours large and gold, the other side's small and grey (in a Friend Duel
   watch, "yours" is the watching person's side: callOut) */
.bd-f-call { position: absolute; left: 0; top: 0; z-index: 5; transform: translate(-50%, -100%); white-space: nowrap; text-transform: uppercase; font-size: 22px;
  font-weight: 800; letter-spacing: 0.5px; line-height: 1; color: #ffe36b; -webkit-text-stroke: 6px var(--ol); paint-order: stroke fill; pointer-events: none;
  animation: bdFCall 0.9s ease-out both; }
.bd-f-call.theirs { font-size: 14px; color: #cfc7e2; -webkit-text-stroke: 4px var(--ol); }
@keyframes bdFCall {
  0% { transform: translate(-50%, -80%) scale(0.6); opacity: 0; }
  15% { transform: translate(-50%, -100%) scale(1.08); opacity: 1; }
  70% { transform: translate(-50%, calc(-100% - 12px)); opacity: 1; }
  100% { transform: translate(-50%, calc(-100% - 22px)); opacity: 0; }
}
@keyframes bdFFade { 0%, 80% { opacity: 1; } 100% { opacity: 0; } }
/* a rival's call that gives its place to one of yours fades out early (quick-board.js callOut, 2026-10-17) */
.bd-f-call.out { animation: bdFCallOut 0.15s linear forwards; }
@keyframes bdFCallOut { from { transform: translate(-50%, calc(-100% - 12px)); opacity: 1; } to { transform: translate(-50%, calc(-100% - 16px)); opacity: 0; } }

/* the result card: what worked; after a loss, Upgrades beside Road when a unit can learn a skill or change role; after
   the same fight lost twice, the training step the gold covers, UPGRADES beside it (trainingStep) */
.bd-f-route { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 10px; max-width: 320px; }
.bd-f-step { flex: 1 1 170px; font-size: 17px; font-weight: 800; line-height: 1.2; color: #fff; text-align: center; -webkit-text-stroke: 4px var(--ol); paint-order: stroke fill; }
.bd-f-route .bd-f-upbtn { flex: none; }
.bd-f-worked { max-width: 300px; font-size: 18px; font-weight: 800; line-height: 1.2; color: #fff; text-align: center; -webkit-text-stroke: 4px var(--ol); paint-order: stroke fill; }
.bd-f-adjust { gap: 14px; }
.bd-f-upbtn { position: relative; height: 36px; padding: 0 14px; border: 3px solid var(--ol); border-radius: 18px; background: linear-gradient(180deg, #8fe06a, #4fae38);
  font-size: 17px; font-weight: 800; -webkit-text-stroke: 4px var(--ol); paint-order: stroke fill; box-shadow: 0 3px 0 rgba(47, 36, 55, 0.3); }
.bd-f-upmark { position: absolute; right: -9px; top: -10px; width: 22px; height: 22px; font-style: normal; font-size: 12px; line-height: 18px; text-align: center; color: #fff;
  background: #ff5a5f; border: 2px solid var(--ol); border-radius: 50%; -webkit-text-stroke: 0; }

@media (prefers-reduced-motion: reduce) {
  .bd-chip.bd-f-can, .bd-f-mark, .bd-ask.bd-f-nudge { animation: none; }
  .bd-f-call { animation: bdFFade 0.9s linear both; }
  .bd-f-call.out { animation: bdFFade 0.15s linear forwards; animation-delay: -0.12s; }
}
/* 2026-10-07 lead's integration: the final's optional extra pick (half gold) */
.bd .bd-ask small.bd-f-extra, .bd small.bd-f-extra { display: block; font-size: 12px; font-weight: 700; letter-spacing: 0; opacity: 0.85; -webkit-text-stroke: 0; margin-top: 2px; }
.bd .bd-tier.t-comeback { background: #efe6ff; color: #4a3a73; }

/* ---- gold you get and gold you pay (2026-10-09, Eric: "ca-ching audio"; the reference clip: a green gain under the
   currency counter, a red spend under it). quick-board.js goldPop: "+N" or "−N" rises from just under the counter and
   fades, the counter bumps in that colour. With reduced motion the label stands still and fades. ---- */
.bd-goldpop { position: absolute; left: 0; top: 0; z-index: 55; transform: translate(-50%, 0); pointer-events: none; white-space: nowrap;
  font-size: 22px; font-weight: 800; line-height: 1; letter-spacing: 0.5px; -webkit-text-stroke: 6px var(--ol); paint-order: stroke fill;
  animation: bdGoldRise 1.2s cubic-bezier(.2, 1.3, .4, 1) both; }
.bd-goldpop.gain { color: #8cf25a; }
.bd-goldpop.spend { color: #ff6b6b; animation-name: bdGoldDrop; }
.bd-goldpop.big { font-size: 28px; -webkit-text-stroke: 7px var(--ol); }
.bd-goldpop.spend.above { animation-name: bdGoldRise; }
@keyframes bdGoldRise { 0% { transform: translate(-50%, 10px) scale(0.5); opacity: 0; } 18% { transform: translate(-50%, 0) scale(1.15); opacity: 1; }
  70% { transform: translate(-50%, -4px) scale(1); opacity: 1; } 100% { transform: translate(-50%, -14px) scale(1); opacity: 0; } }
@keyframes bdGoldDrop { 0% { transform: translate(-50%, -6px) scale(1.3); opacity: 0; } 15% { transform: translate(-50%, 0) scale(1.1); opacity: 1; }
  70% { transform: translate(-50%, 4px) scale(1); opacity: 1; } 100% { transform: translate(-50%, 14px) scale(1); opacity: 0; } }
/* a copy of a counter that is under something (the pack's dark screen), on the top layer while its label shows */
.bd-goldlift { position: absolute; z-index: 54; box-sizing: border-box; display: flex; align-items: center; justify-content: center; gap: 5px; pointer-events: none;
  animation: bdGoldShake 0.32s ease-out, bdGoldLift 1.25s linear both; }
@keyframes bdGoldLift { 0%, 80% { opacity: 1; } 100% { opacity: 0; } }
.bd-coins.bd-gain b { color: #b4ff8a; transition: color 0.2s; }
.bd-coins.bd-spend b { color: #ff9a9a; transition: color 0.2s; }
.bd-coins.bd-gain.bump { animation: bdGoldBump 0.32s cubic-bezier(.2, 1.8, .4, 1) both; }
.bd-coins.bd-spend.bump { animation: bdGoldShake 0.32s ease-out both; }
@keyframes bdGoldBump { 0% { transform: scale(1.45); } 100% { transform: none; } }
@keyframes bdGoldShake { 20% { transform: translateX(-4px) scale(0.92); } 50% { transform: translateX(4px); } 100% { transform: none; } }
/* BIG WIN's count lands: the total pops as the ca-ching rings */
.bd-bigwin .amt.rang { animation: bdGoldRang 0.45s cubic-bezier(.2, 1.8, .4, 1) both; }
.bd-bigwin .amt.rang b { color: #fff6c8; }
@keyframes bdGoldRang { 0% { transform: scale(1.35) rotate(-4deg); } 100% { transform: scale(1) rotate(-4deg); } }
@media (prefers-reduced-motion: reduce) {
  .bd-goldpop, .bd-goldpop.spend { animation: bdFFade 1.2s linear both; transform: translate(-50%, 0); }
  .bd-coins.bd-gain.bump, .bd-coins.bd-spend.bump, .bd-bigwin .amt.rang { animation: none; }
  .bd-goldlift { animation: bdGoldLift 1.25s linear both; }
}

/* ---- the tray's choice cards (2026-10-09, the reference's reward choice; card-ui.js CardUI.choice). The card is its own
   size (quick-board.js drawTray: trayFit, as large as the tray's room allows), its footer says what it is; a picked card
   is raised in lime with a check and pops once when picked. Boosts for this arena are orange (PROMOTE) and pink (DOUBLE)
   cards, never the blue of a unit's level or the green of an upgrade (art direction). ---- */
.bd .bd-offer, .bd.wide .bd-offer, .bd.tall.three .bd-offer, .bd.tall.four .bd-offer { width: auto; height: auto; padding: 4px 0 0; overflow: visible; }
.bd-offer .cu-choice { transition: transform 0.16s cubic-bezier(.2, 1.4, .4, 1); }
.bd-offer:hover { transform: none; }
.bd-offer:not(.in):not(.paid):hover .cu-choice { transform: translateY(-5px); }
.bd-offer.bd-f-pop { animation: bdFPop 0.42s cubic-bezier(.2, 1.8, .4, 1) both; }
@keyframes bdFPop { 0% { transform: scale(1.14) rotate(-2deg); } 100% { transform: none; } }
.bd .bd-offer:focus-visible { outline: none; }
.kbd .bd .bd-offer:focus-visible .cu-choice { box-shadow: 0 0 0 var(--olw) var(--ink), 0 0 0 calc(var(--olw) + 4px) #ffe36b, calc(var(--cw) * 0.035) calc(var(--cw) * 0.05) 0 var(--olw) rgba(14, 10, 26, 0.5); }
.bd-offer.bd-f-aiming .cu-choice { transform: translateY(-8px);
  box-shadow: 0 0 0 var(--olw) var(--ink), 0 0 0 calc(var(--olw) + 5px) #9fe0ff, 0 0 0 calc(var(--olw) * 2 + 5px) var(--ink), calc(var(--cw) * 0.035) calc(var(--cw) * 0.08) 0 var(--olw) rgba(14, 10, 26, 0.5); }
.bd-offer.bd-f-aiming { transform: none; }
.bd-offer .bd-in { right: -10px; top: -8px; z-index: 12; }
/* PROMOTE and DOUBLE on the tray: the card's own colours (board-cards.css); in hand, its glow in that colour */
.bd-offer .cu-k-promote { --hand: #ffb066; }
.bd-offer .cu-k-double { --hand: #ff9fcb; }
.bd-offer.bd-f-aiming .cu-k-promote, .bd-offer.bd-f-aiming .cu-k-double {
  box-shadow: 0 0 0 var(--olw) var(--ink), 0 0 0 calc(var(--olw) + 5px) var(--hand), 0 0 0 calc(var(--olw) * 2 + 5px) var(--ink), 0 0 calc(var(--cw) * 0.2) calc(var(--cw) * 0.04) var(--hand); }
/* the cards in the columns trayFit chose (it sets --tg and the row's max-width) */
.bd .bd-offers, .bd.tall.three .bd-offers, .bd.tall.four .bd-offers { gap: 18px var(--tg, 16px); }
.bd-slot { gap: 7px; }
.bd-offers { align-items: stretch; }
.bd-slot .bd-price { margin-top: auto; max-width: calc(100% + 16px); }
.bd .bd-price { box-shadow: inset 0 -3px 0 rgba(120, 70, 10, 0.3), 0 3px 0 rgba(20, 14, 34, 0.4); }
.bd .bd-price.paid { box-shadow: inset 0 -3px 0 rgba(20, 60, 10, 0.3), 0 3px 0 rgba(20, 14, 34, 0.4); }
/* the tall frame: the cards take the frame's width under the chips, centred; FIGHT moves up beside the ask line (it was a
   200 x 112 block beside the cards, which left them 80-97 px) */
.bd.tall .bd-tray { left: 10px; right: 10px; }
.bd .bd-tray .bd-offers { margin: 0 auto; justify-content: center; }
.bd.tall .bd-ask { min-height: 58px; margin: 0 0 16px 6px; padding-right: 188px; display: flex; flex-direction: column; justify-content: center; }
.bd.tall .bd-ask.bd-f-long { font-size: 18px; }
.bd.tall .bd-fight, .bd.tall.three .bd-fight, .bd.tall.four .bd-fight { top: calc(var(--by) + var(--bh) + 82px); right: 16px; width: 176px; height: 58px; font-size: 32px; }
/* the wide frame: the column starts closer to the board (on a 960 px frame it is 220 px wide); room over the cards for a
   picked card's lift, its tab and stars */
.bd.wide .bd-tray { left: calc(var(--bx) + var(--bw) + 12px); }
.bd.wide .bd-ask { margin-bottom: 14px; }
.bd.wide .bd-ask.bd-f-long { font-size: 19px; }

/* the chips: a crew promoted for this arena rings orange, a doubled one pink with its ×2 by the count */
.bd-chip.boosted.bd-f-promoted { box-shadow: 0 0 0 3px #ff9a3c; }
.bd-chip.boosted.bd-f-doubled { box-shadow: 0 0 0 3px #f2669e; }
.bd-chip.boosted.bd-f-promoted.bd-f-doubled { box-shadow: 0 0 0 3px #ff9a3c, 0 0 0 6px #f2669e; }
.bd-f-num { display: flex; align-items: baseline; gap: 3px; }
.bd-f-x2 { font-style: normal; font-size: 13px; font-weight: 800; line-height: 1; color: #ffc2dc; -webkit-text-stroke: 3px var(--ol); paint-order: stroke fill; }
.bd-tierb b { color: #ffbe7a; filter: drop-shadow(0 0 3px #ff9a3c); }
@media (prefers-reduced-motion: reduce) {
  .bd-offer.bd-f-pop, .bd-offer .cu-choice { animation: none; transition: none; }
}

/* ---- the tall board (board-build, 2026-10-17, dev/design/board/DESIGN.md; quick-board.js place sets .tb on a tall
   frame, .wt on a wide one; ?shortboard: neither). Top band: the top bar, then the rival's line on a plate (name, tags,
   army), in a fight the boss bar on it and the counter in the top bar. The tray stands in the open middle (--my, --mh);
   your crews and FIGHT in the bottom band. ---- */
/* opaque, down to the rival's plate, over it (the boss bar drops in from behind it) (ui4, 2026-10-18: the stage read
   through it and between them) */
.bd.tb .bd-top { z-index: 5; height: 58px; background: linear-gradient(180deg, #181324, #211a30); }
.bd.tb .bd-opp, .bd.tb .bd-bossbar, .bd.wt .bd-opp, .bd.wt .bd-bossbar { box-sizing: border-box; padding: 5px 10px 7px; border: 3px solid var(--ol); border-radius: 14px;
  background: linear-gradient(180deg, #5a3550, #34203a); box-shadow: inset 0 3px 0 rgba(255, 255, 255, 0.16), inset 0 -5px 0 rgba(0, 0, 0, 0.3), 0 5px 0 rgba(20, 14, 34, 0.5); }
.bd.tb .bd-opp { top: calc(var(--oy) + 2px); left: 8px; right: 92px; width: auto; height: 48px; flex-direction: row; align-items: center; gap: 8px; }
.bd.tb .bd-opp-name { flex: none; font-size: 21px; -webkit-text-stroke: 5px var(--ol); }
.bd.tb .bd-opp-name .bd-tag { margin-left: 4px; padding: 1px 5px 0; font-size: 10px; }
.bd.tb .bd-army { flex-wrap: nowrap; gap: 3px; min-width: 0; overflow: hidden; }
.bd.tb .bd-unit { flex: none; height: 28px; padding: 0 6px 0 1px; font-size: 14px; border-width: 2px; }
.bd.tb .bd-unit canvas { width: 22px !important; height: 22px !important; }
.bd.tb .bd-bossbar { top: calc(var(--oy) + 2px); bottom: auto; left: 8px; width: auto; right: 92px; height: 48px; padding: 3px 10px 6px; display: flex; flex-direction: column; gap: 1px; }
.bd.tb .bd-bossbar .who { flex-direction: row; align-items: baseline; justify-content: flex-start; gap: 8px; }
.bd.tb .bd-bossbar .nm { font-size: 17px; -webkit-text-stroke: 4px var(--ol); }
.bd.tb .bd-bossbar .ttl { font-size: 11px; }
.bd.tb .bd-bossbar .bar { height: 15px; border-width: 3px; }
.bd.tb[data-mode="plan"] .bd-bossbar, .bd.wt[data-mode="plan"] .bd-bossbar { display: none; }
.bd.tb[data-mode="combat"]:has(.bd-bossbar:not([hidden])) .bd-opp, .bd.wt[data-mode="combat"]:has(.bd-bossbar:not([hidden])) .bd-opp { visibility: hidden; }
.bd.tb .bd-hp { z-index: 6; top: 5px; right: 58px; left: auto; height: 48px; gap: 6px; }
.bd.tb .bd-cside { min-width: 0; }
.bd.tb .bd-cside .n { font-size: 30px; -webkit-text-stroke: 6px var(--ol); }
.bd.tb .bd-cside .who { display: none; }
.bd.tb .bd-cvs { font-size: 14px; }
.bd.tb[data-mode="combat"] .bd-phase { visibility: hidden; }
/* YOU and the gold pill clear of the chips' Lv tags and stars (ui4, 2026-10-18) */
.bd.tb .bd-you { top: calc(var(--by) + var(--bh) - 23px); }
.bd.tb .bd-purse { top: calc(var(--by) + var(--bh) - 30px); }
.bd.tb .bd-own { top: calc(var(--by) + var(--bh) + 16px); left: 8px; right: 8px; height: 58px; gap: 5px; justify-content: flex-start; }
.bd.tb[data-mode="plan"] .bd-own { right: 160px; }
.bd.tb .bd-chip { flex: 1 1 0; max-width: 104px; }
.bd.tb[data-mode="plan"] .bd-own:has(> .bd-chip:nth-of-type(4)) .bd-chip .t, .bd.tb .bd-own:has(> .bd-chip:nth-of-type(5)) .bd-chip .t { display: none; }
.bd.tb[data-mode="plan"] .bd-own:has(> .bd-chip:nth-of-type(4)) .bd-chip, .bd.tb .bd-own:has(> .bd-chip:nth-of-type(5)) .bd-chip { justify-content: center; padding: 0 4px 0 1px; }
.bd.tb[data-mode="plan"] .bd-own:has(> .bd-chip:nth-of-type(5)) .bd-f-vs { display: none; }
.bd.tb .bd-fight, .bd.tb.three .bd-fight, .bd.tb.four .bd-fight { top: calc(var(--by) + var(--bh) + 14px); right: 8px; width: 146px; height: 62px; font-size: 30px; }
.bd.tb .bd-tray { left: var(--bx); right: auto; width: var(--bw); top: calc(var(--my) - 16px); height: calc(var(--mh) - 24px); display: flex; flex-direction: column; align-items: center; justify-content: center; }
.bd.tb .bd-ask, .bd.tb .bd-ask.bd-f-long { min-height: 0; margin: 0 0 8px; padding: 0; font-size: 17px; text-align: center; -webkit-text-stroke: 4px var(--ol); paint-order: stroke fill; }
.bd.tb .bd-offers { justify-content: center; }
.bd.wt .bd-opp { top: calc(var(--oy) + 10px); left: 16px; width: min(230px, calc(var(--bx) - 32px)); }
.bd.wt .bd-bossbar { top: calc(var(--oy) + 10px); bottom: auto; left: 16px; width: min(230px, calc(var(--bx) - 32px)); }
.bd.wt .bd-own { top: calc(var(--oy) + 132px); }