/* board-cards.css: the shared card component, src/card-ui.js (2026-10-09, tftcards AV pass; the cards lane owns it).
   Eric 2026-10-08: "these don't look like cards... wrong shape?". After the reference shots: a portrait card 5:7, its
   colour full-bleed by rarity, the unit large on a soft shadow, a thick light rim in a dark outline, an offset dark
   shadow, a bold white name inked dark, a star badge, a level hex and a card bar. Every size comes from --cw (the
   card's width). Reduced motion: no foil motion, no sheen, no tilt (the block at the end). */

.cu-card, .cu-choice { --cw: 124px; --ink: var(--ol, #2f2437); --rim: #fff8ea; --olw: calc(var(--cw) * 0.022 + 1px);
  position: relative; flex: none; display: block; width: var(--cw); height: calc(var(--cw) * 1.4); border-radius: calc(var(--cw) * 0.1);
  background: var(--rim); color: #fff; font-family: var(--font); font-weight: 800; line-height: 1; text-align: center;
  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.5), var(--glow, 0 0 0 0 transparent); }
.cu-face { position: absolute; inset: calc(var(--cw) * 0.045); overflow: hidden; border-radius: calc(var(--cw) * 0.065); background: var(--bg, #6aa2f6);
  box-shadow: inset 0 0 0 calc(var(--cw) * 0.012 + 0.5px) rgba(47, 36, 55, 0.5); isolation: isolate; }
.cu-face > i, .cu-face > span { position: absolute; display: block; pointer-events: none; }
.cu-bg { inset: 0; z-index: 0; background: var(--pat, none); }

/* ---- the unit and its name ---- */
.cu-shadow { z-index: 2; left: 20%; right: 20%; top: calc(var(--cw) * 0.75); height: calc(var(--cw) * 0.12); border-radius: 50%;
  background: radial-gradient(closest-side, rgba(24, 16, 44, 0.42), rgba(24, 16, 44, 0)); }
.cu-art { z-index: 3; left: 0; right: 0; top: calc(var(--cw) * -0.02); height: calc(var(--cw) * 0.92); }
.cu-art canvas { display: block; width: 100% !important; height: 100% !important; }
.cu-name { z-index: 5; left: 2%; right: 2%; top: calc(var(--cw) * 0.86); font-size: calc(var(--cw) * 0.165); line-height: 1.1; white-space: nowrap; letter-spacing: 0.01em;
  color: #fff; -webkit-text-stroke: calc(var(--cw) * 0.05) var(--ink); paint-order: stroke fill; }
.cu-name.cu-mid { font-size: calc(var(--cw) * 0.145); }
.cu-name.cu-long { font-size: calc(var(--cw) * 0.118); letter-spacing: -0.01em; }
.cu-barless .cu-name { top: calc(var(--cw) * 0.96); }
.cu-nobar .cu-face > .cu-bar { background: none; box-shadow: none; }
.cu-nobar .cu-bar .cu-fill, .cu-nobar .cu-bar .cu-ticks { display: none; }

/* ---- the card bar: the level hex, the fill in segments, the numbers; green with an arrow when ready; MAX at the top ---- */
.cu-face > .cu-bar { z-index: 6; left: calc(var(--cw) * 0.15); right: calc(var(--cw) * 0.04); bottom: calc(var(--cw) * 0.05); height: calc(var(--cw) * 0.15);
  border-radius: 999px; background: #2b2440; box-shadow: 0 0 0 calc(var(--cw) * 0.016 + 0.6px) var(--ink); overflow: visible; }
.cu-face > .cu-bar[hidden] { display: none; }
.cu-bar .cu-fill { position: absolute; inset: 0; border-radius: inherit; transform-origin: 0 50%; background: linear-gradient(180deg, #b4ecff 0%, #52bdf6 45%, #2b8fe0 100%);
  transition: transform 0.7s cubic-bezier(.25, 1.1, .4, 1); }
.cu-bar .cu-ticks { position: absolute; inset: 0; border-radius: inherit;
  background: repeating-linear-gradient(90deg, transparent 0 calc(20% - 1.5px), rgba(30, 20, 50, 0.38) calc(20% - 1.5px) 20%), linear-gradient(180deg, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0) 50%); }
.cu-bar .cu-num { position: absolute; left: 14%; right: 4%; top: 50%; transform: translateY(-50%); font-size: calc(var(--cw) * 0.105); line-height: 1; color: #fff;
  -webkit-text-stroke: calc(var(--cw) * 0.03 + 1px) var(--ink); paint-order: stroke fill; white-space: nowrap; }
.cu-small .cu-bar .cu-num { font-size: 10px; -webkit-text-stroke: 2.6px var(--ink); }
.cu-bar .cu-hex { position: absolute; left: calc(var(--cw) * -0.13); top: 50%; width: calc(var(--cw) * 0.25); height: calc(var(--cw) * 0.25); transform: translateY(-50%); }
.cu-bar .cu-hex svg, .cu-bar .cu-arrow svg, .cu-star svg, .cu-check svg, .cu-spk svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.cu-hx-ink { fill: var(--ink); stroke: var(--ink); stroke-width: 14; stroke-linejoin: round; }
/* The level (2026-10-09): one blue hex on every card (the chips' "Lv" blue), green with the up arrow when the cards cover
   the next level. Never orange: orange is PROMOTE and pink DOUBLE, the boosts that last one arena. */
.cu-hx-fill { fill: #6474f2; stroke: #c9d0ff; stroke-width: 5; stroke-linejoin: round; }
.cu-bar .cu-hex b { position: absolute; inset: 0; display: grid; place-items: center; font-size: calc(var(--cw) * 0.125); color: #fff;
  -webkit-text-stroke: calc(var(--cw) * 0.03 + 1px) var(--ink); paint-order: stroke fill; }
.cu-ready .cu-bar .cu-fill { background: linear-gradient(180deg, #b6f27e 0%, #6fd04a 45%, #45a92f 100%); }
.cu-ready .cu-hx-fill { fill: #62c93e; stroke: #c8f7a2; }
.cu-max .cu-bar .cu-fill { background: linear-gradient(180deg, #fff3b0, #ffd34d 50%, #e2a52a); }
.cu-max .cu-bar .cu-ticks { background: linear-gradient(180deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0) 50%); }
.cu-bar .cu-arrow { position: absolute; left: calc(var(--cw) * 0.08); bottom: calc(var(--cw) * -0.02); width: calc(var(--cw) * 0.2); height: calc(var(--cw) * 0.24); }
.cu-ar-ink { fill: var(--ink); stroke: var(--ink); stroke-width: 16; stroke-linejoin: round; }
.cu-ar-fill { fill: #7be04f; stroke: #d6ffb8; stroke-width: 5; stroke-linejoin: round; }
.cu-ready .cu-bar .cu-num { left: 26%; }
.cu-bar .cu-readytag { display: none; position: absolute; right: calc(var(--cw) * 0.02); bottom: 100%; margin-bottom: calc(var(--cw) * 0.03); padding: 0 calc(var(--cw) * 0.04);
  border-radius: calc(var(--cw) * 0.05); background: #5cc23a; box-shadow: 0 0 0 calc(var(--cw) * 0.012 + 0.6px) var(--ink); font-size: calc(var(--cw) * 0.085);
  line-height: 1.35; letter-spacing: 0.03em; color: #fff; -webkit-text-stroke: calc(var(--cw) * 0.02 + 0.8px) var(--ink); paint-order: stroke fill; }

/* ---- badges: the star (count or level) top-right, the rarity's gems on the top edge, NEW, the check ---- */
.cu-star { position: absolute; z-index: 8; right: calc(var(--cw) * -0.1); top: calc(var(--cw) * -0.11); width: calc(var(--cw) * 0.38); height: calc(var(--cw) * 0.38); }
.cu-st-ink { fill: var(--ink); stroke: var(--ink); stroke-width: 14; stroke-linejoin: round; }
.cu-st-fill { fill: #8fc4ff; stroke: #e0f0ff; stroke-width: 4.5; stroke-linejoin: round; }
.cu-star b { position: absolute; inset: 6% 0 0; display: grid; place-items: center; font-size: calc(var(--cw) * 0.135); color: #fff; letter-spacing: -0.02em;
  -webkit-text-stroke: calc(var(--cw) * 0.035 + 1px) var(--ink); paint-order: stroke fill; }
.cu-star.cu-wide b { font-size: calc(var(--cw) * 0.11); }
.cu-star.cu-lvl { right: calc(var(--cw) * -0.08); top: calc(var(--cw) * -0.09); width: calc(var(--cw) * 0.32); height: calc(var(--cw) * 0.32); }
.cu-star.cu-lvl b { inset: 0; font-size: calc(var(--cw) * 0.15); }
.cu-star.cu-lvl.cu-wide b { font-size: calc(var(--cw) * 0.12); }
.cu-gems { position: absolute; z-index: 8; left: 50%; top: calc(var(--cw) * -0.055); display: flex; gap: calc(var(--cw) * 0.012); transform: translateX(-50%); }
.cu-gem { display: block; width: calc(var(--cw) * 0.085); height: calc(var(--cw) * 0.085); margin: 0 calc(var(--cw) * 0.012); transform: rotate(45deg); border-radius: 2px;
  background: var(--gem, #fff); box-shadow: 0 0 0 calc(var(--cw) * 0.012 + 0.7px) var(--ink), inset 1px 1px 0 rgba(255, 255, 255, 0.75); }
.cu-newtag { position: absolute; z-index: 9; left: calc(var(--cw) * -0.08); top: calc(var(--cw) * 0.1); padding: 0 calc(var(--cw) * 0.05); border-radius: calc(var(--cw) * 0.06);
  background: #ff5a5f; box-shadow: 0 0 0 calc(var(--cw) * 0.016 + 0.6px) var(--ink), 0 2px 0 rgba(14, 10, 26, 0.4); font-size: calc(var(--cw) * 0.11); line-height: 1.4; color: #fff;
  -webkit-text-stroke: calc(var(--cw) * 0.025 + 1px) var(--ink); paint-order: stroke fill; transform: rotate(-9deg); }
.cu-check { position: absolute; z-index: 9; left: calc(var(--cw) * -0.06); top: calc(var(--cw) * -0.06); width: calc(var(--cw) * 0.3); height: calc(var(--cw) * 0.3); }
.cu-ck-ink { fill: none; stroke: var(--ink); stroke-width: 26; stroke-linecap: round; stroke-linejoin: round; }
.cu-ck-fill { fill: none; stroke: #5fd03a; stroke-width: 13; stroke-linecap: round; stroke-linejoin: round; }
.cu-foot { position: absolute; z-index: 9; left: 50%; bottom: calc(var(--cw) * -0.09); max-width: calc(var(--cw) * 1.1); padding: 0 calc(var(--cw) * 0.06); transform: translateX(-50%);
  border-radius: calc(var(--cw) * 0.08); background: #ffd34d; box-shadow: 0 0 0 calc(var(--cw) * 0.014 + 0.6px) var(--ink); font-size: calc(var(--cw) * 0.095); line-height: 1.45;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #fff; -webkit-text-stroke: calc(var(--cw) * 0.022 + 0.8px) var(--ink); paint-order: stroke fill; }
/* the role ribbon with the skill's icon before its name (2026-10-09). Inline, so it holds when a caller replaces the
   pill's classes (the collection gives it its badge's) and the pill's one-line ellipsis still cuts a long name */
.cu-fico { display: inline-flex; gap: 1px; margin-right: calc(var(--cw) * 0.025); vertical-align: middle; position: relative; top: -0.08em; }
.cu-fico svg { display: block; width: calc(var(--cw) * 0.12 + 2px); height: calc(var(--cw) * 0.12 + 2px); }
.cu-foot .cu-fico + .cu-ftx { vertical-align: middle; }
/* selected: lifted, a bright lime outline round the dark one (the clip's selection) */
.cu-card.cu-sel, .cu-choice.cu-sel { transform: translateY(calc(var(--cw) * -0.06));
  box-shadow: 0 0 0 var(--olw) var(--ink), 0 0 0 calc(var(--olw) + var(--cw) * 0.035) #b8ff3c, 0 0 0 calc(var(--olw) * 2 + var(--cw) * 0.035) var(--ink),
    calc(var(--cw) * 0.035) calc(var(--cw) * 0.08) 0 var(--olw) rgba(14, 10, 26, 0.5); }

/* ---- rarity: the face's colour and material ----
   common: a clean blue with two soft light bands. rare: silver-blue, a gloss stripe, a sheen now and then. holo: a light
   pearl card under a moving rainbow foil and fine glints, the foil behind the unit so the unit keeps its colours. ultra:
   gold, a slow swirl, a few glints. ghost: a cold see-through card, wisps drifting up, the unit solid with a cold edge. */
.cu-r-common { --bg: radial-gradient(130% 95% at 50% 28%, #a6d4ff 0%, #6fa6f7 52%, #4b76df 100%);
  --pat: linear-gradient(150deg, rgba(255, 255, 255, 0) 0 28%, rgba(255, 255, 255, 0.17) 28% 44%, rgba(255, 255, 255, 0) 44% 60%, rgba(255, 255, 255, 0.1) 60% 68%, rgba(255, 255, 255, 0) 68%); }
.cu-r-rare { --rim: #f4f8ff; --gem: linear-gradient(135deg, #ffffff, #b8c8e6 55%, #7d93c0);
  --bg: radial-gradient(130% 95% at 50% 26%, #f7faff 0%, #c9d6ee 48%, #8fa3cc 100%);
  --pat: linear-gradient(150deg, rgba(255, 255, 255, 0) 0 30%, rgba(255, 255, 255, 0.7) 36%, rgba(255, 255, 255, 0) 44%, rgba(255, 255, 255, 0) 58%, rgba(255, 255, 255, 0.35) 62%, rgba(255, 255, 255, 0) 67%),
    repeating-linear-gradient(150deg, rgba(110, 130, 180, 0.08) 0 2px, rgba(255, 255, 255, 0) 2px 7px); }
.cu-r-holo { --rim: #fbf8ff; --gem: conic-gradient(#ff7eb6, #ffd34d, #7fe08a, #6fb0ff, #c08aff, #ff7eb6);
  --bg: radial-gradient(130% 95% at 50% 28%, #ffffff 0%, #f1efff 50%, #dcd8f6 100%); }
.cu-r-holo .cu-foil { inset: -2px; z-index: 1; opacity: 0.62;
  background: repeating-linear-gradient(120deg, rgba(255, 255, 255, 0) 0 9px, rgba(255, 255, 255, 0.5) 9px 11px),
    linear-gradient(120deg, #ff8fc4 0%, #ffd66b 16%, #8ff0a4 33%, #7fd2ff 50%, #b994ff 66%, #ff8fc4 83%, #ffd66b 100%);
  background-size: 100% 100%, 300% 300%; background-position: 0 0, 30% 50%; animation: cuHolo 7s ease-in-out infinite alternate; }
.cu-r-holo .cu-dots { inset: 0; z-index: 1; opacity: 0.85;
  background: radial-gradient(circle, #fff 0 1.2px, rgba(255, 255, 255, 0) 1.8px) 0 0 / calc(var(--cw) * 0.16) calc(var(--cw) * 0.16),
    radial-gradient(circle, rgba(255, 255, 255, 0.9) 0 0.9px, rgba(255, 255, 255, 0) 1.4px) calc(var(--cw) * 0.08) calc(var(--cw) * 0.08) / calc(var(--cw) * 0.16) calc(var(--cw) * 0.16); }
@keyframes cuHolo { from { background-position: 0 0, 0% 30%; } to { background-position: 0 0, 100% 70%; } }
.cu-r-ultra { --rim: #fff3c4; --gem: radial-gradient(circle at 35% 30%, #ffffff, #ffd34d 45%, #c98a16);
  --bg: radial-gradient(120% 90% at 50% 34%, #fff6c0 0%, #ffd552 38%, #f4a623 78%, #d9861a 100%); }
.cu-r-ultra .cu-swirl { z-index: 1; left: 50%; top: 36%; width: 190%; aspect-ratio: 1; transform: translate(-50%, -50%); animation: cuSwirl 26s linear infinite; }
.cu-r-ultra .cu-swirl svg { display: block; width: 100%; height: 100%; }
.cu-r-ultra .cu-swirl path { fill: rgba(255, 249, 214, 0.5); }
@keyframes cuSwirl { to { transform: translate(-50%, -50%) rotate(360deg); } }
.cu-r-ghost { --rim: rgba(226, 248, 255, 0.55); --gem: radial-gradient(circle at 40% 35%, #ffffff, #a8eeff 60%, #69c7ef);
  --bg: radial-gradient(110% 80% at 50% 38%, rgba(96, 170, 214, 0.62) 0%, rgba(44, 86, 150, 0.66) 58%, rgba(22, 36, 92, 0.72) 100%);
  --glow: 0 0 calc(var(--cw) * 0.12) calc(var(--cw) * 0.02) rgba(150, 232, 255, 0.55);
  box-shadow: 0 0 0 var(--olw) rgba(47, 36, 55, 0.55), calc(var(--cw) * 0.035) calc(var(--cw) * 0.05) 0 var(--olw) rgba(14, 10, 26, 0.32), var(--glow); }
.cu-r-ghost .cu-face { box-shadow: inset 0 0 calc(var(--cw) * 0.08) rgba(220, 250, 255, 0.7), inset 0 0 0 calc(var(--cw) * 0.012 + 0.5px) rgba(220, 250, 255, 0.6); }
.cu-r-ghost .cu-wisp { z-index: 1; left: -20%; right: -20%; top: 0; height: 200%;
  background: radial-gradient(40% 9% at 30% 20%, rgba(235, 252, 255, 0.55), rgba(235, 252, 255, 0)), radial-gradient(34% 8% at 72% 45%, rgba(235, 252, 255, 0.45), rgba(235, 252, 255, 0)),
    radial-gradient(44% 10% at 40% 70%, rgba(235, 252, 255, 0.5), rgba(235, 252, 255, 0)), radial-gradient(30% 7% at 66% 92%, rgba(235, 252, 255, 0.4), rgba(235, 252, 255, 0));
  animation: cuWisp 9s linear infinite; }
.cu-r-ghost .cu-wisp.w2 { transform: scaleX(-1); animation-duration: 13s; animation-delay: -5s; opacity: 0.7; }
@keyframes cuWisp { from { translate: 0 0; } to { translate: 0 -50%; } }
.cu-r-ghost .cu-art canvas { filter: drop-shadow(0 0 calc(var(--cw) * 0.025) rgba(190, 245, 255, 0.95)) drop-shadow(0 0 calc(var(--cw) * 0.05) rgba(120, 220, 255, 0.6)); }
.cu-r-ghost .cu-shadow { background: radial-gradient(closest-side, rgba(150, 230, 255, 0.45), rgba(150, 230, 255, 0)); }
.cu-r-ghost .cu-bar { background: rgba(43, 36, 64, 0.8); }
/* the sheen: one bright stripe crossing the card now and then (rare, holo, ultra), thin, so the unit is never washed */
.cu-sheen { z-index: 7; inset: 0; background: linear-gradient(115deg, rgba(255, 255, 255, 0) 42%, rgba(255, 255, 255, 0.5) 49%, rgba(255, 255, 255, 0) 56%);
  background-size: 300% 100%; background-position: 130% 0; mix-blend-mode: soft-light; animation: cuSheen 5.5s ease-in-out 1s infinite; }
.cu-r-rare .cu-sheen { mix-blend-mode: normal; opacity: 0.55; }
@keyframes cuSheen { 0% { background-position: 130% 0; } 30%, 100% { background-position: -30% 0; } }
/* ultra's glints, twinkling in turn */
.cu-spk { position: absolute; z-index: 9; width: calc(var(--cw) * 0.13); height: calc(var(--cw) * 0.13); opacity: 0; pointer-events: none;
  animation: cuGlint 2.6s ease-in-out infinite; }
.cu-spk svg { fill: #fff; filter: drop-shadow(0 0 2px #fff6c8) drop-shadow(0 0 5px #ffd34d); }
.cu-spk.k0 { left: 10%; top: 12%; } .cu-spk.k1 { right: 12%; top: 30%; animation-delay: 0.65s; }
.cu-spk.k2 { left: 14%; top: 52%; animation-delay: 1.3s; } .cu-spk.k3 { right: 18%; top: 6%; animation-delay: 1.95s; }
@keyframes cuGlint { 0%, 100% { opacity: 0; transform: scale(0.3) rotate(0deg); } 18% { opacity: 1; transform: scale(1.1) rotate(20deg); } 36% { opacity: 0; transform: scale(0.4) rotate(45deg); } }
.cu-plain .cu-gems { display: none; }
.cu-still .cu-foil, .cu-still .cu-swirl, .cu-still .cu-wisp, .cu-still .cu-sheen { animation: none; }
.cu-still .cu-spk { animation: none; opacity: 0.9; transform: scale(0.8); }
.cu-still .cu-spk.k1, .cu-still .cu-spk.k3 { opacity: 0; }

/* ---- the back: one design for every card, the same rim and shadow as a face; with .cu-charge it glows the hinted
   rarity's colour (the anticipation before a special card turns). 2026-10-09 (the lead: "a richer physical back"): a
   sunburst under a fine diamond lattice, a bevelled gold frame inset from the rim with a stud at each corner and a
   shadow cast inward, a foil tint along the diagonal, the emblem with rays. Static; while it charges a light sweeps it. ---- */
.cu-back { --rim: #fff3d6; --hint: #ffe7a0; }
.cu-back .cu-face { background: radial-gradient(115% 85% at 50% 40%, #6b5fe0 0%, #4438a6 50%, #2b2470 100%); }
.cu-back .cu-bpat { inset: 0;
  background: radial-gradient(circle, rgba(255, 226, 150, 0.32) 0 calc(var(--cw) * 0.009 + 0.4px), rgba(255, 226, 150, 0) calc(var(--cw) * 0.009 + 1px)) 50% 50% / calc(var(--cw) * 0.11) calc(var(--cw) * 0.11),
    repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.075) 0 1.5px, rgba(255, 255, 255, 0) 1.5px calc(var(--cw) * 0.0778)),
    repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0.075) 0 1.5px, rgba(255, 255, 255, 0) 1.5px calc(var(--cw) * 0.0778)),
    repeating-conic-gradient(from 0deg at 50% 41%, rgba(140, 120, 255, 0.34) 0 7.5deg, rgba(140, 120, 255, 0) 7.5deg 15deg); }
/* the frame: lit from above (light top edge, dark foot), an ink line on both sides, a shadow it casts on the field */
.cu-back .cu-bframe { inset: calc(var(--cw) * 0.045); border-radius: calc(var(--cw) * 0.05);
  border: calc(var(--cw) * 0.03 + 0.5px) solid; border-color: #ffeeb0 #f2bd4a #c98a22 #f2bd4a;
  box-shadow: 0 0 0 calc(var(--cw) * 0.008 + 0.6px) var(--ink), inset 0 0 0 calc(var(--cw) * 0.008 + 0.6px) var(--ink),
    inset 0 calc(var(--cw) * 0.03) calc(var(--cw) * 0.05) rgba(10, 6, 30, 0.55); }
/* a gold stud on each corner of the frame */
.cu-back .cu-bframe::before { content: ""; position: absolute; inset: calc(var(--cw) * -0.055 - 0.5px); --stud: radial-gradient(circle, #fff6cf 0 16%, #f2bd4a 22% 40%, #2f2437 44% 56%, rgba(0, 0, 0, 0) 60%);
  background: var(--stud) 0 0 / calc(var(--cw) * 0.08) calc(var(--cw) * 0.08) no-repeat, var(--stud) 100% 0 / calc(var(--cw) * 0.08) calc(var(--cw) * 0.08) no-repeat,
    var(--stud) 0 100% / calc(var(--cw) * 0.08) calc(var(--cw) * 0.08) no-repeat, var(--stud) 100% 100% / calc(var(--cw) * 0.08) calc(var(--cw) * 0.08) no-repeat; }
.cu-back .cu-emb { z-index: 2; left: 14%; right: 14%; top: 20%; aspect-ratio: 1; }
.cu-back .cu-emb svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 calc(var(--cw) * 0.02) 0 rgba(10, 6, 30, 0.45)); }
.cu-em-rays { fill: #f4b23c; stroke: var(--ink); stroke-width: 2.5; stroke-linejoin: round; }
.cu-em-lip { fill: #b97a16; stroke: var(--ink); stroke-width: 5; }
.cu-em-ring { fill: #ffd34d; stroke: var(--ink); stroke-width: 5; }
.cu-em-in { fill: #ff6f4f; stroke: var(--ink); stroke-width: 4; }
.cu-em-hi { fill: none; stroke: #fff6cf; stroke-width: 3.5; stroke-linecap: round; }
.cu-em-star { fill: #fff6d2; stroke: var(--ink); stroke-width: 4; stroke-linejoin: round; }
.cu-em-shine { fill: #ffffff; }
.cu-back .cu-emb b { position: absolute; left: -12%; right: -12%; top: 80%; font-size: calc(var(--cw) * 0.15); line-height: 0.92; letter-spacing: 0.02em;
  color: #ffe08a; -webkit-text-stroke: calc(var(--cw) * 0.045) var(--ink); paint-order: stroke fill; text-shadow: 0 calc(var(--cw) * 0.018) 0 rgba(10, 6, 30, 0.5); }
/* the foil: a faint rainbow and a soft light band along the diagonal, over everything, like the coat on a real card */
.cu-back .cu-bfoil { inset: 0; z-index: 3; mix-blend-mode: screen; opacity: 0.55;
  background: linear-gradient(125deg, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, 0.22) 44%, rgba(255, 255, 255, 0.04) 52%, rgba(255, 255, 255, 0) 60%),
    linear-gradient(125deg, rgba(255, 120, 200, 0) 10%, rgba(255, 120, 200, 0.12) 30%, rgba(255, 220, 120, 0.12) 45%, rgba(120, 230, 255, 0.12) 60%, rgba(170, 130, 255, 0.12) 75%, rgba(170, 130, 255, 0) 90%); }
.cu-back .cu-bsweep { inset: -10% -60%; z-index: 4; opacity: 0; mix-blend-mode: screen;
  background: linear-gradient(110deg, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, 0.55) 50%, rgba(255, 255, 255, 0) 60%); }
.cu-back.cu-charge .cu-bsweep { opacity: 1; animation: cuBackSweep 1.1s ease-in-out infinite; }
@keyframes cuBackSweep { from { transform: translateX(-45%); } to { transform: translateX(45%); } }
.cu-hint-rare { --hint: #d6e4ff; } .cu-hint-holo { --hint: #f2b8ff; } .cu-hint-ultra { --hint: #ffd34d; } .cu-hint-ghost { --hint: #a8f0ff; }
.cu-back.cu-charge { --rim: var(--hint); animation: cuCharge 0.5s ease-in-out infinite alternate; }
@keyframes cuCharge {
  from { 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.5), 0 0 calc(var(--cw) * 0.1) calc(var(--cw) * 0.02) var(--hint); }
  to { 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.5), 0 0 calc(var(--cw) * 0.26) calc(var(--cw) * 0.07) var(--hint); } }
.cu-hint-holo.cu-charge { animation: cuCharge 0.5s ease-in-out infinite alternate, cuHintHolo 1.2s linear infinite; }
@keyframes cuHintHolo { 0% { --hint: #ff9fd0; } 33% { --hint: #ffe28a; } 66% { --hint: #8fe8ff; } 100% { --hint: #c9a2ff; } }
@property --hint { syntax: "<color>"; inherits: true; initial-value: #ffe7a0; }

/* ---- the turn: both sides on one card with an edge between them; a shadow under it narrows as it turns ---- */
.cu-flip { --cw: 124px; --th: calc(var(--cw) * 0.024 + 1px); --turn: 0.5s; position: relative; width: var(--cw); height: calc(var(--cw) * 1.4); perspective: calc(var(--cw) * 6); }
.cu-flip-in { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateY(180deg); }
.cu-flip .cu-side { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.cu-flip .cu-front { transform: translateZ(calc(var(--th) / 2)); }
.cu-flip .cu-rear { transform: rotateY(180deg) translateZ(calc(var(--th) / 2)); }
.cu-edge { position: absolute; top: 7%; bottom: 7%; width: var(--th); background: linear-gradient(90deg, #cdbf9f, #fff6dc 50%, #cdbf9f); box-shadow: inset 0 0 0 1px rgba(47, 36, 55, 0.6); }
.cu-el { left: calc(var(--th) / -2); transform: rotateY(90deg); }
.cu-er { right: calc(var(--th) / -2); transform: rotateY(90deg); }
.cu-fshadow { position: absolute; left: 6%; right: 6%; bottom: calc(var(--cw) * -0.12); height: calc(var(--cw) * 0.14); border-radius: 50%;
  background: radial-gradient(closest-side, rgba(8, 4, 20, 0.55), rgba(8, 4, 20, 0)); }
.cu-flip.cu-up .cu-flip-in { transform: none; animation: cuTurn var(--turn) cubic-bezier(.3, .1, .3, 1) both; }
.cu-flip.cu-up .cu-fshadow { animation: cuTurnShadow var(--turn) ease-in-out both; }
.cu-flip.cu-snap .cu-flip-in, .cu-flip.cu-snap .cu-fshadow { animation: none; }
@keyframes cuTurn { 0% { transform: rotateY(180deg); } 45% { transform: translateZ(calc(var(--cw) * 0.35)) rotateY(95deg) rotateZ(-3deg); } 80% { transform: translateZ(calc(var(--cw) * 0.12)) rotateY(-8deg); } 100% { transform: none; } }
@keyframes cuTurnShadow { 0%, 100% { transform: none; opacity: 1; } 45% { transform: scaleX(0.18) scaleY(1.4); opacity: 0.5; } }

/* ---- a tray choice card (reference-02): a light card, the art big, a zigzag footer and its label. 2026-10-09 (the
   lead: "PROMOTE and DOUBLE unmistakable"): a crew is a light card with the blue band of your crews (the chips' blue);
   PROMOTE a whole orange card and DOUBLE a whole pink one, rays behind the art and their SkillIcons mark on the corner.
   The label's size is fitted to its length (card-ui.js labelFit, --lf). ---- */
.cu-choice { --rim: #fffaf0; --zf: #5d6ce8; }
.cu-choice .cu-face { --bg: radial-gradient(130% 90% at 50% 30%, #fffaf0 0%, #ffeccf 55%, #ffd9ab 100%); }
.cu-choice .cu-art { z-index: 3; top: calc(var(--cw) * 0.04); height: calc(var(--cw) * 0.86); }
.cu-zig, .cu-zigw svg { position: absolute; z-index: 4; left: -2px; right: -2px; bottom: -2px; width: calc(100% + 4px); height: 34%; }
.cu-zigw { inset: 0; z-index: 4; }
.cu-zf { fill: var(--zf); }
.cu-ze { fill: none; stroke: var(--ink); stroke-width: 3.5; stroke-linejoin: round; }
/* the band's lit top: a light line under the teeth, a darker foot (the frames' bevel) */
.cu-choice .cu-face::after { content: ""; position: absolute; z-index: 4; left: 0; right: 0; bottom: 0; height: 26%; pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0) 30%, rgba(0, 0, 0, 0) 70%, rgba(0, 0, 0, 0.16)); }
.cu-choice .cu-label { z-index: 5; left: 1%; right: 1%; top: 74%; bottom: 2%; display: flex; flex-direction: column; align-items: center; justify-content: center;
  font-size: var(--lf, calc(var(--cw) * 0.15)); line-height: 1; letter-spacing: 0.01em; white-space: nowrap; color: #fff;
  -webkit-text-stroke: calc(var(--lf, calc(var(--cw) * 0.15)) * 0.3) var(--ink); paint-order: stroke fill; text-shadow: 0 calc(var(--cw) * 0.012 + 0.5px) 0 rgba(20, 14, 34, 0.5); }
.cu-choice .cu-label.cu-two { gap: 0; line-height: 0.98; }
.cu-choice .cu-label > span { display: block; }
/* the boosts: a burst of light behind the art; their colours (orange PROMOTE, pink DOUBLE) */
.cu-choice .cu-rays { inset: -30% -30% 20%; z-index: 1;
  background: repeating-conic-gradient(from 0deg at 50% 50%, rgba(255, 255, 255, 0.34) 0 8deg, rgba(255, 255, 255, 0) 8deg 20deg);
  -webkit-mask: radial-gradient(closest-side, #000 18%, rgba(0, 0, 0, 0) 100%); mask: radial-gradient(closest-side, #000 18%, rgba(0, 0, 0, 0) 100%); }
.cu-k-promote { --rim: #fff3e0; --zf: #e8650f; }
.cu-k-promote .cu-face { --bg: radial-gradient(120% 85% at 50% 32%, #fff0d2 0%, #ffbf73 45%, #ff9a3c 75%, #f07a1c 100%); }
.cu-k-double { --rim: #fff1f8; --zf: #cf3a82; }
.cu-k-double .cu-face { --bg: radial-gradient(120% 85% at 50% 32%, #ffeaf4 0%, #ffa6cf 45%, #f675ad 75%, #e2558f 100%); }
/* the boost's mark on the top-left corner, on a light medallion */
.cu-choice .cu-kicon { position: absolute; z-index: 8; left: calc(var(--cw) * -0.06); top: calc(var(--cw) * -0.08); width: calc(var(--cw) * 0.32); height: calc(var(--cw) * 0.32);
  display: grid; place-items: center; border-radius: 50%; background: radial-gradient(circle at 50% 35%, #ffffff, #ffe9cf 70%, #f6cfa0);
  box-shadow: 0 0 0 calc(var(--olw) * 0.9) var(--ink), 0 calc(var(--cw) * 0.025) 0 calc(var(--olw) * 0.9) rgba(14, 10, 26, 0.45), inset 0 calc(var(--cw) * -0.02) 0 rgba(160, 90, 20, 0.25); }
.cu-k-double .cu-kicon { background: radial-gradient(circle at 50% 35%, #ffffff, #ffe6f2 70%, #f6bcd6); box-shadow: 0 0 0 calc(var(--olw) * 0.9) var(--ink), 0 calc(var(--cw) * 0.025) 0 calc(var(--olw) * 0.9) rgba(14, 10, 26, 0.45), inset 0 calc(var(--cw) * -0.02) 0 rgba(160, 40, 90, 0.22); }
.cu-choice .cu-kicon svg { display: block; width: 84%; height: 84%; }
/* with no crew yet: the mark large in the middle of the art */
.cu-choice .cu-mark { position: absolute; inset: 0; display: grid; place-items: center; font-size: calc(var(--cw) * 0.4); color: #fff; -webkit-text-stroke: calc(var(--cw) * 0.05) var(--ink); paint-order: stroke fill; }
.cu-choice .cu-mark svg { display: block; width: calc(var(--cw) * 0.66); height: calc(var(--cw) * 0.66); margin-top: calc(var(--cw) * 0.04); filter: drop-shadow(0 calc(var(--cw) * 0.02) 0 rgba(20, 14, 34, 0.35)); }
/* a crew's tab: where its unit plays (the collection's tab colours), and its trained skills' icons under it */
.cu-choice .cu-role { position: absolute; z-index: 8; left: calc(var(--cw) * -0.06); top: calc(var(--cw) * -0.085); max-width: calc(var(--cw) * 0.78); padding: 0 calc(var(--cw) * 0.05);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: calc(var(--cw) * 0.075 + 2px); line-height: 1.55; letter-spacing: 0.05em; color: #3b3350; background: #e8e2ff;
  border-radius: calc(var(--cw) * 0.06); box-shadow: 0 0 0 calc(var(--olw) * 0.8) var(--ink), 0 2px 0 calc(var(--olw) * 0.8) rgba(14, 10, 26, 0.4), inset 0 1.5px 0 rgba(255, 255, 255, 0.6); }
.cu-role.t-front { background: #8fc0ff; } .cu-role.t-back { background: #b4ef7d; } .cu-role.t-swarm { background: #ffd15c; } .cu-role.t-splash { background: #ff9a9a; }
.cu-role.t-tank { background: #c9b6ff; } .cu-role.t-flank { background: #ffc58f; } .cu-role.t-support { background: #9ff0e0; }
.cu-choice .cu-sks { position: absolute; z-index: 8; left: calc(var(--cw) * -0.05); top: calc(var(--cw) * 0.11); display: flex; flex-direction: column; gap: 2px; }
.cu-choice .cu-sks svg { display: block; width: calc(var(--cw) * 0.19); height: calc(var(--cw) * 0.19); min-width: 18px; min-height: 18px; filter: drop-shadow(0 2px 0 rgba(14, 10, 26, 0.4)); }
/* the crew's tier on the top-right corner, as the chips have it, inside the card's edge (ui4, 2026-10-18: past it,
   three stars ran into the next card's tab) */
.cu-choice .cu-tier { position: absolute; z-index: 8; right: calc(var(--cw) * 0.04); top: calc(var(--cw) * -0.1); font-size: calc(var(--cw) * 0.15); line-height: 1; letter-spacing: -0.06em;
  color: #ffd34d; -webkit-text-stroke: calc(var(--cw) * 0.04 + 0.5px) var(--ink); paint-order: stroke fill; white-space: nowrap; filter: drop-shadow(0 2px 0 rgba(14, 10, 26, 0.4)); }
/* picked: the check on the bottom-right corner (the top corners hold the tab and the stars) */
.cu-choice .cu-check { left: auto; top: auto; right: calc(var(--cw) * -0.08); bottom: calc(var(--cw) * -0.06); width: calc(var(--cw) * 0.28); height: calc(var(--cw) * 0.28); }

@media (prefers-reduced-motion: reduce) {
  .cu-foil, .cu-swirl, .cu-wisp, .cu-sheen, .cu-spk, .cu-back.cu-charge, .cu-back.cu-charge .cu-bsweep, .cu-hint-holo.cu-charge, .cu-flip.cu-up .cu-flip-in, .cu-flip.cu-up .cu-fshadow { animation: none !important; }
  .cu-spk { opacity: 0.9; transform: scale(0.8); }
  .cu-spk.k1, .cu-spk.k3 { opacity: 0; }
  .cu-back.cu-charge { box-shadow: 0 0 0 var(--olw) var(--ink), 0 0 calc(var(--cw) * 0.18) calc(var(--cw) * 0.05) var(--hint); }
  .cu-bar .cu-fill { transition: none; }
}