/* Su Balonu: dikey (9:16) yayına göre; ölçüler ekran yüksekliğine (vh) bağlı. Ortak parçalar kit.css'te. */
body { background: linear-gradient(180deg, #5fc3f2 0%, #a9e1fa 48%, #ffe9c4 100%); }

.top { position: absolute; left: 0; right: 0; top: 1.4vh; display: flex; flex-direction: column; align-items: center; gap: 0.6vh; }
.count { display: flex; flex-direction: column; align-items: center; }
.count b { font-size: 9vh; font-weight: 900; line-height: 1; color: #1e9bff; font-variant-numeric: tabular-nums; -webkit-text-stroke: 0.9vh #fff; paint-order: stroke fill; text-shadow: 0 0.8vh 2vh #0005; }
.count span { margin-top: -0.6vh; padding: 0.3vh 1.6vh; border-radius: 2vh; background: #1e9bff; font-size: 1.9vh; font-weight: 900; letter-spacing: 0.06em; box-shadow: 0 0.6vh 1.6vh #0004; }
.count.bump b { animation: bump 0.25s ease-out; }
.round { padding: 0.5vh 1.6vh; border-radius: 3vh; background: var(--panel); font-size: 1.7vh; font-weight: 900; }
/* son su dolduranın kısa bildirimi (sayacın altında) */
.chip { position: absolute; left: 50%; top: 18.5vh; transform: translateX(-50%); display: flex; align-items: center; gap: 0.8vh; padding: 0.5vh 1.6vh 0.5vh 0.5vh; border-radius: 3vh; background: var(--panel); font-size: 1.9vh; font-weight: 800; white-space: nowrap; animation: chip 1.6s ease-out forwards; }
.chip b { color: #7fd3ff; }
@keyframes chip { 0% { opacity: 0; transform: translate(-50%, 1vh); } 12% { opacity: 1; transform: translate(-50%, 0); } 75% { opacity: 1; } 100% { opacity: 0; } }
@keyframes bump { 40% { transform: scale(1.15); } }

/* sol: bu balona en çok su dolduranlar ve patlatanlar tablosu */
.side { position: absolute; left: 1.6vh; top: 24vh; display: flex; flex-direction: column; gap: 1vh; width: 19vh; }

/* sağdaki rehber: 9 satır dikey ekrana sığsın (önce son satır ekranın altında kalıyordu) */
.guide { top: 22vh; gap: 0.6vh; }
.guide div { width: 7.6vh; padding: 0.4vh 0.3vh; }
.guide img { width: 3.6vh; height: 3.6vh; }
.guide i { font-size: 2.6vh; line-height: 3.6vh; }
.guide span { font-size: 1.2vh; }

/* olay listesi balonun üstüne binmesin: yalağın hizasına iner (oyun açıkken AI altyazısı yok) */
.feed { bottom: 10vh; }
.feed div b { color: #7fd3ff; }
.feed div.drain b { color: #ffd36b; }
.feed div.thick b { color: #c7f59a; }
.feed div.dart b { color: #ff6b6b; }

.bigtag { position: absolute; left: 50%; top: 23.4vh; transform: translateX(-50%); padding: 0.8vh 2.4vh; border-radius: 3vh; background: linear-gradient(120deg, #38d5f5, #a98bff); color: #10123a; font-size: 2.6vh; font-weight: 900; animation: bump 1s ease-in-out infinite; }

/* patlama anı: patlatanın fotoğrafı ve adı ekranı kaplar */
/* amcanın ıslanması görünsün diye yukarıda (önce %34'te amcayı kapatıyordu) */
.banner { position: absolute; left: 50%; top: 25%; transform: translate(-50%, -50%); z-index: 5; display: flex; flex-direction: column; align-items: center; width: 92%; text-align: center; animation: banner 4.6s ease-out forwards; }
.bannerpic .av { width: 15vh; height: 15vh; font-size: 7vh; border: 0.8vh solid #fff; box-shadow: 0 0 6vh #38b6ff, 0 1.6vh 4vh #0008; }
.banner small { margin-top: 1.6vh; font-size: 3.4vh; font-weight: 900; letter-spacing: 0.08em; -webkit-text-stroke: 0.5vh #000; paint-order: stroke fill; }
.banner b { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 6.2vh; font-weight: 900; line-height: 1.05; color: var(--gold); -webkit-text-stroke: 0.8vh #000; paint-order: stroke fill; }
.banner > span { margin-top: 0.8vh; padding: 0.6vh 3vh; border-radius: 3vh; background: linear-gradient(120deg, #1e9bff, #38d5f5); font-size: 4.4vh; font-weight: 900; box-shadow: 0 1vh 4vh #1e9bff88; }
@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); }
}

/* patlama anında ekranı bir an kaplayıp aşağı süzülen su */
.wash { position: absolute; inset: 0; z-index: 3; background: linear-gradient(180deg, #8fdcff00 0%, #5cc0f2a0 35%, #2a9be0c0 100%); animation: wash 1.6s ease-out forwards; }
@keyframes wash {
  0% { opacity: 0; transform: translateY(-30%); }
  12% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(40%); }
}

/* ekrana sıçrayan su damlaları (kenarlara düşer, ortadaki ad okunsun) */
.splats { position: absolute; inset: 0; overflow: hidden; z-index: 4; }
.splats i { position: absolute; border-radius: 50%; background: radial-gradient(circle at 35% 32%, #ffffffe0 0%, #bfeaffb0 12%, #5ec4ffa0 40%, #1e8fe080 64%, transparent 71%); animation: splat 3.4s ease-out forwards; }
@keyframes splat {
  0% { transform: scale(0.2); opacity: 0; }
  8% { transform: scale(1.08); opacity: 1; }
  14% { transform: scale(1); }
  70% { opacity: 0.9; }
  100% { transform: scale(1) translateY(8vh); opacity: 0; }
}