/* V56 · Mega Experiência do Rachão
   Camada incremental: preserva V55 e adiciona Craque, Clássico, comparação,
   conquistas, destaques mensais e compartilhamento PNG. */

.craque-home-card,
.classic-panel,
.monthly-highlights,
.player-compare-panel,
.craque-ranking-hero,
.achievement-panel {
  border: 1px solid var(--border, #dbe5ea);
  background: var(--surface, #fff);
  box-shadow: 0 10px 28px rgba(20, 52, 70, .07);
}

.craque-home-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  margin: 16px 0;
  padding: 16px;
  border-radius: 18px;
  position: relative;
  overflow: hidden;
}

.craque-home-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 5px;
  background: linear-gradient(180deg, #0f6eac 0 50%, #bf2c3d 50%);
}

.craque-home-card.open {
  background: linear-gradient(115deg, rgba(15,110,172,.07), #fff 47%, rgba(191,44,61,.045));
}

.craque-home-card.winner {
  background: linear-gradient(120deg, #fff9e9, #fff 46%, #f5f9fb);
  border-color: #e9d59a;
}

.craque-home-icon {
  width: 50px;
  height: 50px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: #fff3c8;
  border: 1px solid #ead18a;
}

.craque-home-icon .icon { width: 27px; height: 27px; }
.craque-home-card small {
  color: #657a86;
  font-weight: 800;
  letter-spacing: .055em;
}
.craque-home-card h2 { margin: 3px 0 2px; font-size: 18px; line-height: 1.15; }
.craque-home-card p { margin: 0; color: #657985; font-size: 13px; }
.craque-home-winner { display: flex; align-items: center; position: relative; min-width: 74px; }
.craque-home-winner .avatar { border: 3px solid #fff; box-shadow: 0 5px 14px rgba(18,50,67,.16); }
.craque-mini-crest { width: 42px; height: 42px; margin-right: -10px; z-index: 1; filter: drop-shadow(0 3px 6px rgba(0,0,0,.14)); }

.classic-panel {
  border-radius: 20px;
  margin: 16px 0;
  padding: 18px;
  overflow: hidden;
  position: relative;
}
.classic-panel::after {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 4px;
  background: linear-gradient(90deg, #0b69ad 0 48%, #d9e3e8 48% 52%, #bd293c 52%);
}
.classic-panel > header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
}
.classic-panel h2 { margin: 2px 0 3px; font-size: 20px; }
.classic-panel header p { margin: 0; font-size: 13px; color: #677c87; }
.classic-games {
  min-width: 66px;
  text-align: center;
  padding: 8px 10px;
  border-radius: 13px;
  background: #f3f7f9;
}
.classic-games b { display: block; font-size: 21px; line-height: 1; }
.classic-games small { font-size: 10px; color: #70828b; text-transform: uppercase; font-weight: 800; }

.classic-scoreboard {
  display: grid;
  grid-template-columns: 1fr minmax(110px, .75fr) 1fr;
  gap: 10px;
  align-items: stretch;
}
.classic-team,
.classic-draw {
  min-height: 116px;
  border-radius: 16px;
  border: 1px solid #e0e8ec;
  background: #f8fafb;
  display: flex;
  align-items: center;
  justify-content: center;
}
.classic-team { gap: 8px; padding: 10px; }
.classic-team span { display: flex; flex-direction: column; min-width: 0; }
.classic-team small { font-size: 10px; font-weight: 900; letter-spacing: .065em; }
.classic-team b { font-size: 36px; line-height: 1; margin: 3px 0; }
.classic-team em { font-style: normal; font-size: 11px; color: #6c7f89; }
.classic-team.estrelas { color: #0a66a8; background: #f2f8fc; border-color: #cfe4f1; }
.classic-team.refugos { color: #b5283b; background: #fff5f6; border-color: #f0d5da; text-align: right; }
.classic-crest { width: 64px; height: 64px; object-fit: contain; flex: 0 0 auto; filter: drop-shadow(0 4px 8px rgba(20,45,60,.13)); }
.classic-draw { flex-direction: column; }
.classic-draw b { font-size: 26px; }
.classic-draw small { font-size: 10px; text-transform: uppercase; font-weight: 900; color: #6e8089; }
.classic-draw span { margin-top: 5px; font-size: 11px; color: #637681; }

.classic-meta {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 10px;
}
.classic-meta > span {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  column-gap: 9px;
  padding: 10px 12px;
  border-radius: 13px;
  background: #f5f8fa;
}
.classic-meta .icon { grid-row: 1 / 3; width: 20px; height: 20px; align-self: center; }
.classic-meta small { font-size: 10px; color: #6d7f89; text-transform: uppercase; font-weight: 800; }
.classic-meta b { font-size: 12px; }
.classic-recent { margin-top: 13px; }
.classic-recent > small { font-weight: 800; color: #6c7e88; text-transform: uppercase; font-size: 10px; }
.classic-recent > div { display: flex; gap: 7px; overflow-x: auto; padding-top: 7px; scrollbar-width: none; }
.classic-recent span {
  min-width: 92px;
  padding: 7px 9px;
  border: 1px solid #e0e8ec;
  border-radius: 11px;
  background: #fff;
}
.classic-recent span b, .classic-recent span small { display: block; }
.classic-recent span b { font-size: 14px; }
.classic-recent span small { font-size: 9px; color: #758791; margin-top: 2px; }

.monthly-highlights {
  margin: 16px 0;
  border-radius: 18px;
  padding: 16px;
}
.monthly-highlights header { margin-bottom: 9px; }
.monthly-highlights h2 { margin: 2px 0 0; font-size: 18px; }
.monthly-highlights > div { display: grid; gap: 7px; }
.monthly-highlights button {
  appearance: none;
  border: 1px solid #e1e8ec;
  background: #fafcfd;
  border-radius: 13px;
  min-height: 58px;
  padding: 7px 10px;
  display: grid;
  grid-template-columns: 28px auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  text-align: left;
  color: inherit;
}
.monthly-highlights button > strong { color: #82929a; font-size: 12px; }
.monthly-highlights button span { min-width: 0; }
.monthly-highlights button span b, .monthly-highlights button span small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.monthly-highlights button span small { color: #6f818b; font-size: 10px; margin-top: 2px; }
.monthly-highlights button em { font-style: normal; font-weight: 900; font-size: 14px; color: #0f6eac; }

.player-compare-panel {
  margin: 0 0 13px;
  border-radius: 16px;
  overflow: hidden;
}
.player-compare-panel > summary {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 15px;
  cursor: pointer;
}
.player-compare-panel > summary::-webkit-details-marker { display: none; }
.player-compare-panel > summary .icon { width: 23px; height: 23px; }
.player-compare-panel > summary span b,
.player-compare-panel > summary span small { display: block; }
.player-compare-panel > summary span small { color: #71838c; font-size: 11px; margin-top: 2px; }
.player-compare-panel[open] > summary { border-bottom: 1px solid #e3eaed; }
/* Comparação: escudos lado a lado; números em linhas de largura integral. */
.compare-selectors { display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:end;gap:9px;padding:13px 13px 10px; }
.compare-select-field {min-width:0;display:grid;gap:4px;}
.compare-select-field > span {color:#4c6577;font-size:12px;font-weight:800;}
.compare-selectors select {min-width:0;width:100%;min-height:44px;font-size:14px;}
.compare-selectors > span {color:#668294;font-weight:900;padding-bottom:10px;}
#playerCompareResult {padding:0 13px 13px;min-width:0;}
.compare-result {display:grid;grid-template-columns:minmax(0,1fr);gap:11px;min-width:0;}
.compare-duel {display:grid;grid-template-columns:minmax(0,1fr) 34px minmax(0,1fr);gap:6px;align-items:stretch;min-width:0;position:relative;border:1px solid #cfdfed;border-radius:16px;padding:11px 7px;background:#f5f9ff url('/images/theme-v81/compare-rail.png') center top / 100% 34px no-repeat;}
.compare-person {display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:7px;min-width:0;padding:10px 4px 6px;text-align:center;border:1px solid #d3e3f3;border-radius:13px;background:linear-gradient(155deg,#fff,#f1f7ff);}
.compare-person.team-refugos {border-color:#ead0d6;background:linear-gradient(155deg,#fff,#fff3f5);}
.compare-person-portrait .avatar {width:55px;height:55px;border-radius:15px;}
.compare-person-info {min-width:0;width:100%;display:grid;justify-items:center;gap:4px;}
.compare-person-info > b {max-width:100%;font-size:14px;line-height:1.24;overflow-wrap:anywhere;color:#1d3955;}
.compare-person-rank {display:inline-flex;align-items:center;justify-content:center;gap:4px;min-width:0;max-width:100%;color:#3e6078;font-size:11px;line-height:1.24;font-weight:850;white-space:normal;}
.compare-person-rank .rank-emblem {width:23px;height:23px;flex:none;}
.compare-person .player-team-chip {max-width:100%;font-size:11px;}
.compare-vs {align-self:center;text-align:center;font-size:13px;font-weight:950;color:#a0711d;letter-spacing:.02em;}
.compare-metrics {display:grid;gap:0;min-width:0;border:1px solid #dce7f0;border-radius:13px;overflow:hidden;background:#fff;}
.compare-metrics > div {display:grid;grid-template-columns:minmax(0,1fr) minmax(112px,1.32fr) minmax(0,1fr);align-items:center;gap:6px;min-height:43px;padding:7px 8px;border-bottom:1px solid #e6edf4;}
.compare-metrics > div:last-child {border-bottom:0;}
.compare-metrics > .compare-metrics-head {min-height:34px;background:#f0f6fc;}
.compare-metrics-head span {font-size:10px;font-weight:850;color:#536c80;text-align:center;overflow-wrap:anywhere;}
.compare-metrics b {font-size:15px;text-align:center;color:#174b80;font-weight:900;min-width:0;overflow-wrap:anywhere;}
.compare-metrics b:last-child {color:#b62d46;}
.compare-metrics small {font-size:11.5px;text-align:center;line-height:1.3;color:#445e70;text-transform:none;font-weight:800;min-width:0;overflow-wrap:normal;}

.craque-vote-box { padding-bottom: 4px; }
.craque-vote-box > header { text-align: center; padding: 4px 0 13px; }
.craque-vote-box > header h2 { margin: 4px 0 2px; font-size: 22px; }
.craque-vote-box > header p { margin: 0; color: #6e818b; font-size: 12px; }
.craque-box-brand { display: flex; justify-content: center; align-items: center; gap: 10px; margin-bottom: 7px; }
.craque-box-brand > .icon { width: 32px; height: 32px; }
.craque-box-crest { width: 54px; height: 54px; object-fit: contain; filter: drop-shadow(0 4px 8px rgba(20,50,65,.16)); }
.craque-box-note {
  border: 1px solid #dbe6eb;
  background: #f6fafc;
  border-radius: 12px;
  padding: 9px 11px;
  font-size: 11px;
  color: #58707d;
  margin-bottom: 10px;
}
.craque-candidates { display: grid; gap: 7px; }
.craque-candidate {
  appearance: none;
  width: 100%;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  min-height: 76px;
  padding: 8px 10px;
  border: 1px solid #dfe7eb;
  border-radius: 14px;
  background: #fff;
  color: inherit;
  text-align: left;
  position: relative;
  overflow: hidden;
}
.craque-candidate::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: #b8c7cf; }
.craque-candidate.team-estrelas::before { background: #0c69ad; }
.craque-candidate.team-refugos::before { background: #bd293d; }
.craque-candidate.selected { border-color: #c6ad59; box-shadow: inset 0 0 0 1px #e7cf80; background: #fffbed; }
.craque-candidate:disabled { opacity: 1; cursor: default; }
.craque-candidate-photo { position: relative; display: inline-flex; }
/* V84: o avatar já contém um único brasão dinâmico do time, sem segunda camada. */
.craque-candidate-photo { flex: 0 0 50px; min-width: 0; align-items: center; justify-content: center; }
.craque-candidate-photo .avatar { isolation: isolate; overflow: hidden; }
.craque-candidate-photo .avatar img.team-affiliation-icon { z-index: 4; inset: auto 1px 1px auto; width: 19px; height: 19px; object-fit: contain; border: 1px solid white; border-radius: 6px; }
.craque-candidate-copy { overflow-wrap: anywhere; }
.craque-candidate-copy b { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.23; }
.craque-candidate-copy small { font-size: 11px; line-height: 1.3; }
.craque-candidate-copy em { font-size: 10.5px; line-height: 1.25; }
.craque-candidate-votes { align-self:center; font-variant-numeric:tabular-nums; }
@media(max-width:390px) {
  .craque-candidate { grid-template-columns: 50px minmax(0,1fr) 40px; gap: 7px; padding: 8px 8px 8px 10px; }
  .craque-candidate-photo { flex-basis: 50px; }
  .craque-candidate-copy .rank-emblem { width: 19px; height: 19px; flex-shrink: 0; }
  .craque-candidate-votes b { font-size: 18px; }
}
.craque-candidate-copy { min-width: 0; }
.craque-candidate-copy b, .craque-candidate-copy small, .craque-candidate-copy em { display: block; }
.craque-candidate-copy b { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.craque-candidate-copy small { color: #687d88; font-size: 10px; margin: 2px 0 3px; }
.craque-candidate-copy em { font-style: normal; color: #536a76; font-size: 10px; display: flex; align-items: center; gap: 5px; }
.craque-candidate-copy .rank-emblem { width: 22px; height: 22px; }
.craque-candidate-votes { text-align: center; min-width: 44px; }
.craque-candidate-votes b, .craque-candidate-votes small, .craque-candidate-votes em { display: block; }
.craque-candidate-votes b { font-size: 19px; }
.craque-candidate-votes small { color: #788a93; font-size: 9px; }
.craque-candidate-votes em { font-style: normal; font-size: 8px; font-weight: 900; color: #8a6f16; margin-top: 2px; text-transform: uppercase; }
.craque-winner-box {
  display: flex;
  gap: 11px;
  align-items: center;
  margin-bottom: 12px;
  padding: 12px;
  border: 1px solid #ead89f;
  border-radius: 15px;
  background: linear-gradient(110deg,#fff8dc,#fff);
}
.craque-winner-box > span { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 12px; background: #fff1b4; }
.craque-winner-box h2 { margin: 2px 0; font-size: 17px; }
.craque-winner-box p { margin: 0; font-size: 10px; color: #7a704c; }

.craque-ranking-hero {
  display: flex;
  align-items: center;
  gap: 12px;
  border-radius: 18px;
  padding: 16px;
  margin-bottom: 12px;
  background: linear-gradient(120deg,#fff9e5,#fff);
  border-color: #ead89b;
}
.craque-ranking-hero > span { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: #fff0b2; }
.craque-ranking-hero h2 { margin: 2px 0; font-size: 18px; }
.craque-ranking-hero p { margin: 0; color: #6c7e87; font-size: 11px; }
.craque-ranking-list, .craque-game-list { display: grid; gap: 7px; }
.craque-ranking-list > button,
.craque-game-list > button {
  appearance: none; color: inherit; text-align: left; background: #fff;
  border: 1px solid #dee7eb; border-radius: 14px; min-height: 64px; padding: 8px 10px;
}
.craque-ranking-list > button {
  display: grid; grid-template-columns: 30px auto minmax(0,1fr) auto; gap: 8px; align-items: center;
}
.craque-ranking-list > button > strong { color: #7b8d95; }
.craque-ranking-list > button > span { min-width: 0; }
.craque-ranking-list > button > span > b { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.craque-ranking-list > button > span > small { display: flex; align-items: center; gap: 4px; margin-top: 2px; color: #75868e; font-size: 9px; }
.craque-ranking-list > button > em { font-style: normal; font-size: 22px; font-weight: 900; color: #9b7b18; text-align: center; }
.craque-ranking-list > button > em small { display: block; font-size: 8px; text-transform: uppercase; }
.craque-game-list > button { display: grid; grid-template-columns: auto minmax(0,1fr); gap: 8px 10px; align-items: center; }
.craque-game-list > button > strong { grid-column: 1 / -1; font-size: 11px; color: #586f7a; }
.craque-game-status { padding: 5px 8px; border-radius: 999px; font-size: 9px; font-weight: 900; text-transform: uppercase; }
.craque-game-status.open { color: #17633d; background: #e8f7ef; }
.craque-game-status.closed { color: #6e7880; background: #edf1f3; }

.achievement-panel {
  margin-top: 14px;
  border-radius: 16px;
  padding: 14px;
}
.achievement-grid {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:10px;}
.achievement-grid details {min-width:0;border:1px solid #dbe6f0;border-radius:13px;background:#fbfdff;overflow:hidden;}
.achievement-grid summary {min-height:79px;list-style:none;cursor:pointer;display:grid;justify-items:center;align-content:center;gap:6px;padding:8px 5px;text-align:center;}
.achievement-grid summary::-webkit-details-marker {display:none;}
.achievement-grid summary > span {width:36px;height:36px;display:grid;place-items:center;border-radius:10px;background:#fff3d9;}
.achievement-grid summary .icon {width:22px;height:22px;}
.achievement-grid summary b {font-size:12px;color:#243f56;line-height:1.2;overflow-wrap:anywhere;}
.achievement-grid details > small {display:block;border-top:1px solid #e2eaf2;padding:9px;font-size:11.5px;line-height:1.45;color:#566f80;}
.achievement-grid details[open] {border-color:#c8a55f;background:#fffefa;}
.achievement-grid summary:focus-visible {outline:3px solid #287ad1;outline-offset:-3px;}
.achievement-empty { margin-top: 10px; padding: 12px; border-radius: 12px; background: #f5f8f9; color: #72848d; font-size: 11px; }
/* Perfil: quatro seções acessíveis, preservando estatísticas e histórico. */
.player-profile-tabs {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px;padding:5px;border:1px solid #d7e5f0;border-radius:14px;background:linear-gradient(160deg,#edf5fe,#f7fbff);position:sticky;top:0;z-index:3;}
.player-profile-tabs > button {position:relative;min-width:0;min-height:44px;border:1px solid transparent;border-radius:10px;background:transparent;color:#42647d;font-family:inherit;font-size:12px;font-weight:850;cursor:pointer;}
.player-profile-tabs > button.is-active,.player-profile-tabs > button[aria-selected="true"] {border-color:#abcdea;background:#fff;color:#1764b4;box-shadow:0 2px 6px rgba(24,74,119,.075);}
.player-profile-tabs > button.is-active::after {content:'';position:absolute;bottom:1px;left:14%;right:14%;height:6px;background:url('/images/theme-v73/profile-active-trim.png') center / 100% 100% no-repeat;pointer-events:none;}
.player-profile-tabs > button:focus-visible {outline:3px solid #2f85c7;outline-offset:-2px;}
.player-profile-panel[hidden] {display:none !important;}
.player-profile-panel {min-width:0;display:grid;gap:10px;}
.profile-overview-stats {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;}
.profile-overview-stats > span {display:grid;align-content:center;gap:3px;text-align:center;padding:9px 4px;border:1px solid #dbe8f2;border-radius:12px;background:#f5f9fd;min-width:0;}
.profile-overview-stats small {font-size:11px;line-height:1.3;color:#5a7385;}
.profile-overview-stats b {font-size:20px;color:#1b527e;}
.profile-panel-intro {margin:0;color:#5b7284;font-size:12px;line-height:1.45;}
.player-profile-panel .achievement-panel,.player-profile-panel .progression-panel {margin:0;}
@media(max-width:460px) {
  .player-profile-tabs {grid-template-columns:repeat(2,minmax(0,1fr));}
  .player-profile-tabs > button {font-size:13px;}
  .compare-selectors {grid-template-columns:1fr;gap:6px;}
  .compare-selectors > span {display:none;}
  .compare-duel {padding:9px 5px;grid-template-columns:minmax(0,1fr) 24px minmax(0,1fr);gap:4px;}
  .compare-person {padding:8px 3px 6px;}
  .compare-person-portrait .avatar {width:48px;height:48px;}
  .compare-metrics > div {grid-template-columns:minmax(0,1fr) minmax(100px,1.4fr) minmax(0,1fr);gap:3px;padding-inline:5px;}
}
.profile-share-actions { margin-top: 11px; }

.result-tab.tab-craque.active {
  color: #806313;
}
.result-tab.tab-craque.active::after {
  background: #c29a2c;
}

@media (max-width: 620px) {
  .craque-home-card { grid-template-columns: auto minmax(0,1fr); }
  .craque-home-card .btn { grid-column: 1 / -1; width: 100%; }
  .classic-scoreboard { grid-template-columns: 1fr 86px 1fr; gap: 6px; }
  .classic-team { min-height: 104px; gap: 3px; padding: 7px 4px; }
  .classic-crest { width: 48px; height: 48px; }
  .classic-team b { font-size: 30px; }
  .classic-team small { font-size: 8px; }
  .classic-team em { font-size: 9px; }
  .classic-draw b { font-size: 22px; }
  .classic-draw span { font-size: 9px; text-align: center; }
  .classic-meta { grid-template-columns: 1fr; }
  .craque-candidate { grid-template-columns: auto minmax(0,1fr) 42px; padding: 8px; gap: 8px; }
  .craque-candidate-copy b { font-size: 13px; }
}

@media (max-width: 390px) {
  .classic-panel, .monthly-highlights { padding: 13px; }
  .classic-scoreboard { grid-template-columns: 1fr 72px 1fr; }
  .classic-crest { width: 40px; height: 40px; }
  .classic-team { flex-direction: column; text-align: center !important; }
  .classic-team.refugos { flex-direction: column-reverse; }
  .classic-team span { align-items: center; }
  .compare-selectors { grid-template-columns: 1fr; }
  .compare-selectors > span { display: none; }
  .craque-box-crest { width: 46px; height: 46px; }
}