/* Lastikli Karpuz: dikey (9:16) yayına göre; ölçüler ekran yüksekliğine (vh) bağlı. */
:root {
  --gold: #ffc94a;
  --brand: linear-gradient(120deg, #a98bff 0%, #6c7dff 50%, #38d5f5 100%);
  --panel: #0b0d14cc;
}
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; overflow: hidden; font-family: "Outfit", system-ui, sans-serif; color: #fff;
  background: radial-gradient(120% 70% at 50% 30%, #ffe2b8 0%, #f3b27a 45%, #b8643c 100%); }
canvas { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
.hud { position: fixed; inset: 0; pointer-events: none; }

.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: #ff4141; font-variant-numeric: tabular-nums; -webkit-text-stroke: 0.9vh #fff; paint-order: stroke fill; text-shadow: 0 0.8vh 2vh #0006; }
.count span { margin-top: -0.6vh; padding: 0.3vh 1.6vh; border-radius: 2vh; background: #ff4141; 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 lastik takanın kısa bildirimi (sayacın altında) */
.chip { position: absolute; left: 50%; top: 46vh; 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: var(--gold); }
@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 karpuzun en çok lastik takanları ve kalıcı patlatanlar tablosu */
/* 17,5vh: 22vh genişlikte ustanın yüzünü kapatıyordu (11 Kasım 2026) */
.side { position: absolute; left: 1.4vh; top: 24vh; display: flex; flex-direction: column; gap: 1vh; width: 17.5vh; }
.panel { padding: 0.9vh; border-radius: 1.8vh; background: var(--panel); border: 0.25vh solid #ffffff1f; }
.panel h4 { margin: 0 0 0.6vh; padding: 0 0.4vh; font-size: 1.45vh; font-weight: 900; text-transform: uppercase; letter-spacing: 0.04em; color: var(--gold); }
.panel ol { margin: 0; padding: 0; list-style: none; }
.panel li { display: flex; align-items: center; gap: 0.6vh; padding: 0.3vh 0.3vh; font-size: 1.45vh; font-weight: 800; }
.panel li .who { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.panel li .amt { color: var(--gold); font-variant-numeric: tabular-nums; }
.panel li.empty { color: #ffffffb3; font-weight: 600; font-size: 1.3vh; }

/* profil fotoğrafı; yoksa adın baş harfi */
.av { position: relative; flex: none; display: inline-grid; place-items: center; width: 3vh; height: 3vh; border-radius: 50%; overflow: hidden; background: var(--brand); font-size: 1.5vh; font-weight: 900; }
.av img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* sağ: hangi hediye ne yapar */
.guide { position: absolute; right: 1.4vh; top: 24vh; display: flex; flex-direction: column; gap: 0.8vh; }
.guide div { display: flex; flex-direction: column; align-items: center; width: 8.4vh; padding: 0.6vh 0.4vh; border-radius: 1.6vh; background: var(--panel); border: 0.25vh solid #ffffff1f; text-align: center; }
.guide img { width: 4.4vh; height: 4.4vh; object-fit: contain; }
.guide i { font-style: normal; font-size: 3.2vh; line-height: 4.4vh; }
.guide span { font-size: 1.3vh; font-weight: 800; line-height: 1.15; }
.guide div.flash { animation: flash 0.6s ease-out; }
@keyframes flash { 40% { transform: scale(1.18); border-color: var(--gold); box-shadow: 0 0 3vh var(--gold); } }

/* son olaylar: AI sunucunun altyazısıyla çakışmasın diye ekranın alt çeyreğinin üstünde */
.feed { position: absolute; left: 1.6vh; bottom: 24vh; display: flex; flex-direction: column; gap: 0.6vh; }
.feed div { display: flex; align-items: center; gap: 0.8vh; padding: 0.5vh 1.4vh 0.5vh 0.5vh; border-radius: 2.4vh; background: var(--panel); font-size: 1.8vh; font-weight: 800; animation: feedin 0.3s ease-out; width: max-content; max-width: 44vh; }
.feed div b { color: var(--gold); white-space: nowrap; }
.feed div.cut b { color: #7fd3ff; }
.feed div.tape b { color: #c7d3dc; }
.feed div.hammer b { color: #ff6b6b; }
.feed div.old { opacity: 0.55; }
@keyframes feedin { from { opacity: 0; transform: translateX(-3vh); } }

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

/* patlama anı: patlatanın fotoğrafı ve adı ekranı kaplar */
.banner { position: absolute; left: 50%; top: 64%; 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: 20vh; height: 20vh; font-size: 9vh; border: 0.8vh solid #fff; box-shadow: 0 0 6vh #ff4d4d, 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, #ff3d3d, #ff8a3d); font-size: 4.4vh; font-weight: 900; box-shadow: 0 1vh 4vh #ff3d3d88; }
@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); }
}

/* ekrana sıçrayan karpuz suyu */
.splats { position: absolute; inset: 0; overflow: hidden; z-index: 4; }
.splats i { position: absolute; border-radius: 50%; background: radial-gradient(circle at 40% 40%, #ff6a6fd0 0%, #e0262fc0 50%, #a3121a80 68%, 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(6vh); opacity: 0; }
}

.demo { position: fixed; left: 50%; bottom: 1.2vh; transform: translateX(-50%); z-index: 9; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; width: 96%; }
.demo button { padding: 7px 11px; border: 0; border-radius: 10px; background: #fff; color: #111; font: 800 13px "Outfit", system-ui, sans-serif; cursor: pointer; box-shadow: 0 2px 8px #0004; }

.credit { position: absolute; right: 1vh; bottom: 0.6vh; font-size: 1.1vh; font-weight: 600; color: #ffffff99; text-shadow: 0 0.1vh 0.3vh #0008; }