/* board-training.css: owned by one lane of the 2026-10-07 learning-and-balance pass (tftsolid); the collection, the unit
   panel and its upgrade moment redone 2026-10-09 (tftcards AV pass, the collection lane) */
/* ---- training (2026-10-07, Eric: "upgrading heros should feel intentional and cool"): the Upgrades screen's groups,
   cards and the unit panel (src/quick-board.js drawUpgrades, trTile, drawTraining, trHero). The look is board.css's: ink
   outlines (--ol), outlined white type, chunky buttons; the cards are card-ui.js's (board-cards.css). ---- */

/* the list: groups (the next arena's units, the others, the locked ones), each a grid of cards */
.bd-ups.bd-tr-ups { display: flex; flex-direction: column; gap: 10px; }
.bd-tr-group { display: flex; flex-direction: column; gap: 4px; }
.bd-tr-ghead { margin: 0; padding: 0 4px; font-size: 21px; font-weight: 800; line-height: 1.1; color: #ffe08a; -webkit-text-stroke: 5px var(--ol); paint-order: stroke fill;
  text-shadow: 0 3px 0 rgba(20, 14, 34, 0.45); }
.bd-tr-group.other .bd-tr-ghead, .bd-tr-group.locked .bd-tr-ghead { font-size: 17px; color: #d8d0ef; }
/* 2026-10-09: cards of one width (quick-board.js TR_CW), as many to a row as fit, centred */
.bd-tr-grid { display: grid; grid-template-columns: repeat(auto-fill, 150px); justify-content: center; gap: 30px 12px; align-content: start; padding: 16px 4px 18px; }

/* ---- a unit's card (2026-10-09, the reference's collection: the colour full-bleed, the unit large, the level on the star
   badge, the card bar, the skill on a ribbon). Its colour is its role's: the same hues as the role tags, never a
   rarity's gold or silver (those are the pack's). ---- */
.bd-tr-tile { position: relative; width: 150px; }
.bd .bd-tr-open { display: block; width: 150px; padding: 0; border: 0; background: none; cursor: pointer; transition: transform 0.15s cubic-bezier(.2, 1.4, .4, 1); }
.bd .bd-tr-open:hover { transform: translateY(-4px); }
.bd .bd-tr-open:active { transform: translateY(2px) scale(0.98); }
.bd .bd-tr-open:focus-visible { outline: none; }
.kbd .bd .bd-tr-open:focus-visible .cu-card { 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-tr-tile .cu-card { --rim: #fff8ea; }
.bd-tr-tile.t-front .cu-card, .bd-tr-hero.t-front { --bg: radial-gradient(130% 95% at 50% 28%, #b4dcff 0%, #74aaf7 52%, #4a74dc 100%); }
.bd-tr-tile.t-back .cu-card, .bd-tr-hero.t-back { --bg: radial-gradient(130% 95% at 50% 28%, #dcf8b4 0%, #93d966 52%, #4f9f39 100%); }
.bd-tr-tile.t-swarm .cu-card, .bd-tr-hero.t-swarm { --bg: radial-gradient(130% 95% at 50% 28%, #ffd9ec 0%, #f59ac6 52%, #c9558f 100%); }
.bd-tr-tile.t-splash .cu-card, .bd-tr-hero.t-splash { --bg: radial-gradient(130% 95% at 50% 28%, #ffd2c4 0%, #ff8f7c 52%, #d24f52 100%); }
.bd-tr-tile.t-tank .cu-card, .bd-tr-hero.t-tank { --bg: radial-gradient(130% 95% at 50% 28%, #e6d4ff 0%, #b28cf2 52%, #7a52cf 100%); }
.bd-tr-tile.t-flank .cu-card, .bd-tr-hero.t-flank { --bg: radial-gradient(130% 95% at 50% 28%, #ffe0bf 0%, #ffa863 52%, #da6a2c 100%); }
.bd-tr-tile.t-support .cu-card, .bd-tr-hero.t-support { --bg: radial-gradient(130% 95% at 50% 28%, #ccfff2 0%, #6edcc4 52%, #2f9f8c 100%); }
/* names a size down on the collection's cards: "Mammoth" ran past the edge at the component's size */
.bd-tr-tile .cu-name { font-size: calc(var(--cw) * 0.15); }
.bd-tr-tile .cu-name.cu-mid { font-size: calc(var(--cw) * 0.135); }
.bd-tr-tile .cu-name.cu-long { font-size: calc(var(--cw) * 0.112); }
/* the level's star in the collection's own colour (the pack's count star stays the cards lane's blue) */
.bd-tr-tile .cu-st-fill, .bd-tr-lvbadge .st-fill { fill: #ffd34d; stroke: #fff3b0; }
/* the role tag on the card's top-left corner; the level's star is on its top-right */
.bd-tr-tag { position: absolute; left: -6px; top: -11px; z-index: 10; padding: 0 7px; font-size: 11px; font-weight: 800; letter-spacing: 0.6px; line-height: 17px;
  color: #3b3350; background: #e8e2ff; border: 2px solid var(--ol); border-radius: 8px; box-shadow: 0 2px 0 rgba(20, 14, 34, 0.45); pointer-events: none; }
.bd-tr-tag.t-front { background: #8fc0ff; }
.bd-tr-tag.t-back { background: #b4ef7d; }
.bd-tr-tag.t-swarm { background: #ffd15c; }
.bd-tr-tag.t-splash { background: #ff9a9a; }
.bd-tr-tag.t-tank { background: #c9b6ff; }
.bd-tr-tag.t-flank { background: #ffb26b; }
.bd-tr-tag.t-support { background: #9ff0e0; }
/* the skill ribbon under the card (card-ui.js footer): the role trained, both skills, the one it is born with, or a role
   to choose (yellow; the only one that moves on the grid) */
.cu-foot.bd-tr-badge { background: #9a5ce0; box-shadow: 0 0 0 calc(var(--cw) * 0.014 + 0.6px) var(--ink), 0 2px 0 rgba(20, 14, 34, 0.45); }
.cu-foot.bd-tr-badge.both { background: linear-gradient(90deg, #b06ee8, #6474f2); }
.cu-foot.bd-tr-badge.inn { background: #6b6083; }
.cu-foot.bd-tr-badge.ask { background: #ffd34d; color: #3b3350; -webkit-text-stroke: 0; animation: bdTrAsk 1.4s ease-in-out infinite; }
@keyframes bdTrAsk { 50% { transform: translateX(-50%) scale(1.08); } }
/* a card whose cards cover its next level: a short pop of the arrow when the grid draws, then still */
.bd-tr-tile .cu-ready .cu-arrow { animation: bdTrArrow 0.5s 0.15s cubic-bezier(.2, 1.8, .4, 1) both; }
@keyframes bdTrArrow { from { transform: translateY(6px) scale(0.4); } to { transform: none; } }
/* a locked unit: the card back, dimmed, its name and how it comes over it */
.bd-tr-tile.locked .cu-back .cu-face { filter: grayscale(0.65) brightness(0.6); }
.bd-tr-tile.locked .cu-back { box-shadow: 0 0 0 var(--olw) var(--ink), calc(var(--cw) * 0.035) calc(var(--cw) * 0.05) 0 var(--olw) rgba(14, 10, 26, 0.4); }
.bd-tr-tile.locked .cu-emb b { display: none; }
.bd-tr-tile.locked .cu-emb { top: 12%; }
.bd-tr-lockname { position: absolute; z-index: 3; left: 4px; right: 4px; bottom: 33%; font-size: 19px; font-weight: 800; line-height: 1; color: #d8d0ef; text-align: center;
  -webkit-text-stroke: 5px var(--ol); paint-order: stroke fill; }
.bd-tr-lock { position: absolute; z-index: 3; left: 8px; right: 8px; bottom: 9%; padding: 3px 6px; font-size: 12px; font-weight: 800; line-height: 1.15; text-align: center;
  color: #3b3350; background: #e8e2ff; border: 2px solid var(--ol); border-radius: 10px; box-shadow: 0 2px 0 rgba(20, 14, 34, 0.45); }
/* a purchase: the card behind the panel pops with the lime of a choice */
.bd-tr-tile.flash .cu-card { animation: bdTrPop 0.6s cubic-bezier(.2, 1.6, .4, 1) both; }
@keyframes bdTrPop { 0% { transform: scale(1.12) translateY(-8px); box-shadow: 0 0 0 var(--olw) var(--ink), 0 0 0 calc(var(--olw) + 6px) #b8ff3c; } 100% { transform: none; } }

/* ---- the unit panel (2026-10-09, rebuilt to dev/captures/ART_DIRECTION.md's "unit info panel" after Eric on v18: "these
   cards really do not look like something supercell etc wouldve made..."; quick-board.js drawTraining). A deep indigo
   card in a header ribbon of the role's colour: the level star and the name, the stage, stat chips, two skill icon
   cards, the skins, one big UPGRADE button. Depth on every piece: an ink outline, a light top bevel, a dark bottom lip,
   a hard offset shadow, vertical gradients. The header, stage and chips stay in view; the skills and skins scroll
   inside the panel when the screen is short; the button stays at the foot. ---- */
/* a track the panel's size, so the card's max-height holds (ui4, 2026-10-18: it ran into the bottom inset at 360 x 720) */
.bd-tr-panel { position: absolute; inset: 0; z-index: 20; display: grid; grid-template: minmax(0, 1fr) / minmax(0, 1fr); place-items: center; padding: 12px;
  background: rgba(16, 11, 30, 0.82); pointer-events: auto; }
.bd-tr-panel[hidden] { display: none; }
.bd-tr-card { --rc: #4a8cf0; --rcl: #a6d2ff; --rcd: #2b5cc8;
  position: relative; width: min(520px, 100%); max-height: 100%; display: flex; flex-direction: column; color: #fff;
  border: 4px solid var(--ol); border-radius: 26px;
  background: repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.035) 0 14px, rgba(255, 255, 255, 0) 14px 28px), linear-gradient(180deg, #5b4dca 0%, #4436a6 34%, #342984 100%);
  box-shadow: inset 0 -6px 0 rgba(10, 6, 30, 0.3), 0 8px 0 rgba(8, 5, 20, 0.6); animation: bdTrIn 0.28s cubic-bezier(.2, 1.4, .4, 1) both; }
@keyframes bdTrIn { from { transform: scale(0.9); opacity: 0; } 60% { transform: scale(1.03); opacity: 1; } to { transform: none; } }
.bd-tr-card.t-front { --rc: #4a8cf0; --rcl: #a6d2ff; --rcd: #2b5cc8; }
.bd-tr-card.t-back { --rc: #5bbf3a; --rcl: #c2f39a; --rcd: #36891f; }
.bd-tr-card.t-swarm { --rc: #ee6fae; --rcl: #ffc6e1; --rcd: #b43f7c; }
.bd-tr-card.t-splash { --rc: #f0605a; --rcl: #ffb7a6; --rcd: #b5373b; }
.bd-tr-card.t-tank { --rc: #9b6ff0; --rcl: #dac4ff; --rcd: #6a44c0; }
.bd-tr-card.t-flank { --rc: #f58a3a; --rcl: #ffd2a2; --rcd: #bf5a1c; }
.bd-tr-card.t-support { --rc: #2fbfa2; --rcl: #a6f3e2; --rcd: #1c8673; }
.bd-tr-card button { font-family: var(--font); }
.bd-tr-card button:disabled { cursor: default; }
.bd-tr-card .ink { color: #fff; paint-order: stroke fill; }

/* the header ribbon: the role's colour, the name in display type, the level star breaking out of its top-left corner,
   close on the right */
.bd-tr-head { position: relative; z-index: 6; flex: none; height: 62px; display: flex; align-items: center; justify-content: center; padding: 0 58px 2px 82px;
  border-bottom: 4px solid var(--ol); border-radius: 22px 22px 0 0; background: linear-gradient(180deg, var(--rcl) 0%, var(--rc) 52%, var(--rcd) 100%);
  box-shadow: inset 0 3px 0 rgba(255, 255, 255, 0.5), inset 0 -5px 0 rgba(0, 0, 0, 0.2), 0 3px 0 rgba(10, 6, 30, 0.35); }
.bd-tr-name { margin: 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 36px; font-weight: 800; line-height: 1.15;
  -webkit-text-stroke: 8px var(--ol); text-shadow: 0 4px 0 rgba(10, 6, 30, 0.4); }
.bd-tr-name.long { font-size: 30px; }
.bd-tr-head > .bd-tr-lvbadge { position: absolute; left: -16px; top: -18px; width: 88px; height: 88px; }
.bd-tr-lvbadge svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 4px 0 rgba(10, 6, 30, 0.5)); }
.bd-tr-lvbadge .st-ink { fill: var(--ol); stroke: var(--ol); stroke-width: 14; stroke-linejoin: round; }
.bd-tr-lvbadge .st-fill { stroke-width: 4.5; stroke-linejoin: round; }
.bd-tr-lvbadge b { position: absolute; inset: 9% 0 0; display: grid; place-items: center; font-size: 30px; font-weight: 800; line-height: 1; color: #fff;
  -webkit-text-stroke: 7px var(--ol); paint-order: stroke fill; }
.bd-tr-lvbadge.tick .old { animation: bdTrOld 0.4s ease-in both; }
.bd-tr-lvbadge.tick .new { animation: bdTrNew 0.5s 0.32s cubic-bezier(.2, 1.9, .4, 1) both; }
.bd-tr-lvbadge.tick svg { animation: bdTrStarSpin 0.7s 0.2s cubic-bezier(.2, 1.4, .4, 1) both; }
@keyframes bdTrOld { to { transform: translateY(-26px) scale(0.6); opacity: 0; } }
@keyframes bdTrNew { from { transform: scale(2.4); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes bdTrStarSpin { 0% { transform: rotate(0) scale(1); } 50% { transform: rotate(-24deg) scale(1.25); } 100% { transform: none; } }
.bd .bd-tr-x { position: absolute; right: 9px; top: 50%; z-index: 7; width: 42px; height: 42px; margin-top: -22px; padding: 0 0 3px; display: grid; place-items: center; cursor: pointer;
  border: 3px solid var(--ol); border-radius: 13px; background: linear-gradient(180deg, #ff9d8c 0%, #f2554a 50%, #d63a36 100%); color: #fff;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.55), inset 0 -4px 0 rgba(90, 10, 10, 0.35), 0 3px 0 rgba(10, 6, 30, 0.45);
  font-size: 22px; font-weight: 800; line-height: 1; -webkit-text-stroke: 4px var(--ol); paint-order: stroke fill; }
.bd .bd-tr-x:active { transform: translateY(3px); box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.55), 0 0 0 rgba(0, 0, 0, 0); }

/* the body under the header: the stage and chips (side), then the skills and skins (scrolling) and the button (foot).
   On a wide screen the side is a left column */
.bd-tr-main { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.bd-tr-side { flex: none; display: flex; flex-direction: column; gap: 12px; padding: 12px 12px 0; }
.bd-tr-rest { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.bd-tr-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 12px; padding: 16px 12px 8px;
  scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.3) transparent; }
.bd.wide .bd-tr-card { width: min(1000px, 100%); }
.bd.wide .bd-tr-main { flex-direction: row; }
.bd.wide .bd-tr-side { width: 448px; padding: 14px 0 14px 14px; }
.bd.wide .bd-tr-rest { flex: 1 1 0; min-width: 0; }
.bd.wide .bd-tr-body { padding: 14px 14px 8px; }
.bd.wide .bd-tr-hero { flex: 1 1 auto; height: auto; min-height: 300px; }
.bd.wide .bd-tr-face { width: 420px; height: 380px; margin-left: -210px; bottom: 6px; }
.bd.wide .bd-tr-face canvas { width: 420px !important; height: 380px !important; }
.bd.wide .bd-tr-floor { width: 260px; margin-left: -130px; }

/* the stage: the unit large on its role's colour (the tile colours above), a lit backdrop and a soft shadow under its
   feet (no floor ring) */
.bd-tr-hero { --bg: radial-gradient(130% 95% at 50% 28%, #b4dcff 0%, #74aaf7 52%, #4a74dc 100%); --upc: #ffd34d;
  position: relative; flex: none; height: 272px; overflow: hidden; border: 4px solid var(--ol); border-radius: 20px; background: var(--bg);
  box-shadow: inset 0 4px 0 rgba(255, 255, 255, 0.4), inset 0 -6px 0 rgba(20, 14, 34, 0.25), 0 5px 0 rgba(8, 5, 20, 0.45); }
.bd-tr-hero > i, .bd-tr-hero > span { position: absolute; display: block; pointer-events: none; }
.bd-tr-rays { left: 50%; top: 46%; width: 620px; height: 620px; margin: -310px 0 0 -310px; border-radius: 50%;
  background: repeating-conic-gradient(from 6deg, rgba(255, 255, 255, 0.2) 0deg 10deg, rgba(255, 255, 255, 0) 10deg 24deg);
  -webkit-mask: radial-gradient(circle, #000 0 22%, transparent 64%); mask: radial-gradient(circle, #000 0 22%, transparent 64%); }
.bd-tr-floor { left: 50%; bottom: 8px; width: 200px; height: 30px; margin-left: -100px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(20, 12, 40, 0.42), rgba(20, 12, 40, 0)); }
.bd-tr-face { z-index: 2; left: 50%; bottom: 4px; width: 340px; height: 250px; margin-left: -170px; display: block; }
.bd-tr-face canvas { display: block; width: 340px !important; height: 250px !important; }
/* the role tag at the stage's foot: a button, the ⓘ in it; what the unit does in a bubble over the stage */
.bd .bd-tr-hero .bd-tr-role { position: absolute; left: 10px; top: auto; bottom: 10px; z-index: 6; height: 30px; display: flex; align-items: center; gap: 6px; padding: 0 4px 0 10px; cursor: pointer;
  font-size: 14px; font-weight: 800; letter-spacing: 0.6px; line-height: 1; color: #3b3350; border: 3px solid var(--ol); border-radius: 10px;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.55), inset 0 -3px 0 rgba(0, 0, 0, 0.15), 0 3px 0 rgba(10, 6, 30, 0.45); pointer-events: auto; }
.bd-tr-ii { width: 18px; height: 18px; display: grid; place-items: center; font-style: normal; font-size: 12px; font-weight: 800; color: #fff; background: #3b3350; border-radius: 50%; }
.bd .bd-tr-hero .bd-tr-role[aria-expanded="true"] .bd-tr-ii { background: #f2554a; }
.bd-tr-jobtip { position: absolute; z-index: 6; left: 10px; right: 10px; bottom: 50px; padding: 9px 12px; border: 3px solid var(--ol); border-radius: 14px;
  background: linear-gradient(180deg, #fffdf6, #efe8ff); color: #3b3350; box-shadow: 0 4px 0 rgba(10, 6, 30, 0.45); }
.bd-tr-jobtip[hidden] { display: none; }
.bd-tr-jobtip p { margin: 0; }
.bd-tr-job { font-size: 15px; font-weight: 800; line-height: 1.25; }
.bd-tr-fit { margin-top: 3px !important; font-size: 13px; font-weight: 700; line-height: 1.25; color: #6b5a8e; }
/* the gold, when the panel offers a role switch (the one thing in it gold pays for) */
.bd-tr-hero > .bd-tr-gold { z-index: 5; right: 10px; bottom: 10px; height: 34px; padding: 0 12px 0 8px; display: flex; align-items: center; gap: 6px; color: #fff; font-size: 19px;
  background: linear-gradient(180deg, #4a4072, #2f2852); border: 3px solid var(--ol); border-radius: 17px; box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.2), 0 3px 0 rgba(10, 6, 30, 0.45); }
.bd-tr-hero > .bd-tr-gold .bd-coin { width: 21px; height: 21px; }
/* the moment: a flash in the skill's colour from the unit, stars thrown out, the unit hops, what it gained stamped on */
.bd-tr-flash { z-index: 1; inset: 0; background: radial-gradient(circle at 50% 58%, var(--upc) 0, var(--upc) 18%, rgba(255, 255, 255, 0) 62%); opacity: 0;
  animation: bdTrFlash 0.9s ease-out both; }
@keyframes bdTrFlash { 0% { opacity: 0; transform: scale(0.4); } 15% { opacity: 0.95; } 100% { opacity: 0; transform: scale(1.6); } }
.bd-tr-burst { z-index: 3; left: 50%; top: 56%; width: 0; height: 0; }
.bd-tr-burst i { position: absolute; left: -13px; top: -15px; font-style: normal; font-size: 30px; font-weight: 800; line-height: 1; color: #ffd34d;
  -webkit-text-stroke: 5px var(--ol); paint-order: stroke fill; opacity: 0; animation: bdTrStar 0.9s 0.05s cubic-bezier(.15, .8, .35, 1) both; }
.bd-tr-burst i.sm { font-size: 20px; left: -9px; top: -10px; color: #fff6c8; animation-delay: 0.12s; }
@keyframes bdTrStar { 0% { transform: translate(0, 0) scale(0.3) rotate(0); opacity: 1; } 70% { opacity: 1; }
  100% { transform: translate(var(--dx), var(--dy)) scale(1) rotate(var(--r)); opacity: 0; } }
.bd-tr-hero.up .bd-tr-face { animation: bdTrHop 0.7s 0.05s cubic-bezier(.2, 1.4, .4, 1) both; }
@keyframes bdTrHop { 0% { transform: scale(0.92, 1.06); } 30% { transform: translateY(-20px) scale(1.08); } 60% { transform: translateY(0) scale(1.06, 0.94); } 100% { transform: none; } }
.bd-tr-gain { z-index: 7; left: 50%; bottom: 14px; max-width: 92%; padding: 2px 16px; transform: translateX(-50%); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-size: 26px; font-weight: 800; line-height: 1.2; color: #fff; background: var(--upc); border: 3px solid var(--ol); border-radius: 14px;
  -webkit-text-stroke: 6px var(--ol); paint-order: stroke fill; box-shadow: inset 0 3px 0 rgba(255, 255, 255, 0.45), 0 4px 0 rgba(10, 6, 30, 0.5);
  animation: bdTrGain 2.2s 0.2s cubic-bezier(.2, 1.6, .4, 1) both; }
@keyframes bdTrGain { 0% { transform: translateX(-50%) scale(2.2) rotate(-6deg); opacity: 0; } 14% { transform: translateX(-50%) scale(1) rotate(-3deg); opacity: 1; }
  80% { transform: translateX(-50%) scale(1) rotate(-3deg); opacity: 1; } 100% { transform: translateX(-50%) scale(1) rotate(-3deg); opacity: 0; } }
/* the skin just put on: the unit stamps in */
.bd-tr-face.flash canvas { animation: bdTrSkin 0.55s cubic-bezier(.2, 1.6, .4, 1) both; }
@keyframes bdTrSkin { from { transform: scale(0.8); filter: brightness(1.8); } to { transform: none; filter: none; } }

/* the stat chips: a dark bevelled pill each, its icon breaking out of its left end, the number in display type; what
   the next level adds on a green tag */
.bd-tr-stats { flex: none; display: flex; gap: 20px; padding: 6px 2px 2px 14px; }
.bd-tr-stat { position: relative; flex: 1 1 auto; min-width: 0; height: 40px; display: flex; align-items: center; justify-content: center; padding: 0 6px 2px 20px;
  border: 3px solid var(--ol); border-radius: 13px; background: linear-gradient(180deg, #31296b 0%, #251e55 100%);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.2), inset 0 -4px 0 rgba(0, 0, 0, 0.28), 0 4px 0 rgba(8, 5, 20, 0.45); }
.bd-tr-sti { position: absolute; left: -15px; top: 50%; width: 38px; height: 38px; margin-top: -20px; filter: drop-shadow(0 2px 0 rgba(8, 5, 20, 0.45)); }
.bd-tr-sti svg { display: block; width: 100%; height: 100%; }
.bd-tr-stat b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 21px; font-weight: 800; line-height: 1.1; color: #fff;
  -webkit-text-stroke: 5px var(--ol); paint-order: stroke fill; }
.bd-tr-stat.s-speed b, .bd-tr-stat.s-range b { font-size: 17px; }
.bd-tr-stat.long b { font-size: 14.5px; -webkit-text-stroke: 4px var(--ol); }
.bd-tr-stat:has(em) { padding-right: 16px; }
.bd-tr-stat em { position: absolute; right: -8px; top: -14px; z-index: 1; padding: 0 5px; font-style: normal; font-size: 13px; font-weight: 800; line-height: 17px; color: #fff;
  background: linear-gradient(180deg, #9cf06a, #3faa2a); border: 2px solid var(--ol); border-radius: 8px; -webkit-text-stroke: 3px var(--ol); paint-order: stroke fill;
  box-shadow: 0 2px 0 rgba(8, 5, 20, 0.45); }

/* ---- the two skills: icon cards side by side ---- */
.bd-tr-sksec { display: flex; flex-direction: column; gap: 10px; }
.bd-tr-askrow { display: flex; align-items: center; justify-content: center; gap: 8px; }
.bd-tr-ask { padding: 2px 16px 4px; font-size: 18px; font-weight: 800; line-height: 1.15; color: #3b3350; border: 3px solid var(--ol); border-radius: 12px;
  background: linear-gradient(180deg, #fff1a6, #ffd34d 55%, #f2b62a); box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.6), inset 0 -4px 0 rgba(120, 70, 0, 0.22), 0 3px 0 rgba(8, 5, 20, 0.45); }
.bd-tr-skills { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding-top: 10px; }
.bd-tr-skill { --skc: #8f86b8; --skl: #cfc8ec; --skd: #5d5585;
  position: relative; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 18px 10px 12px; text-align: center;
  border: 4px solid var(--ol); border-radius: 20px;
  background: radial-gradient(85% 55% at 50% 30%, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 70%), linear-gradient(180deg, var(--skl) 0%, var(--skc) 48%, var(--skd) 100%);
  box-shadow: inset 0 3px 0 rgba(255, 255, 255, 0.5), inset 0 -6px 0 rgba(0, 0, 0, 0.24), 0 6px 0 rgba(8, 5, 20, 0.5);
  transition: transform 0.15s cubic-bezier(.2, 1.4, .4, 1), filter 0.15s, box-shadow 0.15s; cursor: pointer; }
/* trained or built in: lit, glowing in its colour */
.bd-tr-skill.on { justify-content: center; box-shadow: inset 0 3px 0 rgba(255, 255, 255, 0.55), inset 0 -6px 0 rgba(0, 0, 0, 0.24), 0 6px 0 rgba(8, 5, 20, 0.5), 0 0 22px 3px color-mix(in srgb, var(--skc) 65%, transparent); }
.bd-tr-skicon { position: relative; display: block; flex: none; width: 84px; height: 84px; filter: drop-shadow(0 4px 0 rgba(8, 5, 20, 0.4)); }
.bd-tr-skicon > svg { display: block; width: 100%; height: 100%; }
.bd-tr-skname { max-width: 100%; margin: 3px 0 0; font-size: 22px; font-weight: 800; line-height: 1.05; overflow-wrap: anywhere; -webkit-text-stroke: 6px var(--ol); text-shadow: 0 3px 0 rgba(8, 5, 20, 0.35); }
.bd-tr-skline { width: 100%; margin: 5px 0 0; padding: 5px 8px 6px; font-size: 13px; font-weight: 700; line-height: 1.2; color: #fff; border-radius: 10px; background: rgba(14, 8, 34, 0.34);
  box-shadow: inset 0 2px 0 rgba(0, 0, 0, 0.2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.bd-tr-skrib { position: absolute; z-index: 3; left: 50%; top: -15px; transform: translateX(-50%); padding: 1px 14px 3px; white-space: nowrap; font-size: 15px; font-weight: 800; line-height: 20px;
  letter-spacing: 0.6px; text-transform: uppercase; color: #fff; -webkit-text-stroke: 4px var(--ol); paint-order: stroke fill; border: 3px solid var(--ol); border-radius: 10px;
  background: linear-gradient(180deg, #b6f58a, #5cc436 55%, #43a52a); box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.55), 0 3px 0 rgba(8, 5, 20, 0.5); }
.bd-tr-skill.inn .bd-tr-skrib { color: #3b3350; -webkit-text-stroke: 0; background: linear-gradient(180deg, #ffffff, #d9d3f0); }
/* to choose: in colour, a tap picks it: lime, lifted; the other quietens */
.bd-tr-skill.choose:hover { transform: translateY(-3px); }
.bd-tr-skills.picked .bd-tr-skill.choose:not(.pick) { filter: saturate(0.5) brightness(0.8); }
.bd-tr-skill.pick { transform: translateY(-6px); box-shadow: inset 0 3px 0 rgba(255, 255, 255, 0.55), inset 0 -6px 0 rgba(0, 0, 0, 0.24), 0 0 0 4px #b8ff3c, 0 0 0 7px var(--ol), 0 12px 0 rgba(8, 5, 20, 0.45);
  animation: bdTrPick 0.3s cubic-bezier(.2, 1.8, .4, 1) both; }
@keyframes bdTrPick { from { transform: translateY(-6px) scale(1.06); } to { transform: translateY(-6px); } }
.bd-tr-skill.choose:focus-visible { outline: none; }
.kbd .bd-tr-skill.choose:focus-visible { box-shadow: inset 0 3px 0 rgba(255, 255, 255, 0.55), 0 0 0 4px #ffe36b, 0 0 0 7px var(--ol), 0 6px 0 rgba(8, 5, 20, 0.5); }
/* not yet: dimmed, its lock */
.bd-tr-skill.later { background: linear-gradient(180deg, #5d5690 0%, #463f74 52%, #37305e 100%); box-shadow: inset 0 3px 0 rgba(255, 255, 255, 0.2), inset 0 -6px 0 rgba(0, 0, 0, 0.24), 0 6px 0 rgba(8, 5, 20, 0.5); }
.bd-tr-skill.later .bd-tr-skicon > svg { filter: grayscale(0.85) brightness(0.72); }
.bd-tr-skill.later .bd-tr-skicon + .bd-tr-skname { margin-top: 12px; }
.bd-tr-skill.later .bd-tr-skname { color: #d6cff0; }
.bd-tr-skill.later .bd-tr-skline { color: #c6bee6; }
.bd-tr-sklock { position: absolute; z-index: 2; left: 50%; bottom: -13px; transform: translateX(-50%); display: flex; align-items: center; gap: 3px; height: 28px; padding: 0 9px 0 5px; white-space: nowrap;
  border: 3px solid var(--ol); border-radius: 14px; background: linear-gradient(180deg, #4a4078, #2a2350); box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.22), 0 3px 0 rgba(8, 5, 20, 0.45); }
.bd-tr-sklock svg { width: 19px; height: 19px; display: block; }
.bd-tr-sklock b { font-size: 15px; font-weight: 800; line-height: 1; color: #fff; -webkit-text-stroke: 4px var(--ol); paint-order: stroke fill; }
/* the corner buttons: ⓘ (what it does) top-left, the round PREVIEW top-right */
.bd .bd-tr-i { flex: none; width: 28px; height: 28px; padding: 0 0 1px; display: grid; place-items: center; cursor: pointer; border: 3px solid var(--ol); border-radius: 50%;
  background: linear-gradient(180deg, #ffffff, #d6d0ee); color: #3b3350; font-size: 16px; font-weight: 800; font-style: italic; line-height: 1; box-shadow: 0 2px 0 rgba(8, 5, 20, 0.45); }
.bd .bd-tr-i[aria-expanded="true"] { background: linear-gradient(180deg, #fff1a6, #ffd34d); }
.bd .bd-tr-ski { position: absolute; z-index: 4; left: 7px; top: 7px; }
.bd .bd-tr-prev { position: absolute; z-index: 4; right: 6px; top: 6px; width: 42px; height: 42px; padding: 0; display: grid; place-items: center; cursor: pointer;
  border: 3px solid var(--ol); border-radius: 50%; background: linear-gradient(180deg, #b4dcff 0%, #5d9cf2 50%, #3f7fe0 100%);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.6), inset 0 -4px 0 rgba(10, 30, 90, 0.35), 0 3px 0 rgba(8, 5, 20, 0.5); }
.bd .bd-tr-prev svg { display: block; width: 22px; height: 22px; margin-left: 3px; }
.bd .bd-tr-prev:active { transform: translateY(3px); box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.6), 0 0 0 rgba(0, 0, 0, 0); }
.bd .bd-tr-prev.both { position: relative; right: auto; top: auto; align-self: center; width: auto; height: 42px; padding: 0 18px 2px 12px; display: flex; align-items: center; gap: 6px; border-radius: 21px; }
.bd .bd-tr-prev.both svg { margin-left: 0; }
.bd .bd-tr-prev.both b { font-size: 18px; -webkit-text-stroke: 5px var(--ol); }
.bd-tr-vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* SWITCH: the other role for gold (gold for a premium spend), its price on a gold chip */
.bd .bd-tr-swap { width: 100%; height: 44px; margin-top: 8px; display: flex; align-items: center; justify-content: center; gap: 7px; padding: 0 6px 4px; cursor: pointer;
  border: 3px solid var(--ol); border-radius: 14px; background: linear-gradient(180deg, #ffe48a 0%, #ffc12e 50%, #f0a516 54%, #e0920c 100%);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.6), inset 0 -5px 0 rgba(120, 60, 0, 0.35), 0 4px 0 rgba(8, 5, 20, 0.5); }
.bd .bd-tr-swap > b { font-size: 18px; font-weight: 800; -webkit-text-stroke: 5px var(--ol); }
.bd-tr-gchip { display: inline-flex; align-items: center; gap: 3px; height: 28px; padding: 0 9px 0 4px; border-radius: 14px; background: rgba(60, 30, 0, 0.32); box-shadow: inset 0 2px 0 rgba(0, 0, 0, 0.2); }
.bd-tr-gchip i { display: block; width: 22px; height: 22px; }
.bd-tr-gchip i svg { display: block; width: 100%; height: 100%; }
.bd-tr-gchip b { font-size: 17px; font-weight: 800; -webkit-text-stroke: 4px var(--ol); }
.bd .bd-tr-swap:active:not(:disabled) { transform: translateY(4px); box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.6), 0 0 0 rgba(0, 0, 0, 0); }
.bd .bd-tr-swap:disabled { filter: grayscale(0.8) brightness(0.8); }
.bd-tr-why { margin-top: 4px; font-size: 12.5px; font-weight: 800; line-height: 1.2; color: #ffc2c7; }
/* what a skill does, under the cards, after a tap; its notch under the card tapped */
.bd-tr-skwrap { position: relative; }
.bd-tr-skdesc { --skc: #8f86b8; position: absolute; z-index: 9; left: 0; right: 0; top: calc(100% + 12px); cursor: pointer; padding: 10px 14px 11px; font-size: 15px; font-weight: 700; line-height: 1.3; color: #3b3350;
  border: 3px solid var(--ol); border-radius: 14px; background: linear-gradient(180deg, #fffdf6, #efe8ff); box-shadow: 0 5px 0 rgba(8, 5, 20, 0.5), 0 10px 24px rgba(8, 5, 20, 0.45); animation: bdTrDesc 0.2s ease-out both; }
.bd-tr-skdesc[hidden] { display: none; }
.bd-tr-skdesc::before { content: ""; position: absolute; top: -11px; left: calc(25% - 9px); width: 16px; height: 16px; background: #fffdf6; border-left: 3px solid var(--ol); border-top: 3px solid var(--ol);
  border-radius: 4px 0 0 0; transform: rotate(45deg); }
.bd-tr-skdesc.at1::before { left: calc(75% - 9px); }
.bd-tr-skdesc b { display: block; margin-bottom: 2px; font-size: 18px; line-height: 1.1; color: var(--skc); -webkit-text-stroke: 5px var(--ol); }
@keyframes bdTrDesc { from { transform: translateY(-6px); opacity: 0; } to { transform: none; opacity: 1; } }
.bd-tr-more { font-size: 14px; font-weight: 700; line-height: 1.3; color: #e6e0ff; text-align: center; }
.bd-tr-more .bd-coin { width: 15px; height: 15px; }

/* a step just bought: the card it changed lifts in lime and settles; its ribbon stamps in */
.bd-tr-skill.flash { animation: bdTrStamp 0.7s cubic-bezier(.2, 1.4, .4, 1) both; }
.bd-tr-skill.flash .bd-tr-skrib { animation: bdTrMark 0.6s 0.25s ease-out both; }
@keyframes bdTrStamp { 0% { transform: translateY(-6px) scale(1.06); box-shadow: 0 0 0 4px #b8ff3c, 0 0 0 7px var(--ol); } 100% { transform: none; } }
@keyframes bdTrMark { 0% { transform: translateX(-50%) scale(2) rotate(-12deg); opacity: 0; } 60% { transform: translateX(-50%) scale(0.92) rotate(-3deg); opacity: 1; } 100% { transform: translateX(-50%); } }

/* ---- Skins (2026-10-08, Eric: "cool skins, etc!"): small cards in a dark well, each in the look of the card rarity that
   brings it; one not pulled yet greyed with that rarity's name; the one worn picked out (card-ui.js selected) ---- */
.bd-tr-skins { display: flex; flex-direction: column; gap: 4px; padding: 10px 8px 10px; border-radius: 18px; background: rgba(12, 7, 32, 0.34);
  box-shadow: inset 0 3px 0 rgba(0, 0, 0, 0.28), inset 0 -2px 0 rgba(255, 255, 255, 0.08); }
.bd-tr-skhead { margin: 0 0 0 6px; font-size: 19px; font-weight: 800; line-height: 1.1; -webkit-text-stroke: 5px var(--ol); }
.bd-tr-skrow { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 9px; padding: 12px 0 2px; }
.bd .bd-tr-skin { position: relative; min-width: 0; padding: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; border: 0; background: none;
  color: #fff; cursor: pointer; transition: transform 0.15s cubic-bezier(.2, 1.4, .4, 1); }
.bd .bd-tr-skin:not(:disabled):hover { transform: translateY(-3px); }
.bd .bd-tr-skin small { font-size: 10px; font-weight: 800; line-height: 1.05; letter-spacing: 0.3px; text-transform: uppercase; color: #ffd98a; text-align: center; }
.bd .bd-tr-skin[data-skin="ghost"] small { color: #a9e6ff; }
.bd .bd-tr-skin.locked { cursor: default; }
.bd .bd-tr-skin.locked .cu-face { filter: grayscale(0.9) brightness(0.62); }
.bd .bd-tr-skin.locked .cu-gems, .bd .bd-tr-skin.locked .cu-spk { display: none; }

/* ---- the UPGRADE button: one big green object (a thick outline, a glossy top half, a dark lip; pressing sinks it 4 px
   and takes the lip), its word, what it brings as icons, the card chip on its right ---- */
.bd-tr-foot { position: relative; flex: none; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 10px; padding: 12px 14px 18px;
  border-top: 3px solid rgba(10, 6, 30, 0.5); border-radius: 0 0 22px 22px; background: linear-gradient(180deg, rgba(10, 6, 30, 0.22), rgba(10, 6, 30, 0.4)); }
.bd.wide .bd-tr-foot { border-radius: 0 0 22px 0; }
.bd-tr-foot > .bd-tr-more { order: -1; flex: 1 1 100%; }
.bd .bd-tr-go { position: relative; flex: 1 1 auto; max-width: 430px; height: 84px; display: flex; align-items: center; gap: 10px; padding: 0 10px 6px 20px; cursor: pointer; overflow: hidden; color: #fff;
  border: 4px solid var(--ol); border-radius: 22px; background: linear-gradient(180deg, #c2f99a 0%, #86df52 46%, #5cc436 50%, #47aa28 100%);
  box-shadow: inset 0 3px 0 rgba(255, 255, 255, 0.6), inset 0 -7px 0 rgba(20, 70, 10, 0.4), 0 6px 0 rgba(8, 5, 20, 0.6); }
.bd .bd-tr-go:active:not(:disabled) { transform: translateY(4px); box-shadow: inset 0 3px 0 rgba(255, 255, 255, 0.6), inset 0 -2px 0 rgba(20, 70, 10, 0.4), 0 2px 0 rgba(8, 5, 20, 0.6); }
.bd-tr-gol { position: relative; z-index: 1; flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
.bd-tr-gw { font-size: 32px; font-weight: 800; line-height: 1; -webkit-text-stroke: 7px var(--ol); text-shadow: 0 3px 0 rgba(8, 5, 20, 0.35); }
.bd-tr-gline { max-width: 100%; display: flex; align-items: center; gap: 2px; }
.bd-tr-gi { display: block; flex: none; width: 28px; height: 28px; }
.bd-tr-gi svg { display: block; width: 100%; height: 100%; }
.bd-tr-gline b { margin-left: 4px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 19px; font-weight: 800; line-height: 1.15; -webkit-text-stroke: 5px var(--ol); paint-order: stroke fill; }
.bd-tr-chip { position: relative; z-index: 1; flex: none; height: 58px; min-width: 124px; display: flex; align-items: center; gap: 6px; padding: 0 12px 2px 8px; overflow: hidden;
  border: 3px solid var(--ol); border-radius: 16px; background: rgba(14, 40, 8, 0.55); box-shadow: inset 0 3px 0 rgba(0, 0, 0, 0.3), 0 2px 0 rgba(255, 255, 255, 0.3); }
.bd-tr-chipfill { position: absolute; left: 0; top: 0; bottom: 0; width: 100%; transform-origin: 0 50%; background: linear-gradient(180deg, rgba(196, 255, 140, 0.55), rgba(110, 210, 60, 0.45)); }
.bd-tr-ci { position: relative; display: block; flex: none; width: 34px; height: 34px; filter: drop-shadow(0 2px 0 rgba(8, 5, 20, 0.4)); }
.bd-tr-ci svg { display: block; width: 100%; height: 100%; }
.bd-tr-cn { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 1px; }
.bd-tr-cn b { font-size: 23px; font-weight: 800; line-height: 1; -webkit-text-stroke: 5px var(--ol); paint-order: stroke fill; }
.bd-tr-cn small { font-size: 13px; font-weight: 800; line-height: 1; color: #ffd0d4; -webkit-text-stroke: 3.5px var(--ol); paint-order: stroke fill; }
.bd-tr-chip.free { justify-content: center; min-width: 100px; }
/* short of cards: the same shape in grey-violet, the chip's fill blue, how many more in the chip */
.bd .bd-tr-go:disabled { background: linear-gradient(180deg, #c3bddd 0%, #9d97c0 46%, #8a84b0 50%, #7a74a2 100%);
  box-shadow: inset 0 3px 0 rgba(255, 255, 255, 0.45), inset 0 -7px 0 rgba(20, 14, 50, 0.32), 0 6px 0 rgba(8, 5, 20, 0.6); }
.bd .bd-tr-go:disabled .bd-tr-gw { color: #f1eeff; }
.bd .bd-tr-go:disabled .bd-tr-chip { background: rgba(20, 14, 50, 0.6); }
.bd .bd-tr-go:disabled .bd-tr-chipfill { background: linear-gradient(180deg, rgba(140, 190, 255, 0.6), rgba(80, 130, 235, 0.5)); }
.bd .bd-tr-go.learn:disabled .bd-tr-gline b, .bd .bd-tr-go.choose:disabled .bd-tr-gline b { color: #f1eeff; }
/* ready: a slow lime pulse, and now and then a gloss glint across it */
.bd .bd-tr-go.ready { animation: bdTrReady 1.6s ease-in-out infinite; }
@keyframes bdTrReady { 50% { box-shadow: inset 0 3px 0 rgba(255, 255, 255, 0.6), inset 0 -7px 0 rgba(20, 70, 10, 0.4), 0 6px 0 rgba(8, 5, 20, 0.6), 0 0 0 6px rgba(184, 255, 60, 0.6); } }
.bd .bd-tr-go.ready::after { content: ""; position: absolute; inset: -4px; pointer-events: none;
  background: linear-gradient(105deg, rgba(255, 255, 255, 0) 42%, rgba(255, 255, 255, 0.6) 50%, rgba(255, 255, 255, 0) 58%) 0 0 / 300% 100% no-repeat; animation: bdTrGlint 3.4s 0.8s ease-in-out infinite; }
@keyframes bdTrGlint { 0% { background-position: 100% 0; } 30%, 100% { background-position: 0% 0; } }
/* the top level: a gold plate, not a button */
.bd-tr-max { flex: 1 1 auto; max-width: 430px; height: 72px; display: flex; align-items: center; justify-content: center; gap: 10px; border: 4px solid var(--ol); border-radius: 22px;
  background: linear-gradient(180deg, #fff0b0 0%, #ffd34d 48%, #f2b324 52%, #e09a12 100%); box-shadow: inset 0 3px 0 rgba(255, 255, 255, 0.65), inset 0 -6px 0 rgba(120, 70, 0, 0.3), 0 6px 0 rgba(8, 5, 20, 0.55); }
.bd-tr-max i { display: block; width: 46px; height: 46px; }
.bd-tr-max i svg { display: block; width: 100%; height: 100%; }
.bd-tr-max b { font-size: 28px; font-weight: 800; -webkit-text-stroke: 7px var(--ol); }

@media (prefers-reduced-motion: reduce) {
  .bd-tr-card, .cu-foot.bd-tr-badge.ask, .bd-tr-tile .cu-ready .cu-arrow, .bd-tr-tile.flash .cu-card, .bd-tr-skill.flash, .bd-tr-skill.flash .bd-tr-skrib, .bd-tr-skill.pick,
  .bd-tr-lvbadge.tick svg, .bd-tr-lvbadge.tick .new, .bd-tr-hero.up .bd-tr-face, .bd-tr-burst i, .bd-tr-face.flash canvas, .bd-tr-skdesc,
  .bd .bd-tr-go.ready, .bd .bd-tr-go.ready::after { animation: none; }
  .bd .bd-tr-go.ready::after { display: none; }
  .bd-tr-burst { display: none; }
  .bd-tr-lvbadge.tick .old { animation: none; display: none; }
  .bd-tr-flash { animation: bdFFade 0.9s linear both; transform: none; }
  .bd-tr-gain { animation: bdTrGainStill 2.4s linear both; transform: translateX(-50%) rotate(-3deg); }
  @keyframes bdTrGainStill { 0%, 85% { opacity: 1; } 100% { opacity: 0; } }
}