/* Componentes adicionales de carrera. Esta hoja no depende de una estructura rigida. */

:root {
  --career-extra-surface: #101319;
  --career-extra-surface-2: #151922;
  --career-extra-line: rgba(255, 255, 255, .09);
  --career-extra-line-soft: rgba(255, 255, 255, .055);
  --career-extra-text: #f4f5f2;
  --career-extra-muted: #858b96;
  --career-extra-danger: #ff6f68;
  --career-extra-success: #6fd58b;
  --career-extra-ease: cubic-bezier(.22, 1, .36, 1);
}

/* ---------- Vitrina de campeonatos ---------- */

.champion-showcase {
  position: relative;
  isolation: isolate;
  display: grid;
  gap: 9px;
  width: min(100%, 900px);
  margin-inline: auto;
  padding: clamp(14px, 2.4vw, 22px);
  overflow: hidden;
  border: 1px solid var(--career-extra-line);
  border-top: 2px solid var(--team-primary, #ff6333);
  border-radius: 12px;
  background:
    radial-gradient(34rem 18rem at 100% 0,
      color-mix(in srgb, var(--team-primary, #ff6333) 13%, transparent),
      transparent 66%),
    rgba(15, 18, 24, .96);
  box-shadow: none;
}

.champion-showcase::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(115deg,
    color-mix(in srgb, var(--team-secondary, #cfff47) 4%, transparent),
    transparent 42%);
  pointer-events: none;
}

.champion-showcase > header,
.champion-showcase .champion-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 14px;
}

.champion-showcase > header small,
.champion-showcase .champion-heading small {
  color: color-mix(in srgb, var(--team-secondary, #cfff47) 78%, white);
  font-size: 8px;
  font-weight: 900;
  letter-spacing: 1.35px;
  text-transform: uppercase;
}

.champion-showcase > header h3,
.champion-showcase .champion-heading h3 {
  margin: 4px 0 0;
  color: var(--career-extra-text);
  font: clamp(21px, 4vw, 31px)/1 'Archivo Black', sans-serif;
  letter-spacing: -.8px;
  text-transform: uppercase;
}

.champion-tabs,
.champion-showcase [role="tablist"] {
  display: flex;
  gap: 5px;
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, .16) transparent;
}

.champion-tab {
  flex: 0 0 auto;
  min-height: 32px;
  padding: 7px 10px;
  border: 1px solid var(--career-extra-line);
  border-radius: 7px;
  background: rgba(255, 255, 255, .025);
  color: var(--career-extra-muted);
  font: 800 7px 'DM Sans', sans-serif;
  letter-spacing: .75px;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color .18s ease, background .18s ease, color .18s ease;
}

.champion-tab:hover,
.champion-tab:focus-visible {
  border-color: color-mix(in srgb, var(--team-primary, #ff6333) 55%, white 8%);
  color: var(--career-extra-text);
  outline: none;
}

.champion-tab.active,
.champion-tab[aria-selected="true"] {
  border-color: color-mix(in srgb, var(--team-secondary, #cfff47) 48%, transparent);
  background: color-mix(in srgb, var(--team-secondary, #cfff47) 9%, transparent);
  color: color-mix(in srgb, var(--team-secondary, #cfff47) 80%, white);
}

.champion-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(130px, .55fr) minmax(0, 1.45fr);
  align-items: center;
  gap: clamp(16px, 3vw, 28px);
  min-height: 220px;
  padding: clamp(18px, 3vw, 28px);
  overflow: hidden;
  border: 1px solid var(--career-extra-line-soft);
  border-radius: 10px;
  background:
    radial-gradient(18rem 15rem at 16% 50%,
      color-mix(in srgb, var(--team-secondary, #cfff47) 10%, transparent),
      transparent 68%),
    rgba(7, 9, 13, .54);
  animation: career-extra-card-in .42s var(--career-extra-ease) both;
}

.champion-card[hidden] {
  display: none;
}

.champion-card::before {
  content: attr(data-year);
  position: absolute;
  right: 12px;
  bottom: -18px;
  color: rgba(255, 255, 255, .035);
  font: clamp(70px, 13vw, 126px)/1 'Archivo Black', sans-serif;
  letter-spacing: -8px;
  pointer-events: none;
}

.champion-card > img,
.champion-card .champion-trophy,
.champion-card .trophy-image,
.champion-card [data-trophy-image] {
  grid-column: 1;
  grid-row: 1;
  justify-self: center;
  width: min(100%, 170px);
  height: 170px;
  object-fit: contain;
  filter: drop-shadow(0 18px 24px rgba(0, 0, 0, .38));
  animation: career-extra-trophy-in .58s var(--career-extra-ease) both;
}

.champion-card .champion-trophy img,
.champion-card .trophy-image img,
.champion-card [data-trophy-image] img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.champion-card > :not(img, .champion-trophy, .trophy-image, [data-trophy-image]) {
  position: relative;
  z-index: 1;
}

.champion-card > .champion-tab {
  position: absolute;
  z-index: 3;
  top: 12px;
  left: 12px;
  min-height: 0;
  cursor: default;
}

.champion-card > div:not(.champion-trophy, .trophy-image) {
  grid-column: 2;
  grid-row: 1;
  min-width: 0;
}

.champion-card .champion-copy,
.champion-card .champion-details {
  grid-column: 2;
  grid-row: 1;
  min-width: 0;
}

.champion-card small,
.champion-card .champion-kicker {
  color: color-mix(in srgb, var(--team-secondary, #cfff47) 76%, white);
  font-size: 8px;
  font-weight: 900;
  letter-spacing: 1.2px;
  text-transform: uppercase;
}

.champion-card h3,
.champion-card h4 {
  margin: 5px 0 8px;
  color: var(--career-extra-text);
  font: clamp(25px, 5vw, 42px)/.95 'Archivo Black', sans-serif;
  letter-spacing: -1.5px;
  text-transform: uppercase;
}

.champion-card p {
  max-width: 540px;
  margin: 0;
  color: var(--career-extra-muted);
  font-size: 11px;
  line-height: 1.55;
}

.champion-card .champion-meta,
.champion-card .champion-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 13px;
}

.champion-card .champion-meta > *,
.champion-card .champion-stats > * {
  padding: 5px 7px;
  border: 1px solid var(--career-extra-line);
  border-radius: 99px;
  background: rgba(255, 255, 255, .025);
  color: #a3a9b3;
  font-size: 7px;
  font-weight: 800;
}

/* ---------- Registro completo, temporada por temporada ---------- */

.final-season-log {
  --season-log-columns: 68px minmax(138px, 1.35fr) repeat(5, minmax(44px, .42fr)) minmax(130px, 1.15fr);
  width: min(100%, 980px);
  margin: 18px auto 0;
  overflow: hidden;
  border: 1px solid var(--career-extra-line);
  border-radius: 11px;
  background: rgba(15, 18, 24, .96);
}

.final-season-log > header,
.final-season-log .season-log-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--career-extra-line);
  background: color-mix(in srgb, var(--team-primary, #ff6333) 6%, transparent);
}

.final-season-log > header h3,
.final-season-log .season-log-heading h3 {
  margin: 0;
  color: var(--career-extra-text);
  font: 14px 'Archivo Black', sans-serif;
  letter-spacing: -.25px;
  text-transform: uppercase;
}

.final-season-log > header span,
.final-season-log .season-log-heading span {
  color: var(--career-extra-muted);
  font-size: 7px;
  font-weight: 900;
  letter-spacing: .8px;
}

.final-season-log .season-log-scroll {
  overflow-x: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, .16) transparent;
}

.season-log-row {
  display: grid;
  grid-template-columns: var(--season-log-columns);
  align-items: center;
  min-width: 790px;
  border-bottom: 1px solid var(--career-extra-line-soft);
  color: #a5abb4;
  font-size: 8px;
  animation: career-extra-row-in .3s var(--career-extra-ease) both;
  animation-delay: min(calc(var(--season-index, 0) * 22ms), 330ms);
}

.season-log-row:last-child {
  border-bottom: 0;
}

.season-log-row > * {
  min-width: 0;
  padding: 10px 8px;
  overflow: hidden;
  border-right: 1px solid var(--career-extra-line-soft);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.season-log-row > *:last-child {
  border-right: 0;
}

.season-log-row.is-header,
.season-log-row.header,
.season-log-row[role="rowheader"] {
  position: sticky;
  z-index: 2;
  top: 0;
  background: #0b0e13;
  color: #6f7681;
  font-size: 6px;
  font-weight: 900;
  letter-spacing: .8px;
  text-transform: uppercase;
  animation: none;
}

.season-log-row:not(.is-header, .header):hover {
  background: rgba(255, 255, 255, .018);
}

.season-log-row.champion,
.season-log-row.won-title,
.season-log-row[data-champion="true"] {
  background: color-mix(in srgb, var(--team-secondary, #cfff47) 5%, transparent);
  box-shadow: inset 2px 0 color-mix(in srgb, var(--team-secondary, #cfff47) 70%, white 4%);
}

.season-log-row.injured,
.season-log-row[data-injury="true"] {
  background: rgba(255, 111, 104, .035);
}

.season-log-year {
  color: var(--career-extra-text);
  font-weight: 900;
}

.season-log-team {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--career-extra-text);
  font-weight: 800;
}

.season-log-team img {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  object-fit: contain;
}

.season-log-stat {
  text-align: center;
}

.season-log-stat b {
  display: block;
  color: var(--career-extra-text);
  font-size: 10px;
}

.season-log-stat small {
  display: block;
  margin-top: 2px;
  color: #626975;
  font-size: 5px;
}

.season-log-awards {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  white-space: normal;
}

.season-log-awards > *,
.season-log-award {
  display: inline-flex;
  align-items: center;
  min-height: 19px;
  padding: 3px 5px;
  border: 1px solid color-mix(in srgb, var(--team-secondary, #cfff47) 20%, var(--career-extra-line));
  border-radius: 99px;
  background: color-mix(in srgb, var(--team-secondary, #cfff47) 5%, transparent);
  color: #aeb5bf;
  font-size: 5px;
  font-weight: 900;
  line-height: 1.2;
}

.season-log-empty {
  padding: 24px 16px;
  color: var(--career-extra-muted);
  font-size: 9px;
  text-align: center;
}

/* Estructura que entrega renderFinalSeasonLog(): una fila compacta por ano. */
.final-season-log > .season-log-row {
  grid-template-columns: minmax(205px, 1.2fr) minmax(270px, 1.55fr) minmax(150px, .9fr);
  min-width: 0;
}

.final-season-log > .season-log-row > * {
  padding: 12px 13px;
  overflow: visible;
  border-right: 0;
  text-overflow: clip;
  white-space: normal;
}

.final-season-log > .season-log-row > header {
  display: flex;
  grid-column: 1;
  align-self: stretch;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border-right: 1px solid var(--career-extra-line-soft);
}

.season-log-club {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 9px;
}

.season-log-club > img {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  object-fit: contain;
}

.season-log-club > div {
  min-width: 0;
}

.season-log-club b,
.season-log-club small {
  display: block;
}

.season-log-club b {
  overflow: hidden;
  color: var(--career-extra-text);
  font-size: 8px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.season-log-club small {
  margin-top: 3px;
  color: #6f7681;
  font-size: 5px;
  font-weight: 800;
  letter-spacing: .4px;
}

.final-season-log > .season-log-row > header > strong {
  flex: 0 0 auto;
  color: color-mix(in srgb, var(--team-secondary, #cfff47) 74%, white);
  font: 12px/1 'Archivo Black', sans-serif;
}

.season-log-stats {
  display: grid;
  grid-column: 2;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  align-self: stretch;
  align-items: center;
  border-right: 1px solid var(--career-extra-line-soft);
}

.season-log-stats > div {
  min-width: 0;
  padding: 2px 5px;
  border-right: 1px solid var(--career-extra-line-soft);
  text-align: center;
}

.season-log-stats > div:last-child {
  border-right: 0;
}

.season-log-stats b,
.season-log-stats span {
  display: block;
}

.season-log-stats b {
  color: var(--career-extra-text);
  font: 12px/1 'Archivo Black', sans-serif;
}

.season-log-stats span {
  margin-top: 4px;
  color: #646b76;
  font-size: 5px;
  font-weight: 900;
  letter-spacing: .55px;
}

.final-season-log > .season-log-row > p {
  display: flex;
  grid-column: 3;
  align-items: center;
  margin: 0;
  color: #a8aeb7;
  font-size: 7px;
  font-weight: 800;
  line-height: 1.4;
}

.final-season-log > .season-log-row > .season-log-awards {
  grid-column: 1 / -1;
  padding-block: 7px;
  border-top: 1px solid var(--career-extra-line-soft);
  background: rgba(255, 255, 255, .012);
}

.season-log-awards .season-title {
  border-color: color-mix(in srgb, #e6bd64 33%, var(--career-extra-line));
  background: rgba(230, 189, 100, .055);
  color: #d9c28f;
}

.season-log-awards .season-title img {
  width: 12px;
  height: 12px;
  object-fit: contain;
}

.season-log-awards .season-injury {
  border-color: color-mix(in srgb, var(--career-extra-danger) 30%, var(--career-extra-line));
  background: rgba(255, 111, 104, .04);
  color: #dba3a0;
}

.season-log-awards .season-empty {
  border-color: transparent;
  background: transparent;
  color: #5f6671;
}

/* ---------- Retrato historico construido con CSS ---------- */

.historical-player-photo {
  --photo-skin: #b87952;
  --jersey-primary: var(--team-primary, #ff6333);
  --jersey-secondary: var(--team-secondary, #cfff47);
  position: relative;
  isolation: isolate;
  width: clamp(105px, 17vw, 160px);
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--jersey-primary) 38%, var(--career-extra-line));
  border-radius: 10px;
  background:
    radial-gradient(circle at 50% 38%, rgba(255, 255, 255, .08), transparent 32%),
    linear-gradient(155deg,
      color-mix(in srgb, var(--jersey-primary) 19%, #161a22),
      #090c11 72%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .025);
}

.historical-player-photo::before {
  content: "";
  position: absolute;
  z-index: 2;
  top: 13%;
  left: 50%;
  width: 31%;
  aspect-ratio: .84;
  border-radius: 46% 46% 43% 43% / 38% 38% 55% 55%;
  background:
    linear-gradient(180deg, #17191e 0 19%, transparent 20%),
    linear-gradient(150deg,
      color-mix(in srgb, var(--photo-skin) 90%, white 10%),
      color-mix(in srgb, var(--photo-skin) 82%, #4a2419 18%));
  box-shadow: 0 7px 14px rgba(0, 0, 0, .26);
  transform: translateX(-50%);
}

.historical-player-photo::after {
  content: attr(data-number);
  position: absolute;
  z-index: 1;
  left: 50%;
  bottom: -4%;
  display: grid;
  place-items: start center;
  width: 76%;
  height: 66%;
  padding-top: 27%;
  clip-path: polygon(19% 0, 36% 7%, 50% 11%, 64% 7%, 81% 0, 100% 16%, 88% 35%, 83% 100%, 17% 100%, 12% 35%, 0 16%);
  background:
    linear-gradient(90deg,
      color-mix(in srgb, var(--jersey-primary) 72%, #090b0f) 0 10%,
      transparent 10% 90%,
      color-mix(in srgb, var(--jersey-primary) 72%, #090b0f) 90%),
    linear-gradient(180deg,
      var(--jersey-primary),
      color-mix(in srgb, var(--jersey-primary) 62%, #090b0f));
  color: var(--jersey-secondary);
  font: clamp(24px, 5vw, 43px)/1 'Archivo Black', sans-serif;
  text-shadow: 0 2px 0 rgba(0, 0, 0, .2);
  transform: translateX(-50%);
}

.historical-player-photo > img:not(.photo-club) {
  position: absolute;
  z-index: 4;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.historical-player-photo .photo-club {
  position: absolute;
  z-index: 0;
  right: -9%;
  bottom: -5%;
  width: 76%;
  height: 76%;
  object-fit: contain;
  opacity: .1;
  filter: saturate(.65);
  pointer-events: none;
}

.historical-player-photo:has(.photo-head)::before,
.historical-player-photo:has(.photo-jersey)::after {
  display: none;
}

.historical-player-photo .photo-head {
  position: absolute;
  z-index: 2;
  top: 13%;
  left: 50%;
  width: 31%;
  aspect-ratio: .84;
  border-radius: 46% 46% 43% 43% / 38% 38% 55% 55%;
  background:
    linear-gradient(180deg, #17191e 0 19%, transparent 20%),
    linear-gradient(150deg,
      color-mix(in srgb, var(--photo-skin) 90%, white 10%),
      color-mix(in srgb, var(--photo-skin) 82%, #4a2419 18%));
  box-shadow: 0 7px 14px rgba(0, 0, 0, .26);
  transform: translateX(-50%);
}

.historical-player-photo .photo-jersey {
  position: absolute;
  z-index: 1;
  left: 50%;
  bottom: -4%;
  display: grid;
  place-items: start center;
  width: 76%;
  height: 66%;
  padding-top: 27%;
  clip-path: polygon(19% 0, 36% 7%, 50% 11%, 64% 7%, 81% 0, 100% 16%, 88% 35%, 83% 100%, 17% 100%, 12% 35%, 0 16%);
  background:
    linear-gradient(90deg,
      color-mix(in srgb, var(--jersey-primary) 72%, #090b0f) 0 10%,
      transparent 10% 90%,
      color-mix(in srgb, var(--jersey-primary) 72%, #090b0f) 90%),
    linear-gradient(180deg,
      var(--jersey-primary),
      color-mix(in srgb, var(--jersey-primary) 62%, #090b0f));
  transform: translateX(-50%);
}

.historical-player-photo .photo-jersey > b {
  color: var(--jersey-secondary);
  font: clamp(24px, 5vw, 43px)/1 'Archivo Black', sans-serif;
  text-shadow: 0 2px 0 rgba(0, 0, 0, .2);
}

.historical-player-photo .historical-player-number,
.historical-player-photo .player-number,
.historical-player-photo > b {
  position: absolute;
  z-index: 3;
  top: 54%;
  left: 50%;
  color: var(--jersey-secondary);
  font: clamp(24px, 5vw, 43px)/1 'Archivo Black', sans-serif;
  transform: translate(-50%, -50%);
}

.historical-player-photo:has(.historical-player-number, .player-number, > b)::after {
  content: "";
}

.historical-player-photo .photo-name,
.historical-player-photo .historical-player-name {
  position: absolute;
  z-index: 5;
  right: 7px;
  bottom: 7px;
  left: 7px;
  padding: 5px 6px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .11);
  border-radius: 5px;
  background: rgba(5, 7, 10, .76);
  color: white;
  font-size: 6px;
  font-weight: 900;
  letter-spacing: .6px;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---------- Lesiones ---------- */

.injury-card {
  --injury-color: var(--career-extra-danger);
  position: relative;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 14px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--injury-color) 34%, var(--career-extra-line));
  border-left: 3px solid var(--injury-color);
  border-radius: 9px;
  background:
    linear-gradient(100deg,
      color-mix(in srgb, var(--injury-color) 9%, transparent),
      transparent 44%),
    rgba(15, 18, 24, .96);
  animation: career-extra-alert-in .36s var(--career-extra-ease) both;
}

.injury-card::before,
.injury-icon,
.injury-mark {
  content: "+";
  display: grid;
  grid-column: 1;
  grid-row: 1;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid color-mix(in srgb, var(--injury-color) 35%, transparent);
  border-radius: 8px;
  background: color-mix(in srgb, var(--injury-color) 8%, transparent);
  color: var(--injury-color);
  font: 22px/1 'Archivo Black', sans-serif;
}

.injury-card:has(:is(.injury-icon, .injury-mark))::before {
  display: none;
}

.injury-card > div:not(.injury-icon, .injury-mark),
.injury-card .injury-copy {
  grid-column: 2;
  min-width: 0;
}

.injury-card > :is(.injury-icon, .injury-mark) {
  grid-column: 1;
}

.injury-card small,
.injury-card .injury-severity {
  color: color-mix(in srgb, var(--injury-color) 76%, white);
  font-size: 7px;
  font-weight: 900;
  letter-spacing: .9px;
  text-transform: uppercase;
}

.injury-card h3,
.injury-card h4 {
  margin: 3px 0 4px;
  color: var(--career-extra-text);
  font: 14px 'Archivo Black', sans-serif;
}

.injury-card p {
  margin: 0;
  color: var(--career-extra-muted);
  font-size: 9px;
  line-height: 1.45;
}

.injury-card .injury-duration,
.injury-card > strong {
  grid-column: 3;
  padding: 6px 8px;
  border: 1px solid color-mix(in srgb, var(--injury-color) 26%, transparent);
  border-radius: 7px;
  color: var(--injury-color);
  font-size: 8px;
  text-align: center;
  white-space: nowrap;
}

.injury-card .injury-progress {
  grid-column: 2 / -1;
  height: 4px;
  overflow: hidden;
  border-radius: 99px;
  background: rgba(255, 255, 255, .08);
}

.injury-card .injury-progress > i,
.injury-card .injury-progress > span {
  display: block;
  width: var(--injury-progress, 50%);
  height: 100%;
  border-radius: inherit;
  background: var(--injury-color);
}

.event-card.injury-event,
.injury-event.event-card,
.injury-event .event-card {
  border-top-color: var(--career-extra-danger) !important;
}

.event-card.injury-event .event-image,
.injury-event.event-card .event-image,
.injury-event .event-card .event-image {
  background:
    radial-gradient(circle at 50% 120%, rgba(255, 111, 104, .17), transparent 58%),
    linear-gradient(145deg, #201619, #0d1016) !important;
}

.event-card.injury-event .event-type,
.injury-event.event-card .event-type,
.injury-event .event-card .event-type {
  color: #ff8c86 !important;
}

#careerScreen .injury-event :is(.decision, .injury-option) {
  --rarity-color: var(--career-extra-danger);
}

#careerScreen .injury-event :is(.decision, .injury-option):hover,
#careerScreen .injury-event :is(.decision, .injury-option):focus-visible {
  border-color: rgba(255, 111, 104, .48);
  background: rgba(255, 111, 104, .055);
}

/* ---------- Mercado, renovacion y rechazo ---------- */

.transfer-alert {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 13px 14px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--team-primary, #ff6333) 30%, var(--career-extra-line));
  border-left: 3px solid var(--team-primary, #ff6333);
  border-radius: 9px;
  background:
    linear-gradient(100deg,
      color-mix(in srgb, var(--team-primary, #ff6333) 8%, transparent),
      transparent 46%),
    rgba(15, 18, 24, .96);
  animation: career-extra-alert-in .36s var(--career-extra-ease) both;
}

.transfer-alert::before {
  content: "↗";
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid color-mix(in srgb, var(--team-primary, #ff6333) 32%, transparent);
  border-radius: 8px;
  background: color-mix(in srgb, var(--team-primary, #ff6333) 8%, transparent);
  color: color-mix(in srgb, var(--team-primary, #ff6333) 72%, white);
  font-size: 16px;
  font-weight: 900;
}

.transfer-alert:has(.transfer-alert-icon)::before {
  display: none;
}

.transfer-alert-icon,
.transfer-alert > img {
  width: 38px;
  height: 38px;
  object-fit: contain;
}

.transfer-alert .transfer-copy,
.transfer-alert > div:not(.transfer-alert-icon, .transfer-actions) {
  min-width: 0;
}

.transfer-alert small {
  color: color-mix(in srgb, var(--team-secondary, #cfff47) 72%, white);
  font-size: 7px;
  font-weight: 900;
  letter-spacing: .9px;
  text-transform: uppercase;
}

.transfer-alert h3,
.transfer-alert h4 {
  margin: 3px 0;
  color: var(--career-extra-text);
  font: 14px 'Archivo Black', sans-serif;
}

.transfer-alert p {
  margin: 0;
  color: var(--career-extra-muted);
  font-size: 9px;
  line-height: 1.4;
}

.transfer-alert .transfer-actions,
.transfer-options {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}

:is(.transfer-alert, .transfer-options, .decisions) :is(.renewal, [data-transfer-action="renewal"]),
.decision.renewal {
  --transfer-option-color: var(--career-extra-success);
  border-color: color-mix(in srgb, var(--career-extra-success) 38%, var(--career-extra-line));
  border-left-color: var(--career-extra-success);
  background: color-mix(in srgb, var(--career-extra-success) 6%, transparent);
}

:is(.transfer-alert, .transfer-options, .decisions) :is(.reject, [data-transfer-action="reject"]),
.decision.reject {
  --transfer-option-color: #ff8a72;
  border-color: color-mix(in srgb, #ff8a72 30%, var(--career-extra-line));
  border-left-color: #ff8a72;
  background: rgba(255, 138, 114, .035);
}

:is(.transfer-alert, .transfer-options) :is(.renewal, .reject, [data-transfer-action]) {
  min-height: 34px;
  padding: 7px 10px;
  border-width: 1px;
  border-style: solid;
  border-radius: 7px;
  color: color-mix(in srgb, var(--transfer-option-color) 74%, white);
  font: 800 7px 'DM Sans', sans-serif;
  letter-spacing: .65px;
  cursor: pointer;
  transition: filter .18s ease, transform .18s ease;
}

:is(.transfer-alert, .transfer-options) :is(.renewal, .reject, [data-transfer-action]):hover,
:is(.transfer-alert, .transfer-options) :is(.renewal, .reject, [data-transfer-action]):focus-visible {
  filter: brightness(1.16);
  transform: translateY(-1px);
  outline: none;
}

.transfer-alert.rival,
.transfer-alert.is-rival,
.transfer-alert[data-rivalry="true"] {
  border-color: rgba(255, 111, 104, .34);
  border-left-color: var(--career-extra-danger);
  background:
    linear-gradient(100deg, rgba(255, 111, 104, .08), transparent 46%),
    rgba(15, 18, 24, .96);
}

/* El motor usa transfer-alert como modificador del event-card. */
#careerScreen .event-card.transfer-alert {
  display: block;
  grid-template-columns: none;
  gap: 0;
  padding: 0;
  border-left-width: 1px;
  border-left-color: var(--career-extra-line);
  border-top: 2px solid var(--team-primary, #ff6333);
  background: rgba(15, 18, 24, .96);
}

#careerScreen .event-card.transfer-alert::before {
  display: none;
}

#careerScreen .event-card.transfer-alert .event-image {
  background:
    radial-gradient(circle at 50% 120%,
      color-mix(in srgb, var(--team-primary, #ff6333) 18%, transparent),
      transparent 58%),
    linear-gradient(145deg, #171b23, #0d1016);
}

#careerScreen .event-card.transfer-alert .event-type {
  color: color-mix(in srgb, var(--team-primary, #ff6333) 76%, white);
}

#careerScreen .decision.transfer-option.renewal-choice,
#careerScreen .decision.renewal-choice {
  --rarity-color: var(--career-extra-success);
  border-color: color-mix(in srgb, var(--career-extra-success) 38%, var(--career-extra-line));
  border-left-color: var(--career-extra-success);
  background: color-mix(in srgb, var(--career-extra-success) 6%, transparent);
}

#careerScreen .decision.transfer-option.reject-choice,
#careerScreen .decision.reject-choice {
  --rarity-color: #ff8a72;
  border-color: color-mix(in srgb, #ff8a72 30%, var(--career-extra-line));
  border-left-color: #ff8a72;
  background: rgba(255, 138, 114, .035);
}

#careerScreen .renewal-choice .idol-impact.positive {
  color: var(--career-extra-success) !important;
}

#careerScreen .reject-choice em {
  display: block;
  margin-top: 4px;
  color: var(--career-extra-muted);
  font-size: 7px;
  font-style: normal;
  letter-spacing: .75px;
}

/* ---------- Movimiento ---------- */

@keyframes career-extra-card-in {
  from { opacity: 0; transform: translateY(10px) scale(.992); }
  to { opacity: 1; transform: none; }
}

@keyframes career-extra-trophy-in {
  from { opacity: 0; transform: translateY(14px) scale(.9); filter: blur(3px); }
  to { opacity: 1; transform: none; filter: drop-shadow(0 18px 24px rgba(0, 0, 0, .38)); }
}

@keyframes career-extra-row-in {
  from { opacity: 0; transform: translateY(5px); }
  to { opacity: 1; transform: none; }
}

@keyframes career-extra-alert-in {
  from { opacity: 0; transform: translateX(12px); }
  to { opacity: 1; transform: none; }
}

/* ---------- Responsive ---------- */

@media (max-width: 760px) {
  .champion-showcase > header,
  .champion-showcase .champion-heading {
    display: grid;
    align-items: start;
  }

  .champion-card {
    grid-template-columns: 100px minmax(0, 1fr);
    min-height: 180px;
  }

  .champion-card > img,
  .champion-card .champion-trophy,
  .champion-card .trophy-image,
  .champion-card [data-trophy-image] {
    width: 100px;
    height: 125px;
  }

  .final-season-log {
    overflow: visible;
    border: 0;
    background: transparent;
  }

  .final-season-log .season-log-scroll {
    display: grid;
    gap: 7px;
    overflow: visible;
  }

  .season-log-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    min-width: 0;
    padding: 10px;
    border: 1px solid var(--career-extra-line);
    border-radius: 8px;
    background: rgba(15, 18, 24, .96);
  }

  .season-log-row.is-header,
  .season-log-row.header,
  .season-log-row[role="rowheader"] {
    display: none;
  }

  .season-log-row > * {
    padding: 7px;
    border-right: 0;
    white-space: normal;
  }

  .season-log-row > [data-label]::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 3px;
    color: #656c77;
    font-size: 5px;
    font-weight: 900;
    letter-spacing: .65px;
    text-transform: uppercase;
  }

  .final-season-log > .season-log-row {
    grid-template-columns: 1fr;
    padding: 0;
  }

  .final-season-log > .season-log-row > header,
  .final-season-log > .season-log-row > .season-log-stats,
  .final-season-log > .season-log-row > p,
  .final-season-log > .season-log-row > .season-log-awards {
    grid-column: 1;
  }

  .final-season-log > .season-log-row > header {
    border-right: 0;
    border-bottom: 1px solid var(--career-extra-line-soft);
  }

  .final-season-log > .season-log-row > .season-log-stats {
    border-right: 0;
  }

  .final-season-log > .season-log-row > p {
    padding-block: 8px;
    border-top: 1px solid var(--career-extra-line-soft);
  }

  .season-log-awards {
    grid-column: 1 / -1;
  }

  .injury-card,
  .transfer-alert {
    grid-template-columns: 38px minmax(0, 1fr);
  }

  .injury-card .injury-duration,
  .injury-card > strong,
  .injury-card .injury-progress,
  .transfer-alert .transfer-actions,
  .transfer-options {
    grid-column: 1 / -1;
    justify-content: flex-start;
  }
}

@media (max-width: 520px) {
  .champion-showcase {
    padding: 12px;
  }

  .champion-card {
    grid-template-columns: 1fr;
    gap: 8px;
    min-height: 0;
    text-align: center;
  }

  .champion-card > img,
  .champion-card .champion-trophy,
  .champion-card .trophy-image,
  .champion-card [data-trophy-image],
  .champion-card .champion-copy,
  .champion-card .champion-details,
  .champion-card > div:not(.champion-trophy, .trophy-image) {
    grid-column: 1;
    grid-row: auto;
  }

  .champion-card > img,
  .champion-card .champion-trophy,
  .champion-card .trophy-image,
  .champion-card [data-trophy-image] {
    width: 88px;
    height: 105px;
  }

  .champion-card p {
    margin-inline: auto;
  }

  .champion-card .champion-meta,
  .champion-card .champion-stats {
    justify-content: center;
  }

  .final-season-log > header,
  .final-season-log .season-log-heading {
    align-items: flex-start;
  }

  .season-log-row {
    grid-template-columns: 1fr 1fr;
  }

  .historical-player-photo {
    width: 112px;
  }

  .injury-card,
  .transfer-alert {
    padding: 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .champion-card,
  .champion-card > img,
  .champion-card .champion-trophy,
  .champion-card .trophy-image,
  .champion-card [data-trophy-image],
  .season-log-row,
  .injury-card,
  .transfer-alert {
    animation: none !important;
  }

  .champion-tab,
  :is(.transfer-alert, .transfer-options) :is(.renewal, .reject, [data-transfer-action]) {
    transition: none;
  }
}