/* Zirve Kulesi ekran yazıları: sade; WIN ve basamak sayısı büyük, gerisi küçük. */
body { background: #9fd3f2; }

.top { position: absolute; left: 0; right: 0; top: 1.4vh; display: flex; justify-content: center; align-items: stretch; gap: 1vh; }
.win { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0.4vh 1.6vh; border-radius: 1.6vh; background: #0b0d14d8; border: 0.3vh solid #f5c518; box-shadow: 0 0.8vh 2.4vh #0005; }
.win small { font-size: 1.3vh; font-weight: 900; letter-spacing: 0.15em; color: #f5c518; }
.win b { font-size: 4.2vh; font-weight: 900; line-height: 1; color: #fff; }
.steps { display: flex; flex-direction: column; justify-content: center; gap: 0.5vh; width: 30vh; padding: 0.6vh 1.4vh 0.7vh; border-radius: 1.6vh; background: #0b0d14d8; border: 0.25vh solid #ffffff33; box-shadow: 0 0.8vh 2.4vh #0005; }
.steps .nums { display: flex; align-items: baseline; justify-content: center; gap: 0.6vh; }
.steps b { font-size: 3.6vh; font-weight: 900; line-height: 1; font-variant-numeric: tabular-nums; }
.steps span { font-size: 1.9vh; font-weight: 800; color: #ffffffb0; }
.steps i { font-style: normal; }
.steps .bar { position: relative; height: 1vh; border-radius: 1vh; background: repeating-linear-gradient(90deg, #ffffff30 0 0.25vh, transparent 0.25vh 2.6vh), #ffffff1a; }
.steps .bar i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 1vh; background: linear-gradient(90deg, #7cf29a, #38d5f5, #a98bff, #ffd166); transition: width 0.2s; }
.steps .bar u { position: absolute; top: 50%; left: 0; width: 1.9vh; height: 1.9vh; border-radius: 50%; transform: translate(-50%, -50%); background: #ffd166; border: 0.3vh solid #fff; box-shadow: 0 0 1vh #ffd166; transition: left 0.2s; }
.steps em { font-style: normal; font-size: 1.1vh; font-weight: 800; color: #ffffffa0; text-align: center; letter-spacing: 0.08em; }

/* hediye rehberi: sağda küçük iki sütun (yukarı yeşil, aşağı kırmızı) */
.guides { position: absolute; right: 1vh; top: 12vh; display: flex; gap: 0.5vh; }
.grow { display: flex; flex-direction: column; align-items: center; gap: 0.4vh; }
.grow em { font-style: normal; font-size: 1.6vh; }
.guides .guide { position: static; flex-direction: column; gap: 0.35vh; }
.guides .guide div { width: 4.8vh; padding: 0.2vh; border-radius: 1vh; background: #0b0d14c0; }
.grow.up .guide div { border-color: #7cf29a88; }
.grow.down .guide div { border-color: #ff8a8a88; }
.guides .guide img { width: 2.6vh; height: 2.6vh; }
.guides .guide span { font-size: 1vh; white-space: nowrap; }
.grow.up .guide span { color: #9bf5b4; }
.grow.down .guide span { color: #ffb0b0; }

/* hediye kartı: karakterin yanında büyük değer, altında gönderen */
.calls { position: absolute; inset: 0; pointer-events: none; }
.gcard { position: absolute; left: 0; top: 0; display: flex; flex-direction: column; align-items: center; gap: 0.3vh; animation: gcard 2.6s ease-out forwards; }
/* 12 Kasım 2026, kullanıcı: "+10, +100 ekrana daha büyük ve animasyonlu gelsin, eksilerde aynı": sayı büyük, zıplayarak
   gelir, parlar; artı yeşil yukarı sıçrar, eksi kırmızı sarsılır. Büyük sayılar daha büyük (.big 100+, .huge 1000+). */
.gcard b { display: block; font-size: min(8vh, 13vw); font-weight: 900; line-height: 1; -webkit-text-stroke: 0.9vh #0b0d14; paint-order: stroke fill; letter-spacing: -0.02em; }
.gcard.big b { font-size: min(10vh, 15vw); }
.gcard.huge b { font-size: min(12.5vh, 16vw); }
.gcard.up b { color: #7cf29a; animation: gUp 2.6s cubic-bezier(.2,.9,.3,1.2) forwards, gGlowUp 0.5s ease-in-out 0.35s 4 alternate; }
.gcard.down b { color: #ff6b6b; animation: gDown 2.6s ease-out forwards, gGlowDown 0.5s ease-in-out 0.35s 4 alternate; }
@keyframes gUp { 0% { transform: scale(0.2) translateY(4vh); } 12% { transform: scale(1.45) translateY(-1vh) rotate(-4deg); } 22% { transform: scale(0.92) rotate(2deg); } 32% { transform: scale(1.08); } 42%, 80% { transform: scale(1); } 100% { transform: scale(1.1) translateY(-4vh); } }
@keyframes gDown { 0% { transform: scale(0.2) translateY(-4vh); } 12% { transform: scale(1.45) translateY(1vh); } 18% { transform: scale(1.05) translateX(-1.4vh) rotate(-5deg); } 24% { transform: translateX(1.4vh) rotate(5deg); } 30% { transform: translateX(-0.9vh) rotate(-3deg); } 36% { transform: translateX(0.6vh); } 42%, 80% { transform: none; } 100% { transform: scale(0.9) translateY(4vh); } }
@keyframes gGlowUp { from { text-shadow: 0 0 1vh #7cf29a66; } to { text-shadow: 0 0 3.5vh #7cf29a, 0 0 7vh #b8ffcc; } }
@keyframes gGlowDown { from { text-shadow: 0 0 1vh #ff6b6b66; } to { text-shadow: 0 0 3.5vh #ff6b6b, 0 0 7vh #ffb0b0; } }
.gcard .who { display: flex; align-items: center; gap: 0.5vh; padding: 0.3vh 1vh 0.3vh 0.3vh; border-radius: 2vh; background: #0b0d14d8; font-size: 1.8vh; font-weight: 800; white-space: nowrap; }
.gcard .av { width: 3vh; height: 3vh; }
.gcard.up .who { border: 0.25vh solid #7cf29a; }
.gcard.down .who { border: 0.25vh solid #ff6b6b; }
@keyframes gcard { 0% { opacity: 0; } 8% { opacity: 1; } 80% { opacity: 1; } 100% { opacity: 0; } }

/* zirve geri sayımı: üstte, skor panelinin altında halkalı rozet (önce ekranın ortasında karakterin kafasının arkasında kalıyordu) */
/* zirve geri sayımı: üstte, skor panelinin altında halkalı rozet. 9 Kasım 2026 kullanıcı: "büyüt, belirgin olsun" (15vh'de küçük
   kalıyordu, alttaki "ZİRVEDE DAYAN" yazısı parlak bulutsunun ve bayrağın üstünde soluk ve bulanık okunuyordu): 21vh, kalın halka,
   yazı koyu plakada. */
.countdown { position: absolute; left: 50%; top: 10.5vh; transform: translateX(-50%); z-index: 7; display: grid; place-items: center; width: 21vh; height: 21vh; border-radius: 50%; background: conic-gradient(#ffd166 calc(var(--p, 1) * 360deg), #ffffff26 0); box-shadow: 0 1.2vh 3.5vh #000b, 0 0 5vh #ffd166aa; animation: cdPulse 1s ease-in-out infinite; }
.countdown::before { content: ""; position: absolute; inset: 1.6vh; border-radius: 50%; background: radial-gradient(circle at 50% 32%, #4a3590, #120a2a 75%); border: 0.35vh solid #ffffff40; box-shadow: inset 0 0 2vh #000a; }
.countdown b { position: relative; font-size: 12vh; font-weight: 900; line-height: 1; color: #ffd166; -webkit-text-stroke: 0.7vh #3a2400; paint-order: stroke fill; text-shadow: 0 0.6vh 1.5vh #000c; }
.countdown small { position: absolute; top: calc(100% + 1.2vh); left: 50%; transform: translateX(-50%); white-space: nowrap; padding: 0.6vh 2.4vh; border-radius: 1.4vh; background: #0b0d14eb; border: 0.3vh solid #ffd166; box-shadow: 0 0.6vh 1.6vh #000a; font-size: 3vh; font-weight: 900; letter-spacing: 0.08em; color: #ffe9a8; }
@keyframes cdPulse { 0%, 100% { box-shadow: 0 1.2vh 3.5vh #000b, 0 0 4vh #ffd16688; } 50% { box-shadow: 0 1.2vh 3.5vh #000b, 0 0 7vh #ffd166dd; } }
.banner { position: absolute; left: 50%; top: 40%; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; width: 92%; text-align: center; animation: banner 2.6s ease-out forwards; }
.banner.top { top: 47%; }
.banner small { font-size: 3.4vh; font-weight: 900; -webkit-text-stroke: 0.5vh #000; paint-order: stroke fill; }
.banner b { font-size: 5.2vh; font-weight: 900; line-height: 1.1; color: #ffd166; -webkit-text-stroke: 0.8vh #000; paint-order: stroke fill; }
@keyframes banner { 0% { opacity: 0; transform: translate(-50%, -50%) scale(0.4); } 12% { opacity: 1; transform: translate(-50%, -50%) scale(1.08); } 20% { transform: translate(-50%, -50%) scale(1); } 85% { opacity: 1; } 100% { opacity: 0; } }

/* en çok taşıyan / indiren listesi: solda küçük; üstünde takım komutu (11 Kasım 2026) */
.teams { position: absolute; left: 1vh; top: 12vh; display: flex; flex-direction: column; gap: 0.6vh; width: 17vh; pointer-events: none; }
.teams .cmd { margin: 0; padding: 0.4vh 0.8vh; border-radius: 1vh; background: #0b0d14c8; font-size: 1.15vh; font-weight: 800; color: #ffffffc0; text-align: center; }
.teams .cmd b { color: #ffd166; }
.team { padding: 0.5vh 0.6vh; border-radius: 1.2vh; background: #0b0d14c8; }
.team.up { border: 0.2vh solid #7cf29a88; }
.team.down { border: 0.2vh solid #ff8a8a88; }
.team em { display: block; font-style: normal; font-size: 1.05vh; font-weight: 900; letter-spacing: 0.06em; margin-bottom: 0.3vh; }
.team.up em { color: #9bf5b4; }
.team.down em { color: #ffb0b0; }
.team ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.3vh; }
.team li { display: flex; align-items: center; gap: 0.5vh; font-size: 1.25vh; font-weight: 800; }
.team .av { width: 2.4vh; height: 2.4vh; font-size: 1.1vh; }
.team .who { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.team .amt { font-variant-numeric: tabular-nums; }
.team.up .amt { color: #7cf29a; }
.team.down .amt { color: #ff8a8a; }

/* zirveden başlangıca geçiş: beyaz perde */
.fade { position: absolute; inset: 0; z-index: 9; background: #fff; pointer-events: none; animation: fadeOver 1.1s ease-in-out forwards; }
@keyframes fadeOver { 0% { opacity: 0; } 40%, 55% { opacity: 1; } 100% { opacity: 0; } }