/* Hücre Arenası ekran yazıları: mikroskop camı gibi yarı saydam paneller; dikey (9:16) yayına göre ölçüler vh. */
body { background: #040814; }

.title { position: absolute; left: 50%; top: 1.4vh; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; padding: 0.55vh 2.4vh; border-radius: 2.4vh; background: linear-gradient(180deg, #16325ae0, #081428e8); border: 0.18vh solid #8fe3ff77; box-shadow: 0 0.5vh 2vh #0009, inset 0 0.2vh 0 #ffffff33; }
.title b { font-size: 2.2vh; font-weight: 900; letter-spacing: 0.14em; background: linear-gradient(90deg, #7fe9ff, #fff, #c5a8ff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.title small { font-size: 1.25vh; font-weight: 700; color: #cfefffb8; }

.board { position: absolute; left: 1vh; top: 9vh; width: 22vh; padding: 0.7vh; background: linear-gradient(180deg, #132a4ee0, #081428e8); border: 0.15vh solid #8fe3ff55; border-radius: 1.4vh; box-shadow: 0 0.6vh 2vh #0009, inset 0 0.2vh 0 #ffffff22; }
.board li { gap: 0.5vh; padding: 0.25vh 0.3vh; font-size: 1.4vh; border-left: 0.4vh solid var(--c, transparent); border-radius: 0.5vh; background: linear-gradient(90deg, #ffffff10, #ffffff00); margin-bottom: 0.2vh; }
.board li:first-child { background: linear-gradient(90deg, #ffd16638, #ffd16600); }
.board li > i { font-style: normal; width: 2.4vh; text-align: center; color: var(--gold); font-weight: 900; }
.board .av { width: 2.4vh; height: 2.4vh; font-size: 1.1vh; }

.board li.me { outline: 0.15vh solid #fff; }

.me { position: absolute; left: 50%; top: 8.2vh; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; padding: 0.5vh 1.8vh; border-radius: 1.6vh; background: linear-gradient(180deg, #16325ae0, #081428e8); border: 0.18vh solid #fff; box-shadow: 0 0.5vh 2vh #0009; white-space: nowrap; }
.me[hidden] { display: none; }
.me b { font-size: 2.1vh; font-weight: 900; color: #fff; }
.me small { font-size: 1.2vh; font-weight: 700; color: #cfefffd0; }
.me.dead { border-color: #ff5c5c; }
.me.dead b { color: #ff8a8a; }

.guide { top: 9vh; }
.guide div { width: 7.2vh; 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: 50%; bottom: 3vh; 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: linear-gradient(180deg, #16325af0, #081428f4); border: 0.2vh solid #8fe3ff; box-shadow: 0 0.5vh 1.6vh #000a; font-size: 1.85vh; font-weight: 800; white-space: nowrap; animation: call 2.6s ease-out forwards; }
.call b { color: #b8f0ff; }
.call.bad { border-color: #ff5c5c; }
.call.bad b { color: #ff8a8a; }
.call .av { width: 3.6vh; height: 3.6vh; }
@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: 38%; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; width: 92%; text-align: center; animation: banner 2.8s ease-out forwards; }
.bpic .av { width: 13vh; height: 13vh; font-size: 6vh; border: 0.6vh solid #fff; box-shadow: 0 0 4vh #a98bff; margin-bottom: 1vh; }
.banner small { font-size: 3vh; font-weight: 900; -webkit-text-stroke: 0.5vh #000; paint-order: stroke fill; }
.banner b { font-size: 4.6vh; font-weight: 900; color: var(--gold); -webkit-text-stroke: 0.7vh #000; paint-order: stroke fill; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
@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; } }

/* 11 Kasım 2026: daha dar liste (dikeyde 5 satır), sayaç, şampiyon kartı */
.board { width: 20vh; }
.board li { font-size: 1.3vh; }
.board .who { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.title small.hurry { color: #ff8a8a; animation: hurry 0.6s ease-in-out infinite alternate; }
@keyframes hurry { to { color: #ffd166; } }
.win { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 0.6vh; min-width: 34vh; max-width: 92vw; padding: 2.2vh 3vh 2vh; border-radius: 3vh; background: linear-gradient(180deg, #1c3b6ef2, #0a1630f6); border: 0.35vh solid #ffd166; box-shadow: 0 0 6vh #ffd16677, 0 1vh 4vh #000c; animation: winIn 0.7s cubic-bezier(.2, 1.4, .4, 1) both; text-align: center; }
.win[hidden] { display: none; }
.win small { font-size: 2.4vh; font-weight: 900; color: var(--gold); letter-spacing: 0.06em; }
.win .wpic .av { width: 14vh; height: 14vh; font-size: 6vh; border: 0.6vh solid var(--gold); box-shadow: 0 0 4vh #ffd166aa; }
.win b { font-size: 3.8vh; font-weight: 900; color: #fff; max-width: 80vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.win em { font-style: normal; font-size: 1.8vh; font-weight: 800; color: #b8f0ff; }
.win ol { list-style: none; margin: 0.6vh 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.4vh; width: 100%; }
.win li { display: flex; align-items: center; gap: 0.8vh; font-size: 1.7vh; font-weight: 800; padding: 0.3vh 0.8vh; border-radius: 1vh; background: #ffffff12; }
.win li b { font-size: 1.7vh; color: var(--gold); width: 2.6vh; }
.win li span { flex: 1; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.win li em { font-size: 1.6vh; color: #ffd166; }
.win li .av { width: 2.8vh; height: 2.8vh; font-size: 1.2vh; }
.win > span { font-size: 1.6vh; font-weight: 700; color: #cfefffb0; margin-top: 0.4vh; }
@keyframes winIn { from { opacity: 0; transform: translate(-50%, -50%) scale(0.5); } }