/* Duvar Savaşı ekranı: dikey ve yatay yayın; ölçüler ekran yüksekliğine (vh) bağlı. */
body { background: #5fa8df; }
.score { position: absolute; left: 50%; top: 1.4vh; transform: translateX(-50%); display: flex; align-items: stretch; gap: 0.8vh; font-weight: 900; color: #fff; white-space: nowrap; }
.score .sc { display: flex; align-items: center; gap: 1vh; padding: 0.5vh 1.8vh; border-radius: 3vh; box-shadow: 0 0.5vh 0 #0005, 0 1vh 2.4vh #0006; }
.score .sc.h { background: linear-gradient(180deg, #4fe08a, #1f9e57); text-shadow: 0 0.2vh 0 #11683a; }
.score .sc.w { background: linear-gradient(180deg, #ff7a6a, #d23a3a); text-shadow: 0 0.2vh 0 #8a1c1c; }
.score .sc small { font-size: 1.6vh; letter-spacing: 0.05em; opacity: 0.95; }
.score .sc b { font-size: 4.2vh; line-height: 1; font-variant-numeric: tabular-nums; }
.score .sc.pop { animation: scpop 0.5s cubic-bezier(.2, 1.7, .4, 1); }
@keyframes scpop { 40% { transform: scale(1.25); } }
.score .clock { display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 9vh; padding: 0.3vh 1.2vh; border-radius: 1.6vh; background: #0b2445e8; box-shadow: 0 0 0 0.2vh #ffffff44, 0 1vh 2.4vh #0006; }
.score .clock b { font-size: 3.2vh; line-height: 1; font-variant-numeric: tabular-nums; }
.score .clock small { font-size: 1.1vh; letter-spacing: 0.06em; color: #ffd23f; }
.score .clock.low b { color: #ff6a6a; animation: tick 0.5s ease-in-out infinite alternate; }
.score .clock.paused b { opacity: 0.55; }
@keyframes tick { to { transform: scale(1.15); } }
.pbar { position: absolute; left: 50%; top: 9vh; transform: translateX(-50%); width: min(46vh, 72%); height: 2.2vh; border-radius: 1.2vh; overflow: hidden; background: #0b2445d0; box-shadow: 0 0 0 0.2vh #ffffff55, 0 0.5vh 1.2vh #0005; }
.pbar em { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: linear-gradient(90deg, #3dd68c, #ffd23f); transition: width 0.25s; }
.pbar span { position: absolute; inset: 0; display: grid; place-items: center; font-size: 1.45vh; font-weight: 900; text-shadow: 0 0.1vh 0.3vh #000c; }
.hint { position: absolute; left: 50%; top: 12vh; transition: background 0.3s; transform: translateX(-50%); padding: 0.35vh 1.3vh; border-radius: 1vh; background: #000a; font-size: 1.65vh; font-weight: 800; white-space: nowrap; max-width: 94%; overflow: hidden; text-overflow: ellipsis; }
.hint b { color: #4fe08a; font-weight: 900; }
.hint.idle { background: #0b2445e8; box-shadow: 0 0 0 0.2vh #ffd23f88; animation: idleh 1.2s ease-in-out infinite alternate; }
@keyframes idleh { to { box-shadow: 0 0 0 0.35vh #ffd23f; } }
.hint em { color: #ff6a6a; font-style: normal; font-weight: 900; }
.ebar { position: absolute; left: 50%; top: 15.2vh; transform: translateX(-50%); width: min(30vh, 60%); height: 1.9vh; border-radius: 1vh; background: #000a; overflow: visible; }
.ebar i { display: block; height: 100%; width: 0; border-radius: 1vh; background: linear-gradient(90deg, #ff4f6d, #ffb02e); transition: width 0.3s; }
.ebar em { position: absolute; inset: 0; display: grid; place-items: center; font-size: 1.15vh; font-weight: 900; font-style: normal; white-space: nowrap; text-shadow: 0 0.1vh 0.3vh #000; }
.ebar span { position: absolute; right: -2.4vh; top: -0.9vh; font-size: 2vh; }

.guide.side { top: 18vh; gap: 0.6vh; }
.guide.side.l { left: 1vh; right: auto; }
.guide.side.r { right: 1vh; }
.guide.side div { width: 8.4vh; padding: 0.4vh 0.2vh; background: #081a33cc; }
.guide.side.l div { border-color: #4fe08a88; }
.guide.side.r div { border-color: #ff6a6a88; }
.guide.side img { width: 3.6vh; height: 3.6vh; }
.guide.side span { font-size: 1.12vh; text-align: center; }
.guide.side.l span { color: #c7ffdb; }
.guide.side.r span { color: #ffd0d0; }

.toasts { position: absolute; left: 50%; bottom: 8.5vh; transform: translateX(-50%); display: flex; flex-direction: column-reverse; align-items: center; gap: 0.5vh; }
.toast { display: flex; align-items: center; gap: 0.7vh; padding: 0.35vh 1.2vh 0.35vh 0.35vh; border-radius: 3vh; background: #071a33ee; font-size: 1.65vh; font-weight: 800; white-space: nowrap; animation: toast 3.2s ease-out forwards; }
.toast .av { width: 3vh; height: 3vh; }
.toast.hero { border: 0.18vh solid #4fe08a; }
.toast.hero b { color: #7cf0a8; }
.toast.wreck { border: 0.18vh solid #ff6a6a; }
.toast.wreck b { color: #ff9b9b; }
@keyframes toast { 0% { opacity: 0; transform: translateY(1vh); } 8% { opacity: 1; transform: none; } 84% { opacity: 1; } 100% { opacity: 0; } }

.defbox { position: absolute; left: 50%; bottom: 17vh; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; padding: 0.8vh 3vh; border-radius: 2vh; background: #0a3d24e0; border: 0.3vh solid #4fe08a; box-shadow: 0 0 3vh #4fe08a88; }
.defbox.gap { background: #4a0d1ae6; border-color: #ff5a5a; box-shadow: 0 0 3vh #ff5a5a; animation: gap 0.4s ease-in-out infinite alternate; }
@keyframes gap { to { transform: translateX(-50%) scale(1.05); } }
.defbox small { font-size: 1.7vh; font-weight: 900; letter-spacing: 0.04em; }
.defbox b { font-size: 7vh; line-height: 1; font-weight: 900; font-variant-numeric: tabular-nums; }

.banner { position: absolute; left: 50%; top: 33%; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; width: 96%; text-align: center; animation: bn 0.45s cubic-bezier(.2, 1.5, .4, 1); --c: #ffb020; }
.banner b { font-size: 8vh; line-height: 1; font-weight: 900; font-style: italic; color: var(--c); -webkit-text-stroke: 0.45vh #071233; paint-order: stroke fill; text-shadow: 0 0.6vh 3vh #000c; white-space: nowrap; }
.banner span { margin-top: 0.8vh; padding: 0.3vh 1.6vh; border-radius: 1vh; background: #071233e8; font-size: 2.1vh; font-weight: 900; }
@keyframes bn { from { opacity: 0; transform: translate(-50%, -50%) scale(2); } }

.skyflash { position: absolute; inset: 0; opacity: 0; pointer-events: none; mix-blend-mode: screen; }
.load { position: absolute; inset: 0; display: grid; place-items: center; background: #0b2445; transition: opacity 0.5s; }
.load i { width: 5vh; height: 5vh; border-radius: 50%; border: 0.6vh solid #ffffff33; border-top-color: #fff; animation: spin 0.9s linear infinite; }
.load.done { opacity: 0; }
@keyframes spin { to { transform: rotate(360deg); } }
.credit { position: absolute; right: 1vh; bottom: 0.4vh; font-size: 1vh; font-weight: 600; color: #ffffff90; }

/* takım listeleri: rehberin altında, kaç kişi ve maçta en çok katkı */
.lead { position: absolute; top: 58vh; width: 17vh; display: flex; flex-direction: column; gap: 0.4vh; padding: 0.6vh; border-radius: 1.2vh; background: #081a33cc; font-weight: 800; }
.lead.l { left: 1vh; border: 0.18vh solid #4fe08a88; }
.lead.r { right: 1vh; border: 0.18vh solid #ff6a6a88; }
.lead .lh { font-size: 1.15vh; font-weight: 900; letter-spacing: 0.04em; }
.lead.l .lh { color: #7cf0a8; }
.lead.r .lh { color: #ff9b9b; }
.lead .lr { display: flex; align-items: center; gap: 0.5vh; font-size: 1.3vh; }
.lead .lr i { width: 1.4vh; font-style: normal; font-weight: 900; color: #ffd23f; text-align: center; }
.lead .lr .av { width: 2.4vh; height: 2.4vh; flex: none; }
.lead .lr span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lead .lr b { font-weight: 900; }
.lead.l .lr b { color: #7cf0a8; }
.lead.r .lr b { color: #ff9b9b; }
.lead .le { font-size: 1.15vh; opacity: 0.6; }

/* ekran dışındaki boşluklara ok */
.arrows i { position: absolute; width: 0; height: 0; transform: translate(-50%, -50%); border: 1.6vh solid transparent; filter: drop-shadow(0 0 0.6vh #ff3b3b); animation: arblink 0.5s ease-in-out infinite alternate; }
.arrows i.l { border-right: 2.4vh solid #ff4a4a; border-left: 0; }
.arrows i.r { border-left: 2.4vh solid #ff4a4a; border-right: 0; }
.arrows i.t { border-bottom: 2.4vh solid #ff4a4a; border-top: 0; }
.arrows i.b { border-top: 2.4vh solid #ff4a4a; border-bottom: 0; }
@keyframes arblink { to { opacity: 0.35; } }

/* şampiyonluk kartı (kit.css .champ ile çakışmasın diye dchamp) */
.dchamp { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); box-sizing: border-box; display: flex; flex-direction: column; align-items: center; gap: 0.8vh; width: min(52vh, 88%); z-index: 6; padding: 2.2vh 2.4vh; border-radius: 2.4vh; background: #071233ee; text-align: center; animation: bn 0.5s cubic-bezier(.2, 1.5, .4, 1); }
.dchamp.hero { border: 0.4vh solid #4fe08a; box-shadow: 0 0 5vh #4fe08a99; }
.dchamp.wreck { border: 0.4vh solid #ff5a5a; box-shadow: 0 0 5vh #ff5a5a99; }
.dchamp > b { font-size: 4.4vh; line-height: 1.05; font-weight: 900; font-style: italic; -webkit-text-stroke: 0.3vh #071233; paint-order: stroke fill; }
.dchamp.hero > b { color: #6cf59f; }
.dchamp.wreck > b { color: #ff7a6a; }
.dchamp > small { font-size: 1.7vh; font-weight: 800; color: #ffd23f; letter-spacing: 0.04em; }
.dchamp .chlist { display: flex; flex-direction: column; gap: 0.7vh; width: 100%; }
.dchamp .cr { display: flex; align-items: center; gap: 1vh; padding: 0.6vh 1.2vh; border-radius: 1.4vh; background: #ffffff12; font-size: 2.1vh; font-weight: 900; }
.dchamp .cr.p1 { background: linear-gradient(90deg, #ffd23f40, #ffffff10); box-shadow: 0 0 0 0.2vh #ffd23f88; }
.dchamp .cr i { font-style: normal; font-size: 2.6vh; }
.dchamp .cr .av { width: 4.4vh; height: 4.4vh; flex: none; }
.dchamp .cr span { flex: 1; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dchamp .cr b { color: #ffd23f; font-size: 1.8vh; }
.dchamp .tot { color: #cfd8e8; font-size: 1.35vh; font-weight: 700; letter-spacing: 0; }