/* Turbo Pist ekran yazıları: dikey (9:16) yayına göre, ölçüler vh. */
body { background: #0b1220; }

.top { position: absolute; left: 0; right: 0; top: 1.4vh; display: flex; flex-direction: column; align-items: center; gap: 0.7vh; }
.title { display: flex; align-items: center; gap: 0.8vh; padding: 0.6vh 1.6vh; border-radius: 3vh; background: #0b0d14d9; border: 0.25vh solid #ffffff22; box-shadow: 0 0.8vh 2.4vh #0006; font-size: 1.9vh; }
.title b { font-weight: 900; letter-spacing: 0.04em; }
.title span { font-weight: 800; color: var(--gold); }
.title em { font-style: normal; font-weight: 900; font-size: 1.5vh; padding: 0.25vh 0.9vh; border-radius: 1.4vh; }
.title em.final { background: linear-gradient(120deg, #ffe08a, #f59e0b); color: #2a1a00; }
.title em.team { background: linear-gradient(90deg, #e63946 50%, #2563eb 50%); }
.title em.mega { background: linear-gradient(90deg, #a855f7, #38d5f5); }
.title em.mult { background: #ffffff1f; color: var(--gold); }
/* takım yarışı canlı skoru */
.teamscore { display: flex; border-radius: 3vh; overflow: hidden; font-size: 1.6vh; font-weight: 900; box-shadow: 0 0.8vh 2vh #0006; }
.teamscore span { display: flex; align-items: center; gap: 0.8vh; padding: 0.35vh 1.4vh; transition: filter 0.3s; }
.teamscore .r { background: linear-gradient(90deg, #8f0d15, #d4141f); }
.teamscore .b { background: linear-gradient(90deg, #1f5fe0, #0f2f8a); }
.teamscore b { font-size: 2.1vh; }
.teamscore.rl .b, .teamscore.bl .r { filter: saturate(0.5) brightness(0.75); }
/* skor satırı açıkken sol sıralama aşağı kayar (hedef çubuklarının üstüne biniyordu) */
.hud.team-on .board { top: 13.6vh; }
.hud.team-on .watching { top: 35vh; }
.goals { display: flex; gap: 1vh; }
.goal { display: flex; align-items: center; gap: 0.5vh; padding: 0.3vh 0.9vh; border-radius: 2vh; background: #0b0d14b8; font-size: 1.3vh; font-weight: 800; }
.goal i { font-style: normal; font-size: 1.5vh; }
.goal .bar { width: 9vh; height: 0.9vh; border-radius: 1vh; background: #ffffff22; overflow: hidden; }
.goal .bar span { display: block; height: 100%; width: 0; border-radius: 1vh; transition: width 0.4s; }
.goal.like .bar span { background: linear-gradient(90deg, #ff4f6d, #ff8fa3); }
.goal.mega .bar span { background: linear-gradient(90deg, #a855f7, #38d5f5); }
.goal small { min-width: 6vh; color: #ffffffcc; font-size: 1.2vh; }

/* sol: anlık sıralama */
.board { position: absolute; left: 1vh; top: 9.5vh; margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 0.45vh; width: 20vh; }
.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; border-left: 0.5vh solid transparent; }
.board li:nth-child(1) { background: linear-gradient(90deg, #f5c518d0, #0b0d14c4 70%); }
.board li.red { border-left-color: #e63946; }
.board li.blue { border-left-color: #2563eb; }
.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 .ic { font-size: 1.3vh; }
/* izleme kamerası: satıra tıklayınca o oyuncu izlenir (OBS Etkileşim); izlenen satır işaretli */
.board li { pointer-events: auto; cursor: pointer; }
.board li.watch { outline: 0.25vh solid #38d5f5; box-shadow: 0 0 1.4vh #38d5f5aa; }
.board li.watch .ic::after { content: "📺"; }
.watching { position: absolute; left: 1vh; top: 31vh; max-width: 20vh; 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; }

.guide { top: 10vh; }
.guide div { width: 7.6vh; padding: 0.4vh 0.3vh; }
.guide img { width: 3.6vh; height: 3.6vh; }
.guide i { font-size: 2.6vh; line-height: 3.6vh; }
.guide span { font-size: 1.15vh; }

/* hediye bildirimleri: altta ortada (üstteyken UFO ve meteorların önüne biniyordu) */
.calls { position: absolute; left: 50%; bottom: 13vh; transform: translateX(-50%); display: flex; flex-direction: column-reverse; align-items: center; gap: 0.6vh; }
.call small { font-size: 1.4vh; font-weight: 800; color: #ffffffb0; }
.call { display: flex; align-items: center; gap: 0.8vh; padding: 0.5vh 1.5vh 0.5vh 0.5vh; border-radius: 3vh; background: #0b0d14e0; border: 0.25vh solid #ffffff2a; font-size: 1.9vh; font-weight: 800; white-space: nowrap; animation: call 2.6s ease-out forwards; }
.call .av { width: 3.6vh; height: 3.6vh; }
.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: 30%; transform: translate(-50%, -50%); font-size: 14vh; font-weight: 900; color: #fff; -webkit-text-stroke: 1vh #e63946; paint-order: stroke fill; text-shadow: 0 1vh 4vh #0009; animation: count 0.8s 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 3.2s 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; letter-spacing: 0.06em; -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; } }

/* lobi: katılım çağrısı */
.lobby { position: absolute; left: 50%; top: 62%; 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 small { font-size: 1.6vh; font-weight: 900; letter-spacing: 0.1em; color: var(--gold); }
.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, #ff4f6d, #ffb347); }
.lobby em { font-style: normal; font-size: 2vh; font-weight: 700; color: #ffffffcc; }
.lobby .timer { display: flex; align-items: baseline; gap: 0.4vh; margin-top: 0.6vh; }
.lobby .timer span { font-size: 4.6vh; font-weight: 900; color: var(--gold); line-height: 1; }
.lobby .timer small { color: #fff; }
.lobby .cnt { font-size: 1.6vh; font-weight: 800; color: #ffffffb0; }

/* yarış sonu */
.results { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2vh; background: radial-gradient(80% 60% at 50% 45%, #0b0d14cc, #0b0d14f0); animation: fade 0.5s ease-out; }
@keyframes fade { from { opacity: 0; } }
.results h2 { margin: 0; font-size: 3.4vh; font-weight: 900; color: var(--gold); text-align: center; padding: 0 2vh; }
.podium { display: flex; align-items: flex-end; gap: 1.2vh; }
.step { display: flex; flex-direction: column; align-items: center; gap: 0.6vh; width: 13vh; animation: rise 0.7s ease-out both; }
.step.s1 { animation-delay: 0.5s; }
.step.s2 { animation-delay: 0.25s; }
.step b { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 1.9vh; font-weight: 900; }
.step .pic .av { width: 9vh; height: 9vh; font-size: 4vh; border: 0.5vh solid #fff; }
.step.s1 .pic .av { width: 12vh; height: 12vh; border-color: #ffc94a; box-shadow: 0 0 4vh #ffc94a; }
.step .blk { width: 100%; display: grid; place-items: center; border-radius: 1.2vh 1.2vh 0 0; font-size: 4vh; font-weight: 900; color: #1b1405; }
.step.s1 .blk { height: 16vh; background: linear-gradient(#ffe08a, #f5c518); }
.step.s2 .blk { height: 11vh; background: linear-gradient(#f3f4f6, #c4cad3); }
.step.s3 .blk { height: 8vh; background: linear-gradient(#f2c29b, #d48a55); }
@keyframes rise { from { opacity: 0; transform: translateY(5vh); } }
.results .panel { width: 40vh; }
.results .panel li > i { font-style: normal; width: 2.2vh; color: var(--gold); font-weight: 900; text-align: center; }

/* dikey (9:16) ekran: sağdaki rehber dar, yarışta sadece hediye resmi (pistin sağ kenarını kapatıyordu) */
@media (max-aspect-ratio: 3/4) {
  .guide { right: 0.8vh; gap: 0.5vh; }
  .guide div { width: 6vh; padding: 0.3vh 0.2vh; border-radius: 1.2vh; }
  .guide img { width: 3.2vh; height: 3.2vh; }
  .guide i { font-size: 2.2vh; line-height: 3.2vh; }
  .guide span { font-size: 1vh; }
  .hud.race-on .guide span { display: none; }
  .hud.race-on .guide div { width: 4.8vh; }
  .calls { bottom: 11vh; }
}