/* ZtrkRPG — balık tutma / idle RPG. Harici kaynak yok, base.css'teki tema değişkenlerini kullanır. */

/* iOS Safari'de art arda hızlı dokunuşları (ör. balık tutarken çabuk tıklama) "çift dokunup yakınlaştır"
   jesti sanıp sayfayı zoom'lamasın diye: manipulation, çift-dokunma zoom'unu ve 300ms tıklama gecikmesini
   kapatır ama iki parmakla yakınlaştırma (erişilebilirlik) hâlâ çalışır. */
.z-wrap, header.top { touch-action: manipulation; }

.z-wrap { width: min(760px, 100% - 32px); margin: 0 auto; padding: 14px 0 60px; display: grid; gap: 16px; }

/* ---------- HUD ---------- */
.z-hud { display: flex; align-items: center; gap: 16px; padding: 16px 18px; flex-wrap: wrap; }
.z-hud-main { flex: 1; min-width: 200px; display: grid; gap: 9px; }
.z-lvl { display: flex; align-items: center; gap: 10px; }
.z-lvl-badge { flex: none; padding: 6px 12px; border-radius: 999px; background: var(--grad); color: #fff; font-weight: 800; font-size: 14px; white-space: nowrap; }
.z-xp { flex: 1; height: 10px; min-width: 90px; border-radius: 99px; background: var(--surface-2); border: 1px solid var(--border); overflow: hidden; }
.z-xp i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--ok), var(--accent-2)); transition: width .3s ease-out; }
.z-xp-txt { flex: none; font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.z-hungerrow { display: flex; align-items: center; gap: 8px; }
.z-hunger-ic { font-size: 15px; flex: none; }
.z-hunger { flex: 1; height: 8px; min-width: 90px; border-radius: 99px; background: var(--surface-2); border: 1px solid var(--border); overflow: hidden; }
.z-hunger i { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, var(--ok), #a3e635); transition: width .3s ease-out, background .3s; }
.z-hunger.low i { background: linear-gradient(90deg, var(--warn), var(--danger)); }
.z-hunger-txt { flex: none; font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; width: 28px; text-align: right; }
.z-gold { position: relative; display: flex; align-items: center; gap: 6px; font-size: 19px; font-weight: 800; font-variant-numeric: tabular-nums; flex-wrap: wrap; }
.z-gold-ic { font-size: 19px; }
.z-passive-txt { font-size: 12px; font-weight: 700; color: var(--ok); }
.z-gold-pop-wrap { position: absolute; left: 30px; bottom: 100%; pointer-events: none; }
.z-gold-pop { position: absolute; left: 0; transform: translateX(-50%); white-space: nowrap; font-size: 14px; font-weight: 800; color: var(--ok); animation: zgp 1s ease-out forwards; }
@keyframes zgp { from { opacity: 1; transform: translate(-50%, 0); } to { opacity: 0; transform: translate(-50%, -30px); } }

/* ---------- Avatar (32x48 piksel karakter) ---------- */
.z-avatar { position: relative; flex: none; width: 66px; height: 98px; display: block; border-radius: 16px; overflow: visible; transition: transform .2s; padding: 0; border: 0; background: none; cursor: pointer; }
.z-avatar:hover { transform: translateY(-2px); }
.z-av-body {
  width: 100%; height: 100%; border-radius: 16px; display: grid; place-items: center; overflow: visible; /* şapka kutudan taşabilsin */
  background: linear-gradient(180deg, var(--surface-2), var(--surface)); border: 1px solid var(--border);
}
.z-av-fig { position: relative; width: 60px; height: 90px; }
.z-av-fig canvas { image-rendering: pixelated; width: 60px; height: 90px; display: block; }
/* Kıyafet emojileri: yer ve boy avatar-core.js'teki WEAR tablosundan (32x48 ızgara), JS ile verilir; burada yalnızca
   emojinin merkezinin o noktaya oturması sağlanır. Kapsayıcı her zaman kanvasla aynı boyuttadır (.z-av-fig,
   .z-angler-body, Meydan'daki .canv-wrap). */
.z-wear {
  position: absolute; transform: translate(-50%, -50%); line-height: 1; white-space: nowrap; pointer-events: none;
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; font-style: normal;
  filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, .35));
}
.z-wear.flip { transform: translate(-50%, -50%) scaleX(-1); }
/* Windows'un (Segoe UI Emoji) hançeri diğer platformların tersine çizili: kabzası sağ üstte. Aynı sonucu (kabza sağ
   altta, elde) dikey aynalama verir. */
.emoji-ms .z-wear.wear-sword.flip { transform: translate(-50%, -50%) scaleY(-1); }
.z-av-status { position: absolute; bottom: -6px; left: -6px; font-size: 16px; filter: drop-shadow(0 2px 4px rgba(0,0,0,.4)); }

/* ---------- Bildirim (açlık/kayıp) ---------- */
.z-notice { margin: 0 !important; padding: 11px 16px; border-radius: 14px; font-size: 14px; font-weight: 700; text-align: center;
  background: color-mix(in srgb, var(--danger) 16%, var(--surface)); border: 1px solid color-mix(in srgb, var(--danger) 45%, var(--border)); color: var(--text); }

/* ---------- Meslek anahtarı ---------- */
.z-profs { display: flex; gap: 8px; }
.z-prof { position: relative; flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 10px 8px; border-radius: 14px; border: 1px solid var(--border); background: var(--surface); font-weight: 700; font-size: 13.5px; transition: background .2s, border-color .2s; }
.z-prof .pi { font-size: 16px; }
.z-prof.active { background: var(--grad); color: #fff; border-color: transparent; }
.z-prof.active[data-prof="mining"] { background: linear-gradient(120deg, #f59e0b, #c2410c); }
.z-prof.active[data-prof="farming"] { background: linear-gradient(120deg, #22c55e, #15803d); }
/* Tarlada olgun ürün varken (başka meslekteyken de) tarım düğmesinde yanıp sönen nokta */
.z-prof.ready::after { content: ''; position: absolute; top: 6px; right: 8px; width: 8px; height: 8px; border-radius: 50%; background: #facc15; box-shadow: 0 0 0 3px rgba(250, 204, 21, .35); animation: zdot 1.2s ease-in-out infinite; }
@keyframes zdot { 50% { box-shadow: 0 0 0 7px rgba(250, 204, 21, 0); } }

/* ---------- İş sahnesi: balıkçılıkta deniz, madencilikte mağara, tarımda tarla ---------- */
/* Hepsi saf CSS çizimi (harici görsel yok — sitenin CSP'si de izin vermez). --hz ufuk çizgisinin yüksekliği.
   Dekor katmanları tıklamayı engellemez; tıklanabilen tek şey tarım tarlalarıdır (#zFarm). */
.z-pond { padding: 18px; display: grid; gap: 12px; }
.z-water {
  --hz: 46%;
  position: relative; height: 216px; border-radius: 18px; overflow: hidden; display: grid; place-items: center; isolation: isolate;
  background: #0f6a84; border: 1px solid var(--border);
}
.z-sky, .z-ground, .z-seadeco, .z-cavedeco, .z-farmdeco { position: absolute; pointer-events: none; }
.z-seadeco, .z-cavedeco, .z-farmdeco, .z-farm { display: none; }
.z-water.scene-sea .z-seadeco, .z-water.scene-cave .z-cavedeco, .z-water.scene-field .z-farmdeco { display: block; }
.z-water.scene-field .z-farm { display: flex; }

/* Gökyüzü (deniz + tarla): güneş, kayan bulutlar, kanat çırpan kuşlar */
.z-sky { left: 0; right: 0; top: 0; height: var(--hz); z-index: 0; overflow: hidden; background: linear-gradient(180deg, #4aaee6 0%, #8ccff1 52%, #dcf2fb 100%); }
.z-water.scene-cave .z-sky { display: none; }
.z-water.scene-field .z-sky { background: linear-gradient(180deg, #58b7ec 0%, #9fd9f4 55%, #effae6 100%); }
.z-sun { position: absolute; top: 15%; right: 12%; width: 30px; height: 30px; border-radius: 50%;
  background: radial-gradient(circle at 42% 40%, #fffdf2 0%, #ffe98a 45%, #ffc53a 100%);
  box-shadow: 0 0 0 7px rgba(255, 232, 140, .28), 0 0 30px 12px rgba(255, 214, 100, .45); animation: zsun 5s ease-in-out infinite; }
@keyframes zsun { 50% { box-shadow: 0 0 0 10px rgba(255, 232, 140, .16), 0 0 38px 16px rgba(255, 214, 100, .5); } }
.z-cloud { position: absolute; top: 18%; left: -18%; width: 46px; height: 14px; background: #fff; border-radius: 999px; opacity: .92; animation: zdrift linear infinite; }
.z-cloud::before, .z-cloud::after { content: ''; position: absolute; background: #fff; border-radius: 50%; }
.z-cloud::before { width: 22px; height: 22px; top: -11px; left: 7px; }
.z-cloud::after { width: 16px; height: 16px; top: -7px; left: 23px; }
.z-cloud.c1 { animation-duration: 58s; animation-delay: -14s; }
.z-cloud.c2 { top: 44%; animation-duration: 80s; animation-delay: -50s; transform: scale(.7); opacity: .7; }
.z-cloud.c3 { top: 6%; animation-duration: 104s; animation-delay: -78s; transform: scale(1.15); opacity: .82; }
@keyframes zdrift { from { left: -18%; } to { left: 108%; } }
.z-bird { position: absolute; top: 34%; left: -8%; width: 16px; height: 8px; animation: zbird 32s linear infinite; }
.z-bird.b2 { top: 22%; animation-duration: 41s; animation-delay: -17s; transform: scale(.75); }
.z-bird::before, .z-bird::after { content: ''; position: absolute; top: 2px; width: 8px; height: 5px; border-top: 2px solid #2d3e50; border-radius: 60% 60% 0 0; transform-origin: 50% 100%; animation: zflap .42s ease-in-out infinite alternate; }
.z-bird::before { left: 0; }
.z-bird::after { left: 7px; }
@keyframes zflap { to { transform: scaleY(.3); } }
@keyframes zbird { 0% { left: -8%; margin-top: 0; } 50% { margin-top: -7px; } 100% { left: 108%; margin-top: 0; } }

/* Zemin: deniz / tarla çimi / mağara tabanı */
.z-ground { left: 0; right: 0; bottom: 0; top: var(--hz); z-index: 0; background: linear-gradient(180deg, #3fb3cd 0%, #1c87a4 36%, #106884 70%, #0a4b61 100%); }
.z-ground::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .8) 72%, rgba(255, 255, 255, 0)); }
.z-water.scene-field .z-ground { background: linear-gradient(180deg, #93d56d 0%, #72c150 42%, #5aa93d 100%); }
.z-water.scene-field .z-ground::before { height: 100%; background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .07) 0 28px, transparent 28px 56px); }
.z-water.scene-cave .z-ground { top: 70%; background: linear-gradient(180deg, #4d3c2c 0%, #2b2219 100%); box-shadow: 0 -6px 12px rgba(0, 0, 0, .35); }
.z-water.scene-cave .z-ground::before { height: 100%; background: radial-gradient(circle at 20% 40%, rgba(0, 0, 0, .35) 2px, transparent 3px) 0 0 / 34px 18px, radial-gradient(circle at 70% 70%, rgba(255, 235, 200, .09) 2px, transparent 3px) 0 0 / 46px 22px; }

/* ---- Deniz: ada + deniz feneri, dalgalar, güneş ışıltıları, balık gölgeleri ---- */
.z-seadeco { inset: 0; z-index: 0; overflow: hidden; }
.z-seadeco .island { position: absolute; left: 55%; top: calc(var(--hz) - 15px); width: 24%; height: 15px; border-radius: 55% 45% 0 0 / 100% 100% 0 0; background: linear-gradient(180deg, #438f63, #2c6447); }
.z-seadeco .island::before { content: ''; position: absolute; left: 58%; bottom: 0; width: 62%; height: 9px; border-radius: 50% 50% 0 0 / 100% 100% 0 0; background: #377755; }
.z-seadeco .lh { position: absolute; left: 22%; bottom: 7px; width: 5px; height: 17px; border-radius: 1px 1px 0 0; background: repeating-linear-gradient(180deg, #f8fafc 0 3px, #e11d48 3px 6px); }
.z-seadeco .lh::before { content: ''; position: absolute; left: -1px; top: -4px; width: 7px; height: 4px; border-radius: 2px 2px 0 0; background: #334155; }
.z-seadeco .lh::after { content: ''; position: absolute; left: -3px; top: -9px; width: 11px; height: 6px; border-radius: 50%; background: #fff3b0; box-shadow: 0 0 10px 4px rgba(255, 230, 120, .65); animation: zbeacon 2.6s ease-in-out infinite; }
@keyframes zbeacon { 0%, 55%, 100% { opacity: .15; } 68%, 88% { opacity: 1; } }
.z-seadeco .wave { --tw: 24px; position: absolute; left: -48px; right: -48px; height: 10px; opacity: .5;
  background: radial-gradient(circle at 50% 100%, transparent 8px, rgba(255, 255, 255, .78) 9px, transparent 10.5px) 0 0 / var(--tw) 10px repeat-x;
  animation: zwave 6s linear infinite; }
.z-seadeco .wave.w1 { top: calc(var(--hz) + 9%); --tw: 20px; opacity: .38; }
.z-seadeco .wave.w2 { top: calc(var(--hz) + 24%); --tw: 28px; animation-duration: 9s; animation-direction: reverse; }
.z-seadeco .wave.w3 { top: calc(var(--hz) + 39%); --tw: 36px; animation-duration: 7.5s; opacity: .42; }
@keyframes zwave { to { transform: translateX(var(--tw)); } }
.z-seadeco .glint { position: absolute; height: 2px; border-radius: 2px; background: rgba(255, 255, 255, .9); animation: zglint 3s ease-in-out infinite; }
.z-seadeco .glint.g1 { right: 12%; top: calc(var(--hz) + 6%); width: 14px; }
.z-seadeco .glint.g2 { right: 16%; top: calc(var(--hz) + 16%); width: 9px; animation-delay: -.8s; }
.z-seadeco .glint.g3 { right: 9%; top: calc(var(--hz) + 28%); width: 12px; animation-delay: -1.7s; }
.z-seadeco .glint.g4 { right: 14%; top: calc(var(--hz) + 40%); width: 7px; animation-delay: -2.3s; }
@keyframes zglint { 0%, 100% { opacity: .1; transform: scaleX(.5); } 50% { opacity: 1; transform: scaleX(1); } }
.z-seadeco .fish { position: absolute; left: 105%; width: 24px; height: 9px; border-radius: 50%; background: rgba(4, 38, 50, .42); animation: zswim 24s linear infinite; }
.z-seadeco .fish::after { content: ''; position: absolute; right: -7px; top: 1px; border-left: 8px solid rgba(4, 38, 50, .42); border-top: 3.5px solid transparent; border-bottom: 3.5px solid transparent; }
.z-seadeco .fish.f1 { top: calc(var(--hz) + 31%); animation-delay: -7s; }
.z-seadeco .fish.f2 { top: calc(var(--hz) + 45%); animation-duration: 33s; animation-delay: -21s; transform: scale(.8); }
@keyframes zswim { from { left: 105%; } to { left: -12%; } }

/* ---- Mağara: kaya duvarlar, sarkıtlar, destek kirişleri, titreyen fener, cevher damarları, ray + vagon, toz ---- */
.z-water.scene-cave { background: radial-gradient(ellipse 62% 72% at 62% 30%, #6d523a 0%, #3b2d21 46%, #1a1410 100%); }
.z-cavedeco { inset: 0; z-index: 0; overflow: hidden; }
.z-cavedeco .rock { position: absolute; border-radius: 50%; background: radial-gradient(circle at 38% 34%, #5d4b3a, #362b21 72%); }
.z-cavedeco .rock.r1 { left: -10%; top: -32%; width: 40%; height: 72%; }
.z-cavedeco .rock.r2 { right: -12%; top: -36%; width: 44%; height: 78%; }
.z-cavedeco .rock.r3 { right: -8%; top: 34%; width: 20%; height: 52%; }
.z-cavedeco .rock.r4 { left: 31%; top: -50%; width: 34%; height: 64%; background: radial-gradient(circle at 50% 72%, #4f4032, #2d241b 72%); }
.z-cavedeco .stal { position: absolute; top: 0; width: 0; height: 0; border-left: 7px solid transparent; border-right: 7px solid transparent; border-top: 18px solid #493b2e; filter: drop-shadow(0 2px 1px rgba(0, 0, 0, .45)); }
.z-cavedeco .stal.s1 { left: 18%; top: 7%; }
.z-cavedeco .stal.s2 { left: 34%; top: 3%; border-top-width: 24px; }
.z-cavedeco .stal.s3 { left: 52%; top: 5%; border-top-width: 14px; }
.z-cavedeco .stal.s4 { left: 70%; top: 8%; border-top-width: 20px; }
.z-cavedeco .stal.s5 { left: 91%; top: 12%; border-top-width: 16px; }
.z-cavedeco .beam { position: absolute; background: linear-gradient(90deg, #5d3d22, #8d6038 45%, #5a3a1f); box-shadow: 0 2px 5px rgba(0, 0, 0, .5); }
.z-cavedeco .beam.bl { left: 40%; top: 14%; bottom: 30%; width: 10px; }
.z-cavedeco .beam.br { left: 82%; top: 14%; bottom: 30%; width: 10px; }
.z-cavedeco .beam.bt { left: 38%; width: 48%; top: 12%; height: 10px; background: linear-gradient(180deg, #8d6038, #5a3a1f); }
.z-cavedeco .lamplight { position: absolute; left: calc(61% - 75px); top: calc(12% - 45px); width: 160px; height: 160px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 190, 90, .34), rgba(255, 190, 90, 0) 66%); animation: zglow 2.3s ease-in-out infinite; }
.z-cavedeco .lantern { position: absolute; left: 61%; top: calc(12% + 20px); width: 10px; height: 14px; border-radius: 3px; background: linear-gradient(180deg, #ffe08a, #f59e0b); box-shadow: inset 0 0 0 2px #3b2a18, 0 0 12px 4px rgba(255, 190, 80, .7); animation: zflicker 2.3s steps(1) infinite; }
.z-cavedeco .lantern::before { content: ''; position: absolute; left: 4px; top: -10px; width: 2px; height: 10px; background: #2b2118; }
@keyframes zflicker { 0%, 100% { opacity: 1; } 37% { opacity: .8; } 41% { opacity: 1; } 73% { opacity: .9; } }
@keyframes zglow { 0%, 100% { opacity: 1; transform: scale(1); } 40% { opacity: .72; transform: scale(.95); } 70% { opacity: .9; transform: scale(1.03); } }
.z-cavedeco .ore { position: absolute; width: 22px; height: 14px; animation: zore 3.4s ease-in-out infinite;
  background: radial-gradient(circle at 20% 40%, #ffd54a 2px, transparent 2.6px), radial-gradient(circle at 55% 72%, #ffc107 1.6px, transparent 2.2px), radial-gradient(circle at 82% 28%, #ffe082 1.8px, transparent 2.4px); }
.z-cavedeco .ore.o1 { left: 8%; top: 24%; }
.z-cavedeco .ore.o2 { left: 90%; top: 52%; animation-delay: -1.2s; }
.z-cavedeco .ore.o3 { left: 27%; top: 46%; animation-delay: -2.1s; }
.z-cavedeco .ore.o4 { left: 71%; top: 30%; animation-delay: -.5s;
  background: radial-gradient(circle at 25% 50%, #7dd3fc 2px, transparent 2.6px), radial-gradient(circle at 70% 36%, #38bdf8 1.6px, transparent 2.2px), radial-gradient(circle at 50% 80%, #bae6fd 1.4px, transparent 2px); }
@keyframes zore { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
.z-cavedeco .crystal { position: absolute; width: 6px; height: 12px; border-radius: 2px; animation: zcrystal 2.4s ease-in-out infinite; }
.z-cavedeco .crystal.c1 { left: 11%; top: 58%; background: linear-gradient(180deg, #c4b5fd, #6d28d9); box-shadow: 0 0 8px 2px rgba(167, 139, 250, .7); }
.z-cavedeco .crystal.c2 { left: 93%; top: 68%; transform: rotate(18deg); background: linear-gradient(180deg, #c4b5fd, #6d28d9); box-shadow: 0 0 8px 2px rgba(167, 139, 250, .7); animation-delay: -1.2s; }
.z-cavedeco .crystal.c3 { left: 47%; top: 22%; width: 5px; height: 9px; background: linear-gradient(180deg, #a5f3fc, #0891b2); box-shadow: 0 0 8px 2px rgba(103, 232, 249, .7); animation-delay: -.6s; }
@keyframes zcrystal { 0%, 100% { opacity: .6; } 50% { opacity: 1; } }
.z-cavedeco .rails { position: absolute; left: 30%; right: -2%; bottom: 10%; height: 9px;
  background: linear-gradient(180deg, #a1a9b3 0 2px, transparent 2px 7px, #a1a9b3 7px 9px), repeating-linear-gradient(90deg, #5a3b20 0 5px, transparent 5px 16px); }
.z-cavedeco .cart { position: absolute; left: 72%; bottom: calc(10% + 3px); width: 46px; height: 28px; }
.z-cavedeco .cart::before { content: ''; position: absolute; left: 0; right: 0; top: 7px; height: 17px; background: linear-gradient(180deg, #8a97a6, #4b5563); clip-path: polygon(0 0, 100% 0, 86% 100%, 14% 100%); }
.z-cavedeco .cart::after { content: ''; position: absolute; left: 6px; right: 6px; bottom: 0; height: 8px;
  background: radial-gradient(circle at 5px 4px, #111827 2.5px, #6b7280 3px, transparent 4px), radial-gradient(circle at calc(100% - 5px) 4px, #111827 2.5px, #6b7280 3px, transparent 4px); }
.z-cavedeco .cart .load { position: absolute; left: 5px; right: 5px; top: 0; height: 10px; border-radius: 50% 50% 25% 25%;
  background: radial-gradient(circle at 25% 60%, #ffd54a 2px, transparent 3px), radial-gradient(circle at 62% 38%, #7dd3fc 2px, transparent 3px), radial-gradient(circle at 80% 70%, #ffd54a 1.5px, transparent 2.5px), #2b2b2b; }
.z-cavedeco .dust { position: absolute; top: 15%; width: 3px; height: 3px; border-radius: 50%; background: rgba(255, 232, 200, .65); animation: zdust 6.5s linear infinite; }
.z-cavedeco .dust.d1 { left: 47%; }
.z-cavedeco .dust.d2 { left: 64%; animation-duration: 8s; animation-delay: -2.5s; }
.z-cavedeco .dust.d3 { left: 76%; animation-duration: 7s; animation-delay: -4.5s; }
@keyframes zdust { 0% { transform: translate(0, 0); opacity: 0; } 15% { opacity: .85; } 100% { transform: translate(6px, 130px); opacity: 0; } }

/* ---- Tarla: tepeler, ahır, ağaçlar, çit, kelebek ---- */
.z-farmdeco { inset: 0; z-index: 0; overflow: hidden; }
.z-farmdeco .hill { position: absolute; border-radius: 50%; }
.z-farmdeco .hill.h1 { left: -14%; top: calc(var(--hz) - 26px); width: 66%; height: 60px; background: radial-gradient(ellipse at 50% 25%, #a4dd83, #7ec65f 60%, #93d56d 100%); }
.z-farmdeco .hill.h2 { left: 38%; top: calc(var(--hz) - 18px); width: 78%; height: 52px; background: radial-gradient(ellipse at 50% 25%, #8fd26f, #6fbd51 60%, #93d56d 100%); }
.z-farmdeco .barn { position: absolute; left: 73%; top: calc(var(--hz) - 30px); width: 30px; height: 20px; background: linear-gradient(180deg, #dc4a3e, #b3322a); box-shadow: inset 0 0 0 2px #f8fafc; }
.z-farmdeco .barn::before { content: ''; position: absolute; left: -4px; right: -4px; top: -13px; height: 14px; background: #8e2a22; clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.z-farmdeco .barn::after { content: ''; position: absolute; left: 10px; bottom: 0; width: 10px; height: 12px; background: #7a2019; box-shadow: inset 0 0 0 1.5px #f8fafc; }
.z-farmdeco .tree { position: absolute; width: 4px; height: 12px; background: #7b5230; }
.z-farmdeco .tree::before { content: ''; position: absolute; left: -9px; bottom: 9px; width: 22px; height: 22px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #86d66a, #3f8f33 76%); }
.z-farmdeco .tree.t1 { left: 25%; top: calc(var(--hz) - 11px); }
.z-farmdeco .tree.t2 { left: 91%; top: calc(var(--hz) - 7px); transform: scale(.8); }
.z-farmdeco .fence { position: absolute; left: 0; right: 0; top: calc(var(--hz) + 3px); height: 14px;
  background: linear-gradient(180deg, transparent 3px, #e6d3aa 3px 5px, transparent 5px 9px, #e6d3aa 9px 11px, transparent 11px), repeating-linear-gradient(90deg, #f4e7c8 0 3px, transparent 3px 13px); }
.z-farmdeco .butterfly { position: absolute; left: 36%; top: 26%; font-size: 12px; animation: zflutter 16s ease-in-out infinite; }
@keyframes zflutter { 0%, 100% { transform: translate(0, 0) rotate(-6deg); } 25% { transform: translate(70px, -14px) rotate(8deg); } 50% { transform: translate(140px, 6px) rotate(-4deg); } 75% { transform: translate(50px, 18px) rotate(6deg); } }

/* ---- Tarlalar (tıklanabilir): boş → ek, büyüyor → kalan süre, olgun → topla ---- */
.z-farm { position: absolute; left: 30%; right: 3%; bottom: 6%; height: 50%; z-index: 2; gap: 8px; }
.z-plot { position: relative; flex: 1; min-width: 0; display: grid; place-items: center; padding: 0; border-radius: 14px; border: 2px solid #5b3a1e; cursor: pointer; font: inherit; color: #fff;
  background: repeating-linear-gradient(180deg, rgba(0, 0, 0, .17) 0 2px, transparent 2px 9px), linear-gradient(180deg, #93613a, #6a4326);
  box-shadow: inset 0 3px 0 rgba(255, 255, 255, .12), 0 4px 0 #4a2f18; transition: transform .15s, box-shadow .2s, border-color .2s; }
.z-plot:hover { transform: translateY(-2px); }
.z-plot:active { transform: translateY(1px); }
.z-plot:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.z-plot .pc { display: grid; place-items: center; margin-bottom: 16px; font-size: 26px; line-height: 1; filter: drop-shadow(0 3px 2px rgba(0, 0, 0, .35)); }
.z-plot.stage-0 .pc { font-size: 15px; }
.z-plot.stage-1 .pc { font-size: 20px; }
.z-plot.stage-2 .pc { font-size: 23px; opacity: .88; }
.z-plot.ripe .pc { font-size: 30px; animation: zripe 1.1s ease-in-out infinite; }
@keyframes zripe { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-4px) rotate(-5deg); } }
.z-plot.ripe { border-color: #ffd54a; box-shadow: 0 0 0 2px rgba(255, 213, 74, .45), 0 0 16px rgba(255, 213, 74, .55), 0 4px 0 #4a2f18; }
.z-plot.ripe::after { content: '✨'; position: absolute; top: 4px; right: 6px; font-size: 12px; animation: zsparkle 1.6s ease-in-out infinite; }
@keyframes zsparkle { 0%, 100% { opacity: .35; transform: scale(.7); } 50% { opacity: 1; transform: scale(1.1); } }
.z-plot.empty .pc { width: 34px; height: 34px; border: 2px dashed rgba(255, 255, 255, .5); border-radius: 10px; font-size: 18px; color: rgba(255, 255, 255, .85); filter: none; }
.z-plot .pbar { position: absolute; left: 12%; right: 12%; bottom: 19px; height: 5px; border-radius: 99px; background: rgba(0, 0, 0, .38); overflow: hidden; }
.z-plot .pbar i { display: block; width: 0; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #bef264, #4ade80); }
.z-plot.empty .pbar, .z-plot.ripe .pbar { display: none; }
.z-plot .pl { position: absolute; left: 2px; right: 2px; bottom: 3px; font-size: 10.5px; font-weight: 800; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 1px 2px rgba(0, 0, 0, .7); font-variant-numeric: tabular-nums; }
.z-plot.ripe .pl { color: #ffe066; }

/* Sahne ortası ipucu (tarlada gizli — ortada tarlalar var, mesajlar toast'ta) */
.z-hint { position: relative; z-index: 3; max-width: 86%; margin: 0; padding: 5px 14px; border-radius: 999px; text-align: center; font-weight: 700; font-size: 14.5px;
  color: #fff7e6; background: rgba(0, 0, 0, .38); text-shadow: 0 1px 3px rgba(0, 0, 0, .4); }
.z-water.scene-sea .z-hint { color: #083344; background: rgba(255, 255, 255, .62); text-shadow: none; }
.z-water.scene-field .z-hint { display: none; }

/* Ürün seçici (sahnenin altında, yalnızca tarımda) */
.z-croppick { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.z-crop { display: grid; justify-items: center; gap: 1px; padding: 10px 6px 9px; border-radius: 14px; border: 1px solid var(--border); background: var(--surface); color: var(--text); font: inherit; cursor: pointer; transition: border-color .2s, background .2s, transform .15s; }
.z-crop:hover { transform: translateY(-1px); }
.z-crop.active { border-color: #22c55e; background: color-mix(in srgb, #22c55e 14%, var(--surface)); box-shadow: inset 0 0 0 1px #22c55e; }
.z-crop .ci { font-size: 24px; line-height: 1.2; }
.z-crop b { font-size: 13px; }
.z-crop .cm { font-size: 11.5px; font-weight: 700; color: var(--muted); }
.z-crop .cg { font-size: 12.5px; font-weight: 800; }
.z-crop .ch { font-size: 10.5px; color: var(--muted); }
.z-farmhint { margin: -4px 0 0 !important; text-align: center; }

/* Ana düğme mesleğin rengini alır */
.z-pond.prof-fishing .z-castbtn:not(.catch) { background: linear-gradient(120deg, #0ea5e9, #6366f1); }
.z-pond.prof-mining .z-castbtn:not(.catch) { background: linear-gradient(120deg, #f59e0b, #c2410c); box-shadow: 0 10px 28px rgba(234, 88, 12, .32); }
.z-pond.prof-farming .z-castbtn:not(.catch) { background: linear-gradient(120deg, #22c55e, #15803d); box-shadow: 0 10px 28px rgba(22, 163, 74, .32); }
.z-castbtn:disabled { opacity: .7; cursor: default; transform: none; }

/* ---------- Karakterin durduğu yer: denizde iskele, mağarada kaya çıkıntısı (tarlada doğrudan çimde durur) ---------- */
.z-dock { position: absolute; left: 0; bottom: 0; z-index: 1; width: 28%; height: 36%; pointer-events: none; }
.z-dock::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 12px; border-radius: 0 6px 6px 0;
  background: repeating-linear-gradient(90deg, #a8733f 0 16px, #7a4f27 16px 17px); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .25), 0 3px 0 #5c3a1b; }
.z-dock::after { content: ''; position: absolute; left: 12%; right: 10%; top: 12px; bottom: 0;
  background: linear-gradient(180deg, rgba(4, 50, 70, 0) 20%, rgba(4, 50, 70, .55)), linear-gradient(90deg, #5c3a1b 8px, transparent 8px) 0 0 / 46% 100% repeat-x; }
.z-water.scene-cave .z-dock::before { height: 100%; border-radius: 0 18px 0 0; background: linear-gradient(180deg, #6f5e4b, #4a3d30 38%, #2c241c); box-shadow: inset -3px 3px 0 rgba(255, 255, 255, .08); }
.z-water.scene-cave .z-dock::after { display: none; }
.z-water.scene-field .z-dock { display: none; }

/* Atış çizgisi: elin/oltanın ucundan şamandıraya (viewBox 0-100 = %); kalınlık ekran pikseliyle sabit */
.z-lineSvg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; }
#zLine { stroke: rgba(255, 255, 255, .85); stroke-width: 1.2px; vector-effect: non-scaling-stroke; opacity: 0; transition: opacity .2s; }
#zLine:not([hidden]) { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .z-water *, .z-water *::before, .z-water *::after { animation: none !important; }
}

/* ---------- Sahnedeki karakter: olta at / ısırma / çekme anlarında tepki verir ---------- */
.z-angler { position: absolute; left: 8%; bottom: calc(36% - 5px); z-index: 2; transform-origin: 50% 100%; animation: anglerIdle 2.6s ease-in-out infinite; filter: drop-shadow(0 6px 10px rgba(0,0,0,.4)); }
.z-angler-body { position: relative; }
.z-angler-body canvas { image-rendering: pixelated; width: 40px; height: 60px; display: block; }
@keyframes anglerIdle { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2px); } }
.z-angler.casting { animation: anglerCast .55s cubic-bezier(.3,.6,.3,1); }
@keyframes anglerCast { 0% { transform: rotate(0deg); } 30% { transform: rotate(-16deg) translateY(2px); } 65% { transform: rotate(10deg); } 100% { transform: rotate(0deg); } }
.z-angler.biting { animation: anglerBite .3s ease-in-out infinite; }
@keyframes anglerBite { 0%, 100% { transform: translateX(0) rotate(0deg); } 25% { transform: translateX(-2px) rotate(-4deg); } 75% { transform: translateX(2px) rotate(4deg); } }
.z-angler.pulling { animation: anglerPull .5s cubic-bezier(.3,.6,.3,1); }
@keyframes anglerPull { 0% { transform: rotate(0deg) translateY(0); } 35% { transform: rotate(-14deg) translateY(-3px) scale(1.05); } 100% { transform: rotate(0deg) translateY(0) scale(1); } }
.z-angler.missed { animation: anglerSlump .6s ease-out; }
@keyframes anglerSlump { 0% { transform: translateY(0) rotate(0deg); } 40% { transform: translateY(4px) rotate(5deg); } 100% { transform: translateY(0) rotate(0deg); } }
@media (prefers-reduced-motion: reduce) { .z-angler, .z-angler.casting, .z-angler.biting, .z-angler.pulling, .z-angler.missed { animation: none !important; } }

/* Elindeki alet: mesleğe/kademeye göre ikonu değişir (balıkçılıkta çizilmiş olta, madencilik/tarımda emoji),
   olta atarken/beklerken açısı değişir */
.z-angler-tool { position: absolute; right: -6px; top: 26%; width: 22px; height: 22px; display: grid; place-items: center;
  font-size: 20px; transform-origin: bottom right; transform: rotate(-55deg); transition: transform .35s cubic-bezier(.3,.6,.3,1); filter: drop-shadow(0 2px 3px rgba(0,0,0,.4)); }
.z-angler.waiting .z-angler-tool, .z-angler.biting .z-angler-tool, .z-angler.pulling .z-angler-tool { transform: rotate(-15deg); }
.z-angler.casting .z-angler-tool { transform: rotate(10deg); }

/* ---------- Çizilmiş olta ikonu (kademeye göre malzeme/renk değişir; emoji gerçek bir oltaya benzemiyordu) ---------- */
.z-rodicon { position: relative; display: inline-block; width: 22px; height: 22px; pointer-events: none; vertical-align: middle; }
.z-rodicon .shaft { position: absolute; left: 2px; top: 15px; width: 21px; height: 3px; border-radius: 2px; transform: rotate(-50deg); transform-origin: 0 50%; box-shadow: 0 0 1px rgba(0,0,0,.5); }
.z-rodicon .reel { position: absolute; left: 0; top: 15px; width: 7px; height: 7px; margin-top: -2px; border-radius: 50%; border: 1px solid rgba(0,0,0,.45); }
.z-rodicon .tip { position: absolute; left: 15px; top: 0; width: 4px; height: 4px; border-radius: 50%; }
.z-rodicon .linehook { position: absolute; left: 17px; top: 2px; width: 1.5px; height: 10px; background: rgba(255,255,255,.55); transform-origin: top center; }

.z-rodicon.t0 .shaft { background: linear-gradient(100deg, #7a5230, #a5723f); }
.z-rodicon.t0 .reel { background: #6b4423; }
.z-rodicon.t0 .tip { background: #4a3018; }

.z-rodicon.t1 .shaft { background: repeating-linear-gradient(100deg, #c9a876 0 3px, #8a9a4a 3px 6px); }
.z-rodicon.t1 .reel { background: #9aa25a; }
.z-rodicon.t1 .tip { background: #5a6b2a; }

.z-rodicon.t2 .shaft { background: linear-gradient(100deg, #2b2b2b, #4a4a4a); }
.z-rodicon.t2 .reel { background: #1a1a1a; }
.z-rodicon.t2 .tip { background: #777; }

.z-rodicon.t3 .shaft { background: linear-gradient(100deg, #cbd5e1, #64748b); }
.z-rodicon.t3 .reel { background: #94a3b8; }
.z-rodicon.t3 .tip { background: #3b82f6; }

.z-rodicon.t4 .shaft { background: linear-gradient(100deg, #fde68a, #b45309); }
.z-rodicon.t4 .reel { background: #d97706; }
.z-rodicon.t4 .tip { background: #ef4444; }

.z-rodicon.t5 .shaft { background: linear-gradient(100deg, #ffffff, #67e8f9); box-shadow: 0 0 4px #67e8f9; }
.z-rodicon.t5 .reel { background: #22d3ee; }
.z-rodicon.t5 .tip { background: #fff; box-shadow: 0 0 5px #67e8f9, 0 0 7px #fff; }

/* Dükkan listesindeki büyütülmüş hâli (36px kutuda) */
.z-rod-ic .z-rodicon, .z-rod-ic .z-pickicon { transform: scale(1.5); }

/* ---------- Çizilmiş kazma ikonu (sap + kademeye göre malzeme değişen kafa) ---------- */
.z-pickicon { position: relative; display: inline-block; width: 22px; height: 22px; pointer-events: none; vertical-align: middle; }
.z-pickicon .handle { position: absolute; left: 3px; top: 17px; width: 18px; height: 3px; border-radius: 2px; transform: rotate(-50deg); transform-origin: 0 50%; background: #6b4423; box-shadow: 0 0 1px rgba(0,0,0,.5); }
.z-pickicon .head { position: absolute; left: 9px; top: 1px; width: 16px; height: 5px; border-radius: 1px; transform: rotate(24deg); clip-path: polygon(0% 50%, 28% 0%, 72% 0%, 100% 50%, 72% 100%, 28% 100%); }
.z-pickicon .shine { position: absolute; left: 12px; top: 2px; width: 5px; height: 1.5px; background: rgba(255,255,255,.5); border-radius: 1px; transform: rotate(24deg); }

.z-pickicon.p0 .handle { background: #6b4423; }
.z-pickicon.p0 .head { background: linear-gradient(100deg, #a5723f, #7a5230); }

.z-pickicon.p1 .handle { background: #6b4423; }
.z-pickicon.p1 .head { background: linear-gradient(100deg, #9a9a9a, #6b6b6b); }

.z-pickicon.p2 .handle { background: #5a4020; }
.z-pickicon.p2 .head { background: linear-gradient(100deg, #b0b8c2, #6b7885); }

.z-pickicon.p3 .handle { background: #3a3a3a; }
.z-pickicon.p3 .head { background: linear-gradient(100deg, #e2e8f0, #94a3b8); }

.z-pickicon.p4 .handle { background: #2a2a2a; }
.z-pickicon.p4 .head { background: linear-gradient(100deg, #ecfeff, #67e8f9); box-shadow: 0 0 4px #67e8f9; }

.z-pickicon.p5 .handle { background: #1a1a1a; }
.z-pickicon.p5 .head { background: linear-gradient(100deg, #f5f3ff, #a78bfa); box-shadow: 0 0 5px #a78bfa, 0 0 7px #c4b5fd; }

/* Dükkan listesindeki büyütülmüş hâli (çapa da) */
.z-rod-ic .z-hoeicon { transform: scale(1.5); }

/* ---------- Çizilmiş çapa ikonu (sap + kademeye göre malzeme değişen düz bel) ---------- */
.z-hoeicon { position: relative; display: inline-block; width: 22px; height: 22px; pointer-events: none; vertical-align: middle; }
.z-hoeicon .handle { position: absolute; left: 3px; top: 17px; width: 18px; height: 3px; border-radius: 2px; transform: rotate(-50deg); transform-origin: 0 50%; background: #6b4423; box-shadow: 0 0 1px rgba(0,0,0,.5); }
.z-hoeicon .blade { position: absolute; left: 10px; top: -1px; width: 11px; height: 6px; border-radius: 1px; transform: rotate(60deg); clip-path: polygon(15% 0%, 85% 0%, 100% 100%, 0% 100%); }
.z-hoeicon .shine { position: absolute; left: 12px; top: 1px; width: 4px; height: 1.5px; background: rgba(255,255,255,.5); border-radius: 1px; transform: rotate(60deg); }

.z-hoeicon.h0 .handle { background: #6b4423; }
.z-hoeicon.h0 .blade { background: linear-gradient(100deg, #a5723f, #7a5230); }

.z-hoeicon.h1 .handle { background: #6b4423; }
.z-hoeicon.h1 .blade { background: linear-gradient(100deg, #9aa5b0, #6b7580); }

.z-hoeicon.h2 .handle { background: #3a3a3a; }
.z-hoeicon.h2 .blade { background: linear-gradient(100deg, #e2e8f0, #94a3b8); }

.z-hoeicon.h3 .handle { background: #3a3a3a; }
.z-hoeicon.h3 .blade { background: linear-gradient(100deg, #f1f5f9, #b8c2ce); box-shadow: 0 0 3px rgba(255,255,255,.4); }

.z-hoeicon.h4 .handle { background: #2a2a2a; }
.z-hoeicon.h4 .blade { background: linear-gradient(100deg, #fde68a, #b45309); }

.z-hoeicon.h5 .handle { background: #1a1a1a; }
.z-hoeicon.h5 .blade { background: linear-gradient(100deg, #fbcfe8, #c026d3); box-shadow: 0 0 5px #d946ef, 0 0 7px #f0abfc; }

.z-bobber { position: absolute; left: 16%; bottom: 30%; transform: translate(-50%, 50%); font-size: 20px; filter: drop-shadow(0 4px 6px rgba(0,0,0,.4)); z-index: 2; transition: left .45s cubic-bezier(.2,.7,.3,1), bottom .45s cubic-bezier(.2,.7,.3,1); }
.z-bobber.landed { animation: zbob 1.1s ease-in-out infinite; }
.z-bobber.bite { animation: zbite .35s ease-in-out infinite; }
@keyframes zbob { 0%, 100% { transform: translate(-50%, 50%); } 50% { transform: translate(-50%, calc(50% - 5px)); } }
@keyframes zbite { 0%, 100% { transform: translate(-50%, 50%) rotate(0deg); } 25% { transform: translate(-65%, 55%) rotate(-10deg); } 75% { transform: translate(-35%, 55%) rotate(10deg); } }
.z-splash { position: absolute; left: 58%; bottom: 20%; transform: translateX(-50%); font-size: 28px; z-index: 2; animation: zsplash .5s ease-out forwards; }
@keyframes zsplash { from { opacity: 1; transform: translate(-50%, 0) scale(.6); } to { opacity: 0; transform: translate(-50%, -10px) scale(1.3); } }
.z-castbtn.catch { background: linear-gradient(120deg, var(--warn), var(--danger)); animation: zpulse .5s ease-in-out infinite; }
@keyframes zpulse { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--danger) 55%, transparent); } 50% { box-shadow: 0 0 0 10px transparent; } }
.z-rodnow { text-align: center; font-size: 13.5px; }

/* ---------- Toast ---------- */
.z-toast { min-height: 1.4em; text-align: center; font-weight: 700; font-size: 15px; margin: 0 !important; }
.z-toast:empty { min-height: 0; }
.z-toast.ok { color: var(--ok); }
.z-toast.miss { color: var(--danger); }

/* ---------- Sekmeler ---------- */
.z-tabs { display: flex; gap: 8px; flex-wrap: wrap; }
.z-tab { flex: 1; min-width: 120px; padding: 11px 14px; border-radius: 14px; border: 1px solid var(--border); background: var(--surface); font-weight: 700; font-size: 14.5px; transition: background .2s, border-color .2s; }
.z-tab.active { background: var(--grad); color: #fff; border-color: transparent; }
.z-panel { padding: 18px; display: grid; gap: 16px; }

/* ---------- Otomatik olta ---------- */
.z-auto { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 14px; border-radius: 16px; background: var(--surface-2); border: 1px solid var(--border); }
.z-auto .small { font-size: 12.5px; margin-top: 2px; }
.z-switch { position: relative; flex: none; width: 50px; height: 30px; }
.z-switch input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.z-switch span { position: absolute; inset: 0; border-radius: 999px; background: var(--surface); border: 1px solid var(--border); transition: background .2s; }
.z-switch span::before { content: ''; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: var(--muted); transition: transform .2s, background .2s; }
.z-switch input:checked + span { background: color-mix(in srgb, var(--ok) 30%, var(--surface)); border-color: var(--ok); }
.z-switch input:checked + span::before { transform: translateX(20px); background: var(--ok); }
.z-switch input:disabled + span { opacity: .5; cursor: not-allowed; }

/* ---------- Olta listesi ---------- */
.z-rods { display: grid; gap: 10px; }
.z-rod { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-radius: 16px; background: var(--surface); border: 1px solid var(--border); }
.z-rod.owned { border-color: color-mix(in srgb, var(--ok) 45%, var(--border)); }
.z-rod.equipped { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, var(--surface)); }
.z-rod-ic { font-size: 26px; flex: none; width: 40px; text-align: center; }
.z-rod-info { flex: 1; min-width: 0; }
.z-rod-info b { font-size: 15.5px; }
.z-rod-info p { color: var(--muted); font-size: 12.5px; margin-top: 2px; }
.z-rod-btn { flex: none; padding: 9px 16px; border-radius: 999px; font-weight: 700; font-size: 13.5px; border: 1px solid var(--border); background: var(--surface-2); white-space: nowrap; }
.z-rod-btn.buy { background: var(--grad); color: #fff; border-color: transparent; }
.z-rod-btn.equipped { color: var(--accent); border-color: var(--accent); background: none; }
.z-rod-btn:disabled { opacity: .45; cursor: not-allowed; }

/* ---------- Balık defteri ---------- */
.z-dex { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; }
.z-fish { display: grid; justify-items: center; gap: 6px; padding: 12px 8px; border-radius: 14px; background: var(--surface); border: 1px solid var(--border); text-align: center; }
.z-fish .ic { font-size: 30px; }
.z-fish.locked { opacity: .38; filter: grayscale(1); }
.z-fish .nm { font-size: 12.5px; font-weight: 700; }
.z-fish .ct { font-size: 11px; color: var(--muted); }
.z-fish .rar { font-size: 10px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; padding: 2px 8px; border-radius: 999px; }
.z-fish .rar.junk { color: var(--muted); background: var(--surface-2); }
.z-fish .rar.common { color: var(--text); background: var(--surface-2); }
.z-fish .rar.uncommon { color: var(--ok); background: color-mix(in srgb, var(--ok) 16%, transparent); }
.z-fish .rar.rare { color: var(--accent-2); background: color-mix(in srgb, var(--accent-2) 18%, transparent); }
.z-fish .rar.epic { color: var(--accent-3); background: color-mix(in srgb, var(--accent-3) 18%, transparent); }
.z-fish .rar.legendary { color: var(--warn); background: color-mix(in srgb, var(--warn) 20%, transparent); }
.z-fish .rar.mythic { color: #fff; background: linear-gradient(120deg, #f43f5e, #a855f7, #6366f1); }

/* ---------- Unvan rozeti ---------- */
.z-title-badge { display: inline-flex; justify-self: start; width: fit-content; padding: 3px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 800; color: #fff; background: linear-gradient(120deg, #f59e0b, #ef4444); border: 0; cursor: pointer; transition: transform .15s, filter .15s; }
.z-title-badge:hover { transform: translateY(-1px); filter: brightness(1.08); }
.z-title-badge:active { transform: translateY(0); }

/* ---------- Unvanlar penceresi ---------- */
.z-title-list { display: grid; gap: 18px; }
.z-title-sec { display: grid; gap: 8px; }
.z-title-sec-h { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.z-titlerow { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 16px; background: var(--surface); border: 1px solid var(--border); transition: border-color .2s, background .2s; }
.z-titlerow.earned { border-color: color-mix(in srgb, var(--ok) 45%, var(--border)); }
.z-titlerow.selected { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, var(--surface)); }
.z-titlerow.locked { opacity: .6; }
.z-titlerow .ic { flex: none; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; font-size: 17px; background: var(--surface-2); }
.z-titlerow.earned .ic { background: linear-gradient(120deg, #f59e0b, #ef4444); }
.z-titlerow-info { flex: 1; min-width: 0; }
.z-titlerow-info b { font-size: 14.5px; display: block; }
.z-titlerow-info .bonus { font-size: 11.5px; color: var(--accent-2); font-weight: 700; }
.z-titlerow-info .prog { margin-top: 5px; height: 5px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.z-titlerow-info .prog i { display: block; height: 100%; background: var(--grad); border-radius: 999px; }
.z-titlerow-info .prog-txt { font-size: 10.5px; color: var(--muted); margin-top: 3px; display: block; }
.z-titlerow-btn { flex: none; padding: 8px 14px; border-radius: 999px; font-weight: 700; font-size: 12.5px; border: 1px solid var(--border); background: var(--surface-2); white-space: nowrap; }
.z-titlerow-btn.select { background: var(--grad); color: #fff; border-color: transparent; }
.z-titlerow-btn.selected { color: var(--accent); border-color: var(--accent); background: none; }
.z-titlerow-btn:disabled { opacity: .45; cursor: not-allowed; }
.z-closet-shortcut { display: inline-flex; align-items: center; justify-self: start; width: fit-content; padding: 6px 14px; border-radius: 999px; font-size: 12.5px; font-weight: 700; border: 1px solid var(--border); background: var(--surface); transition: background .2s, transform .2s; }
.z-closet-shortcut:hover { background: var(--surface-2); transform: translateY(-1px); }

/* ---------- Arkadaşlar ---------- */
.z-friends-badge { position: absolute; top: 4px; right: 4px; width: 9px; height: 9px; border-radius: 50%; background: var(--danger); border: 2px solid var(--bg); }
#zFriendsOpenBtn { position: relative; }
.z-friends-addform { display: flex; gap: 8px; }
.z-friends-addform input { flex: 1; padding: 11px 14px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); color: var(--text); font: inherit; }
.z-friends-list { display: grid; gap: 8px; }
.z-friend-sec-h { font-size: 12px; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; margin-top: 4px; }
.z-friend-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; background: var(--surface); border: 1px solid var(--border); }
.z-friend-dot { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--muted); }
.z-friend-dot.online { background: var(--ok); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 25%, transparent); }
.z-friend-info { flex: 1; min-width: 0; }
.z-friend-info b { font-size: 14px; display: block; }
.z-friend-info span { font-size: 11.5px; color: var(--muted); }
.z-friend-actions { display: flex; gap: 6px; flex: none; }
.z-friend-empty { text-align: center; color: var(--muted); font-size: 12.5px; padding: 10px 0; }

/* ---------- Meydan: davet et paneli/banner ---------- */
.z-meydan-invite-banner { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px; border-radius: 14px; background: linear-gradient(120deg, color-mix(in srgb, var(--accent) 22%, var(--surface)), color-mix(in srgb, var(--accent-2) 22%, var(--surface))); border: 1px solid var(--accent-2); font-size: 13px; font-weight: 700; animation: lbIn .25s ease-out; }
.z-meydan-invite-banner .b { display: flex; gap: 6px; flex: none; }

/* ---------- Lider tablosu ---------- */
.z-lb-tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.z-lb-tab { flex: 1; min-width: 90px; padding: 9px 8px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); font-weight: 700; font-size: 12.5px; }
.z-lb-tab.active { background: var(--grad); color: #fff; border-color: transparent; }
.z-lb-reset { margin: 0 !important; font-size: 12.5px; color: var(--muted); text-align: center; }
.z-lb-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.z-lb-list li { display: grid; grid-template-columns: 34px 1fr auto; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 12px; background: var(--surface); border: 1px solid var(--border); }
.z-lb-list li.me { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 16%, var(--surface)); }
.z-lb-list .r { text-align: center; font-weight: 800; color: var(--muted); font-size: 15px; }
.z-lb-list .nm { min-width: 0; overflow: hidden; }
.z-lb-list .nm b { display: block; font-size: 14.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.z-lb-list .nm span { display: block; font-size: 11px; color: var(--muted); }
.z-lb-list .v { font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.z-lb-empty { text-align: center; color: var(--muted); padding: 20px 0; }
.z-lb-list li.z-lb-empty { grid-template-columns: 1fr; } /* satır içi style= canlıdaki CSP'ye takılıyordu, burada */
.z-lb-you { margin: 0 !important; text-align: center; font-size: 13px; color: var(--muted); }

/* ---------- Pasif gelir (binalar) ---------- */
.z-buildings { display: grid; gap: 10px; }
.z-bld { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-radius: 16px; background: var(--surface); border: 1px solid var(--border); }
.z-bld-ic { font-size: 26px; flex: none; width: 40px; text-align: center; }
.z-bld-info { flex: 1; min-width: 0; }
.z-bld-info b { font-size: 15.5px; }
.z-bld-info p { color: var(--muted); font-size: 12.5px; margin-top: 2px; }
.z-bld-btn { flex: none; padding: 9px 16px; border-radius: 999px; font-weight: 700; font-size: 13.5px; border: 1px solid var(--border); background: var(--grad); color: #fff; white-space: nowrap; }
.z-bld-btn:disabled { opacity: .45; cursor: not-allowed; background: var(--surface-2); color: var(--muted); }

/* ---------- Kıyafet dükkanı ---------- */
.z-closet { display: grid; gap: 18px; }
.z-closet-group b { font-size: 14px; display: block; margin-bottom: 8px; }
.z-closet-items { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.z-cloth { display: grid; justify-items: center; gap: 6px; padding: 10px 6px; border-radius: 14px; background: var(--surface); border: 1px solid var(--border); text-align: center; cursor: pointer; }
.z-cloth.owned { border-color: color-mix(in srgb, var(--ok) 45%, var(--border)); }
.z-cloth.equipped { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, var(--surface)); }
.z-cloth .ic { font-size: 24px; min-height: 26px; display: grid; place-items: center; }
/* Üst/alt giyim önizlemesi: gri mankende piksel çizim (bkz. avatar-core.js garmentIcon) */
.z-cloth .ic canvas { display: block; image-rendering: pixelated; }
.z-cloth .nm { font-size: 11.5px; font-weight: 700; }
.z-cloth .cost { font-size: 11px; color: var(--muted); }
.z-cloth .cost.free { color: var(--ok); }

/* ---------- Başlık düğmeleri (tema + lider tablosu) ---------- */
.z-headbtns { display: flex; gap: 8px; }
.z-langbtn { height: 40px; padding: 0 12px; font-size: 13px; }
@media (max-width: 520px) { .z-langbtn { padding: 0 9px; font-size: 12px; } }

/* ---------- Lider tablosu (sağ üstten açılan pencere) ---------- */
.z-lbmodal {
  position: fixed; inset: 0; z-index: 85; display: grid; place-items: start end; padding: 70px 16px 16px;
  background: color-mix(in srgb, var(--bg) 55%, transparent); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.z-lbcard { width: min(420px, 100%); max-height: calc(100dvh - 90px); overflow: auto; padding: 20px; border-radius: 22px; background: var(--surface-2); border: 1px solid var(--border); box-shadow: var(--shadow); display: grid; gap: 12px; align-content: start; animation: lbIn .22s ease-out; }
@keyframes lbIn { from { opacity: 0; transform: translateY(-8px) scale(.98); } to { opacity: 1; transform: none; } }
.z-lbcard-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.z-lbcard-top h2 { font-size: 19px; letter-spacing: -0.02em; }
.z-lb-close { width: 32px; height: 32px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface); font-size: 15px; }
@media (max-width: 480px) { .z-lbmodal { padding: 64px 10px 10px; place-items: start stretch; } .z-lbcard { width: 100%; } }

/* ---------- Global kayıtlar (efsanevi düşüşler) — sağ üstte sürekli açık, küçük ve kalıcı panel ---------- */
/* "tam boy" bir modal değil: arka planı karartmaz/bulanıklaştırmaz, sayfayla birlikte kayar, en fazla birkaç satır yer kaplar. */
.z-feedpanel { position: fixed; top: 74px; right: 16px; z-index: 60; width: 250px; max-height: 260px; display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; border-radius: 16px; background: color-mix(in srgb, var(--surface-2) 92%, transparent); border: 1px solid var(--border); box-shadow: var(--shadow); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.z-feedpanel.collapsed { max-height: none; }
.z-feedpanel.collapsed .z-feed-list { display: none; }
.z-feedpanel-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.z-feedpanel-top h2 { font-size: 12.5px; font-weight: 800; letter-spacing: -0.01em; }
.z-feedpanel-min { width: 22px; height: 22px; flex: none; border-radius: 7px; border: 1px solid var(--border); background: var(--surface); font-size: 13px; line-height: 1; }
.z-feedcard { width: min(380px, 100%); }
.z-feed-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; overflow-y: auto; }
.z-feed-list li { padding: 8px 10px; border-radius: 10px; background: var(--surface); border: 1px solid var(--border); font-size: 12px; line-height: 1.4; animation: lbIn .25s ease-out; }
.z-feed-list .u { color: var(--muted); font-weight: 700; } /* kullanıcı adı: gri (ileride paralı renklendirme eklenecek) */
.z-feed-list .item { font-weight: 800; background: linear-gradient(120deg, #f43f5e, #a855f7, #6366f1); -webkit-background-clip: text; background-clip: text; color: transparent; }
.z-feed-list .t { display: block; margin-top: 2px; font-size: 10px; color: var(--muted); }
.z-feed-empty { text-align: center; color: var(--muted); padding: 10px 0; font-size: 12px; }
/* Yalnızca masaüstü genişliğinde: telefonda yer kaplamasın diye panel de, göster/gizle düğmesi de gizlenir */
@media (max-width: 900px) { .z-feed-only-web { display: none !important; } }
@media (max-width: 1180px) { .z-feedpanel { display: none !important; } } /* dar masaüstünde ana içerikle çakışmasın */

/* ---------- Hesap kapısı ---------- */
.z-authgate {
  position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 16px;
  background: color-mix(in srgb, var(--bg) 78%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.z-authcard { width: min(400px, 100%); padding: 26px 24px; border-radius: 22px; background: var(--surface-2); border: 1px solid var(--border); box-shadow: var(--shadow); display: grid; gap: 14px; }
.z-authcard h2 { font-size: 22px; letter-spacing: -0.02em; }
.z-rp-card { margin: 0 auto; width: min(400px, 100% - 32px); } /* şifre sıfırlama sayfası (satır içi style= CSP'ye takılıyordu) */
.z-rp-back { margin-top: 14px; text-align: center; }
.z-authtabs { display: flex; gap: 8px; }
.z-authtab { flex: 1; padding: 10px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); font-weight: 700; font-size: 14px; }
.z-authtab.active { background: var(--grad); color: #fff; border-color: transparent; }
.z-authform { display: grid; gap: 12px; }
.z-authform label { display: grid; gap: 6px; font-size: 13.5px; font-weight: 700; }
.z-authform input { padding: 12px 14px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); color: var(--text); font: inherit; }
.z-authform input:focus { outline: 2px solid var(--accent-2); outline-offset: 1px; }
.z-autherr { min-height: 1.3em; color: var(--danger) !important; font-size: 13.5px; font-weight: 700; margin: 0 !important; }
.z-autherr:empty { min-height: 0; }
.z-authok { color: var(--ok) !important; font-size: 13.5px; font-weight: 700; margin: 0 !important; text-align: center; }
.z-authform label small { color: var(--muted); font-weight: 500; }
.z-authforgot { justify-self: start; background: none; border: 0; padding: 0; color: var(--accent-2); font-weight: 700; font-size: 13px; text-decoration: underline; text-underline-offset: 2px; }

/* ---------- Hesap satırı (istatistik sekmesi) ---------- */
.z-account { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.btn.ghost { background: none; }

/* ---------- İstatistik ---------- */
.z-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; }
.z-stats div { padding: 12px 14px; border-radius: 14px; background: var(--surface); border: 1px solid var(--border); }
.z-stats small { display: block; color: var(--muted); font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.z-stats b { font-size: 19px; font-variant-numeric: tabular-nums; }
.z-reset { justify-self: start; }

/* ---------- Meydan: yan yana karakterler + sohbet ---------- */
.z-meydan-status { font-size: 12px; color: var(--muted); font-weight: 700; }
.z-meydan-roomrow { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.z-meydan-roombtns { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.btn.small { padding: 7px 12px; font-size: 12.5px; border-radius: 999px; }
.z-meydan-joinform { display: flex; gap: 6px; }
.z-meydan-joinform input { width: 64px; padding: 7px 10px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); color: var(--text); font: inherit; text-transform: uppercase; text-align: center; letter-spacing: .06em; }
.z-meydan-joinform input:focus { outline: 2px solid var(--accent-2); outline-offset: 1px; }
.z-meydan-roomlist { display: grid; gap: 6px; padding: 10px; border-radius: 14px; background: var(--surface); border: 1px solid var(--border); max-height: 160px; overflow-y: auto; }
.z-meydan-roomlist-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 8px; border-radius: 10px; background: var(--surface-2); font-size: 13px; font-weight: 700; }
.z-meydan-roomlist-empty { text-align: center; color: var(--muted); font-size: 12.5px; padding: 6px 0; }
.z-meydan-row { display: flex; gap: 12px; overflow-x: auto; padding: 16px 4px 10px; /* üstte şapka payı */ border-radius: 14px; background: var(--surface); border: 1px solid var(--border); min-height: 92px; }
.z-meydan-av { flex: none; display: grid; justify-items: center; gap: 2px; width: 62px; }
.z-meydan-av .canv-wrap { position: relative; width: 44px; height: 66px; }
.z-meydan-av canvas { image-rendering: pixelated; display: block; }
.z-meydan-av .nm { font-size: 10px; font-weight: 700; max-width: 62px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.z-meydan-av .ttl { font-size: 8.5px; font-weight: 800; max-width: 62px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; background: linear-gradient(120deg, #f59e0b, #ef4444); -webkit-background-clip: text; background-clip: text; color: transparent; }
.z-meydan-av .lvl { font-size: 9px; color: var(--muted); }
.z-meydan-av .pet { display: flex; align-items: center; gap: 2px; font-size: 9px; font-weight: 700; color: var(--accent-2); max-width: 62px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 1px; }
.z-meydan-av .pet .ic { font-size: 11px; }
.z-meydan-empty { flex: 1; display: grid; place-items: center; color: var(--muted); font-size: 12.5px; }
.z-meydan-log { list-style: none; margin: 0; padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; height: 220px; overflow-y: auto; border-radius: 14px; background: var(--surface); border: 1px solid var(--border); font-size: 13px; }
.z-meydan-log li { line-height: 1.45; word-break: break-word; }
.z-meydan-log .u { font-weight: 800; color: var(--accent-2); }
.z-meydan-log .sys { color: var(--muted); font-style: italic; font-size: 12px; }
.z-meydan-form { display: flex; gap: 8px; }
.z-meydan-form input { flex: 1; padding: 11px 14px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); color: var(--text); font: inherit; }
.z-meydan-form input:focus { outline: 2px solid var(--accent-2); outline-offset: 1px; }
.z-meydan-form button { flex: none; }

/* ---------- Market: pet satın al / adlandır ---------- */
.z-zp-row { display: flex; align-items: center; gap: 6px; padding: 10px 14px; border-radius: 14px; background: var(--surface); border: 1px solid var(--border); width: fit-content; font-weight: 800; font-variant-numeric: tabular-nums; }
.z-zp-ic { font-size: 16px; }
#zZpLabel { color: var(--muted); font-weight: 700; font-size: 12px; }
.z-pet-picker { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.z-pet-option { display: grid; justify-items: center; gap: 4px; padding: 16px 10px; border-radius: 16px; background: var(--surface); border: 1px solid var(--border); cursor: pointer; transition: border-color .2s, background .2s, transform .15s; }
.z-pet-option:hover { transform: translateY(-1px); }
.z-pet-option.active { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, var(--surface)); }
.z-pet-ic { font-size: 34px; }
.z-pet-ic.big { font-size: 44px; }
.z-pet-cost { font-size: 12px; color: var(--muted); font-weight: 700; }
.z-pet-buyform { display: flex; gap: 8px; margin-top: 12px; }
.z-pet-buyform input { flex: 1; padding: 11px 14px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); color: var(--text); font: inherit; }
.z-pet-buyform input:focus { outline: 2px solid var(--accent-2); outline-offset: 1px; }
.z-pet-card { display: flex; align-items: center; gap: 14px; padding: 16px; border-radius: 16px; background: var(--surface); border: 1px solid var(--border); }
.z-pet-card b { font-size: 17px; display: block; }
.z-pet-card span.muted { display: block; margin-top: 2px; }
.z-pet-feedrow { display: flex; align-items: center; gap: 8px; margin-top: 12px; }
.z-pet-feedrow .z-hunger { flex: 1; }
.z-pet-feedrow button { flex: none; }

@media (max-width: 480px) {
  .z-water { height: 200px; }
  /* Dar ekranda ortadaki ipucu karakterin üstüne biniyordu: gökyüzüne (sahnenin üstüne) alınır */
  .z-hint { align-self: start; margin-top: 8px; max-width: 78%; padding: 4px 11px; font-size: 12.5px; }
  .z-farm { left: 29%; right: 2%; gap: 6px; }
  .z-plot .pc { font-size: 22px; }
  .z-plot.ripe .pc { font-size: 26px; }
  .z-plot .pl { font-size: 9.5px; }
  .z-crop { padding: 8px 4px; }
  .z-crop .ci { font-size: 21px; }
  .z-tab { font-size: 13px; padding: 10px 8px; }
}