:root {
    --club-gap: 8px
}

.wide-container {
    width: calc(100% - 56px);
    max-width: 1760px;
    margin-inline: auto
}

.navbar>.wide-container {
    display: flex;
    align-items: center
}

.club-hero {
    position: relative;
    margin-top: 66px;
    padding: 26px 0 18px;
    overflow: hidden;
    background: radial-gradient(circle at 88% 40%, rgba(215, 25, 32, .2), transparent 35%), #0b0d10;
    border-bottom: 0
}

.club-hero-grid {
    position: relative;
    display: grid;
    grid-template-columns: 160px minmax(0, 1fr) 350px;
    gap: 24px;
    align-items: center
}

.club-main-shield {
    display: grid;
    place-items: center;
    height: 170px
}

.club-main-shield img {
    width: 150px;
    height: 150px;
    object-fit: contain
}

.club-main-shield span {
    display: grid;
    place-items: center;
    width: 120px;
    height: 120px;
    background: var(--red);
    font: 800 2rem "Barlow Condensed"
}

.club-copy {
    position: relative;
    z-index: 2
}

.club-copy>.club-back-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    padding: 8px 13px;
    border: 1px solid #343941;
    background: rgba(17, 20, 25, .88);
    color: #fff;
    font-size: .78rem;
    font-weight: 700;
    text-decoration: none;
    text-transform: uppercase;
    transition: border-color .2s ease, background .2s ease
}

.club-copy>.club-back-link span {
    color: #ff353c;
    font-size: 1.15rem;
    line-height: 1
}

.club-copy>.club-back-link:hover,
.club-copy>.club-back-link:focus-visible {
    border-color: var(--red);
    background: rgba(215, 25, 32, .14);
    color: #fff
}

.club-copy h1 {
    margin: 12px 0 2px;
    font: 800 clamp(3.5rem, 5.6vw, 6.6rem)/.78 "Barlow Condensed";
    text-transform: uppercase
}

.club-copy p {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 10px 0 0;
    color: var(--muted)
}

.club-copy p b,
.club-copy p strong {
    color: var(--red)
}

.club-copy p b {
    font: 800 2rem "Barlow Condensed"
}

.club-copy p i {
    height: 26px;
    border-left: 1px solid var(--muted)
}

.club-copy small,
.club-copy>div {
    display: block;
    color: var(--muted);
    font-size: .75rem
}

.club-copy>div {
    max-width: 620px;
    margin-top: 10px
}

.claim-card {
    position: relative;
    z-index: 2;
    padding: 18px;
    border: 1px solid var(--line);
    border-left: 2px solid var(--red);
    background: rgba(10, 12, 15, .8)
}

.claim-card small,
.auto-label,
.future-label {
    color: #ff555b;
    text-transform: uppercase;
    letter-spacing: .12em;
    font-size: .62rem
}

.claim-card h2 {
    font: 800 1.5rem "Barlow Condensed";
    text-transform: uppercase;
    margin: 8px 0
}

.claim-card p {
    color: var(--muted);
    font-size: .75rem
}

.club-watermark {
    position: absolute;
    right: 2%;
    width: 300px;
    height: 220px;
    object-fit: contain;
    opacity: .055;
    filter: grayscale(1)
}

.club-page {
    padding-block: 10px 60px
}

.club-stats {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: var(--club-gap)
}

.club-stats--with-titles {
    grid-template-columns: repeat(8, minmax(0, 1fr))
}

.club-stats>div {
    display: grid;
    text-align: center;
    padding: 8px;
    background: var(--panel);
    border: 1px solid var(--line)
}

.club-stats>div:has(.stat-icon) {
    grid-template-columns:38px minmax(0,auto);
    grid-template-rows:auto auto;
    align-content:center;
    justify-content:center;
    column-gap:10px;
}

.club-stats>div>.stat-icon {
    grid-column:1;
    grid-row:2;
    align-self:center;
    margin:0;
}

.club-stats>div>small {
    grid-column:1/3;
    grid-row:1;
    margin:0 0 5px;
    text-align:left;
}

.club-stats>div>strong {
    grid-column:2;
    grid-row:2;
    align-self:center;
    text-align:left;
}

.club-stats small {
    color: var(--muted);
    font-size: .62rem;
    text-transform: uppercase
}

.club-stats strong {
    font: 800 1.65rem "Barlow Condensed"
}

.auto-label {
    display: block;
    margin: 8px 0;
    color: var(--muted)
}

.overview-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--club-gap)
}

.overview-card,
.titles-strip,
.future-grid>article,
.all-games {
    background: var(--panel);
    border: 1px solid var(--line)
}

.overview-card {
    display: flex;
    flex-direction: column;
    min-height: 185px;
    padding: 12px
}

.card-page-items {
    flex: 1
}

.recent-card { min-height: 0 }
.recent-games-preview,.recent-games-modal .modal-body { display: grid; grid-auto-rows: max-content; align-content: start; gap: 12px }
.recent-competition { overflow: hidden; border: 1px solid var(--line); border-radius: 7px; background: rgba(255,255,255,.018) }
.recent-competition-head { display: flex; align-items: center; gap: 9px; min-height: 42px; padding: 8px 10px; border-bottom: 1px solid var(--line); background: rgba(255,255,255,.025) }
.recent-competition-head img { flex: 0 0 27px; width: 27px; height: 27px; object-fit: contain }
.recent-competition-head strong { min-width: 0; overflow: hidden; color: #f4f6f8; font: 700 .76rem "Inter"; text-overflow: ellipsis; white-space: nowrap }
.recent-match { display: grid; grid-template-columns: 68px minmax(0,1fr); gap: 10px; padding: 10px; border-bottom: 1px solid var(--line); cursor: pointer }
.recent-match:last-child { border-bottom: 0 }
.recent-match:hover,.recent-match:focus-visible { background: rgba(255,255,255,.035) }
.recent-match:focus-visible { outline: 1px solid var(--red); outline-offset: -1px }
.recent-match-date { display: flex; flex-direction: column; justify-content: center; color: var(--muted); font-size: .64rem; line-height: 1.35 }
.recent-match-date time { white-space: nowrap }
.recent-match-date small { margin-top: 3px; color: #69717c; font-size: .56rem; letter-spacing: .06em }
.recent-match-teams { min-width: 0 }
.recent-match-teams>div { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 8px; min-height: 30px }
.recent-match-team { display: flex; align-items: center; gap: 7px; min-width: 0; color: #fff; font-size: .7rem; font-weight: 600; text-decoration: none }
.recent-match-team>span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.recent-match-team[href]:hover { color: var(--red) }
.recent-match-team .match-shield { flex-basis: 24px; width: 24px; height: 24px }
.recent-match-teams b { min-width: 18px; color: #fff; font: 800 1rem "Barlow Condensed"; text-align: right }
.recent-match-teams b small { margin-left: 2px; color: var(--muted); font-size: .62rem }
.recent-games-more { width: 100%; margin-top: 12px; padding: 9px 12px; border: 1px solid var(--red); border-radius: 5px; background: transparent; color: #fff; font: 700 .67rem "Inter"; letter-spacing: .06em; text-transform: uppercase }
.recent-games-more:hover,.recent-games-more:focus-visible { background: var(--red) }
.recent-games-modal .modal-dialog { max-width: 620px }
.recent-games-modal .modal-content { max-height: min(86vh,780px); border: 1px solid var(--line); background: var(--panel) }
.recent-games-modal .modal-header { border-color: var(--line) }
.recent-games-modal .modal-header small { color: var(--red); font-size: .62rem; letter-spacing: .1em; text-transform: uppercase }
.recent-games-modal .modal-title { margin: 2px 0 0; font: 800 1.55rem "Barlow Condensed"; text-transform: uppercase }
.recent-games-modal .modal-body { overflow-y: auto; overscroll-behavior: contain }
.recent-games-modal .recent-competition-head strong { font-size: .82rem }
.recent-games-modal .recent-match { grid-template-columns: 82px minmax(0,1fr) }
.recent-games-modal .recent-match-team { font-size: .78rem }

.rivalry-card {
    text-align: center
}
.rivalry-card>h3 { text-align: left }

.rivalry-open { cursor: pointer }
.rivalry-open:hover { border-color: var(--red) }

.rivalry-card .versus {
    margin-top: auto
}

.rivalry-card>p:last-child {
    margin-bottom: auto
}

.overview-card h3,
.titles-strip h3,
.future-grid h3,
.all-games h3 {
    padding-left: 10px;
    border-left: 2px solid var(--red);
    font: 800 .85rem "Inter";
    text-transform: uppercase
}

.compact-match,
.detail-match {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 8px;
    padding: 7px 0;
    border-bottom: 1px solid var(--line)
}

.match-team {
    display: flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
    color: #fff;
    text-decoration: none;
    font-size: .72rem;
    font-weight: 600
}

.match-team--current {
    cursor: default
}

.match-team[href]:hover {
    color: var(--red)
}

.rival-team-link {
    color: #fff;
    font-weight: 800;
    text-decoration: none
}

.rival-team-link:hover {
    color: var(--red)
}

.compact-match>.match-team:last-child,
.detail-match>.match-team:last-child {
    justify-content: flex-end;
    justify-self: end;
    text-align: right
}
.compact-match>.match-team:first-child,.detail-match>.match-team:first-child { justify-self: start }

.match-shield {
    position: relative;
    flex: 0 0 30px;
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    font: 800 .65rem "Barlow Condensed"
}

.match-shield img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100% !important;
    height: 100% !important;
    max-width: none;
    object-fit: contain
}

.match-shield.is-broken img {
    display: none
}

.compact-match>b,
.detail-match>b {
    font: 800 1.15rem "Barlow Condensed"
}

.versus {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    justify-items: center;
    gap: 12px;
    margin: 20px 0 10px
}

.versus .match-team {
    display: grid;
    grid-template-rows: 55px auto;
    justify-items: center;
    row-gap: 5px;
    text-align: center
}

.versus .match-team>.match-shield {
    align-self: end;
    order: 1
}

.versus .match-team>span:not(.match-shield) {
    order: 2
}

.versus .match-shield {
    width: 55px;
    height: 55px
}

.next-card .versus .match-team--shield-only {
    display: grid;
    place-items: center
}

.next-card .versus .match-team--shield-only .match-shield {
    width: 64px;
    height: 64px
}

.versus>b {
    font: 800 2rem "Barlow Condensed"
}

.next-card>p,
.rivalry-card>p,
.rivalry-card>strong {
    text-align: center;
    display: block;
    color: var(--muted);
    font-size: .7rem
}

.scorers-card .card-page-items>div {
    display: grid;
    grid-template-columns: 28px 1fr auto;
    gap: 8px;
    padding: 10px 0;
    border-bottom: 1px solid var(--line);
    font-size: .72rem
}

.ranking-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin-bottom: 7px }
.ranking-tabs button { padding: 5px 3px; border: 1px solid var(--line); background: transparent; color: var(--muted); font: 700 .62rem "Inter"; text-transform: uppercase }
.ranking-tabs button.active { color: #fff; border-color: var(--red); background: var(--red) }
.ranking-championship { width: 100%; margin-bottom: 4px; padding: 5px; border: 1px solid var(--line); background: #111419; color: #fff; font-size: .65rem }
.ranking-player { width: 100%; display: grid; grid-template-columns: 28px minmax(0,1fr) auto; gap: 8px; padding: 8px 0; border: 0; border-bottom: 1px solid var(--line); background: transparent; color: #fff; text-align: left; font-size: .72rem }
.ranking-player b,.ranking-player strong { color: var(--red) }
.ranking-player:hover span { color: var(--red) }

.compact-stats-modal .modal-dialog { max-width: 560px }
.compact-stats-modal .modal-content { border: 1px solid #343941; background: #101318 }
.compact-stats-modal .modal-header small { color: var(--red); text-transform: uppercase; letter-spacing: .1em }
.compact-stats-modal .modal-title { font: 800 1.45rem "Barlow Condensed"; text-transform: uppercase }
.rivalry-history-game { padding: 10px 0; border-bottom: 1px solid var(--line) }
.rivalry-history-game>small { display: block; margin-bottom: 6px; color: var(--muted) }
.rivalry-history-game>div { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px }
.rivalry-history-game>div>.match-team:last-child { justify-content: flex-end; text-align: right }
.rivalry-history-list,.rivalry-history-game { text-align: left }
.rivalry-history-game>div>b { text-align: center }
.player-total-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 6px }
.player-total-grid>div { display: grid; padding: 9px 5px; border: 1px solid var(--line); text-align: center }
.player-total-grid strong { color: var(--red); font: 800 1.45rem "Barlow Condensed" }
.player-total-grid span { color: var(--muted); font-size: .58rem; text-transform: uppercase }
.stats-scope-note { margin: 10px 0; color: var(--muted); font-size: .68rem }
.player-game { padding: 10px 0; border-top: 1px solid var(--line) }
.player-game>small { color: var(--red); font-size: .63rem; text-transform: uppercase }
.player-game h3 { margin: 4px 0; font: 700 .85rem "Inter" }
.player-game h3 b { color: #fff }
.player-game p,.player-game ul { margin: 6px 0; font-size: .72rem }
.player-game ul { padding: 0; list-style: none }
.player-game li { display: grid; grid-template-columns: 34px 1fr; gap: 5px; padding: 3px 0; color: #ddd }
.player-game time { color: var(--red); font-weight: 700 }
.player-open { cursor: pointer }
.public-roster .player-open { color: inherit; background: rgba(0,0,0,.25); border: 1px solid rgba(255,255,255,.12); border-radius: 8px; padding: .7rem; text-align: left }
.reserve-player { display: block; width: 100%; padding: 6px 0; border: 0; border-bottom: 1px solid var(--line); background: transparent; color: var(--muted); text-align: left; font-size: .75rem }
.favorite-player-button { display: grid; width: 100%; padding: 0; border: 0; background: transparent; color: #fff; text-align: left }
.favorite-player-button span,.favorite-player-button small { color: var(--muted); font-size: .72rem }
.favorite-player-button small { margin-top: 5px; color: var(--red) }

.scorers-card .card-page-items>div>b,
.scorers-card .card-page-items>div>strong {
    color: var(--red)
}

.titles-strip {
    display: grid;
    grid-template-columns: auto 30px minmax(0,1fr) 30px;
    align-items: center;
    gap: 10px;
    margin-top: var(--club-gap);
    padding: 10px 14px
}

.titles-strip h3 {
    margin: 0
}

.titles-viewport {
    min-width: 0;
    overflow: hidden;
    scroll-behavior: smooth
}

.titles-track {
    display: flex;
    width: max-content;
    transition: transform .32s ease;
    will-change: transform
}

@media (prefers-reduced-motion: reduce) {
    .titles-track { transition: none }
}

.titles-item {
    display: grid;
    grid-template-columns: auto auto;
    gap: 0 6px;
    min-width: 190px;
    padding-right: 18px;
    margin-right: 18px;
    border-right: 1px solid var(--line);
    font-size: .68rem
}

.titles-item span {
    grid-row: span 2
}

.titles-item>img {
    grid-row: span 2;
    width: 54px;
    height: 62px;
    object-fit: contain
}

.titles-strip small {
    color: var(--muted)
}

.titles-nav {
    display: grid;
    place-items: center;
    width: 30px;
    height: 40px;
    padding: 0;
    border: 1px solid var(--red);
    background: #111419;
    color: #fff;
    font-size: 1.4rem;
    line-height: 1
}

.titles-nav:hover { background: var(--red) }
.titles-nav:disabled { visibility: hidden }

.future-label {
    margin: 12px 0 6px
}

.future-grid {
    display: grid;
    grid-template-columns: 2.4fr 1fr 1fr;
    gap: var(--club-gap)
}

.future-grid>article {
    min-height: 120px;
    padding: 14px
}

.future-grid .lineup-placeholder {
    grid-column: 1;
    grid-row: 2 / span 2;
    min-height: 250px;
    background: linear-gradient(160deg, #10141a, #0b0d10)
}

.future-grid .treasury-module {
    grid-column: 3;
    grid-row: 1
}

.future-grid .transfer-history-module {
    display: flex;
    overflow: hidden;
    flex-direction: column;
    grid-column: 3;
    grid-row: 2 / span 2
}

.transfer-history-module .transfer-page-items {
    flex: 1;
    min-height: 0
}

.transfer-history-module .transfer-pages {
    flex: 0 0 auto;
    margin-top: auto
}

.future-grid .favorite-player-module {
    grid-column: 2;
    grid-row: 1
}

.future-grid .reserves-module {
    display: flex;
    overflow: hidden;
    flex-direction: column;
    grid-column: 2;
    grid-row: 2 / span 2
}

.reserves-module .card-page-items {
    flex: 1;
    min-height: 0
}

.club-roster-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin: 8px 0 }
.club-roster-tabs button { padding: 6px 4px; border: 1px solid var(--line); background: transparent; color: var(--muted); font: 800 .58rem "Inter"; text-transform: uppercase }
.club-roster-tabs button.active { border-color: var(--red); color: #fff; background: rgba(215,25,32,.16) }
.club-roster-panel { display: flex; flex: 1; min-height: 0; flex-direction: column }
.club-roster-panel[hidden] { display: none }
.roster-competition { display: block; margin-bottom: 5px; color: var(--muted); font-size: .63rem }
.roster-competition b { color: var(--red); text-transform: uppercase }

.reserves-module .card-pages {
    flex: 0 0 auto;
    margin-top: auto
}

.future-grid .about-module {
    grid-column: 1;
    grid-row: 1
}

.transfer-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin: 8px 0
}

.transfer-filters button {
    padding: 4px 7px;
    color: var(--muted);
    background: transparent;
    border: 1px solid var(--line);
    font: 700 .62rem "Inter";
    text-transform: uppercase
}

.transfer-filters button.active,
.transfer-filters button:hover {
    color: #fff;
    background: var(--red);
    border-color: var(--red)
}

.transfer-entry {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    column-gap: 7px;
    align-items: center;
    min-height: 43px;
    padding: 4px 0;
    border-bottom: 1px solid var(--line)
}

button.transfer-entry { width: 100%; background: transparent; color: #fff; border-top: 0; border-right: 0; border-left: 0; text-align: left }

.transfer-entry b,
.transfer-entry small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.transfer-entry small {
    grid-column: 2;
    color: var(--muted);
    font-size: .65rem
}

.transfer-entry>strong {
    grid-column: 3;
    grid-row: 1 / span 2;
    margin: 0;
    font-size: .82rem;
    white-space: nowrap
}

.transfer-kind {
    padding: 2px 4px;
    color: #fff;
    background: #3b414b;
    font: 800 .55rem "Inter";
    text-transform: uppercase
}

.transfer-kind.is-purchase { background: #16794a }
.transfer-kind.is-sale { background: #a3202a }

.future-grid strong {
    font: 800 1.6rem "Barlow Condensed"
}

.future-grid p,
.empty-copy {
    color: var(--muted);
    font-size: .75rem
}

.all-games {
    margin-top: 16px;
    padding: 14px
}

.all-games summary {
    cursor: pointer;
    font-weight: 700;
    text-transform: uppercase
}

.games-detail-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-top: 14px
}

.game-pages {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    padding: 10px
}

.game-pages button {
    background: #15181d;
    color: #fff;
    border: 1px solid var(--line);
    padding: 5px 10px
}

.game-pages span {
    color: var(--muted);
    font-size: .7rem
}

.error-page {
    padding-top: 150px;
    min-height: 80vh
}

footer {
    padding: 20px 0
}

/* Dashboard esportiva do perfil do clube */
.club-stats>div { position:relative; min-height:82px; overflow:hidden; padding:12px; background:linear-gradient(145deg,#11161b,#0b0f13); border:1px solid #222c34; border-radius:7px }
.club-stats>div::before { content:""; position:absolute; inset:0 auto auto 10px; width:48px; height:1px; background:linear-gradient(90deg,#d4a928,transparent) }
.club-stats>div:nth-child(4n)::before { background:linear-gradient(90deg,var(--red),transparent) }
.club-stats>div::before { display:none }
.club-stats>div:has(.stat-icon) { grid-template-columns:48px minmax(0,1fr); grid-template-rows:auto auto auto; align-content:center; justify-content:stretch; column-gap:12px }
.club-stats>div>.stat-icon { grid-column:1; grid-row:1/4; align-self:center; width:48px; height:48px; margin:0; border-color:rgba(237,23,43,.14); border-radius:10px; background:rgba(237,23,43,.13); color:#ff1735 }
.club-stats>div>small { grid-column:2; grid-row:1; align-self:end; margin:0 0 1px; text-align:left }
.club-stats>div>strong { grid-column:2; grid-row:2; align-self:center; font-size:2rem; text-align:left }
.club-stats .stat-detail { grid-column:2; grid-row:3; margin-top:2px; color:#9aa7b5; font-size:.56rem; font-weight:600; line-height:1.15; text-align:left; white-space:nowrap }

.overview-grid { grid-template-columns:1.12fr 1.22fr 1.12fr .9fr; align-items:stretch }
.overview-card { min-height:370px; padding:14px; border-radius:7px; box-shadow:inset 0 1px rgba(255,255,255,.015) }
.overview-card-head { display:flex; align-items:center; justify-content:space-between; gap:10px; min-height:38px; margin:-4px 0 10px; padding-bottom:9px; border-bottom:1px solid rgba(255,255,255,.055) }
.overview-card-head h3 { margin:0 }
.overview-head-icon { display:grid; place-items:center; width:32px; height:32px; border:1px solid var(--line); border-radius:6px; color:#9babba }
.overview-head-icon svg { width:17px; height:17px }

.recent-card { display:flex; min-height:370px; flex-direction:column }
.recent-competition { border-color:#26323a }
.recent-games-preview { display:flex; flex:1; flex-direction:column; gap:10px }
.recent-games-preview .recent-competition { display:flex; flex:1 1 auto; flex-direction:column }
.recent-games-preview .recent-competition-games { display:grid; flex:1; grid-auto-rows:minmax(62px,1fr) }
.recent-games-preview .recent-match { align-items:center; padding-block:11px }
.recent-games-preview .recent-match-team .match-shield { width:27px; height:27px; flex-basis:27px }
.recent-games-preview .recent-match-date { font-size:.67rem; line-height:1.4 }
.recent-card .overview-card-head h3 { white-space:nowrap; font-size:.78rem }
.recent-games-more { flex:0 0 auto; width:auto; margin:0; padding:7px 9px; font-size:.56rem; letter-spacing:.02em; white-space:nowrap }
.recent-games-more span { margin-left:5px; font-size:1rem; line-height:0 }

.next-card { position:relative; overflow:hidden; background:radial-gradient(circle at 85% 50%,rgba(157,12,29,.13),transparent 44%),linear-gradient(145deg,#11161b,#0b0f13) }
.next-card::after { content:""; position:absolute; right:-55px; bottom:-80px; width:220px; height:220px; border:1px solid rgba(237,23,43,.08); transform:rotate(-28deg); pointer-events:none }
.next-card .card-page-items { position:relative; z-index:1 }
.next-item { display:flex; height:100%; min-height:288px; flex-direction:column; align-items:stretch }
.next-competition { display:flex; align-items:center; justify-content:center; gap:7px; min-height:32px; color:#9caaba; font-size:.69rem }
.next-competition img { width:28px; height:28px; object-fit:contain }
.next-competition strong { color:#dfe6ed; font-size:.73rem }
.next-card .versus { grid-template-columns:1fr auto 1fr; grid-template-rows:82px auto; margin:auto 0 14px; gap:4px 14px }
.next-card .versus>.match-team:nth-child(1) { grid-column:1; grid-row:1 }
.next-card .versus>b { grid-column:2; grid-row:1; align-self:center }
.next-card .versus>.match-team:nth-child(3) { grid-column:3; grid-row:1 }
.next-card .versus>strong { overflow:hidden; color:#f3f5f7; font:700 .74rem "Barlow Condensed"; text-align:center; text-overflow:ellipsis; text-transform:uppercase; white-space:nowrap }
.next-card .versus>strong:nth-of-type(1) { grid-column:1; grid-row:2 }
.next-card .versus>i { display:none }
.next-card .versus>strong:nth-of-type(2) { grid-column:3; grid-row:2 }
.next-card .versus .match-shield { width:74px; height:74px }
.next-item>p { display:flex; align-items:center; justify-content:center; gap:7px; margin:0 0 14px; color:#a6b1bd; font-size:.7rem }
.next-item>p svg { width:15px; height:15px; color:var(--red) }
.next-details-action { display:flex; align-items:center; justify-content:center; gap:10px; width:100%; margin-top:auto; padding:12px; border-radius:5px; background:linear-gradient(90deg,#ef0527,#d90e25); color:#fff; font:800 .68rem "Inter"; text-transform:uppercase }
.next-details-action b { font-size:1.15rem; line-height:0 }
.next-item:hover .next-details-action { filter:brightness(1.12) }

.rivalry-card { display:flex; flex-direction:column; text-align:center; background:linear-gradient(145deg,#10151a,#0b0f13) }
.rivalry-card .versus { grid-template-columns:1fr auto 1fr; grid-template-rows:96px auto; margin:8px 0 14px; gap:5px 12px }
.rivalry-card .versus>.match-team:first-child { grid-column:1; grid-row:1 }
.rivalry-card .versus>b { grid-column:2; grid-row:1; align-self:center }
.rivalry-card .versus>.match-team:nth-child(3) { grid-column:3; grid-row:1 }
.rivalry-card .versus>strong { grid-column:1; grid-row:2; overflow:hidden; font:700 .75rem "Barlow Condensed"; text-overflow:ellipsis; text-transform:uppercase; white-space:nowrap }
.rivalry-card .versus>i { display:none }
.rivalry-card .versus>.rival-team-link { grid-column:3; grid-row:2; overflow:hidden; font:700 .75rem "Barlow Condensed"; text-overflow:ellipsis; text-transform:uppercase; white-space:nowrap }
.rivalry-card .versus .match-shield { width:86px; height:86px }
.rivalry-summary { display:grid; grid-template-columns:repeat(4,1fr); margin:0 -2px 15px; border-top:1px solid var(--line); border-bottom:1px solid var(--line) }
.rivalry-summary>div { display:grid; padding:12px 4px; border-right:1px solid var(--line) }
.rivalry-summary>div:last-child { border-right:0 }
.rivalry-summary b { color:#f06c7d; font:800 1.35rem "Barlow Condensed" }
.rivalry-summary span { color:#83909d; font-size:.55rem; text-transform:uppercase }
.rivalry-bar { display:flex; width:100%; height:12px; overflow:hidden; margin-top:auto; margin-bottom:14px; border-radius:999px; background:#20272e }
.rivalry-bar span { display:block; min-width:0 }
.rivalry-bar .wins { background:#ec1232 }
.rivalry-bar .draws { background:#727d88 }
.rivalry-bar .losses { background:#d9dde1 }

.ranking-tabs button { position:relative; padding:12px 3px; border-radius:5px; color:#bdc5cd }
.ranking-tabs button.active { color:#fff; border-color:var(--red); background:linear-gradient(180deg,rgba(198,16,39,.22),rgba(198,16,39,.06)) }
.ranking-tabs button.active::after { content:""; position:absolute; right:14px; bottom:-2px; left:14px; height:3px; background:var(--red); border-radius:3px }
.ranking-tabs button.active::after { display:none }
.scorers-card { display:flex; flex-direction:column }
.scorers-card .ranking-items { flex:1 }
.ranking-player { grid-template-columns:34px minmax(0,1fr) auto; align-items:center; min-height:47px; padding:7px 4px }
.ranking-player b { font:800 1rem "Barlow Condensed" }
.ranking-player span { overflow:hidden; font-weight:700; text-overflow:ellipsis; white-space:nowrap }
.ranking-player strong { min-width:24px; font:800 1.15rem "Barlow Condensed"; text-align:right }

.titles-strip { min-height:96px; border-radius:7px; background:linear-gradient(90deg,#10151a,#0b0f13) }
.titles-item { min-width:205px }
.titles-item>img { width:58px; height:68px }

@media(max-width:1100px) {
    .club-hero-grid {
        grid-template-columns: 120px 1fr
    }

    .claim-card {
        grid-column: 1/-1
    }

    .overview-grid {
        grid-template-columns: 1fr 1fr
    }

    .overview-card { min-height:370px }

    .club-stats {
        grid-template-columns: repeat(4, 1fr)
    }

    .future-grid {
        grid-template-columns: 1fr 1fr
    }

    .future-grid .lineup-placeholder {
        grid-column: 1/-1
    }

    .future-grid article:nth-child(n) {
        grid-column: auto;
        grid-row: auto
    }
}

@media(max-width:700px) {
    .wide-container {
        width: calc(100% - 24px)
    }

    .club-hero-grid {
        grid-template-columns: 80px 1fr;
        gap: 12px
    }

    .club-main-shield {
        height: 90px
    }

    .club-main-shield img {
        width: 80px;
        height: 80px
    }

    .club-copy h1 {
        font-size: 3rem
    }

    .club-copy>div {
        grid-column: 1/-1
    }

    .club-stats {
        grid-template-columns: repeat(2, 1fr)
    }

    .club-stats>div { min-height:78px; padding:10px }
    .club-stats>div:has(.stat-icon) { grid-template-columns:42px minmax(0,1fr); column-gap:9px }
    .club-stats>div>.stat-icon { width:42px; height:42px }
    .club-stats>div>strong { font-size:1.7rem }
    .club-stats .stat-detail { font-size:.55rem }

    .overview-grid,
    .games-detail-grid,
    .future-grid {
        grid-template-columns: 1fr
    }

    .titles-strip {
        grid-template-columns: 1fr 30px 30px
    }

    .titles-strip h3 { grid-column: 1/-1 }
    .titles-viewport { grid-column: 1; grid-row: 2 }
    .titles-nav--previous { grid-column: 2; grid-row: 2 }
    .titles-nav--next { grid-column: 3; grid-row: 2 }

    .overview-card {
        min-height: auto
    }

    .recent-card,.next-card,.rivalry-card,.scorers-card { min-height:370px }
    .overview-card-head { min-height:36px }
    .recent-games-more { padding:7px 8px; font-size:.55rem }
    .next-item { min-height:285px }
    .rivalry-card .versus .match-shield { width:72px; height:72px }
    .titles-strip { min-height:0 }

    .recent-games-modal .modal-dialog { width: calc(100% - 20px); margin: 10px auto }
    .recent-games-modal .modal-content { max-height: calc(100dvh - 20px) }
    .recent-games-modal .modal-body { padding: 12px }
    .recent-games-modal .recent-match,.recent-match { grid-template-columns: 68px minmax(0,1fr); gap: 8px; padding: 9px 8px }
    .recent-games-modal .recent-match-team { font-size: .72rem }

    .future-grid .lineup-placeholder {
        grid-column: auto
    }

    .club-watermark {
        display: none
    }
}

/* Timeline principal de partidas */
.overview-grid { grid-template-columns:minmax(0,3fr) minmax(260px,1fr) }
.overview-card,.recent-card,.scorers-card { min-height:600px }
.recent-games-preview { display:block; min-height:0 }
.recent-games-preview .recent-competition { display:block; margin-bottom:10px }
.recent-games-preview .recent-competition:last-child { margin-bottom:0 }
.recent-games-preview .recent-competition-games { display:block }
.recent-games-preview .recent-match { min-height:68px; padding:10px 14px }
.recent-competition-head { min-height:38px; padding:7px 12px }
.recent-competition-head img { width:25px; height:25px }
.recent-match { grid-template-columns:96px minmax(0,1fr); align-items:center }
.recent-match-date { position:relative; gap:1px; font-size:.66rem }
.recent-match-date em { display:inline-flex; width:max-content; margin-bottom:4px; padding:3px 6px; border-radius:3px; background:rgba(237,23,43,.14); color:#ff3650; font:700 .48rem "Inter"; font-style:normal; letter-spacing:.05em; text-transform:uppercase }
.recent-match-leg { color:#d5af46; font-size:.52rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase }
.recent-match-date small { color:#8d98a3 }
.recent-match-teams>div { min-height:31px }
.recent-match-team { font-size:.74rem }
.recent-match-team .match-shield { width:27px; height:27px; flex-basis:27px }
.recent-match-teams b { min-width:26px; font-size:1.15rem }
.recent-match--next { border-left:2px solid var(--red); background:linear-gradient(90deg,rgba(237,23,43,.08),transparent 55%) }
.scorers-card .ranking-items { display:flex; flex:1; flex-direction:column }
.scorers-card .ranking-player { flex:1; min-height:64px }
.recent-games-modal .modal-dialog { max-width:660px }
.recent-games-modal .modal-content { max-height:78vh }
.recent-games-modal .recent-competition { flex:none }
.recent-games-modal .recent-competition-games { display:block }

@media(max-width:1100px) {
    .overview-grid { grid-template-columns:minmax(0,2fr) minmax(250px,1fr) }
}

@media(max-width:700px) {
    .overview-grid { grid-template-columns:1fr }
    .overview-card,.recent-card,.scorers-card { min-height:auto }
    .recent-match,.recent-games-modal .recent-match { grid-template-columns:82px minmax(0,1fr) }
    .recent-games-preview .recent-match { min-height:66px }
    .scorers-card .ranking-player { min-height:54px }
}

.transfer-card-kind.is-trade,.transfer-kind.is-trade{background:#164c62;color:#bceeff}