/* Blok Koşusu ekran yazıları: dikey (9:16) yayına göre, ölçüler vh. */
body { background: #9fd3f2; }

/* üstte yarış çubuğu: koşucuların profil resimleri ilerlemelerine göre dizilir */
.top { position: absolute; left: 0; right: 0; top: 1.6vh; display: flex; flex-direction: column; align-items: center; gap: 0.6vh; }
.track { position: relative; display: flex; align-items: center; gap: 0.6vh; width: 86%; padding: 0.5vh 1vh; border-radius: 3vh; background: #0b0d14c8; box-shadow: 0 0.8vh 2vh #0005; }
.track .flag { font-size: 2vh; }
.progress { position: relative; flex: 1; height: 4.4vh; }
.progress::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 0.6vh; transform: translateY(-50%); border-radius: 1vh; background: linear-gradient(90deg, #2f6b34 0%, #6faa45 35%, #c9d3dc 55%, #ffffff 80%, #ffc94a 100%); }
.progress .dot { position: absolute; top: 50%; transform: translate(-50%, -50%); transition: left 0.2s linear; }
.progress .dot .av { width: 3vh; height: 3vh; border: 0.25vh solid #fff; font-size: 1.3vh; box-shadow: 0 0.3vh 0.8vh #0007; }
.progress .dot.lead .av { width: 3.8vh; height: 3.8vh; border-color: #ffc94a; }
.zone { padding: 0.3vh 1.2vh; border-radius: 2vh; background: #0b0d14b0; font-size: 1.5vh; font-weight: 900; }

.board { position: absolute; left: 1vh; top: 16.5vh; margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 0.45vh; width: 21vh; }
.board li { display: flex; align-items: center; gap: 0.5vh; padding: 0.25vh 0.7vh 0.25vh 0.3vh; border-radius: 2vh; background: #0b0d14b8; font-size: 1.4vh; font-weight: 800; }
.board li:nth-child(1) { background: linear-gradient(90deg, #f5c518d0, #0b0d14c4 70%); }
.board li > i { font-style: normal; width: 2.2vh; text-align: center; font-weight: 900; color: var(--gold); }
.board li:nth-child(1) > i { color: #1b1405; }
.board .av { width: 2.3vh; height: 2.3vh; font-size: 1.2vh; }
.board .who { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.board .w { font-size: 1.2vh; }

.guide { top: 16.5vh; }
.guide div { width: 7.4vh; padding: 0.35vh 0.3vh; }
.guide img { width: 3.4vh; height: 3.4vh; }
.guide i { font-size: 2.5vh; line-height: 3.4vh; }
.guide span { font-size: 1.1vh; }
/* yarışta rehber küçülür: sadece hediye resmi (ekranın sağ şeridini kapatmasın) */
.hud.race-on .guide { gap: 0.45vh; opacity: 0.9; }
.hud.race-on .guide div { width: 5vh; padding: 0.25vh; border-radius: 1.2vh; }
.hud.race-on .guide img { width: 3vh; height: 3vh; }
.hud.race-on .guide i { font-size: 2.1vh; line-height: 3vh; }
.hud.race-on .guide span { display: none; }
/* izleme kamerası: sıralamada isme tıklanır, izlenen işaretli */
.board li { pointer-events: auto; cursor: pointer; }
.board li.watch { outline: 0.25vh solid #38d5f5; box-shadow: 0 0 1.4vh #38d5f5aa; }
.watching { position: absolute; left: 1vh; top: 47vh; max-width: 21vh; padding: 0.35vh 0.9vh; border-radius: 2vh; background: #0b0d14d0; border: 0.2vh solid #38d5f5; font-size: 1.3vh; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* hediye yazıları: sıralamanın sağında, rehberin solunda (önceden ortadaydı ve sıralamanın üstüne biniyordu) */
.calls { position: absolute; left: 23vh; right: 7.5vh; top: 16.5vh; display: flex; flex-direction: column; align-items: center; gap: 0.6vh; }
.call { display: flex; align-items: center; gap: 0.7vh; max-width: 100%; padding: 0.4vh 1.2vh 0.4vh 0.4vh; border-radius: 3vh; background: #0b0d14e0; border: 0.25vh solid #ffffff2a; font-size: 1.6vh; font-weight: 800; white-space: nowrap; animation: call 2.6s ease-out forwards; }
.call span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.call b { flex-shrink: 0; }
.call .av { width: 3vh; height: 3vh; flex-shrink: 0; }
.call b { color: var(--gold); }
@keyframes call { 0% { opacity: 0; transform: scale(0.7); } 8% { opacity: 1; transform: scale(1.06); } 14% { transform: scale(1); } 80% { opacity: 1; } 100% { opacity: 0; transform: translateY(-1vh); } }

.feed { bottom: 2vh; }
.feed div { font-size: 1.45vh; padding: 0.35vh 1.1vh 0.35vh 0.35vh; }
.feed .av { width: 2.4vh; height: 2.4vh; }

.count { position: absolute; left: 50%; top: 32%; transform: translate(-50%, -50%); font-size: 14vh; font-weight: 900; color: #fff; -webkit-text-stroke: 1vh #10b981; paint-order: stroke fill; text-shadow: 0 1vh 4vh #0009; animation: count 0.9s ease-out forwards; white-space: nowrap; }
@keyframes count { 0% { opacity: 0; transform: translate(-50%, -50%) scale(2); } 15% { opacity: 1; transform: translate(-50%, -50%) scale(1); } 80% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -50%) scale(0.85); } }

.banner { position: absolute; left: 50%; top: 36%; transform: translate(-50%, -50%); z-index: 5; display: flex; flex-direction: column; align-items: center; width: 92%; text-align: center; animation: banner 3s ease-out forwards; }
.bpic .av { width: 15vh; height: 15vh; font-size: 7vh; border: 0.7vh solid #fff; box-shadow: 0 0 5vh #ffc94a, 0 1.4vh 3vh #0008; margin-bottom: 1vh; }
.banner small { font-size: 3vh; font-weight: 900; -webkit-text-stroke: 0.5vh #000; paint-order: stroke fill; }
.banner b { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 5.4vh; font-weight: 900; color: var(--gold); -webkit-text-stroke: 0.8vh #000; paint-order: stroke fill; }
@keyframes banner { 0% { opacity: 0; transform: translate(-50%, -50%) scale(0.4); } 10% { opacity: 1; transform: translate(-50%, -50%) scale(1.08); } 18% { transform: translate(-50%, -50%) scale(1); } 85% { opacity: 1; } 100% { opacity: 0; } }

.lobby { position: absolute; left: 50%; top: 84%; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 0.5vh; padding: 1.8vh 3vh; border-radius: 3vh; background: #0b0d14dd; border: 0.3vh solid #ffffff2a; box-shadow: 0 2vh 6vh #0009; text-align: center; }
.lobby b { font-size: 3.6vh; font-weight: 900; line-height: 1; }
.lobby b span { padding: 0 1vh; border-radius: 1vh; background: linear-gradient(120deg, #10b981, #38d5f5); }
.lobby em { font-style: normal; font-size: 1.9vh; font-weight: 700; color: #ffffffcc; }
.lobby .timer { display: flex; align-items: baseline; gap: 0.4vh; }
.lobby .timer span { font-size: 4.6vh; font-weight: 900; color: var(--gold); line-height: 1; }
.lobby .cnt { font-size: 1.6vh; font-weight: 800; color: #ffffffb0; }

/* sonuç kartı: podyumun altında */
/* sonuç listesi solda (ortada podyumdaki 1-2-3 basamaklarının üstüne biniyordu); dikey ekranda altta */
.results { position: absolute; left: 1.5vh; top: 24vh; display: flex; flex-direction: column; align-items: center; gap: 1vh; animation: rise 0.6s ease-out; }
@keyframes rise { from { opacity: 0; translate: 0 4vh; } }
.results h2 { margin: 0; padding: 0.5vh 2vh; border-radius: 2vh; background: #0b0d14d8; font-size: 2.4vh; font-weight: 900; color: var(--gold); }
.results .panel { width: 29vh; }
@media (max-aspect-ratio: 1/1) { .results { left: 50%; top: auto; bottom: 9vh; transform: translateX(-50%); } }
.results li > i { font-style: normal; width: 2.6vh; text-align: center; font-weight: 900; color: var(--gold); }

/* üst bilgi: yarış numarası, süre, liderin metresi, koşucu sayısı */
.info { display: flex; align-items: center; gap: 1vh; padding: 0.4vh 1.4vh; border-radius: 2vh; background: #0b0d14d0; font-size: 1.45vh; font-weight: 800; white-space: nowrap; }
.info b { color: var(--gold); font-weight: 900; }
.info span { color: #ffffffd8; }
.info #raceTime { font-variant-numeric: tabular-nums; color: #fff; font-weight: 900; }
/* bekleme ve geri sayımda sıralama listesi gizli */
.hud.lobby-on .board { display: none; }
.board .w { font-variant-numeric: tabular-nums; color: #ffffffc0; }
.board li:nth-child(1) .w { color: #1b1405; font-weight: 900; }
/* mini harita: sağ altta */
.minimap { position: absolute; right: 1.2vh; bottom: 2.5vh; width: 12vh; height: 16.8vh; border-radius: 1.6vh; background: #0b0d14a8; border: 0.25vh solid #ffffff2a; }
.hud.lobby-on .minimap { display: none; }

/* spiker yazısı: üstte kısa şerit (lider değişti, son 100 metre, tökezleme, foto finiş) */
.announce { position: absolute; left: 50%; top: 15vh; z-index: 4; display: flex; align-items: center; gap: 0.9vh; max-width: 90%; padding: 0.5vh 1.8vh 0.5vh 0.5vh; border-radius: 3vh; background: linear-gradient(90deg, #ff4f6d, #ff8a3d); box-shadow: 0 0.8vh 2.4vh #0007; font-size: 2.1vh; font-weight: 900; white-space: nowrap; transform: translateX(-50%); animation: announce 2.6s ease-out forwards; }
.announce:not(:has(.av)) { padding-left: 1.8vh; }
.announce b { overflow: hidden; text-overflow: ellipsis; -webkit-text-stroke: 0.25vh #0006; paint-order: stroke fill; }
.announce .av { width: 3.6vh; height: 3.6vh; border: 0.25vh solid #fff; }
@keyframes announce { 0% { opacity: 0; transform: translate(-50%, -2vh) scale(0.7); } 10% { opacity: 1; transform: translate(-50%, 0) scale(1.06); } 16% { transform: translate(-50%, 0) scale(1); } 85% { opacity: 1; } 100% { opacity: 0; } }
.calls { top: 21vh; }

/* kazanan kartı: sonuçta üstte resim, ad ve galibiyet sayısı (yatay ve kısa: podyumdaki kazananın üstüne binmesin) */
.winner { position: absolute; left: 50%; top: 11vh; z-index: 4; display: grid; grid-template-columns: auto auto; grid-template-rows: auto auto auto; column-gap: 1.4vh; align-items: center; padding: 0.8vh 2.4vh 0.8vh 0.8vh; border-radius: 6vh; background: #0b0d14d8; border: 0.3vh solid var(--gold); box-shadow: 0 1vh 3vh #0008; transform: translateX(-50%); animation: winner 0.8s cubic-bezier(.2, 1.6, .4, 1); }
.winner .av { grid-row: 1 / 4; width: 8.5vh; height: 8.5vh; font-size: 3.4vh; border: 0.5vh solid var(--gold); animation: glow 1.4s ease-in-out infinite alternate; }
.winner small { font-size: 1.6vh; font-weight: 900; color: #fff; }
.winner b { max-width: 30vh; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 3.4vh; font-weight: 900; line-height: 1.1; color: var(--gold); }
.winner em { font-style: normal; font-size: 1.5vh; font-weight: 800; color: #ffffffc0; }
@keyframes winner { from { opacity: 0; transform: translate(-50%, -3vh) scale(0.3); } }
@keyframes glow { from { box-shadow: 0 0 1vh #ffc94a88; } to { box-shadow: 0 0 4vh #ffc94a; } }
.hud.results-on .board { display: none; }