/* Kum Kırma ekran yazıları: dikey (9:16) yayına göre ölçüler vh. */
body { background: #7cc7ef; }

.top { position: absolute; left: 0; right: 0; top: 1.2vh; display: flex; justify-content: center; }
.title { display: flex; align-items: center; gap: 1vh; padding: 0.5vh 1.8vh; border-radius: 2vh; background: #0b0d14d0; border: 0.25vh solid #f5c51888; box-shadow: 0 0 2vh #f5c51833; }
.title b { font-size: 2.1vh; font-weight: 900; letter-spacing: 0.1em; color: #ffe08a; }
.title span { font-size: 1.4vh; font-weight: 800; color: #ffffffb0; white-space: nowrap; }
.title i { font-style: normal; color: #fff; }
.top { flex-direction: column; align-items: center; gap: 0.5vh; }
/* kazanma / kaybetme sayısı ve alanın doluluğu (TikQo'daki gibi) */
.tally { display: flex; gap: 0.6vh; }
.tally span { display: flex; align-items: center; gap: 0.5vh; padding: 0.3vh 1vh; border-radius: 1vh; background: #0b0d14d8; font-size: 1.25vh; font-weight: 900; letter-spacing: 0.05em; white-space: nowrap; }
.tally i { font-style: normal; color: #fff; }
.tally .w { color: #7cf29a; border: 0.2vh solid #7cf29a66; }
.tally .l { color: #ff7a7a; border: 0.2vh solid #ff7a7a66; }
.tally .k { position: relative; color: #ffe08a; border: 0.2vh solid #ffffff33; overflow: hidden; }
.tally .k em { position: absolute; left: 0; right: 0; bottom: 0; height: 0.35vh; background: #ffffff22; }
.tally .k u { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: linear-gradient(90deg, #ffd27a, #ff7a3a); transition: width 0.3s; }

/* hediye atanın fotoğrafı: altın çerçeve + sohbet puanı */
/* sıralamanın (sol) ve rehberin (sağ) arasında ortalanır; önceden ortadaydı ve sıralamanın üstüne biniyordu */
.card { position: absolute; left: 23vh; right: 8.4vh; top: 8.8vh; width: max-content; max-width: calc(100% - 31.4vh); margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 0.3vh; padding: 0.8vh 1.4vh 0.6vh; border-radius: 1.6vh; background: linear-gradient(#2a1d05ee, #120c02ee); border: 0.45vh solid #f5c518; box-shadow: 0 0 2.5vh #f5c518aa, inset 0 0 1.5vh #f5c51855; animation: card 0.45s cubic-bezier(.2,1.6,.4,1); }
@keyframes card { from { transform: scale(0.4); opacity: 0; } }
.card .av { width: 8.5vh; height: 8.5vh; border-radius: 1vh; font-size: 4vh; border: 0.35vh solid #ffe08a; }
.card b { font-size: 1.6vh; font-weight: 900; max-width: 16vh; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card small { font-size: 1.2vh; font-weight: 800; color: #ffe08a; }

.board { position: absolute; left: 1vh; top: 8.8vh; width: 21vh; padding: 0.7vh; }
.board li { gap: 0.5vh; padding: 0.25vh 0.3vh; font-size: 1.3vh; }
.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; border-radius: 0.4vh; }
.board .amt { font-size: 1.15vh; }

/* sınır göstergesi: en yüksek sütun */
.meter { position: absolute; left: 1.2vh; top: 30vh; display: flex; flex-direction: column; align-items: center; gap: 0.4vh; padding: 0.6vh; border-radius: 1.2vh; background: #0b0d14c0; }
.meter small { font-size: 1vh; font-weight: 900; color: #ff8a8a; letter-spacing: 0.1em; }
.meter .tube { position: relative; width: 2.2vh; height: 18vh; border-radius: 1.1vh; background: #ffffff1c; overflow: hidden; border: 0.2vh solid #ffffff30; }
.meter .tube i { position: absolute; left: 0; right: 0; bottom: 0; height: 0; background: linear-gradient(#ffd27a, #e0a64a); transition: height 0.3s; }
.meter .tube i.danger { background: linear-gradient(#ff5c5c, #c62828); animation: blink 0.4s infinite alternate; }
@keyframes blink { to { filter: brightness(1.6); } }
.meter b { font-size: 1.4vh; font-weight: 900; }


.guide { top: 8.8vh; }
.guide div { width: 6.6vh; padding: 0.3vh 0.2vh; }
.guide img { width: 2.9vh; height: 2.9vh; }
.guide i { font-size: 2.2vh; line-height: 2.9vh; }
.guide span { font-size: 1vh; }

.calls { position: absolute; left: 50%; bottom: 1.5vh; transform: translateX(-50%); display: flex; flex-direction: column-reverse; align-items: center; gap: 0.6vh; }
.call { display: flex; align-items: center; gap: 0.8vh; padding: 0.5vh 1.5vh 0.5vh 0.5vh; border-radius: 3vh; background: #0b0d14e6; border: 0.3vh solid #f5c518; font-size: 1.7vh; font-weight: 800; white-space: nowrap; animation: call 2.6s ease-out forwards; }
.call b { color: #ffe08a; }
.call.bad { border-color: #7cdc5a; }
.call.bad b { color: #a6f28a; }
.call .av { width: 3.2vh; height: 3.2vh; }
@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); } }

.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 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; }
/* şimşek parlamasının (skyflash) üstünde ve koyu plakada: sağanakla çakan şimşek yazıyı beyaza boğuyordu, parlak foto blokların
   üstünde de "Ad · 200 blok" satırı okunmuyordu (kullanıcı resmi) */
.banner { z-index: 6; }
.banner small, .banner b { padding: 0.5vh 2.2vh; border-radius: 1.4vh; background: #0b0d14d9; box-shadow: 0 0.6vh 1.6vh #0008; }
.banner small { font-size: 2.8vh; font-weight: 900; color: #ffe08a; -webkit-text-stroke: 0.5vh #000; paint-order: stroke fill; border: 0.25vh solid #ffd25a; margin-bottom: 0.6vh; }
.banner b { font-size: 3vh; font-weight: 900; color: #fff; -webkit-text-stroke: 0.6vh #000; paint-order: stroke fill; max-width: 100%; border: 0.25vh solid #ffffff40; }
@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% 45% at 50% 45%, #1a1408c0, #05030f00); animation: fade 0.5s ease-out; text-align: center; padding: 0 2vh; }
@keyframes fade { from { opacity: 0; } }
.end small { font-size: 3vh; font-weight: 900; letter-spacing: 0.08em; color: #ffe08a; -webkit-text-stroke: 0.5vh #000; paint-order: stroke fill; }
.end h2 { margin: 0; font-size: 4.2vh; font-weight: 900; -webkit-text-stroke: 0.6vh #000; paint-order: stroke fill; }
.end em { font-style: normal; font-size: 1.8vh; font-weight: 800; color: #fff; -webkit-text-stroke: 0.4vh #000; paint-order: stroke fill; }
.end .bpic .av { width: 16vh; height: 16vh; font-size: 7vh; border-radius: 1.5vh; }

/* nişandaki fotoğrafı puanlama: ortada büyük altın çerçeve, üstte ortalama, altta süre */
.rate { position: absolute; left: 50%; top: 47%; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 0.7vh; z-index: 4; animation: rateIn 0.45s cubic-bezier(.2,1.5,.4,1); text-align: center; }
@keyframes rateIn { from { opacity: 0; transform: translate(-50%, -50%) scale(0.5); } }
/* koyu plaka: arkadaki 3B tabelanın (HAPİSHANE) üstüne gelince okunmuyordu */
.rate .rcount { margin-bottom: 1.2vh; padding: 0.35vh 1.6vh; border: 0.25vh solid #ffd25a; border-radius: 99px; background: linear-gradient(#3a1d06e6, #1c0d02e6); box-shadow: 0 0.6vh 1.6vh #0008; font-size: 3.2vh; font-weight: 900; color: #ffe08a; letter-spacing: 0.05em; -webkit-text-stroke: 0.5vh #000; paint-order: stroke fill; }
.rate small { font-size: 1.4vh; font-weight: 800; color: #b8f28a; -webkit-text-stroke: 0.3vh #000; paint-order: stroke fill; }
/* uçma modu rozeti: üstteki sayaçların altında */
.flybadge { position: absolute; left: 50%; top: 31vh; transform: translateX(-50%); padding: 0.4vh 1.2vh; border-radius: 2vh; background: #0b0d14d0; border: 0.25vh solid #38d5f5; color: #9be7ff; font-size: 1.4vh; font-weight: 900; white-space: nowrap; }
.flybadge small { margin-left: 0.6vh; font-size: 1.05vh; color: #ffffffb0; font-weight: 700; }
/* fare kilitliyken ortada artı işareti (nişan) */
.cross { position: absolute; left: 50%; top: 50%; width: 2.2vh; height: 2.2vh; transform: translate(-50%, -50%); }
.cross::before, .cross::after { content: ""; position: absolute; background: #ffffffe6; box-shadow: 0 0 0.3vh #000a; }
.cross::before { left: 50%; top: 0; bottom: 0; width: 0.3vh; transform: translateX(-50%); }
.cross::after { top: 50%; left: 0; right: 0; height: 0.3vh; transform: translateY(-50%); }
/* yayıncı modunda ipucu: altta, rehberin solunda */
.autobadge { position: absolute; left: 50%; bottom: 1.4vh; transform: translateX(-50%); padding: 0.5vh 1.4vh; border-radius: 2vh; background: #0b0d14d0; border: 0.25vh solid #f5c518; color: #ffe08a; font-size: 1.4vh; font-weight: 900; white-space: nowrap; }
.autobadge small { margin-left: 0.6vh; font-size: 1.05vh; color: #ffffffb0; font-weight: 700; }
.autobadge[hidden] { display: none; }
.playhint { position: absolute; left: 50%; bottom: 1.4vh; transform: translateX(-50%); max-width: 94%; overflow: hidden; text-overflow: ellipsis; padding: 0.5vh 1.4vh; font-size: 1.15vh !important; border-radius: 2vh; background: #0b0d14c8; border: 0.2vh solid #ffffff33; font-size: 1.4vh; font-weight: 900; white-space: nowrap; }
.playhint small { font-size: 1.1vh; font-weight: 700; color: #ffffffa0; margin-left: 0.6vh; }
.skyflash { position: absolute; inset: 0; background: #eef4ff; opacity: 0; pointer-events: none; }

/* Esc ayarlar menüsü (Minecraft duraklatma ekranı gibi): koyu perde, ortada kart, kaydırıcılar */
.obtn { position: fixed; right: 1vh; bottom: 1vh; z-index: 30; width: 4.4vh; height: 4.4vh; border-radius: 1.2vh; border: 0.2vh solid #ffffff44; background: #0b0d14c8; color: #fff; font-size: 2.2vh; cursor: pointer; }
.opts { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; background: #05070dcc; backdrop-filter: blur(3px); }
.opts[hidden] { display: none; }
.ocard { width: min(92vw, 52vh); display: flex; flex-direction: column; gap: 1.3vh; padding: 2.2vh 2.4vh; border-radius: 2vh; background: #141826; border: 0.3vh solid #f5c51866; box-shadow: 0 2vh 6vh #000a; color: #fff; font-family: Outfit, system-ui, sans-serif; }
.ocard h3 { margin: 0 0 0.4vh; text-align: center; font-size: 2.6vh; font-weight: 900; letter-spacing: 0.12em; color: #ffe08a; }
.ocard label { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 0.5vh 1vh; font-size: 1.6vh; font-weight: 800; }
.ocard output { font-size: 1.5vh; font-weight: 900; color: #ffe08a; }
.ocard input[type=range] { grid-column: 1 / 3; width: 100%; accent-color: #f5c518; height: 2vh; cursor: pointer; }
.ocard label.chk { display: flex; gap: 1vh; font-size: 1.5vh; cursor: pointer; }
.ocard input[type=checkbox] { width: 2vh; height: 2vh; accent-color: #f5c518; }
.obtns { display: flex; gap: 1vh; margin-top: 0.6vh; }
.obtns button { flex: 1; padding: 1.1vh; border-radius: 1.2vh; border: 0.2vh solid #ffffff33; background: #232a3d; color: #fff; font: 900 1.6vh Outfit, system-ui, sans-serif; cursor: pointer; }
.obtns button.go { background: linear-gradient(180deg, #ffd84a, #f5a518); color: #1b1300; border-color: #ffe08a; }
.ocard small { text-align: center; font-size: 1.2vh; font-weight: 700; color: #ffffff80; }

/* hapis süresi: altta ortada, kırmızı çerçeveli kutu (1 dondurma = 1 sn) */
.jail { position: absolute; left: 50%; bottom: 14vh; transform: translateX(-50%); z-index: 5; display: flex; flex-direction: column; align-items: center; gap: 0.2vh; padding: 0.8vh 3vh; border-radius: 1.6vh; background: #1b0d10e0; border: 0.35vh solid #ff5c5c; box-shadow: 0 0 3vh #ff5c5c66; animation: jailPulse 1s ease-in-out infinite; }
.jail[hidden] { display: none; }
.jail small { font-size: 1.7vh; font-weight: 900; letter-spacing: 0.12em; color: #ffb4b4; }
.jail b { font-size: 4.6vh; font-weight: 900; line-height: 1; color: #fff; -webkit-text-stroke: 0.3vh #000; paint-order: stroke fill; }
.jail i { font-style: normal; }
@keyframes jailPulse { 50% { box-shadow: 0 0 5vh #ff5c5caa; } }

/* puanlama çerçevesi (7 Kasım 2026): kabartma metal canvas (kum-cerceve.js), kademeler data-tier */
.rate { --rs: min(50vh, 78vw); --glow: #ffcf5c; --pl1: #7a1020; --pl2: #3e0610; --bd: #d9a520; --bd2: #f7d774; --txt: #f7d774; }
.rate[data-theme="sapphire"] { --glow: #6fb6ff; --pl1: #1c3c7a; --pl2: #0a1c48; --bd: #b9c4d2; --bd2: #f1f5fa; --txt: #eef3fa; }
.rate[data-theme="emerald"] { --glow: #6ff2c0; --pl1: #0f5a47; --pl2: #06231d; }
.rate[data-theme="amethyst"] { --glow: #c79bff; --pl1: #5a2290; --pl2: #2a0a4a; --bd: #b9c4d2; --bd2: #f1f5fa; --txt: #f1e8ff; }
.rate[data-theme="royal"] { --glow: #6ff0f0; --pl1: #0b5a68; --pl2: #062a32; }
.rate[data-theme="rose"] { --glow: #ff9ac6; --pl1: #a01a58; --pl2: #4a0a2a; --bd: #d99a7e; --bd2: #ffe2d2; --txt: #ffe2d2; }
.rate .rcount { margin-bottom: calc(var(--rs) * 0.13); }
.rate[data-tier="3"] .rcount, .rate[data-tier="4"] .rcount { visibility: hidden; }
.rate .ring { position: relative; width: var(--rs); height: var(--rs); }
.rate #ratePic { position: absolute; left: 10.5%; top: 10.5%; width: 79%; height: 79%; border-radius: 50%; background: #000; }
.rate .frame { position: absolute; left: -11%; top: -11%; width: 122%; height: 122%; pointer-events: none; }
.rate .ring i { position: absolute; left: 50%; top: 5.5%; transform: translate(-50%, -50%); z-index: 2; font: 900 calc(var(--rs) * 0.082) Cinzel, Georgia, serif; font-style: normal; color: var(--txt); text-shadow: 0 0.2vh 0.4vh #000, 0 0 1vh #0008; animation: ratePop 0.32s ease-out; }
@keyframes ratePop { 40% { transform: translate(-50%, -50%) scale(1.3); color: #fff; } }
.rate .ring strong { position: absolute; left: 50%; bottom: 15%; transform: translateX(-50%); z-index: 2; max-width: 58%; font: 700 calc(var(--rs) * 0.052) Cinzel, Georgia, serif; color: var(--txt); text-shadow: 0 0.2vh 0.5vh #000, 0 0 1vh #000, 0 0 0.4vh #000; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rate .rtime { position: relative; z-index: 3; margin-top: 0.4vh; padding: 0.9vh calc(var(--rs) * 0.09); border-radius: 0.5vh; background: linear-gradient(var(--pl1), var(--pl2)); border: 0.35vh solid var(--bd); outline: 0.18vh solid var(--bd2); outline-offset: 0.3vh; box-shadow: 0 1vh 2vh #0009, inset 0 0.3vh 0.6vh #ffffff30, inset 0 -0.5vh 1vh #0007; font: 700 calc(var(--rs) * 0.066) Cinzel, Georgia, serif; color: var(--txt); text-shadow: 0 0.2vh 0.3vh #000; white-space: nowrap; }
.rate.over .rtime { font-size: calc(var(--rs) * 0.05); }
/* yüksek puan kademeleri: 7 hale, 8 dönen ışık, 9 taç + altın ışık, 10 gökkuşağı */
.rate .ring::before { content: ""; position: absolute; inset: -22%; border-radius: 50%; background: radial-gradient(closest-side, var(--glow) 40%, transparent 100%); opacity: 0; transition: opacity 0.6s; pointer-events: none; }
.rate:not([data-tier="0"]) .ring::before { opacity: 0.55; animation: halo 1.8s ease-in-out infinite; }
@keyframes halo { 50% { transform: scale(1.06); opacity: 0.85; } }
.rate .aura { position: absolute; left: -60%; top: -60%; width: 220%; height: 220%; border-radius: 50%; background: repeating-conic-gradient(var(--glow) 0 6deg, transparent 6deg 18deg); -webkit-mask: radial-gradient(closest-side, #000 36%, transparent 100%); mask: radial-gradient(closest-side, #000 36%, transparent 100%); opacity: 0; transition: opacity 0.7s; pointer-events: none; }
.rate[data-tier="2"] .aura { opacity: 0.5; animation: auraSpin 20s linear infinite; }
.rate[data-tier="3"] .aura { opacity: 0.8; animation: auraSpin 13s linear infinite; background: repeating-conic-gradient(#ffd75a 0 6deg, transparent 6deg 18deg); }
.rate[data-tier="4"] .aura { opacity: 0.9; animation: auraSpin 8s linear infinite; background: repeating-conic-gradient(#ff4d6d 0 6deg, transparent 6deg 12deg, #ffd75a 12deg 18deg, transparent 18deg 24deg, #5cff9d 24deg 30deg, transparent 30deg 36deg, #4dc3ff 36deg 42deg, transparent 42deg 48deg, #c77dff 48deg 54deg, transparent 54deg 60deg); }
@keyframes auraSpin { to { transform: rotate(360deg); } }
.rate .crown { display: none; position: absolute; left: 50%; top: -27%; width: 34%; height: 34%; z-index: 3; transform: translateX(-50%); pointer-events: none; }
.rate[data-tier="3"] .crown, .rate[data-tier="4"] .crown { display: block; animation: crownDrop 0.6s cubic-bezier(.3,1.6,.5,1); }
@keyframes crownDrop { from { opacity: 0; transform: translate(-50%, -90%) scale(1.5) rotate(-14deg); } }
.rate .rword { position: absolute; left: 50%; top: 66%; z-index: 4; transform: translate(-50%, -50%) rotate(-5deg); white-space: nowrap; font: 900 calc(var(--rs) * 0.115) Cinzel, Georgia, serif; color: #ffe9a0; text-shadow: 0 0.25vh 0 #9c6a14, 0 0.5vh 0 #5e370a, 0 0 0.5vh #000, 0 0.8vh 2vh #000, 0 0 3vh var(--glow); animation: rwordFlash 1.8s cubic-bezier(.2,1.5,.4,1) forwards; }
.rate .rword.stay { animation: rwordStay 0.55s cubic-bezier(.2,1.7,.4,1); }
@keyframes rwordFlash { 0% { opacity: 0; transform: translate(-50%, -50%) rotate(-5deg) scale(2.2); } 18% { opacity: 1; transform: translate(-50%, -50%) rotate(-5deg) scale(1); } 80% { opacity: 1; } 100% { opacity: 0; } }
@keyframes rwordStay { from { opacity: 0; transform: translate(-50%, -50%) rotate(-5deg) scale(2.6); } }
.ratefx { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 5; pointer-events: none; }

/* puan verenler: DOLULUK göstergesinin sağında, resim + ad + puan (yeni oy üstte, kayarak girer) */
.voters { position: absolute; left: 6.6vh; top: 30vh; width: 22vh; padding: 0.7vh; border-radius: 1.2vh; background: #0b0d14c8; border: 0.2vh solid #f5c51855; }
.voters[hidden] { display: none; }
.voters h4 { margin: 0 0 0.5vh; font-size: 1.2vh; font-weight: 900; letter-spacing: 0.1em; color: #ffe08a; text-align: center; }
.voters ol { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 0.4vh; }
.voters li { display: flex; align-items: center; gap: 0.6vh; padding: 0.3vh 0.5vh; border-radius: 0.9vh; background: #ffffff10; animation: voterIn 0.35s ease-out; }
.voters li:first-child { background: #f5c51826; }
.voters .av { width: 2.8vh; height: 2.8vh; font-size: 1.3vh; flex: 0 0 auto; }
.voters .who { flex: 1; min-width: 0; font-size: 1.3vh; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.voters b { flex: 0 0 auto; min-width: 2.6vh; padding: 0.2vh 0.5vh; border-radius: 0.6vh; text-align: center; font-size: 1.5vh; font-weight: 900; color: #1b1300; }
.voters b.hi { background: linear-gradient(#ffe08a, #f5a518); }
.voters b.mid { background: linear-gradient(#b8f28a, #5cc76a); }
.voters b.lo { background: linear-gradient(#ffb4b4, #ff6b6b); }
@keyframes voterIn { from { transform: translateX(-1.5vh); } } /* saydamlıksız: kare atlanınca satırlar görünmez kalmasın */


/* zombi vurunca ekran kenarı kırmızı yanıp söner (sallanmaz) */
.hurt { position: absolute; inset: 0; pointer-events: none; z-index: 3; background: radial-gradient(ellipse at center, transparent 55%, #ff1a1a99); opacity: 0; transition: opacity 0.45s ease-out; }
.hurt.on { opacity: 1; transition: none; }
.rate[data-tier="4"] .rword { font-size: calc(var(--rs) * 0.088); color: #fff6c8; }
.rate .rface { position: absolute; right: -3%; top: 3%; z-index: 4; font-size: calc(var(--rs) * 0.19); line-height: 1; font-weight: 400; filter: drop-shadow(0 0.4vh 0.6vh #000a); animation: facePop 0.45s cubic-bezier(.2,1.8,.4,1); }
@keyframes facePop { from { transform: scale(0.3) rotate(-25deg); opacity: 0; } }