:root { --match-blue: #1764ff; --match-cyan: #25c4ff; --match-ink: #07162f; --match-muted: #73849b; --match-line: #dce7f2; }
.match-page { min-height: 100vh; color: var(--match-ink); background: #f1f6fb; }
.match-loading { min-height: calc(100vh - 72px); display: grid; place-items: center; color: #708299; }
.match-error { max-width: 720px; margin: 90px auto; padding: 40px; border-radius: 22px; text-align: center; background: #fff; box-shadow: 0 18px 45px rgba(9,40,78,.08); }
.match-error a { display: inline-block; margin-top: 20px; color: var(--match-blue); font-weight: 800; }
.match-breadcrumb { position: relative; z-index: 2; padding: 22px 0; color: #71839a; font-size: 13px; }
.match-breadcrumb a { display: inline-flex; align-items: center; min-height: 30px; margin: -8px; padding: 8px; color: #63b7ff; font-weight: 800; text-decoration: none; border-radius: 8px; }
.match-breadcrumb a:hover, .match-breadcrumb a:focus-visible { color: #fff; background: rgba(255,255,255,.1); outline: none; }

.scoreboard { position: relative; overflow: hidden; color: #fff; background: radial-gradient(circle at 50% 0, rgba(48,150,255,.48), transparent 36%), linear-gradient(135deg,#06152e,#0a3479 60%,#0a5cc1); }
.scoreboard::before, .scoreboard::after { content: ""; position: absolute; width: 420px; height: 420px; border: 1px solid rgba(255,255,255,.08); border-radius: 50%; pointer-events: none; }
.scoreboard::before { left: -220px; top: -170px; box-shadow: 0 0 0 70px rgba(255,255,255,.025); }
.scoreboard::after { right: -180px; bottom: -300px; box-shadow: 0 0 0 90px rgba(255,255,255,.025); }
.scoreboard__top { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 9px; padding-top: 30px; color: #bbd6fa; font-size: 12px; font-weight: 700; }
.scoreboard__top span { display: inline-block; width: 4px; height: 4px; border-radius: 50%; background: #5fc9ff; }
.scoreboard__main { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(180px,1fr) 240px minmax(180px,1fr); align-items: center; gap: 34px; max-width: 1020px; margin: 0 auto; padding: 45px 24px 52px; }
.score-team { display: grid; justify-items: center; text-align: center; }
.score-team__logo { display: grid; place-items: center; width: 142px; height: 142px; margin-bottom: 20px; padding: 10px; border: 1px solid rgba(255,255,255,.16); border-radius: 50%; background: rgba(255,255,255,.09); box-shadow: 0 18px 45px rgba(0,0,0,.18); }
.score-team__logo img { width: 100%; height: 100%; object-fit: contain; }
.score-team h1, .score-team h2 { max-width: 280px; margin: 0; font-size: 21px; line-height: 1.2; }
.score-team p { margin: 7px 0 0; color: #9fc6f6; font-size: 13px; }
.score-center { text-align: center; }
.score-center__status { display: inline-flex; padding: 6px 11px; border-radius: 99px; color: #8cf0c1; background: rgba(34,197,136,.13); font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.score-center__status--live { color: #fff; background: #e63f4e; box-shadow: 0 0 0 5px rgba(230,63,78,.14); animation: match-live-pulse 1.6s ease-in-out infinite; }
.score-center__status--pending { color: #ffe0a3; background: rgba(245,158,11,.17); }
@keyframes match-live-pulse { 50% { box-shadow: 0 0 0 9px rgba(230,63,78,.04); } }
.score-center__value { margin: 15px 0 10px; font-size: 68px; font-weight: 800; line-height: 1; letter-spacing: -.06em; }
.score-center__time { color: #c9dcf7; font-size: 15px; font-weight: 700; }
.scoreboard__actions { position: relative; z-index: 1; display: flex; justify-content: center; gap: 10px; padding: 0 24px 34px; }
.match-action { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 0 20px; border: 1px solid rgba(255,255,255,.18); border-radius: 13px; color: #e9f4ff; background: rgba(4,21,49,.4); font-size: 13px; font-weight: 800; }
.match-action--live { color: #041f3e; border-color: #44d5ff; background: #44d5ff; }
.match-action--disabled { cursor: default; opacity: .62; }

.match-content { padding: 42px 0 86px; }
.match-grid { display: grid; grid-template-columns: minmax(0,1.6fr) minmax(290px,.72fr); gap: 24px; align-items: start; }
.match-stack { display: grid; gap: 24px; }
.match-panel { overflow: hidden; border: 1px solid var(--match-line); border-radius: 22px; background: #fff; box-shadow: 0 12px 35px rgba(15,49,89,.05); }
.match-panel__head { display: flex; align-items: center; justify-content: space-between; padding: 21px 24px; border-bottom: 1px solid var(--match-line); }
.match-panel__head h2 { margin: 0; font-size: 20px; letter-spacing: -.025em; }
.match-panel__head span { color: #7d8da2; font-size: 12px; }
.match-panel__body { padding: 24px; }
.periods { display: grid; grid-template-columns: repeat(5,minmax(80px,1fr)); gap: 10px; }
.period { padding: 16px 10px; border-radius: 14px; text-align: center; background: #f1f6fb; }
.period span { display: block; margin-bottom: 7px; color: #7c8da2; font-size: 10px; font-weight: 800; text-transform: uppercase; }
.period strong { font-size: 22px; }
.match-info-list { display: grid; gap: 15px; }
.match-info-row { display: flex; justify-content: space-between; gap: 20px; padding-bottom: 14px; border-bottom: 1px solid #ecf1f6; }
.match-info-row:last-child { padding: 0; border: 0; }
.match-info-row span { color: #77899f; font-size: 12px; }
.match-info-row strong { max-width: 62%; text-align: right; font-size: 13px; }
.source-links { display: grid; gap: 9px; }
.source-link { display: flex; justify-content: space-between; align-items: center; padding: 13px 15px; border-radius: 12px; color: #22456e; background: #f1f6fb; font-size: 12px; font-weight: 800; }
.source-link span { color: var(--match-blue); }

.timeline { position: relative; display: grid; gap: 0; }
.timeline::before { content: ""; position: absolute; left: 72px; top: 16px; bottom: 16px; width: 1px; background: #dce8f4; }
.event { position: relative; display: grid; grid-template-columns: 60px 26px 1fr; gap: 0 10px; align-items: start; padding: 13px 0; }
.event__time { padding-top: 5px; color: #71849b; text-align: right; font-size: 11px; font-weight: 700; }
.event__icon { position: relative; z-index: 1; display: grid; place-items: center; width: 26px; height: 26px; border: 3px solid #fff; border-radius: 50%; color: #fff; background: var(--match-blue); font-size: 10px; box-shadow: 0 0 0 1px #d9e5f1; }
.event--penalty .event__icon { background: #ff7a45; }
.event--other .event__icon { background: #8aa0b7; }
.event__body { min-width: 0; padding: 3px 0 0; }
.event__body strong { font-size: 13px; }
.event__body p { margin: 4px 0 0; color: #73859a; font-size: 11px; line-height: 1.5; }
.event__score { float: right; color: var(--match-blue); font-size: 15px; }

.roster-switch { display: flex; gap: 6px; padding: 6px; border-radius: 13px; background: #edf3f9; }
.roster-switch button { flex: 1; padding: 11px; border: 0; border-radius: 9px; color: #50657e; background: transparent; font: 800 12px "Manrope",sans-serif; cursor: pointer; }
.roster-switch button.is-active { color: #fff; background: var(--match-blue); }
.roster-groups { margin-top: 20px; }
.roster-position { margin-top: 18px; }
.roster-position:first-child { margin-top: 0; }
.roster-position h3 { margin: 0 0 8px; color: #75869c; font-size: 10px; letter-spacing: .09em; text-transform: uppercase; }
.roster-player { display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 10px; min-height: 44px; border-bottom: 1px solid #edf2f7; }
.roster-player:last-child { border-bottom: 0; }
.roster-player__number { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; color: #fff; background: #173b69; font-size: 10px; font-weight: 800; }
.roster-player strong { font-size: 12px; }
.roster-player em { color: var(--match-blue); font-size: 9px; font-style: normal; font-weight: 900; }
.meeting { display: grid; grid-template-columns: 62px 1fr auto; align-items: center; gap: 13px; padding: 13px 0; border-bottom: 1px solid #edf2f7; }
.meeting:last-child { border-bottom: 0; }
.meeting time { color: #73869d; font-size: 10px; }
.meeting strong { font-size: 12px; }
.meeting b { color: var(--match-blue); }
.panel-empty { margin: 0; color: #7b8ca1; font-size: 13px; line-height: 1.6; }

.data-source { color: #cfddf1; background: #07152d; }
.data-source__inner { padding-top: 34px; padding-bottom: 34px; }
.data-source h2 { margin: 0 0 10px; color: #fff; font-size: 15px; }
.data-source p { max-width: 980px; margin: 0; font-size: 11px; line-height: 1.65; }
.data-source p + p { margin-top: 5px; }

@media (max-width: 900px) {
    .scoreboard__main { grid-template-columns: 1fr 140px 1fr; gap: 16px; }
    .score-team__logo { width: 110px; height: 110px; }
    .score-center__value { font-size: 54px; }
    .match-grid { grid-template-columns: 1fr; }
    .match-grid > aside { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 20px; }
}
@media (max-width: 640px) {
    .scoreboard__top { padding: 22px 18px 0; text-align: center; }
    .scoreboard__main { grid-template-columns: 1fr 90px 1fr; gap: 7px; padding: 30px 12px 35px; }
    .score-team__logo { width: 80px; height: 80px; margin-bottom: 13px; padding: 7px; }
    .score-team h1, .score-team h2 { font-size: 13px; }
    .score-team p { font-size: 10px; }
    .score-center__value { margin-top: 12px; font-size: 40px; }
    .score-center__time { font-size: 11px; }
    .score-center__status { font-size: 8px; }
    .scoreboard__actions { flex-direction: column; padding: 0 16px 24px; }
    .match-content { padding-top: 24px; }
    .match-panel { border-radius: 17px; }
    .match-panel__head, .match-panel__body { padding: 17px; }
    .periods { grid-template-columns: repeat(3,1fr); }
    .match-grid > aside { grid-template-columns: 1fr; }
    .timeline::before { left: 56px; }
    .event { grid-template-columns: 44px 24px 1fr; gap: 0 7px; }
    .event__icon { width: 24px; height: 24px; }
}