:root {
    --olympic-red: #c91443;
    --display-yellow: #f4dc35;
    --panel-blue: #06348a;
    --night: #050812;
}

* { box-sizing: border-box; }
html, body, #form1 { width: 100%; min-width: 320px; min-height: 100%; margin: 0; }
body { min-height: 100vh; overflow: hidden; background: #02040a; color: var(--display-yellow); font-family: "Arial Narrow", "Roboto Condensed", Arial, sans-serif; }

.olympic-scoreboard { display: grid; grid-template-rows: 12vh 25vh 51vh 12vh; position: relative; width: 100vw; height: 100vh; overflow: hidden; border: clamp(5px, .7vw, 13px) solid var(--olympic-red); background: radial-gradient(circle at 50% 40%, #101727 0, var(--night) 58%, #010208 100%); box-shadow: inset 0 0 35px rgba(0,0,0,.9); }
.scoreboard-header { display: flex; align-items: center; justify-content: space-between; padding: 0 3vw; border-bottom: 2px solid rgba(201,20,67,.7); color: #fff; font-size: clamp(12px, 1.5vw, 28px); letter-spacing: .08em; }
.games-mark, .live-badge { display: flex; align-items: center; gap: 1vw; }
.rings { position: relative; width: 72px; height: 32px; }
.rings i { position: absolute; width: 22px; height: 22px; border: 3px solid; border-radius: 50%; }
.rings i:nth-child(1) { left: 0; color: #1686d9; }.rings i:nth-child(2) { left: 24px; color: #111; border-color: #ddd; }.rings i:nth-child(3) { left: 48px; color: #e6273f; }.rings i:nth-child(4) { top: 11px; left: 12px; color: #e9c51c; }.rings i:nth-child(5) { top: 11px; left: 36px; color: #18a759; }
.match-label { padding: .55em 1.5em; background: var(--panel-blue); font-weight: 900; }
.live-badge span { width: .7em; height: .7em; border-radius: 50%; background: var(--olympic-red); box-shadow: 0 0 12px var(--olympic-red); }

.competitors { display: grid; grid-template-columns: 1fr 9vw 9vw 1fr; align-items: center; gap: 1.2vw; padding: 1.5vh 3vw; }
.competitor { min-width: 0; }.competitor-two { text-align: right; }
.country { display: flex; align-items: center; gap: 1vw; font-size: clamp(24px, 4vw, 72px); font-weight: 900; line-height: 1; }
.competitor-two .country { justify-content: flex-end; }
.flag { display: inline-block; width: clamp(50px, 8vw, 145px); height: clamp(30px, 5vw, 88px); border: 2px solid rgba(255,255,255,.35); }
.flag-one { background: linear-gradient(135deg, #159447 0 45%, #ffd52b 45% 55%, #1559a0 55%); }.flag-two { background: linear-gradient(to bottom, #fff 0 50%, #dc173b 50%); }
.competitor h1 { margin: 1vh 0 0; overflow: hidden; color: var(--display-yellow); font-size: clamp(22px, 3.1vw, 58px); font-stretch: condensed; line-height: 1; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.set-score { display: grid; place-items: center; width: 8vw; min-width: 52px; aspect-ratio: 1; border: .35vw solid rgba(255,255,255,.25); background: #071945; color: #fff; font-size: clamp(38px, 6vw, 110px); font-weight: 900; box-shadow: inset 0 0 20px #000; }

.match-area { display: grid; grid-template-columns: 1fr minmax(310px, 54vw) 1fr; align-items: center; gap: 2vw; padding: 1vh 3vw; }
.current-score { display: grid; grid-template-columns: 2vw 1fr auto 1fr 2vw; align-items: center; justify-items: center; min-height: 34vh; border: .5vw solid rgba(255,255,255,.2); background: rgba(0,0,0,.3); box-shadow: 0 0 30px rgba(0,0,0,.8), inset 0 0 25px rgba(0,0,0,.7); }
.current-score strong { font-size: clamp(100px, 17vw, 320px); font-weight: 900; letter-spacing: -.08em; line-height: .8; text-shadow: 0 0 16px rgba(244,220,53,.22); }
.score-divider { font-size: clamp(60px, 8vw, 150px); font-weight: 900; }
.service-dot { width: clamp(10px, 1.5vw, 28px); aspect-ratio: 1; border-radius: 50%; }.service-dot.active { background: var(--display-yellow); box-shadow: 0 0 14px var(--display-yellow); }
.set-history { display: flex; flex-direction: column; gap: 1.2vh; font-size: clamp(28px, 4vw, 76px); font-weight: 900; line-height: 1; }
.set-history-two { text-align: right; }.set-history div::before { content: "• "; color: var(--olympic-red); }.set-history-two div::before { content: ""; }.set-history-two div::after { content: " •"; color: var(--olympic-red); }.set-history .set-winner { color: #fff; }

.scoreboard-footer { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 0 3vw; border-top: 2px solid rgba(201,20,67,.7); font-size: clamp(12px, 1.5vw, 28px); font-weight: 800; letter-spacing: .06em; }
.brand { color: #fff; font-size: 1.25em; }.brand span { color: #2aaa55; }.scoreboard-footer time { justify-self: end; }

@media (max-width: 700px) {
    .olympic-scoreboard { grid-template-rows: 11vh 24vh 54vh 11vh; }
    .games-mark strong, .live-badge { display: none; }
    .competitors { grid-template-columns: 1fr 54px 54px 1fr; padding-inline: 2vw; }
    .flag { display: none; }.country { font-size: 22px; }
    .match-area { grid-template-columns: 17vw 1fr 17vw; gap: 1vw; padding-inline: 2vw; }
    .current-score { grid-template-columns: 10px 1fr auto 1fr 10px; }
    .scoreboard-footer { grid-template-columns: 1fr auto; }.brand { display: none; }
}