/* The collectible card design (MOCKUP), shared by cards.html and new.html.
   Goes with tiers.css, which still has the old tier names: its "hot" is the Silver card and its
   "captain" the Gold one (Hot Hand = that Gold card + the cw-molten/cw-scorch classes + the
   burning border). The Demonized options are dm-* classes on the .unit; cards-design.js has the
   SVG filters they use and the canvas fire. */

/* ── caricature bust instead of the jersey: 92px, growing upward so the plates stay put ── */
.unit .jersey.fanart { width: 92px; height: 92px; margin-top: -12px; }
.unit .jersey.fanart img { object-position: 50% 100%; filter: drop-shadow(0 2px 2px rgba(40, 20, 0, 0.28)); }
/* the bust is taller and wider than the jersey box: keep the captain badge and the injury cross where
   they sit on a jersey, or the row above covers them */
.unit .jersey.fanart .capbadge { top: 8px; right: -1px; }
.unit .jersey.fanart .hurt { top: 8px; left: 0; }
/* a frozen caricature turns to ice too */
.unit.unit[data-tier="frozen"] .jersey.fanart img:first-child { filter: grayscale(1) brightness(1.08) drop-shadow(0 0 5px rgba(140, 210, 255, 0.95)); }

/* ════ the stats and the autograph ════
   three stats: points 20+, rebounds 8+, assists 6+. Two of the three and he signs the card (worked out
   in cards-design.js); how a single one shows is still being picked */
.fx { position: absolute; left: 50%; top: -12px; width: 92px; height: 92px; transform: translateX(-50%); pointer-events: none; z-index: 3; }
.fx > * { position: absolute; }

/* autograph: his surname and shirt number in gold ink across the bottom of the picture; the font
   and size come from cards-design.js (one of three hands, the same for him every time) */
.m-sig {
  left: 50%;
  bottom: 9px;
  max-width: 112px;
  transform: translateX(-50%) rotate(-9deg);
  white-space: nowrap;
  font-size: 15px;
  line-height: 1;
  color: #ffd76a;
  text-shadow: 0 0 1px #3b2500, 0 0 1px #3b2500, 0 0 1px #3b2500, 0 1px 3px rgba(0, 0, 0, 0.55);
}
.m-sig .no { margin-left: 0.3em; font-size: 1.1em; }

/* ════ Hot Hand 24–29.9: the gold card with the burning border, set apart from Gold
   (MOCKUP options, on top of tiers.css's gold "captain" card; ?cw=molten,haze) ════ */
/* molten gold: white-hot in the middle, running orange to red at the ends, slowly flowing */
.unit.cw-molten .pcard {
  --frame: linear-gradient(135deg, #fff1b8, #ff9a2e 28%, #a32a00 50%, #ff9a2e 72%, #fff1b8);
  box-shadow: 0 0 12px rgba(255, 120, 30, 0.7), 0 3px 9px rgba(25, 15, 60, 0.35);
}
.unit.cw-molten .plate {
  background: linear-gradient(120deg, #7a1d00, #d94f12 16%, #ffab3a 32%, #fff1b8 48%, #ffab3a 64%, #d94f12 80%, #7a1d00) 0 0 / 200% 100%;
  color: #2b0f00;
  border-bottom-color: #ffd27a;
  animation: cw-flow 6s ease-in-out infinite alternate;
}
@keyframes cw-flow { to { background-position: 100% 0; } }
.unit.cw-molten .plate-info { background: linear-gradient(180deg, #fff4e3, #ffd8a6); }
.unit.cw-molten .cell b.fp { color: #b8350a; }

/* fire-red foil: the gold card's colours turned round, red foil with gold lettering */
.unit.cw-red .pcard { box-shadow: 0 0 12px rgba(255, 90, 40, 0.65), 0 3px 9px rgba(25, 15, 60, 0.35); }
.unit.cw-red .plate {
  background: linear-gradient(120deg, #5a0a00, #b3200a 22%, #ff6a3a 42%, #c7280c 58%, #5a0a00);
  color: #ffe08a;
  border-bottom-color: #ffd27a;
}
.unit.cw-red .pl-pos { color: #ffd27a; opacity: 1; }
.unit.cw-red .cell b.fp { color: #b3200a; }

/* scorched: the left and right edges burnt brown, with a glowing rim that pulses. A layer on top
   of whatever plate is under it (gold, or molten for the mix); z-index -1 inside the plate keeps
   it under the name and the numbers */
.unit.cw-scorch .pcard { --frame: linear-gradient(135deg, #3a1400, #ff8c1a 30%, #2a0d00 50%, #ff8c1a 70%, #3a1400); }
.unit.cw-scorch :is(.plate, .plate-info) { position: relative; z-index: 0; }
.unit.cw-scorch :is(.plate, .plate-info)::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  animation: cw-ember 1.8s ease-in-out infinite alternate;
}
.unit.cw-scorch .plate::after {
  background: linear-gradient(90deg, rgba(40, 10, 0, 0.9), rgba(120, 40, 0, 0.35) 10%, transparent 20%,
    transparent 80%, rgba(120, 40, 0, 0.35) 90%, rgba(40, 10, 0, 0.9));
}
.unit.cw-scorch .plate-info::after {
  background: linear-gradient(90deg, rgba(60, 20, 0, 0.6), transparent 13%, transparent 87%, rgba(60, 20, 0, 0.6));
  animation-delay: -0.9s;
}
@keyframes cw-ember {
  from { box-shadow: inset 0 0 4px rgba(255, 100, 0, 0.55); }
  to { box-shadow: inset 0 0 7px 2px rgba(255, 130, 0, 0.9); }
}

/* heat haze: the gold card as it is; the air above the fire ripples, so he wobbles a little */
.unit.cw-haze .jersey.fanart img:first-child { filter: url(#cw-haze) drop-shadow(0 2px 2px rgba(40, 20, 0, 0.28)); }

/* burning border: a canvas around the name card, just behind it (sized by script) */
.unit canvas.burn { position: absolute; z-index: 2; pointer-events: none; }

/* ════ the new ladder (MOCKUP). tiers.css still has the old names, so the
   silver card is its "hot" one and the gold card its "captain" one ════ */
/* the two new frames sit inside the card, like the others */
.unit:is([data-tier="bronze"], [data-tier="demon"]) .pcard { border: 2px solid transparent; background: var(--frame) border-box; }
.unit:is([data-tier="bronze"], [data-tier="demon"]) .plate { padding-top: calc(0.18rem - 2px); }
.unit:is([data-tier="bronze"], [data-tier="demon"]) .plate-info { padding-bottom: calc(0.2rem - 2px); }

/* bronze 6–10.9: today's card in a still bronze frame */
.unit[data-tier="bronze"] .pcard { --frame: linear-gradient(135deg, #f3cfa5, #b87a45 30%, #6b3a17 50%, #b87a45 70%, #f3cfa5); }

/* Demonized 30+: a black and blood-red card; the options (A–E) add the demon */
.unit[data-tier="demon"] .pcard {
  --frame: linear-gradient(135deg, #ff7a6e, #c0182a 28%, #3d0008 50%, #c0182a 72%, #ff7a6e);
  box-shadow: 0 0 12px rgba(230, 20, 45, 0.6), 0 3px 9px rgba(25, 15, 60, 0.35);
}
.unit[data-tier="demon"] .plate {
  background: linear-gradient(120deg, #060307, #240510 32%, #4f0a17 47%, #1c040b 62%, #060307);
  border-bottom-color: #ff2e3e;
}
.unit[data-tier="demon"] .pl-name { color: #fff1f1; text-shadow: 0 0 6px rgba(255, 30, 50, 0.9); }
.unit[data-tier="demon"] .pl-pos { color: #ff6b74; opacity: 1; }
.unit[data-tier="demon"] .cell b { color: #ff4a57; }
.unit[data-tier="demon"] .plate-info { background: linear-gradient(180deg, #1c0a10, #0d0508); }
.unit[data-tier="demon"] .plate-info i { background: #3d1a22; }
.unit[data-tier="demon"] :is(.cell small:not(.cr), .cell b em) { color: #b48990; }
.unit.is-final[data-tier="demon"] .jersey img { opacity: 1; }

/* A · black flames + red lightning: the burning border's canvas in demon colours (script) */

/* B · hellfire cracks: the card splits and glows red from inside, beating like a heart */
.unit:is(.dm-cracks, .dm-cracks-sm) .pcard::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 118 46' preserveAspectRatio='none'%3E%3Cg fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M0 6 9 10 14 7 20 14 27 13M9 10 7 20 11 27M14 7 16 0M118 38 109 34 103 39 96 36 90 41M103 39 105 46M109 34 113 27 111 20M84 0 88 6 94 8 99 15M94 8 101 4M0 40 8 37 13 42 19 39M13 42 12 46M50 46 53 41 58 43 62 39' stroke='rgba(200,0,24,.6)' stroke-width='2.8'/%3E%3Cpath d='M0 6 9 10 14 7 20 14 27 13M9 10 7 20 11 27M14 7 16 0M118 38 109 34 103 39 96 36 90 41M103 39 105 46M109 34 113 27 111 20M84 0 88 6 94 8 99 15M94 8 101 4M0 40 8 37 13 42 19 39M13 42 12 46M50 46 53 41 58 43 62 39' stroke='%23ff4a4a' stroke-width='.9'/%3E%3C/g%3E%3C/svg%3E") center / 100% 100% no-repeat;
  animation: dm-beat 1.4s ease-in-out infinite;
}
/* small cracks (Form III): only the corner starts of the big ones */
.unit.dm-cracks-sm .pcard::before { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 118 46' preserveAspectRatio='none'%3E%3Cg fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M0 6 9 10 14 7 20 14M9 10 7 18M118 38 109 34 103 39 97 36M84 0 88 6 94 8' stroke='rgba(200,0,24,.6)' stroke-width='2.8'/%3E%3Cpath d='M0 6 9 10 14 7 20 14M9 10 7 18M118 38 109 34 103 39 97 36M84 0 88 6 94 8' stroke='%23ff4a4a' stroke-width='.9'/%3E%3C/g%3E%3C/svg%3E") center / 100% 100% no-repeat; }
/* rim: his outline glows red, beating with the cracks */
.unit.dm-rim .jersey.fanart img:first-child { animation: dm-rim 1.4s ease-in-out infinite; }
@keyframes dm-beat { 0%, 60%, 100% { opacity: 0.45; } 12%, 36% { opacity: 1; } 24% { opacity: 0.6; } }
@keyframes dm-rim {
  0%, 60%, 100% { filter: drop-shadow(0 0 1px #ff2a3a) drop-shadow(0 0 3px rgba(255, 0, 40, 0.5)); }
  12%, 36% { filter: drop-shadow(0 0 1.5px #ff4a55) drop-shadow(0 0 8px rgba(255, 0, 40, 0.95)); }
  24% { filter: drop-shadow(0 0 1px #ff2a3a) drop-shadow(0 0 5px rgba(255, 0, 40, 0.7)); }
}

/* C · horns: two horns behind his head and a dark red aura round him */
.unit.dm-horns .jersey::before {
  content: '';
  position: absolute;
  left: 4%;
  right: 4%;
  top: -8%;
  height: 44%;
  z-index: -1;
  pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 42'%3E%3Cdefs%3E%3ClinearGradient id='h' x1='0' y1='1' x2='0' y2='0'%3E%3Cstop offset='0' stop-color='%2314030a'/%3E%3Cstop offset='.6' stop-color='%235a0712'/%3E%3Cstop offset='1' stop-color='%23e0283a'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg fill='url(%23h)' stroke='%23ff5a64' stroke-width='.8' stroke-linejoin='round'%3E%3Cpath d='M31 42C29 26 19 13 4 2 25 9 41 22 45 42Z'/%3E%3Cpath d='M69 42C71 26 81 13 96 2 75 9 59 22 55 42Z'/%3E%3C/g%3E%3Cg fill='none' stroke='%23ff8a8f' stroke-width='.6' opacity='.6'%3E%3Cpath d='M27 24C31 22 34 23 37 26M20 15C24 13 27 14 29 16'/%3E%3Cpath d='M73 24C69 22 66 23 63 26M80 15C76 13 73 14 71 16'/%3E%3C/g%3E%3C/svg%3E") center / 100% 100% no-repeat;
  filter: drop-shadow(0 0 3px rgba(255, 20, 40, 0.8));
}
.unit.dm-horns .jersey.fanart img:first-child { animation: dm-aura 2.4s ease-in-out infinite alternate; }
@keyframes dm-aura {
  from { filter: drop-shadow(0 0 1px #1a0005) drop-shadow(0 0 3px rgba(170, 0, 25, 0.8)); }
  to { filter: drop-shadow(0 0 1px #1a0005) drop-shadow(0 0 7px rgba(200, 0, 30, 1)); }
}

/* D · hell halo: a ring of thorns turning slowly behind his head */
.unit.dm-halo .jersey::after {
  content: '';
  position: absolute;
  left: 50%;
  top: -16%;
  width: 78%;
  aspect-ratio: 1;
  z-index: -1;
  pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='none' stroke='%23ff2a3a'%3E%3Ccircle cx='50' cy='50' r='40' stroke-width='2.4'/%3E%3Ccircle cx='50' cy='50' r='30' stroke-width='.8'/%3E%3C/g%3E%3Cpath d='M89.8 46.4 99.0 50.0 89.8 53.6ZM88.2 61.9 95.3 68.8 85.4 68.6ZM80.7 75.6 84.6 84.6 75.6 80.7ZM68.6 85.4 68.8 95.3 61.9 88.2ZM53.6 89.8 50.0 99.0 46.4 89.8ZM38.1 88.2 31.2 95.3 31.4 85.4ZM24.4 80.7 15.4 84.6 19.3 75.6ZM14.6 68.6 4.7 68.8 11.8 61.9ZM10.2 53.6 1.0 50.0 10.2 46.4ZM11.8 38.1 4.7 31.2 14.6 31.4ZM19.3 24.4 15.4 15.4 24.4 19.3ZM31.4 14.6 31.2 4.7 38.1 11.8ZM46.4 10.2 50.0 1.0 53.6 10.2ZM61.9 11.8 68.8 4.7 68.6 14.6ZM75.6 19.3 84.6 15.4 80.7 24.4ZM85.4 31.4 95.3 31.2 88.2 38.1Z' fill='%23c0102a' stroke='%23ff5a64' stroke-width='.5'/%3E%3Cpath d='M82.3 60.8 84.1 63.4 82.3 66.0 80.5 63.4ZM63.4 79.7 65.2 82.3 63.4 84.9 61.6 82.3ZM36.6 79.7 38.4 82.3 36.6 84.9 34.8 82.3ZM17.7 60.8 19.5 63.4 17.7 66.0 15.9 63.4ZM17.7 34.0 19.5 36.6 17.7 39.2 15.9 36.6ZM36.6 15.1 38.4 17.7 36.6 20.3 34.8 17.7ZM63.4 15.1 65.2 17.7 63.4 20.3 61.6 17.7ZM82.3 34.0 84.1 36.6 82.3 39.2 80.5 36.6Z' fill='%23ff4a55'/%3E%3C/svg%3E") center / contain no-repeat;
  filter: drop-shadow(0 0 3px rgba(255, 0, 40, 0.9));
  transform: translateX(-50%);
  animation: dm-turn 16s linear infinite;
}
@keyframes dm-turn { from { transform: translateX(-50%) rotate(0deg); } to { transform: translateX(-50%) rotate(360deg); } }

/* E · possessed, in two parts. Red eyes (from Form I): two glowing dots on the eye spots found
   for each caricature (find_eyes.py: the centre of the eye whites, left and right of the face's
   middle). Breathing (from Form IV): he grows a little from the shoulders up, and back */
.unit.dm-breathe .jersey { transform-origin: 50% 100%; animation: dm-breathe 2.6s ease-in-out infinite; }
@keyframes dm-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }
.dm-eyes-glow {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(circle at var(--eye-l), #fff 0 0.6px, #ff3040 1.4px, rgba(255, 0, 40, 0.55) 2.8px, transparent 5px),
    radial-gradient(circle at var(--eye-r), #fff 0 0.6px, #ff3040 1.4px, rgba(255, 0, 40, 0.55) 2.8px, transparent 5px),
    radial-gradient(ellipse 10px 1.4px at var(--eye-l), rgba(255, 60, 70, 0.9), transparent),
    radial-gradient(ellipse 10px 1.4px at var(--eye-r), rgba(255, 60, 70, 0.9), transparent);
  animation: dm-glare 2.6s ease-in-out infinite;
}
@keyframes dm-glare { 0%, 100% { opacity: 0.7; } 50% { opacity: 1; } }
/* with red eyes, black mode's white glow keeps to the mouth */
.unit.dm-eyes .jersey.fanart img.bm-whites {
  -webkit-mask-image: linear-gradient(transparent 33%, #000 36%, #000 48%, transparent 56%);
  mask-image: linear-gradient(transparent 33%, #000 36%, #000 48%, transparent 56%);
}

/* ════ black mode: the caricature becomes a black shadow and only its whites stay lit (eyes,
   teeth). It follows the cut-out SHAPE, not how light or dark the picture is, so every player
   comes out equally black whatever his skin. The whites are a second copy of the picture
   (.bm-whites) kept to the head, so a white shirt doesn't light up ════ */
.unit.dm-shadow .jersey.fanart img:first-child {
  filter: brightness(0) drop-shadow(0 0 1.5px rgba(255, 40, 60, 0.95)) drop-shadow(0 0 5px rgba(255, 0, 40, 0.55));
}
.unit.dm-sketch .jersey.fanart img:first-child {
  filter: url(#bm-sketch) drop-shadow(0 0 1.5px rgba(255, 40, 60, 0.95)) drop-shadow(0 0 5px rgba(255, 0, 40, 0.55));
}
.unit.dm-lava .jersey.fanart img:first-child {
  filter: url(#bm-lava) drop-shadow(0 0 1.5px rgba(255, 90, 20, 0.95)) drop-shadow(0 0 5px rgba(255, 60, 0, 0.5));
}
/* black mode keeps its own still filter, even on a cracked card (whose rim light animates the filter) */
.unit:is(.dm-shadow, .dm-sketch, .dm-lava) .jersey.fanart img:first-child { animation: none; }
.unit .jersey.fanart img.bm-whites {
  position: absolute;
  inset: 0;
  filter: url(#bm-whites);
  -webkit-mask-image: linear-gradient(#000 46%, transparent 58%);
  mask-image: linear-gradient(#000 46%, transparent 58%);
  pointer-events: none;
  animation: dm-glare 2.6s ease-in-out infinite;
}

/* Form V: over the shadow, the drawing's red lines on his shirt (badge, logos, trim) */
.unit .jersey.fanart img.bm-lines {
  position: absolute;
  inset: 0;
  pointer-events: none;
  filter: url(#bm-lines);
  -webkit-mask-image: linear-gradient(transparent 50%, #000 60%);
  mask-image: linear-gradient(transparent 50%, #000 60%);
}
/* my blend: the lines faint over his face (you still know him), full on the shirt */
.unit:is(.dm-blend, .dm-blendkit) .jersey.fanart img.bm-lines {
  -webkit-mask-image: linear-gradient(rgba(0, 0, 0, 0.35) 40%, #000 60%);
  mask-image: linear-gradient(rgba(0, 0, 0, 0.35) 40%, #000 60%);
}
/* or the real shirt and badge, dimmed (kit). Under my blend's lines (blendkit) the shirt's colour is
   squeezed into a dark range instead: contrast down, then darker, then a little more saturated, so
   a green shirt stays green but a white one ends up dark grey rather than glowing */
.unit .jersey.fanart img.bm-kit {
  position: absolute;
  inset: 0;
  pointer-events: none;
  filter: brightness(0.5) saturate(1.15);
  -webkit-mask-image: linear-gradient(transparent 50%, #000 60%);
  mask-image: linear-gradient(transparent 50%, #000 60%);
}
.unit.dm-blendkit .jersey.fanart img.bm-kit { filter: contrast(0.55) brightness(0.5) saturate(2.2); }

/* ════ Form V's name card, hacked by the demon ════ */
/* glitched: scanlines; the name and numbers split into red and cyan ghosts; every couple of
   seconds the card jolts and corruption bars flash across it */
.unit.dm-card-glitch .plate { background-image: repeating-linear-gradient(0deg, rgba(255, 50, 70, 0.12) 0 1px, transparent 1px 3px), linear-gradient(120deg, #060307, #240510 32%, #4f0a17 47%, #1c040b 62%, #060307); }
.unit.dm-card-glitch .plate-info { background-image: repeating-linear-gradient(0deg, rgba(255, 50, 70, 0.12) 0 1px, transparent 1px 3px), linear-gradient(180deg, #1c0a10, #0d0508); }
.unit.dm-card-glitch :is(.pl-name, .cell b) { animation: hk-split 2.6s steps(1) infinite; }
@keyframes hk-split {
  0%, 84%, 100% { text-shadow: -0.6px 0 rgba(0, 240, 255, 0.55), 0.6px 0 rgba(255, 0, 60, 0.75); transform: none; }
  86% { text-shadow: -2.5px 0 rgba(0, 240, 255, 0.85), 2.5px 0 rgba(255, 0, 60, 0.95); transform: translateX(2px); }
  89% { text-shadow: 2px 0 rgba(0, 240, 255, 0.85), -2px 0 rgba(255, 0, 60, 0.95); transform: translateX(-2px) skewX(-8deg); }
  92% { text-shadow: -1px 0 rgba(0, 240, 255, 0.7), 1px 0 rgba(255, 0, 60, 0.85); transform: translateX(1px); }
}
.unit.dm-card-glitch .pcard::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(transparent 0 30%, rgba(255, 30, 60, 0.6) 30% 35%, transparent 35% 62%, rgba(0, 230, 255, 0.4) 62% 65%, transparent 65%);
  mix-blend-mode: screen;
  opacity: 0;
  animation: hk-bars 2.6s steps(1) infinite;
}
@keyframes hk-bars {
  0%, 84%, 94%, 100% { opacity: 0; transform: none; }
  86% { opacity: 1; }
  89% { opacity: 1; transform: translateY(8px); }
  92% { opacity: 0.8; transform: translateY(-6px); }
}

/* the chained demon: he did it on your bench, so he's locked up */
.dm-chains {
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='none' stroke='%232a2d33' stroke-width='2.6'%3E%3Cellipse cx='4.0' cy='34.0' rx='4.3' ry='2.5' transform='rotate(33.1 4.0 34.0)'/%3E%3Cellipse cx='9.4' cy='37.5' rx='4.3' ry='0.9' transform='rotate(33.1 9.4 37.5)'/%3E%3Cellipse cx='14.8' cy='41.1' rx='4.3' ry='2.5' transform='rotate(33.1 14.8 41.1)'/%3E%3Cellipse cx='20.2' cy='44.6' rx='4.3' ry='0.9' transform='rotate(33.1 20.2 44.6)'/%3E%3Cellipse cx='25.6' cy='48.1' rx='4.3' ry='2.5' transform='rotate(33.1 25.6 48.1)'/%3E%3Cellipse cx='31.1' cy='51.6' rx='4.3' ry='0.9' transform='rotate(33.1 31.1 51.6)'/%3E%3Cellipse cx='36.5' cy='55.2' rx='4.3' ry='2.5' transform='rotate(33.1 36.5 55.2)'/%3E%3Cellipse cx='41.9' cy='58.7' rx='4.3' ry='0.9' transform='rotate(33.1 41.9 58.7)'/%3E%3Cellipse cx='47.3' cy='62.2' rx='4.3' ry='2.5' transform='rotate(33.1 47.3 62.2)'/%3E%3Cellipse cx='52.7' cy='65.8' rx='4.3' ry='0.9' transform='rotate(33.1 52.7 65.8)'/%3E%3Cellipse cx='58.1' cy='69.3' rx='4.3' ry='2.5' transform='rotate(33.1 58.1 69.3)'/%3E%3Cellipse cx='63.5' cy='72.8' rx='4.3' ry='0.9' transform='rotate(33.1 63.5 72.8)'/%3E%3Cellipse cx='68.9' cy='76.4' rx='4.3' ry='2.5' transform='rotate(33.1 68.9 76.4)'/%3E%3Cellipse cx='74.4' cy='79.9' rx='4.3' ry='0.9' transform='rotate(33.1 74.4 79.9)'/%3E%3Cellipse cx='79.8' cy='83.4' rx='4.3' ry='2.5' transform='rotate(33.1 79.8 83.4)'/%3E%3Cellipse cx='85.2' cy='86.9' rx='4.3' ry='0.9' transform='rotate(33.1 85.2 86.9)'/%3E%3Cellipse cx='90.6' cy='90.5' rx='4.3' ry='2.5' transform='rotate(33.1 90.6 90.5)'/%3E%3Cellipse cx='96.0' cy='94.0' rx='4.3' ry='0.9' transform='rotate(33.1 96.0 94.0)'/%3E%3Cellipse cx='96.0' cy='34.0' rx='4.3' ry='2.5' transform='rotate(146.9 96.0 34.0)'/%3E%3Cellipse cx='90.6' cy='37.5' rx='4.3' ry='0.9' transform='rotate(146.9 90.6 37.5)'/%3E%3Cellipse cx='85.2' cy='41.1' rx='4.3' ry='2.5' transform='rotate(146.9 85.2 41.1)'/%3E%3Cellipse cx='79.8' cy='44.6' rx='4.3' ry='0.9' transform='rotate(146.9 79.8 44.6)'/%3E%3Cellipse cx='74.4' cy='48.1' rx='4.3' ry='2.5' transform='rotate(146.9 74.4 48.1)'/%3E%3Cellipse cx='68.9' cy='51.6' rx='4.3' ry='0.9' transform='rotate(146.9 68.9 51.6)'/%3E%3Cellipse cx='63.5' cy='55.2' rx='4.3' ry='2.5' transform='rotate(146.9 63.5 55.2)'/%3E%3Cellipse cx='58.1' cy='58.7' rx='4.3' ry='0.9' transform='rotate(146.9 58.1 58.7)'/%3E%3Cellipse cx='52.7' cy='62.2' rx='4.3' ry='2.5' transform='rotate(146.9 52.7 62.2)'/%3E%3Cellipse cx='47.3' cy='65.8' rx='4.3' ry='0.9' transform='rotate(146.9 47.3 65.8)'/%3E%3Cellipse cx='41.9' cy='69.3' rx='4.3' ry='2.5' transform='rotate(146.9 41.9 69.3)'/%3E%3Cellipse cx='36.5' cy='72.8' rx='4.3' ry='0.9' transform='rotate(146.9 36.5 72.8)'/%3E%3Cellipse cx='31.1' cy='76.4' rx='4.3' ry='2.5' transform='rotate(146.9 31.1 76.4)'/%3E%3Cellipse cx='25.6' cy='79.9' rx='4.3' ry='0.9' transform='rotate(146.9 25.6 79.9)'/%3E%3Cellipse cx='20.2' cy='83.4' rx='4.3' ry='2.5' transform='rotate(146.9 20.2 83.4)'/%3E%3Cellipse cx='14.8' cy='86.9' rx='4.3' ry='0.9' transform='rotate(146.9 14.8 86.9)'/%3E%3Cellipse cx='9.4' cy='90.5' rx='4.3' ry='2.5' transform='rotate(146.9 9.4 90.5)'/%3E%3Cellipse cx='4.0' cy='94.0' rx='4.3' ry='0.9' transform='rotate(146.9 4.0 94.0)'/%3E%3C/g%3E%3Cg fill='none' stroke='%23b9bec6' stroke-width='1.3'%3E%3Cellipse cx='4.0' cy='34.0' rx='4.3' ry='2.5' transform='rotate(33.1 4.0 34.0)'/%3E%3Cellipse cx='9.4' cy='37.5' rx='4.3' ry='0.9' transform='rotate(33.1 9.4 37.5)'/%3E%3Cellipse cx='14.8' cy='41.1' rx='4.3' ry='2.5' transform='rotate(33.1 14.8 41.1)'/%3E%3Cellipse cx='20.2' cy='44.6' rx='4.3' ry='0.9' transform='rotate(33.1 20.2 44.6)'/%3E%3Cellipse cx='25.6' cy='48.1' rx='4.3' ry='2.5' transform='rotate(33.1 25.6 48.1)'/%3E%3Cellipse cx='31.1' cy='51.6' rx='4.3' ry='0.9' transform='rotate(33.1 31.1 51.6)'/%3E%3Cellipse cx='36.5' cy='55.2' rx='4.3' ry='2.5' transform='rotate(33.1 36.5 55.2)'/%3E%3Cellipse cx='41.9' cy='58.7' rx='4.3' ry='0.9' transform='rotate(33.1 41.9 58.7)'/%3E%3Cellipse cx='47.3' cy='62.2' rx='4.3' ry='2.5' transform='rotate(33.1 47.3 62.2)'/%3E%3Cellipse cx='52.7' cy='65.8' rx='4.3' ry='0.9' transform='rotate(33.1 52.7 65.8)'/%3E%3Cellipse cx='58.1' cy='69.3' rx='4.3' ry='2.5' transform='rotate(33.1 58.1 69.3)'/%3E%3Cellipse cx='63.5' cy='72.8' rx='4.3' ry='0.9' transform='rotate(33.1 63.5 72.8)'/%3E%3Cellipse cx='68.9' cy='76.4' rx='4.3' ry='2.5' transform='rotate(33.1 68.9 76.4)'/%3E%3Cellipse cx='74.4' cy='79.9' rx='4.3' ry='0.9' transform='rotate(33.1 74.4 79.9)'/%3E%3Cellipse cx='79.8' cy='83.4' rx='4.3' ry='2.5' transform='rotate(33.1 79.8 83.4)'/%3E%3Cellipse cx='85.2' cy='86.9' rx='4.3' ry='0.9' transform='rotate(33.1 85.2 86.9)'/%3E%3Cellipse cx='90.6' cy='90.5' rx='4.3' ry='2.5' transform='rotate(33.1 90.6 90.5)'/%3E%3Cellipse cx='96.0' cy='94.0' rx='4.3' ry='0.9' transform='rotate(33.1 96.0 94.0)'/%3E%3Cellipse cx='96.0' cy='34.0' rx='4.3' ry='2.5' transform='rotate(146.9 96.0 34.0)'/%3E%3Cellipse cx='90.6' cy='37.5' rx='4.3' ry='0.9' transform='rotate(146.9 90.6 37.5)'/%3E%3Cellipse cx='85.2' cy='41.1' rx='4.3' ry='2.5' transform='rotate(146.9 85.2 41.1)'/%3E%3Cellipse cx='79.8' cy='44.6' rx='4.3' ry='0.9' transform='rotate(146.9 79.8 44.6)'/%3E%3Cellipse cx='74.4' cy='48.1' rx='4.3' ry='2.5' transform='rotate(146.9 74.4 48.1)'/%3E%3Cellipse cx='68.9' cy='51.6' rx='4.3' ry='0.9' transform='rotate(146.9 68.9 51.6)'/%3E%3Cellipse cx='63.5' cy='55.2' rx='4.3' ry='2.5' transform='rotate(146.9 63.5 55.2)'/%3E%3Cellipse cx='58.1' cy='58.7' rx='4.3' ry='0.9' transform='rotate(146.9 58.1 58.7)'/%3E%3Cellipse cx='52.7' cy='62.2' rx='4.3' ry='2.5' transform='rotate(146.9 52.7 62.2)'/%3E%3Cellipse cx='47.3' cy='65.8' rx='4.3' ry='0.9' transform='rotate(146.9 47.3 65.8)'/%3E%3Cellipse cx='41.9' cy='69.3' rx='4.3' ry='2.5' transform='rotate(146.9 41.9 69.3)'/%3E%3Cellipse cx='36.5' cy='72.8' rx='4.3' ry='0.9' transform='rotate(146.9 36.5 72.8)'/%3E%3Cellipse cx='31.1' cy='76.4' rx='4.3' ry='2.5' transform='rotate(146.9 31.1 76.4)'/%3E%3Cellipse cx='25.6' cy='79.9' rx='4.3' ry='0.9' transform='rotate(146.9 25.6 79.9)'/%3E%3Cellipse cx='20.2' cy='83.4' rx='4.3' ry='2.5' transform='rotate(146.9 20.2 83.4)'/%3E%3Cellipse cx='14.8' cy='86.9' rx='4.3' ry='0.9' transform='rotate(146.9 14.8 86.9)'/%3E%3Cellipse cx='9.4' cy='90.5' rx='4.3' ry='2.5' transform='rotate(146.9 9.4 90.5)'/%3E%3Cellipse cx='4.0' cy='94.0' rx='4.3' ry='0.9' transform='rotate(146.9 4.0 94.0)'/%3E%3C/g%3E%3Cg transform='translate(50 66)'%3E%3Cpath d='M-4.5 -3V-6.5a4.5 4.5 0 0 1 9 0V-3' fill='none' stroke='%232a2d33' stroke-width='3.4'/%3E%3Cpath d='M-4.5 -3V-6.5a4.5 4.5 0 0 1 9 0V-3' fill='none' stroke='%23b9bec6' stroke-width='1.8'/%3E%3Crect x='-7' y='-3.5' width='14' height='11' rx='2' fill='%238c929b' stroke='%232a2d33' stroke-width='1'/%3E%3Crect x='-5.5' y='-2.3' width='11' height='2' rx='1' fill='%23d5d9df' opacity='.8'/%3E%3Ccircle cx='0' cy='2.4' r='1.5' fill='%232a2d33'/%3E%3Cpath d='M0 3V5.5' stroke='%232a2d33' stroke-width='1.2'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
  filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, 0.5));
}

/* ── coaches. The game scores a head coach by his team's margin, in six steps (CardDesign.coachTierOf):
   silver and gold for the first two wins, the Mastermind for a blowout; the players' ice for the losses,
   colder each step: Iced, Frozen, Shattered ── */

/* Mastermind (won by more than 20, +25): he stands in front of his chalkboard while a set draws itself
   on it in glowing chalk; the card is a slate board in a wooden frame */
.unit[data-tier="mastermind"] .pcard {
  border: 2px solid transparent;
  --frame: linear-gradient(135deg, #e6c48a, #9a6a32 40%, #5e3b17 60%, #c99a5a);
  background: var(--frame) border-box;
  box-shadow: 0 0 12px rgba(170, 240, 195, 0.55), 0 3px 9px rgba(25, 15, 60, 0.35);
}
.unit[data-tier="mastermind"] .plate {
  padding-top: calc(0.18rem - 2px);
  background: radial-gradient(ellipse at 30% 40%, rgba(255, 255, 255, 0.1), transparent 60%), linear-gradient(120deg, #1b3527, #2c5640 50%, #1b3527);
  color: #f3f0e4;
  border-bottom-color: #d8b97c;
  text-shadow: 0 0 3px rgba(255, 255, 255, 0.35);
}
.unit[data-tier="mastermind"] .plate-info { padding-bottom: calc(0.2rem - 2px); background: linear-gradient(180deg, #f5f8f1, #e2ecdc); }
.unit[data-tier="mastermind"] .cell b.fp { color: #1f5a3a; }
.unit.is-final[data-tier="mastermind"] .jersey img { opacity: 1; filter: drop-shadow(0 3px 5px rgba(0, 0, 0, 0.3)); }
/* the board, behind him (inside the picture box, so it scales with it), wider than his shoulders */
.unit .jersey .chalkboard {
  position: absolute;
  left: 50%;
  bottom: 4%;
  z-index: -1;
  width: 126%;
  height: 91%;
  transform: translateX(-50%);
  box-sizing: border-box;
  border: 3px solid #8b5a2b;
  border-radius: 5px;
  background: radial-gradient(ellipse at 35% 30%, rgba(255, 255, 255, 0.08), transparent 65%), #24432f;
  box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.5), 0 2px 6px rgba(0, 0, 0, 0.35);
  animation: chalkboard-in 0.6s ease-out both; /* fades in with the card, not before it */
}
@keyframes chalkboard-in { from { opacity: 0; } }
.chalkboard svg { display: block; width: 100%; height: 100%; filter: drop-shadow(0 0 1.5px rgba(255, 255, 255, 0.75)); }
/* every line draws itself (pathLength 1) in half a second, the whole play in about 1.4 s (a reel's card
   is up for about 2), stays, fades, and the play starts again. The gap is longer than the line and the
   start just past it, so nothing shows before it draws (a round cap would leave a dot) */
.chalkboard .cp {
  fill: none;
  stroke: #f3f0e4;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1 2;
  stroke-dashoffset: 1.02;
  animation: chalk-draw 6s ease-out var(--d) infinite;
}
@keyframes chalk-draw {
  0% { stroke-dashoffset: 1.02; opacity: 1; }
  9% { stroke-dashoffset: 0; }
  85% { stroke-dashoffset: 0; opacity: 1; }
  95%, 100% { stroke-dashoffset: 0; opacity: 0; }
}

/* Shattered (lost by more than 20, -20): the Frozen card, and the ice has given way, cracked right
   across from one blow */
.unit.is-shattered[data-tier="frozen"] .pcard {
  box-shadow: 0 0 14px rgba(120, 200, 255, 0.85), 0 2px 6px rgba(25, 15, 60, 0.2);
}
.unit.is-shattered[data-tier="frozen"] .pcard::after {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 118 46' preserveAspectRatio='none'%3E%3Cg fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg stroke='%236aa6d6' stroke-width='1.1'%3E%3Cpath d='M86 18 L118 4'/%3E%3Cpath d='M86 18 L118 28'/%3E%3Cpath d='M86 18 L104 46'/%3E%3Cpath d='M86 18 L70 46'/%3E%3Cpath d='M86 18 L60 0'/%3E%3Cpath d='M86 18 L44 12 L20 6 L0 9'/%3E%3Cpath d='M86 18 L48 30 L24 36 L0 33'/%3E%3Cpath d='M44 12 L40 22 L48 30'/%3E%3Cpath d='M24 36 L18 46'/%3E%3Cpath d='M20 6 L22 0'/%3E%3Cpath d='M78 13 L92 10 L95 22 L82 27 L76 20 Z'/%3E%3C/g%3E%3Cg stroke='%23fff' stroke-opacity='.75' stroke-width='.4'%3E%3Cpath d='M86 18 L118 4'/%3E%3Cpath d='M86 18 L118 28'/%3E%3Cpath d='M86 18 L104 46'/%3E%3Cpath d='M86 18 L70 46'/%3E%3Cpath d='M86 18 L60 0'/%3E%3Cpath d='M86 18 L44 12 L20 6 L0 9'/%3E%3Cpath d='M86 18 L48 30 L24 36 L0 33'/%3E%3Cpath d='M44 12 L40 22 L48 30'/%3E%3Cpath d='M24 36 L18 46'/%3E%3Cpath d='M20 6 L22 0'/%3E%3Cpath d='M78 13 L92 10 L95 22 L82 27 L76 20 Z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") center / 100% 100% no-repeat;
}
.unit.unit.is-shattered[data-tier="frozen"] .jersey.fanart img:first-child,
.unit.is-shattered[data-tier="frozen"] .jersey img {
  filter: grayscale(1) brightness(1.2) contrast(0.85) drop-shadow(0 0 6px rgb(140, 210, 255));
}

@media (prefers-reduced-motion: reduce) {
    .unit.dm-cracks .pcard::before, .unit.dm-rim .jersey img, .unit.dm-horns .jersey img,
  .unit.dm-halo .jersey::after, .unit.dm-breathe .jersey, .dm-eyes-glow,
  .unit.cw-molten .plate, .unit.cw-scorch :is(.plate, .plate-info)::after, .unit .jersey.fanart img.bm-whites { animation: none; }
  .unit.cw-haze .jersey.fanart img:first-child { filter: drop-shadow(0 2px 2px rgba(40, 20, 0, 0.28)); }
  .unit.dm-card-glitch :is(.pl-name, .cell b), .unit.dm-card-glitch .pcard::before { animation: none; }
  .chalkboard .cp, .unit .jersey .chalkboard { animation: none; stroke-dashoffset: 0; }
}