.tribuna-lineup {
--tl-grass-a: #2c7a44;
--tl-grass-b: #266b3c;
--tl-line: rgba(255, 255, 255, 0.6);
--tl-frame: #101a14;
--tl-frame-2: #16241b;
--tl-ink: #eef4ee;
--tl-muted: #9db3a3;
--tl-gold: #e8c35a;
--tl-red: #e0483e;
--tl-yellow: #f2ce3a;
--tl-green-on: #5fd882;
--tl-font: "Oswald", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
max-width: 560px;
margin: 1.75em auto;
border-radius: 16px;
overflow: hidden;
background: linear-gradient(180deg, var(--tl-frame-2), var(--tl-frame));
box-shadow: 0 18px 40px -18px rgba(4, 12, 7, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.06);
font-family: var(--tl-font);
color: var(--tl-ink);
line-height: 1.25;
container-type: inline-size;
}
.tribuna-lineup * {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.tribuna-lineup img {
border: 0;
max-width: 100%;
} .tl-loading,
.tl-empty {
padding: 34px 18px;
text-align: center;
font-size: 15px;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--tl-muted);
} .tl-head {
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
gap: 10px;
padding: 14px 16px 12px;
background:
radial-gradient(140% 160% at 50% -40%, rgba(94, 175, 118, 0.28), transparent 60%),
linear-gradient(180deg, #182a1e, #121f17);
border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
.tl-team {
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
text-align: center;
min-width: 0;
}
.tl-team-logo {
width: 44px;
height: 44px;
object-fit: contain;
filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.45));
}
.tl-team-name {
font-size: 15px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100%;
}
.tl-team-formation {
font-size: 12px;
font-weight: 500;
letter-spacing: 0.22em;
color: var(--tl-gold);
}
.tl-mid {
display: flex;
flex-direction: column;
align-items: center;
gap: 2px;
padding: 0 6px;
}
.tl-score {
font-size: 30px;
font-weight: 600;
letter-spacing: 0.04em;
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.tl-score-sep {
color: var(--tl-muted);
padding: 0 2px;
}
.tl-state {
font-size: 11px;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.18em;
color: var(--tl-muted);
}
.tl-state--live {
color: var(--tl-green-on);
} .tl-pitch {
position: relative;
aspect-ratio: 100 / 130;
margin: 12px;
border-radius: 10px;
overflow: hidden;
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08), inset 0 14px 34px rgba(0, 0, 0, 0.32);
}
.tl-pitch svg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
display: block;
}
.tl-pitch::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background:
radial-gradient(130% 55% at 50% 0%, rgba(255, 255, 255, 0.08), transparent 55%),
radial-gradient(160% 80% at 50% 115%, rgba(0, 0, 0, 0.34), transparent 55%);
} .tl-player {
position: absolute;
transform: translate(-50%, -50%);
display: flex;
flex-direction: column;
align-items: center;
gap: 3px;
z-index: 2;
width: 21%;
}
.tl-avatar {
position: relative;
width: 46px;
height: 46px;
}
@supports (width: 1cqw) {
.tl-avatar {
width: clamp(36px, 10.5cqw, 52px);
height: clamp(36px, 10.5cqw, 52px);
}
}
.tl-avatar-img,
.tl-avatar-fallback {
width: 100%;
height: 100%;
border-radius: 50%;
background: #dfe7df;
object-fit: cover;
object-position: top center;
box-shadow: 0 3px 8px rgba(0, 0, 0, 0.45), 0 0 0 2px rgba(255, 255, 255, 0.85);
}
.tl-avatar--captain .tl-avatar-img,
.tl-avatar--captain .tl-avatar-fallback {
box-shadow: 0 3px 8px rgba(0, 0, 0, 0.45), 0 0 0 2px var(--tl-gold);
}
.tl-avatar-fallback {
display: flex;
align-items: center;
justify-content: center;
font-size: 15px;
font-weight: 600;
color: #45584a;
letter-spacing: 0.03em;
}
.tl-num {
position: absolute;
right: -4px;
bottom: -3px;
min-width: 18px;
height: 18px;
padding: 0 4px;
border-radius: 9px;
background: #0d150f;
color: #fff;
font-size: 11px;
font-weight: 600;
line-height: 18px;
text-align: center;
font-variant-numeric: tabular-nums;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}
.tl-cap {
position: absolute;
left: -4px;
top: -3px;
width: 16px;
height: 16px;
border-radius: 50%;
background: var(--tl-gold);
color: #21200f;
font-size: 10px;
font-weight: 600;
line-height: 16px;
text-align: center;
}
.tl-goal {
position: absolute;
right: -6px;
top: -5px;
height: 17px;
min-width: 17px;
padding: 0 3px;
border-radius: 9px;
background: #fff;
color: #111;
font-size: 11px;
line-height: 17px;
text-align: center;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}
.tl-goal--og {
background: var(--tl-red);
color: #fff;
font-size: 9px;
font-weight: 600;
letter-spacing: 0.02em;
}
.tl-card {
position: absolute;
left: -3px;
bottom: 0;
width: 9px;
height: 13px;
border-radius: 2px;
transform: rotate(-8deg);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}
.tl-card--y { background: var(--tl-yellow); }
.tl-card--r { background: var(--tl-red); }
.tl-card--yr {
background: linear-gradient(135deg, var(--tl-yellow) 45%, var(--tl-red) 55%);
}
.tl-pname {
max-width: 100%;
padding: 2px 7px;
border-radius: 8px;
background: rgba(8, 18, 11, 0.72);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.04em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
color: #f2f7f2;
}
@supports (width: 1cqw) {
.tl-pname { font-size: clamp(9px, 2.5cqw, 12px); }
.tl-num { font-size: clamp(10px, 2.4cqw, 12px); }
}
.tl-off {
color: var(--tl-red);
font-weight: 600;
} .tl-bench {
padding: 4px 14px 16px;
}
.tl-bench-title {
padding: 10px 2px 8px;
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.24em;
color: var(--tl-muted);
text-align: center;
}
.tl-bench-cols {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0 14px;
}
.tl-bench-row {
display: flex;
align-items: center;
gap: 8px;
padding: 4px 2px;
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
min-width: 0;
}
.tl-bench-row:last-child {
border-bottom: 0;
}
.tl-bench-img,
.tl-bench-fallback {
flex: 0 0 26px;
width: 26px;
height: 26px;
border-radius: 50%;
background: #dfe7df;
object-fit: cover;
object-position: top center;
}
.tl-bench-fallback {
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 10px;
font-weight: 600;
color: #45584a;
}
.tl-bench-num {
flex: 0 0 20px;
font-size: 12px;
font-weight: 600;
color: var(--tl-muted);
text-align: right;
font-variant-numeric: tabular-nums;
}
.tl-bench-name {
font-size: 13px;
font-weight: 500;
letter-spacing: 0.03em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
min-width: 0;
}
.tl-bench-goal {
margin-left: auto;
font-size: 11px;
white-space: nowrap;
}
.tl-bench-goal + .tl-bench-in,
.tl-bench-goal + .tl-bench-pos {
margin-left: 6px;
}
.tl-bench-in {
margin-left: auto;
font-size: 11px;
font-weight: 600;
color: var(--tl-green-on);
white-space: nowrap;
}
.tl-bench-pos {
margin-left: auto;
font-size: 10px;
letter-spacing: 0.08em;
color: var(--tl-muted);
}
.tl-bench-in + .tl-bench-pos {
margin-left: 6px;
}
.tl-coach-label {
flex: 0 0 auto;
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.14em;
color: var(--tl-gold);
} .tl-credit {
padding: 8px 14px 12px;
text-align: center;
font-size: 10px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: rgba(157, 179, 163, 0.55);
}
@media (max-width: 420px) {
.tl-bench-cols {
grid-template-columns: 1fr;
}
.tl-team-logo {
width: 36px;
height: 36px;
}
.tl-team-name {
font-size: 13px;
}
.tl-score {
font-size: 24px;
}
}