/* Shared WC impact tiles (differentials / threats) — extracted verbatim from the
   team-analyzer so the mini-league ownership view renders pixel-identical tiles
   (docs/wc-my-leagues-plan.md §0.1 reuse). Pairs with wc-impact-tiles.js.
   Depends on vc-theme.css custom properties (--vc-surface/-border/-bg/-text/...). */

.ta-impact-wrap {
  display: grid;
  /* min(360px, 100%) so a phone narrower than 360px can't be forced wider than the
     viewport (classic CSS-grid blowout → horizontal page overflow). */
  grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr));
  gap: 14px;
  margin-top: 10px;
  min-width: 0;
}
.ta-impact-card {
  background: var(--vc-surface);
  border: 1px solid var(--vc-border);
  border-radius: 12px;
  overflow: hidden;
}
.ta-impact-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--vc-border);
  font-weight: 700;
  font-size: 1rem;
}
.ta-impact-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 1.25rem;
  font-weight: 700;
  flex-shrink: 0;
}
.ta-impact-head .ta-muted {
  flex: 1 1 0;
  min-width: 0;
  text-align: end;
}
.ta-impact-thresh { display: block; margin-top: 2px; white-space: nowrap; color: var(--vc-text); font-weight: 600; opacity: 0.85; }
.ta-impact-body {
  padding: 10px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  min-height: 90px;
}
.ta-impact-body > .ta-impact-tile { flex: 0 0 calc(25% - 6px); }
.ta-impact-tile {
  position: relative;
  border: 1px solid var(--vc-border);
  border-radius: 10px;
  overflow: hidden;
  background: var(--vc-bg);
  font-size: 0.72rem;
}
.ta-impact-tile .name {
  background: transparent;
  color: var(--vc-text);
  font-weight: 700;
  font-size: 0.76rem;
  padding: 5px 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
}
.ta-impact-tile .meta {
  font-size: 0.7rem;
  color: var(--vc-text-sub);
  padding: 4px 6px;
  text-align: center;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.ta-impact-tile .meta.ti-solo { color: #4ade80; font-weight: 700; border-bottom: 0; }
.ta-impact-tile .team-sub {
  font-size: 0.66rem;
  color: var(--vc-text-sub);
  padding: 3px 6px 0;
  text-align: center;
}
.ta-impact-tile .shirt-wrap { display: flex; justify-content: center; padding: 7px 6px 3px; }
.ta-impact-tile .shirt-wrap img { width: 42px; height: 42px; object-fit: contain; }
.ta-impact-tile .shirt-fallback { font-size: 26px; line-height: 1; }

/* ── REALIZED (played): gradient fill + metal frame + shimmer (diff, 7+) ── */
.ta-impact-tile.realized { border: 0; padding: 2px; background: var(--ti-frame, var(--vc-border)); }
.ta-impact-tile.realized .ti-inner { border-radius: 8px; overflow: hidden; background: var(--ti-fill, var(--vc-bg)); position: relative; }
.ta-impact-tile.realized.shimmer .ti-inner::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 42%, rgba(255,255,255,0.20) 50%, transparent 58%);
  transform: translateX(-120%); animation: tiSweep var(--ti-spd, 2s) linear infinite;
}
@keyframes tiSweep { 0% { transform: translateX(-120%); } 60%, 100% { transform: translateX(120%); } }
.ta-impact-tile.realized.glow { box-shadow: 0 0 18px var(--ti-glow, rgba(252,198,29,0.45)); }
.ta-impact-tile .ti-swing {
  padding: 6px 5px 7px; text-align: center; font-size: 0.86rem; font-weight: 800;
  border-top: 1px solid rgba(255,255,255,0.08); color: var(--ti-accent, var(--vc-text-sub));
}
.ta-impact-tile .ti-swing small { font-weight: 600; font-size: 0.6rem; opacity: 0.85; }
.ta-impact-card.diff .realized.r1 { --ti-frame: linear-gradient(160deg,#5f8f55,#36502f); --ti-fill: linear-gradient(160deg,#13301d,var(--vc-bg)); --ti-accent: var(--vc-green); }
.ta-impact-card.diff .realized.r2 { --ti-frame: linear-gradient(160deg,#a6ecae,#2f9e58 60%,#d9c24a); --ti-fill: linear-gradient(160deg,#123026,#0c1a14); --ti-accent: #ffd98a; }
.ta-impact-card.diff .realized.r3 { --ti-frame: linear-gradient(160deg,#d08a3c,#8a5320); --ti-fill: linear-gradient(160deg,#33260c,#0f1a14); --ti-accent: #ffd98a; --ti-spd: 2s; }
.ta-impact-card.diff .realized.r4 { --ti-frame: linear-gradient(160deg,#ffe6a0,#daa233 60%,#fff0c0); --ti-fill: linear-gradient(160deg,#33240c,#161006); --ti-accent: var(--vc-gold); --ti-spd: 1.5s; }
.ta-impact-card.diff .realized.r5 { --ti-frame: linear-gradient(160deg,#ffe066,#e0a300 55%,#fff3b0); --ti-fill: linear-gradient(160deg,#3c1f05,#1a0c05); --ti-accent: var(--vc-gold); --ti-spd: 1.05s; --ti-glow: rgba(252,198,29,0.5); }
.ta-impact-card.threat .realized .ti-swing { color: var(--vc-red); }
.ta-impact-card.threat .realized.r0 .ti-swing { color: var(--vc-text-sub); }
.ta-impact-card.threat .realized.r1 { --ti-frame: linear-gradient(160deg,#c14a42,#7a201c); --ti-fill: linear-gradient(160deg,#3a1412,var(--vc-bg)); }
.ta-impact-card.threat .realized.r2 { --ti-frame: linear-gradient(160deg,#dd4d42,#8e201a); --ti-fill: linear-gradient(160deg,#451414,var(--vc-bg)); }
.ta-impact-card.threat .realized.r3 { --ti-frame: linear-gradient(160deg,#ef564a,#a02018); --ti-fill: linear-gradient(160deg,#4d1410,#180a0a); }
.ta-impact-card.threat .realized.r4 { --ti-frame: linear-gradient(160deg,#f85149,#a01818); --ti-fill: linear-gradient(160deg,#5a1414,#1a0a0a); }
.ta-impact-card.threat .realized.r5 { --ti-frame: linear-gradient(160deg,#ff5a4d,#c01010 55%,#ffb0a0); --ti-fill: linear-gradient(160deg,#6e1212,#240909); --ti-glow: rgba(255,60,40,0.55); }

/* ── UPCOMING (not yet played): calm; risk shown as a subtle graded fill ── */
.ta-impact-tile.upcoming .meta { border-bottom: 0; }
.ta-impact-card.threat .ta-impact-tile.upcoming { border-style: dashed; }
.ta-impact-tile.upcoming .shirt-wrap img { filter: grayscale(0.35) opacity(0.92); }
.ta-impact-tile .ti-pend {
  padding: 6px 5px; text-align: center; font-size: 0.66rem; font-style: italic;
  color: var(--vc-text-sub); border-top: 1px solid rgba(255,255,255,0.06);
}
.ta-impact-tile.blank .shirt-wrap img { filter: grayscale(0.7) opacity(0.8); }
.ta-impact-tile .ti-blank { font-style: normal; }
.ta-impact-card.diff .upcoming.s1 { background: linear-gradient(160deg, rgba(95,217,122,0.06), var(--vc-bg) 72%); }
.ta-impact-card.diff .upcoming.s2 { background: linear-gradient(160deg, rgba(170,210,90,0.11), var(--vc-bg) 75%); }
.ta-impact-card.diff .upcoming.s3 { background: linear-gradient(160deg, rgba(252,198,29,0.15), var(--vc-bg) 78%); border-color: rgba(252,198,29,0.32); }
.ta-impact-card.diff .upcoming.s4 { background: linear-gradient(160deg, rgba(252,198,29,0.23), rgba(252,198,29,0.05) 60%, var(--vc-bg)); border-color: rgba(252,198,29,0.48); }
.ta-impact-card.diff .upcoming.s5 { background: linear-gradient(160deg, rgba(252,198,29,0.34), rgba(252,198,29,0.09) 55%, var(--vc-bg)); border-color: rgba(252,198,29,0.66); box-shadow: inset 0 0 13px rgba(252,198,29,0.16); }
.ta-impact-card.threat .upcoming.s1 { background: linear-gradient(160deg, rgba(248,81,73,0.04), var(--vc-bg) 70%); }
.ta-impact-card.threat .upcoming.s2 { background: linear-gradient(160deg, rgba(248,81,73,0.09), var(--vc-bg) 72%); }
.ta-impact-card.threat .upcoming.s3 { background: linear-gradient(160deg, rgba(248,81,73,0.15), var(--vc-bg) 75%); border-color: rgba(248,81,73,0.40); }
.ta-impact-card.threat .upcoming.s4 { background: linear-gradient(160deg, rgba(248,81,73,0.23), rgba(248,81,73,0.05) 60%, var(--vc-bg)); border-color: rgba(248,81,73,0.55); }
.ta-impact-card.threat .upcoming.s5 { background: linear-gradient(160deg, rgba(248,81,73,0.34), rgba(248,81,73,0.09) 55%, var(--vc-bg)); border-color: rgba(248,81,73,0.70); box-shadow: inset 0 0 13px rgba(248,81,73,0.16); }
@media (max-width: 600px) {
  .ta-impact-body { gap: 7px; }
  .ta-impact-body > .ta-impact-tile { flex-basis: calc(33.333% - 5px); }
  .ta-impact-tile .name { font-size: 0.7rem; padding: 4px 4px; }
  .ta-impact-tile .shirt-wrap img { width: 36px; height: 36px; }
}
.ta-impact-empty {
  color: var(--vc-text-sub);
  font-size: 0.88rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 80px;
}

/* ── Role badges (captain / vice on the differential tiles) ── */
.ta-role-badge {
  position: absolute;
  top: 5px;
  left: 5px;
  min-width: 24px;
  height: 28px;
  padding: 0 8px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-size: 0.88rem;
  font-weight: 900;
  line-height: 1;
  border: 1px solid rgba(71,85,105,0.4);
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
  z-index: 3;
}
.ta-role-badge.captain {
  color: #4a2f00;
  background: linear-gradient(180deg, #fef08a 0%, #f59e0b 100%);
  border-color: rgba(146,64,14,0.35);
}
.ta-role-badge.vice {
  color: #f8fafc;
  background: linear-gradient(180deg, #334155 0%, #1e293b 100%);
  border-color: rgba(148,163,184,0.45);
  letter-spacing: -0.02em;
  transform: scale(0.85);
  transform-origin: top left;
}
@keyframes chipElectric {
  0%, 100% { box-shadow: 0 0 0 2px #fde68a, 0 0 6px 1px rgba(125,211,252,0.75), 0 0 13px 3px rgba(253,224,138,0.55); }
  50%      { box-shadow: 0 0 0 2px #7dd3fc, 0 0 10px 2px rgba(253,224,138,0.95), 0 0 20px 5px rgba(125,211,252,0.6); }
}
.chip-electric { animation: chipElectric 1.25s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
  .chip-electric { animation: none; box-shadow: 0 0 0 2px #fde68a, 0 0 12px 3px rgba(125,211,252,0.6); }
}
.ta-role-badge.captain.cap-triple {
  color: #fff;
  background: linear-gradient(180deg, #c4b5fd 0%, #6d28d9 100%);
  border-color: rgba(76,29,149,0.6);
}
.ta-role-badge .cap-coin {
  position: absolute; top: -5px; right: -5px;
  width: 15px; height: 15px; border-radius: 50%;
  background: #0f172a; color: #fde68a; border: 1px solid #fde68a;
  font-size: 0.62rem; font-weight: 900; line-height: 1;
  display: grid; place-items: center; z-index: 4;
}
.ta-impact-tile .ta-impact-shirt-box { position: relative; display: inline-block; line-height: 0; }
/* FotMob face in a nation-coloured ring (predicted-lineups visual). The ring is an
   inner wrapper so the role-badge on the outer box is never clipped by the circle. */
.ta-impact-tile .ti-face-ring {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; border-radius: 50%; overflow: hidden;
  font-size: 0.82rem; font-weight: 800; box-shadow: 0 1px 3px rgba(0,0,0,0.4);
}
.ta-impact-tile .ti-face-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.ta-impact-tile .ti-face-ini { line-height: 1; }
.ta-impact-tile.upcoming .ti-face-img { filter: grayscale(0.35) opacity(0.92); }
.ta-impact-tile.blank .ti-face-img { filter: grayscale(0.7) opacity(0.8); }
@media (max-width: 600px) { .ta-impact-tile .ti-face-ring { width: 40px; height: 40px; } }
.ta-impact-tile .ta-role-badge {
  min-width: 16px; height: 18px; font-size: 0.62rem; padding: 0 4px; top: -3px; left: -3px;
}
.ta-impact-tile .ta-role-badge.cap-triple { top: 4px; left: 4px; }
.ta-impact-tile .ta-role-badge.cap-triple .cap-coin {
  top: -4px; right: -4px; width: 13px; height: 13px; font-size: 0.52rem;
}