/* ============================================================
   VIDA DE CRAQUE — modo carreira (usa o tema do styles.css)
   ============================================================ */

/* ---------- menu de modos ---------- */
.home-hero { padding-bottom: 40px; }
.mode-grid { display: grid; gap: 16px; grid-template-columns: 1fr 1fr; margin-top: 22px; }
@media (max-width: 620px) { .mode-grid { grid-template-columns: 1fr; } }
.mode-card {
  text-align: left; background: var(--panel);
  border: 2.5px solid var(--line); border-radius: 14px;
  padding: 20px; box-shadow: var(--shadow);
  transition: transform .06s, box-shadow .06s; display: flex; flex-direction: column; gap: 8px;
}
.mode-card:hover { transform: translateY(-2px); }
.mode-card:active { transform: translate(3px, 3px); box-shadow: 0 0 0 #000; }
.mode-card h3 { font-size: 26px; line-height: 1; }
.mode-card p { color: var(--muted); font-size: 14px; line-height: 1.4; }
.mode-tag { font-size: 11px; font-weight: 800; letter-spacing: .12em; color: var(--ink); align-self: flex-start;
  padding: 4px 9px; border-radius: 999px; }
.mode-manager .mode-tag { background: var(--gold); }
.mode-career .mode-tag { background: var(--red); color: #fff; }
.mode-go { margin-top: 6px; font-weight: 800; color: var(--gold); font-size: 14px; }
.mode-manager { border-color: var(--gold); }
.mode-career { border-color: var(--red); }

/* ---------- layout carreira ---------- */
.cr-wrap { width: min(100%, 1180px); max-width: 1180px; margin: 0 auto; padding: 0 22px 60px; }
.cr-top {
  position: sticky; top: 0; z-index: 20; background: rgba(16,18,22,.94); backdrop-filter: blur(6px);
  border-bottom: 2px solid var(--line-soft); padding: 10px 14px; margin-bottom: 14px;
}
.cr-top-inner { max-width: 1180px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.header-action { white-space: nowrap; }
.header-action.danger { color: #ff8269; }
@media (max-width: 720px) { .header-action { font-size: 0; width: 38px; height: 38px; padding: 0; } .header-action::first-letter { font-size: 17px; } }
.cr-id { display: flex; align-items: center; gap: 10px; min-width: 0; }
.cr-avatar { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center;
  font-family: Impact, sans-serif; font-size: 18px; color: #fff; border: 2px solid var(--line); flex: none; }
.cr-id .nm { font-weight: 800; line-height: 1.05; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cr-id .sub { font-size: 12px; color: var(--muted); }
.cr-ovr { text-align: center; flex: none; }
.cr-ovr .n { font-family: Impact, sans-serif; font-size: 30px; line-height: 1; color: var(--gold); }
.cr-ovr .l { font-size: 10px; color: var(--muted); letter-spacing: .1em; }

/* barras de vitalidade */
.vitals { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin-bottom: 14px; }
@media (max-width: 560px) { .vitals { grid-template-columns: repeat(5, 1fr); gap: 5px; } }
.vital { background: var(--panel); border: 2px solid var(--line-soft); border-radius: 10px; padding: 8px 7px; }
.vital .vl { font-size: 10px; color: var(--muted); letter-spacing: .04em; display: flex; justify-content: space-between; gap: 3px; }
.vital .vv { font-weight: 800; }
.vital .bar { height: 7px; border-radius: 999px; background: #000; margin-top: 6px; overflow: hidden; }
.vital .bar > i { display: block; height: 100%; border-radius: 999px; transition: width .35s; }
.vital.good .bar > i { background: linear-gradient(90deg, #2c9350, #37c46a); }
.vital.warn .bar > i { background: linear-gradient(90deg, #d99a2b, #f0c458); }
.vital.crit .bar > i { background: linear-gradient(90deg, #cf3c20, #ef4b2b); }

.cr-money { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.cr-chip { background: var(--panel-2); border-radius: 999px; padding: 6px 12px; font-size: 13px; font-weight: 700; }
.cr-chip b { color: var(--gold); }

/* cabeçalho do dia */
.day-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 6px; }
.day-head h2 { font-size: 26px; }
.day-head .date { color: var(--muted); font-size: 13px; font-weight: 700; }

/* cartão de momento */
.moment { background: var(--panel); border: 2.5px solid var(--line-soft); border-radius: 14px; padding: 14px; margin-bottom: 12px; }
.moment-visual { width: 64px; height: 64px; display: grid; place-items: center; float: right; margin: 0 0 8px 14px; border-radius: 14px; font-size: 34px; background: radial-gradient(circle at 35% 30%, #394052, #20242e); border: 1px solid var(--line-soft); }
.choice-flow { margin-bottom: 14px; }
.choice-progress { position: relative; overflow: hidden; display: flex; justify-content: space-between; margin-bottom: 9px; padding: 8px 12px; border-radius: 999px; background: var(--panel); color: var(--muted); font-size: 12px; font-weight: 800; }
.choice-progress i { position: absolute; left: 0; bottom: 0; height: 3px; background: var(--gold); transition: width .25s; }
.choice-feedback { clear: both; display: grid; gap: 3px; margin-top: 12px; padding: 11px 13px; border-radius: 10px; border-left: 4px solid var(--gold); background: #242834; font-size: 13px; line-height: 1.35; }
.choice-feedback.good { border-color: #37c46a; }
.choice-feedback.bad { border-color: #ef6a4b; }
.choice-feedback span { color: var(--muted); }
.moment .m-time { font-size: 11px; letter-spacing: .1em; color: var(--gold); font-weight: 800; }
.moment .m-q { font-weight: 700; margin: 3px 0 11px; line-height: 1.35; }
.m-opts { display: grid; gap: 8px; }
.m-opt {
  text-align: left; background: var(--panel-2); border: 2px solid transparent; border-radius: 10px;
  padding: 11px 13px; display: flex; align-items: center; gap: 10px; transition: border-color .1s, background .1s;
}
.m-opt:hover { background: #2c313f; }
.m-opt.sel { border-color: var(--gold); background: #2c313f; }
.m-opt .tick { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--muted); flex: none; display: grid; place-items: center; }
.m-opt.sel .tick { border-color: var(--gold); background: var(--gold); }
.m-opt.sel .tick::after { content: "✓"; font-size: 11px; color: var(--ink); font-weight: 900; }
.m-opt .lbl { font-weight: 700; font-size: 14px; }
.m-opt .hint { font-size: 12px; color: var(--muted); }

/* resultado do dia */
.day-log { background: var(--panel); border: 2.5px solid var(--gold); border-radius: 14px; padding: 16px; margin-bottom: 14px; }
.day-log h3 { font-size: 20px; margin-bottom: 8px; }
.day-log ul { list-style: none; display: grid; gap: 7px; }
.day-log li { font-size: 14px; line-height: 1.35; padding-left: 22px; position: relative; }
.day-log li::before { content: attr(data-i); position: absolute; left: 0; top: 0; }
.delta-up { color: #37c46a; font-weight: 800; }
.delta-down { color: #ef6a4b; font-weight: 800; }

/* tabela / classificação */
.cr-table { width: 100%; border-collapse: collapse; font-size: 13px; background: var(--panel); border-radius: 12px; overflow: hidden; }
.cr-table th, .cr-table td { padding: 7px 8px; text-align: center; }
.cr-table th { background: var(--panel-2); color: var(--muted); font-size: 11px; letter-spacing: .05em; }
.cr-table td.club, .cr-table th.club { text-align: left; }
.cr-table tr.me { background: rgba(224,176,63,.16); }
.cr-table tr.me td { font-weight: 800; }
.cr-table .zpos { color: #37c46a; font-weight: 800; }
.cr-table .zrel { color: #ef6a4b; font-weight: 800; }
.pos-dot { display: inline-block; width: 20px; }
.table-note { color: var(--muted); font-size: 12px; margin: -6px 0 10px; }

/* próxima partida */
.next-match { background: var(--panel); border: 2.5px solid var(--line); border-radius: 14px; padding: 16px; margin-bottom: 14px; text-align: center; box-shadow: var(--shadow-sm); }
.next-match .vs { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 8px 0; }
.next-match .team { flex: 1; }
.next-match .team .cn { font-weight: 800; font-size: 15px; }
.next-match .team .cr { font-size: 12px; color: var(--muted); }
.next-match .vs .x { font-family: Impact, sans-serif; color: var(--red); font-size: 22px; }

/* ---------- minicampo / partida ---------- */
.match-stage { background: var(--panel); border: 2.5px solid var(--line); border-radius: 16px; padding: 14px; box-shadow: var(--shadow); }
.match-score { display: flex; align-items: center; justify-content: center; gap: 16px; margin-bottom: 10px; }
.match-score .sc-team { text-align: center; flex: 1; }
.match-score .sc-team .n { font-weight: 800; font-size: 14px; }
.match-score .sc-team .dot { width: 14px; height: 14px; border-radius: 50%; display: inline-block; margin-right: 5px; vertical-align: middle; border: 1px solid rgba(255,255,255,.5); }
.match-score .sc { font-family: Impact, sans-serif; font-size: 40px; line-height: 1; }
.match-score .clock { font-size: 12px; color: var(--gold); font-weight: 800; }
.field-holder { position: relative; width: 100%; }
#cr-field { width: 100%; height: auto; display: block; border-radius: 10px; background: #1f7a41; }
.narration { min-height: 46px; margin-top: 10px; background: var(--panel-2); border-radius: 10px; padding: 10px 12px; font-weight: 700; font-size: 14px; line-height: 1.35; }
.narration.goal { background: var(--red); color: #fff; animation: goalflash .5s; }
.match-feed { max-height: 230px; overflow-y: auto; list-style: none; display: grid; gap: 6px; margin-top: 8px; padding: 8px; border: 1px solid var(--line-soft); border-radius: 10px; background: #151820; }
.match-feed:empty { display: none; }
.match-feed li,.history-events li { display: grid; grid-template-columns: 42px 1fr; gap: 8px; align-items: start; padding: 7px 9px; border-radius: 8px; background: var(--panel-2); font-size: 13px; line-height: 1.35; }
.match-feed li.goal,.history-events li.goal { background: rgba(239,75,43,.2); border-left: 3px solid var(--red); }
.match-feed time,.history-events time { color: var(--gold); font-weight: 900; }
@keyframes goalflash { 0% { transform: scale(1.05); } 100% { transform: scale(1); } }
.match-controls { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 10px; margin-top: 12px; }
.match-controls .btn { width: 100%; padding-left: 8px; padding-right: 8px; }
@media (max-width:720px) { .match-controls { grid-template-columns: 1fr 1fr; } }

/* histórico de partidas */
.match-history-list { display: grid; gap: 9px; }
.history-empty { padding: 16px; color: var(--muted); text-align: center; border: 1px dashed var(--line-soft); border-radius: 12px; }
.history-game { overflow: hidden; border: 2px solid var(--line-soft); border-radius: 12px; background: var(--panel); }
.history-game.win { border-left-color: #37c46a; }
.history-game.loss { border-left-color: #ef6a4b; }
.history-game.draw { border-left-color: var(--gold); }
.history-game summary { display: flex; align-items: center; gap: 11px; padding: 11px 13px; cursor: pointer; list-style: none; }
.history-game summary::-webkit-details-marker { display:none; }
.history-game summary::after { content:"＋"; color:var(--gold); font-size:19px; }
.history-game[open] summary::after { content:"−"; }
.history-crest { width: 38px; height: 42px; }
.history-main { display: grid; gap: 2px; flex: 1; min-width: 0; }
.history-main b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.history-main small,.history-date { color: var(--muted); font-size: 11px; }
.history-date { white-space: nowrap; }
.history-details { padding: 0 13px 13px; border-top: 1px solid var(--line-soft); }
.history-facts { display: flex; flex-wrap: wrap; gap: 7px; padding: 11px 0; }
.history-facts span { padding: 6px 9px; border-radius: 999px; background: var(--panel-2); font-size: 12px; }
.history-facts .injury { color: #ff8c75; }
.history-details h4 { margin: 3px 0 8px; }
.history-events { list-style: none; display: grid; gap: 5px; max-height: 300px; overflow-y: auto; }

/* fim de temporada / ofertas */
.offer { background: var(--panel); border: 2.5px solid var(--line-soft); border-radius: 12px; padding: 13px; margin-bottom: 10px; display: flex; align-items: center; gap: 12px; }
.offer:hover { border-color: var(--gold); }
.offer .oinfo { flex: 1; min-width: 0; }
.offer .oinfo .cn { font-weight: 800; }
.offer .oinfo .od { font-size: 12px; color: var(--muted); }
.offer .osalary { color: var(--gold); font-weight: 800; text-align: right; }

/* game over */
.go-screen { text-align: center; padding: 30px 0; }
.go-screen .go-badge { font-family: Impact, sans-serif; font-size: 40px; color: var(--red); }
.stat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 18px 0; }
@media (max-width: 520px) { .stat-grid { grid-template-columns: repeat(2, 1fr); } }
.stat-grid .sb { background: var(--panel); border: 2px solid var(--line-soft); border-radius: 12px; padding: 12px; }
.stat-grid .sb .k { font-size: 11px; color: var(--muted); letter-spacing: .05em; }
.stat-grid .sb .v { font-family: Impact, sans-serif; font-size: 24px; color: var(--gold); }
.honours { display: grid; gap: 6px; margin: 14px 0; }
.honour { background: var(--panel); border-left: 4px solid var(--gold); border-radius: 8px; padding: 9px 12px; text-align: left; font-weight: 700; font-size: 14px; }

.comps-list { display: grid; gap: 6px; }
.comp-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; background: var(--panel); border: 2px solid var(--line-soft); border-radius: 10px; padding: 9px 12px; font-weight: 700; font-size: 14px; }
.comp-status { font-size: 13px; color: var(--muted); }
.comp-status.won { color: var(--gold); }
.comp-status.out { color: #ef6a4b; }

/* central de campeonatos */
.competition-buttons { display: grid; grid-template-columns: repeat(auto-fit,minmax(230px,1fr)); gap: 10px; }
.competition-button { display: flex; align-items: center; gap: 11px; min-height: 78px; padding: 12px 14px; text-align: left; border: 2px solid var(--line-soft); border-radius: 13px; background: var(--panel); transition: border-color .12s,transform .08s; }
.competition-button:hover { border-color: var(--gold); transform: translateY(-2px); }
.competition-icon { width: 44px; height: 44px; display: grid; place-items: center; flex: none; border-radius: 12px; background: var(--panel-2); font-size: 25px; }
.competition-button-copy { display: grid; gap: 3px; flex: 1; min-width: 0; }
.competition-button-copy b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.competition-button-copy small { color: var(--muted); }
.competition-open { color: var(--gold); font-size: 12px; font-weight: 900; white-space: nowrap; }
.competition-modal { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 18px; background: rgba(5,7,10,.82); backdrop-filter: blur(5px); }
.competition-modal-panel { width: min(1100px,100%); max-height: calc(100vh - 36px); overflow-y: auto; padding: 18px; border: 2px solid var(--line); border-radius: 18px; background: var(--bg); box-shadow: 8px 10px 0 #000; }
.competition-modal-head { position: sticky; top: -18px; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 14px; margin: -18px -18px 12px; padding: 16px 18px; border-bottom: 1px solid var(--line-soft); background: rgba(16,18,22,.97); }
.competition-modal-head > div { display: flex; align-items: center; gap: 11px; }
.competition-modal-head h2 { font-size: 26px; }
.competition-modal-head p { color: var(--muted); font-size: 12px; }
.competition-modal-icon { font-size: 34px; }
.modal-section-title { margin: 18px 0 9px; font-size: 20px; }
.cup-stages,.competition-match-list { display: grid; gap: 8px; }
.cup-stage,.competition-match { display: flex; align-items: center; gap: 11px; min-height: 62px; padding: 10px 12px; border: 1px solid var(--line-soft); border-radius: 11px; background: var(--panel); }
.cup-stage.current { border-color: var(--gold); background: rgba(224,176,63,.1); }
.cup-stage-number { width: 30px; height: 30px; display: grid; place-items: center; flex: none; border-radius: 50%; background: var(--panel-2); color: var(--gold); font-weight: 900; }
.cup-stage-copy,.competition-match-main { display: grid; gap: 3px; flex: 1; min-width: 0; }
.cup-stage-copy small,.competition-match-main small { color: var(--muted); }
.cup-stage-state,.competition-match-extra { color: var(--gold); font-size: 12px; font-weight: 800; white-space: nowrap; }
.competition-match.upcoming { border-style: dashed; }
.match-status-tag { min-width: 78px; color: var(--muted); font-size: 10px; font-weight: 900; letter-spacing: .06em; }
.competition-match.played .match-status-tag { color: #37c46a; }
@media (max-width:620px) {
  .competition-modal { padding:0; }
  .competition-modal-panel { min-height:100vh; max-height:100vh; border:0; border-radius:0; padding:14px; }
  .competition-modal-head { top:-14px; margin:-14px -14px 10px; padding:13px 14px; }
  .competition-modal-head p,.competition-match-extra,.cup-stage-state { display:none; }
  .competition-modal-head h2 { font-size:20px; }
  .match-status-tag { min-width:62px; }
}

.cr-section-title { font-size: 20px; margin: 18px 0 10px; }
.cr-back { margin-bottom: 10px; }
.pill-btn { background: var(--panel-2); border: 2px solid var(--line-soft); border-radius: 999px; padding: 7px 14px; font-weight: 700; font-size: 13px; }
.pill-btn:hover { border-color: var(--gold); }

/* seleção de criação */
.create-field { margin-bottom: 12px; }
.create-field label { display: block; font-size: 12px; color: var(--muted); font-weight: 700; margin-bottom: 5px; letter-spacing: .04em; }

/* ---------- criação: identidade ---------- */
.identity-wrap { padding-top: 20px; }
.id-grid { display: grid; grid-template-columns: 1.1fr 1fr 0.9fr; gap: 16px; }
@media (max-width: 820px) { .id-grid { grid-template-columns: 1fr; } }
.id-col { background: var(--panel); border: 2px solid var(--line-soft); border-radius: 14px; padding: 14px; }
.id-col-title { display: block; font-size: 12px; letter-spacing: .08em; color: var(--muted); font-weight: 800; text-transform: uppercase; margin-bottom: 8px; }

.jersey-holder { display: flex; justify-content: center; }
.jersey { width: min(100%, 260px); margin-bottom: 10px; }
.jersey-photo { position: relative; aspect-ratio: 900 / 734; filter: drop-shadow(0 9px 12px rgba(0,0,0,.5)); }
.jersey-photo img { width: 100%; height: 100%; display: block; object-fit: contain; clip-path: polygon(39% 7%,61% 7%,80% 16%,87% 45%,76% 56%,70% 43%,70% 92%,30% 92%,30% 43%,24% 56%,13% 45%,20% 16%); }
.jersey-photo::after { content:""; position:absolute; z-index:1; left:43%; top:7%; width:14%; height:11%; border-radius:0 0 50% 50%; background:#191c23; pointer-events:none; }
.jersey-player-name,.jersey-player-number { position:absolute; z-index:2; left:29%; width:42%; color:#0d0f14; font-family:Impact,"Arial Narrow",sans-serif; text-align:center; line-height:.9; white-space:nowrap; overflow:hidden; text-overflow:clip; text-shadow:0 1px 0 rgba(255,255,255,.4); }
.jersey-player-name { top:28%; letter-spacing:.035em; transform:scaleX(.9); }
.jersey-player-number { top:39%; font-size:clamp(64px,9vw,92px); }

.num-field { flex: none; width: 92px; }
.num-big { text-align: center; font-size: 24px; font-weight: 800; padding: 10px 6px; -moz-appearance: textfield; }
.num-big::-webkit-outer-spin-button, .num-big::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.foot-row { display: flex; gap: 8px; }
.foot-btn { flex: 1; background: var(--panel-2); border: 2px solid transparent; border-radius: 10px; padding: 11px; font-weight: 800; }
.foot-btn.sel { border-color: var(--gold); color: var(--gold); background: #2c313f; }
.age-note { margin-top: 10px; font-size: 13px; color: var(--muted); background: var(--panel-2); border-radius: 10px; padding: 9px 12px; }

.nation-search { margin-bottom: 10px; }
.nation-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; max-height: 320px; overflow-y: auto; }
@media (max-width: 820px) { .nation-grid { max-height: none; } }
.nation-opt { display: flex; align-items: center; gap: 8px; text-align: left; background: var(--panel-2); border: 2px solid transparent; border-radius: 10px; padding: 9px 10px; font-weight: 700; font-size: 14px; }
.nation-opt.sel { border-color: var(--gold); background: #2c313f; }
.nation-opt .flag { font-size: 20px; }

.flagsvg { display: inline-flex; vertical-align: middle; }
.flagsvg svg { width: 26px; height: auto; border-radius: 3px; box-shadow: 0 0 0 1px rgba(0,0,0,.25); display: block; }
.nation-opt .flagsvg svg { width: 24px; }
.sub-flag svg { width: 18px; }
.go-flag svg, .go-tags .flagsvg svg { width: 22px; }
.tl-flag svg { width: 20px; }
.sc-name .flagsvg svg { width: 22px; }

.pitch2 { position: relative; width: 100%; min-height: 500px; border-radius: 14px; overflow: hidden;
  border: 2px solid rgba(255,255,255,.5);
  background:
    radial-gradient(ellipse at center, rgba(255,255,255,.08), transparent 60%),
    repeating-linear-gradient(180deg, #31995a 0 42px, #277f4b 42px 84px);
  box-shadow: inset 0 0 40px rgba(0,0,0,.35), 0 10px 22px rgba(0,0,0,.25); }
.pitch2 .pl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }
.ppos { position: absolute; transform: translate(-50%, -50%); background: rgba(13,15,20,.74); color: #fff;
  border: 2px solid rgba(255,255,255,.45); border-radius: 8px; padding: 4px 7px; font-family: Impact, sans-serif;
  font-size: 12px; letter-spacing: .5px; white-space: nowrap; cursor: pointer; z-index: 2; transition: transform .1s, background .1s; }
.ppos:hover { border-color: #fff; }
.ppos.sel { background: var(--gold); color: var(--ink); border-color: #fff; transform: translate(-50%, -50%) scale(1.15); box-shadow: 0 0 0 3px rgba(224,176,63,.35); }
@media (max-width: 820px) { .pitch2 { min-height: 400px; } }

/* ---------- início: cartão do jogador + ofertas de base ---------- */
.start-card { display: flex; align-items: center; gap: 14px; background: var(--panel); border: 2.5px solid var(--line); border-radius: 14px; padding: 14px; box-shadow: var(--shadow-sm); margin-bottom: 8px; }
.sc-ovr { background: var(--gold); color: var(--ink); border-radius: 10px; padding: 8px 12px; text-align: center; flex: none; }
.sc-ovr .n { font-family: Impact, sans-serif; font-size: 34px; line-height: 1; }
.sc-ovr .l { font-size: 10px; font-weight: 800; letter-spacing: .1em; }
.sc-name { font-weight: 800; font-size: 16px; }
.sc-sub { font-size: 13px; color: var(--muted); }

.base-offers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
@media (max-width: 620px) { .base-offers { grid-template-columns: 1fr; } }
.base-offer { background: var(--panel); border: 2.5px solid var(--line-soft); border-radius: 14px; padding: 16px 10px; display: flex; flex-direction: column; align-items: center; gap: 8px; transition: transform .06s, border-color .1s; }
.base-offer:hover { border-color: var(--gold); transform: translateY(-2px); }
.base-offer:active { transform: translate(2px, 2px); }
.bo-sign { font-size: 11px; color: var(--muted); font-weight: 700; }
.club-crest { --crest:#777; width: 42px; height: 48px; flex: none; display: inline-grid; place-items: center; color: #fff; font-family: Impact, sans-serif; font-size: 14px; letter-spacing: .04em; background: linear-gradient(145deg, rgba(255,255,255,.32), transparent 38%), var(--crest); border: 2px solid rgba(255,255,255,.9); border-radius: 12px 12px 18px 18px; clip-path: polygon(5% 0,95% 0,92% 70%,50% 100%,8% 70%); filter: drop-shadow(0 3px 2px rgba(0,0,0,.45)); }
.club-crest.official { object-fit: contain; background: transparent; border: 0; border-radius: 0; clip-path: none; filter: drop-shadow(0 3px 3px rgba(0,0,0,.5)); }
.offer-crest { width: 64px; height: 72px; font-size: 21px; }
.table-crest { width: 24px; height: 28px; border-width: 1px; border-radius: 7px 7px 10px 10px; font-size: 8px; margin-right: 8px; vertical-align: middle; }
.header-club-crest { width: 44px; height: 48px; }
.next-crest { width: 52px; height: 58px; margin: 0 auto 6px; }
.score-crest { width: 52px; height: 58px; margin: 0 auto 5px; }
.timeline-crest { width: 25px; height: 28px; }
.contract-crest { width: 46px; height: 52px; }
.gameover-crest { width: 58px; height: 64px; }
.cr-table td.club { display: flex; align-items: center; }

.trophies-screen { padding-top: 18px; }
.trophy-hero { min-height: 220px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; border: 2px solid var(--gold); border-radius: 18px; padding: 18px; background: radial-gradient(circle at 50% 15%, rgba(224,176,63,.28), transparent 52%), var(--panel); }
.trophy-hero .pill-btn { align-self: flex-start; }
.trophy-hero-icon { font-size: 64px; filter: drop-shadow(0 8px 10px #000); }
.trophy-hero h1 { font-size: 38px; }
.trophy-hero p { color: var(--muted); }
.trophy-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px,1fr)); gap: 12px; margin-top: 16px; }
.trophy-card { display: flex; align-items: center; gap: 12px; min-height: 92px; padding: 14px; border: 2px solid var(--line-soft); border-radius: 14px; background: var(--panel); }
.trophy-card.won { border-color: var(--gold); background: linear-gradient(135deg, rgba(224,176,63,.15), transparent 60%), var(--panel); }
.trophy-card.locked { opacity: .58; }
.trophy-card-icon { font-size: 36px; }
.trophy-card b,.trophy-card span { display: block; }
.trophy-card div span { color: var(--muted); font-size: 12px; margin-top: 3px; }
.empty-honour { color: var(--muted); border-left-color: var(--line-soft); }
.bo-name { font-size: 17px; text-align: center; line-height: 1.05; }
.bo-league { font-size: 12px; color: var(--muted); }

/* ---------- fim de carreira ---------- */
.go-layout { display: grid; grid-template-columns: 340px 1fr; gap: 16px; align-items: start; }
@media (max-width: 860px) { .go-layout { grid-template-columns: 1fr; } }

.go-card { background: var(--panel); border: 2.5px solid var(--line-soft); border-radius: 16px; padding: 14px; }
.go-card-top { display: flex; align-items: center; gap: 10px; }
.go-ovr { background: linear-gradient(160deg, #3a4152, #242a36); border: 2px solid var(--line-soft); border-radius: 12px; padding: 8px 12px; text-align: center; flex: none; }
.go-ovr .l { font-size: 10px; color: var(--muted); letter-spacing: .1em; }
.go-ovr .n { font-family: Impact, sans-serif; font-size: 34px; line-height: 1; }
.go-id { flex: 1; min-width: 0; }
.go-tags { display: flex; align-items: center; gap: 6px; font-size: 12px; }
.go-flag { font-size: 16px; }
.go-num { background: var(--panel-2); border-radius: 999px; padding: 2px 8px; font-weight: 800; color: var(--gold); }
.go-club { font-size: 20px; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.go-agev { text-align: right; font-size: 11px; flex: none; }
.go-agev .l { color: var(--muted); }
.go-agev b { font-size: 14px; }

.go-totals { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 12px 0; text-align: center; }
.go-totals .gk { font-size: 10px; color: var(--muted); letter-spacing: .08em; }
.go-totals .gv { font-family: Impact, sans-serif; font-size: 24px; }

.go-shelf { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; align-items: center; background: var(--panel-2); border-radius: 12px; padding: 12px; margin-bottom: 12px; min-height: 56px; }
.go-shelf.empty { color: var(--muted); font-size: 13px; }
.trophy { display: flex; flex-direction: column; align-items: center; }
.trophy .ti { font-size: 30px; line-height: 1; }
.trophy .tx { font-size: 11px; font-weight: 800; color: var(--gold); margin-top: -2px; }

.go-end { text-align: center; }
.go-end-title { font-size: 20px; }

.go-timeline { background: var(--panel); border: 2px solid var(--line-soft); border-radius: 14px; overflow: hidden; }
.tl-row { display: grid; grid-template-columns: 54px 1fr 52px 64px 50px 46px; align-items: center; gap: 6px; padding: 8px 12px; border-bottom: 1px solid var(--line-soft); font-size: 13px; }
.tl-row:last-child { border-bottom: none; }
.tl-head { background: var(--panel-2); font-size: 10px; letter-spacing: .06em; }
.tl-head span { color: var(--muted); font-weight: 800; text-align: center; }
.tl-head .tl-club { text-align: left; }
.tl-body { max-height: 540px; overflow-y: auto; }
.tl-age { text-align: center; }
.tl-agebadge { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; background: var(--red); color: #fff; font-style: normal; font-weight: 800; font-size: 13px; }
.tl-club { display: flex; align-items: center; gap: 7px; min-width: 0; }
.tl-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.tl-flag { font-size: 18px; }
.tl-cn { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tl-tt { font-size: 13px; white-space: nowrap; }
.tl-ovr { text-align: center; }
.tl-ovrbadge { display: inline-grid; place-items: center; min-width: 34px; height: 26px; border-radius: 8px; background: var(--gold); color: var(--ink); font-style: normal; font-weight: 800; font-size: 13px; padding: 0 4px; }
.tl-n { text-align: center; font-weight: 700; }
.tl-nat { background: rgba(224,176,63,.10); }
.tl-nat .tl-cn { color: var(--gold); }
