/* ──── performance tiers (PROPOSAL) ────
   A card gets data-tier from the player's OWN fantasy score: PIR, +10% if his
   team won, before the captain ×2 / bench ×0.5 multipliers.
     bad      under 8 and it lost him credits   icy score row        (after FT)
     frozen   the same, but below 0             + ice frame, cracks  (after FT)
     (none)   8–14.9                            the card as it is today
     hot      15–22.9                           silver foil card, slow shine
     captain  23–29.9  armband-worthy           gold foil card: metallic gold name
                                                card and frame, shine sweep
     inferno  30+                               gold frame, gold flames, embers
     dnp      final with a 0-minute stat line (no stat line may just be an
              unmatched feed, so that gets no tier): dashed frame
   Credits: a game loses credits below 1.14 × price − 0.67, so a 4–7 credit
   filler can earn his price with a 6; those get no "bad" look.
   Good tiers may light up live; bad ones wait for the final buzzer. */

@property --tier-a {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}

/* the frame: a 2px border painted by the card's own background, so no extra
   markup (the plate and info rows cover everything inside it). It sits INSIDE
   the card: 2px less padding top and bottom keeps the card exactly the size
   of today's card. */
.unit:is([data-tier="frozen"], [data-tier="hot"], [data-tier="captain"], [data-tier="inferno"], [data-tier="dnp"]) .pcard {
  border: 2px solid transparent;
  background: var(--frame) border-box;
}
.unit:is([data-tier="frozen"], [data-tier="hot"], [data-tier="captain"], [data-tier="inferno"], [data-tier="dnp"]) .plate { padding-top: calc(0.18rem - 2px); }
.unit:is([data-tier="frozen"], [data-tier="hot"], [data-tier="captain"], [data-tier="inferno"], [data-tier="dnp"]) .plate-info { padding-bottom: calc(0.2rem - 2px); }

/* ── hot: a silver foil card, one step below the gold one ── */
.unit[data-tier="hot"] .pcard {
  --frame: linear-gradient(135deg, #f4f7fb, #8e97a5 50%, #f4f7fb);
  box-shadow: 0 3px 9px rgba(25, 15, 60, 0.35);
}
.unit[data-tier="hot"] .plate {
  background: linear-gradient(120deg, #4a5160, #aeb6c2 22%, #f4f7fb 42%, #b9c1cc 58%, #565e6c);
  color: #1d2230;
  border-bottom-color: #f4f7fb;
}
.unit[data-tier="hot"] .plate-info { background: linear-gradient(180deg, #fbfcfe, #e7ebf1); }

/* foil shine: a light band sweeps across the card (gold every 3.2s, silver
   every 6s with a long rest, so the common hot card stays calm) */
.unit:is([data-tier="hot"], [data-tier="captain"]) .pcard::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(110deg, transparent 38%, rgba(255, 255, 255, 0.75) 48%, transparent 58%) 0 0 / 280% 100% no-repeat;
  mix-blend-mode: soft-light;
  animation: tier-sweep 3.2s ease-in-out infinite;
}
.unit[data-tier="hot"] .pcard::before { animation: tier-sweep-slow 6s ease-in-out infinite; }
@keyframes tier-sweep { from { background-position: 140% 0; } 60%, to { background-position: -40% 0; } }
@keyframes tier-sweep-slow { from { background-position: 140% 0; } 30%, to { background-position: -40% 0; } }

/* ── captain-worthy: a gold foil card (the armband stays on). The frame is
   still; its light-to-dark gold reads as a bevelled metal edge. ── */
.unit[data-tier="captain"] .pcard {
  --frame: linear-gradient(135deg, #fff4c4, #e3b04a 28%, #8a5a00 50%, #e3b04a 72%, #fff4c4);
  box-shadow: 0 0 10px rgba(255, 200, 61, 0.55), 0 3px 9px rgba(25, 15, 60, 0.35);
}
.unit[data-tier="captain"] .plate {
  background: linear-gradient(120deg, #7a4f00, #d9a73a 22%, #fff0b3 42%, #e3b04a 58%, #8a5a00);
  color: #2b1a00;
  border-bottom-color: #fff0b3;
}
.unit[data-tier="captain"] .plate-info { background: linear-gradient(180deg, #fffaf0, #f8eac6); }

/* ── inferno ── */
.unit[data-tier="inferno"] .pcard {
  --frame: conic-gradient(from var(--tier-a), #fff6c8, #ffc83d, #ff8c1a, #fff6c8, #ffc83d, #ff8c1a, #fff6c8);
  box-shadow: 0 0 18px 3px rgba(255, 190, 60, 0.85), 0 3px 9px rgba(25, 15, 60, 0.35);
  animation: tier-spin 1.8s linear infinite;
}
.unit[data-tier="inferno"] .plate {
  background: linear-gradient(90deg, #4a1206, #7a2a08 50%, #4a1206);
  border-bottom-color: #ffc83d;
}
.unit[data-tier="inferno"] .pl-name { color: #ffe08a; }

@keyframes tier-spin { to { --tier-a: 360deg; } }

/* flames: two SVG layers behind the jersey, flickering out of phase */
.unit[data-tier="inferno"] .jersey::before,
.unit[data-tier="inferno"] .jersey::after {
  content: '';
  position: absolute;
  left: -24%;
  right: -24%;
  top: -50%;
  bottom: 8%;
  z-index: -1;
  background: var(--flame) center bottom / 100% 100% no-repeat;
  transform-origin: 50% 100%;
  pointer-events: none;
}

/* inferno: same shapes, white-hot core */
.unit[data-tier="inferno"] .jersey::before {
  --flame: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23f0421c' stop-opacity='0'/%3E%3Cstop offset='.25' stop-color='%23f0421c'/%3E%3Cstop offset='.6' stop-color='%23ff8c1a'/%3E%3Cstop offset='1' stop-color='%23ffc83d'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath fill='url(%23g)' d='M10 100C2 90 2 76 6 62C9 68 11 70 14 72C13 58 16 46 20 38C22 46 24 51 27 55C26 42 29 30 34 22C36 32 38 38 42 44C41 28 44 16 50 4C54 16 58 28 58 42C61 36 63 28 66 20C70 30 73 42 73 54C76 48 78 42 80 36C84 46 87 58 87 70C89 68 91 64 94 60C98 74 98 90 90 100Z'/%3E%3C/svg%3E");
  filter: drop-shadow(0 0 6px rgba(255, 120, 20, 0.8));
  animation: tier-flicker 0.75s ease-in-out infinite alternate;
}
.unit[data-tier="inferno"] .jersey::after {
  --flame: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='.1' stop-color='%23fff6c8' stop-opacity='0'/%3E%3Cstop offset='.4' stop-color='%23ffe27a'/%3E%3Cstop offset='1' stop-color='%23ffffff'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath fill='url(%23g)' d='M18 100C14 86 18 70 24 58C27 64 30 68 32 70C31 58 34 48 38 40C40 48 42 52 45 56C44 44 46 34 50 24C54 34 56 44 55 56C58 52 60 46 62 40C66 48 69 58 68 70C70 68 73 63 76 58C82 70 86 86 82 100Z'/%3E%3C/svg%3E");
  animation: tier-flicker 0.6s ease-in-out -0.3s infinite alternate-reverse;
}

@keyframes tier-flicker {
  0%   { transform: scale(1, 1) skewX(0deg); opacity: 0.95; }
  50%  { transform: scale(1.04, 0.9) skewX(-2deg); opacity: 0.85; }
  100% { transform: scale(0.97, 1.07) skewX(2deg); opacity: 1; }
}

/* inferno embers: a few sparks drifting up out of the flames */
.unit[data-tier="inferno"]::before {
  content: '';
  position: absolute;
  left: 8%;
  right: 8%;
  top: -46%;
  height: 70%;
  pointer-events: none;
  z-index: 3;
  background:
    radial-gradient(circle, #fff3b0 0 1.5px, transparent 2.5px) 18% 80% / 10px 10px no-repeat,
    radial-gradient(circle, #ffc83d 0 1.5px, transparent 2.5px) 78% 70% / 10px 10px no-repeat,
    radial-gradient(circle, #fff 0 1px, transparent 2px) 50% 90% / 8px 8px no-repeat,
    radial-gradient(circle, #ff8c1a 0 1.5px, transparent 2.5px) 34% 60% / 10px 10px no-repeat,
    radial-gradient(circle, #fff3b0 0 1px, transparent 2px) 66% 95% / 8px 8px no-repeat;
  animation: tier-embers 1.6s ease-out infinite;
}
@keyframes tier-embers {
  from { transform: translateY(18px); opacity: 0; }
  20%  { opacity: 1; }
  to   { transform: translateY(-14px); opacity: 0; }
}

/* a great game stays bright after the buzzer (normal finished cards fade) */
.unit.is-final:is([data-tier="captain"], [data-tier="inferno"]) .jersey img { filter: drop-shadow(0 3px 5px rgba(60, 30, 0, 0.25)); opacity: 1; }
.unit.is-final:is([data-tier="captain"], [data-tier="inferno"]) .dorsal { opacity: 1; }
.unit.is-final[data-tier="inferno"] .plate-info { background: #fff; }

/* ── bad: a quiet icy score row; below 0 adds the ice frame and cracks ── */
.unit[data-tier="bad"] .plate,
.unit[data-tier="frozen"] .plate { border-bottom-color: #8fd3ff; }
.unit[data-tier="bad"] .plate-info,
.unit[data-tier="frozen"] .plate-info { background: linear-gradient(180deg, #f1f9ff, #d9eeff); }
.unit[data-tier="bad"] .cell b.fp,
.unit[data-tier="frozen"] .cell b.fp { color: #2f6db3; }

.unit[data-tier="frozen"] .pcard {
  --frame: linear-gradient(135deg, #f2fbff, #9ad8ff 45%, #4f8fd6);
  box-shadow: 0 0 8px rgba(120, 200, 255, 0.55), 0 2px 6px rgba(25, 15, 60, 0.2);
}

.unit[data-tier="frozen"] .jersey img {
  filter: grayscale(1) brightness(1.08) drop-shadow(0 0 5px rgba(140, 210, 255, 0.95));
}
/* hairline cracks in two corners (clear of the numbers) */
.unit[data-tier="frozen"] .pcard::after {
  content: '';
  position: absolute;
  inset: 0;
  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='%237fb6e0' stroke-width='.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M0 4 7 9 12 6 17 12'/%3E%3Cpath d='M7 9 5 17'/%3E%3Cpath d='M12 6 13 0'/%3E%3Cpath d='M118 33 111 30 106 36 101 34'/%3E%3Cpath d='M106 36 108 46'/%3E%3Cpath d='M111 30 114 24'/%3E%3C/g%3E%3C/svg%3E") center / 100% 100% no-repeat;
}

/* ── did not play ── */
.unit[data-tier="dnp"] .pcard { border: 2px dashed #8f93ab; }

/* bench cards sit in normal flow; give the effects a box to anchor to */
.bench-stage .unit[data-tier] { position: relative; }

/* room for the flames under the bench labels (both columns, so
   they stay level), and the team title stays readable over a burning centre */
.bench-stage:has(.unit[data-tier="inferno"]) :is(.bench-col, .bench-panel) h3 { margin-bottom: 1.75rem; }
.court-title { position: relative; z-index: 5; }

@media (prefers-reduced-motion: reduce) {
  .unit[data-tier] .pcard,
  .unit[data-tier] .pcard::before,
  .unit[data-tier] .jersey::before,
  .unit[data-tier] .jersey::after { animation: none; }
  .unit[data-tier="inferno"]::before { display: none; }
}