/* Blok Partisi ekran yazıları: dikey (9:16) yayına göre ölçüler vh. */
body { background: #2b1a3a; }

.top { position: absolute; left: 0; right: 0; top: 1.2vh; display: flex; flex-direction: column; align-items: center; gap: 0.5vh; }
.title { display: flex; align-items: center; gap: 1vh; padding: 0.5vh 1.8vh; border-radius: 2vh; background: #0b0d14d0; border: 0.25vh solid #ff6bd688; box-shadow: 0 0 2vh #ff6bd655; }
.title b { font-size: 2.1vh; font-weight: 900; letter-spacing: 0.1em; color: #ffd1f2; }
.title span { font-size: 1.5vh; font-weight: 800; color: #ffffffb0; }
.title i { font-style: normal; color: #fff; }

.board { position: absolute; left: 1vh; top: 11vh; width: 23vh; padding: 0.7vh; }
.board li { gap: 0.5vh; padding: 0.25vh 0.3vh; font-size: 1.3vh; border-left: 0.45vh solid var(--c, transparent); }
.board li > i { font-style: normal; width: 1.8vh; text-align: center; color: var(--gold); font-weight: 900; }
.board .av { width: 2.4vh; height: 2.4vh; font-size: 1.1vh; }
.board .amt { font-size: 1.15vh; }

.guide { top: 11vh; }
.guide div { width: 7vh; padding: 0.35vh 0.2vh; }
.guide img { width: 3.2vh; height: 3.2vh; }
.guide i { font-size: 2.4vh; line-height: 3.2vh; }
.guide span { font-size: 1.05vh; }



.calls { position: absolute; left: 0; right: 8.6vh; top: 8.4vh; display: flex; flex-direction: column; align-items: center; gap: 0.6vh; z-index: 3; pointer-events: none; }
.call { display: flex; align-items: center; gap: 0.9vh; padding: 0.5vh 1.2vh 0.5vh 0.5vh; border-radius: 3vh; background: linear-gradient(90deg, #1a1040f5, #2d1a66f0); border: 0.2vh solid #ff5fae; box-shadow: 0 0 1.6vh #ff5fae88, 0 0.5vh 1.2vh #0007; animation: call 0.32s cubic-bezier(.3, 1.6, .5, 1); white-space: nowrap; }
.call > div:not(.av) { min-width: 0; }
.call span { display: block; font-size: 1.4vh; line-height: 1.15; font-weight: 800; color: #e9f3ff; }
.call b { display: block; font: 800 1.95vh/1.15 Outfit, sans-serif; color: #ffd1f2; }
.call .av { width: 4.2vh; height: 4.2vh; font-size: 1.9vh; }
.call img { width: 3.8vh; height: 3.8vh; object-fit: contain; }
@keyframes call { from { opacity: 0; transform: translateY(-1.6vh) scale(0.8); } }

.banner { position: absolute; left: 50%; top: 44%; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; width: 92%; text-align: center; animation: banner 3s ease-out forwards; }
.bpic .av { width: 12vh; height: 12vh; font-size: 5.5vh; border: 0.6vh solid #fff; box-shadow: 0 0 4vh #f5c518; margin-bottom: 1vh; }
.banner small { font-size: 2.8vh; font-weight: 900; color: #ffe08a; -webkit-text-stroke: 0.5vh #000; paint-order: stroke fill; }
.banner b { font-size: 3.6vh; font-weight: 900; color: #fff; -webkit-text-stroke: 0.6vh #000; paint-order: stroke fill; max-width: 100%; }
@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; } }

.end { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1vh; background: radial-gradient(80% 50% at 50% 50%, #2a0a3a99, #05030f00); animation: fade 0.5s ease-out; text-align: center; padding: 0 2vh; }
@keyframes fade { from { opacity: 0; } }

.likes { display: flex; flex-direction: column; align-items: center; gap: 0.3vh; padding: 0.4vh 1.2vh; border-radius: 1.4vh; background: #0b0d14b0; }
.likes span { font-size: 1.15vh; font-weight: 800; color: #ffd1f2; }
.likes .bar { width: 22vh; height: 0.9vh; border-radius: 1vh; background: #ffffff22; overflow: hidden; }
.likes .bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #ff4f6d, #ff6bd6); transition: width 0.4s; }

/* tur sonu: üç yıldız kürsüsü */
.end small { font-size: 2.6vh; font-weight: 900; letter-spacing: 0.12em; color: #ffd1f2; }
.end em { font-style: normal; font-size: 1.6vh; font-weight: 800; color: #ffffffa0; }
.stars { display: flex; align-items: flex-end; gap: 1.4vh; margin: 2vh 0; }
.star { display: flex; flex-direction: column; align-items: center; gap: 0.6vh; width: 12vh; animation: rise 0.7s ease-out backwards; }
.star.s1 { animation-delay: 0.5s; }
.star.s3 { animation-delay: 0.25s; }
@keyframes rise { from { opacity: 0; transform: translateY(6vh); } }
.star small { font-size: 4vh; letter-spacing: 0; }
.star .av { width: 10vh; height: 10vh; font-size: 4.5vh; border: 0.5vh solid #fff; }
.star.s1 .av { width: 14vh; height: 14vh; border-color: #f5c518; box-shadow: 0 0 4vh #f5c518; }
.star b { font-size: 1.8vh; font-weight: 900; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* dikey ekran: destekçi listesi bildirimlerin altında */
@media (max-aspect-ratio: 3/4) {
  .board { top: 25vh; width: 19vh; }
}

/* boş destekçi listesi */
.board li.empty { display: block; border: 0; padding: 0.5vh 0.4vh; font-size: 1.2vh; font-weight: 800; color: #ffd1f2; text-align: center; }
/* tur sonu: liste, rehber ve bildirimler çekilir, kürsü tek başına kalır */
.hud.end-on .board, .hud.end-on .calls, .hud.end-on .guide, .hud.end-on .likes { opacity: 0; transition: opacity 0.4s; }
.endnote { font-size: 2vh; font-weight: 900; color: #fff; -webkit-text-stroke: 0.35vh #000; paint-order: stroke fill; max-width: 40vh; }
.endnote:empty { display: none; }
.end.none .stars { display: none; }
.star b { font-size: 2.2vh; -webkit-text-stroke: 0.35vh #000; paint-order: stroke fill; }

/* dikey ekran: destekçi listesi sol altta (önce soldaki VIP sahnesini kapatıyordu) */
@media (max-aspect-ratio: 3/4) {
  .board { top: auto; bottom: 9vh; width: 18vh; }
}
/* yatay ekran: yazılar büyür (vh ölçüsü yatayda çok küçük kalıyordu) */
@media (min-aspect-ratio: 5/4) {
  .title b { font-size: 3vh; }
  .title span { font-size: 2.1vh; }
  .likes span { font-size: 1.6vh; }
  .likes .bar { width: 30vh; height: 1.2vh; }
  .board { top: 14vh; width: 30vh; padding: 1vh; }
  .board li { font-size: 1.9vh; padding: 0.4vh; }
  .board .av { width: 3.4vh; height: 3.4vh; font-size: 1.5vh; }
  .board .amt { font-size: 1.7vh; }
  .board li > i { width: 2.6vh; }
  .guide { top: 14vh; }
  .guide div { width: 10vh; padding: 0.5vh 0.3vh; }
  .guide img { width: 4.6vh; height: 4.6vh; }
  .guide i { font-size: 3.4vh; line-height: 4.6vh; }
  .guide span { font-size: 1.5vh; }
  .calls { top: 12vh; right: 12vh; }
  .call span { font-size: 2vh; }
  .call b { font-size: 2.7vh; }
  .call .av { width: 5.8vh; height: 5.8vh; }
  .call img { width: 5.2vh; height: 5.2vh; }
}
/* kürsü ekranın altında: üstte kazananın dans eden karakteri görünsün (önce ortada karakteri kapatıyordu) */
.end { justify-content: flex-end; padding-bottom: 12vh; background: linear-gradient(0deg, #1a0a2ecc 0%, #1a0a2e66 35%, #05030f00 60%); }
.end .stars { margin: 1vh 0; }