body { background: #111; }
canvas#view { cursor: none; }

.top { position: absolute; left: 50%; top: 1.4vh; transform: translateX(-50%); display: flex; align-items: center; gap: 1.4vh; }
.stat { display: flex; flex-direction: column; align-items: center; min-width: 8vh; padding: 0.5vh 1.2vh; border-radius: 1.6vh; background: var(--panel); border: 0.25vh solid #ffffff1f; }
.stat small { font-size: 1.25vh; font-weight: 800; letter-spacing: 0.06em; color: #ffffffb3; }
.stat b { font-size: 3.4vh; font-weight: 900; line-height: 1; color: var(--gold); font-variant-numeric: tabular-nums; }
.hp { position: relative; width: 34vh; height: 4.2vh; }
.hpbar { position: absolute; inset: 0; border-radius: 2.2vh; overflow: hidden; background: #0b0d14e0; border: 0.3vh solid #ffffff33; }
.hpbar i { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, #ff3d3d, #ffb13d 45%, #5be36c); background-size: 34vh 100%; transition: width 0.25s; }
.hp span { position: absolute; inset: 0; display: grid; place-items: center; font-size: 2.1vh; font-weight: 900; text-shadow: 0 0.2vh 0.5vh #000; }

/* dalga, sıra, beğeni, otomatik */
.chips { position: absolute; left: 50%; top: 7.9vh; transform: translateX(-50%); display: flex; align-items: center; gap: 0.7vh; white-space: nowrap; }
.chip { display: flex; align-items: center; gap: 0.7vh; padding: 0.35vh 1.1vh; border-radius: 2vh; background: var(--panel); border: 0.2vh solid #ffffff1f; font-size: 1.5vh; font-weight: 900; font-variant-numeric: tabular-nums; }
.chip.wave { color: var(--gold); }
.wbar { width: 9vh; height: 0.8vh; border-radius: 0.6vh; overflow: hidden; background: #ffffff24; }
.wbar i { display: block; height: 100%; width: 0; background: var(--gold); transition: width 0.2s; }
.chip.auto { background: #2b4dd8e6; border-color: #9ab0ff; }
.keys { position: absolute; left: 50%; top: 11.1vh; transform: translateX(-50%); padding: 0.3vh 1.4vh; border-radius: 2vh; background: var(--panel); font-size: 1.3vh; font-weight: 700; white-space: nowrap; }

.senders { position: absolute; left: 1.4vh; top: 12vh; width: 23vh; }
.senders .dmgT { color: #ff7a6b; font-size: 1.4vh; font-variant-numeric: tabular-nums; }
.guide { top: 12vh; display: grid; grid-template-columns: repeat(2, auto); } /* 8 kart tek sütunda silah kutusuna biniyordu */
.feed { bottom: 18vh; }

.ammo { position: absolute; right: 2vh; bottom: 7vh; display: flex; flex-direction: column; align-items: center; gap: 0.3vh; padding: 0.6vh 1.6vh; border-radius: 1.8vh; background: var(--panel); border: 0.25vh solid #ffffff1f; min-width: 15vh; }
.ammo small { font-size: 1.5vh; font-weight: 900; letter-spacing: 0.05em; color: var(--gold); white-space: nowrap; }
.wdots { display: flex; gap: 0.35vh; }
.wdots i { width: 1.2vh; height: 1.2vh; border-radius: 50%; background: #ffffff2a; }
.wdots i.base { outline: 0.15vh solid #ffffff80; }
.wdots i.past { background: #ffc94a80; }
.wdots i.on { background: var(--gold); box-shadow: 0 0 0.8vh var(--gold); transform: scale(1.3); }
.ammo .an { display: flex; align-items: baseline; gap: 0.4vh; }
.ammo b { font-size: 4.2vh; font-weight: 900; line-height: 1; font-variant-numeric: tabular-nums; }
.ammo span { font-size: 2vh; font-weight: 800; color: #ffffffa0; }
.ammo em { position: absolute; left: 50%; top: -3.4vh; transform: translateX(-50%); padding: 0.2vh 1.2vh; border-radius: 1.4vh; background: #ff4d3d; font-size: 1.6vh; font-weight: 900; font-style: normal; white-space: nowrap; }
.ammo.low b { color: #ff5a4a; }
.power { position: absolute; right: 2vh; bottom: 18vh; padding: 0.4vh 1.4vh; border-radius: 1.6vh; background: linear-gradient(120deg, #ff8a1f, #ffc94a); color: #271300; font-size: 1.7vh; font-weight: 900; }

.note { position: absolute; z-index: 5; left: 50%; top: 12.5vh; transform: translateX(-50%); padding: 0.6vh 2vh; border-radius: 2.4vh; background: #0b0d14f2; border: 0.25vh solid var(--gold); font-size: 2.2vh; font-weight: 900; white-space: nowrap; max-width: 94vw; animation: pop 0.25s ease-out; }
.note.boss { border-color: #ff3b30; color: #ff9b90; font-size: 3vh; box-shadow: 0 0 3vh #ff2a1c80; }
@keyframes pop { from { transform: translateX(-50%) scale(0.7); opacity: 0; } }

/* silah duyurusu: ekranın ortasına yakın büyük kart */
.wb { position: absolute; z-index: 6; left: 50%; top: 18vh; transform: translateX(-50%); display: flex; align-items: center; gap: 1.6vh; width: min(74vh, 96vw); box-sizing: border-box; padding: 1.2vh 2.2vh 1.2vh 1.6vh; border-radius: 2.4vh; overflow: hidden; color: #fff; border: 0.4vh solid; box-shadow: 0 1vh 5vh #000a; animation: wbin 2.9s cubic-bezier(0.2, 0.9, 0.3, 1.1) both; }
.wb.up { background: linear-gradient(115deg, #0a4a2cf5, #128a4cf2 55%, #24c46bf0); border-color: #6fffa8; box-shadow: 0 0 5vh #2fe88088, 0 1vh 4vh #000a; }
.wb.down { background: linear-gradient(115deg, #5a0f12f5, #a11d1ff2 55%, #e03a2bf0); border-color: #ff9a86; box-shadow: 0 0 5vh #ff3b2f88, 0 1vh 4vh #000a; }
.wb.max { background: linear-gradient(115deg, #5a3d05f5, #a97a10f2 55%, #e8b53ff0); border-color: #ffe08a; box-shadow: 0 0 5vh #ffc94a88, 0 1vh 4vh #000a; }
.wb.min { background: linear-gradient(115deg, #2b2e36f5, #474b56f2 55%, #6a6f7cf0); border-color: #c5cad6; }
.wb .shine { position: absolute; inset: 0; background: linear-gradient(100deg, #fff0 35%, #ffffff50 50%, #fff0 65%); transform: translateX(-110%); animation: wbshine 1s 0.15s ease-out both; }
.wb .arrow { flex: none; width: 7vh; height: 9vh; background: #fff; filter: drop-shadow(0 0.4vh 0.8vh #0006); }
.wb .arrow.up { clip-path: polygon(50% 0, 100% 50%, 70% 50%, 70% 100%, 30% 100%, 30% 50%, 0 50%); animation: arrup 0.7s ease-in-out infinite alternate; }
.wb .arrow.down { clip-path: polygon(50% 100%, 100% 50%, 70% 50%, 70% 0, 30% 0, 30% 50%, 0 50%); animation: arrdn 0.7s ease-in-out infinite alternate; }
.wb .arrow.max, .wb .arrow.min { clip-path: polygon(50% 0, 62% 35%, 100% 38%, 70% 60%, 80% 100%, 50% 78%, 20% 100%, 30% 60%, 0 38%, 38% 35%); }
.wb img { flex: none; width: 24vh; height: 10.6vh; object-fit: contain; filter: drop-shadow(0 0.6vh 1vh #000a); animation: wbgun 0.5s cubic-bezier(0.2, 1.4, 0.4, 1); }
.wbt { position: relative; flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.3vh; }
.wbt small { font-size: 1.7vh; font-weight: 900; letter-spacing: 0.1em; opacity: 0.9; white-space: nowrap; }
.wbt b { font-size: 4vh; font-weight: 900; line-height: 1.02; letter-spacing: 0.01em; text-shadow: 0 0.3vh 0.8vh #0009; }
.wbdots { display: flex; gap: 0.4vh; margin-top: 0.2vh; }
.wbdots i { width: 2.2vh; height: 0.8vh; border-radius: 0.4vh; background: #ffffff38; }
.wbdots i.past { background: #ffffffa0; }
.wbdots i.on { background: #fff; box-shadow: 0 0 1vh #fff; }
.wbby { display: flex; align-items: center; gap: 0.6vh; margin-top: 0.3vh; font-size: 1.9vh; font-weight: 800; white-space: nowrap; overflow: hidden; }
.wbby .av { width: 3vh; height: 3vh; border: 0.2vh solid #fff; }
@keyframes wbin { 0% { opacity: 0; transform: translateX(-50%) scale(0.5) rotate(-3deg); } 9% { opacity: 1; transform: translateX(-50%) scale(1.06) rotate(0); } 14% { transform: translateX(-50%) scale(1); } 90% { opacity: 1; transform: translateX(-50%) scale(1); } 100% { opacity: 0; transform: translateX(-50%) scale(0.94) translateY(-1.6vh); } }
@keyframes wbshine { to { transform: translateX(110%); } }
@keyframes wbgun { from { transform: translateX(-5vh) scale(0.6); } }
@keyframes arrup { to { transform: translateY(-0.9vh); } }
@keyframes arrdn { to { transform: translateY(0.9vh); } }

/* büyük dalga yazısı */
.wavebig { position: absolute; z-index: 4; left: 50%; top: 38vh; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; animation: wavein 2.3s ease-out both; }
.wavebig b { font-size: 9vh; font-weight: 900; line-height: 1; color: #fff; text-shadow: 0 0.5vh 0 #7a1a10, 0 0 0.8vh #7a1a10, 0 0 4vh #ff4a2a; white-space: nowrap; }
.wavebig span { margin-top: 0.8vh; font-size: 2.6vh; font-weight: 900; color: #7dff8a; text-shadow: 0 0.2vh 0.6vh #000; }
@keyframes wavein { 0% { opacity: 0; transform: translateX(-50%) scale(1.8); } 12% { opacity: 1; transform: translateX(-50%) scale(1); } 80% { opacity: 1; } 100% { opacity: 0; transform: translateX(-50%) translateY(-2vh); } }

/* vuruş rakamları, seri */
.floats { position: absolute; inset: 0; overflow: hidden; }
.dmg { position: absolute; transform: translate(-50%, -50%); font-size: 2.6vh; font-weight: 900; color: #fff; -webkit-text-stroke: 0.1vh #000a; text-shadow: 0 0.2vh 0.5vh #000; white-space: nowrap; animation: dmgup 0.75s ease-out both; }
.dmg.head { font-size: 3.6vh; color: var(--gold); text-shadow: 0 0 1.4vh #ff9d2a, 0 0.2vh 0.5vh #000; }
@keyframes dmgup { 0% { opacity: 0; transform: translate(-50%, -30%) scale(0.5); } 18% { opacity: 1; transform: translate(-50%, -80%) scale(1.15); } 100% { opacity: 0; transform: translate(-50%, -260%) scale(0.9); } }
.streak { position: absolute; z-index: 3; right: 2vh; bottom: 22vh; padding: 0.3vh 1.6vh; border-radius: 1.6vh; background: linear-gradient(120deg, #ff3b30, #ff9d2a); font-size: 3vh; font-weight: 900; transform: rotate(-3deg); box-shadow: 0 0 2.4vh #ff5a2a90; animation: streakin 0.3s cubic-bezier(0.2, 1.6, 0.4, 1) both; }
@keyframes streakin { from { opacity: 0; transform: rotate(-3deg) scale(1.7); } }

.hurt { position: absolute; inset: 0; opacity: 0; background: radial-gradient(ellipse at center, #ff000000 45%, #c40a0acc 100%); }

.tags { position: absolute; inset: 0; overflow: hidden; }
.ztag { position: absolute; left: 0; top: 0; display: flex; flex-direction: column; align-items: center; gap: 0.25vh; transform-origin: 50% 100%; will-change: transform; }
.ztag .stem { position: absolute; left: 50%; top: 100%; width: 0.25vh; margin-left: -0.125vh; background: #ffffffc0; box-shadow: 0 0 0.3vh #000; transform-origin: 50% 0; z-index: -1; }
.ztag .row { display: flex; align-items: center; gap: 0.6vh; padding: 0.25vh 1.1vh 0.25vh 0.25vh; border-radius: 2.4vh; background: #0b0d14e6; font-size: 2vh; font-weight: 900; white-space: nowrap; }
.ztag .av { width: 3.6vh; height: 3.6vh; font-size: 1.8vh; border: 0.2vh solid #fff; }
.ztag .bar { position: relative; width: 13vh; height: 2vh; border-radius: 1.2vh; overflow: hidden; background: #000c; border: 0.2vh solid #ffffff55; }
.ztag .bar i { display: block; height: 100%; background: #5fd94f; transition: width 0.12s; }
.ztag .bar b { position: absolute; inset: 0; display: grid; place-items: center; font-size: 1.45vh; font-weight: 900; line-height: 1; text-shadow: 0 0 0.3vh #000, 0 0 0.3vh #000; font-variant-numeric: tabular-nums; }
.ztag.t2 .bar i { background: #ffc13d; }
.ztag.t3 .bar i, .ztag.t4 .bar i { background: #ff4a3d; }
.ztag.mega .row { background: linear-gradient(120deg, #6a0f0a, #1a0504); box-shadow: 0 0 1.4vh #ff3b30; }
.ztag.mega .bar { width: 17vh; border-color: var(--gold); }

/* oyun sonu */
.over { position: absolute; z-index: 7; inset: 0; display: grid; place-items: center; background: radial-gradient(ellipse at center, #3a0505a8, #120101e8); }
.over.won { background: radial-gradient(ellipse at center, #3a2c05a0, #0d0a01e0); }
.ovbox { display: flex; flex-direction: column; align-items: center; gap: 0.7vh; max-width: 92vw; padding: 2.4vh 4vh; border-radius: 3vh; background: #0b0d14d9; border: 0.35vh solid #ff5c4c; box-shadow: 0 0 5vh #ff2a1c60; text-align: center; animation: ovin 0.5s 0.5s cubic-bezier(0.2, 1.3, 0.4, 1) both; }
.over.won .ovbox { border-color: var(--gold); box-shadow: 0 0 6vh #ffc94a80; }
@keyframes ovin { from { opacity: 0; transform: scale(0.7) translateY(3vh); } }
.ovbox small { font-size: 3.6vh; font-weight: 900; letter-spacing: 0.04em; color: #ff6b5c; }
.over.won .ovbox small { color: var(--gold); }
.ovbox b { font-size: 11vh; font-weight: 900; line-height: 1; color: var(--gold); text-shadow: 0 0.5vh 2vh #000; }
.ovbox span { font-size: 2.2vh; font-weight: 800; }
.ovbox .t { color: #ffb9ae; }
.ovbox .b { margin-top: 0.4vh; padding: 0.3vh 1.6vh; border-radius: 2vh; background: #ffffff16; font-size: 2vh; }
.ovbox .c { margin-top: 0.3vh; font-size: 1.7vh; color: #ffffffb0; font-variant-numeric: tabular-nums; }

.load { position: absolute; z-index: 8; inset: 0; display: grid; place-items: center; background: #101416; font-size: 2.4vh; font-weight: 800; transition: opacity 0.5s; }
.load.done { opacity: 0; }

#cross { position: absolute; left: 0; top: 0; width: 5vh; height: 5vh; margin: -2.5vh 0 0 -2.5vh; border-radius: 50%; border: 0.32vh solid #fff; box-shadow: 0 0 0.5vh #000, inset 0 0 0.3vh #000; }
#cross::before, #cross::after { content: ""; position: absolute; left: 50%; top: 50%; background: #ff3b30; box-shadow: 0 0 0.2vh #000; }
#cross::before { width: 0.34vh; height: 1.5vh; margin: -0.75vh 0 0 -0.17vh; }
#cross::after { width: 1.5vh; height: 0.34vh; margin: -0.17vh 0 0 -0.75vh; }
#cross.hit { border-color: #ffd23d; }
#cross.head { border-color: #ff4a3d; transform-origin: center; }

/* dikey ekran (TikTok): rehber üstte iki sıra yatay şerit, liste küçük, koridor açıkta */
@media (max-aspect-ratio: 3/4) {
  .top { width: 96vw; justify-content: space-between; gap: 0.8vh; }
  .hp { flex: 1; width: auto; }
  .stat { min-width: 6vh; padding: 0.3vh 0.8vh; }
  .stat b { font-size: 2.8vh; }
  .keys { display: none; }
  .chips { top: 6.6vh; gap: 0.5vh; }
  .chip { font-size: 1.3vh; padding: 0.25vh 0.8vh; }
  .wbar { width: 6vh; }
  .guide { left: 1vw; right: 1vw; top: 10vh; grid-template-columns: repeat(4, 1fr); gap: 0.4vh; }
  .guide div { flex-direction: row; gap: 0.4vh; width: auto; padding: 0.2vh 0.4vh; border-radius: 1.1vh; text-align: left; min-width: 0; }
  .guide img { width: 3.2vh; height: 3.2vh; flex: none; }
  .guide i { font-size: 2.4vh; line-height: 3.2vh; }
  .guide span { font-size: 1.12vh; min-width: 0; }
  .senders { top: auto; left: 1vw; bottom: 31vh; width: 17vh; padding: 0.5vh; }
  .senders h4 { font-size: 1.1vh; margin-bottom: 0.2vh; }
  .senders li { font-size: 1.25vh; padding: 0.15vh 0.2vh; }
  .senders li:nth-child(n + 4) { display: none; }
  .senders li .av { width: 2.2vh; height: 2.2vh; font-size: 1.1vh; }
  .feed { bottom: 12vh; }
  .feed div { font-size: 1.5vh; max-width: 62vw; }
  .ammo { right: 1vw; bottom: 2vh; min-width: 12vh; padding: 0.4vh 1vh; }
  .ammo b { font-size: 3.2vh; }
  .power { right: 1vw; bottom: 12.5vh; }
  .streak { right: 1vw; bottom: 16vh; font-size: 2.4vh; }
  .note { top: 20.5vh; font-size: 1.7vh; white-space: normal; text-align: center; width: max-content; }
  .note.boss { font-size: 2vh; }
  .wb { top: 26vh; padding: 0.8vh 1.2vh; gap: 0.8vh; flex-wrap: wrap; justify-content: center; }
  .wb .arrow { width: 3.6vh; height: 4.6vh; }
  .wb img { width: min(17vh, 40vw); height: 6vh; }
  .wbt { flex-basis: 100%; align-items: center; text-align: center; }
  .wbt small { font-size: 1.4vh; }
  .wbt b { font-size: 3vh; }
  .wavebig { top: 40vh; }
  .wavebig b { font-size: 6.4vh; }
  .ovbox small { font-size: 2.5vh; }
  .ovbox span { font-size: 1.7vh; }
}

/* gönderen listesi: jeton altın pulla, beğeni/katıl zombisi sayıyla */
.senders .amt.coin { display: inline-flex; align-items: center; gap: 0.4vh; color: var(--gold); font-variant-numeric: tabular-nums; }
.senders .amt.coin::before { content: ""; width: 1.3vh; height: 1.3vh; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff3b0, #ffc94a 45%, #b07a10); box-shadow: 0 0 0.3vh #0008; }
.senders .amt.zc { color: #b9f59a; font-size: 1.4vh; }