body { background: #9fd6d2; }
canvas#view { cursor: grab; }
canvas#view.hold { cursor: grabbing; }

.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: 9vh; 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; white-space: nowrap; }
.stat b { font-size: 3.2vh; font-weight: 900; line-height: 1; color: var(--gold); font-variant-numeric: tabular-nums; }
.painb { width: 36vh; display: flex; flex-direction: column; gap: 0.2vh; }
.paint { font-size: 1.5vh; font-weight: 900; text-align: center; color: #fff; text-shadow: 0 0.2vh 0.5vh #000; }
.painbar { height: 2.8vh; border-radius: 1.6vh; overflow: hidden; background: #0b0d14e0; border: 0.3vh solid #ffffff44; }
.painbar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #5be36c, #ffd23d 50%, #ff3d3d); background-size: 36vh 100%; transition: width 0.2s; }

.chips { position: absolute; left: 50%; top: 8.4vh; transform: translateX(-50%); display: flex; gap: 0.7vh; white-space: nowrap; }
.chip { 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.auto { background: #2b4dd8e6; border-color: #9ab0ff; }
.chip.stat2 { background: #b3261ee6; border-color: #ff9a86; }

.senders { position: absolute; left: 1.4vh; top: 12vh; width: 23vh; }
.guide { top: 12vh; display: grid; grid-template-columns: repeat(2, auto); gap: 0.6vh; }
.guide div { border-width: 0.3vh; padding: 0.4vh; }
.guide img { width: 3.8vh; height: 3.8vh; }
.guide div.g0 { border-color: #d39a3a; }
.guide div.g1 { border-color: #ff5c4c; }
.guide div.g2 { border-color: #3fd6a0; }
.how { position: absolute; left: 1.4vh; top: 27vh; width: 23vh; padding: 0.8vh 1vh; border-radius: 1.4vh; background: #0d3a44e6; border: 0.2vh solid #7fe0d44a; font-size: 1.35vh; font-weight: 700; line-height: 1.3; color: #ffffffd0; }
.how b { color: var(--gold); }
.hint { position: absolute; left: 50%; bottom: 9.5vh; transform: translateX(-50%); padding: 0.6vh 1.8vh; border-radius: 2vh; background: #0b0d14e6; border: 0.2vh solid var(--gold); font-size: 1.9vh; font-weight: 800; white-space: nowrap; max-width: 94vw; animation: hintp 1.6s ease-in-out infinite alternate; }
@keyframes hintp { to { box-shadow: 0 0 2.4vh #ffc94a90; } }
.frost { position: absolute; inset: 0; opacity: 0; transition: opacity 0.35s; pointer-events: none; background: radial-gradient(ellipse at center, #0000 42%, #9fe4ff55 72%, #dff6ffd0 100%); }
.frost.on { opacity: 1; }
.feed { bottom: 17vh; }

/* çekilen dişler kavanozu */
.jar { position: absolute; right: 2vh; bottom: 14vh; width: 11vh; height: 13vh; border: 0.4vh solid #ffffffc0; border-top-width: 0.9vh; border-radius: 1vh 1vh 2.2vh 2.2vh; background: #ffffff33; overflow: hidden; box-shadow: inset 0 0 1.4vh #ffffff60; }
.jarBody { position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-wrap: wrap-reverse; gap: 0.2vh; padding: 0.4vh; }
.jarBody i { width: 1.45vh; height: 1.7vh; border-radius: 0.6vh 0.6vh 0.9vh 0.9vh; background: #fbf7ea; box-shadow: inset 0 -0.25vh 0 #d5c9a4; }
.jar b { position: absolute; left: 0; right: 0; top: 0.4vh; text-align: center; font-size: 2.2vh; font-weight: 900; color: #fff; text-shadow: 0 0.2vh 0.5vh #000; }
.jar.bump { animation: jarbump 0.3s ease-out; }
@keyframes jarbump { 40% { transform: scale(1.15); } }

/* alet şeridi */
.tools { position: absolute; left: 50%; bottom: 1.2vh; transform: translateX(-50%); display: flex; gap: 0.5vh; padding: 0.5vh 0.7vh; border-radius: 1.6vh; background: #0b0d14c8; }
.tools div { position: relative; width: 7.6vh; height: 5.8vh; border-radius: 1vh; background: #ffffff14; border: 0.2vh solid transparent; opacity: 0.5; }
.tools div svg { position: absolute; inset: 0.3vh; width: calc(100% - 0.6vh); height: calc(100% - 0.6vh); }
.tools div.past { opacity: 0.8; }
.tools div.on { opacity: 1; background: #ffc94a40; border-color: var(--gold); box-shadow: 0 0 1.4vh var(--gold); transform: translateY(-0.4vh); }

/* çekme göstergesi */
.pullbar { position: absolute; left: 0; top: 0; width: 19vh; display: flex; flex-direction: column; gap: 0.25vh; transform-origin: 50% 100%; }
.pbwho { display: flex; align-items: center; justify-content: center; gap: 0.4vh; font-size: 1.4vh; font-weight: 900; text-shadow: 0 0.15vh 0.4vh #000; }
.pbwho .av { width: 2.4vh; height: 2.4vh; border: 0.2vh solid #fff; }
.pb, .pt { position: relative; height: 2vh; border-radius: 1vh; overflow: hidden; background: #000d; border: 0.18vh solid #ffffff90; }
.pb i { display: block; height: 100%; width: 0; background: #2fb84a; }
.pt i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #5be36c, #ffd23d 55%, #ff3d3d); background-size: 19vh 100%; }
.pb em, .pt em { position: absolute; inset: 0; display: grid; place-items: center; font-style: normal; font-size: 1.15vh; font-weight: 900; letter-spacing: 0.04em; text-shadow: 0 0 0.3vh #000, 0 0 0.3vh #000; }
.pullbar.danger .pt { border-color: #ff3d3d; animation: painhot 0.2s ease-in-out infinite alternate; }

/* diş sahipleri */
.tags { position: absolute; inset: 0; overflow: hidden; }
.tt { position: absolute; left: 0; top: 0; display: flex; align-items: center; gap: 0.3vh; will-change: transform; }
.tt .av { width: 2.4vh; height: 2.4vh; font-size: 1.2vh; border: 0.22vh solid #fff; box-shadow: 0 0.2vh 0.6vh #0009; }
.tt span { padding: 0.1vh 0.7vh; border-radius: 1.2vh; background: #0b0d14e6; font-size: 1.35vh; font-weight: 900; white-space: nowrap; }
.tt.t2 .av { border-color: #ffc13d; }
.tt.t3 .av { border-color: #ff7a3d; width: 2.6vh; height: 2.6vh; }
.tt.t4 .av { border-color: #ff3b30; width: 2.9vh; height: 2.9vh; }

.floats { position: absolute; inset: 0; overflow: hidden; }
.fx { position: absolute; transform: translate(-50%, -50%); font-weight: 900; white-space: nowrap; text-shadow: 0 0.4vh 0 #0007; animation: fxup 0.95s ease-out both; }
.fx.pop { font-size: 7vh; color: #fff; -webkit-text-stroke: 0.25vh #e5392f; }
.fx.ow { font-size: 4.4vh; color: #ffd23d; -webkit-text-stroke: 0.15vh #7a1a10; }
.fx.slip { font-size: 3.6vh; color: #ff9b90; }
.fx.big { font-size: 9vh; color: #ffd23d; -webkit-text-stroke: 0.3vh #7a1a10; }
@keyframes fxup { 0% { opacity: 0; transform: translate(-50%, -30%) scale(0.4) rotate(-8deg); } 18% { opacity: 1; transform: translate(-50%, -70%) scale(1.2) rotate(4deg); } 100% { opacity: 0; transform: translate(-50%, -220%) scale(0.95); } }

.note { position: absolute; z-index: 5; left: 50%; top: 12vh; 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: 2.8vh; box-shadow: 0 0 3vh #ff2a1c80; }
@keyframes pop { from { transform: translateX(-50%) scale(0.7); opacity: 0; } }

/* alet duyurusu */
.tb { position: absolute; z-index: 6; left: 50%; top: 17vh; transform: translateX(-50%); display: flex; align-items: center; gap: 1.6vh; width: min(66vh, 96vw); box-sizing: border-box; padding: 1vh 2.2vh 1vh 1.6vh; border-radius: 2.4vh; overflow: hidden; border: 0.4vh solid; animation: tbin 2.6s cubic-bezier(0.2, 0.9, 0.3, 1.1) both; }
.tb.up { background: linear-gradient(115deg, #0a4a2cf5, #128a4cf2 55%, #24c46bf0); border-color: #6fffa8; box-shadow: 0 0 5vh #2fe88088; }
.tb.down { background: linear-gradient(115deg, #5a0f12f5, #a11d1ff2 55%, #e03a2bf0); border-color: #ff9a86; box-shadow: 0 0 5vh #ff3b2f88; }
.tb.max { background: linear-gradient(115deg, #5a3d05f5, #a97a10f2 55%, #e8b53ff0); border-color: #ffe08a; }
.tb .shine { position: absolute; inset: 0; background: linear-gradient(100deg, #fff0 35%, #ffffff50 50%, #fff0 65%); transform: translateX(-110%); animation: tbshine 1s 0.15s ease-out both; }
.tb .arrow { flex: none; width: 6vh; height: 8vh; background: #fff; }
.tb .arrow.up { clip-path: polygon(50% 0, 100% 50%, 70% 50%, 70% 100%, 30% 100%, 30% 50%, 0 50%); }
.tb .arrow.down { clip-path: polygon(50% 100%, 100% 50%, 70% 50%, 70% 0, 30% 0, 30% 50%, 0 50%); }
.tb .arrow.max { clip-path: polygon(50% 0, 62% 35%, 100% 38%, 70% 60%, 80% 100%, 50% 78%, 20% 100%, 30% 60%, 0 38%, 38% 35%); }
.tbImg { flex: none; width: 15vh; height: 11vh; }
.tbImg svg { width: 100%; height: 100%; }
.tbt { position: relative; flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.3vh; }
.tbt small { font-size: 1.6vh; font-weight: 900; letter-spacing: 0.08em; white-space: nowrap; }
.tbt b { font-size: 3.6vh; font-weight: 900; line-height: 1.05; }
.tbby { display: flex; align-items: center; gap: 0.6vh; font-size: 1.9vh; font-weight: 800; white-space: nowrap; overflow: hidden; }
.tbby .av { width: 3vh; height: 3vh; border: 0.2vh solid #fff; }
@keyframes tbin { 0% { opacity: 0; transform: translateX(-50%) scale(0.5) rotate(-3deg); } 10% { opacity: 1; transform: translateX(-50%) scale(1.06); } 15% { transform: translateX(-50%) scale(1); } 90% { opacity: 1; transform: translateX(-50%) scale(1); } 100% { opacity: 0; transform: translateX(-50%) scale(0.94); } }
@keyframes tbshine { to { transform: translateX(110%); } }

.over { position: absolute; z-index: 7; inset: 0; display: grid; place-items: center; background: radial-gradient(ellipse at center, #3a0505a0, #120101d0); }
.over { animation: ovfade 0.5s 1.3s both; }
@keyframes ovfade { from { background: #0000; } }
.over.won { animation: none; background: radial-gradient(ellipse at 50% 42%, #0000 34%, #0d0a0190 100%); place-items: end center; padding-bottom: 9.5vh; box-sizing: border-box; }
.ovbox { display: flex; flex-direction: column; align-items: center; gap: 0.7vh; max-width: 92vw; padding: 2.4vh 4vh; border-radius: 3vh; background: #0b0d14e0; border: 0.35vh solid #ff5c4c; box-shadow: 0 0 5vh #ff2a1c60; text-align: center; animation: ovin 0.5s 1.5s cubic-bezier(0.2, 1.3, 0.4, 1) both; }
.over.won .ovbox { animation-delay: 0.4s; padding: 1.2vh 3vh; gap: 0.3vh; }
.over.won .ovbox b { font-size: 6vh; }
.over.won .ovbox small { font-size: 3vh; }
.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.4vh; font-weight: 900; color: #ff6b5c; }
.over.won .ovbox small { color: var(--gold); }
.ovbox b { font-size: 10vh; font-weight: 900; line-height: 1; color: var(--gold); }
.ovbox span { font-size: 2.1vh; 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: 1.9vh; }
.ovbox .c { 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: #15383c; font-size: 2.4vh; font-weight: 800; transition: opacity 0.4s; }
.load.done { opacity: 0; }

/* dikey ekran */
@media (max-aspect-ratio: 3/4) {
  .top { width: 96vw; justify-content: space-between; gap: 0.8vh; }
  .painb { flex: 1; width: auto; }
  .stat { min-width: 6.6vh; padding: 0.3vh 0.7vh; }
  .stat b { font-size: 2.6vh; }
  .stat small { font-size: 1vh; }
  .chips { top: 6.6vh; }
  .chip { font-size: 1.3vh; padding: 0.25vh 0.8vh; }
  .guide { left: 1vw; right: 1vw; top: 9.8vh; grid-template-columns: repeat(6, 1fr); gap: 0.3vh; }
  /* komut yazısı okunur boyda; ipucu kavanozun soluna sığar (kavanozun altında kesik kalıyordu) */
  .how { left: 1vw; top: auto; bottom: 7.4vh; width: 72vw; font-size: 1.35vh; padding: 0.5vh 0.9vh; }
  .hint { left: 2vw; transform: none; bottom: 13.6vh; font-size: 1.45vh; white-space: normal; text-align: center; width: 72vw; box-sizing: border-box; padding: 0.5vh 1.2vh; }
  .pullbar { width: 15vh; }
  .pt i { background-size: 15vh 100%; }
  .guide div { flex-direction: row; gap: 0.3vh; width: auto; min-width: 0; padding: 0.2vh 0.3vh; border-radius: 1vh; text-align: left; }
  .guide img { width: 2.6vh; height: 2.6vh; flex: none; }
  .guide span { font-size: 0.9vh; min-width: 0; }
  .senders { top: auto; left: auto; right: 1vw; bottom: 22.6vh; width: 16vh; padding: 0.5vh; }
  .senders h4 { font-size: 1.05vh; margin-bottom: 0.2vh; }
  .senders li { font-size: 1.2vh; padding: 0.12vh 0.2vh; }
  .senders li:nth-child(n + 4) { display: none; }
  .senders li .av { width: 2.1vh; height: 2.1vh; font-size: 1vh; }
  .feed { bottom: 19vh; }
  .feed div { font-size: 1.45vh; max-width: 62vw; }
  .feed div:nth-child(n + 3) { display: none; } /* dikeyde 2 satır: çeneyi kapatmasın */
  .jar { right: 1vw; bottom: 9vh; width: 9vh; height: 11vh; }
  .tools { width: 96vw; box-sizing: border-box; justify-content: space-between; gap: 0.3vh; padding: 0.4vh; }
  .tools div { flex: 1; width: auto; height: 5vh; }
  .note { top: 18.4vh; font-size: 1.7vh; white-space: normal; text-align: center; width: max-content; }
  .note.boss { font-size: 2vh; }
  .tb { top: 22vh; }
  .tbImg { width: 11vh; height: 8vh; }
  .tbt b { font-size: 2.6vh; }
  .tb .arrow { width: 4vh; height: 5.4vh; }
  .fx.pop { font-size: 5.4vh; }
  .ovbox small { font-size: 2.4vh; }
  .ovbox span { font-size: 1.6vh; }
}

/* klinik renkleri, ekran kenarı */
.panel, .stat, .chip { background: #0d3a44e6; border-color: #7fe0d44a; }
.guide div { background: #0d3a44e6; }
.senders h4 { color: #8ff0e2; }
.stat b { color: #fff; text-shadow: 0 0.2vh 0 #0b2a31; }
.painbar { height: 3vh; box-shadow: 0 0.3vh 0 #0006; }
.painb.hot .painbar { border-color: #ff5a4a; box-shadow: 0 0 2vh #ff3b30; animation: painhot 0.45s ease-in-out infinite alternate; }
.painb .paint span:first-child { font-size: 2vh; }
@keyframes painhot { to { transform: scale(1.03); } }
.vig { position: absolute; inset: 0; background: radial-gradient(ellipse at center, #0000 56%, #0a2a3050 100%); }
#flash { position: absolute; z-index: 4; inset: 0; opacity: 0; }
.tools { background: #0d3a44f0; border: 0.25vh solid #7fe0d44a; }
.jar { box-shadow: inset 0 0 1.4vh #ffffff60, 0 0.6vh 1.4vh #0005; }
/* POP yazısının arkasında çizgi roman patlaması */
.fx.pop::before { content: ""; position: absolute; left: 50%; top: 50%; width: 2.3em; height: 2.3em; transform: translate(-50%, -50%); z-index: -1; background: #ffd23d; clip-path: polygon(50% 0, 60% 28%, 88% 8%, 74% 38%, 100% 50%, 74% 62%, 88% 92%, 60% 72%, 50% 100%, 40% 72%, 12% 92%, 26% 62%, 0 50%, 26% 38%, 12% 8%, 40% 28%); }
.fx.pop.huge { font-size: 12vh; }
.ztagless { display: none; }
@media (max-aspect-ratio: 3/4) {
  .fx.pop.huge { font-size: 8vh; }
}

.credit { position: absolute; left: 1vh; bottom: 0.4vh; font-size: 1.1vh; color: #ffffff80; pointer-events: none; }

/* çekerken olay listesi çekilir: çekme göstergesi çenenin altında, listeye biniyordu */
.feed { transition: opacity 0.25s; }
body.pulling .feed { opacity: 0; }