/* Tokat Kralı: dikey (9:16) yayına göre; ölçüler ekran yüksekliğine (vh) bağlı. Ortak parçalar kit.css'te. */
body { background: radial-gradient(ellipse at 50% 30%, #5a1830 0%, #2a0f1c 60%, #12060c 100%); }

/* üst: iki dövüşçünün kartı, can çubukları */
.vs { position: absolute; left: 1.2vh; right: 1.2vh; top: 1.2vh; display: flex; align-items: flex-start; gap: 0.8vh; }
.vsmid { flex: none; align-self: center; margin-top: 1.4vh; font-size: 4.2vh; font-weight: 900; font-style: italic; color: var(--gold); -webkit-text-stroke: 0.6vh #2a0f1c; paint-order: stroke fill; text-shadow: 0 0.6vh 1.6vh #000a; }
.fc { flex: 1; min-width: 0; padding: 0.8vh; border-radius: 1.8vh; background: var(--panel); border: 0.3vh solid #ffffff22; }
.fc.king { border-color: var(--gold); box-shadow: 0 0 2.4vh #ffc94a66; }
.fc.R { text-align: right; }
.fc .who { display: flex; align-items: center; gap: 0.7vh; }
.fc.R .who { flex-direction: row-reverse; }
.fc .who .av { width: 4.4vh; height: 4.4vh; font-size: 2.2vh; border: 0.3vh solid #fff; }
.fc.king .who .av { border-color: var(--gold); }
.fc .who b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 2.1vh; font-weight: 900; }
.fc .hp { position: relative; height: 2.2vh; margin-top: 0.7vh; border-radius: 1.2vh; background: #00000080; overflow: hidden; border: 0.2vh solid #ffffff33; }
.fc .hp i { position: absolute; top: 0; bottom: 0; left: 0; border-radius: 1.2vh; }
.fc.R .hp i { left: auto; right: 0; }
.fc .hp .lag { background: #fff; opacity: 0.75; }
.fc .hp .cur { background: linear-gradient(90deg, #4be36b, #b5f55a); transition: background 0.3s; }
.fc.low .hp .cur { background: linear-gradient(90deg, #ff3b4f, #ff8a3a); animation: low 0.5s ease-in-out infinite alternate; }
.fc .hp span { position: absolute; inset: 0; display: grid; place-items: center; font-size: 1.5vh; font-weight: 900; text-shadow: 0 0.1vh 0.3vh #000; }
.fc .badges { display: flex; flex-wrap: wrap; gap: 0.5vh; margin-top: 0.6vh; min-height: 2.2vh; }
.fc.R .badges { justify-content: flex-end; }
.fc .badges em { font-style: normal; padding: 0.2vh 0.8vh; border-radius: 1vh; background: #ffffff1c; font-size: 1.35vh; font-weight: 900; }
.fc .badges em.crown { background: linear-gradient(120deg, #ffe08a, #ffb21e); color: #3a2200; }
.fc .badges em.ch { background: #ff4d6d33; color: #ffb3c1; }
.fc .empty { padding: 1.4vh 0.4vh; font-size: 1.5vh; font-weight: 800; color: #ffffffb3; }
@keyframes low { to { filter: brightness(1.5); } }

/* beğeni coşku çubuğu */
.hype { position: absolute; left: 50%; top: 13.6vh; transform: translateX(-50%); width: 46vh; max-width: 92%; height: 2.6vh; border-radius: 1.4vh; background: var(--panel); border: 0.25vh solid #ffffff22; overflow: hidden; }
.hype i { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(90deg, #ff5a8a, #ff9ad0); transition: width 0.3s; }
.hype span { position: absolute; inset: 0; display: grid; place-items: center; font-size: 1.5vh; font-weight: 900; text-shadow: 0 0.1vh 0.3vh #000; }
.hype.on { border-color: #ffb14a; box-shadow: 0 0 2.4vh #ff7a3a; }
.hype.on i { background: linear-gradient(90deg, #ff3b2f, #ffb14a, #ffe14a); }
/* spiker satırı: rekor yazısının yerinde birkaç saniye */
.caster { position: absolute; left: 50%; top: 16.8vh; transform: translateX(-50%); max-width: 90%; padding: 0.5vh 1.6vh; border-radius: 2vh; background: linear-gradient(120deg, #ff4d6dee, #a855f7ee); font-size: 1.7vh; font-weight: 900; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; box-shadow: 0 0.6vh 2vh #0007; animation: caster 3.2s ease-out forwards; z-index: 2; }
@keyframes caster { 0% { opacity: 0; transform: translate(-50%, -1vh); } 8% { opacity: 1; transform: translate(-50%, 0); } 88% { opacity: 1; } 100% { opacity: 0; } }
.record { position: absolute; left: 50%; top: 17vh; transform: translateX(-50%); padding: 0.3vh 1.4vh; border-radius: 2vh; background: #0008; font-size: 1.4vh; font-weight: 800; white-space: nowrap; color: #ffe8a8; }

/* sol: sıradakiler */
.queue { position: absolute; left: 1.4vh; top: 20vh; width: 15vh; padding: 0.7vh; }
.queue li { font-size: 1.35vh; padding: 0.25vh 0.3vh; }
.queue .av { width: 2.6vh; height: 2.6vh; font-size: 1.3vh; }

/* sağ: rehber (13 hediye sığsın) */
.guide { top: 20vh; gap: 0.35vh; }
.guide div { width: 7vh; padding: 0.25vh 0.2vh; border-radius: 1.2vh; }
.guide img { width: 2.9vh; height: 2.9vh; }
.guide i { font-size: 2.1vh; line-height: 2.9vh; }
.guide span { font-size: 1.05vh; }

.feed { bottom: 2vh; }
.feed div { font-size: 1.6vh; }
.feed div.ko b { color: #d9a3ff; }
.feed div.save b { color: #7fd3ff; }
.feed div.shield b { color: #9ff0ff; }
.feed div.heal b { color: #8affa6; }
.feed div.flee b { color: #ffb3c1; }

/* başın üstündeki ad etiketi */
.tags { position: absolute; inset: 0; }
.tag { position: absolute; left: 0; top: 0; display: flex; align-items: center; gap: 0.6vh; padding: 0.35vh 1.2vh 0.35vh 0.35vh; border-radius: 2.4vh; background: #0b0d14d9; border: 0.25vh solid #ffffff40; font-size: 1.6vh; font-weight: 900; white-space: nowrap; will-change: transform; }
.tag .av { width: 3vh; height: 3vh; font-size: 1.5vh; }
.tag.king { border-color: var(--gold); }
.tag.king::before { content: "👑"; position: absolute; left: 50%; top: -2.6vh; transform: translateX(-50%); font-size: 2.4vh; }

/* ŞAPP! yazıları */
.pows { position: absolute; inset: 0; overflow: hidden; }
.pop { position: absolute; transform: translate(-50%, -50%) rotate(var(--r)); display: flex; flex-direction: column; align-items: center; font-weight: 900; font-style: italic; white-space: nowrap; color: var(--c, #fff); -webkit-text-stroke: 0.6vh #2a0f1c; paint-order: stroke fill; animation: pop 1.5s ease-out forwards; }
.pop small { font-size: 0.55em; color: #fff; font-style: normal; }
.pop.t0 { font-size: 4vh; }
.pop.t1 { font-size: 5.2vh; }
.pop.t2 { font-size: 6.6vh; }
.pop.t3 { font-size: 8.4vh; }
.pop.t4 { font-size: 9.4vh; }
.pop.block { font-size: 4.6vh; color: #9ff0ff; }
.pop.heal { font-size: 4vh; color: #8affa6; }
.pop.count { font-size: 7vh; color: #fff; font-style: normal; }
.pop.anne { font-size: 3.4vh; color: #ff6b8a; animation-duration: 1.8s; }
.pop.tier { font-size: 3.4vh; color: var(--c); animation-duration: 1.2s; }
@keyframes pop {
  0% { opacity: 0; transform: translate(-50%, -50%) rotate(var(--r)) scale(0.2); }
  12% { opacity: 1; transform: translate(-50%, -50%) rotate(var(--r)) scale(1.25); }
  22% { transform: translate(-50%, -50%) rotate(var(--r)) scale(1); }
  75% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -120%) rotate(var(--r)) scale(1); }
}

/* sert tokatta ekran bir an parlar */
.whiteout { position: absolute; inset: 0; z-index: 3; background: radial-gradient(circle, #ffffff 0%, #ffe8a800 70%); animation: whiteout 0.35s ease-out forwards; }
.whiteout.t3, .whiteout.t4 { background: radial-gradient(circle, #ffffff 0%, #ff9ad0aa 50%, #ff4d6d00 80%); animation-duration: 0.6s; }
@keyframes whiteout { 0% { opacity: 0.85; } 100% { opacity: 0; } }

.ready { position: absolute; left: 50%; top: 32%; transform: translate(-50%, -50%); z-index: 4; font-size: 9vh; font-weight: 900; font-style: italic; color: var(--gold); -webkit-text-stroke: 0.9vh #2a0f1c; paint-order: stroke fill; text-shadow: 0 1vh 3vh #000a; animation: ready 0.7s ease-out forwards; }
@keyframes ready { 0% { opacity: 0; transform: translate(-50%, -50%) scale(2.2); } 30% { opacity: 1; transform: translate(-50%, -50%) scale(1); } 100% { opacity: 1; transform: translate(-50%, -50%) scale(1.05); } }

/* yeni kral / çift tokat duyurusu */
.banner { position: absolute; left: 50%; top: 31%; transform: translate(-50%, -50%); z-index: 5; display: flex; flex-direction: column; align-items: center; width: 92%; text-align: center; animation: banner 4.2s ease-out forwards; }
.bannerpic .av { width: 13vh; height: 13vh; font-size: 6vh; border: 0.8vh solid var(--c, #fff); box-shadow: 0 0 6vh var(--c, #fff), 0 1.6vh 4vh #0008; }
.banner small { margin-top: 1.2vh; padding: 0.4vh 1.6vh; border-radius: 2vh; background: #0b0d14d9; font-size: 2.4vh; font-weight: 900; letter-spacing: 0.06em; }
.banner b { margin-top: 0.4vh; font-size: 6.4vh; font-weight: 900; font-style: italic; line-height: 1.05; color: var(--c); -webkit-text-stroke: 0.8vh #2a0f1c; paint-order: stroke fill; }
.banner > span { margin-top: 0.6vh; padding: 0.5vh 2.4vh; border-radius: 3vh; background: #0b0d14d9; font-size: 2.6vh; font-weight: 900; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@keyframes banner {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.3) rotate(-8deg); }
  9% { opacity: 1; transform: translate(-50%, -50%) scale(1.12) rotate(2deg); }
  16% { transform: translate(-50%, -50%) scale(1) rotate(0); }
  86% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -56%) scale(0.95); }
}

/* dikey ekran: üst kartlar biraz daha sıkı */
@media (min-aspect-ratio: 4/3) {
  .vs { left: 25%; right: 25%; }
}

/* coşku (çift tokat) açıkken ekran kenarı kızıl yanar */
body.frenzy .hud::after { content: ""; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 9vh #ff3b2faa; animation: frenzyGlow 0.7s ease-in-out infinite alternate; }
@keyframes frenzyGlow { to { box-shadow: inset 0 0 14vh #ff7a2fcc; } }
.fc .badges em.host { background: #38d5f533; color: #9ff0ff; }

/* seyirci lafları: tribündeki seyircinin başının üstünde konuşma balonu */
.says { position: absolute; inset: 0; overflow: hidden; }
.say { position: absolute; left: 0; top: 0; max-width: 22vh; padding: 0.7vh 1.2vh; border-radius: 1.6vh; background: #fffdf5; color: #2a1408; font-size: 1.55vh; font-weight: 900; line-height: 1.15; text-align: center; box-shadow: 0 0.5vh 1.4vh #0006; border: 0.25vh solid #2a1408; will-change: transform; animation: say 3.4s ease-out forwards; }
.say::after { content: ""; position: absolute; left: 50%; bottom: -1.1vh; transform: translateX(-50%); border: 0.6vh solid transparent; border-top: 0.9vh solid #2a1408; }
@keyframes say { 0% { opacity: 0; scale: 0.5; } 8% { opacity: 1; scale: 1.08; } 14% { scale: 1; } 85% { opacity: 1; } 100% { opacity: 0; } }